/* ============================================================
   BTS MIAMI · PROTOTIPO «FERRARI» (concepto, no producción)
   Lenguaje: media a pantalla completa, tipografía enorme y
   segura, navegación mínima, capítulos que se revelan al scroll.
   Identidad: superficies claras, navy #022251 y turquesa como
   acentos, azul Ticketmaster solo en tickets.
   ============================================================ */

:root{
  --bg:        #ffffff;
  --bg-alt:    #f4f7fa;
  --bg-tint:   #e9f2f7;
  --ink:       #101f33;
  --ink-soft:  #4a5f7d;
  --navy:      #022251;
  --navy-deep: #011636;
  --cyan:      #0e9bb8;
  --cyan-text: #0a7d94;   /* turquesa para texto pequeño: contraste medido 4,7:1 sobre blanco */
  --tm-blue:   #024ddf;
  --line:      #d9e3ee;

  --font-disp: "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
  --font-text: "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;

  --pad-x: clamp(20px, 5.5vw, 96px);
  --pad-y: clamp(88px, 11vw, 168px);
  --shadow: 0 16px 40px rgba(2,34,81,.10);
  --shadow-soft: 0 4px 18px rgba(2,34,81,.06);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; }
body{
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-text); font-size: clamp(1rem,.97rem+.18vw,1.125rem);
  line-height: 1.65; -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: var(--navy); }
::selection{ background: var(--navy); color: #fff; }

.wrap{ width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--pad-x); }

/* ---------- Tipografía de capítulo ---------- */
.eyebrow{
  font-size: .74rem; font-weight: 700; letter-spacing: .34em;
  text-transform: uppercase; color: var(--cyan-text); margin: 0 0 18px;
}
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow.on-dark{ color: #7fd4e6; }
h1,h2{
  font-family: var(--font-disp); font-weight: 600; color: var(--navy);
  text-transform: uppercase; letter-spacing: -.02em; line-height: .98;
  margin: 0 0 22px;
}
h2{ font-size: clamp(2.5rem, 5.6vw, 5rem); }
h3{
  font-family: var(--font-disp); font-weight: 600; color: var(--navy);
  font-size: clamp(1.25rem, 1.05rem+.7vw, 1.6rem); line-height: 1.12; margin: 0 0 8px;
}
.lead{ font-size: clamp(1.1rem, 1rem+.5vw, 1.34rem); line-height: 1.55; color: var(--ink); }
.muted{ color: var(--ink-soft); }
.chapter{ position: relative; padding-block: var(--pad-y); }
.chapter.alt{ background: var(--bg-alt); border-top: 1px solid var(--line); }
.chapter-num{
  /* direccion.md 1.2: textura editorial pequeña y discreta, no un titular */
  position: absolute; top: clamp(18px,3vw,40px); right: var(--pad-x);
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.2px rgba(2,34,81,.13);
  pointer-events: none; user-select: none;
}

/* Reveal al scroll · P0.2 direccion.md: el estado natural es VISIBLE.
   Solo con JS y sin reduced motion (clase .reveal-ready en <html>) se
   prepara el estado oculto; sin JS o con reduced motion todo se ve. */
.reveal{ opacity: 1; }
html.reveal-ready .reveal{ opacity: 0; transform: translateY(34px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
html.reveal-ready .reveal.in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

/* Foco visible que no depende solo del color · P0.9 */
:focus-visible{ outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* Utilidades de medida (sustituyen estilos en línea) · P1.3 */
.narrow-58{ max-width: 58ch; } .narrow-62{ max-width: 62ch; }
.center-x{ margin-inline: auto; }
.chapter.less-top{ padding-top: 24px; }
.event-card .pick{ color: var(--navy); font-weight: 700; font-size: .9rem; margin: 0 0 4px; }
.example-tag{
  justify-self: start; font-size: .68rem; font-weight: 700; letter-spacing: .24em;
  text-transform: uppercase; color: var(--cyan-text); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 6px 12px; margin: 0;
}
.mia-sep{ border-top: 1px solid var(--line); margin-top: clamp(24px,3vw,40px); padding-top: clamp(44px,5vw,68px); }
.site-footer .f-def{ margin: 0 0 14px; max-width: 52ch; }
.site-footer .f-slogan{ margin: 0; color: var(--navy); font-weight: 600; }
@media (max-width: 760px){ .chips a:nth-child(n+5){ display: none; } }
.mia-h{ font-size: clamp(1.7rem, 1.3rem+1.6vw, 2.6rem); text-transform: uppercase; }
.after-box{ margin-top: 26px; }
.lens-pad{ padding-bottom: 30px; }
.fig-flat{ margin: 0; }
.btn-block{ width: 100%; justify-content: center; margin-top: 12px; }
.card-link{ text-decoration: none; color: inherit; }
.step p{ margin: 0; }

/* ---------- Botones ---------- */
.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 15px 30px; border-radius: 999px; border: 1.5px solid var(--navy);
  background: var(--navy); color: #fff; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ background: var(--navy-deep); transform: translateY(-1px); }
.btn.light{ background: #fff; border-color: #fff; color: var(--navy); }
.btn.light:hover{ background: var(--bg-tint); }
.btn.ghost-light{ background: transparent; border-color: rgba(255,255,255,.85); color: #fff; }
.btn.ghost-light:hover{ background: rgba(255,255,255,.14); }

/* Botón TICKETS v3 (diseño del dueño): blanco/cristal, borde negro fino,
   logo redondo BTS a la esquina izquierda, TICKETS centrado en azul
   Ticketmaster, Nunito Sans ExtraBold (fallback: sans 800). */
.btn-tickets{
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 58px;
  background: rgba(255,255,255,.94); border: 1.5px solid #111; border-radius: 14px;
  text-decoration: none; font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif;
  font-weight: 800; letter-spacing: .14em; font-size: 1.02rem; color: var(--tm-blue);
  box-shadow: var(--shadow-soft);
}
.btn-tickets img{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 38px; height: auto; border-radius: 50%;
}
.btn-tickets:hover{ background: #f2f7ff; }
.btn-tickets.hero-size{ min-height: 64px; font-size: 1.1rem; }

/* ---------- Cabecera mínima ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header .bar{
  display: flex; align-items: center; gap: 28px; min-height: 72px;
  padding-inline: var(--pad-x); max-width: 1760px; margin-inline: auto;
}
.brand{ display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img{ width: 42px; height: auto; border-radius: 50%; }
.brand span{
  font-weight: 700; font-size: .8rem; letter-spacing: .26em;
  text-transform: uppercase; color: #fff; line-height: 1.35;
}
.main-nav{ margin-left: auto; display: flex; gap: 30px; }
.main-nav a{
  color: #fff; text-decoration: none; font-size: .8rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; opacity: .92;
  padding: 13px 2px; display: inline-block;
}
.main-nav a:hover{ opacity: 1; color: #7fd4e6; }
.site-header.solid{ background: rgba(255,255,255,.94); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.site-header.solid .brand span, .site-header.solid .main-nav a, .site-header.solid .lang-switch a, .site-header.solid .lang-switch i{ color: var(--navy); }
.site-header.solid .main-nav a:hover{ color: var(--cyan); }
/* P0.9: objetivos táctiles de 44 px y cabecera contenida en móvil.
   En escritorio el héroe es claro: la cabecera nace en navy sobre el
   lienzo; en móvil nace sobre el vídeo oscuro, en blanco. */
.main-nav a{ min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 1100px){
  .site-header:not(.solid) .brand span, .site-header:not(.solid) .main-nav a, .site-header:not(.solid) .lang-switch a, .site-header:not(.solid) .lang-switch i{ color: var(--navy); }
  .site-header:not(.solid) .main-nav a:hover{ color: var(--cyan); }
}
@media (max-width: 760px){
  .main-nav a:nth-child(n+3){ display: none; }
  .brand span{ font-size: .68rem; letter-spacing: .18em; }
  .site-header .bar{ min-height: 60px; gap: 16px; }
}
/* Acción TICKETS en la cabecera sólida de escritorio (direccion.md 2.2) */
.head-tickets{ display: none; }
@media (min-width: 1100px){
  .site-header.solid .head-tickets{
    display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
    border: 1.5px solid #111; border-radius: 999px; background: rgba(255,255,255,.94);
    color: var(--tm-blue); font-family: "Nunito Sans","Helvetica Neue",Arial,sans-serif;
    font-weight: 800; letter-spacing: .14em; font-size: .85rem; text-decoration: none;
  }
}

/* ---------- HÉROE ----------
   Foto elegida por el dueño (2026-10-24): backstage de gala
   01-gala-backstage-hero.jpg (2560×1439, ≈16:9). Corrección
   2026-10-24 (defecto verificado en captura fresca a 390): la foto
   quedaba letterboxeada con object-fit: contain dentro del marco
   vertical 4/5 de móvil (bandas navy arriba y abajo). Arreglo: la
   tarjeta adopta la proporción de la fuente (16/9) en TODOS los
   anchos y la foto la LLENA con cover, sin bandas ni passe-partout
   en ningún ancho. Posiciones por banda según encuadres-web.md
   §1.4 (IMG_8311), aplicadas abajo: 390 → 52% 12% · 768 → 72% 8% ·
   1280 → 50% 10% (base) · 1920 → 50% 0% exacto. Nota de geometría:
   las ventanas de §1.4 se calcularon para el héroe full-bleed del
   build; en la tarjeta 4/5 del prototipo esas mismas posiciones
   cortaban parcialmente al fotógrafo y a Yelain (E-1/E-2), y solo
   con la tarjeta a 16/9 la ventana visible es la fuente completa,
   así que las cuatro cabezas quedan completas con aire en todos
   los anchos (a 390 y 768, más protagonistas de los de la
   recomposición declarada de §1.4, nunca menos). A 2560 el
   NO PASA de §1.4 es del héroe full-bleed 2,78:1 (ventana de
   920 px < banda de cabezas de 1.180 px); esta tarjeta no es
   full-bleed (máx. 1060 px junto al titular, puerta de encuadres
   del prototipo firmada en verde con esta geometría), así que la
   corrección conservadora aplicada y registrada es mantener
   IMG_8311 a 16/9 con 50% 0% (la posición exacta de 1920, la
   segura para el pelo de Yelain, que nace en y=0 de la fuente).
   La definición canónica abre el héroe como eyebrow (Bar Raiser
   §7.1.1). El reel de la ópera vive en The Lens (§7.1.4). */
.hero{ position: relative; min-height: 100svh; overflow: hidden; background: var(--bg-alt); display: flex; flex-direction: column; align-items: stretch; padding-top: 84px; }
/* Lockup de marca del héroe (orden del dueño 2026-10-24): nuestro logo
   arriba en el centro y más grande, debajo nuestro slogan. */
.hero-lockup{ text-align: center; padding-top: clamp(18px, 3vh, 36px); }
.hero-logo{ width: clamp(120px, 11vw, 168px); height: auto; border-radius: 50%; display: block; margin: 0 auto; }
.hero-lockup-slogan{ color: var(--ink-soft); font-size: clamp(.95rem, .9rem+.4vw, 1.15rem); letter-spacing: .04em; margin: 16px 0 0; }
.hero-main{ display: flex; align-items: center; width: 100%; flex: 1; }
.hero-media{
  position: relative; flex: none; order: 2; align-self: center; margin: 0;
  width: min(1060px, 54vw); aspect-ratio: 16/9; margin-right: var(--pad-x);
  background: var(--navy-deep); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow);
}
.hero-media .hero-photo{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%;
}
.hero-in{ position: relative; z-index: 2; flex: 1; min-width: 0; align-self: center; width: 100%; padding-block: clamp(30px, 5vh, 60px); }
.hero .eyebrow.hero-def{ max-width: 46ch; line-height: 2; }
.hero h1{
  color: var(--navy); font-size: clamp(3rem, 5.6vw, 6.8rem); margin-bottom: 14px;
}
.hero .slogan{
  color: var(--ink-soft); font-size: clamp(.95rem, .9rem+.4vw, 1.15rem);
  letter-spacing: .04em; margin: 0 0 30px;
}
.hero .buy-note{ font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan-text); margin: 14px 0 0; }
.hero-cta{ display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-cta .btn-tickets{ width: min(320px, 100%); }
@media (max-width: 1099px){
  .hero{ display: block; padding-top: 0; min-height: 0; }
  .hero-lockup{ padding-top: 118px; }
  .hero-logo{ width: clamp(104px, 30vw, 140px); }
  .hero-main{ display: block; }
  .hero-in{ padding-top: 26px; padding-bottom: 30px; }
  .hero h1{ font-size: clamp(2.4rem, 10vw, 4.6rem); }
  .hero-media{
    position: relative; width: auto; height: auto; aspect-ratio: 16/9; align-self: auto;
    margin: 0 var(--pad-x) clamp(48px, 8vh, 76px); border-radius: 16px;
    /* Corrección 2026-10-24: tarjeta 16/9 como la fuente y foto en
       cover que la llena; fuera el marco vertical 4/5 con la foto
       contenida y sus bandas navy (defecto verificado a 390). */
    background: var(--navy-deep);
  }
  .hero-media .hero-photo{ object-fit: cover; }
}
/* Posiciones firmadas del héroe por banda (encuadres-web.md §1.4,
   IMG_8311). La base (1100–1599) es la de 1280: 50% 10%. */
@media (max-width: 767px){
  .hero-media .hero-photo{ object-position: 52% 12%; }
}
@media (min-width: 768px) and (max-width: 1099px){
  .hero-media .hero-photo{ object-position: 72% 8%; }
}
@media (min-width: 1600px){
  /* 1920 → 50% 0% exacto; la misma posición rige a 2560 como
     corrección conservadora registrada (ver comentario del héroe). */
  .hero-media .hero-photo{ object-position: 50% 0%; }
}

/* ---------- Buscador ---------- */
/* activos.md §2: sin foto de fondo; panel lateral vertical 05-hackathon (retrato) */
.search-layout{ display: grid; gap: 34px; margin-top: 48px; align-items: center; grid-template-columns: minmax(0,1fr); }
.search-layout > *{ min-width: 0; }
/* Bar Raiser §7.1.2 (P0-3): en móvil la caja precede a la foto del
   capítulo 01; la ruta empieza por buscar, no por mirar. */
@media (max-width: 1079px){ .search-main{ order: -1; } }
@media (min-width: 1080px){ .search-layout{ grid-template-columns: 290px minmax(0,1fr); gap: 54px; } }
.search-side{ margin: 0; position: relative; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); }
.search-side img{ width: 100%; height: 240px; object-fit: cover; object-position: 50% 45%; }
@media (min-width: 1080px){ .search-side img{ height: auto; aspect-ratio: 4/5; } }
.search-side figcaption{
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(1,22,54,.82));
  font-weight: 600; font-size: .9rem; line-height: 1.35; text-align: left;
}
.search-shell{ max-width: 900px; margin: 0 auto; }
.search-box{
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1.5px solid var(--navy); border-radius: 999px;
  padding: 8px 8px 8px 28px; box-shadow: var(--shadow);
}
.search-box svg{ flex: none; }
.search-box input{
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 1.06rem; color: var(--ink);
}
.search-box input::placeholder{ color: #8496ad; }
.search-box .go{
  flex: none; border: 0; cursor: pointer; border-radius: 999px;
  background: var(--navy); color: #fff; font-weight: 700; letter-spacing: .05em;
  padding: 14px 30px; font-size: .98rem;
}
.search-box .go:hover{ background: var(--navy-deep); }
.chips{ display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }
.chips a{
  text-decoration: none; font-size: .88rem; font-weight: 600; color: var(--navy);
  border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 18px;
}
.chips a:hover{ border-color: var(--cyan); color: var(--cyan); }

/* ---------- Host · presencia de la host a primer scroll ----------
   Panel contenido sobre lienzo claro, estructura navy de la casa:
   foto cuadrada 19-yelain (1320×1320) sin estirar, con su nombre y
   su papel visibles. Va tras el héroe: no toca su geometría ni la
   esquina superior derecha protegida del vídeo (E-6). */
.host-band{ background: var(--bg); border-bottom: 1px solid var(--line); padding-block: clamp(36px, 5vw, 64px); }
.host-in{ display: grid; gap: 28px; align-items: center; }
@media (min-width: 860px){ .host-in{ grid-template-columns: 300px minmax(0,1fr); gap: 52px; } }
.host-photo{ margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 1/1; max-width: 420px; }
.host-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.host-name{ font-size: clamp(2.1rem, 4.6vw, 3.8rem); margin: 0 0 10px; }
.host-role{ font-size: clamp(1.05rem, 1rem+.45vw, 1.32rem); font-weight: 700; color: var(--navy); letter-spacing: .03em; margin: 0 0 12px; }
.host-line{ max-width: 58ch; margin: 0; }

/* MIA · la tarjeta de conversación se sostiene sola (ver .mia-layout) */
.mia-layout{ display: grid; gap: 26px; margin-top: 56px; align-items: stretch; }
/* La foto 19-yelain vive solo en la banda de la host (.host-band): la
   sección MIA se sostiene con su tarjeta de conversación, sin foto
   que pudiera leerse como MIA ni con un pie ambiguo. */
@media (min-width: 960px){ .mia-layout{ grid-template-columns: minmax(0, 880px); justify-content: center; } }
.mia-card{
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow-soft); padding: clamp(22px,3.4vw,38px);
  display: grid; gap: 18px; text-align: left; align-content: center;
}
.mia-head{ display: flex; align-items: center; gap: 14px; }
.mia-head img{ width: 52px; height: 52px; border-radius: 50%; }
.mia-head strong{ font-family: var(--font-disp); color: var(--navy); font-size: 1.15rem; letter-spacing: .02em; }
.mia-head small{ display: block; color: var(--ink-soft); letter-spacing: .14em; text-transform: uppercase; font-size: .68rem; font-weight: 700; }
.bubble{ max-width: 78%; padding: 13px 18px; border-radius: 18px; line-height: 1.5; font-size: .99rem; }
.bubble.user{ justify-self: end; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; }
.bubble.mia{ justify-self: start; background: var(--bg-tint); color: var(--ink); border-bottom-left-radius: 6px; }
.mia-card .btn{ justify-self: start; }

/* ---------- Tarjetas de evento ---------- */
/* Destacada This Week · activos.md §3: 14-autodrome, máx. 1200 px, foco en el coche */
.featured{ max-width: 1200px; margin: 56px auto 0; }
.featured .ph{ border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); aspect-ratio: 3/2; }
.featured .ph img{ width: 100%; height: 100%; object-fit: cover; object-position: 30% 70%; }
.featured figcaption{ display: grid; gap: 20px; margin-top: 22px; align-items: center; }
@media (min-width: 900px){ .featured figcaption{ grid-template-columns: 1fr minmax(230px,300px); } }
.featured .when{ font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-text); margin: 0 0 6px; }

/* Tarjetas: arte oficial a su proporción nativa, máx. 440 px CSS por tarjeta (activos.md §3) */
.events-grid{
  display: grid; gap: clamp(20px, 2.4vw, 34px); margin-top: 56px;
  grid-template-columns: 1fr; max-width: 1380px; margin-inline: auto;
}
@media (min-width: 760px){ .events-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1240px){ .events-grid{ grid-template-columns: repeat(3, 1fr); } }
.event-card{
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
  transition: transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s cubic-bezier(.2,.6,.2,1);
}
.event-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
/* Arte EV a su proporción nativa exacta 440×247 (encuadres-web.md §4.4):
   con el marco idéntico a la fuente, el cover no recorta nada; exhibición
   máxima 440 px CSS (la rejilla, máx. 1380 px en 3 columnas, lo cumple). */
.event-card .ph{ aspect-ratio: 440/247; overflow: hidden; }
.event-card .ph img{ width: 100%; height: 100%; object-fit: cover; }
.event-card .body{ padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.event-card .when{ font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--cyan-text); margin: 0; }
.event-card .venue{ color: var(--ink-soft); margin: 0 0 14px; }
.event-card .btn-tickets{ margin-top: auto; }
.section-head{ display: flex; align-items: flex-end; gap: 26px; flex-wrap: wrap; }
.section-head .more{
  margin-left: auto; font-weight: 700; letter-spacing: .06em; text-decoration: none;
  border-bottom: 2px solid var(--cyan); padding-bottom: 3px; white-space: nowrap;
}

/* ---------- Capítulo imagen completa ---------- */
.fullmedia{ position: relative; min-height: 88svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); }
.fullmedia > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Dirección de arte con <picture> (cierre, F-1 ronda 2): el contenedor
   ocupa el marco completo igual que el <img> directo al que sustituye,
   y su imagen lo llena con el mismo cover en todas las bandas. */
.fullmedia > picture{ position: absolute; inset: 0; display: block; }
.fullmedia > picture > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fullmedia .veil{ position: absolute; inset: 0; background: linear-gradient(90deg, rgba(1,22,54,.78) 0%, rgba(1,22,54,.28) 55%, rgba(1,22,54,0) 100%); }
.fullmedia .fm-in{ position: relative; z-index: 2; padding-block: clamp(60px, 9vh, 110px); width: 100%; }
.fullmedia h2{ color: #fff; }
.fullmedia p{ color: rgba(255,255,255,.92); max-width: 52ch; }
/* Mapa · activos.md §4: foco en el estadio (x≈35%, y≈68%) */
.map-media > img{ object-position: 35% 68%; }
@media (max-width: 760px){ .map-media > img{ object-position: 35% 65%; } }
/* Cierre · activos.md §7: cabezas desde el 3% superior, nunca recortar más bajo.
   La imagen vive dentro de <picture> (F-1 ronda 2): mismo valor que
   tenía como <img> directo, para que a ≥761 px nada cambie. */
.closing-media > img, .closing-media > picture > img{ object-position: 50% 12%; }
/* F-1 ronda 2 · a ≤760 px la pieza servida ya no es IMG_4089 sino la
   marquesina Olympia (source media en index.html): ventana centrada
   en la marquesina principal (x fuente ≈284–746 de 1030; la altura
   fuente entra entera, sin recorte vertical). Sin caras en la zona
   del texto: kicker, titular y párrafo caen sobre marquesina, pancarta
   y fondo de prensa; la multitud es fondo a pie de foto, como en la
   página de evento, donde la pasada la dio por buena (sin sujetos). */
@media (max-width: 760px){ .closing-media > picture > img{ object-position: 50% 50%; } }
.closing-media .hero-cta .btn-tickets{ width: min(320px, 100%); }
/* P0.10: tarjeta de lugar con pin sobre la foto del venue, para que el
   capítulo enseñe el producto (lugar localizado), no solo ambiente */
.map-pin{
  position: absolute; z-index: 2; right: var(--pad-x); top: clamp(70px, 12vh, 120px);
  background: rgba(255,255,255,.96); border-radius: 12px; box-shadow: var(--shadow);
  padding: 16px 20px; display: flex; gap: 12px; align-items: center; max-width: min(330px, 80vw);
}
.map-pin .pin{
  flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.map-pin strong{ display: block; color: var(--navy); font-family: var(--font-disp); font-size: .98rem; line-height: 1.25; }
.map-pin small{ display: block; color: var(--ink-soft); font-size: .8rem; }
@media (max-width: 760px){ .map-pin{ top: 76px; } }

/* ---------- Reels / Lens · P1.1: cada «Reel» reproduce el reel real
   (vídeo 9:16 con póster, preload none: nada carga hasta la intención) */
.reels{
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 300px);
  gap: 18px; overflow-x: auto; padding: 10px var(--pad-x) 26px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.reels::-webkit-scrollbar{ display: none; }
.reel{ scroll-snap-align: start; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 9/16; background: var(--navy-deep); margin: 0; }
/* Reels 9:16 completos sin recorte (encuadres-web.md §2.5): las tres piezas
   son 720×1280 exactos en marco 9/16, así que cover no recorta nada, y el
   ancla vertical es 0% (el recorte, si lo hubiera, se paga abajo, nunca
   arriba). Esquina superior derecha PROTEGIDA (E-6): ahí vive el logo
   quemado del reel; el único overlay superior (.tag) vive a la izquierda
   y el pie abajo; ningún control ni velo entra en x 78–100%, y 0–14%. */
.reel video, .reel img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; display: block; }
.reel .tag{
  position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
  background: rgba(1,22,54,.72); color: #fff; font-size: .68rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px;
  backdrop-filter: blur(6px); pointer-events: none;
}
.reel figcaption{
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 44px 18px 16px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(1,22,54,.82));
  font-weight: 600; line-height: 1.35; font-size: .98rem; pointer-events: none;
}
.reels-note{ padding-inline: var(--pad-x); max-width: 1760px; margin: 2px auto 0; color: var(--ink-soft); font-size: .9rem; }

/* ---------- Bloque Ticketmaster · P0.8: lienzo claro y neutro, texto
   navy; el lockup vive en una placa navy contenida porque el activo
   oficial de Ticketmaster es blanco y la exige. Sin degradados. */
.tm-panel{
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 18px; padding: clamp(30px, 4.5vw, 58px); color: var(--ink);
  display: grid; gap: 30px; align-items: center; box-shadow: var(--shadow-soft);
}
@media (min-width: 960px){ .tm-panel{ grid-template-columns: auto 1fr minmax(230px,300px); } }
.tm-lockup{ text-align: center; background: var(--navy); border-radius: 18px; padding: 26px 30px; }
.tm-lockup .brandmark{ width: 88px; height: auto; border-radius: 50%; margin-inline: auto; }
.tm-lockup .tm-slogan{ font-size: .8rem; color: rgba(255,255,255,.88); margin: 12px auto 14px; max-width: 26ch; line-height: 1.5; }
.tm-lockup .tm-logo{ height: 26px; width: auto; margin-inline: auto; }
.tm-panel h3{ color: var(--navy); font-size: clamp(1.5rem, 1.2rem+1.2vw, 2.1rem); text-transform: uppercase; letter-spacing: 0; }
.tm-panel p{ color: var(--ink-soft); margin: 0 0 10px; }
.tm-panel .assoc{ color: var(--navy); font-weight: 700; letter-spacing: .04em; }

/* ---------- Partners ---------- */
.partners-grid{
  display: grid; gap: 16px; margin-top: 56px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 900px){ .partners-grid{ grid-template-columns: repeat(4, 1fr); } }
.partner-cell{
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  min-height: 118px; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.partner-cell img{ max-height: 62px; width: auto; max-width: 100%; object-fit: contain; }
.photo-strip{ display: grid; gap: 16px; margin-top: 16px; grid-template-columns: 1fr; }
@media (min-width: 760px){ .photo-strip{ grid-template-columns: 1fr 1fr; } }
.photo-strip figure{ position: relative; border-radius: 10px; overflow: hidden; }
/* activos.md §6: fotos de relación a tamaño contenido, nunca a pantalla completa */
.photo-strip img{ width: 100%; height: 100%; max-height: 380px; object-fit: cover; object-position: 50% 25%; border-radius: 10px; }
.photo-strip figcaption{
  position: absolute; inset: auto 0 0 0; padding: 40px 16px 13px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(1,22,54,.82));
  font-weight: 600; font-size: .9rem; line-height: 1.35;
}
/* Partners con el reel de la casa en el socio (Ferrari at Nader Museum) */
.partner-feature{ display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 900px){ .partner-feature{ grid-template-columns: 300px minmax(0,1fr); } }
.partner-feature .reel{ aspect-ratio: 9/16; }
.partner-feature .photo-strip{ margin-top: 0; }

/* ---------- Pie ---------- */
/* P0.8: el pie es superficie clara con texto navy, nunca un capítulo azul */
.site-footer{ background: var(--bg-alt); border-top: 1px solid var(--line); color: var(--ink-soft); padding-block: clamp(58px,7vw,90px) 40px; }
.site-footer .f-grid{ display: grid; gap: 38px; }
@media (min-width: 900px){ .site-footer .f-grid{ grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h4{ color: var(--navy); font-family: var(--font-disp); letter-spacing: .2em; text-transform: uppercase; font-size: .82rem; margin: 0 0 16px; }
.site-footer a{ color: var(--navy); text-decoration: none; }
.site-footer a:hover{ color: var(--cyan-text); }
.site-footer ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer .fine{ border-top: 1px solid var(--line); margin-top: 44px; padding-top: 22px; font-size: .85rem; color: var(--ink-soft); display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; }

/* Lockup de marca en el pie: el logo oficial intacto (sin recolorear,
   sin recortar, sin deformar) y el slogan debajo, en pequeño.
   Sustituye al encabezado de texto en la columna de marca de las 14
   páginas. */
.site-footer .f-lockup{ letter-spacing: 0; text-transform: none; }
.site-footer .f-lockup .f-logo{ display: block; width: 128px; height: auto; border-radius: 50%; }
.site-footer .f-lockup .f-slogan{ display: block; margin-top: 12px; font-family: var(--font-text); font-size: .8rem; font-weight: 600; line-height: 1.5; }

/* ---------- Página de evento · P0.11: héroe recto y preciso, lienzo
   claro, póster sin rotar ni deformar, datos y acción adelantados */
.ev-hero{ position: relative; overflow: hidden; background: var(--bg); color: var(--ink); }
.ev-hero .in{ position: relative; z-index: 2; padding-top: 128px; padding-bottom: clamp(54px,8vh,90px); }
.ev-grid{ display: grid; gap: clamp(30px,4.5vw,64px); align-items: center; }
@media (min-width: 1020px){ .ev-grid{ grid-template-columns: 1.25fr .75fr; } }
.ev-hero h1{ color: var(--navy); font-size: clamp(3.2rem, 9vw, 7.6rem); }
.ev-hero .tour{ font-size: clamp(1.3rem, 1.1rem+1vw, 2rem); color: var(--ink); margin: 0 0 8px; font-weight: 600; }
.ev-hero .btn-tickets{ width: min(340px, 100%); margin-top: 28px; }
.poster-card{ border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.poster-card img{ width: 100%; height: auto; }
/* Barra de acción persistente en móvil tras el héroe (direccion.md 2.2).
   2026-10-24 (mini-reapertura del Bar Raiser): era sticky y NO nacía
   entera (al cargar quedaba a y=797-868 en un viewport de 844: el
   botón cortado por el borde inferior). Pasa a fija: nace entera en
   el borde inferior desde la carga y persiste; el cuerpo compensa
   su altura para que nunca tape el final del pie. */
.ev-sticky{
  display: none;
}
@media (max-width: 899px){
  body:has(.ev-sticky){ padding-bottom: 78px; }
  .ev-sticky{
    display: flex; align-items: center; gap: 14px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom));
  }
  .ev-sticky .when{ font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cyan-text); margin: 0; flex: none; line-height: 1.55; }
  .ev-sticky .when span{ display: block; white-space: nowrap; }
  .ev-sticky .when .when-venue{ color: var(--ink-soft); letter-spacing: .14em; }
  .ev-sticky .btn-tickets{ min-height: 50px; flex: 1 1 auto; width: auto; min-width: 0; }
}
.facts{ display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); grid-template-columns: repeat(2,1fr); }
@media (min-width: 900px){ .facts{ grid-template-columns: repeat(4,1fr); } }
.fact{ background: #fff; padding: 26px var(--pad-x); }
.fact small{ display: block; font-size: .7rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--cyan-text); margin-bottom: 7px; }
.fact strong{ font-family: var(--font-disp); color: var(--navy); font-size: 1.12rem; line-height: 1.3; display: block; }
.ev-hero .buy-note{ font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cyan-text); margin: 14px 0 0; }
/* Bar Raiser §7.1.3 (P0-6): fecha, hora Y LUGAR en texto dentro del
   héroe, visibles en el primer pantallazo a cualquier ancho. */
.ev-meta{
  font-size: .84rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan-text); margin: 0 0 16px; line-height: 1.8;
}
.ev-story{ display: grid; gap: clamp(26px,4vw,60px); align-items: start; grid-template-columns: 1fr; }
@media (min-width: 960px){ .ev-story{ grid-template-columns: 1.15fr .85fr; } }
.wide-photo{ border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-soft); max-width: 1030px; }
.wide-photo img{ width: 100%; max-height: 560px; object-fit: cover; object-position: center; }
.steps{ display: grid; gap: 16px; margin-top: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px){ .steps{ grid-template-columns: repeat(3,1fr); } }
.step{ background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; box-shadow: var(--shadow-soft); }
.step .n{ font-family: var(--font-disp); font-weight: 700; font-size: 2rem; color: transparent; -webkit-text-stroke: 1.3px rgba(2,34,81,.35); }

/* ---------- Encuadres (encuadres-web.md, puerta del especialista) ---------- */
/* Héroe en vídeo (ÓPERA): sus reglas de encuadre por ancho (85% 0% a
   ≤767, 50% 0% en 768-1099, pósteres 67% 15% / 30% 20%) quedaron
   RETIRADAS el 2026-10-24 al sustituir el héroe por la foto elegida
   por el dueño; el reel vive en The Lens con el encuadre estándar de
   .reel. La geometría firmada de aquel héroe consta en
   firma-encuadres.md y en el archivo histórico. */
/* E-6 en la cabecera móvil: la navegación baja a una segunda fila a la
   izquierda; la esquina superior derecha del viewport queda libre */
@media (max-width: 1099px){
  .site-header .bar{ flex-wrap: wrap; row-gap: 2px; padding-block: 10px 8px; }
  .main-nav{ order: 3; flex-basis: 100%; margin-left: 0; gap: 24px; }
  .main-nav a{ min-height: 44px; }
}
/* Posiciones por foto donde el componente coincide con la spec (§3) */
.photo-strip img.pos-film{ object-position: 85% 25%; }   /* 12-film-festival: cinco cabezas completas */
.wide-photo img.pos-olympia{ object-position: 10% 30%; } /* 13-olympia: marquesina completa en cuadro */
/* La fotografía del Lens va en su proporción (3:2), no forzada a 9:16 */
.reel.photo-piece{ aspect-ratio: 3/2; }
.reel.photo-piece img{ object-position: 30% 70%; } /* foco de activos.md §3: el coche */

/* The Lens: pieza única centrada con su texto (manifiesto cerrado) */
.lens-single{ display: grid; gap: 30px; margin-top: 56px; align-items: center; }
@media (min-width: 900px){ .lens-single{ grid-template-columns: minmax(280px, 340px) minmax(0, 560px); gap: 54px; } }
.lens-single .reel{ aspect-ratio: 9/16; }

/* Cobertura FGO en The Lens (Bar Raiser §7.1.4): el reel de la ópera
   con su crédito visible en el flujo de texto, no solo en el alt. */
.lens-opera{ margin-top: clamp(56px, 7vw, 96px); }
@media (min-width: 900px){ .lens-opera{ grid-template-columns: minmax(0, 560px) minmax(280px, 340px); } }
.opera-h{ font-size: clamp(1.9rem, 3.4vw, 3rem); text-transform: uppercase; }
.coverage-credit{
  margin: 28px 0 0; max-width: 74ch;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cyan-text); line-height: 1.9;
}

.featured figcaption:has(> div:only-child){ grid-template-columns: 1fr; }
.featured .muted{ margin: 0; }

/* Páginas de héroe claro (evento): la cabecera nace en navy también en
   móvil, o el texto blanco desaparece sobre el lienzo */
@media (max-width: 1099px){
  body.light-hero .site-header:not(.solid) .brand span,
  body.light-hero .site-header:not(.solid) .main-nav a, body.light-hero .site-header:not(.solid) .lang-switch a, body.light-hero .site-header:not(.solid) .lang-switch i{ color: var(--navy); }
  body.light-hero .site-header:not(.solid) .main-nav a:hover{ color: var(--cyan-text); }
}
/* Barra persistente: el texto se centra descontando el logo de la esquina */
.ev-sticky .btn-tickets{ padding-left: 52px; padding-right: 10px; }

/* ---------- Correcciones de encuadres F-1 a F-4 (pasada-encuadres.md §5) ---------- */
/* F-3 · Foto 12 de Partners (pos-film): la celda toma la proporción 4:3
   para la que se calculó object-position 85% 25% (§3 de la pasada).
   Solo la figura de la foto 12 (figure:has), solo en las bandas que
   fallaban (768 y 1280): a 390, 1920 y 2560 la celda ya es panorámica
   y la foto pasa sin tocarla; la foto 9F queda intacta. La imagen se
   ajusta a la altura del marco (sin el tope de 380px dentro de esta
   figura) y la figura no se estira a la fila del reel.
   Residual (ampliación ronda 2, corrección exacta del verificador):
   dentro de ESTA MISMA banda la ventana se recentra a 41%: con el
   marco 4:3 la ventana fuente mide 904 px y al 85% arrancaba en
   x≈100, dejando fuera el vértice del codo de la invitada de lunares
   (nace en x 69) sin el margen E-2 (≥20 px fuente). Al 41% la ventana
   REAL MEDIDA en el render es x=45–949: margen izquierdo de 24 px
   (69−45; los ≥20 exigidos quedan con 4 px de colchón, no en el
   filo) y el invitado de la derecha (vestido naranja, termina en
   x 934) queda dentro con ≈15 px. El cálculo nominal del porcentaje
   (41% del excedente de 120 px = arranque 49,2) no coincide al píxel
   con el arranque renderizado (45) por el redondeo del layout en el
   cover (la caja de la figura es subpíxel: 333,77×250,31 a 768); la
   desviación es estable entre anchos y juega a favor del margen.
   El object-position global de pos-film (85% 25%) no se toca:
   sigue rigiendo a 390, 1920 y 2560, donde la foto pasa. */
@media (min-width: 761px) and (max-width: 1919px){
  .photo-strip figure:has(> img.pos-film){ aspect-ratio: 4/3; align-self: start; }
  .photo-strip figure:has(> img.pos-film) > img{ height: 100%; max-height: none; object-position: 41% 25%; }
}
/* F-1 · Cierre a ≤760: marco 4:5 sobre .closing-media.
   El padding del fm-in se acorta en esta banda para que el bloque de
   texto quepa en el marco ordenado y el marco sea real, no nominal.
   Ronda 2: el marco se conserva; lo que cambia es la pieza servida a
   este ancho (IMG_4089 → marquesina Olympia, vía <picture> en
   index.html y object-position de la variante móvil junto a la regla
   del cierre), porque con el texto completo ningún object-position
   bajaba el bloque de las barbillas de IMG_4089 (informe ronda 1). */
@media (max-width: 760px){
  .closing-media{ aspect-ratio: 4/5; min-height: 0; }
  .closing-media .fm-in{ padding-block: 30px 28px; }
}
/* F-2 · Cierre 761–1099: marco panorámico y fm-in acortado.
   Valor final 26/25 (≈1,04:1), NO el 4/3 prescrito: con 4/3 la foto
   entra entera (E-1 resuelto) pero el bloque de texto sube dentro de
   la banda de caras —kicker al 43,9 % y arranque del titular al
   50,3 % del marco, con las barbillas al 51,6 % y 53,5 % de la
   ventana— y el kicker cruza la mandíbula de la mujer de la
   izquierda (E-4 nuevo). Evidencia: capturas/revision-encuadres/
   cierre-768-intento-4-3.png y geometria-intento1.json. Con 26/25 la
   ventana (≈1997 px fuente, x 281–2278) sigue conteniendo las tres
   cabezas completas con su pelo (banda x 474–2240) y el texto
   arranca bajo las barbillas (kicker al 56,2 % del marco). */
@media (min-width: 761px) and (max-width: 1099px){
  .closing-media{ aspect-ratio: 26/25; min-height: 0; }
  .closing-media .fm-in{ padding-block: 48px 40px; }
}
/* F-4 · Cierre 1100–2000: se corrige el bloque de texto, no la imagen
   (object-position 50% 12% intacto). El capítulo del cierre crece a
   112svh —la misma geometría que a 2560 ya pasa— y el fm-in acorta su
   padding, de modo que el arranque del texto cae por debajo de la
   banda de caras a 1280; 1920 se re-verifica con la misma regla. */
@media (min-width: 1100px) and (max-width: 2000px){
  .closing-media{ min-height: 112svh; }
  .closing-media .fm-in{ padding-block: 48px 40px; }
}

/* Carrusel de portada (orden del dueño 2026-10-24): gira solo,
   unas 20 fotos de la casa, con flechas y pausa al tocar. */
.cover-carousel{ background: var(--bg-alt); padding: 10px 0 clamp(48px, 7vh, 76px); }
.cc-viewport{ overflow: hidden; }
.cc-track{ display: flex; gap: 18px; padding-inline: var(--pad-x); will-change: transform; }
.cc-slide{ flex: none; width: min(430px, 78vw); aspect-ratio: 4/3; border-radius: 14px; overflow: hidden; margin: 0; background: var(--navy-deep); }
.cc-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-nav{ display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.cc-btn{ width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(2,34,81,.25); background: #fff; color: var(--navy); font-size: 1.05rem; cursor: pointer; line-height: 1; }
.cc-btn:hover{ background: var(--navy); color: #fff; }

/* Nuestra música (orden del dueño 2026-10-24): botón fijo con la
   música original de BTS Miami, suena en bucle al pulsarlo. */
.music-btn{ position: fixed; right: 18px; bottom: 18px; z-index: 60; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .06em; cursor: pointer; box-shadow: 0 10px 30px rgba(2,34,81,.35); }
.music-btn .mb-ico{ font-size: .8rem; }
.music-btn.playing{ background: var(--cyan-text); }

/* ---------- PORTADA FERRARI (2026-10-24) ----------
   Los 3 reels a pantalla completa, sin botón de reproducción:
   pasan cosas. Fundido entre piezas, lockup centrado arriba en
   blanco, titular centrado en el tercio inferior sobre velo,
   puntos abajo y pausa circular en la esquina (ferrari.com,
   traducido al ADN de la casa). */
.hero{ flex-direction: column; padding-top: 0; background: var(--navy-deep); }
.hero-reels{ position: absolute; inset: 0; }
.hero-reel{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 0%; opacity: 0; transition: opacity 1.1s ease; }
.hero-reel.is-active{ opacity: 1; }
.hero-shade{ position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(2,18,44,.46), rgba(2,18,44,0) 30%, rgba(2,18,44,0) 52%, rgba(2,18,44,.58)); }
.hero-lockup{ position: relative; z-index: 3; }
.hero-logo{ box-shadow: 0 12px 36px rgba(0,8,26,.45); }
.hero-lockup-slogan{ color: #fff; text-shadow: 0 1px 14px rgba(0,10,30,.55); }
.hero-main{ position: relative; z-index: 3; align-items: flex-end; }
.hero-in{ text-align: center; padding-bottom: clamp(86px, 13vh, 128px); }
.hero .eyebrow.hero-def{ color: #fff; margin-inline: auto; text-shadow: 0 1px 10px rgba(0,10,30,.5); }
.hero h1{ color: #fff; text-shadow: 0 2px 26px rgba(0,10,30,.45); }
.hero-cta{ justify-content: center; }
.hero .buy-note{ color: #9be9f5; }
.hero-controls{ position: absolute; z-index: 4; left: 0; right: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; }
.hero-dots{ display: flex; gap: 10px; pointer-events: auto; }
.hero-dot{ width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; }
.hero-dot.is-active{ background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); }
.hero-pause{ position: absolute; right: 18px; bottom: -6px; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.85); background: rgba(2,18,44,.25); color: #fff; font-size: .78rem; cursor: pointer; pointer-events: auto; }
/* Cabecera sobre la portada oscura: texto blanco hasta hacerse sólida */
body.light-hero .site-header:not(.solid) .brand span,
body.light-hero .site-header:not(.solid) .main-nav a, body.light-hero .site-header:not(.solid) .lang-switch a, body.light-hero .site-header:not(.solid) .lang-switch i{ color: #fff; }
body.light-hero .site-header:not(.solid) .main-nav a:hover{ color: #7fd4e6; }
@media (max-width: 1099px){
  .hero{ display: flex; min-height: 100svh; }
  .hero-in{ padding-top: 10px; }
}

/* ---------- ESPEJO FERRARI (orden del dueño 2026-10-24) ----------
   La portada es un espejo de ferrari.com con nuestro logo, nuestro
   slogan y nuestras imágenes: barra negra sólida con el logo a la
   izquierda (donde va el de Ferrari), titular centrado en el tercio
   inferior en mayúsculas, y la acción como texto con círculo fino. */
body.light-hero .site-header{ background: #000; }
body.light-hero .site-header.solid{ background: #000; box-shadow: none; }
body.light-hero .site-header.solid .brand span,
body.light-hero .site-header.solid .main-nav a, body.light-hero .site-header.solid .lang-switch a, body.light-hero .site-header.solid .lang-switch i{ color: #fff; }
body.light-hero .site-header.solid .main-nav a:hover{ color: #7fd4e6; }
.hero h1{ text-transform: uppercase; letter-spacing: .01em; }
.hero-slogan{ color: #fff; font-size: clamp(.95rem, .9rem+.4vw, 1.15rem); letter-spacing: .04em; margin: 10px 0 26px; text-shadow: 0 1px 12px rgba(0,10,30,.5); }
.hero-discover{ display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-size: .85rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; }
.hero-discover .hd-circle{ display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1.5px solid rgba(255,255,255,.9); border-radius: 50%; font-size: 1.15rem; letter-spacing: 0; }
.hero-discover:hover .hd-circle{ background: rgba(255,255,255,.16); }

/* Canales del ecosistema en la portada (inferior izquierda) */
.hero-channels{ position: absolute; z-index: 4; left: var(--pad-x); bottom: 24px; display: flex; gap: 20px; }
.hero-channels a{ color: rgba(255,255,255,.85); text-decoration: none; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-channels a:hover{ color: #7fd4e6; }
@media (max-width: 760px){ .hero-channels{ display: none; } }

/* Banda de descarga de la app (estrategia: la web posiciona, la app cobra) */
.app-band{ background: var(--navy-deep, #02122c); background: #02122c; color: #fff; }
.app-band-in{ display: flex; align-items: center; justify-content: space-between; gap: 34px; padding-block: clamp(38px, 5vw, 58px); flex-wrap: wrap; }
.app-band-eyebrow{ color: #7fd4e6; font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; margin: 0 0 8px; }
.app-band-title{ color: #fff; margin: 0 0 10px; font-size: clamp(1.7rem, 1.4rem+1.4vw, 2.5rem); }
.app-band-text{ color: rgba(255,255,255,.86); max-width: 56ch; margin: 0; }
.app-band-cta{ text-align: center; flex: none; }
.btn-app{ display: inline-flex; align-items: center; min-height: 56px; padding: 14px 34px; border-radius: 999px; background: #fff; color: #02122c; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; text-decoration: none; }
.btn-app:hover{ background: #e8f6ff; }
.app-band-note{ color: rgba(255,255,255,.75); font-size: .8rem; margin: 10px 0 0; }

/* Chat igual que la app: identidad de MIA y atajos */
.mia-id{ display: flex; align-items: center; gap: 14px; justify-content: center; }
.mia-id img{ width: 56px; height: auto; border-radius: 50%; box-shadow: var(--shadow-soft); }
.mia-id h1{ text-align: left; }
.mia-status{ color: var(--cyan-text); font-weight: 700; font-size: .82rem; letter-spacing: .08em; margin: 2px 0 0; text-align: left; }
.chips{ display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 auto 14px; max-width: 640px; }
.chip{ border: 1.5px solid var(--line); background: #fff; color: var(--navy); border-radius: 999px; padding: 9px 16px; font-size: .85rem; font-weight: 600; cursor: pointer; }
.chip:hover{ border-color: var(--cyan); color: var(--cyan-text); }
.chat-channels{ text-align: center; color: var(--ink-soft); font-size: .88rem; margin: 18px auto 0; max-width: 640px; }
.chat-channels a{ color: var(--navy); font-weight: 600; text-decoration: none; }
.chat-channels a:hover{ color: var(--cyan-text); }

/* Foco visible en toda la maqueta (auditoría D-05) */
a:focus-visible, button:focus-visible, input:focus-visible{ outline: 2.5px solid var(--cyan-text); outline-offset: 3px; border-radius: 4px; }
.hero a:focus-visible, .hero button:focus-visible, .app-band a:focus-visible{ outline-color: #fff; }

/* Chat: subtítulo bajo la identidad de MIA */
.chat-sub{ text-align: center; color: var(--ink-soft); max-width: 52ch; margin: 12px auto 18px; }
.chat-page .mia-id{ width: fit-content; margin-inline: auto; }

/* ---------- ESPEJO FERRARI EN MÓVIL (captura del dueño 2026-10-24) ----------
   Barra negra: MENU a la izquierda, nuestro logo centrado (donde va
   el de Ferrari) y SEARCH a la derecha. El menú se despliega. */
.menu-btn, .head-search{ display: none; }
@media (max-width: 760px){
  .site-header{ background: #000; }
  .site-header .bar{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .menu-btn{ display: block; justify-self: start; background: none; border: 0; color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; cursor: pointer; }
  .brand{ justify-self: center; }
  .brand span{ display: none; }
  .head-search{ display: block; justify-self: end; color: #fff; text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; padding: 10px 0; }
  .main-nav{ display: none; }
  .main-nav.open{ display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #000; padding: 8px var(--pad-x) 18px; margin-left: 0; }
  .main-nav.open a{ color: #fff; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.14); }
  .site-header.solid{ background: #000; box-shadow: none; }
  .site-header.solid .brand span, .site-header.solid .main-nav a, .site-header.solid .lang-switch a, .site-header.solid .lang-switch i{ color: #fff; }
}

/* Punto activo de la portada: anillo que se llena como un reloj
   con el tiempo de la pieza (espejo de la captura del dueño). */
.hero-dot{ width: 26px; height: 26px; background: transparent; position: relative; }
.hero-dot .ring{ width: 26px; height: 26px; transform: rotate(-90deg); display: block; }
.hero-dot .ring-bg{ fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2.5; }
.hero-dot .ring-fg{ fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 97.4; stroke-dashoffset: 97.4; }
.hero-dot::after{ content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.65); }
.hero-dot.is-active{ background: transparent; box-shadow: none; }
.hero-dot.is-active::after{ background: #fff; }

/* Volver arriba, espejo del pie de Ferrari: circulo centrado con flecha */
.back-top-wrap{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 0 6px; background: var(--bg-alt); }
.back-top{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--line); background: #fff; color: var(--navy); text-decoration: none; font-size: 1.05rem; }
.back-top:hover{ border-color: var(--cyan); color: var(--cyan-text); }
.back-top-wrap span{ font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
html{ scroll-behavior: smooth; }

/* Pie espejo de la tienda Ferrari: franja social centrada al fondo */
.f-social{ display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; padding: 26px 0 4px; border-top: 1px solid var(--line); margin-top: 34px; }
.f-social a{ color: var(--navy); text-decoration: none; font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.f-social a:hover{ color: var(--cyan-text); }
/* Acordeones del pie en móvil, como los suyos (signo + que despliega) */
@media (max-width: 760px){
  .site-footer .f-grid > div{ border-top: 1px solid var(--line); padding-top: 6px; }
  .site-footer h4{ cursor: pointer; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .site-footer h4::after{ content: "+"; font-size: 1.25rem; font-weight: 400; color: var(--ink-soft); }
  .site-footer .f-grid > div.f-open h4::after{ content: "−"; }
  .site-footer .f-grid > div > *:not(h4){ display: none; }
  .site-footer .f-grid > div.f-open > *:not(h4){ display: block; }
  .site-footer .f-grid > div:first-child{ border-top: 0; }
  /* La columna de marca no se pliega: el lockup (logo + slogan) y la
     definición quedan siempre visibles en móvil. */
  .site-footer h4.f-lockup{ display: block; cursor: default; }
  .site-footer .f-grid > div h4.f-lockup::after, .site-footer .f-grid > div.f-open h4.f-lockup::after{ content: none; }
  .site-footer .f-lockup .f-logo{ width: 104px; }
  .site-footer .f-grid > div:first-child > *:not(h4){ display: block; }
}

/* Activacion al bajar (espejo del scroll de Ferrari): cada capitulo
   despierta al entrar en pantalla y ofrece su opcion. */
html.reveal-ready .reveal{ opacity: 0; transform: translateY(26px); transition: opacity .9s cubic-bezier(.2,.6,.2,1), transform .9s cubic-bezier(.2,.6,.2,1); }
html.reveal-ready .reveal.inview{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity: 1; transform: none; transition: none; } }

/* El momento de los tickets, como su momento de la ropa (tienda Ferrari):
   pieza destacada a todo ancho, contador de la coleccion y fila de servicios. */
.feature-event{ position: relative; border-radius: 16px; overflow: hidden; min-height: clamp(380px, 52vh, 540px); display: flex; align-items: flex-end; margin-bottom: 18px; }
.feature-event img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-shade{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(2,18,44,.72), rgba(2,18,44,0) 55%); }
.feature-in{ position: relative; z-index: 2; padding: clamp(22px, 4vw, 44px); color: #fff; }
.feature-eyebrow{ font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: #9be9f5; margin: 0 0 8px; }
.feature-in h3{ color: #fff; font-size: clamp(2.2rem, 1.8rem+2.4vw, 3.6rem); text-transform: uppercase; margin: 0 0 6px; }
.feature-meta{ color: rgba(255,255,255,.9); margin: 0 0 20px; font-weight: 600; }
.collection-count{ text-align: right; color: var(--ink-soft); font-size: .85rem; margin: 0 0 14px; }
.services-row{ display: grid; gap: 26px; border-top: 1px solid var(--line); padding-top: 30px; margin-top: 38px; }
@media (min-width: 900px){ .services-row{ grid-template-columns: repeat(3, 1fr); } }
.services-row h4{ font-family: var(--font-disp); letter-spacing: .18em; text-transform: uppercase; font-size: .85rem; color: var(--navy); margin: 0 0 8px; }
.services-row p{ color: var(--ink-soft); margin: 0; }

/* Correcciones tras captura propia a 390 (2026-10-24): el bloque de
   la portada baja de verdad al tercio inferior, y el boton de musica
   no pisa la pausa de la portada mientras el heroe esta en pantalla. */
.hero-main{ flex: 1; display: flex; align-items: flex-end; justify-content: center; width: 100%; }
body.hero-in-view .music-btn{ opacity: 0; pointer-events: none; }
.music-btn{ transition: opacity .35s ease; }

/* Estado de MIA en el chat: turquesa mas oscuro, contraste verificado */
.mia-status{ color: #075a6b; }

/* OUR MUSIC estilo Ferrari (orden del dueño 2026-10-24): fuera la
   pastilla azul; un circulo fino como los de la portada, y en la
   portada se sienta al lado de los tres circulos. */
.music-btn{ width: 46px; height: 46px; padding: 0; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.85); border: 1.5px solid rgba(2,34,81,.45); color: var(--navy); box-shadow: 0 6px 18px rgba(2,34,81,.18); }
.music-btn .mb-label{ display: none; }
.music-btn .mb-ico{ font-size: 1rem; }
.music-btn.playing{ background: rgba(255,255,255,.85); border-color: var(--cyan-text); color: var(--cyan-text); }
body.hero-in-view .music-btn{ opacity: 1; pointer-events: auto; right: auto; left: 50%; transform: translateX(66px); bottom: 13px; background: rgba(2,18,44,.25); border-color: rgba(255,255,255,.85); color: #fff; box-shadow: none; }

/* PATRON TIENDA (capturas del dueño, store.ferrari.com, 2026-10-24):
   carril horizontal con linea de progreso, menu a pantalla completa,
   pie con BACK TO TOP en texto y selector de idioma subrayado. */
.events-grid{ display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
.events-grid::-webkit-scrollbar{ display: none; }
.events-grid .event-card{ flex: 0 0 302px; scroll-snap-align: start; }
@media (max-width: 760px){ .events-grid .event-card{ flex-basis: 78vw; } }
.rail-progress{ position: relative; height: 2px; background: var(--line); margin-top: 16px; overflow: hidden; }
.rail-progress span{ position: absolute; left: 0; top: 0; height: 100%; width: 18%; background: var(--navy); }
.back-top-text{ font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--navy); text-decoration: none; }
.back-top-text:hover{ color: var(--cyan-text); text-decoration: underline; text-underline-offset: 5px; }
.f-social-label{ text-align: center; font-size: .92rem; color: var(--ink-soft); margin: 30px 0 2px; }
.f-social{ border-top: 0; margin-top: 10px; padding-top: 6px; }
.lang-cur{ text-decoration: underline; text-underline-offset: 4px; }
.nav-foot{ display: none; }
@media (max-width: 900px){
  .main-nav.open{ position: fixed; inset: 58px 0 0 0; background: #fff; z-index: 55; flex-direction: column; align-items: stretch; padding: 10px 26px 30px; overflow-y: auto; }
  .main-nav.open > a{ color: var(--navy); font-size: 1.55rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 17px 2px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
  .main-nav.open > a::after{ content: "\203A"; font-size: 1.7rem; font-weight: 400; color: var(--navy); }
  .main-nav.open .nav-foot{ display: block; margin-top: 26px; }
  .nav-app{ display: inline-block; font-size: 1rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-text); text-decoration: none; }
  .nav-channels{ display: flex; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
  .nav-channels a{ color: var(--ink-soft); text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
  body.menu-open{ overflow: hidden; }
}

/* Correccion de especificidad: el menu abierto manda sobre las reglas
   de cabecera en claro/oscuro (texto navy visible, pie del menu). */
body.light-hero .site-header .main-nav.open > a,
.site-header .main-nav.open > a{ color: var(--navy); }
body .main-nav.open .nav-foot{ display: block; padding-top: 6px; }
body .main-nav.open .nav-app{ display: inline-block; }
body .main-nav.open .nav-channels{ display: flex; }

/* ================= LA TIENDA · espejo de store.ferrari.com =================
   Mismos colores y misma tipografia de la tienda: blanco, tinta casi
   negra (nuestro navy), grises finos, titulares en mayusculas fuertes,
   nombres de producto en frase regular, enlace de accion subrayado.
   El bloque de color va en nuestro navy; el segmento de progreso, en
   nuestro turquesa. El logo va solo y centrado: el lugar del caballo. */
.store-header{ position: sticky; top: 0; z-index: 60; background: #fff; box-shadow: 0 1px 0 var(--line); }
.st-top{ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 12px var(--pad-x) 10px; max-height: 92px; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
.store-header.scrolled .st-top{ max-height: 0; padding-top: 0; padding-bottom: 0; }
.st-side{ display: flex; gap: 26px; align-items: center; }
.st-side.right{ justify-content: flex-end; }
.st-side a{ font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; }
.st-side a:hover{ color: var(--cyan-text); text-decoration: underline; text-underline-offset: 5px; }
.st-logo{ display: block; line-height: 0; }
.st-logo img{ height: 56px; width: auto; }
.st-cats{ display: flex; justify-content: center; gap: clamp(18px, 3.4vw, 44px); padding: 10px var(--pad-x) 14px; flex-wrap: wrap; }
.st-cats a{ font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.st-cats a:hover{ text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.st-menu-btn{ display: none; }
@media (max-width: 760px){
  .st-top{ padding: 8px 18px; }
  .st-logo img{ height: 44px; }
  .st-side a{ display: none; }
  .st-side a.keep{ display: inline; }
  .st-menu-btn{ display: inline-block; background: none; border: 0; font: inherit; font-size: .72rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); padding: 6px 0; cursor: pointer; }
  .st-cats{ display: none; }
  .st-cats.open{ display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 4px 18px 14px; }
  .st-cats.open a{ padding: 12px 0; border-bottom: 1px solid var(--line); width: 100%; font-size: .95rem; }
}
.st-hero{ position: relative; min-height: 84vh; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy-deep); }
.st-hero img.bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.st-hero .inner{ position: relative; padding: 0 var(--pad-x) clamp(34px, 5vw, 64px); width: 100%; max-width: 1760px; margin-inline: auto; }
.st-hero h1{ color: #fff; font-size: clamp(2.6rem, 7.5vw, 6.2rem); margin: 0 0 22px; text-shadow: 0 2px 30px rgba(1,22,54,.45); }
.st-pills{ display: flex; gap: 12px; flex-wrap: wrap; }
.pill{ display: inline-block; background: #fff; color: #0b1526; font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 13px 30px; border-radius: 999px; }
.pill:hover{ background: var(--bg-tint); }
.pill.dark{ background: #0b1526; color: #fff; }
.pill.dark:hover{ background: var(--navy); }
.pill.ghost{ background: transparent; color: #fff; border: 1.5px solid #fff; }
.pill.ghost:hover{ background: rgba(255,255,255,.14); }
.st-sec{ padding: clamp(56px, 7vw, 96px) 0 8px; }
.st-title{ font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: var(--ink); margin: 0 0 30px; }
.store-page .rail-progress{ width: min(400px, 55%); margin: 20px auto 0; background: #cfd8e3; }
.store-page .rail-progress span{ width: 60%; background: var(--navy); }
.pcard{ flex: 0 0 300px; scroll-snap-align: start; display: flex; flex-direction: column; }
@media (max-width: 760px){ .pcard{ flex-basis: 74vw; } }
.pcard .pimg{ position: relative; display: block; aspect-ratio: 3/4; background: var(--bg-alt); overflow: hidden; }
.pcard .pimg img{ width: 100%; height: 100%; object-fit: cover; }
.pcard .pimg img.logo-img{ object-fit: contain; padding: 18%; }
.pcard .tag-pill{ position: absolute; top: 12px; left: 12px; background: #0b1526; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.pcard .tag-plain{ position: absolute; top: 14px; left: 14px; color: #0b1526; background: rgba(255,255,255,.88); padding: 5px 9px; border-radius: 3px; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pcard .pname{ font-family: var(--font-text); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 1.02rem; line-height: 1.35; margin: 16px 0 4px; }
.pcard .pmeta{ color: var(--ink-soft); font-size: .92rem; margin: 0 0 8px; }
.pcard .pshop{ margin-top: auto; padding-top: 18px; font-size: .74rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.pcard .pshop:hover{ color: var(--cyan-text); }
.st-panel{ padding-top: clamp(56px, 7vw, 96px); }
.st-panel .ph{ overflow: hidden; }
.st-panel .ph img{ width: 100%; aspect-ratio: 21/9; object-fit: cover; }
@media (max-width: 760px){ .st-panel .ph img{ aspect-ratio: 4/3; } }
.st-panel .cap{ text-align: center; padding: 26px 20px 0; }
.st-panel .cap h3{ font-size: clamp(1.3rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); }
.st-panel .cap .st-pills{ justify-content: center; }
.st-duo{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: clamp(56px, 7vw, 96px); }
@media (max-width: 760px){ .st-duo{ grid-template-columns: 1fr; } }
.st-duo .cell{ position: relative; overflow: hidden; display: block; }
.st-duo .cell img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.st-duo .cell .pill{ position: absolute; left: 18px; bottom: 18px; }
.st-appblock{ margin-top: clamp(64px, 8vw, 110px); background: var(--navy); display: grid; grid-template-columns: 55% 45%; }
@media (max-width: 860px){ .st-appblock{ grid-template-columns: 1fr; } }
.st-appblock .ph img{ width: 100%; height: 100%; object-fit: cover; min-height: 320px; }
.st-appblock .tx{ padding: clamp(34px, 4.5vw, 72px); color: #fff; display: flex; flex-direction: column; justify-content: center; }
.st-appblock h2{ color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.st-appblock p{ color: rgba(255,255,255,.85); margin: 0 0 16px; }
.st-appblock .where{ color: #fff; font-weight: 700; margin-bottom: 30px; }
.st-appblock label{ font-size: .74rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #7fd4e6; display: block; margin-bottom: 12px; }
.st-find{ display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.st-find input{ flex: 1 1 220px; background: transparent; border: 0; border-bottom: 1.5px solid rgba(255,255,255,.7); color: #fff; font: inherit; padding: 10px 2px; outline: none; }
.st-find input::placeholder{ color: rgba(255,255,255,.55); }
.st-appblock .note{ font-size: .85rem; color: rgba(255,255,255,.65); margin-top: 22px; }
.st-subscribe{ background: var(--bg-alt); margin-top: clamp(64px, 8vw, 110px); padding: clamp(48px, 6vw, 84px) 20px; text-align: center; }
.st-subscribe h3{ font-size: clamp(1.4rem, 3vw, 2.1rem); text-transform: uppercase; color: var(--ink); }
.st-subscribe p{ color: var(--ink-soft); max-width: 560px; margin: 0 auto 26px; }
.st-subscribe .row{ display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.st-subscribe .mail{ border-bottom: 1.5px solid var(--ink); padding: 10px 2px; min-width: min(320px, 70vw); color: var(--ink-soft); }
.st-subscribe .pill{ border: 1.5px solid #0b1526; }

/* Estrategia de marketing de la tienda, espejo: goteo semanal de
   coleccion, lista de deseos (Save) hacia la app y servicios que
   quitan friccion. La conversion no es un carrito: es la app y su
   membresia, que es donde vive la Wallet. */
.st-drop{ background: #0b1526; color: #fff; text-align: center; padding: 13px 18px; }
.st-drop p{ margin: 0; font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.st-drop strong{ color: #7fd4e6; }
.pcard .pactions{ margin-top: auto; padding-top: 18px; display: flex; gap: 26px; align-items: baseline; }
.pcard .pactions .pshop{ margin-top: 0; padding-top: 0; }
.pcard .psave{ font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.pcard .psave:hover{ color: var(--cyan-text); text-decoration: underline; text-underline-offset: 6px; }

/* Dos formatos, como los suyos: escritorio y celular.
   Escritorio: panel completo al pasar sobre las categorias y pie
   en columnas abiertas. Celular: cajon con chevrones y pie en
   acordeones con +. */
.st-mega{ display: none; }
@media (min-width: 1024px){
  .st-mega{ display: block; position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: 0 30px 50px rgba(2,34,81,.14); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  .st-mega.open{ opacity: 1; visibility: visible; transform: none; }
  .st-mega-in{ max-width: 1760px; margin-inline: auto; padding: 34px var(--pad-x) 44px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: 40px; }
  .st-mega h5{ margin: 0 0 16px; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-soft); }
  .st-mega .col a{ display: block; padding: 6px 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
  .st-mega .col a:hover{ color: var(--cyan-text); text-decoration: underline; text-underline-offset: 5px; }
  .st-mega .mega-ph{ position: relative; display: block; overflow: hidden; }
  .st-mega .mega-ph img{ width: 100%; height: 100%; min-height: 210px; object-fit: cover; }
  .st-mega .mega-ph span{ position: absolute; left: 14px; bottom: 14px; background: #fff; color: #0b1526; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px; border-radius: 999px; }
  .store-header{ position: sticky; }
}
@media (max-width: 760px){
  .st-cats.open a{ display: flex; justify-content: space-between; align-items: center; }
  .st-cats.open a::after{ content: "\203A"; font-size: 1.3rem; font-weight: 400; color: var(--ink-soft); }
}
/* Pie: dos formatos de volver arriba y acordeones en celular */
.back-top{ display: none; }
@media (min-width: 1024px){ .back-top{ display: inline-flex; } }
.f-pay{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 8px; color: var(--ink-soft); font-size: .9rem; }
.f-pay .marks{ color: var(--ink); font-weight: 700; letter-spacing: .04em; }
@media (max-width: 760px){
  .f-acc > div ul{ display: none; }
  .f-acc > div.open ul{ display: block; }
  .f-acc > div h4{ display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
  .f-acc > div h4::after{ content: "+"; font-size: 1.15rem; font-weight: 400; color: var(--ink-soft); }
  .f-acc > div.open h4::after{ content: "\2212"; }
  .f-acc > div:first-child ul{ display: block; }
  .f-acc > div:first-child h4::after{ content: ""; }
}

/* Ultima pasada: flechas de carril como las suyas, pie del cajon y
   su buscador a pantalla completa con busquedas populares. */
.st-drawer-foot{ display: none; }
@media (max-width: 760px){
  .st-cats.open .st-drawer-foot{ display: block; padding: 18px 0 6px; }
  .st-drawer-foot .nav-app{ display: inline-block; margin-bottom: 14px; }
  .st-drawer-foot .nav-channels{ display: flex; gap: 18px; flex-wrap: wrap; }
  .st-drawer-foot .nav-channels a{ border: 0; padding: 4px 0; font-size: .8rem; width: auto; }
  .st-drawer-foot .nav-channels a::after{ content: ""; }
}
.rail-wrap{ position: relative; }
.rail-btn{ display: none; }
@media (min-width: 1024px){
  .rail-btn{ display: flex; align-items: center; justify-content: center; position: absolute; top: 38%; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 1.3rem; cursor: pointer; z-index: 3; box-shadow: var(--shadow-soft); }
  .rail-btn.prev{ left: -10px; }
  .rail-btn.next{ right: -10px; }
  .rail-btn[disabled]{ color: #b9c6d4; cursor: default; box-shadow: none; }
}
.st-search{ position: fixed; inset: 0; background: #fff; z-index: 90; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s; }
.st-search.open{ opacity: 1; visibility: visible; }
.st-search-in{ max-width: 1100px; margin-inline: auto; padding: clamp(30px, 6vw, 70px) var(--pad-x); }
.st-search-form{ display: flex; align-items: center; gap: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 14px; }
.st-search-form input{ flex: 1; border: 0; outline: none; font: inherit; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 700; color: var(--ink); background: transparent; }
.st-search-form input::placeholder{ color: #aebccb; }
.st-search-x{ background: none; border: 0; font-size: 2rem; line-height: 1; color: var(--ink); cursor: pointer; padding: 4px 8px; }
.st-search-pop{ margin: 34px 0 14px; font-size: .74rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-soft); }
.st-search-tags{ display: flex; gap: 10px; flex-wrap: wrap; }
.st-search-tags a{ border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: .85rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.st-search-tags a:hover{ border-color: var(--navy); }

/* Ajustes del cajon: pantalla completa como el suyo y el boton de
   la app con su forma, sin chevron ni fila de categoria. */
@media (max-width: 760px){
  .st-cats.open{ min-height: calc(100dvh - 118px); align-content: start; }
  .st-cats.open .st-drawer-foot .nav-app{ display: inline-block; width: auto; border: 1.5px solid var(--navy); border-radius: 999px; padding: 12px 28px; font-size: .78rem; }
  .st-cats.open .st-drawer-foot .nav-app::after{ content: ""; }
  .st-cats.open .st-drawer-foot .nav-channels a{ border-bottom: 0; }
}

/* Ficha de producto, espejo de la suya: galeria y caja de compra. */
.pd{ padding: clamp(26px, 4vw, 54px) 0 10px; }
.pd-back{ font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.pd-back:hover{ color: var(--cyan-text); }
.pd-crumb{ color: var(--ink-soft); font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; margin: 14px 0 26px; }
.pd-grid{ display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(26px, 4vw, 64px); align-items: start; }
@media (max-width: 860px){ .pd-grid{ grid-template-columns: 1fr; } }
.pd-main{ width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--bg-alt); }
.pd-thumbs{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pd-thumbs img{ width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.pd-name-row{ display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.pd-buy h1{ font-family: var(--font-text); text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 0; }
.pd-save{ font-size: 1.7rem; line-height: 1; color: var(--ink); text-decoration: none; }
.pd-save:hover{ color: var(--cyan-text); }
.pd-meta{ color: var(--ink); font-size: 1.05rem; margin: 14px 0 6px; }
.tag-pill-static{ display: inline-block; background: #0b1526; color: #fff; font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.btn-pd{ display: block; text-align: center; background: var(--navy); color: #fff; font-size: .85rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; padding: 17px 30px; border-radius: 999px; margin-top: 22px; }
.btn-pd:hover{ background: var(--navy-deep); }
.pd-note{ color: var(--ink-soft); font-size: .9rem; margin: 14px 0 26px; }
.pd-acc{ border-top: 1px solid var(--line); }
.pd-acc .acc{ border-bottom: 1px solid var(--line); }
.pd-acc .acc button{ width: 100%; background: none; border: 0; font: inherit; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.pd-acc .acc-body{ display: none; padding: 0 0 18px; color: var(--ink-soft); }
.pd-acc .acc.open .acc-body{ display: block; }
.pd-acc .acc-body p{ margin: 0; }
.pd-acc .acc-body ul{ margin: 0; padding-left: 18px; }
/* Listado de categoria, espejo del suyo: rejilla estatica y filtros. */
.list-head{ text-align: center; padding: clamp(40px, 6vw, 80px) 20px 8px; }
.list-head h1{ color: var(--ink); font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
.list-bar{ display: flex; justify-content: space-between; align-items: center; padding: 18px 0 26px; }
.list-bar .count{ color: var(--ink-soft); font-size: .9rem; }
.filter-btn{ background: none; border: 0; font: inherit; font-size: .8rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); cursor: pointer; padding: 8px 0; }
.filter-btn:hover{ color: var(--cyan-text); }
.grid-list{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px 22px; }
@media (max-width: 1023px){ .grid-list{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .grid-list{ grid-template-columns: 1fr; } }
.grid-list .pcard{ flex: none; }
.list-seo{ border-top: 1px solid var(--line); margin-top: clamp(50px, 7vw, 90px); padding-top: 34px; color: var(--ink-soft); max-width: 860px; }
.list-seo h3{ text-transform: uppercase; color: var(--ink); }
.list-crumb{ text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px; margin-top: 40px; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft); }
.fdrawer{ position: fixed; inset: 0; z-index: 95; visibility: hidden; }
.fdrawer.open{ visibility: visible; }
.fdrawer .dim{ position: absolute; inset: 0; background: rgba(1,22,54,.45); opacity: 0; transition: opacity .2s; }
.fdrawer.open .dim{ opacity: 1; }
.fdrawer .panel{ position: absolute; top: 0; left: 0; bottom: 0; width: min(380px, 88vw); background: #fff; padding: 26px 28px; transform: translateX(-102%); transition: transform .25s ease; overflow-y: auto; display: flex; flex-direction: column; }
.fdrawer.open .panel{ transform: none; }
.fdrawer h3{ display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: .18em; font-size: .95rem; color: var(--ink); }
.fdrawer .fx{ background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--ink); }
.fdrawer fieldset{ border: 0; border-top: 1px solid var(--line); padding: 18px 0 6px; margin: 0; }
.fdrawer legend{ font-size: .76rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); padding-top: 18px; }
.fdrawer label{ display: block; padding: 7px 0; color: var(--ink-soft); font-size: .95rem; cursor: pointer; }
.fdrawer .foot{ margin-top: auto; display: flex; gap: 12px; padding-top: 22px; }
.fdrawer .foot .pill{ flex: 1; text-align: center; cursor: pointer; }
.fdrawer .foot .pill.clear{ background: #fff; border: 1.5px solid #0b1526; }
/* Buscador: resultados dentro del panel, como el suyo. */
.st-search-results{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 760px){ .st-search-results{ grid-template-columns: 1fr; } }
.mini-card{ display: flex; gap: 14px; align-items: center; border: 1px solid var(--line); padding: 10px; text-decoration: none; }
.mini-card img{ width: 62px; height: 78px; object-fit: cover; }
.mini-card strong{ display: block; color: var(--ink); font-size: .95rem; line-height: 1.25; }
.mini-card span{ color: var(--ink-soft); font-size: .82rem; }
/* Cookies: su caja negra abajo a la izquierda. */
.cookie-box{ position: fixed; left: 18px; bottom: 18px; z-index: 96; background: #0b1526; color: #fff; max-width: 360px; padding: 20px 22px; box-shadow: var(--shadow); }
.cookie-box p{ margin: 0 0 14px; font-size: .88rem; color: rgba(255,255,255,.85); }
.cookie-box .row{ display: flex; gap: 10px; }
.cookie-box button{ flex: 1; font: inherit; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; padding: 11px 8px; border-radius: 999px; cursor: pointer; }
.cookie-box .acc{ background: #fff; color: #0b1526; border: 0; }
.cookie-box .rej{ background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); }

/* ===== Páginas por socio (espejo tienda, rojo→navy) ===== */
.sp-hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a1122}
.sp-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-photo{animation:spkb 22s ease-in-out infinite alternate}
@keyframes spkb{from{transform:scale(1)}to{transform:scale(1.09)}}
.sp-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,17,46,.52),rgba(2,17,46,.34) 45%,rgba(2,17,46,.62))}
.sp-hero:has(.sp-media){color:#fff}
.sp-lockup{position:relative;z-index:2;text-align:center;padding:64px 20px;max-width:860px}
.sp-our-logo{width:96px;height:auto;border-radius:50%;margin:0 auto}
.sp-slogan{margin:14px 0 26px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#fff}
.sp-hero:not(:has(.sp-media)) .sp-slogan{color:#022251}
.sp-plogo{display:inline-block;background:#fff;padding:16px 26px;border-radius:4px}
.sp-plogo img{max-height:76px;max-width:min(420px,72vw);width:auto;display:block}
.sp-lockup h1{margin:26px 0 10px;font-size:clamp(30px,5.4vw,58px);line-height:1.04;text-transform:uppercase;color:#fff}
.sp-hero:not(:has(.sp-media)) .sp-lockup h1{color:#022251}
.sp-sub{font-size:14px;letter-spacing:.08em;color:#fff;opacity:.92}
.sp-hero:not(:has(.sp-media)) .sp-sub{color:#33475e;opacity:1}
.sp-h2{font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;margin:0}
.sp-acc{max-width:920px;margin:0 auto}
.sp-acc .acc-body p{margin:0 0 8px}
.sp-row{display:flex;align-items:baseline;gap:18px;padding:13px 0;border-top:1px solid #e3e8ef;flex-wrap:wrap}
.sp-when{font-weight:700;min-width:170px;color:#0d1b2e}
.sp-venue{flex:1;color:#5a6b80;min-width:180px}
.sp-tix{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#022251;text-decoration:underline;text-underline-offset:4px}
.sp-tag{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7c8da0}
.st-hero video.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-reels{display:flex;gap:18px;justify-content:center;padding:10px var(--pad-x) 26px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.sp-reels::-webkit-scrollbar{display:none}
.sp-reels video{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:18px;background:#0a1122}
.sp-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.sp-gallery figure{margin:0}
.sp-gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;display:block}
.sp-gallery figcaption{font-size:12px;color:#5a6b80;margin-top:8px;letter-spacing:.04em}
@media(max-width:760px){.sp-gallery{grid-template-columns:repeat(2,1fr)}.sp-hero{min-height:76vh}.sp-when{min-width:130px}}

/* ===== Cartelera espejo ===== */
.ct-strip{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:4px 0 18px}
.ct-chip{border:1px solid #d7dee8;border-radius:999px;padding:8px 16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#33475e}
.ct-chip strong{color:#022251}

/* Logos y lockups: jamás recortados (regla de la casa) — se muestran enteros */
img.logo-fit{ object-fit: contain !important; background: #000; }

/* Logos de socios en tarjetas claras: enteros, centrados y sin ampliar más
   allá de su resolución (nada pixelado). El fondo de la tarjeta manda. */
a.pimg:has(> img.logo-img){ display: flex; align-items: center; justify-content: center; background: #f4f6f8; }
a.pimg > img.logo-img{ width: auto !important; height: auto !important; max-width: 82%; max-height: 72%; object-fit: contain; }
img.gol-native{ max-width: 112px !important; max-height: 112px !important; }
.partner-cell img.gol-native{ max-height: 62px !important; max-width: 100% !important; }

/* Corrección: la regla antigua daba a los logos un padding del 18% que los
   empequeñecía dentro de su caja. Los logos van a caja completa. */
.pcard .pimg img.logo-img{ padding: 0 !important; }

/* Regla de la casa: el logo de un socio NUNCA se recorta, en ningún contexto.
   La imagen del lockup de Miami City Ballet (fondo negro) se muestra siempre
   entera con contain, la lleve una tarjeta, un héroe o un listado. */
img[src$="mcb.jpg"]{ object-fit: contain !important; background: #000; }

/* Los reels de la página de socios enlazan a su original en Instagram:
   tocar un reel lleva al reel en IG (orden del dueño, 2026-10-24). */
.sp-reels a.sp-reel-link{ display: block; flex: 0 0 auto; width: min(74vw, 300px); scroll-snap-align: start; }
.sp-reels a.sp-reel-link video{ width: 100%; height: 100%; display: block; }
@media(max-width:760px){ .sp-reels{ justify-content: flex-start; } }

/* ---------- Paquete 2026-10-25: conmutador EN/ES junto a la marca
   y tarjeta MFF como video ----------
   El conmutador vive al inicio de la barra, inmediatamente despues
   del conjunto logo + BTS Miami, con la misma voz que los enlaces
   vecinos (.8rem, 700, versalitas, .22em). El idioma activo se
   distingue solo por el peso (800). Sus colores cuelgan de las
   mismas reglas que colorean .main-nav a (extendidas arriba). */
.lang-switch{ display: inline-flex; align-items: center; gap: 3px; }
.site-header .lang-switch a{
  font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  text-decoration: none; color: #fff; opacity: .92; min-height: 44px;
  display: inline-flex; align-items: center; padding: 0 1px;
}
.site-header .lang-switch a.is-active{ font-weight: 800; opacity: 1; }
.site-header .lang-switch i{ font-style: normal; font-weight: 400; font-size: .8rem; opacity: .45; color: #fff; }
.site-header .lang-switch a:hover{ opacity: 1; color: #7fd4e6; }
.site-header.solid .lang-switch a:hover{ color: var(--cyan); }
body.light-hero .site-header.solid .lang-switch a:hover{ color: #7fd4e6; }
@media (min-width: 1100px){
  .site-header:not(.solid) .lang-switch a:hover{ color: var(--cyan); }
  body.light-hero .site-header:not(.solid) .lang-switch a:hover{ color: #7fd4e6; }
}
@media (max-width: 1099px){
  body.light-hero .site-header:not(.solid) .lang-switch a:hover{ color: var(--cyan-text); }
}
/* En movil la barra pasa a rejilla de cuatro celdas (MENU, marca,
   EN/ES, SEARCH) y el conmutador sigue visible junto a la marca. */
@media (max-width: 760px){
  .site-header .bar{ grid-template-columns: auto auto 1fr auto; }
  .site-header .lang-switch{ justify-self: start; margin-left: 2px; }
  .site-header .lang-switch a{ min-height: 0; padding: 10px 1px; }
}
/* Cabecera de tienda: el conmutador hereda la voz de .st-side a;
   solo se agrupa y el activo se marca por el peso. En movil queda
   visible junto al boton de menu (clase keep, como The App). */
.st-side .lang-switch{ gap: 3px; }
.st-side .lang-switch i{ font-style: normal; font-weight: 400; font-size: .72rem; color: var(--ink); opacity: .45; }
.st-side .lang-switch a.is-active{ font-weight: 800; }

/* Tarjeta MFF de Partners como video: misma celda que la foto 12
   (relacion 1024/678 y tope de 380 px; 4:3 en la banda 761-1919).
   El reel es vertical: object-position 50% 40% centra la ventana
   en las caras de los momentos clave (5 s, 15 s, 30 s, 45 s, 50 s)
   y la marca de agua del reel queda fuera de ventana, nunca partida. */
.photo-strip video.pos-film-vid{
  width: 100%; aspect-ratio: 1024/678; max-height: 380px; object-fit: cover;
  object-position: 50% 40%; display: block; border-radius: 10px;
}
@media (min-width: 761px) and (max-width: 1919px){
  .photo-strip figure:has(> video.pos-film-vid){ aspect-ratio: 4/3; align-self: start; }
  .photo-strip figure:has(> video.pos-film-vid) > video{ height: 100%; max-height: none; aspect-ratio: auto; }
}

/* Contacto de sponsors en la banda de la host: etiqueta en
   versalitas y enlaces en navy, en la voz del pie de la casa. */
.host-contact{ margin: 22px 0 0; font-size: .98rem; line-height: 1.55; }
.host-contact .hc-label{
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 7px;
}
.host-contact a{ color: var(--navy); font-weight: 600; text-decoration: none; }
.host-contact a:hover{ color: var(--cyan-text); text-decoration: underline; text-underline-offset: 4px; }

/* ===== Paquete 2026-10-25 · ronda 3: logos, calendario, suscripción, puertas ===== */
/* G3 · héroes de socio: la marca quemada vive arriba; se ancla y se sacrifica abajo */
.sp-media.sp-top{ object-position: 100% 0%; }
/* G4 · carrusel: posiciones por foto para que su marca quede dentro de la ventana 4/3 */
.cc-slide img.cc-fix-t{ object-position: 50% 0%; }
.cc-slide img.cc-fix-r85{ object-position: 85% 50%; }
.cc-slide img.cc-fix-r92{ object-position: 92% 50%; }
/* G5 · tira de socios: la marca de la foto 9F queda dentro en escritorio */
.photo-strip figure:has(> img[src*="9F224D3F"]) > img{ object-position: 50% 0%; }
/* G1 · MBCC: la tarjeta gráfica se muestra completa sobre el fondo de la página */
.sp-hero.sp-hero-card{ background: #fff; flex-direction: column; min-height: 0; padding: clamp(30px, 5vh, 54px) 18px 6px; overflow: visible; }
.sp-hero-card .sp-media{ position: relative; inset: auto; width: min(520px, 92vw); height: auto; aspect-ratio: 720/900; max-height: 72vh; object-fit: contain; }
.sp-hero-card .sp-shade{ display: none; }
.sp-hero-card .sp-lockup{ padding: 26px 20px 46px; }
.sp-hero-card .sp-lockup h1{ color: var(--navy); }
.sp-hero-card .sp-slogan{ color: var(--ink-soft); }
.sp-hero-card .sp-sub{ color: #33475e; opacity: 1; }
.sp-hero-card .sp-plogo{ border: 1px solid var(--line); }
/* G2 · el logo de Ticketmaster va en su azul oficial sobre píldora blanca */
.tm-lockup .tm-logo{ background: #fff; padding: 10px 18px; border-radius: 999px; box-sizing: content-box; }
/* Cambio 12 · capítulo 05 con la gramática de los capítulos nuevos */
.tm-lockup-light{ background: transparent; border-radius: 0; padding: 0; }
.tm-lockup-light .tm-slogan{ color: var(--ink-soft); }
.tm5{ display: grid; gap: clamp(28px, 4vw, 54px); align-items: start; margin-top: clamp(24px, 3.2vw, 40px); }
@media (min-width: 960px){ .tm5{ grid-template-columns: auto 1fr; } }
.tm5 p{ color: var(--ink-soft); margin: 0 0 10px; max-width: 62ch; text-wrap: pretty; }
.tm5 .assoc{ color: var(--navy); font-weight: 700; letter-spacing: .04em; }
.tm-actions{ display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 20px; }
/* Cambio 10 · bloques-puerta de la home: el bloque entero es el enlace */
.services-row > a{ display: block; text-decoration: none; color: inherit; border-radius: 14px; padding: 10px 12px; margin: -10px -12px; transition: background .25s ease; }
.services-row > a:hover{ background: rgba(2, 34, 81, .05); }
a.map-pin{ text-decoration: none; }
/* Cambio 13 · ventanas de socio: la celda y la pieza llevan a su temporada */
a.partner-cell{ text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
a.partner-cell:hover{ box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.pf-cover{ position: absolute; inset: 0; z-index: 3; display: block; }
/* Cambio 14 · suscripción real en el bloque «Miami, every week» */
.sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-subscribe input.mail{ font: inherit; color: var(--ink); background: transparent; outline: none; }
.st-subscribe input.mail::placeholder{ color: var(--ink-soft); }
.st-subscribe button.pill{ font: inherit; cursor: pointer; background: transparent; color: inherit; }
.st-subscribe .news-msg{ flex-basis: 100%; margin: 6px 0 0; font-weight: 700; }
.st-subscribe .news-msg.ok{ color: var(--navy); font-size: 1.05rem; }
.st-subscribe .news-msg.err{ color: #b3261e; }
/* Cambios 9/15/16 · calendario del capítulo Search y del panel, y las dos semanas */
.cal{ margin-top: clamp(30px, 4vw, 48px); }
.cal-head{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cal-title{ font-family: var(--font-disp); text-transform: uppercase; letter-spacing: .14em; color: var(--navy); font-size: 1rem; margin: 0; }
.cal-nav{ display: flex; align-items: center; gap: 10px; }
.cal-month{ font-weight: 800; color: var(--navy); min-width: 16ch; text-align: center; margin: 0; }
.cal-arrow{ width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cal-arrow:disabled{ opacity: .35; cursor: default; }
.cal-week, .cal-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week{ margin-top: 16px; }
.cal-week span{ text-align: center; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 0; }
.cal-grid{ margin-top: 4px; }
.cal-day{ position: relative; height: 52px; border: 1px solid transparent; background: transparent; border-radius: 12px; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cal-day:hover{ border-color: var(--line); }
.cal-day.is-today{ border-color: var(--navy); }
.cal-day.is-sel{ background: var(--navy); color: #fff; }
.cal-day .dot{ position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
.cal-day.is-sel .dot{ background: #7fd4e6; }
.cal-note{ margin: 18px 0 0; color: var(--ink-soft); }
.cal-events{ margin-top: 18px; }
.tw2{ margin-top: clamp(30px, 4vw, 44px); }
.tw2-more{ margin-top: 22px; }
.st-search .cal{ margin-top: 24px; }
.st-search .tw2{ margin-top: 26px; }

.cal-events .events-grid, [data-tw2-list] .events-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); overflow: visible; scroll-snap-type: none; }
.cal-events .event-card, [data-tw2-list] .event-card{ flex: none; width: auto; }

/* ===== EVOLUCIÓN DEL ESPEJO · 2026-10-25 (orden del dueño: «tipografías
   ritmo diseno», cada superficie en lo que tiene que transmitir) =====
   R3 · las rejillas despiertan en cascada breve: el retraso solo vive
   antes de la clase .in, así que el hover posterior nunca hereda espera. */
html.reveal-ready .events-grid .reveal:not(.in):nth-child(3n+2),
html.reveal-ready .partners-grid .reveal:not(.in):nth-child(4n+2){ transition-delay: .07s; }
html.reveal-ready .events-grid .reveal:not(.in):nth-child(3n+3),
html.reveal-ready .partners-grid .reveal:not(.in):nth-child(4n+3){ transition-delay: .14s; }
html.reveal-ready .partners-grid .reveal:not(.in):nth-child(4n+4){ transition-delay: .21s; }