/* ==========================================================================
   WAWI · COMPONENTES COMPARTIDOS
   Fuente única de verdad para estructura, encabezados, héroes y footer.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Estructura de página
   -------------------------------------------------------------------------- */
.page-main{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* --------------------------------------------------------------------------
   Hero principal
   -------------------------------------------------------------------------- */
.site-hero{
    width:100%;
    margin:0;
    box-sizing:border-box;
}

/* Distancia visual entre el hero y la primera sección de contenido. */
.site-hero + section,
.site-hero + .content-section{
    padding-top:30px!important;
}

/* --------------------------------------------------------------------------
   Encabezado de sección
   -------------------------------------------------------------------------- */
.section-head{
    width:min(760px,90%);
    max-width:760px;
    margin:0 auto 34px;
    padding:0;
    text-align:center;
    box-sizing:border-box;
}

.section-kicker{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    width:100%;
    margin:0 0 14px;
    padding:0;
    color:#2f54ff;
    font-family:inherit;
    font-size:11px;
    line-height:1.2;
    font-weight:500;
    letter-spacing:.16em;
    text-transform:uppercase;
    text-align:left;
}

.section-kicker::before{
    content:"";
    display:block;
    flex:0 0 34px;
    width:34px;
    min-width:34px;
    height:2px;
    background:#08cde5;
    border-radius:99px;
}

.section-title{
    max-width:820px;
    margin:0 0 16px;
    padding:0;
    color:#0b1238;
    font-family:inherit;
    font-size:clamp(24px,2.2vw,32px);
    line-height:1.35;
    font-weight:300;
    letter-spacing:-.4px;
    text-transform:none;
}

.section-title span{
    color:var(--azul-wawi);
    font-weight:300;
}

.section-description{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:0;
    color:var(--gris-texto);
    font-size:15px;
    line-height:1.75;
    font-weight:300;
    text-align:center;
}

/* --------------------------------------------------------------------------
   Footer compartido
   -------------------------------------------------------------------------- */
.wawi-footer{
    display:block;
    box-sizing:border-box;
    margin:0;
    padding:0;
    opacity:1;
    visibility:visible;
}

.wawi-footer-linea{
    width:90%;
    margin:0 auto;
}

.wawi-footer-contenedor{
    box-sizing:border-box;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:20px;
}

.wawi-footer-brand,
.wawi-footer-col,
.wawi-footer-brand p,
.wawi-footer-col > :last-child{
    margin-bottom:0;
}

.wawi-footer-copy{
    box-sizing:border-box;
    margin:0 auto;
    padding-top:20px;
    padding-bottom:20px;
}

.wawi-footer-copy p,
.wawi-footer-copy span{
    margin-top:0;
    margin-bottom:0;
}

/* --------------------------------------------------------------------------
   Responsive compartido
   -------------------------------------------------------------------------- */
@media(max-width:620px){
    .site-hero + section,
    .site-hero + .content-section{
        padding-top:30px!important;
    }

    .section-head{
        width:92%;
        margin-bottom:28px;
    }

    .section-kicker{
        gap:9px;
        margin-bottom:13px;
        font-size:11px;
        letter-spacing:.18em;
    }

    .section-kicker::before{
        flex-basis:26px;
        width:26px;
        min-width:26px;
        height:1px;
    }

    .section-title{
    max-width:820px;
        font-size:clamp(24px,7vw,29px);
        line-height:1.3;
    }

    .section-description{
        font-size:15px;
        line-height:1.7;
    }
}


/* --------------------------------------------------------------------------
   TÍTULO DE DOS LÍNEAS CONTROLADAS
   Cada span representa una línea exacta en escritorio.
   -------------------------------------------------------------------------- */
.section-title--two-lines{
    width:100%;
    max-width:none;
}

.section-title--two-lines .section-title-line{
    display:block;
    white-space:nowrap;
}

.section-title--two-lines .section-title-line--accent{
    color:var(--azul-wawi);
}

@media(max-width:760px){
    .section-title--two-lines .section-title-line{
        white-space:normal;
    }
}


/* --------------------------------------------------------------------------
   TÍTULO BICOLOR DE DOS LÍNEAS
   Primera línea oscura y segunda línea en azul Wawi.
   -------------------------------------------------------------------------- */
.section-title--two-lines .section-title-line{
    display:block;
    color:#0b1238;
    white-space:nowrap;
}

.section-title--two-lines .section-title-line--accent{
    color:var(--azul-wawi);
}

@media(max-width:760px){
    .section-title--two-lines .section-title-line{
        white-space:normal;
    }
}

/* --------------------------------------------------------------------------
   ALINEACIÓN HORIZONTAL DE TEXTOS DEL HERO
   Todas las páginas toman como referencia la posición del Index.
   -------------------------------------------------------------------------- */
@media(min-width:901px){
    .site-hero .wawi-hero-inner,
    .site-hero .behind-inner{
        width:min(1480px,92vw)!important;
        max-width:none!important;
        margin-left:auto!important;
        margin-right:auto!important;
        box-sizing:border-box!important;
    }

    .site-hero .wawi-hero-copy,
    .site-hero .behind-copy{
        padding-left:4px!important;
        margin-left:0!important;
        box-sizing:border-box!important;
    }
}

@media(max-width:900px){
    .site-hero .wawi-hero-inner,
    .site-hero .behind-inner{
        width:92vw!important;
        margin-left:auto!important;
        margin-right:auto!important;
    }

    .site-hero .wawi-hero-copy,
    .site-hero .behind-copy{
        padding-left:0!important;
    }
}

/* --------------------------------------------------------------------------
   CONTACTO · ANCHO DE CONTENIDO
   Mantiene el módulo centrado y evita que .page-main lo expanda.
   -------------------------------------------------------------------------- */
.page-main.contact-main{
    width:min(1180px,90%)!important;
    max-width:1180px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
}

.page-main.contact-main .assistant-shell,
.page-main.contact-main .contact-alternatives{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
}

@media(max-width:760px){
    .page-main.contact-main{
        width:92%!important;
        max-width:none!important;
    }
}




/* --------------------------------------------------------------------------
   ESPACIO ESTRUCTURAL ÚNICO ANTES DEL FOOTER
   -------------------------------------------------------------------------- */
.footer-gap{
    display:block!important;
    width:100%!important;
    height:25px!important;
    min-height:25px!important;
    max-height:25px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:#fff!important;
    box-sizing:border-box!important;
}

.page-main{
    padding-bottom:0!important;
    margin-bottom:0!important;
}

.page-main > :last-child{
    margin-bottom:0!important;
}

.footer-gap + .wawi-footer{
    margin-top:0!important;
}


/* ============================================================
   CTA FINAL UNIFICADO · 2026-07-19
   Corrige y normaliza la sección previa al footer en todas las páginas.
   ============================================================ */
@media (min-width: 901px) {
  .wawi-invita { display:block!important; width:100%!important; height:auto!important; min-height:0!important; padding:34px 0 38px!important; margin:0!important; overflow:hidden!important; background:linear-gradient(90deg,#fff 0%,#f5f7ff 100%)!important; }
  .wawi-invita .wawi-invita-contenedor { width:min(1180px,90%)!important; min-height:168px!important; height:auto!important; margin:0 auto!important; padding:0!important; display:grid!important; grid-template-columns:minmax(0,1fr) auto 220px!important; grid-template-areas:"copy button mascot"!important; align-items:center!important; justify-items:stretch!important; column-gap:36px!important; position:relative!important; }
  .wawi-invita .wawi-invita-texto { grid-area:copy!important; align-self:center!important; justify-self:stretch!important; margin:0!important; padding:0!important; text-align:left!important; }
  .wawi-invita .wawi-invita-texto h2 { margin:0 0 12px!important; max-width:740px!important; font-size:clamp(25px,2vw,31px)!important; line-height:1.22!important; font-weight:300!important; letter-spacing:-.45px!important; text-align:left!important; }
  .wawi-invita .wawi-invita-texto h2 span { display:block!important; color:#2f54ff!important; font:inherit!important; }
  .wawi-invita .wawi-invita-texto h2::after { display:none!important; content:none!important; }
  .wawi-invita .wawi-invita-texto p, .wawi-invita .wawi-invita-texto .section-description { margin:0!important; max-width:650px!important; font-size:15px!important; line-height:1.75!important; font-weight:300!important; text-align:left!important; }
  .wawi-invita .wawi-invita-btn { grid-area:button!important; align-self:center!important; justify-self:center!important; width:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:16px 30px!important; border-radius:18px!important; white-space:nowrap!important; font-size:14px!important; line-height:1.2!important; }
  .wawi-invita .wawi-invita-visual { grid-area:mascot!important; align-self:stretch!important; justify-self:stretch!important; width:220px!important; min-width:220px!important; height:168px!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; position:relative!important; overflow:visible!important; transform:none!important; animation:none!important; }
  .wawi-invita .wawi-invita-visual .wawi-invita-img, .wawi-invita .wawi-invita-img { position:relative!important; inset:auto!important; display:block!important; width:auto!important; max-width:205px!important; height:auto!important; max-height:184px!important; margin:0 auto!important; object-fit:contain!important; transform:none!important; translate:0 0!important; animation:wawiCtaMascotaDesktop 4.2s ease-in-out infinite!important; transform-origin:50% 82%!important; will-change:transform!important; }
}
@keyframes wawiCtaMascotaDesktop { 0%,100%{transform:translate3d(0,3px,0) rotate(0deg)} 50%{transform:translate3d(0,-7px,0) rotate(-.35deg)} }
@media (max-width: 900px) {
  .wawi-invita .wawi-invita-visual { display:flex!important; align-items:center!important; justify-content:center!important; align-self:stretch!important; justify-self:stretch!important; width:100%!important; height:100%!important; min-height:150px!important; margin:0!important; padding:0!important; position:relative!important; overflow:visible!important; transform:none!important; animation:none!important; }
  .wawi-invita .wawi-invita-visual .wawi-invita-img, .wawi-invita .wawi-invita-img { position:relative!important; inset:auto!important; display:block!important; width:auto!important; max-width:min(100%,150px)!important; height:auto!important; max-height:150px!important; margin:auto!important; object-fit:contain!important; transform:none!important; translate:0 0!important; animation:wawiCtaMascotaMobile 3.8s ease-in-out infinite!important; transform-origin:50% 82%!important; will-change:transform!important; }
  .wawi-invita .wawi-invita-visual.is-celebrating .wawi-invita-img { animation:wawiCtaMascotaSalta .62s cubic-bezier(.2,.85,.25,1) 1!important; }
}
@keyframes wawiCtaMascotaMobile { 0%,100%{transform:translate3d(0,3px,0) rotate(0deg)} 50%{transform:translate3d(0,-8px,0) rotate(-.4deg)} }
@keyframes wawiCtaMascotaSalta { 0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} 38%{transform:translate3d(0,-14px,0) rotate(-1.6deg) scale(1.045)} 68%{transform:translate3d(0,-4px,0) rotate(1deg) scale(.99)} 100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)} }
@media (prefers-reduced-motion: reduce) { .wawi-invita .wawi-invita-visual .wawi-invita-img, .wawi-invita .wawi-invita-img { animation:none!important; } }

.wf-black{color:#111827;}