/*
 * public.css
 * ------------------------------------------------------------
 * Estilos específicos del sitio público (no se cargan en admin).
 * Cubre: topbar, header con menú, hero banner.
 * Cargar DESPUÉS de base.css, layout.css y components.css.
 * ------------------------------------------------------------
 */

:root {
    --fa-dark:        #0a1426;      /* navy casi negro: topbar y footer */
    --fa-dark-2:      #0f1a30;
    --fa-yellow:      #f5b22b;      /* CTA principal */
    --fa-yellow-hover:#e0a01b;
    --fa-text-on-dark:#ffffff;
    --fa-muted-on-dark:#bcc4d2;
    --fa-container:   1280px;
    --fa-font:        "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Container más ancho para layouts públicos */
.public-shell .container,
.topbar__inner.container,
.public-header__inner.container,
.hero__inner.container {
    max-width: var(--fa-container);
}

/* El .hero__inner es flex-child de .hero__slide (justify-content: center). Sin
   width: 100% se dimensiona al contenido y queda centrado por flex, anulando el
   text-align: left de los slides --left / --insta. Forzar 100% lo hace ocupar
   todo el ancho del container, y así margin-left:0 del título pega de verdad al
   gutter (misma vertical que el logo del header). */
.hero__inner.container { width: 100%; }

body.public-shell {
    font-family: var(--fa-font);
    color: #1f2533;
    background: #ffffff;
    overflow-x: hidden;
}

/* ==========================================================
   Topbar
   ========================================================== */
.topbar {
    background: #04141A;
    color: #EDEEEE;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
    border-top: 1px solid #F1C93E;
    overflow: hidden;
    max-height: 80px;
    transition: max-height 280ms ease;
}
.topbar.topbar--hidden {
    max-height: 0;
    border-top-color: transparent;
}
.topbar.topbar--hidden .topbar__inner {
    visibility: hidden;
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
    gap: 1rem;
}

.topbar__info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.topbar__icon {
    flex: 0 0 auto;
    background: #F1C93E;
    color: #04141A;
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
}

.topbar a {
    color: inherit;
    text-decoration: none;
}
.topbar a:hover { color: #fff; }

.topbar__social {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
}

.topbar .topbar__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 4px;
    background: #F1C93E;
    color: #04141A;
    border-radius: 50%;
    box-sizing: content-box;
    transition: transform 200ms ease;
}
.topbar .topbar__social-link svg { width: 100%; height: 100%; }
.topbar .topbar__social-link:hover {
    color: #04141A;
    transform: scale(1.1);
}

/* ==========================================================
   Header (logo + nav)
   ========================================================== */
.public-header {
    background: #fff;
    border-bottom: 1px solid #ececef;
    border-top: 0 solid #000;
    position: sticky;
    top: 0;
    z-index: 50;
    transition: border-top-width 200ms ease;
}
.public-header.public-header--scrolled {
    border-top-width: 4px;
}

.public-header__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 72px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.public-header__inner > .site-logo { margin-right: auto; }
.public-header__inner > .main-nav { flex: 0 0 auto; }

.site-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}
.site-logo__img {
    display: block;
    height: 48px;
    width: auto;
    max-width: 100%;
}

.main-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.main-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}
.main-nav__list > li { display: flex; }
.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.6rem 0.95rem;
    font-family: "Poppins", sans-serif;
    color: #04141a;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    border-radius: 4px;
    transition: color 150ms ease, background 150ms ease, transform 200ms ease;
}
.main-nav__link:hover {
    color: #04141a;
    text-decoration: none;
}
.main-nav__link.is-active {
    color: #04141a;
    font-weight: 400;
}
.main-nav__caret {
    font-size: 0.7em;
    margin-left: 2px;
    opacity: 0.7;
}

/* Submenu dropdown */
.main-nav__item.has-submenu { position: relative; }
.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    min-width: 220px;
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 8px;
    box-shadow: 0 16px 32px -16px rgba(10,20,38,0.2), 0 4px 10px -4px rgba(10,20,38,0.08);
    list-style: none;
    margin: 0;
    padding: 0.4rem 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    z-index: 50;
}
.submenu > li { display: block; list-style: none; width: 100%; }
.main-nav__item.has-submenu:hover > .submenu,
.main-nav__item.has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.submenu__link {
    display: block;
    padding: 0.7rem 1.1rem;
    font-family: "Poppins", sans-serif;
    color: #04141a;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease;
}
.submenu__link:hover {
    background: #04141A;
    color: #ffffff;
    text-decoration: none;
}

.header-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
}
.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: transparent;
    color: #04141a;
    border: 1.5px solid #d0d4dc;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.header-icon svg { width: 20px; height: 20px; }
.header-icon:hover {
    background: var(--fa-yellow);
    color: var(--fa-dark);
    border-color: var(--fa-yellow);
    text-decoration: none;
    transform: translateY(-3px);
}

/* ==========================================================
   Hamburger toggle + Mobile drawer
   ========================================================== */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #04141a;
    cursor: pointer;
    padding: 0;
    transition: color 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover,
.nav-toggle:focus-visible {
    background: transparent;
    color: var(--fa-dark);
    outline: none;
}
.nav-toggle__box {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}
.nav-toggle__bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2.2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 280ms cubic-bezier(.6,.05,.28,1), opacity 180ms ease, top 280ms cubic-bezier(.6,.05,.28,1);
}
.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); }
.nav-toggle__bar:nth-child(3) { top: 100%; transform: translateY(-100%); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
.nav-toggle.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle.is-open .nav-toggle__bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

.nav-close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: transparent;
    border: 1.5px solid #d0d4dc;
    color: #04141a;
    cursor: pointer;
    padding: 0;
    transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.nav-close:hover {
    background: var(--fa-yellow);
    border-color: var(--fa-yellow);
    color: var(--fa-dark);
}

.main-nav__head { display: none; }
.main-nav__social { display: none; }
.site-logo--drawer { display: inline-flex; }
.submenu-toggle { display: none; }

.nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 20, 26, 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
    z-index: 60;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

html.nav-open,
body.nav-open { overflow: hidden; }

/* ==========================================================
   Hero / Banner (slider)
   ========================================================== */
.hero {
    position: relative;
    min-height: 620px;
    background-color: #1a1f2e;
    color: #fff;
    overflow: hidden;
}

/* Compat: hero como banner único (sin .hero--slider). */
.hero:not(.hero--slider) {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

.hero__track {
    position: absolute;
    inset: 0;
}

.hero__slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a1f2e;
    opacity: 0;
    visibility: hidden;
    transition: opacity 700ms ease;
    z-index: 0;
}
.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.06);
    transform-origin: center center;
    will-change: transform;
    z-index: 0;
}
.hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}
.hero__slide.is-active::before {
    animation: heroKenBurns 24s ease-in-out infinite alternate;
}

@keyframes heroKenBurns {
    0%   { transform: scale(1.06) translate3d(0%, 0%, 0); }
    100% { transform: scale(1.18) translate3d(-1.5%, -1.2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero__slide.is-active::before { animation: none; }
    .hero__slide::before { transform: none; }
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--hero-ov, linear-gradient(180deg, rgba(10,20,38,0.45) 0%, rgba(10,20,38,0.55) 60%, rgba(10,20,38,0.65) 100%));
    z-index: 1;
    pointer-events: none;
}

.hero__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding-top: 4rem;
    padding-bottom: 4.5rem;
}

/* Alineación del texto por slide (admin → hero[slides][i][text_align]).
   El bloque siempre vive dentro del container centrado: nunca pega al borde. */
.hero__inner--center { text-align: center; }
.hero__inner--left   { text-align: left; }
.hero__inner--right  { text-align: right; }

/* En left/right el texto se limita a un ancho legible y se alinea al lado,
   conservando el gutter del container para que no quede al tope. */
.hero__inner--left  .hero__title,
.hero__inner--left  .hero__lead  { max-width: 680px; margin-left: 0;    margin-right: auto; }
.hero__inner--right .hero__title,
.hero__inner--right .hero__lead  { max-width: 680px; margin-left: auto; margin-right: 0; }

/* Sin padding extra: el texto se alinea con el gutter del .container (1rem),
   quedando a la misma altura horizontal que el logo del header. */

.hero__title {
    color: #fff;
    font-size: clamp(2rem, 4.5vw, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    margin: 0 0 1.2rem;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
    text-transform: uppercase;
}

.hero__lead {
    color: #f3f5f9;
    font-size: clamp(1.05rem, 1.45vw, 1.25rem);
    line-height: 1.6;
    max-width: 820px;
    margin: 0 auto 1.8rem;
    text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 20, 38, 0.32);
    border: 0;
    border-radius: 999px;
    color: #fff;
    opacity: 0.9;
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease, background 150ms ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.hero__arrow svg { width: 28px; height: 28px; }
.hero__arrow:hover { opacity: 1; background: rgba(10, 20, 38, 0.55); transform: translateY(-50%) scale(1.08); }
.hero__arrow--prev { left: 18px; }
.hero__arrow--next { right: 18px; }

.hero__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
}
.hero__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease, width 180ms ease;
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.75); }
.hero__dot.is-active {
    background: var(--fa-yellow, #f5b22b);
    width: 26px;
    border-radius: 999px;
}

/* ==========================================================
   Hero — variante 4to slide (Instagram, fondo amarillo).
   Diseño HARDCODEADO solo para este slide: el texto va alineado
   a la izquierda (a la altura del logo del header) con highlight
   tipo "selección" — letras blancas sobre cajas oscuras por línea.
   El highlight requiere un <span class="hero__hl"> alrededor del
   texto, que se inyecta en public_hero.php cuando $isInsta.
   ========================================================== */
.hero__slide--insta { background-color: var(--fa-yellow, #f5b22b); }
.hero__slide--insta .hero__overlay { display: none; }
.hero__slide--insta::before {
    background-position: center right;
}
.hero__slide--insta .hero__inner {
    text-align: left;
    padding-top: 3rem;
    padding-bottom: 4rem;
}
/* Reset del color heredado de .hero__title/.hero__lead: ahora el
   color vive en el span del highlight. Mantener max-width y
   margin-left:0 para que el bloque arranque pegado al gutter. */
.hero__slide--insta .hero__title,
.hero__slide--insta .hero__lead {
    color: inherit;
    text-shadow: none;
    max-width: 620px;
    margin-left: 0;
    margin-right: auto;
}
/* Line-height más holgado para que las cajas del highlight
   no se solapen entre líneas. */
.hero__slide--insta .hero__title { line-height: 1.35; }
.hero__slide--insta .hero__lead  { line-height: 1.7; }

/* Highlight tipo "selección": fondo oscuro + blanco, con padding
   inline y box-decoration-break:clone para que cada línea wrappeada
   tenga su propia caja (no una sola caja rectangular). */
.hero__slide--insta .hero__hl {
    display: inline;
    background-color: #0a1426;
    color: #fff;
    padding: 0.15em 0.45em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.hero__slide--insta .btn--cta {
    background: #0a1426;
    border-color: #0a1426;
    color: #fff;
    box-shadow: 0 4px 14px rgba(10, 20, 38, 0.25);
}
.hero__slide--insta .btn--cta:hover {
    background: #14213d;
    border-color: #14213d;
    color: #fff;
    box-shadow: 0 6px 18px rgba(10, 20, 38, 0.35);
}

/* Pretítulo "Descubre" arriba del título en el slide de Instagram.
   Comparte el highlight (.hero__hl) con título y lead, sólo cambia
   el tamaño y el espaciado para jerarquizar. */
.hero__slide--insta .hero__pretitle {
    margin: 0 0 0.6rem;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Botón CTA del slide Insta: icono antes del texto + destello sutil.
   El icono usa el mismo SVG que el catálogo social_links del header. */
.btn--cta-insta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.btn--cta-insta__icon {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
}
/* Destello: gradiente blanco translúcido que cruza el botón de
   izquierda a derecha cada ~4.5s. Pausado en hover para no competir
   con el feedback visual del estado :hover. */
.btn--cta-insta::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.28) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    z-index: 1;
    animation: btnCtaInstaShine 4.5s ease-in-out 1.5s infinite;
}
.btn--cta-insta:hover::after { animation-play-state: paused; }
.btn--cta-insta > * { position: relative; z-index: 2; }
@keyframes btnCtaInstaShine {
    0%   { left: -60%; }
    55%  { left: 120%; }
    100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
    .btn--cta-insta::after { animation: none; display: none; }
}
@media (max-width: 720px) {
    .hero__slide--insta .hero__inner {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        text-align: right;
    }
    .hero__slide--insta .hero__title,
    .hero__slide--insta .hero__lead { max-width: 100%; }
    /* En mobile dejamos solo el título a la derecha: ocultamos pretítulo
       y bajada. word-spacing:100vw fuerza un quiebre por palabra para
       que "Nuevo Instagram" caiga en dos líneas. */
    .hero__slide--insta .hero__pretitle,
    .hero__slide--insta .hero__lead {
        display: none;
    }
    .hero__slide--insta .hero__title {
        word-spacing: 100vw;
    }
    /* CTA con icono: en mobile el padding del .btn--cta es más chico,
       así que cerramos un poco el gap entre icono y texto para que
       el botón no se vea desbalanceado. */
    .btn--cta-insta {
        gap: 0.45rem;
    }
    .btn--cta-insta__icon {
        width: 1.05em;
        height: 1.05em;
    }
}

/* ==========================================================
   Botón CTA amarillo (pill)
   ========================================================== */
.btn--cta {
    background: var(--fa-yellow);
    border-color: var(--fa-yellow);
    color: #1a1f2e;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(245, 178, 43, 0.35);
}
.btn--cta:hover {
    background: var(--fa-yellow-hover);
    border-color: var(--fa-yellow-hover);
    color: #1a1f2e;
    box-shadow: 0 6px 18px rgba(245, 178, 43, 0.45);
}

/* ==========================================================
   Quicklinks (4 cards superpuestos al hero)
   ========================================================== */
.quicklinks {
    position: relative;
    z-index: 5;
    margin-top: -60px;
    padding-bottom: 1rem;
}
.quicklinks__card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 22px 50px -20px rgba(10,20,38,0.28), 0 8px 18px -8px rgba(10,20,38,0.1);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    position: relative;
}
.quicklink {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.8rem 1.8rem;
    text-decoration: none;
    color: #1f2533;
    border-right: 1px solid #ececef;
    transition: background 150ms ease, color 150ms ease;
    position: relative;
}
.quicklink:last-child { border-right: 0; }
.quicklink:hover { background: #f7f7fa; }
.quicklink.is-active {
    background: var(--fa-dark);
    color: #fff;
    border-right-color: transparent;
}
.quicklink.is-active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--fa-yellow);
}
.quicklink__icon {
    flex: 0 0 auto;
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center; justify-content: center;
    border-radius: 8px;
    color: currentColor;
    overflow: hidden;
}
.quicklink__icon svg { width: 38px; height: 38px; }
.quicklink__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.quicklink.is-active .quicklink__icon { color: #fff; }
.quicklink__text { display: flex; flex-direction: column; min-width: 0; }
.quicklink__title {
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.25;
}
.quicklink__desc {
    font-size: 0.88rem;
    color: #6b7283;
    margin-top: 6px;
    line-height: 1.4;
}
.quicklink.is-active .quicklink__desc { color: #bcc4d2; }

/* ==========================================================
   Streaming
   ========================================================== */
.streaming {
    padding: 3.5rem 0 2rem;
    background: #fff;
    position: relative;
}
.streaming__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 3rem;
    align-items: start;
}
.streaming__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 40px;
    line-height: 44px;
    color: rgb(4, 20, 26);
    margin-bottom: 0.9rem;
    letter-spacing: -0.01em;
}
.streaming__lead {
    color: #5a6275;
    line-height: 1.65;
    font-size: 0.95rem;
    margin-bottom: 1.4rem;
    max-width: 540px;
}
.streaming__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    color: rgb(4, 20, 26);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
}
.streaming__bullets li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.7rem;
    letter-spacing: -0.005em;
}
.streaming__bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.45em;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--fa-yellow);
    box-shadow: 0 0 0 4px rgba(252, 196, 25, 0.18);
}
.streaming__media {
    position: relative;
    aspect-ratio: 16 / 10;
}
.streaming__thumb {
    width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    box-shadow: 0 18px 40px -18px rgba(10,20,38,0.3);
}
.streaming__badge {
    position: absolute;
    right: 0; bottom: -12px;
    max-width: 260px;
    background: var(--fa-dark);
    color: #fff;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.45;
    box-shadow: 0 10px 24px -10px rgba(10,20,38,0.45);
}
.streaming__badge strong {
    color: var(--fa-yellow);
    font-weight: 700;
}

/* Player de YouTube (estado en vivo) */
.streaming__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(10,20,38,0.35);
    background: #000;
}
.streaming__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.streaming__live-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .75rem;
    background: #dc2626;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .28rem .65rem;
    border-radius: 4px;
}
.streaming__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    animation: live-blink 1.2s ease-in-out infinite;
}
@keyframes live-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .3; }
}

/* Estado offline */
.streaming__offline {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1.5px solid #e2e8f0;
}
.streaming__offline-icon {
    color: #94a3b8;
    margin-bottom: .2rem;
}
.streaming__offline-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: #334155;
    margin: 0;
}
.streaming__offline-msg {
    color: #64748b;
    font-size: .88rem;
    line-height: 1.6;
    max-width: 340px;
    margin: 0;
}
.streaming__offline-next {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--fa-dark, #0a1426);
    color: #fff;
    font-size: .8rem;
    padding: .4rem .85rem;
    border-radius: 6px;
    margin-top: .3rem;
}
.streaming__offline-next strong {
    color: var(--fa-yellow, #f5b22b);
}
.streaming__offline-next svg { flex-shrink: 0; }

/* Botón CTA de la sección streaming en el inicio */
.streaming__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.6rem;
    background: var(--fa-dark, #0a1426);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .03em;
    padding: .75rem 1.4rem;
    border-radius: 7px;
    text-decoration: none;
    transition: background 180ms, box-shadow 180ms;
    box-shadow: 0 6px 18px -8px rgba(10,20,38,.4);
}
.streaming__cta:hover { background: #172236; box-shadow: 0 8px 22px -8px rgba(10,20,38,.5); }
.streaming__cta--live { background: #dc2626; }
.streaming__cta--live:hover { background: #b91c1c; }
.streaming__cta--soon {
    background: transparent;
    color: var(--fa-dark, #0a1426);
    border: 1px solid rgba(10,20,38,.22);
    box-shadow: none;
    cursor: default;
    opacity: .75;
}
.streaming__cta--soon:hover {
    background: transparent;
    box-shadow: none;
}
.streaming__cta-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: live-blink 1.2s ease-in-out infinite;
}

/* Imagen del admin en la sección streaming del inicio */
.streaming__preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(10,20,38,.3);
}
.streaming__preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.streaming__preview .streaming__live-badge {
    position: absolute;
    bottom: .75rem;
    left: .75rem;
}

/* Página /transmision: padding extra arriba */
.streaming--page { padding-top: 2.5rem; }

/* ==========================================================
   Streaming — modo broadcast (EN VIVO)
   ========================================================== */
.streaming--broadcast {
    padding: 0;
    background: #08111f;
}
.streaming--broadcast .container { display: none; } /* safety — broadcast no usa container */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.streaming__broadcast {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: stretch;
    min-height: 320px;
}

/* Etapa: contenedor del player */
.streaming__stage {
    position: relative;
    background: #000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.streaming__stage .streaming__player {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0;
    box-shadow: none;
    flex: 1 0 auto;
}
.streaming__stage .streaming__player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Badge REC parpadeante ── */
.streaming__rec-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #cc1f1f;
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .11em;
    padding: .32rem .75rem .32rem .6rem;
    border-radius: 4px;
    animation: rec-glow 1.8s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}
/* Punto que hace blink ON/OFF como grabadora */
.streaming__rec-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: rec-blink .9s step-end infinite;
}
.streaming__rec-text {
    line-height: 1;
}
@keyframes rec-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
@keyframes rec-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204,31,31,.0), 0 2px 8px rgba(0,0,0,.5); }
    50%       { box-shadow: 0 0 0 6px rgba(204,31,31,.0), 0 2px 12px rgba(204,31,31,.55); }
}

/* ── Sidebar de chat ── */
.streaming__sidebar {
    display: flex;
    flex-direction: column;
    background: #0d1524;
    border-left: 1px solid rgba(255,255,255,.07);
    overflow: hidden;
}
.streaming__sidebar .stream-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    max-width: none;
}
.streaming__sidebar .stream-chat__header {
    background: #0a1120;
    border-bottom: 1px solid rgba(255,255,255,.07);
    color: #c8d8ef;
    flex-shrink: 0;
    padding: .7rem 1rem;
    font-size: .82rem;
}
.streaming__sidebar .stream-chat__list {
    flex: 1 1 0;
    min-height: 0;
    max-height: none;
    padding: .8rem 1rem;
    gap: .6rem;
}
.streaming__sidebar .stream-chat__empty {
    color: #4a6080;
}
.streaming__sidebar .stream-chat__author {
    color: var(--fa-yellow, #f5b22b);
}
.streaming__sidebar .stream-chat__time {
    color: #3d5070;
}
.streaming__sidebar .stream-chat__text {
    color: #a8bdd4;
}
.streaming__sidebar .stream-chat__item {
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding-bottom: .5rem;
}
.streaming__sidebar .stream-chat__item:last-child { border-bottom: none; }
.streaming__sidebar .stream-chat__form {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,.07);
    background: #0a1120;
    padding: .65rem .8rem;
}
.streaming__sidebar .stream-chat__row { flex-wrap: nowrap; gap: .4rem; }
.streaming__sidebar .stream-chat__input {
    background: #132032;
    border-color: #1e3050;
    color: #d0e0f0;
    font-size: .82rem;
}
.streaming__sidebar .stream-chat__input::placeholder { color: #3a5070; }
.streaming__sidebar .stream-chat__input:focus { border-color: var(--fa-yellow, #f5b22b); }
.streaming__sidebar .stream-chat__input--name { width: 110px; }
.streaming__sidebar .stream-chat__send {
    background: var(--fa-yellow, #f5b22b);
    color: #0a1120;
}
.streaming__sidebar .stream-chat__send:hover { opacity: .88; }
.streaming__sidebar .stream-chat__error { color: #f87171; }

/* Pill EN VIVO en el header del sidebar */
.stream-chat__live-pill {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: #cc1f1f;
    color: #fff;
    padding: .18rem .52rem .18rem .42rem;
    border-radius: 3px;
}
.stream-chat__pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: rec-blink .9s step-end infinite;
}

/* Responsive: broadcast en tablet/mobile */
@media (max-width: 900px) {
    .streaming__broadcast {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .streaming__sidebar {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.07);
        max-height: 340px;
    }
    .streaming__stage .streaming__player { aspect-ratio: 16/9; }
}
@media (max-width: 480px) {
    .streaming__rec-badge { font-size: .65rem; top: 8px; left: 8px; padding: .26rem .6rem .26rem .5rem; }
    .streaming__rec-dot { width: 7px; height: 7px; }
    .streaming__sidebar { max-height: 280px; }
    .streaming__sidebar .stream-chat__input--name { width: 90px; }
}

/* ==========================================================
   Stream chat / comentarios
   ========================================================== */
.stream-chat {
    margin-top: 2.2rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}
.stream-chat__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.1rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    font-size: .85rem;
    font-weight: 600;
    color: #334155;
}
.stream-chat__live-pill {
    margin-left: auto;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    background: #dc2626;
    color: #fff;
    padding: .18rem .52rem;
    border-radius: 3px;
}
.stream-chat__list {
    min-height: 140px;
    max-height: 260px;
    overflow-y: auto;
    padding: .8rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    scroll-behavior: smooth;
}
.stream-chat__empty {
    color: #94a3b8;
    font-size: .88rem;
    text-align: center;
    margin: auto 0;
    padding: .8rem 0;
}
.stream-chat__item {
    display: flex;
    flex-direction: column;
    gap: .12rem;
}
.stream-chat__item--new {
    animation: chat-in .25s ease both;
}
@keyframes chat-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.stream-chat__meta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}
.stream-chat__author {
    font-size: .82rem;
    font-weight: 700;
    color: var(--fa-dark, #0a1426);
}
.stream-chat__time {
    font-size: .72rem;
    color: #94a3b8;
}
.stream-chat__text {
    font-size: .88rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}
.stream-chat__form {
    border-top: 1px solid #e2e8f0;
    padding: .7rem 1rem;
}
.stream-chat__row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.stream-chat__input {
    padding: .55rem .7rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 6px;
    font-size: .88rem;
    background: #fff;
    color: #1e293b;
    outline: none;
    transition: border-color .15s;
}
.stream-chat__input:focus { border-color: var(--fa-primary, #f5b22b); }
.stream-chat__input--name { width: 160px; flex-shrink: 0; }
.stream-chat__input--msg  { flex: 1; min-width: 0; }
.stream-chat__send {
    padding: .45rem .75rem;
    background: var(--fa-dark, #0a1426);
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s;
    flex-shrink: 0;
}
.stream-chat__send:hover { opacity: .82; }
.stream-chat__send:disabled { opacity: .45; cursor: default; }
.stream-chat__error {
    color: #dc2626;
    font-size: .8rem;
    margin: .4rem 0 0;
}

/* ==========================================================
   Prices embed (slot)
   ========================================================== */
.prices-embed { padding: 2rem 0 3rem; background: #fff; }
.prices-embed__frame {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.prices-embed__frame > * { max-width: 100%; }
.prices-embed iframe { display: block; width: 100%; border: 0; }
.prices-embed__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.35rem;
    padding: 2rem 1rem;
    border: 1px dashed #d8dbe2;
    border-radius: 8px;
    background: #f8f9fb;
    color: #6b7283;
    font-size: 0.88rem;
}
.prices-embed__placeholder strong { color: #1f2533; font-size: 1rem; }
.prices-embed__placeholder code {
    background: #ececef;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.82em;
}

/* ==========================================================
   Gestión integral
   ========================================================== */
.gestion {
    position: relative;
    padding: 4.5rem 0;
    min-height: 420px;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: #1a1109;
    overflow: hidden;
}
.gestion__bg {
    position: absolute; inset: 0;
    z-index: 0;
}
.gestion__slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.gestion__slide.is-active { opacity: 1; }
.gestion__overlay {
    position: absolute; inset: 0;
    background: var(--gestion-ov, linear-gradient(90deg, rgba(10,8,4,0.85) 0%, rgba(10,8,4,0.65) 50%, rgba(10,8,4,0.25) 100%));
    z-index: 1;
}
.gestion__inner {
    position: relative; z-index: 2;
    text-align: left;
    /* .gestion es display:flex; sin width:100% el inner se encoge al ancho del
       contenido y margin:0 auto lo centra, dejando el título lejos del gutter.
       Forzar 100% lo alinea con el resto de secciones (mismo eje que .newsletter__inner). */
    width: 100%;
}
.gestion__title {
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.1rem;
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
}
.gestion__lead {
    color: #e0d9cd;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 1.5rem;
    max-width: 640px;
    margin-left: 0;
    margin-right: auto;
}
.gestion__cta {
    display: inline-flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}
.btn--cta-outline {
    background: transparent;
    border: 1.5px solid #fff;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    box-shadow: none;
}
.btn--cta-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--fa-dark);
    box-shadow: none;
}

/* ==========================================================
   Newsletter
   ========================================================== */
.newsletter {
    background: #F1C93E;
    padding: 0.85rem 0;
}
.newsletter__inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
    flex-wrap: nowrap;
    max-width: 1320px;
}
.newsletter__title {
    font-family: "Montserrat", sans-serif;
    color: #04141A;
    font-size: 31px;
    line-height: 37px;
    font-weight: 600;
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.newsletter__form {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    flex-wrap: nowrap;
}
.newsletter .newsletter__input {
    background: #fff;
    border: 0;
    box-sizing: border-box;
    height: 44px;
    padding: 0 1.3rem;
    border-radius: 100px;
    box-shadow: none;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #04141A;
    width: 250px;
    min-width: 0;
}
.newsletter .newsletter__input:hover,
.newsletter .newsletter__input:focus {
    border: 0;
    box-shadow: none;
    background: #fff;
}
.newsletter .newsletter__input::placeholder { color: #687175; opacity: 1; font-weight: 400; }
.newsletter__submit {
    background: #05151B;
    border-color: #05151B;
    color: #fff;
    box-sizing: border-box;
    height: 44px;
    border-radius: 999px;
    padding: 0 1.8rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
}
.newsletter__submit:hover {
    background: var(--fa-dark-2);
    border-color: var(--fa-dark-2);
    color: #fff;
}

/* ==========================================================
   Popup Newsletter (actualizaciones de precios)
   ========================================================== */
.popup-newsletter[hidden] { display: none; }
.popup-newsletter {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.popup-newsletter__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 20, 26, 0.62);
    cursor: pointer;
}
.popup-newsletter__panel {
    position: relative;
    background: #F1C93E;
    border-radius: 18px;
    padding: 2.6rem 2.6rem 2.2rem;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
    animation: popup-newsletter-in 260ms ease-out;
}
@keyframes popup-newsletter-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popup-newsletter__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    background: transparent;
    border: 2px solid #04141A;
    border-radius: 6px;
    color: #04141A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.popup-newsletter__close:hover { background: #04141A; color: #F1C93E; }
.popup-newsletter__close:active { transform: scale(0.94); }
.popup-newsletter__title {
    font-family: "Montserrat", sans-serif;
    color: #04141A;
    font-weight: 800;
    font-size: 28px;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 0.9rem;
}
.popup-newsletter__lead {
    font-family: "Roboto", sans-serif;
    color: #04141A;
    font-size: 16px;
    line-height: 1.45;
    text-align: center;
    margin: 0 auto 1.5rem;
    max-width: 440px;
}
.popup-newsletter__form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.popup-newsletter__hp {
    position: absolute;
    left: -5000px;
}
.popup-newsletter__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.popup-newsletter__field label {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: #04141A;
}
.popup-newsletter__field input,
.popup-newsletter__field select {
    background: #fff;
    border: 0;
    height: 46px;
    padding: 0 1.3rem;
    border-radius: 100px;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    color: #04141A;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}
.popup-newsletter__field input:focus,
.popup-newsletter__field select:focus {
    outline: 2px solid #04141A;
    outline-offset: 1px;
}
.popup-newsletter__field input::placeholder { color: #687175; opacity: 1; }
.popup-newsletter__field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304141A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 1.1rem center;
    background-size: 16px;
    padding-right: 2.6rem;
    cursor: pointer;
}
.popup-newsletter__submit {
    margin-top: 0.4rem;
    background: #05151B;
    color: #fff;
    border: 0;
    height: 52px;
    border-radius: 999px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 150ms ease;
}
.popup-newsletter__submit:hover { background: #1a2b34; }
body.popup-newsletter-open { overflow: hidden; }

/* Multi-selección de recintos (chips) */
.popup-newsletter__hint {
    font-weight: 500;
    font-size: 13px;
    color: #04141A;
    opacity: 0.75;
    margin-left: 0.35rem;
}
.popup-newsletter__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.15rem;
}
.popup-newsletter__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}
.popup-newsletter__chip-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.popup-newsletter__chip-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    color: #04141A;
    border: 2px solid #04141A;
    border-radius: 999px;
    padding: 0.45rem 0.95rem;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.1;
    transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}
.popup-newsletter__chip-label::before {
    content: "";
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 2px solid #04141A;
    background: #fff;
    flex: 0 0 auto;
    transition: background 150ms ease, border-color 150ms ease;
}
.popup-newsletter__chip:hover .popup-newsletter__chip-label { background: #fff7d8; }
.popup-newsletter__chip-input:checked + .popup-newsletter__chip-label {
    background: #04141A;
    color: #F1C93E;
}
.popup-newsletter__chip-input:checked + .popup-newsletter__chip-label::before {
    background: #F1C93E url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304141A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 11px no-repeat;
    border-color: #F1C93E;
}
.popup-newsletter__chip-input:focus-visible + .popup-newsletter__chip-label {
    outline: 2px solid #04141A;
    outline-offset: 2px;
}
.popup-newsletter__chip:active .popup-newsletter__chip-label { transform: scale(0.97); }
.popup-newsletter__error {
    margin: 0.35rem 0 0;
    font-family: "Roboto", sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #8a1414;
}

@media (max-width: 600px) {
    .popup-newsletter__panel { padding: 2.1rem 1.4rem 1.6rem; border-radius: 14px; }
    .popup-newsletter__title { font-size: 22px; }
    .popup-newsletter__lead { font-size: 14.5px; margin-bottom: 1.2rem; }
    .popup-newsletter__close { top: 10px; right: 10px; }
    .popup-newsletter__chip-label { padding: 0.4rem 0.8rem; font-size: 13.5px; }
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer-public {
    background: #04141A;
    color: #fff;
    padding: 3.5rem 0 0;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.site-footer-public__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.4rem;
}
.site-footer-public__logo {
    height: 48px;
    width: auto;
    display: block;
}
.site-footer-public__tagline {
    margin: 0;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.site-footer-public__social {
    display: inline-flex;
    gap: 1.6rem;
    color: var(--fa-yellow, #f5b22b);
    margin-top: 0.4rem;
}
.site-footer-public__social a {
    color: var(--fa-yellow, #f5b22b);
    text-decoration: none;
    transition: transform 250ms ease, color 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.site-footer-public__social a:hover {
    color: var(--fa-yellow, #f5b22b);
    transform: translateY(-3px) scale(1.15) rotate(-8deg);
    text-decoration: none;
}
.site-footer-public__social svg { width: 26px; height: 26px; }
.site-footer-public__bottom {
    margin-top: 2.6rem;
    border-top: 1px solid #243237;
}
.site-footer-public__copy {
    margin: 0;
    padding: 1.4rem 0;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}

/* ==========================================================
   Nosotros — intro
   ========================================================== */
.nosotros-intro {
    padding: 3rem 0 2.4rem;
    background: #ffffff;
}
.nosotros-intro__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.nosotros-intro__photo {
    position: relative;
}
.nosotros-intro__media {
    position: relative;
    border: 4px solid var(--fa-dark);
    border-radius: 14px;
    overflow: hidden;
    background: #f3f4f6;
    aspect-ratio: 4 / 3;
}
.nosotros-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.nosotros-intro__caption {
    position: absolute;
    left: 1.4rem;
    bottom: 1.4rem;
    right: 1.4rem;
    max-width: 60%;
    background: var(--fa-dark);
    color: #fff;
    padding: 1rem 1.2rem;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
    border-radius: 4px;
}
.nosotros-intro__copy {
    padding-top: 0.4rem;
}
.nosotros-intro__title {
    margin: 0 0 1.2rem;
    color: var(--fa-dark);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    text-transform: uppercase;
}
.nosotros-intro__text {
    color: #374151;
    font-size: 0.97rem;
    line-height: 1.7;
    text-align: justify;
}
.nosotros-intro__text p {
    margin: 0 0 1rem;
}
.nosotros-intro__text p:last-child { margin-bottom: 0; }
.nosotros-intro__text p.is-hidden-para { display: none; }
.nosotros-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--fa-dark);
    font-size: 0.82rem;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.35rem 0;
    margin-top: 0.5rem;
    opacity: 0.55;
    transition: opacity 0.2s;
}
.nosotros-read-more:hover { opacity: 0.9; }
.nosotros-read-more svg { transition: transform 0.25s; }
.nosotros-read-more.is-expanded svg { transform: rotate(180deg); }
.nosotros-intro__cta {
    margin-top: 1.6rem;
    display: flex;
    justify-content: center;
}

/* ==========================================================
   Nosotros — cifras destacadas
   ========================================================== */
.nosotros-stats {
    padding: 2.2rem 0 3rem;
    background: #ffffff;
}
.nosotros-stats__title {
    margin: 0 0 1.8rem;
    text-align: center;
    color: var(--fa-dark);
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-transform: uppercase;
}
.nosotros-stats__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.2rem;
}
.nosotros-stats__card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 1.6rem 1rem;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.nosotros-stats__value {
    color: var(--fa-dark);
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.nosotros-stats__label {
    margin-top: 0.55rem;
    color: var(--fa-dark);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================
   Nosotros — Experiencia (imagen + card flotante)
   ========================================================== */
.nosotros-experiencia {
    padding: 2.4rem 0 4rem;
    background: #ffffff;
}
.nosotros-experiencia__wrap {
    position: relative;
    min-height: 460px;
}
.nosotros-experiencia__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 360px;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    background-color: #1f2937;
}
.nosotros-experiencia__card {
    position: absolute;
    top: 50%;
    left: 2.5rem;
    transform: translateY(-50%);
    width: min(460px, 90%);
    background: #ffffff;
    border-radius: 12px;
    padding: 2.2rem 2.2rem 2rem;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
.nosotros-experiencia__card::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--fa-yellow);
    border-radius: 3px;
}
.nosotros-experiencia__title {
    margin: 0 0 1rem;
    color: var(--fa-dark);
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.nosotros-experiencia__text {
    margin: 0 0 1.6rem;
    color: #374151;
    font-size: 0.95rem;
    line-height: 1.65;
}
.nosotros-experiencia__cta {
    display: inline-block;
    background: var(--fa-dark);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.92rem;
    padding: 0.7rem 1.5rem;
    border-radius: 999px;
    transition: background-color 0.18s ease, transform 0.18s ease;
}
.nosotros-experiencia__cta:hover {
    background: #0d1320;
    color: #ffffff;
    transform: translateY(-1px);
}

@media (max-width: 760px) {
    .nosotros-experiencia__wrap { min-height: 0; }
    .nosotros-experiencia__media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }
    .nosotros-experiencia__card {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: calc(100% - 1rem);
        margin: -3rem auto 0;
    }
}

/* ==========================================================
   Equipo
   ========================================================== */
.team-section {
    padding: 3.2rem 0 4rem;
    background: #ffffff;
}
.team-section__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 2.5rem;
    align-items: start;
    margin-bottom: 1.5rem;
}
.team-section__heading {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.team-section__title {
    margin: 0;
    color: var(--fa-dark);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1;
}
.team-section__kicker {
    margin: 0;
    color: var(--fa-dark);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.team-section__description {
    margin: 0.4rem 0 0;
    color: #374151;
    font-size: 1rem;
    line-height: 1.55;
}
@media (max-width: 760px) {
    .team-section__head {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: left;
    }
}

/* Tabs (CSS-only via radios) */
.team-tabs {
    --pad-tab: 0.55rem 1.4rem;
}
.team-tabs__input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.team-tabs__labels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin: 0 0 2rem;
}
.team-tabs__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--pad-tab);
    border: 1px solid #e1e3e8;
    border-radius: 999px;
    background: #ffffff;
    color: #1f2533;
    font-weight: 500;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 150ms ease;
}
.team-tabs__label:hover { border-color: var(--fa-yellow); }
.team-tabs__label.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.team-tabs__radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #cfd3da;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
    background: #fff;
    transition: all 150ms ease;
}

/* Panels: ocultos por default, visibles cuando el radio asociado está :checked. */
.team-tabs__panel { display: none; }

.team-tabs__input:checked + .team-tabs__labels .team-tabs__label {
    /* placeholder, real selector con + funciona por orden de hermanos abajo */
}

/* Cada radio es hermano del bloque labels y de su panel. Encadenamos:
   #team-tab-gerencia:checked ~ .team-tabs__panel[data-group="gerencia"] { display: block } */
#team-tab-gerencia:checked    ~ .team-tabs__panel[data-group="gerencia"],
#team-tab-ejecutivos:checked  ~ .team-tabs__panel[data-group="ejecutivos"],
#team-tab-martilleros:checked ~ .team-tabs__panel[data-group="martilleros"],
#team-tab-corredores:checked  ~ .team-tabs__panel[data-group="corredores"] {
    display: block;
}

/* Highlight del label activo */
#team-tab-gerencia:checked    ~ .team-tabs__labels label[for="team-tab-gerencia"],
#team-tab-ejecutivos:checked  ~ .team-tabs__labels label[for="team-tab-ejecutivos"],
#team-tab-martilleros:checked ~ .team-tabs__labels label[for="team-tab-martilleros"],
#team-tab-corredores:checked  ~ .team-tabs__labels label[for="team-tab-corredores"] {
    border-color: var(--fa-yellow);
    color: var(--fa-dark);
    box-shadow: 0 0 0 1px var(--fa-yellow) inset;
}
#team-tab-gerencia:checked    ~ .team-tabs__labels label[for="team-tab-gerencia"]    .team-tabs__radio,
#team-tab-ejecutivos:checked  ~ .team-tabs__labels label[for="team-tab-ejecutivos"]  .team-tabs__radio,
#team-tab-martilleros:checked ~ .team-tabs__labels label[for="team-tab-martilleros"] .team-tabs__radio,
#team-tab-corredores:checked  ~ .team-tabs__labels label[for="team-tab-corredores"]  .team-tabs__radio {
    border-color: var(--fa-yellow);
    background: var(--fa-yellow);
    box-shadow: inset 0 0 0 3px #ffffff;
}

/* Grid de cards */
.team-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.4rem;
}
/* Variante centrada para grupos con pocos miembros (<4): usa flex
   para que las cards se agrupen al centro en vez de pegarse a la izquierda. */
.team-grid--centered {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.4rem;
}
.team-grid--centered .team-card {
    flex: 0 0 220px;
    max-width: 100%;
}
/* Gerencia un poco más grande cuando además está centrada. */
.team-grid--centered.team-grid--gerencia .team-card {
    flex: 0 0 260px;
}
.team-card {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 0.5rem 0.5rem 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
    overflow: hidden;
}
.team-card:hover {
    border-color: var(--fa-yellow);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    transform: translateY(-2px);
}
.team-card__photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.team-card__initials {
    font-size: 3rem;
    color: #9ca3af;
    font-weight: 600;
}
.team-card__body {
    padding: 1rem 0.6rem 1.3rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    flex: 1 1 auto;
    min-width: 0;
}
.team-card__name {
    margin: 0 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--fa-dark);
    line-height: 1.2;
    /* Reserve exactly 2 lines so cards align regardless of name length */
    min-height: calc(1.02rem * 1.2 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.team-card__line {
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--fa-dark);
    font-size: 0.85rem;
    font-weight: 600;
    max-width: 100%;
    min-width: 0;
    line-height: 1.25;
}
.team-card__line svg {
    color: var(--fa-yellow);
    flex: 0 0 auto;
}
.team-card__line a,
.team-card__line span {
    color: inherit;
    text-decoration: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.team-card__line a:hover { color: var(--fa-yellow-hover); }
.team-card__sep {
    display: block;
    width: 70%;
    height: 1px;
    background: #ececec;
    margin: 1rem auto 0.6rem;
    margin-top: auto;
}
.team-card__role {
    margin: 0;
    font-size: 0.82rem;
    color: #6b7280;
    font-weight: 500;
}

@media (max-width: 1100px) {
    .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .nosotros-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .nosotros-intro__grid { grid-template-columns: 1fr; gap: 1.6rem; }
    .nosotros-intro__media {
        aspect-ratio: auto;
        overflow: visible;
    }
    .nosotros-intro__media img {
        height: auto;
        aspect-ratio: 4 / 3;
    }
    .nosotros-intro__caption {
        position: static;
        max-width: none;
        margin: 0.8rem 0 0;
        font-size: 0.88rem;
        padding: 0.85rem 1rem;
    }
    .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .team-grid--centered { gap: 1rem; }
    .team-tabs__labels {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        padding: 0 0.25rem 0.25rem;
        margin-left: -0.25rem;
        margin-right: -0.25rem;
    }
    .team-tabs__labels::-webkit-scrollbar { display: none; }
    .team-tabs__label {
        flex: 0 0 auto;
        font-size: 0.78rem;
        padding: 0.4rem 0.75rem;
        gap: 0.35rem;
    }
    .team-tabs__radio { width: 12px; height: 12px; }
}
@media (max-width: 480px) {
    .team-grid--centered .team-card,
    .team-grid--centered.team-grid--gerencia .team-card {
        flex: 0 0 calc(50% - 0.5rem);
        max-width: calc(50% - 0.5rem);
    }
    .nosotros-stats__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Contacto (página /contacto)
   ========================================================== */
.contacto {
    position: relative;
    padding: 3rem 0 2.5rem;
    background: #fff;
}
.contacto__card {
    position: relative;
    background: #fafbfc;
    border-radius: 18px;
    padding: 2.5rem 2.2rem;
    box-shadow: 0 18px 40px -18px rgba(10,20,38,0.18), 0 6px 14px -6px rgba(10,20,38,0.06);
    animation: contactoFadeUp 1500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes contactoFadeUp {
    from { transform: translateY(100vh); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .contacto__card { animation: none; }
}
.contacto__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}
.contacto__heading {
    font-family: "Montserrat", sans-serif;
    font-size: 40px;
    line-height: 44px;
    font-weight: 600;
    color: #04141a;
    margin: 0 0 1.4rem;
    letter-spacing: -0.015em;
}
.contacto__intro {
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #04141a;
    margin: 0 0 1.4rem;
}

/* Lista de oficinas */
.contacto__offices {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 520px;
}
.office {
    display: flex;
    align-items: flex-start;
    gap: 0.95rem;
    border: 1.5px solid rgba(241, 201, 62, 0.55);
    border-radius: 18px;
    padding: 1rem 1.1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
    box-shadow: 0 1px 2px rgba(10, 20, 38, 0.04);
    transition: transform 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}
.office:hover {
    transform: translateY(-2px);
    border-color: #F1C93E;
    box-shadow: 0 14px 28px -16px rgba(241, 201, 62, 0.55),
                0 6px 14px -8px rgba(10, 20, 38, 0.12);
}
.office__pin {
    flex: 0 0 auto;
    color: #0c1322;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(241, 201, 62, 0.18);
    margin-top: 2px;
}
.office__pin svg { width: 26px; height: 26px; }
.office__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.office__title {
    margin: 0 0 0.15rem;
    font-family: "Fira Sans", sans-serif;
    font-size: 19px;
    line-height: 24px;
    font-weight: 600;
    color: #04141a;
    letter-spacing: -0.01em;
}

/* Items clicables (dirección / teléfono) */
.office__item {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: #f4f5f7;
    color: #04141a;
    text-decoration: none;
    font-family: "Roboto", sans-serif;
    font-size: 14.5px;
    line-height: 20px;
    font-weight: 500;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
    width: fit-content;
    max-width: 100%;
}
.office__item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #6b7280;
    transition: color 160ms ease;
}
.office__item-text {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}
.office__item-ext {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    flex: 0 0 auto;
    transition: color 160ms ease, transform 160ms ease;
}
.office__item:hover {
    background: #04141a;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(10, 20, 38, 0.45);
}
.office__item:hover .office__item-icon,
.office__item:hover .office__item-ext { color: #F1C93E; }
.office__item:hover .office__item-ext { transform: translate(1px, -1px); }
.office__item:focus-visible {
    outline: 2px solid #F1C93E;
    outline-offset: 2px;
}
.office__item--address { padding-right: 0.8rem; }
.office__phones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.contacto__direct {
    margin: 1.2rem 0 0;
    font-family: "Roboto", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #04141a;
}
.contacto__direct strong { font-weight: 700; }
.contacto__direct em { font-style: italic; font-weight: 400; }
.contacto__direct a { color: #04141a; text-decoration: none; }
.contacto__direct a:hover { text-decoration: underline; }

/* Formulario */
.contacto__col--form {
    background: #fff;
    border-radius: 18px;
    padding: 2rem 1.8rem;
    box-shadow: 0 14px 32px -16px rgba(10,20,38,0.18), 0 4px 10px -4px rgba(10,20,38,0.06);
}
.contacto__col--form .contacto__heading {
    max-width: 400px;
}
.contacto__col--form .alert { margin: 0 0 1rem; }

.contacto-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.contacto-form__hp {
    position: absolute;
    left: -5000px;
    top: 0;
}
.contacto-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contacto-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.contacto-form__label {
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #04141a;
}
.contacto-form .contacto-form__input {
    border: 1.5px solid #e5e7eb;
    background: #fff;
    border-radius: 999px;
    padding: 0.7rem 1.1rem;
    box-shadow: none;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #04141a;
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
}
.contacto-form .contacto-form__input::placeholder { color: #04141a; opacity: 0.45; }
.contacto-form .contacto-form__input:hover { border-color: #d4d7dd; }
.contacto-form .contacto-form__input:focus {
    outline: none;
    border-color: var(--fa-yellow);
    box-shadow: 0 0 0 3px rgba(245,178,43,0.18);
    background: #fff;
}
.contacto-form .contacto-form__input--textarea {
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    resize: vertical;
    min-height: 90px;
    height: 100px;
}
.contacto-form__submit {
    align-self: stretch;
    margin-top: 0.4rem;
    background: var(--fa-dark);
    border-color: var(--fa-dark);
    color: #fff;
    border-radius: 999px;
    padding: 0.85rem 1.2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
}
.contacto-form__submit:hover {
    background: var(--fa-dark-2);
    border-color: var(--fa-dark-2);
    color: #fff;
}

/* ==========================================================
   Responsive
   ========================================================== */
/* Por defecto en móvil oculto el logo del drawer */
@media (min-width: 961px) {
    .site-logo--drawer { display: none; }
}

@media (max-width: 960px) {
    .topbar__info { gap: 0.9rem; font-size: 0.72rem; }
    .public-header__inner { min-height: 64px; gap: 0.5rem; justify-content: space-between; }
    .public-header__inner > .site-logo { margin-right: auto; }
    .site-logo__img { height: 40px; }
    .site-footer-public__logo { height: 40px; }

    .nav-toggle { display: inline-flex; }
    .header-icon--desktop { display: none; }

    .main-nav {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 360px);
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 0;
        z-index: 70;
        transform: translateX(100%);
        transition: transform 320ms cubic-bezier(.6,.05,.28,1);
        box-shadow: -16px 0 40px -16px rgba(4, 20, 26, 0.35);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }
    .main-nav.is-open { transform: translateX(0); }

    .main-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.9rem 1.1rem;
        border-bottom: 1px solid #ececef;
        gap: 0.6rem;
    }
    .main-nav__head .site-logo__img { height: 36px; }
    .nav-close { display: inline-flex; }

    .main-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.4rem 0;
        width: 100%;
    }
    .main-nav__list > li {
        display: block;
        border-bottom: 1px solid #f1f1f3;
    }
    .main-nav__list > li:last-child { border-bottom: 0; }
    .main-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        font-size: 16px;
        line-height: 22px;
        border-radius: 0;
        width: 100%;
    }
    .main-nav__link.is-active {
        background: #fafaf8;
        color: var(--fa-dark);
        font-weight: 600;
        box-shadow: inset 3px 0 0 var(--fa-yellow);
    }
    .main-nav__caret { display: none; }

    .main-nav__item.has-submenu {
        position: relative;
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
    .main-nav__item.has-submenu > .main-nav__link {
        grid-column: 1 / 2;
    }
    .submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: transparent;
        border: 0;
        border-left: 1px solid #f1f1f3;
        color: #04141a;
        cursor: pointer;
        padding: 0;
        grid-column: 2 / 3;
        transition: background 150ms ease, color 150ms ease;
    }
    .submenu-toggle svg {
        transition: transform 220ms cubic-bezier(.6,.05,.28,1);
    }
    .submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .submenu-toggle:hover { background: #fafaf8; }

    .submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        border-radius: 0;
        padding: 0;
        margin: 0;
        min-width: 0;
        width: 100%;
        background: #fafaf8;
        grid-column: 1 / -1;
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 280ms cubic-bezier(.6,.05,.28,1);
    }
    .submenu.is-open { max-height: 360px; }
    .submenu li {
        display: block;
        list-style: none;
        width: 100%;
    }
    .submenu__link {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 0.85rem 1.25rem 0.85rem 2.25rem;
        font-size: 15px;
        line-height: 20px;
        white-space: normal;
        border-top: 1px solid #ececef;
    }
    .submenu__link:hover {
        background: var(--fa-dark);
        color: #fff;
    }

    .main-nav__social {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.9rem;
        padding: 1.1rem 1.25rem 1.4rem;
        margin-top: auto;
        border-top: 1px solid #ececef;
    }
    .main-nav__social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: #fafaf8;
        color: #04141a;
        flex: 0 0 auto;
        transition: background 150ms ease, color 150ms ease, transform 200ms ease;
    }
    .main-nav__social a svg {
        width: 20px;
        height: 20px;
        display: block;
    }
    .main-nav__social a:hover {
        background: var(--fa-yellow);
        color: var(--fa-dark);
        transform: translateY(-2px);
    }

    .hero { min-height: 500px; }
    .hero__inner { padding-top: 3rem; padding-bottom: 4rem; }
    .hero__dots { bottom: 0.8rem; }
    .quicklinks__card { grid-template-columns: repeat(2, 1fr); }
    .quicklink:nth-child(2) { border-right: 0; }
    .quicklink:nth-child(1),
    .quicklink:nth-child(2) { border-bottom: 1px solid #ececef; }
    .streaming { padding: 2.8rem 0 1.5rem; }
    .streaming__grid { grid-template-columns: 1fr; gap: 1.8rem; }
    .streaming__title { font-size: 28px; line-height: 34px; }
    .streaming__lead { font-size: 0.98rem; }
    .streaming__bullets { font-size: 1rem; }
    .streaming__badge { position: static; max-width: none; margin-top: 1rem; }
    .streaming__offline { aspect-ratio: auto; min-height: 200px; }
    .stream-chat__input--name { width: 120px; }
    .stream-chat { margin-top: 1.5rem; }
    .gestion { padding: 3.5rem 0; min-height: 360px; }
    .gestion__slide { background-position: center center; }
    .gestion__overlay { background: linear-gradient(180deg, rgba(10,8,4,0.72) 0%, rgba(10,8,4,0.82) 100%); }
    .gestion__title { font-size: clamp(1.5rem, 4.5vw, 1.9rem); margin-bottom: 0.9rem; }
    .gestion__lead { font-size: 0.95rem; }
    .newsletter { padding: 1.2rem 0; }
    .newsletter__inner { justify-content: center; text-align: center; flex-wrap: wrap; max-width: 100%; gap: 1rem; }
    .newsletter__title { white-space: normal; flex: 1 1 100%; font-size: 24px; line-height: 30px; }
    .newsletter__form { flex-wrap: wrap; justify-content: center; width: 100%; gap: 0.7rem; }
    .site-footer-public { padding: 2.6rem 0 0; }
    .site-footer-public__bottom { margin-top: 2rem; }
    .contacto__grid { grid-template-columns: 1fr; gap: 2.2rem; }
    .contacto__card { padding: 1.8rem 1.2rem; }
    .contacto__col--form { padding: 1.5rem 1.2rem; }
    .contacto__col--form .contacto__heading { max-width: none; }
    .contacto__offices { max-width: none; }
    .contacto__heading { text-align: center; font-size: 32px; line-height: 38px; }
    .contacto__intro { text-align: center; }
    .contacto__direct { text-align: center; }
    .office { gap: 0.75rem; padding: 0.9rem 0.95rem; }
    .office__pin { width: 38px; height: 38px; }
    .office__pin svg { width: 22px; height: 22px; }
    .office__item { font-size: 14px; padding: 0.35rem 0.65rem; }
}

@media (max-width: 600px) {
    .topbar__info .topbar__item:nth-child(2) { display: none; }
    .header-actions { gap: 0.35rem; }

    .hero { min-height: 440px; }
    .hero__inner { padding-top: 2.4rem; padding-bottom: 3.2rem; }
    .hero__title { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-bottom: 0.8rem; }
    .hero__lead { font-size: 1rem; line-height: 1.5; margin-bottom: 1.4rem; }
    .hero__arrow { width: 44px; height: 44px; }
    .hero__arrow svg { width: 22px; height: 22px; }
    .hero__arrow--prev { left: 8px; }
    .hero__arrow--next { right: 8px; }
    .hero__dot { width: 8px; height: 8px; }
    .hero__dot.is-active { width: 22px; }

    .quicklinks { margin-top: -28px; padding-bottom: 0.6rem; }
    .quicklinks__card { grid-template-columns: 1fr; border-radius: 14px; }
    .quicklink { border-right: 0; border-bottom: 1px solid #ececef; padding: 1.2rem 1.2rem; gap: 0.9rem; }
    .quicklink:last-child { border-bottom: 0; }
    .quicklink__icon { width: 44px; height: 44px; }
    .quicklink__icon svg { width: 30px; height: 30px; }
    .quicklink__title { font-size: 1rem; }
    .quicklink__desc { font-size: 0.82rem; margin-top: 4px; }

    .streaming { padding: 2.2rem 0 1.2rem; }
    .streaming__title { font-size: 24px; line-height: 30px; }
    .streaming__bullets { font-size: 0.95rem; }
    .streaming__bullets li { padding-left: 1.5rem; margin-bottom: 0.55rem; }
    .stream-chat__row { flex-direction: column; }
    .stream-chat__input--name,
    .stream-chat__input--msg { width: 100%; }
    .stream-chat__send { align-self: flex-end; }

    .gestion { padding: 2.75rem 0; min-height: 320px; }
    .gestion__title { font-size: clamp(1.35rem, 6vw, 1.7rem); }
    .gestion__lead { font-size: 0.92rem; margin-bottom: 1.2rem; }
    .gestion__cta { gap: 0.55rem; }
    .gestion__cta .btn,
    .gestion__cta .btn--cta-outline { padding: 0.65rem 1.15rem; font-size: 0.88rem; }

    .newsletter { padding: 1rem 0 1.1rem; }
    .newsletter__title { font-size: 21px; line-height: 28px; }
    .newsletter__form { width: 100%; flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .newsletter .newsletter__input { flex: 1 1 100%; min-width: 0; width: 100%; height: 54px; font-size: 16px; padding: 0 1.4rem; }
    .newsletter__submit { width: 100%; height: 54px; font-size: 16px; }

    .prices-embed { padding: 1.4rem 0 2rem; }
    .prices-embed__title { margin-bottom: 0.7rem; }

    .site-footer-public { padding: 2.2rem 0 0; font-size: 14px; line-height: 22px; }
    .site-footer-public__inner { gap: 1.1rem; }
    .site-footer-public__logo { height: 36px; }
    .site-footer-public__tagline { font-size: 14px; line-height: 22px; padding: 0 1rem; }
    .site-footer-public__social { gap: 1.2rem; }
    .site-footer-public__social svg { width: 24px; height: 24px; }
    .site-footer-public__bottom { margin-top: 1.6rem; }
    .site-footer-public__copy { padding: 1.1rem 1rem; font-size: 13px; line-height: 20px; }

    .contacto-form__row { grid-template-columns: 1fr; }
}

/* ==========================================================
   Recinto — ficha detalle
   ========================================================== */
.recinto {
    padding: 2.5rem 0 3rem;
    background: #fff;
    position: relative;
}
.recinto__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}

.recinto__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
}
.recinto__photo {
    position: relative;
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    background: #ececef;
}
.recinto__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 320ms ease;
}
.recinto__photo--placeholder {
    background: linear-gradient(135deg, #e8eaf0 0%, #c9ced8 100%);
}
.recinto__photo--btn {
    border: 0;
    padding: 0;
    cursor: zoom-in;
    font: inherit;
    color: inherit;
    text-align: inherit;
}
.recinto__photo--btn:hover img,
.recinto__photo--btn:focus-visible img {
    transform: scale(1.05);
}
.recinto__photo--btn:focus-visible {
    outline: 2px solid var(--fa-yellow);
    outline-offset: 2px;
}
.recinto__photo-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(10,20,38,0.75);
    color: #fff;
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 200ms ease, transform 200ms ease;
    backdrop-filter: blur(2px);
    pointer-events: none;
}
.recinto__photo--btn:hover .recinto__photo-zoom,
.recinto__photo--btn:focus-visible .recinto__photo-zoom {
    opacity: 1;
    transform: translateY(0);
}

/* Lightbox de la galería */
body.recinto-lightbox-open { overflow: hidden; }
.recinto-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(0.6rem, 3vw, 2rem);
    background: rgba(10, 14, 24, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 220ms ease;
}
.recinto-lightbox.is-open {
    display: flex;
    opacity: 1;
    animation: recintoLightboxFade 220ms ease-out;
}
@keyframes recintoLightboxFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.recinto-lightbox__stage {
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
}
.recinto-lightbox__img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 6rem);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
    animation: recintoLightboxImg 280ms ease-out;
}
@keyframes recintoLightboxImg {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
.recinto-lightbox__caption {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255,255,255,0.88);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    max-width: 100%;
}
.recinto-lightbox__counter {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.recinto-lightbox__alt:empty { display: none; }
.recinto-lightbox__close,
.recinto-lightbox__nav {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: rgba(255,255,255,0.12);
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    transition: background 160ms ease, transform 160ms ease;
}
.recinto-lightbox__close {
    top: 1rem;
    right: 1rem;
    width: 42px;
    height: 42px;
}
.recinto-lightbox__nav {
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
}
.recinto-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.recinto-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.recinto-lightbox__close:hover,
.recinto-lightbox__close:focus-visible,
.recinto-lightbox__nav:hover,
.recinto-lightbox__nav:focus-visible {
    background: rgba(255,255,255,0.22);
    outline: none;
}
.recinto-lightbox__nav:hover,
.recinto-lightbox__nav:focus-visible {
    transform: translateY(-50%) scale(1.05);
}
.recinto-lightbox__close:focus-visible,
.recinto-lightbox__nav:focus-visible {
    box-shadow: 0 0 0 3px rgba(245,178,43,0.55);
}
@media (max-width: 600px) {
    .recinto-lightbox__nav { width: 40px; height: 40px; }
    .recinto-lightbox__close { width: 38px; height: 38px; top: 0.6rem; right: 0.6rem; }
    .recinto-lightbox__img { max-height: calc(100vh - 7rem); }
}

.recinto__panel {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.recinto__card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 30px -16px rgba(10,20,38,0.18);
    padding: 1.6rem;
    border: 1px solid #ececef;
}

.recinto__address {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    color: #5a6275;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.recinto__pin { color: var(--fa-dark); flex: 0 0 auto; }

.recinto__phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.8rem;
    color: #5a6275;
    font-size: 0.82rem;
    font-weight: 600;
}
.recinto__phone svg { color: var(--fa-dark); flex: 0 0 auto; }
.recinto__phone a { color: inherit; text-decoration: none; }
.recinto__phone a:hover { color: var(--fa-dark); text-decoration: underline; }

.recinto__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.recinto__title {
    margin: 0;
    color: #1a1f2e;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
}
/* Cuenta regresiva al próximo remate (badge dinámico) */
.recinto__day {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    flex: 0 0 auto;
}
.recinto__day-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: var(--fa-dark);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.recinto__day-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fa-yellow);
    box-shadow: 0 0 0 3px rgba(245,178,43,0.22);
}
.recinto__day-sub {
    font-size: 0.7rem;
    color: #6b7283;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.recinto__day-sub strong { color: #1a1f2e; font-weight: 700; }

/* Estado: es hoy → CTA verde pulsante */
.recinto__day--today .recinto__day-pill {
    background: #1f9a5b;
    color: #fff;
    animation: recintoDayPulse 1.6s ease-in-out infinite;
}
.recinto__day--today .recinto__day-dot {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
}
/* Estado: mañana → verde */
.recinto__day--soon .recinto__day-pill { background: #1f9a5b; }
.recinto__day--soon .recinto__day-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.2); }
/* Cerca (2-3 días) y lejos: dark con punto amarillo (default) */
@keyframes recintoDayPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(31,154,91,0.5); }
    50%      { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(31,154,91,0); }
}

.recinto__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: var(--fa-dark);
    color: #fff;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: background 150ms ease;
}
.recinto__btn:hover {
    background: var(--fa-dark-2);
    color: #fff;
    text-decoration: none;
}

.recinto__price-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.85rem 1rem;
    margin: 0 0 0.9rem;
    border: 0;
    border-radius: 999px;
    background: var(--fa-yellow);
    color: var(--fa-dark);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.15;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 6px 16px -10px rgba(245, 178, 43, 0.7);
    transition: background-color 150ms ease, transform 120ms ease, box-shadow 150ms ease;
}
.recinto__price-cta:hover {
    background: var(--fa-yellow-hover);
    box-shadow: 0 8px 20px -10px rgba(245, 178, 43, 0.85);
}
.recinto__price-cta:active { transform: scale(0.98); }
.recinto__price-cta:focus-visible {
    outline: 2px solid var(--fa-dark);
    outline-offset: 2px;
}
.recinto__price-cta svg { flex: 0 0 auto; }

/* Secciones colapsables: Contacto Comercial + Martilleros */
.recinto__groups {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
}
.recinto__group {
    border: 1px solid #ececef;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.recinto__group[open] {
    border-color: rgba(10,20,38,0.18);
    box-shadow: 0 6px 16px -12px rgba(10,20,38,0.25);
}
.recinto__group-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.85rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: #f8f9fb;
    transition: background 160ms ease;
}
.recinto__group-summary::-webkit-details-marker { display: none; }
.recinto__group-summary:hover { background: #eef0f4; }
.recinto__group[open] .recinto__group-summary {
    background: var(--fa-dark);
    color: #fff;
}
.recinto__group-summary:focus-visible {
    outline: 2px solid rgba(245,178,43,0.7);
    outline-offset: 2px;
}
.recinto__group-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2a2f3d;
    line-height: 1;
}
.recinto__group-label svg { flex: 0 0 auto; }
.recinto__group[open] .recinto__group-label { color: #fff; }
.recinto__group-label em {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(10,20,38,0.08);
    color: inherit;
}
.recinto__group[open] .recinto__group-label em {
    background: rgba(255,255,255,0.18);
    color: #fff;
}
.recinto__group-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5a6275;
    transition: transform 220ms cubic-bezier(.4,0,.2,1), color 160ms ease;
}
.recinto__group[open] .recinto__group-chevron {
    color: #fff;
    transform: rotate(180deg);
}
.recinto__group-body {
    padding: 0.8rem 0.85rem 0.95rem;
    animation: recintoTeamFade 240ms ease-out;
}
.recinto__switch-empty {
    margin: 0.4rem 0;
    padding: 0.9rem;
    text-align: center;
    color: #6b7283;
    font-size: 0.85rem;
    background: #f8f9fb;
    border-radius: 10px;
}

.recinto__team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0.7rem 0 0.4rem;
    animation: recintoTeamFade 220ms ease-out;
}
@keyframes recintoTeamFade {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.recinto__team-card {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 12px;
    padding: 0.4rem 0.4rem 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 12px -8px rgba(10,20,38,0.18);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.recinto__team-card:hover {
    border-color: var(--fa-yellow);
    box-shadow: 0 8px 22px -12px rgba(10,20,38,0.25);
    transform: translateY(-1px);
}
.recinto__team-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 9px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recinto__team-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.recinto__team-initials {
    font-size: 2.2rem;
    color: #9ca3af;
    font-weight: 600;
}
.recinto__team-body {
    padding: 0.7rem 0.4rem 0.9rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}
.recinto__team-name {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--fa-dark);
    line-height: 1.2;
}
.recinto__team-role {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
}
.recinto__team-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}
.recinto__team-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fa-dark);
    color: #fff;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
}
.recinto__team-icon:hover {
    background: var(--fa-yellow-hover);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.recinto__team-icon[data-tooltip]::after,
.recinto__team-icon[data-tooltip]::before {
    position: absolute;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease, transform 150ms ease;
}
.recinto__team-icon[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    background: var(--fa-dark);
    color: #fff;
    font-size: 0.78rem;
    line-height: 1;
    white-space: nowrap;
    padding: 6px 9px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    z-index: 5;
}
.recinto__team-icon[data-tooltip]::before {
    content: "";
    bottom: calc(100% + 3px);
    transform: translate(-50%, 4px);
    border: 5px solid transparent;
    border-top-color: var(--fa-dark);
    z-index: 5;
}
.recinto__team-icon[data-tooltip]:hover::after,
.recinto__team-icon[data-tooltip]:focus-visible::after,
.recinto__team-icon[data-tooltip]:hover::before,
.recinto__team-icon[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 480px) {
    .recinto__team-grid { grid-template-columns: 1fr; }
}

.recinto__map {
    margin: 1rem 0 1.2rem;
    border-radius: 8px;
    overflow: hidden;
    background: #ececef;
    min-height: 180px;
}
.recinto__map iframe { display: block; }
.recinto__map-link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
    color: var(--fa-dark);
    text-decoration: underline;
    font-size: 0.9rem;
}

/* Encargado del recinto — tarjeta hero protagónica */
.recinto__manager {
    position: relative;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 1.1rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--fa-dark) 0%, var(--fa-dark-2) 100%);
    color: #fff;
    margin-bottom: 1.2rem;
    overflow: hidden;
    box-shadow: 0 14px 32px -18px rgba(10,20,38,0.55);
}
.recinto__manager::after {
    content: "";
    position: absolute;
    right: -40px;
    top: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--fa-yellow);
    opacity: 0.10;
    pointer-events: none;
}
.recinto__manager-avatar {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--fa-yellow);
    color: var(--fa-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    border: 3px solid rgba(255,255,255,0.18);
    z-index: 1;
}
.recinto__manager-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.recinto__manager-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fa-yellow);
}
.recinto__manager-name {
    display: block;
    font-size: 1.1rem;
    line-height: 1.2;
    color: #fff;
    margin: 0.1rem 0 0.55rem;
}
.recinto__manager-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.recinto__manager-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.42rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.recinto__manager-cta:hover { text-decoration: none; transform: translateY(-1px); }
.recinto__manager-cta--call {
    background: var(--fa-yellow);
    color: var(--fa-dark);
}
.recinto__manager-cta--call:hover { background: #fff; color: var(--fa-dark); }
.recinto__manager-cta--wa {
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.22);
    width: 30px;
    height: 30px;
    padding: 0;
    justify-content: center;
}
.recinto__manager-cta--wa:hover { background: #25d366; color: #fff; border-color: #25d366; }

@media (max-width: 480px) {
    .recinto__manager { grid-template-columns: 52px 1fr; padding: 0.95rem 1rem; gap: 0.8rem; }
    .recinto__manager-avatar { width: 52px; height: 52px; font-size: 1.15rem; }
    .recinto__manager-name { font-size: 1rem; }
}

.recinto__guide {
    border: 1px solid #f0c869;
    background: #fffaf0;
    border-radius: 8px;
    padding: 1.1rem 1.2rem;
}
.recinto__guide-title {
    margin: 0 0 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    color: #1f2533;
    text-align: center;
}
.recinto__guide-list { margin: 0; padding: 0; }
.recinto__guide-row {
    display: grid;
    grid-template-columns: 28px 1fr;
    align-items: center;
    gap: 0.7rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid #f3e6c1;
}
.recinto__guide-row:last-child { border-bottom: 0; }
.recinto__guide-row dt {
    margin: 0;
    color: var(--fa-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.recinto__guide-row dd {
    margin: 0;
}
.recinto__guide-row dd span {
    display: block;
    font-weight: 600;
    color: #1f2533;
    font-size: 0.92rem;
    line-height: 1.25;
}
.recinto__guide-row dd em {
    display: block;
    font-style: normal;
    color: #8a93a6;
    font-size: 0.75rem;
    margin-top: 1px;
}

.recinto__guide-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.65rem 1rem;
    border: 1px solid var(--fa-dark);
    border-radius: 999px;
    background: #fff;
    color: var(--fa-dark);
    font: inherit;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.recinto__guide-copy:hover {
    background: var(--fa-dark);
    color: #fff;
}
.recinto__guide-copy.is-copied {
    background: #1f9a5b;
    border-color: #1f9a5b;
    color: #fff;
}
.recinto__guide-copy-icon {
    flex: 0 0 auto;
}

.recinto__description {
    color: #3a4054;
    line-height: 1.7;
    font-size: 0.95rem;
}
.recinto__description p { margin: 0 0 0.9rem; }
.recinto__description p:last-child { margin-bottom: 0; }

.recinto__notify {
    background: #fff;
    border: 1px solid #ececef;
    border-radius: 10px;
    padding: 1.3rem 1.4rem;
    box-shadow: 0 10px 24px -16px rgba(10,20,38,0.18);
}
.recinto__notify-head {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}
.recinto__notify-icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff7e1;
    color: var(--fa-yellow-hover);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.recinto__notify h3 {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    color: #1a1f2e;
}
.recinto__notify-head p {
    margin: 0;
    color: #5a6275;
    font-size: 0.85rem;
    line-height: 1.45;
}
.recinto__notify-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    position: relative;
}
.recinto__notify-form input[type="text"]:not([name="website"]),
.recinto__notify-form input[type="email"] {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
    font-family: inherit;
    font-size: 0.88rem;
    color: #1f2533;
    width: 100%;
}
.recinto__notify-form input:focus {
    outline: none;
    border-color: var(--fa-yellow);
    box-shadow: 0 0 0 3px rgba(245,178,43,0.18);
}
.recinto__notify-submit {
    grid-column: 1 / -1;
    background: var(--fa-dark);
    border: 0;
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.88rem;
    padding: 0.85rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: background 150ms ease;
}
.recinto__notify-submit:hover { background: var(--fa-dark-2); }

/* Listado /recintos */
.recintos-index { padding: 3rem 0 4rem; }
.recintos-index__title {
    margin: 0 0 .8rem;
    font-size: clamp(1.6rem, 2.8vw, 2.4rem);
    color: #1a1f2e;
    letter-spacing: -0.01em;
}
.recintos-index__lead {
    margin: 0 0 2rem;
    color: #5a6275;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 720px;
}
.recintos-index__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.6rem;
}
.recinto-card {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    overflow: hidden;
    background-color: #1f2533;
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 36px -22px rgba(10,20,38,0.45);
    isolation: isolate;
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.recinto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 44px -22px rgba(10,20,38,0.55);
}
.recinto-card__link {
    position: absolute;
    inset: 0;
    z-index: 3;
    text-indent: -9999px;
    overflow: hidden;
}
.recinto-card__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.45) 85%,
            rgba(0,0,0,0.75) 100%
        ),
        var(
            --recinto-card-ov,
            linear-gradient(
                to bottom,
                rgba(10,20,38,0) 35%,
                rgba(10,20,38,0.45) 60%,
                rgba(10,20,38,0.85) 100%
            )
        );
}
.recinto-card__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.6rem 1.6rem 1.8rem;
    text-align: center;
    color: #fff;
}
.recinto-card__title {
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: clamp(1.2rem, 1.55vw, 1.5rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.recinto-card__cta {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.6rem;
    border-radius: 999px;
    background: transparent;
    border: 2px solid var(--fa-yellow);
    color: #fff;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 150ms ease, color 150ms ease;
}
.recinto-card__cta svg {
    background: var(--fa-yellow);
    color: var(--fa-dark);
    border-radius: 50%;
    padding: 3px;
    width: 18px;
    height: 18px;
}
.recinto-card__cta:hover {
    background: var(--fa-yellow);
    color: var(--fa-dark);
    text-decoration: none;
}
.recinto-card__cta:hover svg { background: var(--fa-dark); color: var(--fa-yellow); }
.recinto-card__addr {
    margin: 1.2rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255,255,255,0.92);
    font-size: 0.88rem;
    font-weight: 500;
}
.recinto-card__addr svg { color: var(--fa-yellow); flex-shrink: 0; }

@media (max-width: 960px) {
    .recinto__grid { grid-template-columns: 1fr; gap: 1.4rem; }
    .recinto__panel { order: 1; }
    .recinto__gallery { order: 2; }
    .recintos-index__grid { grid-template-columns: 1fr; gap: 1.2rem; }
    .recinto-card { aspect-ratio: 16 / 11; }
}
@media (max-width: 600px) {
    .recinto { padding: 1.2rem 0 1.8rem; }
    .recinto__gallery { grid-template-columns: 1fr 1fr; gap: 0.45rem; }
    .recinto__card { padding: 1.1rem; }
    .recinto__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.7rem;
        margin-bottom: 0.9rem;
    }
    .recinto__title { font-size: 1.45rem; }
    .recinto__day { align-items: flex-start; }
    .recinto__address { font-size: 0.72rem; }
    .recinto__notify-form { grid-template-columns: 1fr; }
    .recinto__notify {
        padding: 1.1rem;
    }
    .recinto__notify-head { gap: 0.6rem; }
    .recinto__notify-head h3 { font-size: 1rem; }
    .recinto__guide-list { gap: 0.55rem; }
    .recinto__group-summary { padding: 0.7rem 0.8rem; }
    .recinto__group-body { padding: 0.7rem 0.7rem 0.85rem; }
    .recinto__group-label { font-size: 0.82rem; }
    .recinto__photo { aspect-ratio: 1 / 1; }
    .recinto__photo-zoom {
        width: 28px;
        height: 28px;
        top: 6px;
        right: 6px;
        opacity: 0.9;
        transform: none;
    }
    .recinto__photo-zoom svg { width: 16px; height: 16px; }
    .recinto-lightbox__caption { font-size: 0.78rem; }
}
@media (max-width: 380px) {
    .recinto__gallery { grid-template-columns: 1fr; }
}

/* ==========================================================
   Noticias — listado + detalle
   ========================================================== */
.noticias-page {
    background-color: #fafafa;
}

.noticias {
    padding: 3.5rem 0 4rem;
}

.noticias__head {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 2.6rem;
}

.noticias__title {
    color: #0a1426;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    margin: 0 0 0.7rem;
    letter-spacing: -0.01em;
}

.noticias__lead {
    color: #4a5163;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.noticias__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
}

.noticias__empty {
    text-align: center;
    color: #6b7283;
    padding: 3rem 1rem;
}

.noticia-card {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 28px -18px rgba(10,20,38,0.25), 0 2px 6px -2px rgba(10,20,38,0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.noticia-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -20px rgba(10,20,38,0.35), 0 4px 10px -4px rgba(10,20,38,0.08);
}

.noticia-card__media {
    display: block;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: #ececef;
}
.noticia-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 350ms ease;
}
.noticia-card:hover .noticia-card__media img {
    transform: scale(1.03);
}

.noticia-card__body {
    padding: 1.1rem 1.1rem 0.4rem;
    flex: 1 1 auto;
}

.noticia-card__title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 0.7rem;
    color: #0a1426;
}
.noticia-card__title a {
    color: inherit;
    text-decoration: none;
}
.noticia-card__title a:hover {
    color: var(--fa-yellow-hover);
    text-decoration: none;
}

.noticia-card__excerpt {
    color: #4a5163;
    font-size: 0.84rem;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.noticia-card__meta {
    padding: 1rem 1.1rem;
    border-top: 1px solid #f1f1f3;
    color: #8a93a6;
    font-size: 0.74rem;
    letter-spacing: 0.01em;
}

/* Detalle */
.noticia-detail {
    padding: 2.4rem 0 3.5rem;
}
.noticia-detail__container {
    max-width: 900px;
}

/* Navegación anterior / siguiente (cards grises arriba del artículo) */
.noticia-detail__nav {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.noticia-detail__nav-spacer {
    flex: 1 1 0;
}
.noticia-detail__nav-link {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: #f3f4f6;
    border-radius: 6px;
    padding: 0.95rem 1.1rem;
    color: #4a5163;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
    min-width: 0;
}
.noticia-detail__nav-link:hover {
    background: #ebedf0;
    color: #0a1426;
    text-decoration: none;
}
.noticia-detail__nav-link--next {
    justify-content: flex-end;
    text-align: right;
}
.noticia-detail__nav-arrow {
    display: inline-flex;
    color: #8a93a6;
    flex: 0 0 auto;
}
.noticia-detail__nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.noticia-detail__nav-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8a93a6;
    margin-bottom: 0.15rem;
}
.noticia-detail__nav-title {
    font-size: 0.92rem;
    font-weight: 500;
    color: #4a5163;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Artículo: card blanca con sombra */
.noticia-detail__article {
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 28px -18px rgba(10,20,38,0.25), 0 2px 6px -2px rgba(10,20,38,0.06);
    padding: 1.6rem;
}
.noticia-detail__title {
    color: #0a1426;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    text-transform: capitalize;
    margin: 0 0 1.2rem;
    padding: 0 0 1.1rem;
    border-bottom: 2px solid #e6e7ea;
}
.noticia-detail__layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}
.noticia-detail__body {
    flex: 1 1 0;
    min-width: 0;
    color: #4a5163;
    font-size: 0.98rem;
    line-height: 1.75;
}
.noticia-detail__body p {
    margin: 0 0 1.1rem;
}
.noticia-detail__body p:last-child {
    margin-bottom: 0;
}
.noticia-detail__body img,
.noticia-detail__body video,
.noticia-detail__body iframe {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 6px;
}
.noticia-detail__body figure {
    margin: 1rem 0;
    max-width: 100%;
}
.noticia-detail__body table {
    max-width: 100%;
    display: block;
    overflow-x: auto;
}
.noticia-detail__media {
    flex: 0 0 38%;
    max-width: 38%;
    margin: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #ececef;
}
.noticia-detail__media img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 720px) {
    .noticia-detail__layout {
        flex-direction: column-reverse;
    }
    .noticia-detail__media {
        flex: none;
        max-width: 100%;
        width: 100%;
    }
    .noticia-detail__title {
        text-align: center;
    }
}
@media (max-width: 640px) {
    .noticia-detail__article {
        padding: 1.1rem;
    }
    .noticia-detail__nav-title {
        font-size: 0.85rem;
    }
    .noticia-detail__body {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

@media (max-width: 1100px) {
    .noticias__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
    .noticias__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .noticias__grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   Animaciones de entrada por sección (configurables desde admin).
   Se aplican con la clase `.hs-anim.hs-anim--<key>` en la sección.
   Si el navegador respeta prefers-reduced-motion, se desactivan.
   ========================================================== */
.hs-anim { animation-duration: .9s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.2,.7,.2,1); }
.hs-anim--fade      { animation-name: hsFadeIn; }
.hs-anim--zoom      { animation-name: hsZoomIn; }
.hs-anim--slide-up  { animation-name: hsSlideUp; }
.hs-anim--slide-left{ animation-name: hsSlideLeft; }

@keyframes hsFadeIn    { from { opacity: 0; }                        to { opacity: 1; } }
@keyframes hsZoomIn    { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
@keyframes hsSlideUp   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hsSlideLeft { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
    .hs-anim { animation: none !important; }
}

.prices-embed__title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    color: #1a1f2e;
    margin: 0 0 1rem;
    letter-spacing: -0.01em;
}

/* ==========================================================
   Banner publicidad — página /transmision
   ========================================================== */
.pub-banner {
    background: var(--fa-dark, #0a1426);
    color: #fff;
    padding: 1.1rem 0;
}
.pub-banner__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    flex-wrap: wrap;
}
.pub-banner__text {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: .9rem;
    line-height: 1.5;
    color: rgba(255,255,255,.88);
    flex: 1;
    min-width: 0;
}
.pub-banner__text svg { flex-shrink: 0; color: var(--fa-yellow, #f5b22b); }
.pub-banner__text strong { color: #fff; }
.pub-banner__cta {
    flex-shrink: 0;
    background: var(--fa-yellow, #f5b22b);
    color: var(--fa-dark, #0a1426);
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .04em;
    padding: .55rem 1.1rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: background 160ms, transform 120ms;
    white-space: nowrap;
}
.pub-banner__cta:hover { background: #e5a41f; }
.pub-banner__cta:active { transform: translateY(1px); }

/* ==========================================================
   Modal solicitud de publicidad
   ========================================================== */
.pub-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.pub-modal[hidden] { display: none; }
.pub-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10,20,38,.65);
    backdrop-filter: blur(3px);
    cursor: pointer;
}
.pub-modal__card {
    position: relative;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 24px 64px -16px rgba(10,20,38,.45);
    padding: 2rem 2rem 1.8rem;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
}
.pub-modal__close {
    position: absolute;
    top: .9rem;
    right: .9rem;
    background: none;
    border: none;
    cursor: pointer;
    color: #64748b;
    padding: .3rem;
    border-radius: 4px;
    transition: color 150ms;
}
.pub-modal__close:hover { color: #0a1426; }
.pub-modal__header { margin-bottom: 1.4rem; }
.pub-modal__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: #0a1426;
    margin: 0 0 .3rem;
}
.pub-modal__subtitle {
    color: #64748b;
    font-size: .88rem;
    margin: 0;
}
.pub-modal__field { margin-bottom: 1rem; }
.pub-modal__label {
    display: block;
    font-size: .83rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: .35rem;
}
.pub-modal__label span { color: #dc2626; }
.pub-modal__input,
.pub-modal__textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .6rem .85rem;
    border: 1.5px solid #d1d5db;
    border-radius: 7px;
    font-size: .9rem;
    font-family: inherit;
    color: #0a1426;
    background: #fff;
    transition: border-color 150ms;
    outline: none;
}
.pub-modal__input:focus,
.pub-modal__textarea:focus { border-color: var(--fa-primary, #f5b22b); }
.pub-modal__textarea { resize: vertical; min-height: 90px; }
.pub-modal__error {
    color: #dc2626;
    font-size: .83rem;
    margin: .5rem 0;
}
.pub-modal__submit {
    display: block;
    width: 100%;
    background: var(--fa-dark, #0a1426);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: .92rem;
    padding: .75rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: .5rem;
    transition: background 160ms;
}
.pub-modal__submit:hover { background: #172236; }
.pub-modal__submit:disabled { opacity: .55; cursor: default; }
.pub-modal__success {
    text-align: center;
    padding: 1.5rem 0 .5rem;
    color: #16a34a;
}
.pub-modal__success svg { display: block; margin: 0 auto 1rem; }
.pub-modal__success p {
    font-size: .95rem;
    font-weight: 500;
    color: #334155;
    margin: 0;
}
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .pub-banner__inner { flex-direction: column; align-items: flex-start; }
    .pub-banner__cta { align-self: flex-start; }
    .pub-modal__card { padding: 1.5rem 1.2rem 1.3rem; }
}

/* ==========================================================
   Transmisión — estado offline tipo canal de streaming
   ========================================================== */
.tx-stage {
    background: #0d1117;
    border-bottom: 1px solid #21262d;
}

.tx-offline-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 1.5rem 3.5rem;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
}

.tx-offline-screen {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3.5rem 2rem;
    background: #161b22;
    border: 1px solid #21262d;
    border-radius: 14px 0 0 14px;
    text-align: center;
}

.tx-offline-icon {
    position: relative;
    color: #484f58;
    margin-bottom: .3rem;
}
.tx-offline-pulse {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1.5px solid #21262d;
    animation: tx-pulse 2.8s ease-in-out infinite;
}
@keyframes tx-pulse {
    0%, 100% { transform: scale(1); opacity: .5; }
    50%       { transform: scale(1.12); opacity: .2; }
}

.tx-offline-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: #484f58;
    border: 1px solid #30363d;
    padding: .25rem .7rem;
    border-radius: 20px;
}
.tx-offline-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #484f58;
}

.tx-offline-title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #c9d1d9;
    margin: 0;
    letter-spacing: -.01em;
}

.tx-offline-msg {
    color: #8b949e;
    font-size: .92rem;
    line-height: 1.65;
    max-width: 420px;
    margin: 0;
}

.tx-offline-next {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .82rem;
    color: #8b949e;
    background: #0d1117;
    border: 1px solid #21262d;
    padding: .45rem 1rem;
    border-radius: 8px;
    margin-top: .2rem;
}
.tx-offline-next strong {
    color: var(--fa-yellow, #f5b22b);
    font-weight: 700;
}
.tx-offline-next svg { flex-shrink: 0; }

.tx-offline-actions {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1.4rem;
}
.tx-offline-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .03em;
    padding: .7rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
    border: 1px solid transparent;
}
.tx-offline-btn--primary {
    background: var(--fa-yellow, #f5b22b);
    color: #0d1117;
    border-color: var(--fa-yellow, #f5b22b);
}
.tx-offline-btn--primary:hover {
    background: #ffc44a;
    border-color: #ffc44a;
    text-decoration: none;
    transform: translateY(-1px);
}
.tx-offline-btn--ghost {
    background: transparent;
    color: #c9d1d9;
    border-color: #30363d;
}
.tx-offline-btn--ghost:hover {
    background: #21262d;
    border-color: #484f58;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}
.tx-offline-btn svg { flex-shrink: 0; }
@media (max-width: 540px) {
    .tx-offline-actions { width: 100%; flex-direction: column; align-items: stretch; }
    .tx-offline-btn { justify-content: center; }
}

/* Chat lateral al panel offline */
.tx-offline-chat {
    width: 340px;
    flex-shrink: 0;
    border: 1px solid #21262d;
    border-left: none;
    border-radius: 0 14px 14px 0;
    overflow: hidden;
    background: #161b22;
    display: flex;
    flex-direction: column;
}

.tx-offline-chat__header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.1rem;
    background: #0d1117;
    border-bottom: 1px solid #21262d;
    font-size: .82rem;
    font-weight: 600;
    color: #8b949e;
}

.tx-offline-chat__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: .75rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    scroll-behavior: smooth;
}

.tx-offline-chat__empty {
    color: #484f58;
    font-size: .85rem;
    text-align: center;
    margin: auto 0;
    padding: .8rem 0;
}

.tx-offline-chat__item {
    display: flex;
    flex-direction: column;
    gap: .08rem;
}
.tx-offline-chat__item--new {
    animation: chat-in .22s ease both;
}

.tx-offline-chat__meta {
    display: flex;
    align-items: baseline;
    gap: .4rem;
}
.tx-offline-chat__meta strong {
    font-size: .8rem;
    font-weight: 700;
    color: var(--fa-yellow, #f5b22b);
}
.tx-offline-chat__meta time {
    font-size: .7rem;
    color: #484f58;
}
.tx-offline-chat__item p {
    font-size: .85rem;
    color: #8b949e;
    line-height: 1.5;
    margin: 0;
    word-break: break-word;
}

.tx-offline-chat__form {
    border-top: 1px solid #21262d;
    padding: .75rem .9rem;
    background: #0d1117;
}
.tx-offline-chat__row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.tx-offline-chat__input {
    padding: .55rem .7rem;
    border: 1.5px solid #30363d;
    border-radius: 6px;
    font-size: .85rem;
    background: #161b22;
    color: #c9d1d9;
    outline: none;
    transition: border-color .15s;
    box-sizing: border-box;
}
.tx-offline-chat__input:focus { border-color: var(--fa-yellow, #f5b22b); }
.tx-offline-chat__input--name { width: 100%; }
.tx-offline-chat__input--msg  { flex: 1; min-width: 0; }

.tx-offline-chat__send {
    padding: .42rem .62rem;
    background: var(--fa-yellow, #f5b22b);
    color: #0a1426;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity .15s;
}
.tx-offline-chat__send:hover { opacity: .82; }
.tx-offline-chat__send:disabled { opacity: .4; cursor: default; }
.tx-offline-chat__error {
    color: #f87171;
    font-size: .78rem;
    margin: .35rem 0 0;
}

/* Sección info debajo del stage offline */
.tx-info {
    padding: 2.5rem 0 2rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
}
.tx-info__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem 3rem;
    align-items: center;
}
.tx-info__title {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.25;
    color: #0a1426;
    margin: 0 0 .6rem;
    letter-spacing: -.01em;
}
.tx-info__lead {
    color: #5a6275;
    font-size: .92rem;
    line-height: 1.65;
    max-width: 560px;
    margin: 0 0 1rem;
}
.tx-info__bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem 1.4rem;
}
.tx-info__bullets li {
    position: relative;
    padding-left: 1.4rem;
    font-size: .9rem;
    font-weight: 600;
    color: #1e293b;
}
.tx-info__bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: .45em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fa-yellow, #f5b22b);
}
.tx-info__meta {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    min-width: 190px;
}
.tx-info__stat {
    display: flex;
    align-items: center;
    gap: .75rem;
}
.tx-info__stat-num {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--fa-yellow, #f5b22b);
}
.tx-info__stat-icon {
    color: var(--fa-yellow, #f5b22b);
    flex-shrink: 0;
}
.tx-info__stat-label {
    font-size: .8rem;
    color: #5a6275;
    line-height: 1.3;
}

/* Responsive para offline y info */
@media (max-width: 900px) {
    .tx-offline-wrap { flex-direction: column; align-items: center; gap: 1.5rem; }
    .tx-offline-screen { border-radius: 14px; }
    .tx-offline-chat { width: 100%; border: 1px solid #21262d; border-radius: 12px; }
    .tx-offline-chat__list { max-height: 200px; }
    .tx-info__grid { grid-template-columns: 1fr; }
    .tx-info__meta { flex-direction: row; flex-wrap: wrap; gap: .75rem 2rem; min-width: 0; }
}
@media (max-width: 600px) {
    .tx-offline-screen { padding: 2.5rem 1.2rem; }
    .tx-offline-title { font-size: 1.2rem; }
    .tx-offline-wrap { padding: 2rem 1rem 2.5rem; }
    .tx-offline-chat__send { align-self: flex-end; }
    .tx-info { padding: 1.8rem 0 1.5rem; }
    .tx-info__title { font-size: 1.3rem; }
    .tx-info__meta { padding: 1rem; }
    .tx-info__stat-num { font-size: 1.3rem; }
}

/* ==========================================================
   /transmision — capa "Próximamente"
   ========================================================== */
.tx-coming-soon-shell { background: var(--fa-dark); }

.tx-coming-soon {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 1.25rem 5rem;
    background:
        radial-gradient(1100px 600px at 50% -10%, rgba(245, 178, 43, 0.18), transparent 70%),
        radial-gradient(900px 500px at 50% 110%, rgba(245, 178, 43, 0.08), transparent 70%),
        linear-gradient(180deg, #0a1426 0%, #0f1a30 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.tx-coming-soon::before,
.tx-coming-soon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.35;
}
.tx-coming-soon::before {
    width: 320px; height: 320px;
    background: var(--fa-yellow);
    top: -120px; left: -80px;
    animation: tx-cs-float 9s ease-in-out infinite alternate;
}
.tx-coming-soon::after {
    width: 380px; height: 380px;
    background: #2a3a5e;
    bottom: -140px; right: -100px;
    animation: tx-cs-float 11s ease-in-out infinite alternate-reverse;
}

@keyframes tx-cs-float {
    from { transform: translate(0, 0); }
    to   { transform: translate(40px, 30px); }
}

.tx-coming-soon__inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
    text-align: center;
}

.tx-coming-soon__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: rgba(245, 178, 43, 0.12);
    color: var(--fa-yellow);
    border: 1px solid rgba(245, 178, 43, 0.35);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}
.tx-coming-soon__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fa-yellow);
    box-shadow: 0 0 0 0 rgba(245, 178, 43, 0.7);
    animation: tx-cs-pulse 1.6s ease-out infinite;
}
@keyframes tx-cs-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(245, 178, 43, 0.7); }
    70%  { box-shadow: 0 0 0 12px rgba(245, 178, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 178, 43, 0); }
}

.tx-coming-soon__title {
    font-size: clamp(2.6rem, 7vw, 4.6rem);
    line-height: 1.05;
    font-weight: 800;
    margin: 0 0 1.1rem;
    letter-spacing: -0.02em;
    background: linear-gradient(180deg, #ffffff 0%, #d3dbe8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tx-coming-soon__lead {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    line-height: 1.6;
    color: #c9d2e0;
    margin: 0 auto 2.2rem;
    max-width: 560px;
}

.tx-coming-soon__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    justify-content: center;
}

.tx-coming-soon__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.6rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform 200ms ease, background 150ms ease, color 150ms ease, border-color 150ms ease, box-shadow 200ms ease;
    border: 1.5px solid transparent;
}
.tx-coming-soon__btn--primary {
    background: var(--fa-yellow);
    color: var(--fa-dark);
    box-shadow: 0 8px 24px -8px rgba(245, 178, 43, 0.6);
}
.tx-coming-soon__btn--primary:hover {
    background: var(--fa-yellow-hover);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -10px rgba(245, 178, 43, 0.8);
}
.tx-coming-soon__btn--ghost {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
}
.tx-coming-soon__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .tx-coming-soon { padding: 3rem 1rem 3.5rem; min-height: calc(100vh - 220px); }
    .tx-coming-soon__actions { flex-direction: column; width: 100%; }
    .tx-coming-soon__btn { justify-content: center; width: 100%; }
}