/* Almud Bar v2 · site.css (fase 11–15). Va sobre tokens.css: aquí no se escriben colores, curvas ni duraciones sueltas.
   Lenguaje: portada-lugar (B) + capítulos-afiche con un campo plano por pantalla (A) + una hoja de papel, la carta (C).
   Esquinas rectas, sin sombras, sin líneas, sin degradados (salvo el scrim funcional de la portada).
   Crítica 1 (fase 15): cada capítulo con su propio esqueleto (split · banda · marco ancho · sostenida · índice · mosaico ·
   calendario), uno primario barra por pantalla (el de la nav), titulares en caja alta pareja. */

/* ================= base ================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--papel-suave) var(--noche); scroll-padding-top: var(--nav-h); }
body { margin: 0; background: var(--noche); color: var(--papel); font: var(--w-light) var(--t-body)/var(--lh-body) var(--font-text); letter-spacing: var(--track-body-dark); caret-color: var(--barra); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, video, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd, blockquote { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration-thickness: var(--underline-w); text-underline-offset: var(--underline-offset); }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button, a, [role="button"] { touch-action: manipulation; }
::selection { background: var(--barra); color: var(--barra-tinta); }
.on-paper ::selection { background: var(--carta-azul); color: var(--papel); }
:focus-visible { outline: var(--focus-w) solid var(--ring, currentColor); outline-offset: var(--focus-offset); }
.num { font-variant-numeric: tabular-nums; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (max-width: 699px) { :root { --nav-h: 56px; } }

/* superficies: tinta del foco por superficie (sistema.md §5) */
.nav, .cover, .on-night, .hoja { --ring: var(--papel); --gl-c: var(--papel-suave); }
.on-field { --ring: var(--noche); --gl-c: currentColor; }
.on-fucsia, .hoy[data-campo="fucsia"] { --ring: var(--papel); }
.on-paper { --ring: var(--carta-azul); --gl-c: var(--carta-tinta); }

/* ================= idioma: glosas =================
   Crítica 1: los datos idénticos (horario, precio, nota de stock, cifras) no se duplican en modo EN:
   el literal en español (.dato-es) se oculta y queda solo su versión EN. El texto de la marca sigue literal + glosa. */
.gl { display: none; color: var(--gl-c, var(--papel-suave)); font-weight: var(--w-light); }
html[lang="en"] .gl { display: block; }
html[lang="en"] .gl-in { display: inline; }
html[lang="en"] .gl-es { display: none; }
html[lang="en"] .dato-es { display: none !important; }
.gl-es { color: var(--gl-c, var(--papel-suave)); }
p.gl, p.gl-es { margin-top: var(--sp-1); }

/* ================= tipo (5 pasos) =================
   Crítica 1: caja alta pareja en todo titular Six Caps (display, head, firma). La caja literal queda en el DOM. */
.display { font: var(--w-regular) var(--t-display)/var(--lh-display) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; hyphens: none; text-transform: uppercase; }
.head { font: var(--w-regular) var(--t-head)/var(--lh-head) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; hyphens: none; text-transform: uppercase; }
.lead-q { font: var(--w-regular) var(--t-lead)/var(--lh-lead) var(--font-text); letter-spacing: 0; text-wrap: pretty; max-width: 26em; }
.body { font: var(--w-light) var(--t-body)/var(--lh-body) var(--font-text); max-width: var(--measure); text-wrap: pretty; }
.small, .pie { font: var(--w-regular) var(--t-small)/var(--lh-small) var(--font-text); letter-spacing: 0.01em; }
.rot { font: var(--w-semi) var(--t-lead)/1.15 var(--font-text); letter-spacing: 0; }
.gl-h { font-size: var(--t-body); margin-top: var(--sp-4); }
.display + .gl-h { margin-top: var(--sp-5); }  /* el interlineado .86 de Six Caps no alcanza contra la glosa */
.gl-lead { font-size: var(--t-body); }
@media (max-width: 699px) { .display { letter-spacing: 0; } }
.ln { display: block; overflow: hidden; padding-block: 0.1em 0.04em; margin-block: -0.1em -0.04em; }
.ln + br { display: none; }
.li { display: block; }

/* ================= grilla ================= */
.g { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }
.g > * { grid-column: 1 / -1; min-width: 0; }
.sec { padding-block: clamp(72px, 4vw + 48px, 128px); }
.acc { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-6); margin-top: var(--sp-6); }

/* ================= botón y enlace (se decide una vez) =================
   Uno primario barra por pantalla: el de la nav (siempre a la vista). Sobre noche, lo demás es enlace;
   sobre un campo el botón es noche; sobre papel, azul carta (sistema.md §7). */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h); padding: 0 var(--btn-px); border-radius: var(--radius); font: var(--btn-font); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--btn-bg, var(--barra)); color: var(--btn-ink, var(--barra-tinta));
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-hover) var(--ease-hover), color var(--d-hover) var(--ease-hover); }
.on-field .btn { --btn-bg: var(--noche); --btn-ink: var(--papel); --btn-hover-bg: var(--papel); --btn-hover-ink: var(--noche); }
.on-paper .btn { --btn-bg: var(--carta-azul); --btn-ink: var(--papel); --btn-hover-bg: var(--noche); --btn-hover-ink: var(--papel); }
.link { display: inline-flex; align-items: center; min-height: 44px; font: var(--w-regular) var(--t-body)/1.25 var(--font-text); letter-spacing: 0; color: inherit; text-decoration: underline; text-decoration-thickness: var(--underline-w); text-underline-offset: var(--underline-offset); text-decoration-color: currentColor;
  transition: transform var(--d-press) var(--ease-out), text-decoration-color var(--d-hover) var(--ease-hover); }
.btn:active, .link:active, .lang-b:active, .menu-b:active, .vid-b:active, .mapa-b:active, .pie-logo-a:active { transform: scale(0.97); }
/* pulido 3: los @ y créditos son enlaces en línea (no se pueden escalar) y iOS no pinta el resalte de toque: la presión se ve en la tinta */
a:not([class]):active { opacity: 0.72; }
.pie-logo-a { transition: transform var(--d-press) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-hover-bg, var(--papel)); color: var(--btn-hover-ink, var(--noche)); }
  .on-night .link:hover, .nav .link:hover, .cover .link:hover, .hoja .link:hover { text-decoration-color: var(--barra); }
  .on-field .link:hover, .on-paper .link:hover { text-decoration-thickness: 0.16em; }
  .pie a:hover, .arrobas a:hover, .on-night a:not([class]):hover, .cover a:not([class]):hover { text-decoration-color: var(--barra); }
  .on-field a:not([class]):hover, .on-paper a:not([class]):hover, .campo a:not([class]):hover { text-decoration-thickness: 0.16em; }
}

/* ================= saltar ================= */
.skip { position: absolute; left: var(--margin); top: -100px; z-index: 100; background: var(--barra); color: var(--barra-tinta); font: var(--btn-font); padding: 14px var(--btn-px); text-decoration: none; }
.skip:focus-visible { top: var(--sp-2); outline-color: var(--papel); }

/* ================= nav: barra plana sobre noche ================= */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; gap: var(--sp-5); padding-inline: var(--margin); background: var(--noche); color: var(--papel); }
.nav-logo { display: block; flex: none; color: var(--papel); padding-block: 9px; transition: transform var(--d-press) var(--ease-out); }
.nav-logo:active { transform: scale(0.97); }
.nav-logo svg { height: 26px; width: calc(26px * 1956 / 897); }
.nav-links { display: none; gap: var(--sp-5); margin-left: var(--sp-5); }
.nav-links .link { text-decoration-color: transparent; }  /* fase 16: subrayado solo al pasar o en la sección activa */
.nav-links .link[aria-current="true"] { text-decoration-color: currentColor; }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--sp-5); }
.nav .lang { display: none; }
.menu-b { min-height: 44px; min-width: 44px; font: var(--w-regular) var(--t-body)/1 var(--font-text); text-decoration: underline; text-decoration-thickness: var(--underline-w); text-underline-offset: var(--underline-offset); transition: transform var(--d-press) var(--ease-out); }
.lang { display: flex; gap: var(--sp-1); }
.lang-b { min-width: 44px; min-height: 44px; font: var(--w-regular) var(--t-body)/1 var(--font-text); color: var(--papel-suave); text-decoration: none; transition: transform var(--d-press) var(--ease-out), color var(--d-hover) var(--ease-hover); }
.lang-b[aria-pressed="true"] { color: var(--papel); font-weight: var(--w-semi); text-decoration: underline; text-decoration-thickness: var(--underline-w); text-underline-offset: var(--underline-offset); }
@media (hover: hover) and (pointer: fine) { .lang-b:hover { color: var(--papel); } }
@media (min-width: 1024px) {
  .nav-logo svg { height: 30px; width: calc(30px * 1956 / 897); }
  .nav-links { display: flex; }
  .nav .lang { display: flex; }
  .menu-b { display: none; }
}

/* hoja del menú (teléfono): pantalla completa sobre noche alta.
   Crítica 1 (P0): transición de clip-path sobre el estado (.abierta), no keyframes con animationend:
   es interrumpible (abrir durante el cierre retoma desde donde va) y no hay manejadores pendientes que carreras puedan disparar.
   visibility se apaga al final del cierre (retraso = duración del cierre) y se enciende al instante al abrir. */
.hoja { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; background: var(--noche-alta); color: var(--papel); padding: var(--sp-6) var(--margin) var(--sp-7); display: flex; flex-direction: column; justify-content: space-between; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path var(--d-panel-out) var(--ease-out), visibility 0s linear var(--d-panel-out); }
.hoja.abierta { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path var(--d-panel) var(--ease-drawer), visibility 0s linear 0s; }
.hoja.al-instante { transition: none; }
.hoja-links { display: grid; gap: var(--sp-1); }
.hoja-links .link { font: var(--w-regular) var(--t-head)/var(--lh-head) var(--font-display); letter-spacing: var(--track-display); text-transform: uppercase; text-decoration: none; min-height: 56px; }
.hoja-pie { display: grid; gap: var(--sp-4); color: var(--papel-suave); }
.hoja-pie .lang-b { color: var(--papel-suave); }
.hoja-pie .lang-b[aria-pressed="true"] { color: var(--papel); }
html.hoja-on { overflow: hidden; }
@media (min-width: 1024px) { .hoja { display: none !important; } }

/* ================= portada (ruta B · P189) ================= */
.cover { container-type: inline-size; background: var(--noche); color: var(--papel); --S: min(100cqi, var(--photo-max)); }
.cover-stage { position: relative; height: max(560px, calc(100vh - var(--nav-h))); height: max(560px, calc(100svh - var(--nav-h))); max-width: var(--photo-max); margin-inline: auto; overflow: hidden; }
.cover-img { display: block; }
.cover-img img { background: var(--lqip) center / cover no-repeat; }
.cover-logo { width: min(250px, 66cqi); height: auto; aspect-ratio: 1956 / 897; color: var(--papel); }
.cover-title { font: var(--w-regular) var(--t-display)/1 var(--font-display); }
.cover-info { display: grid; gap: var(--sp-2); }
.cover-bio { font: var(--w-regular) var(--t-lead)/var(--lh-lead) var(--font-text); letter-spacing: 0; max-width: 17em; text-wrap: balance; }
.cover-data { font: var(--w-light) var(--t-body)/1.45 var(--font-text); }
.cover-voz { font: var(--w-semi) var(--t-body)/1.3 var(--font-text); letter-spacing: 0; }  /* fase 16: su voz en la primera pantalla (IG-013) */
.cover-data > span:not(.gl) { display: block; }
html[lang="en"] .cover-data > .gl { display: block; }
.cover-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); }
.cover-credit { color: var(--papel-suave); }
.cover-credit a { text-decoration: none; }
@media (max-width: 899px) {
  /* teléfono (crítica 1): la foto ocupa su zona y el tipo va debajo. Con unidades del contenedor (cqh/cqw de .cover-ph),
     la línea del 70 % de la foto (bajo las caras, que van del 47 al 62 %) cae justo en el borde inferior de la zona:
     el tipo nunca pisa una cara, en 320 × 568 igual que en 414 × 896. La foto se ancla a lo ancho o a lo alto, lo que cubra. */
  .cover-stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .cover-ph { position: relative; container-type: size; min-height: 0; }
  .cover-img { --w: max(100cqw, 107.2cqh); position: absolute; width: var(--w); left: calc((100cqw - var(--w)) * 0.3); top: calc(100cqh - var(--w) * 0.933); }
  .cover-img img { width: 100%; height: auto; aspect-ratio: 1170 / 1091; }  /* fase 16: recorte propio del teléfono (70 % superior de P189) */
  .cover-tipo { position: relative; z-index: 1; display: grid; gap: var(--sp-2); padding: 0 var(--margin) var(--sp-3); }
  .cover-tipo::before { content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--sp-7)) 0 0 0; pointer-events: none;
    background: linear-gradient(to top, rgb(var(--scrim) / 0.92) 0, rgb(var(--scrim) / 0.82) calc(100% - var(--sp-7)), rgb(var(--scrim) / 0) 100%); /* taste-skill-ignore: scrim funcional neutro, crece con el bloque de tipo */ }
  .cover-logo { width: min(200px, 52cqi); }
  .cover-acc .link { font-weight: var(--w-semi); }
  .cover-credit { position: absolute; right: var(--margin); top: calc(-1 * var(--sp-6)); margin: 0; }
  html[lang="en"] .cover .gl-lead { font-size: var(--t-small); line-height: var(--lh-small); }
}
@media (max-width: 899px) and (max-height: 760px) {
  /* teléfonos bajos (375 × 667, 320 × 568): logotipo y bio más chicos, para que la foto conserve su zona */
  .cover-logo { width: min(150px, 40cqi); }
  .cover-bio { font-size: var(--t-body); line-height: 1.35; }
  .cover-tipo { gap: var(--sp-1); }
  .cover-acc .link { min-height: 44px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  /* fase 16: en teléfonos bajos (320 × 568, 375 × 667) la línea de su voz cede el lugar: horario, dirección y acciones primero */
  .cover-voz, .cover-voz + .gl { display: none !important; }
}
@media (min-width: 900px) {
  /* el ancla de la lámina (1440 × 900) sube en pantallas bajas para que las caras sigan a la vista y el tipo sobre la pared */
  .cover { --H: clamp(640px, calc(100svh - var(--nav-h)), 1000px); --lift: max(0px, calc((var(--S) * 0.575 - var(--H)) * 0.75)); }
  .cover-stage { height: var(--H); }
  /* pulido 3: Safari < 15.4 no conoce svh; una propiedad personalizada inválida dejaría la portada sin alto */
  @supports not (height: 100svh) { .cover { --H: clamp(640px, calc(100vh - var(--nav-h)), 1000px); } }
  .cover-ph { position: absolute; inset: 0; }
  .cover-img { position: absolute; left: 0; top: calc(var(--S) * -0.197 - var(--lift)); width: 100%; }
  .cover-img img { width: 100%; height: auto; }
  .cover-tipo { display: contents; }
  .cover-title-box { position: absolute; z-index: 0; left: var(--margin); top: calc(var(--S) * 0.252 - var(--lift)); }
  .cover-info { position: absolute; z-index: 0; right: calc(var(--margin) + var(--sp-2)); top: calc(var(--S) * 0.262 - var(--lift)); width: calc(var(--S) * 0.25); gap: var(--sp-3); }
  .cover-title-box::before, .cover-info::before { content: ""; position: absolute; inset: -22% -16%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, rgb(var(--scrim) / 0.86), rgb(var(--scrim) / 0.74) 62%, rgb(var(--scrim) / 0)); /* taste-skill-ignore: scrim funcional neutro, solo detrás del tipo */ }
  /* fase 16: el letrero "Cristal" de la foto ensuciaba el contorno del isotipo: el scrim se refuerza solo bajo el isotipo */
  .cover-title-box::after { content: ""; position: absolute; z-index: -1; pointer-events: none; right: 3%; top: 30%; width: 38%; height: 88%;
    background: radial-gradient(closest-side, rgb(var(--scrim) / 0.95), rgb(var(--scrim) / 0.85) 60%, rgb(var(--scrim) / 0)); /* taste-skill-ignore: scrim funcional neutro, solo bajo el isotipo */ }
  .cover-logo { width: calc(var(--S) * 0.36); }
  .cover-acc { margin-top: var(--sp-1); }
  .cover-credit { position: absolute; right: var(--margin); bottom: var(--sp-3); padding: 2px 6px; background: rgb(var(--scrim) / 0.6); }
}

/* ================= marcos de foto ================= */
.f { position: relative; overflow: hidden; background: var(--noche-alta); }
.r45 { aspect-ratio: var(--ratio-retrato); }
.r169 { aspect-ratio: var(--ratio-banda); }
.f > .ph, .f > .ph img, .f video { position: absolute; inset: 0; width: 100%; height: 100%; }
.f img, .f video { object-fit: cover; object-position: var(--pos, 50% 50%); }
.f img { background: var(--lqip) center / cover no-repeat; }
/* pulido 3: si una foto no llega (red caída), queda su LQIP y no el alt impreso encima (el alt sigue para el lector) */
picture img { color: transparent; }  /* solo el LQIP: el color plano dominante se leía como un campo de color */
.vid { background: var(--dom, var(--noche-alta)); }
.vid-b { position: absolute; left: var(--sp-2); bottom: var(--sp-2); z-index: 1; min-height: 44px; padding: 0 var(--sp-3); background: var(--noche); color: var(--papel); font: var(--w-regular) var(--t-small)/1 var(--font-text); letter-spacing: 0.01em; transition: transform var(--d-press) var(--ease-out); --ring: var(--papel); }
html:not(.js) .vid-b { display: none; }
.pie { margin-top: var(--sp-2); }
.pie a { display: inline-flex; align-items: center; min-height: 24px; text-decoration: none; }  /* WCAG 2.5.8: ≥ 24 px */
figcaption { display: grid; gap: var(--sp-1); margin-top: var(--sp-4); }
figcaption .rot { margin-bottom: var(--sp-1); }
.banda { margin-top: var(--sp-9); }
.banda .f { width: 100%; }
.banda-pie { margin-top: var(--sp-5); row-gap: var(--sp-1); }
@media (min-width: 1024px) {
  .banda-pie > * { grid-column: 1 / span 7; }
  .lugar-banda .banda-pie .rot { grid-column: 1 / span 3; }
}

/* mosaico desigual 4:5 (desfases 0 / 160 / 56) */
.mosaico { margin-top: var(--sp-8); align-items: start; row-gap: var(--sp-7); }
.mosaico .mo-1 { grid-column: 1 / span 2; }
.mosaico .mo-2 { grid-column: 3 / span 2; margin-top: var(--sp-9); }
.mosaico .mo-3 { grid-column: 2 / span 3; }
@media (max-width: 699px) {
  /* crítica 1: en el teléfono, los mosaicos con texto van a 3/4 del ancho, alternando, para que el pie tenga ≥ 270 px */
  .mosaico-tx .mo-1 { grid-column: 1 / span 3; }
  .mosaico-tx .mo-2 { grid-column: 2 / span 3; margin-top: 0; }
  .mosaico-tx .mo-3 { grid-column: 1 / span 3; }
}
@media (min-width: 700px) {
  .mosaico .mo-1 { grid-column: 1 / span 4; }
  .mosaico .mo-2 { grid-column: 5 / span 4; margin-top: var(--sp-9); }
  .mosaico .mo-3 { grid-column: 3 / span 5; }
}
@media (min-width: 1024px) {
  .mosaico .mo-1 { grid-column: 1 / span 4; margin-top: 0; }
  .mosaico .mo-2 { grid-column: 5 / span 4; margin-top: 160px; }
  .mosaico .mo-3 { grid-column: 9 / span 4; margin-top: 56px; }
  .mosaico-b .mo-1 { margin-top: 56px; }
  .mosaico-b .mo-2 { margin-top: 0; }
  .mosaico-b .mo-3 { margin-top: 160px; }
}

/* ================= campos ================= */
.campo { background: var(--campo); color: var(--tinta); }
.campo-amarillo { --campo: var(--amarillo); --tinta: var(--amarillo-tinta); }
.campo-verde { --campo: var(--verde); --tinta: var(--verde-tinta); }
.campo-fucsia { --campo: var(--fucsia); --tinta: var(--fucsia-tinta); }
.campo-coral { --campo: var(--coral); --tinta: var(--coral-tinta); }
.on-night { background: var(--noche); color: var(--papel); }

/* ================= HOY EN ALMUD · split (la cosa viva) ================= */
.hoy { background: var(--campo); color: var(--tinta); }
.hoy[data-campo="coral"] { --campo: var(--coral); --tinta: var(--coral-tinta); }
.hoy[data-campo="turquesa"] { --campo: var(--turquesa); --tinta: var(--turquesa-tinta); }
.hoy[data-campo="fucsia"] { --campo: var(--fucsia); --tinta: var(--fucsia-tinta); }
.hoy[data-campo="amarillo"] { --campo: var(--amarillo); --tinta: var(--amarillo-tinta); }
.hoy[data-campo="verde"] { --campo: var(--verde); --tinta: var(--verde-tinta); }
.hoy { padding-block: 0; }
.hoy-dia { row-gap: 0; padding-block: clamp(72px, 4vw + 48px, 128px); }  /* fase 16: el relleno vive en el hijo que se imprime */
.hoy-foto { margin-top: var(--sp-6); }
.hoy-promo { margin-top: var(--sp-6); display: grid; gap: var(--sp-1); align-content: start; }
.hoy-promo .que { font: var(--w-semi) var(--t-lead)/1.15 var(--font-text); letter-spacing: 0; }
.hoy-promo .precio { font: var(--w-regular) var(--t-head)/1 var(--font-display); letter-spacing: var(--track-display); margin-top: var(--sp-3); padding-bottom: 0.08em; }
.hoy-promo .cuando { font-weight: var(--w-regular); margin-top: var(--sp-1); }
.hoy-promo .gl.precio { font-weight: var(--w-regular); margin-top: var(--sp-3); }
.hoy-promo .gl.cuando { font-weight: var(--w-regular); }
.hoy-dato { font: var(--w-regular) var(--t-lead)/var(--lh-lead) var(--font-text); }
.hoy-rot { font: var(--w-semi) var(--t-body)/1.3 var(--font-text); margin-top: var(--sp-4); }
.hoy-frase { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.hoy-siempre { font-weight: var(--w-regular); }
.semana { margin-top: var(--sp-7); }
.semana-l { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--gutter); }
.semana-l li { font: var(--w-light) var(--t-body)/1.35 var(--font-text); }
.semana-l b { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; font-weight: var(--w-semi); }
.semana-l .gl { font-size: var(--t-small); }
.semana-l .es-hoy { font-weight: var(--w-regular); }
/* "Hoy": etiqueta en la tinta del campo, no subrayado (no es un enlace) */
.es-hoy-m { display: inline-flex; align-items: center; padding: 3px var(--sp-2); background: var(--tinta); color: var(--campo); font: var(--w-regular) var(--t-small)/1 var(--font-text); letter-spacing: 0.01em; }
@media (min-width: 700px) {
  .hoy-dia .hoy-h, .hoy-dia .hoy-glh { grid-column: 1 / -1; }
  .hoy-foto { grid-column: 5 / span 4; grid-row: 3 / span 4; margin-top: var(--sp-6); }
  .hoy-promo { grid-column: 1 / span 4; grid-row: 3; }
  .hoy-frase { grid-column: 1 / span 4; grid-row: 4; }
  .hoy-acc { grid-column: 1 / span 4; grid-row: 5; align-self: start; }
  .semana { grid-column: 1 / -1; grid-row: 7; }
  .semana-l { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .hoy-dia .hoy-h { grid-column: 1 / span 7; grid-row: 1; }
  .hoy-dia .hoy-glh { grid-column: 1 / span 7; grid-row: 2; }
  .hoy-foto { grid-column: 8 / span 5; grid-row: 1 / span 6; margin-top: 0; align-self: start; }
  .hoy-promo { grid-column: 1 / span 3; grid-row: 3; margin-top: var(--sp-7); }
  .hoy-frase { grid-column: 4 / span 4; grid-row: 3; margin-top: var(--sp-7); align-self: start; padding-top: var(--sp-3); }  /* fase 16: alineada con la línea alta del ítem */
  .hoy-acc { grid-column: 1 / span 7; grid-row: 4; }
  .semana { grid-column: 1 / span 7; grid-row: 5; align-self: end; }
}

/* ================= EL LUGAR · titular + foto líder (la barra) → banda del salón → mosaico → par =================
   Fase 16: la foto líder 4:5 (P093, la barra curva) sube a las columnas 8–12 junto al titular, con la idea de origen (VID-061)
   debajo: ya no queda media pantalla muerta. El salón es P076 (el salón de verdad), limitado a su archivo mayor (1280 px). */
.lugar-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.lugar-lider { margin-top: var(--sp-7); }
.lugar-lider figcaption { gap: var(--sp-2); }
.lugar-banda { margin-top: var(--sp-9); }
.lugar-banda > .f { max-width: 1280px; margin-inline: auto; }
.par { margin-top: var(--sp-9); row-gap: var(--sp-8); align-items: start; }
.par-b { grid-column: 2 / span 3; }
@media (min-width: 700px) {
  .lugar-txt { grid-column: 1 / span 6; }
  .lugar-lider { grid-column: 2 / span 6; }
  .par-a { grid-column: 1 / span 6; }
  .par-b { grid-column: 4 / span 4; }
}
@media (min-width: 1024px) {
  .lugar-cab { grid-template-rows: auto auto auto 1fr; }
  .lugar-h { grid-column: 1 / span 7; grid-row: 1; }
  .lugar-glh { grid-column: 1 / span 7; grid-row: 2; }
  .lugar-txt { grid-column: 1 / span 6; grid-row: 3; margin-top: var(--sp-7); }
  .lugar-lider { grid-column: 8 / span 5; grid-row: 1 / span 4; margin-top: 0; align-self: start; }
  /* el mural (fotograma de 960 px) baja a 5 columnas, como textura; nunca más ancho que su archivo */
  .par-a { grid-column: 2 / span 5; }
  .par-b { grid-column: 8 / span 4; margin-top: var(--sp-9); }
}

/* ================= LOS TRAGOS · titular en una línea → marco ancho que crece → par desigual + la casa → banda ================= */
.tragos-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.tragos-lider { margin-top: var(--sp-6); }
.tragos-f { aspect-ratio: var(--ratio-retrato); }
.tragos-m1 { margin-top: var(--sp-8); grid-column: 1 / span 2; }
.tragos-m2 { margin-top: calc(var(--sp-8) + var(--sp-9)); grid-column: 3 / span 2; }
.casa { margin-top: var(--sp-7); display: grid; gap: var(--sp-1); align-content: start; }
.casa .acc { margin-top: var(--sp-4); }
.sec > .banda:last-child:not(:has(figcaption)) { margin-bottom: calc(-1 * clamp(72px, 4vw + 48px, 128px)); }
.tragos-banda { margin-top: var(--sp-9); }
@media (min-width: 700px) {
  .tragos-txt { grid-column: 1 / span 6; }
  .tragos-f { aspect-ratio: var(--ratio-banda); }
  .tragos-m1 { grid-column: 1 / span 4; }
  .tragos-m2 { grid-column: 6 / span 3; }
}
@media (min-width: 1024px) {
  /* el titular entra en una línea a 12 columnas (24 caracteres × 0,22 × 210 px ≈ 1110 px) */
  .tragos-h .ln { display: inline-block; vertical-align: top; }
  .tragos-h .ln + br + .ln { margin-left: 0.14em; }
  .tragos-txt { grid-column: 1 / span 4; grid-row: 3; margin-top: var(--sp-7); }
  .tragos-lider { grid-column: 5 / span 8; grid-row: 3; margin-top: var(--sp-7); }
  .tragos-m1 { grid-column: 2 / span 4; grid-row: 4; margin-top: var(--sp-8); }
  .tragos-m2 { grid-column: 7 / span 3; grid-row: 4; margin-top: calc(var(--sp-8) + var(--sp-9)); }
  .casa { grid-column: 10 / span 3; grid-row: 4; align-self: end; margin-top: 0; }
}

/* ================= SIN ALCOHOL · titular de afiche + lista ================= */
.sin-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); }
.sin-l { margin-top: var(--sp-6); display: grid; gap: 0 var(--sp-6); }
.sin-l li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); }
@media (min-width: 700px) { .sin-l { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .sin-txt { grid-column: 1 / span 5; grid-row: 3; }
  .sin-l { grid-column: 7 / span 6; grid-row: 3; align-self: end; }
  .sin-acc { grid-column: 7 / span 6; grid-row: 4; }
}

/* ================= LA COMIDA · foto sostenida a la izquierda, titular y texto a la derecha → mosaico ================= */
.comida-foto { margin-top: var(--sp-6); }
.comida-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.cats { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); margin-top: var(--sp-3); }
.cats li { display: flex; flex-direction: column; }
.cats .gl { font-size: var(--t-small); }
@media (min-width: 700px) {
  .comida-foto { grid-column: 1 / span 4; grid-row: 3; }
  .comida-txt { grid-column: 5 / span 4; grid-row: 3; }
}
@media (min-width: 1024px) {
  .comida-foto { grid-column: 1 / span 5; grid-row: 1 / span 3; margin-top: 0; align-self: start; }
  .comida-h { grid-column: 7 / span 6; grid-row: 1; }
  .comida-glh { grid-column: 7 / span 6; grid-row: 2; }
  .comida-txt { grid-column: 7 / span 6; grid-row: 3; margin-top: var(--sp-7); }
}

/* ================= CON QUIÉN · titular + párrafo → mosaico × 2 ================= */
.quien-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); }
@media (min-width: 1024px) {
  .quien-h { grid-column: 1 / span 8; grid-row: 1; }
  .quien-glh { grid-column: 1 / span 8; grid-row: 2; }
  .quien-txt { grid-column: 1 / span 10; grid-row: 3; }
  .quien-txt .lead-q { max-width: 40em; }
}
.quien-mos2 { margin-top: var(--sp-9); }

/* ================= EL EQUIPO · titular → banda a sangre → texto y nombres ================= */
.equipo-banda { margin-top: var(--sp-7); }
.equipo-pie { margin-top: var(--sp-8); row-gap: var(--sp-7); }
.equipo-txt { display: grid; gap: var(--sp-2); align-content: start; }
.equipo-nombres { display: grid; gap: var(--sp-4); align-content: start; }
.arrobas { overflow-wrap: anywhere; max-width: none; }
.arrobas a, .equipo-nombres a, .banda-pie a { text-decoration-thickness: var(--underline-w); text-underline-offset: var(--underline-offset); }
@media (max-width: 699px) { .equipo-nombres a { display: inline-flex; align-items: center; min-height: 44px; } }
@media (min-width: 1024px) {
  .equipo-h, .equipo-glh { grid-column: 1 / span 9; }
  .equipo-txt { grid-column: 1 / span 5; }
  .equipo-nombres { grid-column: 7 / span 6; }
}

/* ================= RESEÑAS · titular + citas; las cifras son una línea de cuerpo ================= */
.cifras { margin-top: var(--sp-5); font-weight: var(--w-regular); color: var(--papel-suave); max-width: none; }
.res-g { margin-top: var(--sp-8); row-gap: var(--sp-8); }
.res { display: grid; gap: var(--sp-3); align-content: start; }
.res-q { font: var(--w-regular) var(--t-lead)/var(--lh-lead) var(--font-text); letter-spacing: 0; text-wrap: pretty; hanging-punctuation: first; }
.res figcaption { color: var(--papel-suave); margin-top: var(--sp-1); }
.res-pocas .res-4, .res-pocas .res-5, .res-pocas .res-6 { display: none; }
.res-mas { display: none; padding-inline: var(--margin); margin-top: var(--sp-6); }
.res-pocas + .res-mas { display: block; }
@media (min-width: 700px) { .res { grid-column: span 4; } }
@media (min-width: 1024px) {
  .resenas-h, .resenas-glh, .cifras { grid-column: 1 / span 8; }
  .res-2, .res-5 { margin-top: var(--sp-8); }
  .res-3, .res-6 { margin-top: var(--sp-6); }
}

/* ================= EVENTOS · calendario a lo ancho → tira de fotos ================= */
.eventos-txt { margin-top: var(--sp-6); }
.cal { margin-top: var(--sp-7); display: grid; gap: var(--sp-5); }
.cal li { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-1) var(--sp-4); align-items: baseline; }
.cal li > div { grid-column: 1 / -1; display: grid; gap: var(--sp-1); }
.mes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); font: var(--w-regular) var(--t-body)/1.3 var(--font-text); }
.ev-n { font: var(--w-semi) var(--t-lead)/1.15 var(--font-text); letter-spacing: 0; }
.anos { font: var(--w-regular) var(--t-small)/1.3 var(--font-text); text-align: right; }
/* el próximo evento (lo marca site.js con la fecha de America/Santiago; sin JS no se marca nada) */
.ev-m { display: inline-flex; align-items: center; padding: 3px var(--sp-2); background: var(--tinta); color: var(--campo); font: var(--w-regular) var(--t-small)/1 var(--font-text); letter-spacing: 0.01em; }
.cal .es-prox .mes { font-weight: var(--w-semi); }
.eventos-acc .gl { flex-basis: 100%; order: 1; margin-top: calc(-1 * var(--sp-3)); }
.tira { margin-top: var(--sp-8); align-items: start; row-gap: var(--sp-6); }
.tira .ti-1, .tira .ti-3 { grid-column: 1 / span 2; }
.tira .ti-2, .tira .ti-4 { grid-column: 3 / span 2; margin-top: var(--sp-8); }
@media (min-width: 700px) {
  .cal li { grid-template-columns: 9em minmax(0, 1fr) auto; }
  .cal li > div { grid-column: 2; grid-row: 1; }
  .tira .ti-1 { grid-column: 1 / span 2; margin-top: 0; }
  .tira .ti-2 { grid-column: 3 / span 2; margin-top: var(--sp-9); }
  .tira .ti-3 { grid-column: 5 / span 2; margin-top: var(--sp-6); }
  .tira .ti-4 { grid-column: 7 / span 2; margin-top: var(--sp-8); }
}
@media (min-width: 1024px) {
  .eventos-h, .eventos-glh { grid-column: 1 / span 8; }
  .eventos-txt { grid-column: 1 / span 6; }
  .cal { grid-template-columns: subgrid; }
  .cal li { grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--gutter); }
  .cal .mes { grid-column: 1 / span 2; }
  .cal li > div { grid-column: 3 / span 7; }
  .cal .anos { grid-column: 10 / span 3; }
  .tira .ti-1 { grid-column: 1 / span 3; }
  .tira .ti-2 { grid-column: 4 / span 3; }
  .tira .ti-3 { grid-column: 7 / span 3; }
  .tira .ti-4 { grid-column: 10 / span 3; }
}

/* ================= CUÁNDO Y DÓNDE · datos + mapa al tocar → la calle (video) y la puerta ================= */
.donde-txt { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.datos { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.datos > div { display: grid; grid-template-columns: 7.5em 1fr; gap: var(--gutter); align-items: baseline; }
.datos dt { font: var(--w-regular) var(--t-small)/1.4 var(--font-text); color: var(--papel-suave); }
.datos dd .link { min-height: 44px; }  /* fase 16: ≥ 44 px también aquí */
.datos dd > .gl { display: none; }
html[lang="en"] .datos dd > .gl { display: block; }
/* mapa (fase 16): sin panel con la dirección repetida; un enlace "Ver mapa" y, al tocarlo, el iframe en 4:3 */
.mapa { position: relative; margin-top: var(--sp-2); }
.mapa.cargado { aspect-ratio: 4 / 3; background: var(--noche-alta); margin-top: var(--sp-5); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.donde-video { margin-top: var(--sp-7); }
.donde-foto { margin-top: var(--sp-7); }
@media (min-width: 700px) {
  .donde-txt, .mapa { grid-column: 1 / span 6; }
  .donde-foto { grid-column: 3 / span 4; }
}
@media (min-width: 1024px) {
  /* fase 16: la puerta arranca a la altura del titular; el video del letrero (720p) baja a 5 columnas */
  .donde-h { grid-column: 1 / span 7; grid-row: 1; }
  .donde-glh { grid-column: 1 / span 7; grid-row: 2; }
  .donde-txt { grid-column: 1 / span 6; grid-row: 3; }
  .mapa { grid-column: 1 / span 6; grid-row: 4; align-self: start; }
  .donde-foto { grid-column: 8 / span 5; grid-row: 1 / span 5; margin-top: 0; align-self: start; }
  .donde-video { grid-column: 1 / span 5; grid-row: 5; margin-top: var(--sp-8); }
}

/* ================= LA CARTA en el landing: destacados (fase 15; la carta completa vive en carta/) ================= */
.carta { background: var(--carta-suelo); color: var(--carta-tinta); }
.carta-h { color: var(--carta-azul); }
.carta-intro { margin-top: var(--sp-5); display: grid; gap: var(--sp-2); align-content: end; }
@media (min-width: 1024px) {
  .carta-cab .carta-h { grid-column: 1 / span 6; }
  .carta-cab .carta-intro { grid-column: 7 / span 6; margin-top: 0; justify-items: start; }
}
/* la fila de la carta: nombre azul en MAYÚSCULAS, precio magenta tabular (se comparte con carta/) */
.fn { font: var(--w-semi) var(--t-lead)/1.15 var(--font-text); letter-spacing: 0; color: var(--carta-azul); text-transform: uppercase; overflow-wrap: break-word; }
.fp { font: var(--w-semi) var(--t-lead)/1.15 var(--font-text); color: var(--carta-magenta); white-space: nowrap; text-align: right; }
.fd { font: var(--w-light) var(--t-body)/1.5 var(--font-text); letter-spacing: 0; max-width: 40em; text-wrap: pretty; color: var(--carta-tinta); }
.dest-gs { margin-top: var(--sp-8); row-gap: var(--sp-8); align-items: start; }
.dest-h { font: var(--w-regular) var(--t-lead)/1.15 var(--font-text); letter-spacing: 0; }
.dest-h .link { font: inherit; color: var(--carta-tinta); min-height: 44px; }
.dest-l { display: grid; gap: var(--sp-6); margin-top: var(--sp-4); }
.dest { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: var(--sp-4); align-items: start; align-content: start; }
.dest-t { display: grid; gap: var(--sp-2); align-content: start; }
.dest-n { display: grid; gap: var(--sp-1); }
.dest .fn, .dest .fp { font-size: var(--t-body); }
.dest .fp { text-align: left; }
.dest .fd { font-size: var(--t-small); line-height: var(--lh-small); letter-spacing: 0.01em; }
.dest-acc { display: grid; gap: var(--sp-3); align-content: start; }
.dest-acc .acc { margin-top: 0; }
@media (min-width: 700px) {
  .dest-l { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--gutter); }
  .dest { grid-template-columns: 1fr; gap: var(--sp-3); }
  .dest-n { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--sp-3); }
  .dest .fp { text-align: right; }
  .dest-mocktails-sin-alcohol { grid-column: 1 / span 4; }
  .dest-mocktails-sin-alcohol .dest-l { grid-template-columns: 1fr; }
  .dest-acc { grid-column: 5 / span 4; align-self: end; }
}
@media (min-width: 1024px) {
  .dest-gs { row-gap: var(--sp-9); }
  .dest-cocteleria-de-la-casa, .dest-comilona { grid-column: 1 / span 9; }
  .dest-mocktails-sin-alcohol { grid-column: 10 / span 3; grid-row: 1; }
  .dest-acc { grid-column: 10 / span 3; grid-row: 2; align-self: end; }
  .dest .fn, .dest .fp { font-size: var(--t-lead); }
  .dest .fd { font-size: var(--t-body); line-height: 1.45; letter-spacing: 0; }
}

/* ================= PIE ================= */
.pie-sitio { background: var(--noche); color: var(--papel); padding-top: clamp(72px, 4vw + 48px, 128px); padding-bottom: var(--margin); overflow: hidden; }
.firma { font: var(--w-regular) var(--t-head)/var(--lh-head) var(--font-display); letter-spacing: var(--track-display); text-wrap: balance; text-transform: uppercase; }
.pie-datos { margin-top: var(--sp-6); display: grid; gap: var(--sp-1); }
.pie-datos .link { font-size: var(--t-small); margin-right: var(--sp-5); }
.pie-creditos { margin-top: var(--sp-6); display: grid; gap: var(--sp-2); color: var(--papel-suave); }
.pie-logo { width: min(calc(100% - 2 * var(--margin)), 960px); height: auto; aspect-ratio: 1956 / 897; margin: var(--sp-9) var(--margin) 0; color: var(--papel); }
@media (min-width: 1024px) {
  .firma, .firma-gl { grid-column: 1 / span 7; }
  .pie-datos { grid-column: 9 / span 4; grid-row: 1 / span 2; margin-top: 0; align-self: end; }
  .pie-creditos { grid-column: 9 / span 4; }
}

/* ================= movimiento =================
   Un momento autoral (la franja se imprime); reveals una sola vez; nada atado a la velocidad del scroll.
   Los estados ocultos solo los pone site.js, y solo a lo que todavía está bajo el pliegue (lo que ya se ve al cargar no se anima).
   El cuerpo de texto aparece sin animación (sistema.md §6): no hay reveal de párrafos ni de citas. */
@media (prefers-reduced-motion: no-preference) {
  .rv-arm { clip-path: inset(0 0 100% 0); }
  .rv-arm.rv-in { clip-path: inset(0 0 0 0); transition: clip-path var(--d-photo) var(--ease-in-out); }
  .rv-arm.crece, .rv-arm[data-rv="crece"] { clip-path: inset(10% 10% 10% 10%); }
  .rv-arm.crece.rv-in, .rv-arm[data-rv="crece"].rv-in { clip-path: inset(0 0 0 0); transition: clip-path var(--d-hero) var(--ease-out); }
  .h-arm .li { transform: translateY(105%); }
  .h-arm.rv-in .li { transform: none; transition: transform var(--d-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger-card)); }
  /* la franja se imprime: campo 700 in-out → titular 800 out (+240) → foto 600 in-out (+360) */
  /* fase 16: el recorte va en el hijo (.hoy-dia) y la sección observada nunca se recorta: el observador la ve siempre */
  .hoy.arm { background: var(--noche); }
  .hoy.arm > .hoy-dia { clip-path: inset(0 100% 0 0); background: var(--campo); }
  .hoy.arm .li { transform: translateY(105%); }
  .hoy.arm .hoy-foto > .f { clip-path: inset(0 0 100% 0); }
  .hoy.arm.imprime { background: var(--campo); transition: background-color 0s linear var(--d-reveal); }
  .hoy.arm.imprime > .hoy-dia { clip-path: inset(0 0 0 0); transition: clip-path var(--d-reveal) var(--ease-in-out); }
  .hoy.arm.imprime .li { transform: none; transition: transform var(--d-hero) var(--ease-out); transition-delay: calc(var(--delay-hoy-h) + var(--i, 0) * var(--stagger-card)); }
  .hoy.arm.imprime .hoy-foto > .f { clip-path: inset(0 0 0 0); transition: clip-path var(--d-photo) var(--ease-in-out) var(--delay-hoy-foto); }
}
@media (prefers-reduced-motion: reduce) {
  .rv-arm, .h-arm .ln, .hoy.arm > .hoy-dia { opacity: 0; }
  .rv-arm.rv-in, .h-arm.rv-in .ln, .hoy.arm.imprime > .hoy-dia { opacity: 1; transition: opacity var(--d-fade-reduced) var(--ease-hover); }
  .hoja { clip-path: none; opacity: 0; transition: opacity var(--d-fade-reduced) var(--ease-hover), visibility 0s linear var(--d-fade-reduced); }
  .hoja.abierta { opacity: 1; transition: opacity var(--d-fade-reduced) var(--ease-hover), visibility 0s linear 0s; }
  .hoja.al-instante { transition: none; }
  .btn, .link, .lang-b, .menu-b, .vid-b, .nav-logo { transition-property: background-color, color, text-decoration-color; }
  .btn:active, .link:active, .lang-b:active, .menu-b:active, .vid-b:active, .nav-logo:active { transform: none; }
}

/* ================= 404 (pulido 3) ================= */
.no-existe { min-height: calc(100vh - var(--nav-h)); min-height: calc(100svh - var(--nav-h)); display: grid; align-content: center; padding-block: var(--sp-8); }
.no-existe-h { color: var(--papel-suave); }
.no-existe-d { margin-top: var(--sp-4); }
.no-existe-datos { margin-top: var(--sp-6); }