/* ============================================================
   Hero de la portada (prefijo .hs) — includes/hero-slider.php
   - Marco con la proporción REAL de las portadas: 1122x1402 (≈4:5) en
     ≤767 px y 2172x724 (3:1) desde 768 px, a ANCHO COMPLETO (V3: a 1440 px
     mide 480 de alto; a 1920, 640). object-fit: contain: nunca se recortan
     logos ni titulares. Sin height:100vh, min-height ni max-height.
   - El umbral 767/768 px es el mismo del <picture> y de js/hero-slider.js.
   - Controles y CTA en una franja bajo la imagen, nunca encima del arte.
   ============================================================ */
.hs {
    --hs-top: 70px;            /* cabecera fija (68-69 px medidos hasta 1024 px) */
    --hs-strip: 84px;          /* alto mínimo de la franja de CTA en escritorio */
    --hs-fondo: #0f172a;
    background: var(--gradient-hero, linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%));
    padding-top: var(--hs-top);
    color: #fff;
}
@media (min-width: 1025px) { .hs { --hs-top: 104px; } }   /* 1025-1279: el menú ocupa dos líneas (103 px) */
@media (min-width: 1280px) { .hs { --hs-top: 80px; } }    /* 78 px medidos */

.hs-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Marco ---------- */
.hs__frame {
    position: relative; width: 100%; aspect-ratio: 1122 / 1402; margin: 0 auto;
    background: #e9f2fb; overflow: hidden; touch-action: pan-y;
}
@media (min-width: 768px) {
    /* Ancho completo del viewport (el hero no está dentro de .container): sin márgenes laterales. */
    .hs__frame { aspect-ratio: 2172 / 724; width: 100%; max-width: none; }
}
.hs__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.hs__slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; z-index: 1; }
.hs__slide picture, .hs__slide img { display: block; width: 100%; height: 100%; }
.hs__slide img { object-fit: contain; color: #0f172a; font: 600 1rem/1.4 'Inter', system-ui, sans-serif; }   /* texto alternativo legible si la imagen falla */
@media (prefers-reduced-motion: reduce) {
    .hs__slide, .hs__slide.is-active { transition: none; }
}

/* ---------- Franja de CTA y controles ---------- */
.hs__strip {
    display: grid; grid-template-columns: 1fr 48px; gap: 8px; align-items: center;
    max-width: 1280px; margin: 0 auto; padding: 12px 16px 14px;
}
.hs__ctas, .hs__cta-group:not([hidden]) { display: contents; }
.hs__cta-group > :first-child { grid-column: 1 / -1; }
.hs__cta {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px;
    padding: .65rem 1.1rem; border-radius: 10px; border: 2px solid transparent; text-align: center;
    font: 600 .95rem/1.2 'Inter', system-ui, sans-serif; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s;
}
.hs__cta--wa { background: #128c4a; color: #fff; }
.hs__cta--wa:hover { background: #0f7a40; color: #fff; }
.hs__cta--primary { background: var(--primary, #2563eb); color: #fff; }
.hs__cta--primary:hover { background: var(--primary-dark, #1d4ed8); color: #fff; }
.hs__cta--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .6); }
.hs__cta--line:hover { background: #fff; color: #0f172a; border-color: #fff; }

.hs__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 44px; min-height: 44px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff;
    font: 600 .85rem 'Inter', system-ui, sans-serif; cursor: pointer;
}
.hs__btn:hover { background: rgba(255, 255, 255, .18); }
.hs__pause { height: 48px; }
.hs__pause-txt { display: none; }
.hs__controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 0; }
.hs__dots { display: flex; }
.hs__dot { width: 40px; height: 44px; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; }
.hs__dot span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .45); transition: background-color .2s, transform .2s; }
.hs__dot[aria-current="true"] span { background: #fff; transform: scale(1.3); }
.hs__dot:hover span { background: rgba(255, 255, 255, .8); }
.hs__cta:focus-visible, .hs__btn:focus-visible, .hs__dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* Sin JavaScript: solo la portada 1 y sus enlaces */
html:not(.hs-js) .hs__controls, html:not(.hs-js) .hs__pause { display: none; }
html:not(.hs-js) .hs__strip { grid-template-columns: 1fr; }

@media (min-width: 380px) {
    .hs__dot { width: 44px; }
}
@media (min-width: 768px) {
    .hs__strip { grid-template-columns: 1fr auto auto; gap: 12px; padding: 18px 24px; min-height: var(--hs-strip); }
    .hs__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
    .hs__cta-group:not([hidden]) { display: flex; flex-wrap: wrap; gap: 10px; }
    .hs__cta-group > :first-child { grid-column: auto; }
    .hs__controls { grid-column: auto; }
    .hs__pause { height: 44px; padding: 0 .8rem; }
    .hs__pause-txt { display: inline; }
    html:not(.hs-js) .hs__strip { grid-template-columns: 1fr; }
}

/* Mientras la franja del hero está en pantalla, los controles flotantes del sitio
   (barra móvil, acceso al asistente, burbuja de WhatsApp, estadísticas) se ocultan:
   el hero ya ofrece esas acciones y así nunca tapan sus CTA ni sus controles.
   js/hero-slider.js mantiene la clase con un IntersectionObserver. */
.fe-mbar, .fe-launcher, .wa__btn_popup, .stats-widget { transition: opacity .2s, visibility .2s; }
html.hs-strip-visible .fe-mbar, html.hs-strip-visible .fe-launcher,
html.hs-strip-visible .wa__btn_popup, html.hs-strip-visible .wa__popup_chat_box,
html.hs-strip-visible .stats-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }