/* =========================================================================
   VOYAGELLES — main.css
   Agence de voyages entre femmes · Inde authentique

   FILOSOFÍA (igual que Medicontur):
   - Bootstrap 5.3 (CDN) hace el ANDAMIAJE: grid (row/col), flex, spacing,
     navbar colapsable, acordeón, botones base.
   - Este archivo aporta solo la IDENTIDAD: tokens de color, tipografía,
     hero, tarjetas de marca, kolam (firma), microinteracciones.
   Regla de oro: NUNCA hex suelto fuera de :root.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TOKENS  ·  variables CSS
   ------------------------------------------------------------------------- */
:root {
    /* Paleta de marca (cliente) */
    --sand:            #E1CE7A;
    --cream:           #FBFFB9;
    --apricot:         #FDD692;
    --peach:           #EC7357;   /* Burnt Peach — acento de marca */
    --bark:            #754F44;   /* Mauve Bark — UI oscura / títulos */

    /* Acento secundario (verde Kerala) + CTA accesible */
    --emerald:         #1C5B4C;
    --emerald-soft:    #E5EFE9;
    --terracotta:      #C24A28;   /* CTA sólido con texto blanco (AA) */
    --terracotta-dark: #A63C1F;

    /* Superficies */
    --bg:              #FBF6EC;
    --bg-warm:         #F6ECD9;
    --surface:         #FFFFFF;
    --cream-soft:      #FCF5DD;

    /* Texto */
    --ink:             #3A2A24;
    --ink-soft:        #6B564E;
    --ink-faint:       #9C8A82;

    /* Bordes */
    --border:          #ECE0CC;
    --border-strong:   #E0CFB2;

    /* Sombras progresivas */
    --shadow-sm:       0 2px 10px rgba(117, 79, 68, 0.08);
    --shadow-md:       0 10px 30px rgba(117, 79, 68, 0.12);
    --shadow-lg:       0 22px 55px rgba(117, 79, 68, 0.18);

    /* Radios */
    --radius:          16px;
    --radius-lg:       24px;
    --radius-pill:     999px;

    /* Transiciones */
    --transition:      all 0.25s ease;
    --transition-slow: all 0.55s cubic-bezier(0.22, 1, 0.36, 1);

    /* Tipografía */
    --font-display:    "Fraunces", Georgia, "Times New Roman", serif;
    --font-body:       "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Bootstrap overrides (tokens que SÍ entiende Bootstrap) */
    --bs-body-font-family: var(--font-body);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--bg);
}

/* -------------------------------------------------------------------------
   2. BASE  ·  solo lo que cambia respecto a Bootstrap
   ------------------------------------------------------------------------- */
/* overflow-x: hidden neutraliza el desplazamiento horizontal de las
   animaciones AOS (fade-left/right arrancan trasladadas ~100px) sin
   perder las animaciones ni afectar al navbar (fixed, no sticky). */
html { overflow-x: hidden; }

body {
    color: var(--ink);
    background-color: var(--bg);
    line-height: 1.65;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-display);
    color: var(--bark);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.01em;
}

a { color: var(--emerald); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--terracotta); }

img { max-width: 100%; }

:focus-visible {
    outline: 3px solid var(--peach);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Ritmo de sección con espaciado FLUIDO (sin equivalente en Bootstrap) */
.section       { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--warm  { background-color: var(--bg-warm); }

/* Eyebrow / títulos / lead (tipografía de marca) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--peach); }
.eyebrow--center::before { display: none; }

.section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); margin-bottom: 1rem; }
.lead-voyage   { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }
.text-peach    { color: var(--peach) !important; }

/* -------------------------------------------------------------------------
   3. BOTONES  ·  modificadores de marca sobre el .btn de Bootstrap
   ------------------------------------------------------------------------- */
.btn-voyage,
.btn-voyage-outline,
.btn-voyage-light {
    --bs-btn-padding-y: 0.85rem;
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-border-width: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    transition: var(--transition);
}
.btn-voyage {
    --bs-btn-color: #fff;            --bs-btn-bg: var(--terracotta);            --bs-btn-border-color: var(--terracotta);
    --bs-btn-hover-color: #fff;      --bs-btn-hover-bg: var(--terracotta-dark); --bs-btn-hover-border-color: var(--terracotta-dark);
    --bs-btn-active-bg: var(--terracotta-dark);
}
.btn-voyage:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.btn-voyage-outline {
    --bs-btn-color: var(--bark);     --bs-btn-bg: transparent;       --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-color: #fff;      --bs-btn-hover-bg: var(--bark);  --bs-btn-hover-border-color: var(--bark);
}
.btn-voyage-outline:hover { transform: translateY(-2px); }
.btn-voyage-light {
    --bs-btn-color: #fff;            --bs-btn-bg: rgba(255,255,255,0.14);  --bs-btn-border-color: rgba(255,255,255,0.55);
    --bs-btn-hover-color: var(--bark); --bs-btn-hover-bg: #fff;            --bs-btn-hover-border-color: #fff;
    backdrop-filter: blur(6px);
}
.btn-voyage-light:hover { transform: translateY(-2px); }

/* -------------------------------------------------------------------------
   4. NAVBAR  ·  Bootstrap navbar + estado transparente -> sólido al scroll
   ------------------------------------------------------------------------- */
.nav-voyage {
    transition: var(--transition);
    background: transparent;
}
.nav-voyage.is-scrolled { background: var(--bg); box-shadow: var(--shadow-sm); }

.navbar-brand {margin-right: 0;}
.navbar-brand:hover { color: var(--peach); }

.nav-brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.6rem;
    letter-spacing: -0.02em;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.nav-brand .bi { color: var(--peach); font-size: 1.3rem; }
.is-scrolled .nav-brand { color: var(--bark); }

.nav-voyage .nav-link {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 500;
    position: relative;
}
.nav-voyage .nav-link::after {
    content: ""; position: absolute; left: var(--bs-navbar-nav-link-padding-x); right: var(--bs-navbar-nav-link-padding-x);
    bottom: 4px; height: 2px; width: 0; margin: 0 auto;
    background: var(--peach); transition: var(--transition);
}
.nav-voyage .nav-link:hover::after { width: calc(100% - 2 * var(--bs-navbar-nav-link-padding-x)); }
.is-scrolled .nav-voyage .nav-link,
.is-scrolled.nav-voyage .nav-link { color: var(--bark); }

.nav-icon-btn {
    background: none; border: none; color: #fff;
    font-size: 1.25rem; line-height: 1; cursor: pointer;
    transition: var(--transition);
}
.is-scrolled .nav-icon-btn { color: var(--bark); }
.nav-icon-btn:hover { color: var(--peach); }

.nav-voyage .navbar-toggler { border: none; color: #fff; font-size: 1.6rem; padding: 0; box-shadow: none; }
.is-scrolled .navbar-toggler { color: var(--bark); }

/* Menú desplegado en móvil: fondo claro y texto oscuro */
@media (max-width: 991.98px) {
    .nav-voyage .navbar-collapse {
        background: var(--bg);
        margin-top: 0.5rem;
        padding: 0.5rem 1rem 0.5rem 1rem;
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
    }
    .nav-voyage .nav-link { color: var(--bark); }
    .nav-voyage .nav-link::after { display: none; }
}

/* -------------------------------------------------------------------------
   5. HERO
   ------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(58,42,36,0.45) 0%, rgba(58,42,36,0.15) 35%, rgba(58,42,36,0.78) 100%);
}
.hero__inner { padding-block: 9rem 4rem; max-width: 760px; }
.hero .eyebrow { color: var(--apricot); }
.hero .eyebrow::before { background: var(--apricot); }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 6.4vw, 4.7rem); font-weight: 500; }
.hero h1 em { font-style: italic; color: var(--apricot); }
.hero__sub { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: rgba(255,255,255,0.92); max-width: 56ch; }
.hero__trust { font-size: 0.92rem; color: rgba(255,255,255,0.9); }
.hero__trust .bi { color: var(--apricot); font-size: 1.05rem; }

/* -------------------------------------------------------------------------
   6. KOLAM  ·  motivo firma
   ------------------------------------------------------------------------- */
.kolam { display: flex; justify-content: center; color: var(--border-strong); }
.kolam svg { width: 130px; height: auto; }

/* -------------------------------------------------------------------------
   7. PILARES (USP)  ·  tarjetas minimalistas; el grid lo pone Bootstrap
   ------------------------------------------------------------------------- */
.pillar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.1rem 1.75rem 1.9rem;
    transition: var(--transition-slow);
}
.pillar__icon {
    width: 66px; height: 66px;
    margin: 0 auto 1.1rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--emerald-soft);
    color: var(--emerald);
    font-size: 1.7rem;
}
.pillar:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.pillar:hover { color: var(--terracotta); }
.pillar__title { font-size: 1.2rem; margin-bottom: 0.5rem; text-align: center;}
.pillar__text  { color: var(--ink-soft); font-size: 0.95rem; margin: 0; }

/* -------------------------------------------------------------------------
   8. MEDIA + TEXTO (concept, expérience, fondatrice)
   ------------------------------------------------------------------------- */
.media-img {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4 / 5;
}
.media-img img { width: 100%; height: 100%; object-fit: cover; }
.media-img .tag-float {
    position: absolute; left: 1.2rem; bottom: 1.2rem;
    background: rgba(255,255,255,0.92); color: var(--bark);
    padding: 0.55rem 1rem; border-radius: var(--radius-pill);
    font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow-sm);
    display: inline-flex; align-items: center; gap: 0.45rem;
    backdrop-filter: blur(4px);
}
.media-img .tag-float .bi { color: var(--terracotta); }

.feature-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.feature-list li {
    display: flex; gap: 0.85rem; padding: 0.7rem 0;
    border-bottom: 1px solid var(--border); color: var(--ink-soft);
}
.feature-list li:last-child { border-bottom: none; }
.feature-list .bi { color: var(--emerald); font-size: 1.2rem; margin-top: 0.15rem; flex-shrink: 0; }
.feature-list strong { color: var(--ink); display: block; font-weight: 600; }

@media (max-width: 991.98px) {
    .media-img { aspect-ratio: 16 / 11; max-height: 460px; }
}

/* -------------------------------------------------------------------------
   9. TARJETA DE VIAJE  ·  sobre el .card de Bootstrap
   ------------------------------------------------------------------------- */
.voyage-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-slow);
}
.voyage-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.voyage-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.voyage-card__media img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-slow); }
.voyage-card:hover .voyage-card__media img { transform: scale(1.06); }
.voyage-badge {
    position: absolute; top: 1rem; left: 1rem;
    background: rgba(255,255,255,0.95); color: var(--bark);
    font-size: 0.76rem; font-weight: 600;
    padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}
.voyage-card__meta { font-size: 0.85rem; color: var(--ink-faint); }
.voyage-card__meta .bi { color: var(--peach); }
.voyage-card__title { font-size: 1.4rem; line-height: 1.2; }
.voyage-card__loc { color: var(--ink-soft); font-size: 0.95rem; }
.voyage-card__loc .bi { color: var(--emerald); }
.voyage-price small { display: block; font-size: 0.78rem; color: var(--ink-faint); }
.voyage-price strong { font-family: var(--font-display); font-size: 1.55rem; color: var(--bark); font-weight: 600; }

/* -------------------------------------------------------------------------
   9.1 PANEL "DE LA FRANCE À L'INDE"  ·  mapa + trajet animé (SVG, sin deps)
       Rellena el hueco mientras solo hay un viaje activo. El mapa de fondo
       es un SVG externo recoloreado vía CSS mask (assets/img/world-map.svg).
       El trazo + avión los dispara main.js (SMIL begin="indefinite") al
       entrar en pantalla; respeta prefers-reduced-motion (estado final fijo).
   ------------------------------------------------------------------------- */
.route-panel {
    /* background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); */
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.route-panel__stage {
    position: relative;
    aspect-ratio: 784.077 / 458.627;
    border-radius: var(--radius);
    overflow: hidden;
    /* background: var(--bg-warm); */
}
.route-panel__map {
    position: absolute; inset: 0;
    background-color: var(--border-strong);
    opacity: 0.55;
    -webkit-mask-image: url("../img/world-map.svg");
    mask-image: url("../img/world-map.svg");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.route-panel__route { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-panel__line-bg {
    fill: none; stroke: var(--terracotta); stroke-width: 2;
    stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: 0.35;
}
.route-panel__line { fill: none; stroke: var(--terracotta); stroke-width: 2.5; stroke-linecap: round; }
.route-panel__point circle { fill: var(--terracotta); }
.route-panel__plane foreignObject { display:block; width:100%; height:100%; transform: rotate(100deg); }
.route-panel__plane foreignObject i{ color: var(--terracotta); }
.route-panel__label {
    position: absolute; transform: translate(-50%, -160%);
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--bark); background: var(--surface);
    padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm); white-space: nowrap;
}
.route-panel__label--end { transform: translate(-50%, 55%); }
.route-panel__caption {
    display: flex; align-items: center; justify-content: center; gap: 0.6rem;
    color: var(--ink-soft); font-size: 0.92rem; margin: 0;
}
.route-panel__caption .bi { color: var(--terracotta); font-size: 1.15rem; flex-shrink: 0; }

/* -------------------------------------------------------------------------
   10. COMMENT ÇA MARCHE  ·  timeline scroll-driven (IntersectionObserver)
       Base = horizontal (escritorio). Móvil = vertical (ver media query).
       main.js fija .is-active (paso encendido) y la variable --f (relleno
       de cada tramo) según el progreso de scroll.
   ------------------------------------------------------------------------- */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 1.75rem; }
.tl-step  { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }

/* Rail = punto + barra de conexión hacia el siguiente paso */
.tl-rail { position: relative; display: flex; align-items: center; justify-content: center; height: 58px; }
.tl-dot {
    flex: 0 0 58px; width: 58px; height: 58px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border-strong);
    color: var(--ink-faint);
    font-size: 1.4rem;
    transition: var(--transition);
    position: relative; z-index: 1;
}
.tl-bar { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); width: calc(100% + 1.75rem); height: 3px; background: var(--border-strong); border-radius: 2px; }
.tl-bar__fill {
    position: absolute; inset: 0;
    background: var(--terracotta); border-radius: 2px;
    transform: scaleX(var(--f, 0)); transform-origin: left;
    transition: transform 0.12s linear;
}
.tl-step:last-child .tl-bar { display: none; }

/* Tarjeta del paso (reutiliza el look de .step) */
.step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.9rem 1.6rem;
}
.step h3 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.step p  { color: var(--ink-soft); }

.tl-card {
    flex: 1 1 auto;
    margin-top: 1.5rem;
    opacity: 0.6;
    transition: opacity 0.45s ease, box-shadow var(--transition-slow);
}
.tl-card__label {
    display: block;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink-faint); margin-bottom: 0.55rem;
}

/* Estado activo (lo marca el IntersectionObserver) */
.tl-step.is-active .tl-dot {
    background: var(--terracotta); border-color: var(--terracotta); color: #fff;
    box-shadow: 0 0 0 6px rgba(194, 74, 40, 0.12);
}
.tl-step.is-active .tl-card { opacity: 1; box-shadow: var(--shadow-md); }

/* Móvil: la timeline pasa a VERTICAL */
@media (max-width: 767.98px) {
    .timeline { flex-direction: column; gap: 0; }
    .tl-step  { flex: none; display: grid; grid-template-columns: 58px 1fr; column-gap: 1.1rem; }
    .tl-rail  { flex-direction: column; justify-content: flex-start; height: 100%; align-items: center; }
    .tl-bar   { position: relative; top: auto; left: auto; transform: none; width: 3px; height: auto; flex: 1 1 auto; margin-top: 6px; }
    .tl-bar__fill { transform: scaleY(var(--f, 0)); transform-origin: top; }
    .tl-card  { margin: 0 0 1.75rem; padding-top: 1rem; }
    .tl-step:last-child .tl-card { margin-bottom: 0; }
}

/* -------------------------------------------------------------------------
   11. FONDATRICE
   ------------------------------------------------------------------------- */
.founder-quote {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.8vw, 2rem);
    font-style: italic; color: var(--bark); line-height: 1.4;
    margin-bottom: 1.6rem;
}
.founder-quote::before {
    content: "\201C"; display: block; font-size: 3.5rem;
    color: var(--peach); line-height: 0.6; margin-bottom: 0.6rem;
}
.founder-sign { font-weight: 600; color: var(--ink); }
.founder-sign span { color: var(--ink-faint); font-weight: 400; display: block; font-size: 0.9rem; }

/* -------------------------------------------------------------------------
   12. FAQ  ·  re-estilo del acordeón de Bootstrap
   ------------------------------------------------------------------------- */
.accordion-voyage {
    --bs-accordion-border-color: var(--border);
    --bs-accordion-border-radius: var(--radius);
    --bs-accordion-bg: var(--surface);
    --bs-accordion-active-bg: var(--cream-soft);
    --bs-accordion-active-color: var(--terracotta);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(236,115,87,0.25);
}
.accordion-voyage .accordion-item { margin-bottom: 0.9rem; border-radius: var(--radius) !important; overflow: hidden; }
.accordion-voyage .accordion-button { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--bark); }
.accordion-voyage .accordion-button::after {
    background-image: none; content: "\F64D"; /* bi-plus-lg */
    font-family: "bootstrap-icons"; font-size: 1rem; width: auto; height: auto; transition: var(--transition);
}
.accordion-voyage .accordion-button:not(.collapsed)::after { content: "\F63B"; transform: none; } /* bi-dash-lg */

/* -------------------------------------------------------------------------
   12.1 LEAD FORM  ·  formulario de contacto (columna derecha de la FAQ)
        El grid y los controles base son de Bootstrap (.form-control,
        .form-select, .invalid-feedback); aquí solo la identidad de marca.
        El envío lo gestiona main.js (módulo 6).
   ------------------------------------------------------------------------- */
.lead-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 2.2rem 1.9rem;
}
.lead-form__title { font-size: 1.5rem; margin-bottom: 0.5rem; }
.lead-form__intro { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.6rem; }
.lead-form__req   { color: var(--terracotta); }

.lead-form .form-label {
    font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 0.35rem;
}
.lead-form .form-control,
.lead-form .form-select {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background-color: var(--bg);
    color: var(--ink);
    padding: 0.7rem 0.9rem;
    font-size: 0.95rem;
    transition: var(--transition);
}
.lead-form .form-control::placeholder { color: var(--ink-faint); }
.lead-form .form-control:focus,
.lead-form .form-select:focus {
    border-color: var(--peach);
    box-shadow: 0 0 0 3px rgba(236, 115, 87, 0.18);
    background-color: var(--surface);
}
.lead-form textarea.form-control { resize: vertical; min-height: 110px; }
.lead-form .btn-voyage { margin-top: 0.4rem; }

/* Mensajes de error SIN SALTO de layout (técnica del Portfolio):
   Bootstrap pasa .invalid-feedback de display:none a block, lo que añade una
   línea de alto real y empuja todo hacia abajo. Aquí lo sacamos del flujo
   (position:absolute) y reservamos su hueco por adelantado (padding-bottom),
   así ni salta ni se solapa con la etiqueta siguiente.
   :has() selecciona solo los grupos que llevan mensaje (el textarea no). */
.lead-form .mb-3:not(.row):has(.invalid-feedback),
.lead-form .row > [class*="col-"]:has(.invalid-feedback) {
    position: relative;
    padding-bottom: 1rem;
    margin-top: 0;
}
.lead-form .invalid-feedback {
    position: absolute;
    left: 0; right: 0; bottom: 0.1rem;
    margin-top: 0;
    font-size: 0.75rem;
    line-height: 0.8;
}
/* Dentro de una .row, las columnas tienen padding lateral (gutter):
   compensamos para que el mensaje quede alineado con el campo. */
.lead-form .row > [class*="col-"] .invalid-feedback {
    left: calc(var(--bs-gutter-x) * 0.5);
    right: calc(var(--bs-gutter-x) * 0.5);
}

.lead-form__legal {
    font-size: 0.78rem; color: var(--ink-faint);
    margin: 1rem 0 0; text-align: center;
}

/* Estado de confirmación tras el envío */
.lead-form__success { text-align: center; padding: 2.5rem 0.5rem; }
.lead-form__success .bi {
    display: block; font-size: 3rem; color: var(--emerald); margin-bottom: 0.9rem;
}
.lead-form__success p { color: var(--ink-soft); margin: 0; }

/* -------------------------------------------------------------------------
   13. CTA FINAL (banda con imagen)
   ------------------------------------------------------------------------- */
.cta-band {
    position: relative; overflow: hidden;
    border-radius: var(--radius-lg); color: #fff;
    padding: clamp(3.5rem, 8vw, 6rem) 1.5rem;
    box-shadow: var(--shadow-lg);
}
.cta-band__media { position: absolute; inset: 0; z-index: -2; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(120deg, rgba(117,79,68,0.85), rgba(28,91,76,0.7));
}
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.cta-band p  { color: rgba(255,255,255,0.92); font-size: 1.15rem; }

/* -------------------------------------------------------------------------
   14. FOOTER  ·  el grid lo pone Bootstrap (row/col); aquí solo identidad
   ------------------------------------------------------------------------- */
.footer { background: var(--bark); color: rgba(255,255,255,0.78); }
.footer a { color: rgba(255,255,255,0.78); }
.footer a:hover { color: var(--apricot); }
.footer .nav-brand { color: #fff; }
.footer__pitch { font-size: 0.95rem; max-width: 34ch; }
.footer__social a {
    width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; font-size: 1.05rem;
}
.footer__social a:hover { background: var(--peach); color: #fff; }
.footer__col h4 {
    color: #fff; font-family: var(--font-body);
    font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: 0.65rem; font-size: 0.95rem; }

.newsletter form {
    display: flex; gap: 0.6rem;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--radius-pill); padding: 0.35rem 0.35rem 0.35rem 1.1rem; max-width: 360px;
}
.newsletter input {
    flex: 1; min-width: 0; /* evita overflow en móviles estrechos */
    background: none; border: none; color: #fff; font-size: 0.95rem; outline: none;
}
.newsletter input::placeholder { color: rgba(255,255,255,0.55); }
.newsletter button {
    border: none; background: var(--peach); color: #fff;
    font-weight: 600; font-size: 0.9rem; padding: 0.6rem 1.2rem;
    border-radius: var(--radius-pill); cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.newsletter button:hover { background: var(--terracotta); }
.footer__bottom { font-size: 0.85rem; color: rgba(255,255,255,0.55); }
.footer__bottom .bi { color: var(--peach); }

/* -------------------------------------------------------------------------
   15. AOS fallback + accesibilidad
   ------------------------------------------------------------------------- */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}