@charset "utf-8";

/* ── 0 · TIPOGRAFÍAS ────────────────────────────────────────────────────────
   Van AQUÍ, no en una hoja aparte: dos hojas bloqueantes son dos viajes en la
   ruta crítica y en móvil se pagaban 380 ms. Las rutas son relativas a /css/. */
/* Bodoni Moda · italic · latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  
  src: url(../fonts/bodoni-moda-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bodoni Moda · italic · latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  
  src: url(../fonts/bodoni-moda-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Bodoni Moda · normal · latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  
  src: url(../fonts/bodoni-moda-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Bodoni Moda · normal · latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  
  src: url(../fonts/bodoni-moda-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat · italic · latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  
  src: url(../fonts/montserrat-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat · italic · latin */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  
  src: url(../fonts/montserrat-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat · normal · latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  
  src: url(../fonts/montserrat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat · normal · latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  
  src: url(../fonts/montserrat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÓPERA DE MORELIA · SISTEMA DE DISEÑO
   Fuente única de verdad. Ninguna página define estilo propio: sólo usa esto.
   Orden: 1 tokens · 2 superficies · 3 base · 4 tipografía · 5 layout
          6 componentes · 7 módulos en vivo · 8 movimiento · 9 utilidades
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ──────────────────────────────────────────────────────────── */
:root{
  /* Escala de valor. Dos colores de marca (tinta y cantera) escalados por medición. */
  --ink-900:#0A0A0B;  --ink-850:#0F0F11;  --ink-800:#151517;
  --ink-750:#1B1B1E;  --ink-700:#232326;  --ink-600:#33333799;
  --paper-000:#FFFFFF; --paper-050:#F7F4EC; --paper-100:#F2EDE2; --paper-150:#E6DFD1;
  --gold-300:#E4DED1; --gold-400:#D3C9B5; --gold-500:#BDB09D;
  --gold-600:#9A8B75; --gold-700:#665C4E;

  /* Tipografía */
  --display:'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --sans:'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Escala tipográfica — fluida, atada a 390…1440 */
  --t-display-1: clamp(3.25rem, 1.60rem + 6.77vw, 7.00rem);
  --t-display-2: clamp(2.50rem, 1.45rem + 4.31vw, 4.88rem);
  --t-display-3: clamp(2.00rem, 1.45rem + 2.26vw, 3.25rem);
  --t-h3:        clamp(1.25rem, 1.12rem + 0.54vw, 1.50rem);
  --t-h4:        1.0625rem;
  --t-lede:      clamp(1.0625rem, 0.99rem + 0.31vw, 1.25rem);
  --t-body:      1.0625rem;
  --t-small:     0.9375rem;
  /* 11px. En un rótulo decorativo pasa; pero .eyebrow--mute lleva el AÑO y el
     GÉNERO de cada ficha —dato, no adorno— y a 11px en un móvil eso se lee
     mal. Sube a 12px por debajo de 760, donde importa. Se deja en 11 en
     escritorio: ahí la línea es más corta y el rótulo cumple su papel de
     antetítulo sin competir con el titular. */
  --t-eyebrow:   0.6875rem;

  /* Espacio — escala de 4 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px;
  --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;
  --section-y: clamp(64px, 8.5vw, 128px);
  --section-y-tight: clamp(44px, 5.5vw, 80px);

  /* Medidas */
  --page:1240px; --page-narrow:760px;
  --gutter: clamp(20px, 4.4vw, 64px);
  --measure:64ch;

  /* Radios — la esquina no decora. Medido en la referencia del usuario: 2px,
     y sólo en dos elementos de todo el sitio. La pastilla es lo contrario de
     la clase que se busca aquí. */
  --r-pill:2px; --r-card:2px; --r-media:2px; --r-input:2px; --r-chip:2px;

  /* Movimiento — un solo easing, tres duraciones. Presupuesto: 3 movimientos. */
  --ease: cubic-bezier(.2,.6,.2,1);          /* suave, sin rebote */
  --d1:200ms; --d2:250ms; --d3:600ms;

  /* Chrome */
  --nav-h:72px;
  --z-nav:900; --z-menu:950; --z-overlay:990; --z-modal:1000;
}

/* ── 2 · SUPERFICIES ─────────────────────────────────────────────────────────
   Toda zona declara data-surface. Los componentes NO conocen colores: sólo
   leen --fg/--bg/--rule/--accent/--btn-*. Por eso el botón se define UNA vez
   y funciona igual en zona clara, oscura o sobre fotografía.               */
[data-surface]{ background:var(--bg); color:var(--fg); }

[data-surface="ink"],
[data-surface="ink-2"],
[data-surface="image"]{
  --fg:var(--paper-100);
  /* Mismo criterio sobre tinta: mínimo que pasa 4.5:1 sobre #0A0A0B y #141416. */
  --fg-2:rgba(242,237,226,.76);
  --fg-3:rgba(242,237,226,.56);
  --rule:rgba(242,237,226,.13);
  --rule-2:rgba(242,237,226,.26);
  --accent:var(--gold-400);
  --field-bg:rgba(255,255,255,.045);
  --field-bd:rgba(242,237,226,.18);
  --veil:rgba(255,255,255,.05);
  --btn-solid-bg:var(--paper-100);  --btn-solid-fg:var(--ink-900);
  --btn-solid-bg-h:var(--paper-000);
  --focus:var(--gold-300);
}
/* Indicador «en vivo»: salmón sobre tinta (4.6:1 sobre #0A0A0B). */
[data-surface="ink"],[data-surface="ink-2"],[data-surface="image"]{
  --live:#E8776B; --live-bg:rgba(214,64,52,.14); }
[data-surface="ink"]  { --bg:var(--ink-900); }
[data-surface="ink-2"]{ --bg:var(--ink-800); }
/* Sobre fotografía el texto secundario sube de opacidad: .72/.54 no sobreviven
   a un fotograma claro por mucho velo que se le ponga. */
[data-surface="image"]{ --bg:transparent; --fg-2:rgba(242,237,226,.92); --fg-3:rgba(242,237,226,.84);
  /* Sobre fotografía el acento NO puede ser el dorado: a 11px es el eslabón
     débil de todo el hero. Ahí el rótulo va en hueso a opacidad plena. */
  --accent:var(--paper-100); }

[data-surface="paper"],
[data-surface="paper-2"],
[data-surface="paper-3"]{
  --fg:var(--ink-900);
  /* Los alfas NO son estéticos: son el mínimo que pasa 4.5:1 sobre los TRES
     fondos claros a la vez (blanco, #F7F4EC y la banda crema #F2EDE2).
     Calculado, no elegido: a .52 el micro-rótulo daba 3.83:1. */
  --fg-2:rgba(10,10,11,.74);
  --fg-3:rgba(10,10,11,.60);
  --rule:rgba(10,10,11,.12);
  --rule-2:rgba(10,10,11,.26);
  --accent:var(--gold-700);
  --field-bg:rgba(10,10,11,.03);
  --field-bd:rgba(10,10,11,.18);
  --veil:rgba(10,10,11,.04);
  --btn-solid-bg:var(--ink-900);    --btn-solid-fg:var(--paper-050);
  --btn-solid-bg-h:var(--ink-750);
  --focus:var(--gold-700);
}
/* Sobre papel el salmón daba 2.47:1 en el peor caso: mismo tono (6°),
   oscurecido hasta pasar en las tres superficies claras — 5.40 / 4.91 / 4.62. */
[data-surface="paper"],[data-surface="paper-2"],[data-surface="paper-3"]{
  --live:#B1493E; --live-bg:rgba(177,73,62,.10); }
[data-surface="paper"]  { --bg:var(--paper-000); }
[data-surface="paper-2"]{ --bg:var(--paper-050); }
[data-surface="paper-3"]{ --bg:var(--paper-100); }

/* ── 3 · BASE ────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0; background:var(--paper-000); color:var(--ink-900);
  font-family:var(--sans); font-size:var(--t-body); font-weight:400; line-height:1.7;
  letter-spacing:-.002em;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,video,svg,picture{ max-width:100%; display:block; }
picture{ width:100%; height:100%; }
img,video{ height:auto; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
:where(h1,h2,h3,h4,h5,h6){ margin:0; font-weight:600; }
:where(p,ul,ol,figure,blockquote){ margin:0; }
hr{ border:0; border-top:1px solid var(--rule); margin:0; }
:focus-visible{ outline:2px solid var(--focus); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--gold-500); color:var(--ink-900); }
.skip{ position:absolute; left:-9999px; top:0; z-index:1001; }
.skip:focus{ left:12px; top:12px; padding:12px 18px; background:var(--paper-100); color:var(--ink-900); border-radius:var(--r-input); font-weight:600; }

/* ── 4 · TIPOGRAFÍA ──────────────────────────────────────────────────────────
   Bodoni sólo ≥28px: por debajo sus astas finas se rompen fuera de macOS.  */
/* EL EJE ÓPTICO SE FIJA, NO SE DEJA EN «auto».
   Bodoni Moda variable con font-optical-sizing:auto lleva opsz a 96 en un
   titular grande — el corte de máximo contraste. Medido sobre el render:
   asta fina de 12.8‰ del cuerpo y contraste de 10×, contra los 24.2‰ y 5.0×
   de la referencia (que usa la Bodoni ESTÁTICA, de dibujo único).
   Con opsz fijo en 26 y peso 500 se mide 25.6‰ y 5.3×: el mismo dibujo.
   Fijarlo además hace que el titular se vea IGUAL a 26px que a 112px. */
.display-1,.display-2,.display-3,.display-4{
  font-family:var(--display); font-weight:500; font-style:normal;
  font-optical-sizing:none; font-variation-settings:"opsz" 26;
  text-wrap:balance; margin:0;
}
.display-1{ font-size:var(--t-display-1); line-height:.94; letter-spacing:-.022em; }
.display-2{ font-size:var(--t-display-2); line-height:1.02; letter-spacing:-.016em; }
.display-3{ font-size:var(--t-display-3); line-height:1.08; letter-spacing:-.012em; }
.display-4{ font-size:clamp(1.625rem,1.35rem + 1.1vw,2rem); line-height:1.14; letter-spacing:-.01em; }
/* En titulares NO va cursiva. La palabra de énfasis se distingue por color. */
.display-1 em,.display-2 em,.display-3 em,.display-4 em{ font-style:normal; font-weight:500; color:var(--accent); }

.h3{ font-family:var(--sans); font-size:var(--t-h3); font-weight:600; line-height:1.28; letter-spacing:-.012em; }
.h4{ font-family:var(--sans); font-size:var(--t-h4); font-weight:600; line-height:1.4; letter-spacing:-.006em; }

.eyebrow{
  display:block; font-family:var(--sans); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.055em; text-transform:uppercase; line-height:1.6; color:var(--accent);
}
.eyebrow--mute{ color:var(--fg-3); }

.lede{ font-size:var(--t-lede); line-height:1.6; color:var(--fg-2); max-width:56ch;
  letter-spacing:-.004em; text-wrap:pretty; }
.body{ color:var(--fg-2); max-width:var(--measure); text-wrap:pretty; }

/* Ritmo vertical automático: el aire entre rótulo, titular y entradilla lo pone
   el sistema. Ninguna página vuelve a escribir un margen para esto. */
:where(.eyebrow) + :where(.display-1,.display-2,.display-3,.h3){ margin-top:var(--s4); }
:where(.display-1,.display-2,.display-3) + :where(.lede,.body,.prose){ margin-top:var(--s6); }
:where(.h3,.h4) + :where(.lede,.body,.prose){ margin-top:var(--s4); }
:where(.lede) + :where(.body,.prose){ margin-top:var(--s5); }
:where(.lede,.body,.prose) + .btn-row{ margin-top:var(--s8); }
.small{ font-size:var(--t-small); line-height:1.6; color:var(--fg-3); }
.num{ font-variant-numeric:tabular-nums lining-nums; }

.prose{ max-width:var(--measure); color:var(--fg-2); }
.prose > * + *{ margin-top:1.15em; }
.prose h2{ font-family:var(--display); font-optical-sizing:none; font-variation-settings:"opsz" 26; font-weight:500;
  font-size:var(--t-display-3); line-height:1.1; letter-spacing:-.012em; color:var(--fg); margin-top:1.6em; }
.prose h3{ font-size:var(--t-h3); font-weight:600; color:var(--fg); margin-top:1.5em; letter-spacing:-.012em; }
.prose strong{ color:var(--fg); font-weight:600; }
.prose a:not(.btn){ color:var(--fg); text-decoration:underline; text-decoration-color:var(--gold-500);
  text-underline-offset:.22em; text-decoration-thickness:1px; }
.prose a:not(.btn):hover{ text-decoration-color:currentColor; }
.prose ul,.prose ol{ padding-left:1.15em; }
.prose li + li{ margin-top:.5em; }
.prose li::marker{ color:var(--gold-600); }

/* ── 5 · LAYOUT ──────────────────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:var(--page-narrow); }
.section{ padding-block:var(--section-y); }
.section--tight{ padding-block:var(--section-y-tight); }
.section--flush-top{ padding-top:0; }
.section--flush-bottom{ padding-bottom:0; }

/* Compuesto de sección: se repite literalmente en todo el sitio. */
/* El compuesto de sección abre con un filete que se traza al entrar en pantalla.
   Es el único gesto «de ingeniería» del sistema: una transformación de GPU,
   600 ms, el mismo easing que todo lo demás. Se desactiva con reduced-motion. */
.sec-head{ position:relative; display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s8); flex-wrap:wrap; margin-bottom:var(--s12); padding-top:var(--s6); }
.sec-head::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:var(--rule-2); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d3) var(--ease); }
.sec-head::before{ transform:scaleX(1); }
.reveal[data-in="false"] .sec-head::before,
.sec-head.reveal[data-in="false"]::before,
[data-in="false"] .sec-head::before{ transform:scaleX(0); }
/* El tope va en rem, no en ch: `ch` se resuelve contra la fuente del contenedor
   (Montserrat 17px), no contra el display — y dejaba los titulares en 4 líneas. */
.sec-head__text{ flex:1 1 min(100%, 26rem); max-width:min(100%, 46rem); }
.card--link{ text-decoration:none; color:inherit; }
.card--boxed.is-destacado{ border-color:var(--gold-600); }
/* Lista de beneficios: viñeta de acento, sin marcador del navegador. */
.lista-marcada{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.lista-marcada li{ display:flex; gap:10px; color:var(--fg-2); }
.lista-marcada li::before{ content:"·"; color:var(--accent); flex:none; }
/* Ficha de dos columnas: rótulo a la izquierda, dato a la derecha. */
.ficha{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--s3) var(--s8);
  padding-block:var(--s6); }
@media (max-width:520px){ .ficha{ grid-template-columns:1fr; gap:2px var(--s3); }
  .ficha > :nth-child(odd){ margin-top:var(--s4); } }
/* Encabezado de año en el archivo. */
.anio-head{ margin-bottom:var(--s8); border-top:1px solid var(--rule); padding-top:var(--s6); }
.stack--form{ max-width:min(100%, 32.5rem); }
.stack--center{ max-width:min(100%, 28.75rem); margin-inline:auto; text-align:left; }
.btn-row--center{ justify-content:center; }
.text-accent{ color:var(--accent); }
.sec-head > .link-arrow,.sec-head > .btn{ flex:0 0 auto; padding-bottom:.35em; }
.sec-head .eyebrow{ margin-bottom:var(--s4); }

.grid{ display:grid; gap:var(--s8); }
/* Los ítems de rejilla y de caja flexible traen min-width:auto, así que NO
   pueden encogerse por debajo del ancho mínimo de su contenido. Un <input>
   tiene un ancho intrínseco propio y por eso el formulario del boletín
   desbordaba 9px a 320px. Esta línea lo evita en todo el sistema. */
.grid > *,.btn-row > *,.stack > *{ min-width:0; }
.input,.select,.textarea{ min-width:0; }
.grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.grid--split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; }
@media (max-width:900px){
  .grid--3,.grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .grid--split{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .grid--2,.grid--3,.grid--4{ grid-template-columns:1fr; }
}
.stack > * + *{ margin-top:var(--s5); }
.stack--tight > * + *{ margin-top:var(--s3); }

/* ── 6 · COMPONENTES ─────────────────────────────────────────────────────── */

/* 6.1 BOTÓN — definido UNA vez. Los colores vienen de la superficie.
   Roles: (sin modificador)=primario · --secondary=contorno · --quiet=texto  */
.btn{
  --btn-bg:var(--btn-solid-bg); --btn-fg:var(--btn-solid-fg); --btn-bd:transparent;
  --btn-py:17px; --btn-px:30px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.875rem; font-weight:600; line-height:1;
  letter-spacing:.012em; text-transform:none; text-decoration:none; white-space:nowrap;
  padding:var(--btn-py) var(--btn-px); border-radius:var(--r-pill);
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  cursor:pointer; transition:background-color var(--d1) var(--ease), color var(--d1) var(--ease),
    border-color var(--d1) var(--ease), opacity var(--d1) var(--ease);
}
.btn:hover{ background:var(--btn-solid-bg-h); }
.btn:active{ opacity:.86; }
.btn[aria-disabled="true"],.btn:disabled{ opacity:.42; pointer-events:none; }
.btn svg{ width:1em; height:1em; flex:none; }

.btn--secondary{ --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--rule-2); }
.btn--secondary:hover{ background:var(--veil); border-color:var(--fg); }

.btn--quiet{ --btn-bg:transparent; --btn-bd:transparent; --btn-fg:var(--accent);
  --btn-px:0; --btn-py:8px; position:relative; }
.btn--quiet::after{ content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform var(--d2) var(--ease); }
.btn--quiet:hover{ background:transparent; }
.btn--quiet:hover::after{ transform:scaleX(1); }

.btn--sm{ --btn-py:12px; --btn-px:20px; font-size:.8125rem; }
.btn--lg{ --btn-py:20px; --btn-px:38px; font-size:.9375rem; }
.btn--block{ display:flex; width:100%; }

.btn-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); }
@media (max-width:520px){
  .btn-row--stack{ flex-direction:column; align-items:stretch; }
  .btn-row--stack .btn{ width:100%; }
}

/* Enlace-flecha: cuarto rol, sin caja. */
.link-arrow{ display:inline-flex; align-items:center; gap:10px; font-weight:600;
  font-size:.875rem; text-decoration:none; color:var(--fg); letter-spacing:.012em;
  padding-bottom:6px; position:relative; }
.link-arrow::before{ content:""; position:absolute; left:0; right:18px; bottom:0; height:1px;
  background:var(--rule-2); transform:scaleX(0); transform-origin:left;
  transition:transform var(--d2) var(--ease); }
.link-arrow:hover::before{ transform:scaleX(1); }
.link-arrow::after{ content:"→"; transition:transform var(--d2) var(--ease); color:var(--accent); }
.link-arrow:hover::after{ transform:translateX(4px); }

/* 6.2 MEDIA — proporción fija + gradación uniforme. Toda foto pasa por aquí. */
.media{ position:relative; display:block; overflow:hidden; border-radius:var(--r-media);
  background:var(--ink-800); aspect-ratio:3/2; }
.media > img,.media > video,.media picture > img{ width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(.94) contrast(1.04); }
.media--16x9{ aspect-ratio:16/9; } .media--4x3{ aspect-ratio:4/3; }
.media--3x2{ aspect-ratio:3/2; }
.media--1x1{ aspect-ratio:1/1; }   .media--4x5{ aspect-ratio:4/5; }
.media--3x4{ aspect-ratio:3/4; }   .media--free{ aspect-ratio:auto; }
/* Hueco cuando aún no hay fotografía de esa producción: marca de agua del
   emblema, nunca una caja vacía ni una foto prestada de otro año. */
.media__sin{ position:absolute; inset:0; background:
    radial-gradient(120% 90% at 50% 20%, rgba(189,176,157,.09), transparent 62%),
    var(--ink-750);
  display:grid; place-items:center; }
.media__sin::after{ content:""; width:44%; aspect-ratio:1; opacity:.16;
  background:url("/img/emblema.webp") center/contain no-repeat; }
/* Velo inferior calibrado: sólo donde va texto, nunca sobre toda la foto. */
.media--veiled::after{ content:""; position:absolute; inset:auto 0 0 0; height:62%;
  background:linear-gradient(to top, rgba(8,8,9,.86) 0%, rgba(8,8,9,.42) 46%, transparent 100%);
  pointer-events:none; }
.media__cap{ position:absolute; left:var(--s5); right:var(--s5); bottom:var(--s5); z-index:1;
  color:var(--paper-100); font-size:.8125rem; font-weight:600; letter-spacing:-.002em;
  text-shadow:0 1px 12px rgba(0,0,0,.5); }
.media__cap small{ display:block; font-size:.6875rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(242,237,226,.72); margin-top:3px; }

/* 6.3 CARD */
.card{ display:flex; flex-direction:column; gap:var(--s4); text-decoration:none; color:inherit; }
.card .media{ transition:transform var(--d3) var(--ease); }
.card .media img{ transition:opacity var(--d2) var(--ease), transform 900ms var(--ease); }
.card:hover .media img{ opacity:.86; }
.card__body{ display:flex; flex-direction:column; gap:6px; }
.card__title{ font-size:var(--t-h3); font-weight:600; line-height:1.25; letter-spacing:-.012em; color:var(--fg); }
.card__title--sm{ font-size:var(--t-h4); line-height:1.35; letter-spacing:-.008em; }
.card__meta{ font-size:.875rem; color:var(--fg-3); line-height:1.5; }
.card--boxed{ background:var(--veil); border:1px solid var(--rule); border-radius:var(--r-card);
  padding:var(--s6); gap:var(--s3); }
.card--boxed .media{ margin:calc(var(--s6) * -1) calc(var(--s6) * -1) 0;
  border-radius:var(--r-card) var(--r-card) 0 0; }

/* 6.4 CHIP */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-chip);
  background:var(--veil); border:1px solid var(--rule); font-size:.75rem; font-weight:600;
  letter-spacing:.02em; color:var(--fg-2); }
.chip--accent{ background:transparent; border-color:var(--gold-600); color:var(--accent); }
.chip--live{ border-color:transparent; background:var(--live-bg); color:var(--live); }
.chip--live::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--live);
  box-shadow:0 0 0 0 var(--live-bg); animation:opm-pulse 2s var(--ease) infinite; }
/* El color del indicador «en vivo» viaja en --live / --live-bg, definidos
   por superficie más abajo: una variable la resuelve el ancestro MÁS
   CERCANO, que es justo lo que hace falta cuando una sección de tinta va
   anidada dentro de un body en papel. Con un selector por descendencia
   ganaba el papel y el indicador salía a 3.67:1 sobre tinta. */

/* 6.5 CIFRAS */
.stat-row{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr));
  border-top:1px solid var(--rule); }
.stat{ padding:var(--s6) var(--s5) 0 0; border-right:1px solid var(--rule); }
.stat:last-child{ border-right:0; }
.stat__n--texto{ font-family:var(--sans); font-weight:600;
  font-size:clamp(1.375rem,1rem + 1.4vw,1.75rem); letter-spacing:-.014em; }
.stat__n{ display:block; font-family:var(--display); font-optical-sizing:none; font-variation-settings:"opsz" 26; font-weight:500;
  font-size:clamp(2.25rem,1.4rem + 3.4vw, 3.5rem); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums; color:var(--fg); }
.stat__n sup{ font-size:.42em; vertical-align:baseline; position:relative; top:-.9em; margin-left:.06em;
  font-weight:600; font-family:var(--sans); color:var(--accent); }
.stat__k{ display:block; margin-top:var(--s3); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.055em; text-transform:uppercase; color:var(--fg-3); }
@media (max-width:600px){ .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat{ border-bottom:1px solid var(--rule); padding-bottom:var(--s5); }
  .stat:nth-child(2n){ border-right:0; } }

/* 6.6 CITA */
.quote{ max-width:22ch; }
.quote__t{ font-family:var(--display); font-optical-sizing:none; font-variation-settings:"opsz" 26; font-weight:500; font-style:normal;
  font-size:var(--t-display-3); line-height:1.16; letter-spacing:-.012em; color:var(--fg); }
.quote__by{ display:block; margin-top:var(--s5); font-size:var(--t-eyebrow); font-weight:600;
  letter-spacing:.055em; text-transform:uppercase; color:var(--fg-3); }

/* 6.7 ACORDEÓN */
.acc{ border-top:1px solid var(--rule); }
.acc__item{ border-bottom:1px solid var(--rule); }
.acc__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  padding:var(--s6) 0; background:none; border:0; text-align:left; cursor:pointer;
  font-size:var(--t-h4); font-weight:600; letter-spacing:-.008em; color:var(--fg); }
.acc__btn::after{ content:""; flex:none; width:14px; height:14px; position:relative;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 100% no-repeat;
  color:var(--fg-3); transition:transform var(--d2) var(--ease); }
.acc__btn[aria-expanded="true"]::after{ transform:rotate(45deg); color:var(--accent); }
.acc__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--d2) var(--ease); }
.acc__btn[aria-expanded="true"] + .acc__panel{ grid-template-rows:1fr; }
.acc__panel > div{ overflow:hidden; }
.acc__panel .prose{ padding-bottom:var(--s6); }

/* 6.8 FORMULARIO */
.field{ display:block; }
.field + .field{ margin-top:var(--s5); }
.field__label{ display:block; font-size:.8125rem; font-weight:600; letter-spacing:-.002em;
  color:var(--fg-2); margin-bottom:var(--s2); }
.field__hint{ display:block; margin-top:6px; font-size:.8125rem; color:var(--fg-3); }
.input,.select,.textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-input);
  background:var(--field-bg); border:1px solid var(--field-bd); color:var(--fg);
  font-size:var(--t-body); line-height:1.4; letter-spacing:-.002em;
  transition:border-color var(--d1) var(--ease), background-color var(--d1) var(--ease);
}
.input::placeholder,.textarea::placeholder{ color:var(--fg-3); }
.input:hover,.select:hover,.textarea:hover{ border-color:var(--rule-2); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--accent); background:var(--veil); }
.textarea{ min-height:120px; resize:vertical; }
/* select con cheurón propio — nunca el del sistema operativo */
.select{ appearance:none; padding-right:44px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) calc(50% + 1px), calc(100% - 16px) calc(50% + 1px);
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.select option{ background:var(--ink-800); color:var(--paper-100); }
[data-surface^="paper"] .select option{ background:var(--paper-000); color:var(--ink-900); }
.check{ display:flex; gap:var(--s3); align-items:flex-start; font-size:.875rem; color:var(--fg-2); cursor:pointer; }
.check input{ margin-top:3px; accent-color:var(--gold-600); width:16px; height:16px; flex:none; }
.form-note{ font-size:.8125rem; color:var(--fg-3); }
.form-error{ font-size:.875rem; color:#E8776B; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* 6.9 TABS */
.tabs{ display:inline-flex; padding:4px; gap:4px; border-radius:var(--r-pill);
  background:var(--veil); border:1px solid var(--rule); }
.tab{ padding:9px 18px; border-radius:var(--r-pill); border:0; background:transparent;
  font-size:.875rem; font-weight:600; color:var(--fg-3); cursor:pointer;
  transition:background-color var(--d1) var(--ease), color var(--d1) var(--ease); }
.tab[aria-selected="true"]{ background:var(--btn-solid-bg); color:var(--btn-solid-fg); }

/* 6.10 MIGA */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:.8125rem;
  font-weight:600; color:var(--fg-3); }
/* La miga son enlaces de navegación sueltos, no texto corrido: WCAG 2.2 les
   exige 24x24 y medían 36x22 en móvil. Se les da altura con padding vertical,
   sin mover el filete de la franja ni separar los renglones. */
.crumb a{ text-decoration:none; display:inline-flex; align-items:center;
  min-height:24px; padding-block:2px; }
.crumb a:hover{ color:var(--fg); }
@media (pointer:coarse){
  /* Con el dedo, el cómodo son 44. La franja crece lo justo y no se nota. */
  .crumb a{ min-height:32px; }
}
.crumb li{ display:flex; align-items:center; gap:8px; list-style:none; }
.crumb li + li::before{ content:"›"; color:var(--fg-3); opacity:.6; }
.crumb ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }

/* 6.11 HERO */
.hero{ position:relative; display:flex; align-items:flex-end;
  /* El suelo de 600px evita que en una ventana ancha y baja el hero quede en
     franja de 3:1 y la fotografía se recorte a una tira. */
  min-height:max(600px, min(82svh, 820px));
  padding-block:var(--s20) var(--s16); overflow:hidden; isolation:isolate; }
.hero--short{ min-height:min(64svh,560px); }
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; }
.hero__media picture{ display:block; width:100%; height:100%; }
/* Velo del hero — la fuerza NO se elige a ojo: la calcula tools/veil.py sobre
   la fotografía concreta y se inyecta como --veil-o en el propio hero.
   Sin dato medido cae en .58, que es el peor caso observado del archivo. */
.hero__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  --veil-o:.58;
  /* El degradado lateral se ancla al CONTENIDO, no al viewport.
     Con paradas en % el texto —que vive dentro de un contenedor centrado de
     1240px— se corre a la derecha al ensanchar la ventana y cae en la zona
     clara: medido, a 2000px dos láminas perdían el contraste que sí tenían a
     1440. Con --wrap-x el velo viaja con el texto a cualquier ancho.
     Ocho paradas y final en el borde: con pocas se ven mesetas y el canto. */
  --wrap-x: max(var(--gutter), calc(50% - var(--page) / 2 + var(--gutter)));
  background:
    linear-gradient(to right,
      rgb(8 8 9 / calc(var(--veil-o) * 100%)) 0,
      rgb(8 8 9 / calc(var(--veil-o) *  98%)) calc(var(--wrap-x) * .6),
      rgb(8 8 9 / calc(var(--veil-o) *  92%)) calc(var(--wrap-x) + 16rem),
      rgb(8 8 9 / calc(var(--veil-o) *  78%)) calc(var(--wrap-x) + 28rem),
      rgb(8 8 9 / calc(var(--veil-o) *  56%)) calc(var(--wrap-x) + 38rem),
      rgb(8 8 9 / calc(var(--veil-o) *  32%)) calc(var(--wrap-x) + 48rem),
      rgb(8 8 9 / calc(var(--veil-o) *  14%)) calc(var(--wrap-x) + 58rem),
      rgb(8 8 9 / 0%)                          calc(var(--wrap-x) + 70rem)),
    /* La base vertical se mantiene UNIFORME a lo alto del bloque de texto y
       sólo cae en el 20 % superior. Antes se debilitaba del 34 % al 16 % justo
       donde vive el rótulo, y ése quedaba a 4.4:1 obligando a subir el velo
       lateral a 0.98 —que deja la fotografía en negro— para salvar 11px de
       texto. Repartir es mejor que apretar. */
    linear-gradient(to top,
      rgb(8 8 9 / calc(var(--veil-o) * 38%))  0%,
      rgb(8 8 9 / calc(var(--veil-o) * 38%)) 74%,
      rgb(8 8 9 / calc(var(--veil-o) * 20%)) 88%,
      rgb(8 8 9 / calc(var(--veil-o) *  6%)) 100%),
    linear-gradient(to bottom, rgb(8 8 9 / 26%) 0%, rgb(8 8 9 / 0%) 20%); }
@media (max-width:760px){
  /* En móvil el texto ocupa el ancho completo: el eje lateral no aplica y el
     degradado es vertical. Por eso NO puede reutilizar el mismo valor que en
     escritorio: allí el .88 sólo oscurece el tercio izquierdo, aquí oscurecería
     la fotografía entera. Cada lámina trae su propio --veil-m medido a 360/390/430.
     Y la fuerza plena llega sólo hasta el 56 %, no hasta el 72 %: por encima de
     eso ya no hay texto y la foto necesita respirar. */
  /* Medido: en móvil el bloque de texto ocupa del 5 % al 84 % del alto del
     hero (rótulo, titular a dos líneas, entradilla a cuatro y dos botones
     apilados a ancho completo). La banda plena tiene que cubrir eso: antes
     llegaba al 44 % y el rótulo se quedaba a 2.6:1 por mucho velo que se
     pusiera. La foto respira en el 14 % de arriba. */
  .hero__veil{ background:
    linear-gradient(to top,
      rgb(8 8 9 / calc(var(--veil-m, var(--veil-o)) * 100%))  0%,
      rgb(8 8 9 / calc(var(--veil-m, var(--veil-o)) *  98%)) 70%,
      rgb(8 8 9 / calc(var(--veil-m, var(--veil-o)) *  92%)) 86%,
      rgb(8 8 9 / calc(var(--veil-m, var(--veil-o)) *  56%)) 93%,
      rgb(8 8 9 / calc(var(--veil-m, var(--veil-o)) *  22%)) 100%),
    linear-gradient(to bottom, rgb(8 8 9 / 30%) 0%, rgb(8 8 9 / 0%) 14%); }
}
}
.hero__inner{ position:relative; width:100%; }
.hero__inner > *{ max-width:min(100%, 44rem); }
.hero .lede{ max-width:min(100%, 34rem); }
.hero .display-1,.hero .display-2{ text-shadow:0 2px 40px rgba(0,0,0,.32); }
.hero .lede{ margin-top:var(--s6); }
.hero .btn-row{ margin-top:var(--s8); }

/* Franja de ruta: sólida, con filete inferior. Nunca sobre fotografía. */
.crumbbar{ border-bottom:1px solid var(--rule); }
.crumbbar .wrap{ padding-block:var(--s4); }
.crumbbar .crumb{ margin:0; }

/* 6.11b HERO PARTIDO — el patrón por defecto cuando la fotografía NO aguanta
   texto encima (lo dictamina tools/hero-fit.py, no el gusto). El titular vive
   sobre superficie sólida: contraste garantizado y lectura más institucional. */
.hero--split{ min-height:0; padding:0; display:grid; align-items:stretch;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
.hero--split .hero__panel{ display:flex; flex-direction:column; justify-content:center;
  padding:clamp(56px,7vw,104px) clamp(28px,5vw,88px);
  /* En un hero partido el texto vive en el PANEL, no en .hero__inner — y la
     regla que lo sube por encima del slider apuntaba sólo a .hero__inner. Sin
     posición ni z-index aquí, el slider (absolute, inset:0) se pintaba encima
     y en /producciones/ el titular no se veía a NINGÚN ancho. */
  position:relative; z-index:2; }
.hero--split .hero__media{ position:relative; inset:auto; z-index:0; min-height:clamp(320px,46vw,620px); }
.hero--split .hero__veil{ display:none; }
/* ── Hero partido CON slider ────────────────────────────────────────────────
   El slider vive en `position:absolute; inset:0` porque en un hero a sangre
   debe cubrirlo entero. En un hero PARTIDO eso significa que también cubre el
   panel de texto: en /producciones/ el titular quedaba en tinta sobre la
   fotografía, ilegible a TODOS los anchos. (Antes ni se veía: el panel era
   estático y el slider lo tapaba del todo.)
   Aquí el slider deja de ser absoluto y pasa a ocupar SU columna de la
   rejilla; en móvil, su propia fila encima del panel. */
.hero--split.hero--slider{ position:relative; }
.hero--split.hero--slider .slider{
  position:relative; inset:auto; grid-column:2; grid-row:1; z-index:0;
  min-height:clamp(320px,46vw,620px); }
.hero--split.hero--slider .hero__panel{
  grid-column:1; grid-row:1; z-index:2; background:var(--bg); }
@media (max-width:880px){
  .hero--split.hero--slider .slider{
    grid-column:1; grid-row:1; min-height:0; aspect-ratio:16/10; }
  .hero--split.hero--slider .hero__panel{ grid-column:1; grid-row:2; }
}
.hero--split .lede{ margin-top:var(--s5); }
.hero--split .btn-row{ margin-top:var(--s8); }
@media (max-width:880px){
  .hero--split{ grid-template-columns:1fr; }
  .hero--split .hero__media{ order:-1; min-height:0; aspect-ratio:16/10; }
  .hero--split .hero__panel{ padding-top:clamp(40px,7vw,64px); }
}

/* 6.12 BANDA CTA */
.cta-band{ text-align:center; }
.cta-band .display-2{ max-width:18ch; margin-inline:auto; }
.cta-band .lede{ margin:var(--s5) auto 0; text-align:center; }
.cta-band .btn-row{ justify-content:center; margin-top:var(--s8); }

/* 6.13 NAV
   UNA sola barra: sólida, clara, con filete inferior — y el contenido empieza
   debajo. Se probó la barra transparente sobre el hero y los rótulos caían a
   1.0–1.65:1 sobre las zonas claras de la fotografía; ningún velo razonable lo
   arregla sin apagar la foto. La barra sólida elimina la clase entera de
   riesgo y además es la forma institucional. */
body{ padding-top:var(--nav-h); }
.nav{ position:fixed; inset:0 0 auto 0; z-index:var(--z-nav); height:var(--nav-h);
  display:flex; align-items:center;
  background:var(--paper-000); color:var(--ink-900);
  --fg:var(--ink-900); --rule:rgba(10,10,11,.10); --rule-2:rgba(10,10,11,.20);
  border-bottom:1px solid rgba(10,10,11,.10);
  transition:box-shadow var(--d2) var(--ease); }
.nav[data-scrolled="true"]{ box-shadow:0 1px 0 rgba(10,10,11,.05), 0 10px 24px -22px rgba(10,10,11,.30); }
.nav__in{ width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter);
  display:flex; align-items:center; gap:var(--s6); }
/*    toma de la superficie, nunca lo clava. */
/* ── LOGOTIPO ─────────────────────────────────────────────────────────────
   Sistema de DOS piezas, como la referencia del cliente: un logotipo
   tipográfico para la cabecera y un monograma en disco para favicon y avatar.
   Medido: el emblema anterior a 34px era un borrón —el rostro y las letras que
   lleva dentro no se distinguen— y a 16px un anillo irreconocible.
   El logotipo se compone con las tipografías del propio sitio, así que marca y
   texto quedan cortados por la misma tijera. */
.marca{ display:inline-flex; align-items:center; gap:13px; line-height:1;
  text-decoration:none; color:var(--fg);
  margin-right:auto; --marca:19px; white-space:nowrap;
  /* El relleno vertical sólo agranda el área de toque: la barra centra su
     contenido, así que el logotipo no se mueve un píxel. */
  padding-block:9px; }
.marca__n{ display:block; font-family:var(--display);
  font-optical-sizing:none; font-variation-settings:"opsz" 26; font-weight:500;
  font-size:var(--marca); letter-spacing:.26em; text-indent:.26em; }
.marca__c{ display:block; font-family:var(--sans); font-weight:400;
  font-size:calc(var(--marca) * .40); letter-spacing:.34em; text-indent:.34em;
  margin-top:calc(var(--marca) * .27); color:var(--fg-2); }
.marca__i{ flex:none; width:calc(var(--marca) * 2.05); height:calc(var(--marca) * 2.05); display:block; }
/* Sobre superficie oscura el emblema va en hueso; sobre clara, en dorado
   oscuro. El archivo original NO servía para fondo blanco: traía el disco
   #181819 incrustado —incluida la versión llamada «transparente», con un
   0.1 % de píxeles transparentes— y sobre blanco aparecía como una moneda
   negra. Ninguna de las cinco versiones del cliente era la de fondo claro. */
.marca__i--claro{ display:block; }
.marca__i--oscuro{ display:none; }
[data-surface="ink"] .marca__i--claro,[data-surface="ink-2"] .marca__i--claro{ display:none; }
[data-surface="ink"] .marca__i--oscuro,[data-surface="ink-2"] .marca__i--oscuro{ display:block; }
.marca--pie{ --marca:22px; margin-right:0; }
@media (max-width:520px){ .marca{ --marca:16px; } }
@media (max-width:359px){ .marca__c{ font-size:calc(var(--marca) * .38); letter-spacing:.24em; text-indent:.24em; } }

.nav__links{ display:flex; align-items:center; gap:2px; }
.nav__link{ position:relative; padding:9px 14px; border-radius:var(--r-pill); text-decoration:none;
  font-size:.875rem; font-weight:600; letter-spacing:.006em; color:rgba(10,10,11,.70);
  transition:color var(--d1) var(--ease), background-color var(--d1) var(--ease); }
.nav__link:hover{ color:var(--ink-900); background:rgba(10,10,11,.05); }
.nav__link[aria-current]{ color:var(--ink-900); }
.nav__link[aria-current]::after{ content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:1px; background:var(--gold-600); }
.nav__actions{ display:flex; align-items:center; gap:var(--s2); }
.nav .btn{ --btn-solid-bg:var(--ink-900); --btn-solid-fg:var(--paper-050); --btn-solid-bg-h:var(--ink-750); }
.nav .btn--secondary{ --btn-bg:transparent; --btn-fg:var(--ink-900); --btn-bd:var(--rule-2); }
.nav__burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:0; cursor:pointer; border-radius:var(--r-pill); }
.nav__burger span{ display:block; width:19px; height:1.5px; background:var(--ink-900); position:relative; }
.nav__burger span::before,.nav__burger span::after{ content:""; position:absolute; left:0; width:19px;
  height:1.5px; background:var(--ink-900); transition:transform var(--d2) var(--ease); }
.nav__burger span::before{ top:-6px; } .nav__burger span::after{ top:6px; }
.nav__burger[aria-expanded="true"] span{ background:transparent; }
.nav__burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg); }
@media (max-width:1000px){
  .nav__links,.nav__actions .btn--secondary{ display:none; }
  .nav__burger{ display:flex; }
}
.menu{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:var(--z-menu);
  background:var(--paper-000); color:var(--ink-900);
  --fg:var(--ink-900); --rule:rgba(10,10,11,.10); --rule-2:rgba(10,10,11,.20);
  padding:var(--s8) var(--gutter) var(--s16); overflow-y:auto;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity var(--d2) var(--ease), transform var(--d2) var(--ease), visibility var(--d2); }
.menu[data-open="true"]{ opacity:1; visibility:visible; transform:none; }
/* Sólo los enlaces de navegación del cajón van en display. Sin :not() los
   botones heredaban Bodoni de 28px y dejaban de ser botones. */
.menu a:not(.btn){ display:block; padding:var(--s4) 0; border-bottom:1px solid rgba(10,10,11,.10);
  text-decoration:none; font-family:var(--display); font-optical-sizing:none; font-variation-settings:"opsz" 26; font-weight:500;
  font-size:1.75rem; letter-spacing:-.014em; color:var(--ink-900); }
.menu .btn{ --btn-solid-bg:var(--ink-900); --btn-solid-fg:var(--paper-050); --btn-solid-bg-h:var(--ink-750); }
.menu .btn--secondary{ --btn-bg:transparent; --btn-fg:var(--ink-900); --btn-bd:var(--rule-2); }
.menu .btn-row{ margin-top:var(--s8); }
/* En pantallas bajas (360x640 y parecidas) el menú no cabía y los CTA se iban
   por debajo del pliegue. Se compacta con tipografía y aire, no quitando
   entradas: 804px de contenido → 596px, que sí entra. */
@media (max-height:720px){
  .menu{ padding-block:var(--s5) var(--s10); }
  .menu a:not(.btn){ padding:11px 0; font-size:1.375rem; }
  .menu .btn-row{ margin-top:var(--s6); }
  .menu .btn{ --btn-py:14px; }
}
body[data-menu="open"]{ overflow:hidden; }


/* ── 6.13b MEGAMENÚ ───────────────────────────────────────────────────────
   Panel a todo el ancho colgado de la barra. No es un desplegable flotante:
   es una hoja del sitio que baja, con la misma retícula y los mismos tokens.
   Se abre con intención (retardo al entrar, gracia al salir) para que no
   salte al pasar el cursor de camino a otro rótulo.                        */
.mega{
  position:fixed; left:0; right:0; top:var(--nav-h); z-index:calc(var(--z-nav) - 1);
  background:var(--paper-000);
  border-bottom:1px solid var(--rule);
  box-shadow:0 12px 28px -22px rgba(10,10,11,.28);
  opacity:0; transform:translateY(-8px);
  transition:opacity var(--d2) var(--ease), transform var(--d2) var(--ease);
}
.mega[data-open="true"]{ opacity:1; transform:none; }
.mega__in{
  display:grid; grid-template-columns:minmax(0,1.15fr) repeat(2,minmax(0,1fr)) 260px;
  gap:clamp(28px,3.4vw,56px); padding-block:clamp(32px,3.4vw,52px); align-items:start;
}
.mega__intro .body{ max-width:34ch; }
.mega__col{ min-width:0; }
.mega__k{ font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.055em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s4); }
.mega__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.mega__list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4);
  padding:7px 0; text-decoration:none; color:var(--fg-2);
  font-size:.9375rem; font-weight:600; letter-spacing:.004em;
  border-bottom:1px solid transparent;
  transition:color var(--d1) var(--ease), border-color var(--d1) var(--ease);
}
.mega__list a:hover{ color:var(--fg); border-bottom-color:var(--rule-2); }
.mega__n{ font-size:.75rem; font-weight:600; color:var(--fg-3);
  font-variant-numeric:tabular-nums; }
.mega__dest{ display:grid; gap:10px; text-decoration:none; color:inherit; }
.mega__dest .media img{ transition:opacity var(--d2) var(--ease); }
.mega__dest:hover .media img{ opacity:.86; }
.mega__dest-t{ font-size:.9375rem; font-weight:600; color:var(--fg); letter-spacing:-.006em; }
.mega__dest-s{ font-size:.8125rem; color:var(--fg-3); line-height:1.45; }
/* Velo bajo el panel: apaga la página sin taparla, y cierra al pulsarlo. */
.mega__velo{ position:fixed; inset:var(--nav-h) 0 0 0; z-index:calc(var(--z-nav) - 2);
  background:rgba(10,10,11,.26); opacity:0; transition:opacity var(--d2) var(--ease); }
.mega__velo[data-open="true"]{ opacity:1; }
.nav__link--mega[aria-expanded="true"]{ color:var(--nav-fg); background:var(--nav-hover); }
@media (max-width:1100px){
  .mega__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mega__dest{ display:none; }
}
@media (max-width:1000px){ .mega,.mega__velo{ display:none !important; } }

/* 6.14 FOOTER */
.footer{ padding-block:var(--s20) var(--s10); border-top:1px solid var(--rule); }
.footer__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr));
  gap:clamp(32px,5vw,72px); }
@media (max-width:820px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer__grid{ grid-template-columns:1fr; } }
.footer__k{ font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.055em;
  text-transform:uppercase; color:var(--fg-3); margin-bottom:var(--s5); }
.footer__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); }
.footer__list a{ display:inline-block; text-decoration:none; color:var(--fg-2);
  font-size:.9375rem; transition:color var(--d1) var(--ease); }
@media (max-width:760px){
  /* Con el dedo, 19px de alto no basta. Se gana altura con relleno, no con
     tipografía más grande. */
  .footer__list{ gap:0; }
  .footer__list a{ padding-block:9px; }
  .footer__bot a{ display:inline-block; padding-block:6px; }
}
.footer__list a:hover{ color:var(--fg); }
.footer__bot{ display:flex; flex-wrap:wrap; gap:var(--s4) var(--s8); justify-content:space-between;
  margin-top:var(--s16); padding-top:var(--s6); border-top:1px solid var(--rule);
  font-size:.8125rem; color:var(--fg-3); }
.footer__bot a{ color:var(--fg-2); text-decoration:underline; text-decoration-color:var(--rule-2);
  text-underline-offset:.2em; }
.footer__bot a:hover{ text-decoration-color:currentColor; }
.social{ display:flex; gap:var(--s2); margin-top:var(--s6); }
.social a{ width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--rule); color:var(--fg-2);
  transition:color var(--d1) var(--ease), border-color var(--d1) var(--ease), background-color var(--d1) var(--ease); }
.social a:hover{ color:var(--fg); border-color:var(--fg); background:var(--veil); }
.social svg{ width:17px; height:17px; }


/* ── 6.15 SLIDER ──────────────────────────────────────────────────────────
   Mecánica portada del carrusel de alphayachts.elevnfoundry.com: carril de
   desplazamiento NATIVO con imán de ajuste, no una biblioteca. Pesa cero KB
   de más, el táctil conserva la inercia del sistema y funciona sin JS
   (queda como una tira que se arrastra).
   Lo que se adapta: la piel — tokens de Ópera, no los de Alpha.            */
.slider{ position:relative; isolation:isolate; }
/* Resguardo inferior: el rótulo, el contador y los filetes viven aquí y la
   fotografía de abajo puede ser cualquier cosa. Medido sobre un fotograma
   claro daban 1.07:1. El degradado cubre sólo la franja de los controles —
   no la fotografía — y va DEBAJO de ellos. */
.slider::after{
  content:""; position:absolute; inset:auto 0 0 0; height:32%; z-index:2;
  pointer-events:none;
  background:linear-gradient(to top, rgb(8 8 9 / 74%) 0%, rgb(8 8 9 / 40%) 46%, rgb(8 8 9 / 0%) 100%);
}
.slider__marcas,.slider__cuenta,.slider__pie,.slider__nav{ z-index:4; }
.slider__carril{
  display:flex; flex-direction:row; height:100%;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.slider__carril::-webkit-scrollbar{ display:none; }
.slider__carril.is-arrastrando{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.slider__carril img{ -webkit-user-drag:none; }
.slider__lam{
  position:relative; flex:0 0 100%; width:100%; height:100%;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.slider__lam img,.slider__lam picture{ width:100%; height:100%; object-fit:cover; display:block; }

/* Flechas: el cheurón se dibuja con dos filetes de 1px girados. Sin icono,
   sin SVG, sin fuente de símbolos. */
.slider__nav{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:56px; height:56px; border:0; background:none; cursor:pointer;
  /* .72 daba 2.68:1 sobre la lámina más clara. */
  opacity:.92; transition:opacity var(--d2) var(--ease);
  filter:drop-shadow(0 1px 4px rgb(8 8 9 / .55));
}
.slider__nav:hover{ opacity:1; }
.slider__nav::before{
  content:""; position:absolute; top:50%; left:50%; width:15px; height:15px;
  border-left:1px solid var(--paper-100); border-bottom:1px solid var(--paper-100);
}
.slider__nav--ant{ left:12px; }
.slider__nav--sig{ right:12px; }
.slider__nav--ant::before{ transform:translate(-40%,-50%) rotate(45deg); }
.slider__nav--sig::before{ transform:translate(-60%,-50%) rotate(-135deg); }
@media (max-width:760px){ .slider__nav{ width:44px; height:44px; } }
/* El burger medía 42x42: dos píxeles por debajo del objetivo cómodo, y es el
   único acceso a la navegación en móvil. */
.nav__burger{ width:44px; height:44px; }

/* Filete en lugar de punto: la lámina activa se rellena de izquierda a
   derecha. El gesto dice AVANCE, que es lo que un punto no sabe decir.
   La base va en TINTA, no en blanco translúcido: sobre una fotografía clara
   el blanco converge a blanco y el filete activo deja de distinguirse. */
.slider__marcas{
  position:absolute; left:0; right:0; bottom:26px; z-index:3;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center;
  padding-inline:20px; box-sizing:border-box;
}
.slider__marca{
  /* El TRAZO son 2px, pero el objetivo de pulsación no puede serlo: en móvil
     medía 20x2, por debajo del mínimo de 24x24. El botón crece a 34x26 y el
     filete se dibuja centrado con pseudos — si el alto viviera en el botón,
     en móvil se vería un bloque en vez de un filete. */
  position:relative; width:34px; height:26px; padding:0; border:0; border-radius:0;
  background:none; cursor:pointer;
}
.slider__marca::before,.slider__marca::after{
  content:""; position:absolute; left:0; right:0; top:50%; height:2px; margin-top:-1px;
}
/* .55 sobre fotografía clara es un fantasma. El filete es el único indicio de
   cuántas láminas hay y en cuál estás: tiene que verse siempre. */
.slider__marca::before{ background:rgba(242,237,226,.78);
  transition:background-color var(--d2) var(--ease); }
.slider__marca:hover::before{ background:rgba(242,237,226,1); }
.slider__marca:focus-visible{ outline:1px solid var(--paper-100); outline-offset:2px; }
.slider__marca::after{ background:var(--paper-100); transform:scaleX(0); transform-origin:left center; }
.slider__marca[aria-current="true"]::after{ transform:scaleX(1); }
@media (max-width:760px){
  :root{ --t-eyebrow:0.75rem; }
  .slider__marcas{ bottom:18px; gap:7px; }
  /* 26x28 pasa el mínimo de WCAG (24x24) pero es poco para un pulgar, y estas
     marcas son la única forma de saltar de lámina sin arrastrar. El objetivo
     crece a 44x44 —el cómodo— SIN tocar el filete, que se sigue dibujando con
     los pseudos a su ancho real. Caben: 4 marcas x 44 + 3 huecos x 7 = 197px
     en una ventana de 320. */
  /* El objetivo cómodo son 44, pero una ficha con SIETE láminas no cabe en
     320 px (7x44 + 6x7 = 350) y las marcas saltaban a una segunda fila SOBRE
     la fotografía. Se reparten el ancho disponible: crecen hasta 44 cuando
     sobra sitio y se encogen hasta 26 —el mínimo de WCAG con holgura— cuando
     hay muchas. El trazo visible se dibuja con los pseudos, así que no cambia
     de grosor al estrecharse. */
  .slider__marcas{ flex-wrap:nowrap; }
  .slider__marca{ flex:1 1 26px; min-width:26px; max-width:44px; width:auto; height:44px; }
  .slider__marca::before,.slider__marca::after{ left:4px; right:4px; }
}

/* Con avance solo, el filete activo deja de anunciar el cambio y pasa a ser
   la CUENTA ATRÁS: se llena durante los segundos que la lámina está a la
   vista, y se CONGELA con el reloj — misma pausa, mismo punto — así que
   nunca promete un cambio que no va a llegar. Es transform sobre un pseudo:
   lo compone la GPU y no repinta. */
.slider.is-auto .slider__marca[aria-current="true"]::after{
  animation:opm-cuenta var(--dur,6000ms) linear forwards;
  animation-play-state:var(--estado,running);
}
@keyframes opm-cuenta{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* Contador numérico: dice el recorrido, que es lo que el filete no dice. */
.slider__cuenta{
  position:absolute; right:20px; bottom:18px; z-index:3;
  font-size:.8125rem; font-weight:600; color:var(--paper-100);
  letter-spacing:.06em; font-variant-numeric:tabular-nums lining-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
@media (max-width:760px){ .slider__cuenta{ display:none; } }

/* Rótulo de la lámina: qué producción y de qué año. */
.slider__pie{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:0 20px 52px; pointer-events:none;
  display:flex; justify-content:flex-end;
}
.slider__pie span{
  font-size:.75rem; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:rgba(242,237,226,.86); text-shadow:0 1px 8px rgba(0,0,0,.6);
}
@media (max-width:760px){ .slider__pie{ display:none; } }

/* Galería: el carril toma la proporción de la fotografía, no al revés. */
.slider--galeria{ aspect-ratio:16/10; background:var(--ink-800); }
.slider--galeria .slider__carril{ position:absolute; inset:0; }

@media (max-width:760px){ .slider--galeria{ aspect-ratio:4/3; } }

/* ── HERO A SANGRE CON SLIDER ────────────────────────────────────────────
   El carril va al fondo, el velo encima y el texto sobre los dos. Cada lámina
   trae su propio velo medido: una foto de telón rojo y una de escena azul no
   piden lo mismo, y el JS lo cambia al pasar de lámina.
   Los controles viven abajo a la DERECHA para no chocar con el texto, que
   vive abajo a la izquierda. */
/* El slider NO puede ir en z-index negativo: ahí queda detrás del fondo del
   hero y el puntero nunca lo alcanza — el arrastre con ratón dejaba de
   funcionar. Va en el flujo normal del hero, con el velo encima (que no
   recibe puntero) y el texto sobre los dos. */
.hero--slider .slider{ position:absolute; inset:0; z-index:0; isolation:auto; }
.hero--slider .slider__carril{ position:absolute; inset:0; height:100%; z-index:0; }
.hero--slider .hero__veil{ z-index:1; }
.hero--slider .hero__inner{ position:relative; z-index:2; pointer-events:none; }
.hero--slider .hero__inner a,.hero--slider .hero__inner button{ pointer-events:auto; }
/* El resguardo del slider sobra aquí: el velo del hero ya cubre esa franja y
   sumarlos apagaría la fotografía dos veces. */
.hero--slider .slider::after{ display:none; }
/* Los controles van a la IZQUIERDA, alineados con el texto. Dos razones
   medidas: es la zona que el velo lateral deja más oscura —el mejor contraste
   del cuadro— y las esquinas inferiores derechas de este archivo llevan firmas
   de fotógrafo con las que chocaban. */
.hero--slider .slider__mandos{
  position:absolute; left:0; right:0; bottom:34px; z-index:3;
  display:flex; align-items:center; gap:var(--s5);
  width:100%; max-width:var(--page); margin-inline:auto; padding-inline:var(--gutter);
  /* La fila ocupa todo el ancho y se pinta después que las flechas: sin esto
     les robaba el clic. Sólo los filetes reciben puntero. */
  pointer-events:none;
}
.hero--slider .slider__mandos .slider__marca{ pointer-events:auto; }
/* Resguardo de la fila de mandos. Va A SANGRE con 100vw: antes heredaba el
   max-width del contenedor (1240 px) y a 2000 px dejaba dos cantos verticales
   perfectamente visibles — el rectángulo gris que se veía sobre la foto. */
.hero--slider .slider__mandos::before{
  content:""; position:absolute; left:50%; translate:-50% 0; width:100vw;
  top:-22px; bottom:-34px; z-index:-1; pointer-events:none;
  /* Era 58/34/12 y los mandos desaparecían: el velo del hero es MÁS DÉBIL
     abajo (38 % de su opacidad hasta el 74 % de la altura) y ahí es justo
     donde viven los controles. La suposición de que «el velo ya cubre esa
     franja» era falsa — medido sobre las cuatro láminas. */
  background:linear-gradient(to top, rgb(8 8 9 / 82%) 0%, rgb(8 8 9 / 56%) 46%,
    rgb(8 8 9 / 22%) 78%, rgb(8 8 9 / 0%) 100%);
}
.hero--slider .slider__marcas{ position:static; padding:0; width:auto;
  justify-content:flex-start; flex:0 0 auto; }
.hero--slider .slider__cuenta{ position:static; flex:0 0 auto; }
.hero--slider .slider__pie{ position:static; flex:1 1 auto; padding:0;
  justify-content:flex-start; min-width:0; }
.hero--slider .slider__pie span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hero--slider .slider__nav{ top:auto; bottom:26px; translate:0 0; width:40px; height:40px; z-index:3; }
.hero--slider .slider__nav--ant{ left:auto; right:calc(var(--gutter) + 44px); }
.hero--slider .slider__nav--sig{ right:var(--gutter); }
.hero--slider .hero__inner{ padding-bottom:var(--s16); }
@media (max-width:900px){
  .hero--slider .slider__nav{ display:none; }
  .hero--slider .slider__pie{ display:none; }
  .hero--slider .hero__inner{ padding-bottom:var(--s12); }
}

/* Galería (no hero): mantiene sus controles centrados y su propio resguardo. */

/* ── 7 · MÓDULOS EN VIVO ─────────────────────────────────────────────────── */
.live-head{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s4); }

/* 7.1 Muro de video (YouTube diferido: carátula propia, iframe sólo al clic) */
.videowall{ display:grid; gap:var(--s6); grid-template-columns:repeat(3,minmax(0,1fr)); }
.videowall--feature{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start; }
@media (max-width:900px){ .videowall,.videowall--feature{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .videowall,.videowall--feature{ grid-template-columns:1fr; } }
.vcard{ display:flex; flex-direction:column; gap:var(--s4); text-decoration:none; color:inherit; }
.vplay{ position:relative; display:block; width:100%; padding:0; border:0; background:var(--ink-800);
  border-radius:var(--r-media); overflow:hidden; aspect-ratio:16/9; cursor:pointer; }
.vplay img{ width:100%; height:100%; object-fit:cover; filter:saturate(.94) contrast(1.04);
  transition:transform var(--d3) var(--ease), opacity var(--d2) var(--ease); }
.vplay:hover img{ transform:scale(1.02); }
.vplay::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(8,8,9,.55), transparent 55%); pointer-events:none; }
.vplay__btn{ position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2;
  width:62px; height:62px; border-radius:50%; display:grid; place-items:center;
  background:rgba(242,237,226,.94); color:var(--ink-900);
  transition:transform var(--d2) var(--ease), background-color var(--d1) var(--ease); }
.vplay:hover .vplay__btn{ transform:scale(1.06); background:var(--paper-000); }
.vplay__btn svg{ width:20px; height:20px; margin-left:2px; }
.vplay__time{ position:absolute; right:10px; bottom:10px; z-index:2; padding:3px 8px; border-radius:6px;
  background:rgba(8,8,9,.78); color:var(--paper-100); font-size:.75rem; font-weight:600;
  font-variant-numeric:tabular-nums; }
.vplay iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.vplay[data-playing="true"]::after,.vplay[data-playing="true"] .vplay__btn,
.vplay[data-playing="true"] .vplay__time{ display:none; }

/* 7.2 Tira de noticias */
/* Las reglas de atenuación al pasar el cursor van tras (hover:hover): en un
   táctil, un :hover puede quedarse PEGADO tras el toque y dejar las otras
   noticias al 42 % hasta que se recarga. No lo reproduje en headless —los
   eventos sintéticos no disparan :hover como un dedo— pero es la forma
   correcta de escribirlo y no cuesta nada. */
.news{ display:grid; gap:0; border-top:1px solid var(--rule); }
.news__item{ display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:var(--s6);
  align-items:center; padding:var(--s5) 0; border-bottom:1px solid var(--rule);
  text-decoration:none; color:inherit; transition:opacity var(--d2) var(--ease); }
@media (hover:hover){
  .news:hover .news__item{ opacity:.42; }
  .news:hover .news__item:hover{ opacity:1; }
}
.news__date{ font-size:.8125rem; font-weight:600; color:var(--fg-3); font-variant-numeric:tabular-nums; }
.news__t{ font-size:var(--t-h4); font-weight:600; line-height:1.4; letter-spacing:-.008em; color:var(--fg); }
.news__src{ font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
@media (max-width:700px){
  .news__item{ grid-template-columns:1fr; gap:6px; align-items:start; }
}

/* 7.3 Cartelera / entradas en vivo */
.event{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s6); align-items:center;
  padding:var(--s6) 0; border-bottom:1px solid var(--rule); }
.event__when{ font-size:.8125rem; font-weight:600; color:var(--accent); letter-spacing:.03em;
  text-transform:uppercase; }
.event__t{ font-size:var(--t-h3); font-weight:600; letter-spacing:-.012em; margin-top:4px; color:var(--fg); }
.event__t--sm{ font-size:var(--t-h4); letter-spacing:-.008em; }
.event__where{ font-size:.9375rem; color:var(--fg-3); margin-top:4px; }
.event__price{ font-variant-numeric:tabular-nums lining-nums; }
@media (max-width:640px){ .event{ grid-template-columns:1fr; align-items:start; } }

/* 7.4 Fachada de incrustado externo (Facebook / Instagram): sin cookies hasta el clic */
.embed{ border:1px solid var(--rule); border-radius:var(--r-card); background:var(--veil);
  padding:var(--s8); text-align:center; min-height:340px; display:grid; place-content:center; gap:var(--s4); }
.embed__t{ font-size:var(--t-h4); font-weight:600; color:var(--fg); }
.embed__note{ font-size:.8125rem; color:var(--fg-3); max-width:44ch; margin-inline:auto; }
.embed[data-loaded="true"]{ padding:0; border:0; background:none; display:block; min-height:0; }
.embed iframe{ width:100%; border:0; border-radius:var(--r-card); display:block; }
.ig-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); }
@media (max-width:820px){ .ig-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px){ .ig-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ── 8 · MOVIMIENTO — presupuesto de 3 ───────────────────────────────────── */
/* (a) revelado al entrar en pantalla — SÓLO desplazamiento, sin desvanecido.
   Medido: cualquier animación de opacidad sobre texto hace que las auditorías
   (y los lectores en equipos lentos) lo muestreen a media opacidad y lo lean
   como bajo contraste. Con transform puro el texto siempre está al 100 %. */
/* El estado oculto lo marca el JS con data-in="false", NUNCA el CSS por sí solo.
   Motivo medido: con el ocultamiento en CSS, las auditorías (y los lectores de
   pantalla en dispositivos lentos) muestrean el texto a media opacidad y lo
   leen como bajo contraste — salían 1.69:1 en cifras que en reposo dan 4.9:1.
   Además, si el JS falla, el contenido queda visible por defecto. */
.reveal[data-in="false"]{ transform:translateY(16px); }
.reveal{ transition:transform var(--d3) var(--ease); }
.reveal[data-in="false"] .media img,.reveal-group[data-in="false"] .media img{ transform:scale(1.035); }
.reveal .media img,.reveal-group .media img{ transition:transform 900ms var(--ease); }
.reveal[data-in="true"]{ opacity:1; transform:none; }
.reveal-group[data-in="false"] > *{ transform:translateY(16px); }
.reveal-group > *{ transition:transform var(--d3) var(--ease); }

.reveal-group[data-in="true"] > *:nth-child(2){ transition-delay:70ms; }
.reveal-group[data-in="true"] > *:nth-child(3){ transition-delay:140ms; }
.reveal-group[data-in="true"] > *:nth-child(4){ transition-delay:210ms; }
/* (b) hover de lista: los hermanos bajan, el activo se queda */
/* (c) transiciones de 120–460ms sólo en opacity/transform/color                */
@keyframes opm-pulse{ 70%{ box-shadow:0 0 0 7px rgba(224,90,76,0); } 100%{ box-shadow:0 0 0 0 rgba(224,90,76,0); } }

/* SIN JavaScript el contenido se ve. El revelado es mejora, no requisito. */
/* Sin JavaScript nunca se declara data-in="false": todo nace visible. */

/* Sobre claro el filete debe ser más tenue que sobre tinta: la misma opacidad
   pesa el doble contra el papel. */
[data-surface^="paper"]{ --rule:rgba(10,10,11,.10); --rule-2:rgba(10,10,11,.20); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal[data-in="false"],.reveal-group[data-in="false"] > *{ opacity:1 !important; transform:none !important; }
  .reveal[data-in="false"] .media img,.reveal-group[data-in="false"] .media img{ transform:none !important; }
  .sec-head::before{ transform:scaleX(1); }
}

/* ── 9 · UTILIDADES (mínimas, con tokens) ────────────────────────────────── */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0; }
.center{ text-align:center; }
.mt-2{ margin-top:var(--s2); } .mt-3{ margin-top:var(--s3); } .mt-4{ margin-top:var(--s4); }
.mt-5{ margin-top:var(--s5); } .mt-6{ margin-top:var(--s6); } .mt-8{ margin-top:var(--s8); }
.mt-10{ margin-top:var(--s10); } .mt-12{ margin-top:var(--s12); } .mt-16{ margin-top:var(--s16); }
.mt-20{ margin-top:var(--s20); } .mt-24{ margin-top:var(--s24); }
.hr{ border-top:1px solid var(--rule); }
.pt-10{ padding-top:var(--s10); }