/*
 * Tokens de componente del Hero (RFC-001, Fase 3). Define el aspecto del Hero en términos de
 * --vx-hero-{target}-{prop} con FALLBACK a la marca (--vectiss-*) y a los valores actuales.
 *
 * Convivencia con el Design System: SIN Elementor, los tokens --vx-hero-* no están definidos →
 * se usa el fallback → aspecto IDÉNTICO al actual. CON Elementor, los controles nativos fijan
 * esos tokens en el wrapper y sobrescriben por instancia, sin tocar el Design System.
 *
 * Se carga DESPUÉS de vectiss.css (dependencia 'vectiss-autos') para ganar la cascada.
 */
.vectiss-hero {
    background: var(--vx-hero-root-bg, var(--vectiss-primary));
    padding: var(--vx-hero-root-padding, clamp(3rem, 9vw, 7rem) 0);
    border-style: solid;
    border-width: var(--vx-hero-root-border-width, 0);
    border-color: var(--vx-hero-root-border-color, transparent);
    border-radius: var(--vx-hero-root-radius, 0);
}

.vectiss-hero h1 {
    font-family: var(--vx-hero-title-font, var(--vectiss-font-2));
    font-size: var(--vx-hero-title-size, clamp(2rem, 5vw, 3.4rem));
    font-weight: var(--vx-hero-title-weight, var(--vectiss-peso-titulo));
    color: var(--vx-hero-title-color, #fff);
}

.vectiss-hero p {
    font-family: var(--vx-hero-subtitle-font, inherit);
    font-size: var(--vx-hero-subtitle-size, clamp(1rem, 2vw, 1.3rem));
    font-weight: var(--vx-hero-subtitle-weight, inherit);
    color: var(--vx-hero-subtitle-color, #fff);
}

.vectiss-hero-cta {
    font-family: var(--vx-hero-cta-font, inherit);
    font-size: var(--vx-hero-cta-size, 1rem);
    font-weight: var(--vx-hero-cta-weight, 600);
    color: var(--vx-hero-cta-color, #fff);
    background: var(--vx-hero-cta-bg, var(--vectiss-btn-primary, var(--vectiss-cta-reserva)));
    border-style: solid;
    border-width: var(--vx-hero-cta-border-width, 0);
    border-color: var(--vx-hero-cta-border-color, transparent);
    border-radius: var(--vx-hero-cta-radius, var(--vectiss-boton, 999px));
}