/* Caras latinas de Cormorant Garamond y Jost (OFL), servidas desde el mismo origen. tools/fuentes.py */
@font-face { font-family: 'EB Garamond'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fuentes/eb-garamond-400-italica.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; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fuentes/eb-garamond-400.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; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fuentes/eb-garamond-500.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/fuentes/jost-300.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fuentes/jost-400.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; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fuentes/jost-500.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; }

/* Respaldo medido (tools/respaldo.py): Georgia y Arial ajustadas a EB Garamond y Jost mientras cargan (D-69). */
@font-face { font-family: 'EB Garamond respaldo'; src: local('Georgia');
  size-adjust: 85.24%; ascent-override: 118.14%; descent-override: 34.96%; line-gap-override: 0.00%; }
@font-face { font-family: 'Jost respaldo'; src: local('Arial');
  size-adjust: 95.62%; ascent-override: 111.90%; descent-override: 39.22%; line-gap-override: 0.00%; }

/* Sitio Tempo & Julieta desde R7 (D-64, D-65): la sensación de dotsmemories (anatomía dotsmemories-weddings.md: lienzo
   crema, una tarjeta blanca grande por acto, fotos que flotan, titular serif con remate oscuro, píldora azul, sombras de
   una sola base), la firma de niccolomiranda en las costuras (la hoja que se rasga al cambiar de página; código propio,
   su licencia no permite usar el suyo) y la identidad de T&J (paleta D-43, logo, EB Garamond + Jost; D-69 cambió Cormorant por sus acentos).
   Tokens arriba, reglas abajo. Movimiento: un token (.3s ease-out) para lo chico; nada con movimiento reducido. */
:root {
  /* D-43 (29-sep): los colores de dotsmemories, medidos en su anatomía */
  --lienzo: #f8f7f5;
  --papel: #fff;
  --tinta: #15151a;
  --tinta-55: rgba(21, 21, 26, .56);  /* solo en titulares grandes (≥ 24 px): pasa el umbral de texto grande */
  --tinta-2: #5c5c66;                 /* texto secundario: 6.17:1 sobre el lienzo */
  --acento: #006ce3;                  /* el azul #0072EF al 95 %: 4.61:1 en rótulos chicos */
  --acento-osc: #0055b3;              /* el mismo azul, más oscuro, para texto sobre su tinte claro (las etiquetas): 4.06 → 6.0 */
  --oro: #8a6a2e;                     /* el dorado del logo, oscurecido para texto chico */
  --linea: rgba(20, 20, 26, .08);
  --sombra: 16, 24, 40;               /* dotsmemories: todas sus sombras salen de rgba(16,24,40, …) */
  --serif: 'EB Garamond', 'EB Garamond respaldo', Georgia, serif;   /* D-69: Cormorant pinta los acentos corridos (tools/acentos-fuentes.mjs); respaldo medido en fuentes/respaldo.css */
  --sans: Jost, 'Jost respaldo', 'Helvetica Neue', Arial, sans-serif;
  --mov: .3s ease-out;
  --curva: cubic-bezier(.2, .7, .2, 1);
  --lado: clamp(20px, 5vw, 72px);
  font-size: 18px;
}
@media (max-width: 1199px) { :root { font-size: 16px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-variant-numeric: lining-nums; background: var(--lienzo); color: var(--tinta); font-family: var(--sans); font-weight: 300; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; }
a { color: inherit; }
p { margin: 0; }

/* ───────── botones y enlaces ───────── */
.pildora { display: inline-flex; align-items: center; gap: 8px; background: var(--acento); color: #fff; text-decoration: none; font: 500 .82rem/1 var(--sans);
  padding: 15px 26px; min-height: 44px; border-radius: 100px; box-shadow: 0 8px 20px -10px rgba(0, 108, 227, .6); transition: transform var(--mov), box-shadow var(--mov); }
.pildora:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(0, 108, 227, .7); }
/* el subrayado que se encoge (rhubarb §10.12), para los enlaces de texto */
.enlace { position: relative; display: inline-block; text-decoration: none; padding: 12px 0 8px; font: 400 .8rem/1 var(--sans); letter-spacing: .04em; }
.enlace::after { content: ''; position: absolute; left: 0; bottom: 4px; height: 1px; width: 100%; background: currentColor; transition: width var(--mov); }
.enlace:hover::after, .enlace:focus-visible::after { width: 15%; }

/* ───────── cabecera ───────── */
.cab { position: relative; z-index: 5; max-width: 1320px; margin: 0 auto; padding-inline: 44px; padding-block: 34px 0;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.cab .casa { justify-self: start; display: block; }
.cab .logo { height: 54px; width: auto; }
.cab nav { display: flex; gap: 30px; }
.cab nav a { font: 500 .8rem/1 var(--sans); text-decoration: none; padding: 14px 0; position: relative; }
.cab nav a[aria-current="page"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--acento); }
.cab .pildora { justify-self: end; }

/* ───────── hero: la tarjeta blanca de dotsmemories, con grano de papel y el tinte en azul y dorado ───────── */
.hero { padding: 20px; margin-top: -112px; }
.tarjeta { position: relative; overflow: hidden; border-radius: 50px; min-height: min(calc(100vh - 40px), 900px); display: grid; place-items: center;
  padding: 230px 50px 150px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 620px at 50% -8%, rgba(0, 108, 227, .12), rgba(218, 178, 84, .12) 44%, #fdfdfc 78%);
  box-shadow: 0 2px 4px rgba(var(--sombra), .04), 0 30px 60px -30px rgba(var(--sombra), .16); }
.centro { display: grid; justify-items: center; text-align: center; max-width: 880px; }
.centro > :not(.fotos) { position: relative; z-index: 3; }
.eyebrow { font: 400 .95rem/1 var(--sans); color: var(--tinta-2); letter-spacing: .02em; }
.hero h1 { margin-top: 25px; font-weight: 400; font-size: clamp(2.2rem, 4.9vw, 4.2rem); line-height: 1.02; color: var(--tinta-55); max-width: 838px; }
.hero h1 span { color: var(--tinta); font-weight: 500; }
.hero .sub { margin-top: 20px; max-width: 560px; font-size: 1rem; color: var(--tinta-2); }
.hero .lead { margin-top: 10px; max-width: 560px; font-size: .9rem; color: var(--tinta-2); }
.centro .pildora { margin-top: 30px; }
.prueba { margin-top: 80px; display: grid; justify-items: center; gap: 6px; }
.prueba::before { content: ''; width: 34px; height: 1px; background: var(--oro); margin-bottom: 8px; }
.prueba b { font: 500 1.3rem/1 var(--serif); }
.prueba span { font-size: .82rem; color: var(--tinta-2); }
/* las cinco fotos que flotan (dotsmemories: radio 22, sombra de dos capas); el scroll las mueve poco (js/sitio.js) */
.flota { position: absolute; z-index: 1; margin: 0; border-radius: 22px; overflow: hidden; box-shadow: 0 56px 34px 0 rgba(0, 0, 0, .04), 0 25px 25px 0 rgba(0, 0, 0, .07); }
.flota img { width: 100%; height: 100%; object-fit: cover; }
.f1 { left: 5%; top: 17%; width: 150px; height: 184px; border-radius: 16px; }
.f2 { right: 6%; top: 15%; width: 128px; height: 168px; }
.f3 { left: 4%; bottom: -3%; width: 236px; height: 300px; }
.f4 { right: 3%; bottom: 8%; width: 250px; height: 310px; z-index: 2; }
.f5 { right: 15%; bottom: 3%; width: 262px; height: 166px; }
@media (min-width: 1025px) { .fotos { display: contents; } }

/* ───────── cabeceras de sección ───────── */
.seccion { max-width: 1120px; margin: 0 auto; padding-inline: 24px; padding-block: 120px 0; }
.cabeza { display: grid; justify-items: center; text-align: center; gap: 12px; max-width: 680px; margin: 0 auto; }
.cabeza h2 { font-weight: 500; font-size: clamp(1.8rem, 3vw, 2.4rem); text-wrap: balance; }
.cabeza p { font-size: 1.05rem; color: var(--tinta-2); max-width: 520px; }
.kicker { font: 500 .7rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.grande { font-weight: 400; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.02; color: var(--tinta-55); max-width: 838px; text-wrap: balance; }
.grande span { color: var(--tinta); font-weight: 500; }

/* ───────── puertas (D-30 en el lenguaje nuevo): la que se toca se ensancha, enseña su frase y apaga a las otras ───────── */
.puertas { margin: 44px auto 0; max-width: 1180px; height: 540px; display: flex; gap: 14px; }
.puerta { position: relative; flex: 1 1 0; min-width: 0; border-radius: 26px; overflow: hidden; color: #fff; text-decoration: none;
  box-shadow: 0 2px 4px rgba(var(--sombra), .04), 0 18px 40px rgba(var(--sombra), .1); transition: flex-grow .7s var(--curva), filter .5s; }
.puerta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.puerta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 12, 16, .74), rgba(12, 12, 16, 0) 58%); }
.puerta .txt { position: absolute; left: 26px; right: 26px; bottom: 24px; z-index: 1; display: grid; gap: 8px; }
.puerta .nombre { font: 400 clamp(1.7rem, 2.5vw, 2.4rem)/1 var(--serif); }
.puerta .frase { font-size: .86rem; line-height: 1.45; max-width: 32ch; max-height: 0; overflow: hidden; opacity: 0; transform: translateY(8px);
  transition: max-height .6s, opacity .45s .1s, transform .45s .1s; }
.puerta .ir { justify-self: start; font: 500 .74rem/1 var(--sans); background: rgba(255, 255, 255, .95); color: var(--tinta); border-radius: 100px; padding: 10px 14px;
  display: inline-flex; gap: 8px; }
.puerta .ir i { font-style: normal; transition: transform .2s; }
.puertas:hover .puerta { filter: saturate(.75) brightness(.8); }
.puertas .puerta:hover, .puertas .puerta:focus-visible { flex-grow: 1.7; filter: none; }
.puerta:hover img { transform: scale(1.03); }
.puerta:hover .frase, .puerta:focus-visible .frase { max-height: 6em; opacity: 1; transform: none; }
.puerta:hover .ir i { transform: translateX(4px); }
.puerta:active { filter: brightness(.85); }
.pie-sec { margin-top: 28px; text-align: center; font-size: .9rem; color: var(--tinta-2); }

/* ───────── cómo se contrata: renglones de término y texto (R5) en el lenguaje nuevo ───────── */
.renglones { margin: 40px auto 0; max-width: 860px; background: var(--papel); border: 1px solid var(--linea); border-radius: 26px; padding: 10px 34px;
  box-shadow: 0 2px 4px rgba(var(--sombra), .04), 0 18px 40px rgba(var(--sombra), .08); }
.renglon { display: grid; grid-template-columns: 190px 1fr; gap: 24px; padding: 20px 0; border-top: 1px solid var(--linea); }
.renglon:first-child { border-top: 0; }
.renglon dt { font: 500 .7rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--acento); }
.renglon dd { margin: 0; font-size: .98rem; }

/* ───────── todo lo que el evento necesite: las filas de dotsmemories ───────── */
/* la numeración es del CSS (contador), no texto: es orden, no una cifra que deba tener fuente */
[data-bloque="partes"] { counter-reset: fila; }
.fila { counter-increment: fila; }
.fila .etq::before { content: counter(fila, decimal-leading-zero); }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding-block: 56px; }
.fila + .fila { border-top: 1px solid var(--linea); }
.fila.rev .fila-txt { order: 2; }
.fila-txt { display: grid; gap: 14px; justify-items: start; }
.etq { font: 500 .72rem/1 var(--sans); color: var(--acento-osc); background: rgba(0, 108, 227, .09); border-radius: 100px; padding: 6px 12px; }
.fila-txt h3 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
.checks { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 12px; align-items: center; font-size: .95rem; color: #2c2c33; }
.checks li::before { content: '✓'; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem;
  background: rgba(0, 108, 227, .12); color: var(--acento); }
.fila .pildora { margin-top: 8px; box-shadow: none; }
.fila-pic { margin: 0; height: 400px; border-radius: 26px; overflow: hidden; box-shadow: 0 2px 6px rgba(var(--sombra), .05), 0 30px 60px rgba(var(--sombra), .12); }
.fila-pic img { width: 100%; height: 100%; object-fit: cover; }
.y-mas { text-align: center; font: italic 400 1.5rem/1.2 var(--serif); color: var(--tinta-2); margin-top: 40px; }   /* R7: los dos jueces la veían pegada a la última foto */

/* ───────── artistas: el carrusel de testimonios de dotsmemories, sin fotos ───────── */
.shows { padding-block: 132px 0; display: grid; justify-items: center; text-align: center; }
.shows .grande, .shows .sub { padding-inline: 20px; }
.shows .sub, .cierre .sub { margin-top: 16px; max-width: 574px; font-size: 1.02rem; color: var(--tinta-2); }
.carrusel { list-style: none; margin: 44px 0 0; padding: 12px max(20px, calc((100vw - 1180px) / 2)) 30px; width: 100%; display: flex; gap: 30px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; text-align: left; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }
.artista { flex: 0 0 min(340px, 80vw); scroll-snap-align: center; background: var(--papel); border-radius: 32px; padding: 26px 24px 28px; display: grid; gap: 8px; align-content: start;
  box-shadow: 0 6.4px 14px rgba(0, 0, 0, .07), 0 30px 40px -30px rgba(0, 0, 0, .12); }
.genero { font: 500 .66rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--oro); }
.artista b { font: 500 1.6rem/1.05 var(--serif); }
.artista p { margin-top: 4px; font-size: .9rem; color: var(--tinta-2); }
.nota-sec { margin-top: 6px; padding-inline: 20px; font-size: .86rem; color: var(--tinta-2); }

/* ───────── propuestas recientes ───────── */
.lista-casos { counter-reset: caso; list-style: none; margin: 30px auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.lista-casos li { counter-increment: caso; display: grid; grid-template-columns: 44px auto 1fr; gap: 12px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--linea); }
.lista-casos .num::before { content: counter(caso, decimal-leading-zero); }
.lista-casos .num { font: 400 1.15rem/1 var(--serif); color: var(--acento); font-variant-numeric: lining-nums tabular-nums; }
.lista-casos .etq { font-size: .66rem; padding: 5px 10px; }
.lista-casos .caso { font-size: .95rem; }

/* ───────── quién produce ───────── */
.quien { display: grid; justify-items: center; text-align: center; gap: 12px; }
.quien .logo { height: 80px; width: auto; }
.quien h2 { margin-top: 6px; font-weight: 500; font-size: clamp(1.7rem, 2.8vw, 2.1rem); }
.quien p { color: var(--tinta-2); }

/* ───────── cierre: el de dotsmemories, con dos píldoras de cifra y fotos difuminadas ───────── */
.cierre { position: relative; margin-top: 150px; min-height: 700px; padding-inline: 20px; padding-block: 90px 60px; display: grid; justify-items: center; align-content: center;
  text-align: center; overflow: hidden; }
.cierre > :not(.borrosa) { position: relative; z-index: 2; }
.borrosa { position: absolute; margin: 0; border-radius: 32px; overflow: hidden; border: 2px solid #fff; box-shadow: 0 56px 34px rgba(0, 0, 0, .04), 0 25px 25px rgba(0, 0, 0, .07); z-index: 1; }
.borrosa img { width: 100%; height: 100%; object-fit: cover; }
.b1 { left: 4%; top: 6%; width: 210px; height: 150px; filter: blur(3.8px); opacity: .5; }
.b2 { right: 5%; top: 2%; width: 180px; height: 230px; filter: blur(5px); opacity: .55; }
.b3 { left: 9%; bottom: 6%; width: 190px; height: 240px; filter: blur(7px); opacity: .45; }
.b4 { right: 10%; bottom: 8%; width: 220px; height: 160px; }
.pils { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 34px; }
.pil { width: 300px; max-width: 100%; border: 2px solid rgba(0, 0, 0, .15); border-radius: 36px; padding: 14px 18px; display: grid; gap: 2px; background: rgba(248, 247, 245, .9); }
.pil b { font: 500 1.35rem/1.1 var(--serif); }
.pil span { font-size: .82rem; color: var(--tinta-2); }
.cierre .pildora { margin-top: 30px; }
.cierre .enlace { margin-top: 12px; }

/* ───────── pie de cuatro columnas ───────── */
.pie { background: #faf9f7; border-top: 1px solid #e8e5e0; margin-top: 60px; }
.pie-in { max-width: 1100px; margin: 0 auto; padding-inline: 24px; padding-block: 48px 32px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 32px; }
.pie-in .logo { height: 50px; width: auto; }
.pie-in p { margin-top: 10px; font-size: .8rem; line-height: 1.6; color: #4a4a4a; }
.pie-in h2 { font: 500 .8rem/1.3 var(--sans); color: #1f1f1f; margin-bottom: 6px; }
.pie-in a { display: block; font-size: .8rem; line-height: 1.4; padding-block: 6px; color: #4a4a4a; text-decoration: none; }
.pie-in a:hover { color: var(--acento); }
.pie-baja { max-width: 1100px; margin: 0 auto; padding-inline: 24px; padding-block: 16px 28px; border-top: 1px solid #eeebe6; font-size: .76rem; color: #6e6e6e; }

/* ───────── la firma de niccolomiranda, con código propio: la hoja que se rasga al cambiar de página (js/sitio.js) ───────── */
.cortina { position: fixed; inset: 0; z-index: 50; pointer-events: none; visibility: hidden; }
.cortina .hoja, .cortina .fibra { position: absolute; left: 0; right: 0; height: 120vh; top: 100vh; }
.cortina .fibra { background: #fbfaf7; }
.cortina .hoja { background: var(--acento) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cortina .rotulo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff; font: 400 clamp(2rem, 6vw, 4rem)/1 var(--serif); opacity: 0; white-space: nowrap; transition: opacity .3s; }
.cortina.sube, .cortina.llega { visibility: visible; }
.cortina.sube .fibra { transition: transform .7s cubic-bezier(.7, 0, .2, 1); transform: translateY(-114vh); }
.cortina.sube .hoja { transition: transform .7s cubic-bezier(.7, 0, .2, 1) .06s; transform: translateY(-112vh); }
.cortina.sube .rotulo { opacity: 1; transition-delay: .5s; }
/* R8: la página que llega nace tapada (html.llegando lo pone un script del <head> antes de la primera pintura) */
html.llegando .cortina { visibility: visible; }
html.llegando .cortina .fibra { transform: translateY(-114vh); }
html.llegando .cortina .hoja { transform: translateY(-112vh); }
html.llegando .cortina .rotulo { opacity: 1; }
.cortina.llega .fibra { transform: translateY(-114vh); }
.cortina.llega .hoja { transform: translateY(-112vh); }
.cortina.llega .rotulo { opacity: 1; }
.cortina.llega.sale .fibra, .cortina.llega.sale .hoja { transition: transform .75s cubic-bezier(.7, 0, .2, 1); transform: translateY(-240vh); }
.cortina.llega.sale .rotulo { opacity: 0; }

/* ───────── móvil ───────── */
@media (max-width: 1024px) {
  .cab { padding-inline: 20px; grid-template-columns: 1fr auto; } .cab nav { display: none; } .cab .logo { height: 46px; }
  .cab .pildora { background: none; color: var(--tinta); box-shadow: none; padding: 14px 0 8px; border-radius: 0; border-bottom: 1px solid var(--tinta); font-weight: 400; }
  .hero { padding: 12px; margin-top: -90px; }
  .tarjeta { border-radius: 40px; min-height: 0; padding: 124px 22px 30px; place-items: start center; }
  .hero h1 { font-size: clamp(2.05rem, 8.4vw, 2.9rem); }
  .prueba { margin-top: 36px; }
  .flota { position: relative; left: auto; right: auto; top: auto; bottom: auto; }
  .fotos { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; margin-top: 34px; width: 100%; position: relative; z-index: 2; }
  .fotos .flota { width: 100%; height: 150px; }
  .fotos .f3 { grid-row: span 2; height: 310px; }
  .seccion { padding-block: 84px 0; }
  .puertas { flex-direction: column; height: auto; max-width: 480px; }
  .puerta { flex: none; height: 300px; }
  .puerta .frase { max-height: none; opacity: 1; transform: none; }
  .puertas:hover .puerta { filter: none; }
  .renglones { padding: 6px 22px; }
  .renglon { grid-template-columns: 1fr; gap: 4px; }
  .fila, .fila.rev { grid-template-columns: 1fr; gap: 24px; padding-block: 40px; }
  .fila.rev .fila-txt { order: 0; }
  .fila-pic { height: 260px; order: -1; }
  .lista-casos { grid-template-columns: 1fr; }
  .shows { padding-top: 96px; }
  .cierre { margin-top: 96px; min-height: 0; }
  .b1, .b2, .b3 { display: none; }
  .b4 { position: relative; right: auto; bottom: auto; order: -1; width: 70%; height: 150px; margin-bottom: 26px; }
  .pie-in { grid-template-columns: 1fr 1fr; }
  .pie-in a { padding-block: 12px; }
}
@media (max-width: 520px) { .pie-in { grid-template-columns: 1fr; } }

/* ───────── lo que exige la plantilla común (sitio-web/plantilla/estilos.css) ───────── */
.saltar { position: absolute; left: -9999px; z-index: 10; background: var(--lienzo); color: var(--tinta); padding: 10px 14px; }
.saltar:focus { left: 16px; top: 16px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* ───────── acabado (D-47; medidos con tools/acabado.mjs, fuentes: rhubarb.md y PATRONES.md) ───────── */
h1, h2, .puerta .nombre { text-wrap: balance; }            /* titulares sin una palabra sola en el último renglón */
p { text-wrap: pretty; }                                   /* párrafos sin viuda */
::selection { background: var(--acento); color: #fff; }
a, button { -webkit-tap-highlight-color: transparent; }   /* sin el destello gris de iOS al tocar; la puerta tocada responde con su :active */
.p-404 .error { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; text-align: center; }
.p-404 .error h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 400; }
/* R7, jueces de defectos: el atajo font: reinicia font-variant-numeric y la serif pinta cifras de estilo antiguo
   («10 a 10 000» se leía «IO a IO OOO»). Se vuelve a pedir lining-nums en todo lo que lleva el atajo y muestra cifras */
.prueba b, .pil b, .artista b, .lista-casos .num, .etq, .cortina .rotulo, .puerta .nombre { font-variant-numeric: lining-nums; }

/* Aviso de privacidad (D-72): una columna de lectura de 68 caracteres, los títulos con la serif del sitio */
.p-aviso .aviso { max-width: 68ch; margin: 0 auto; padding-inline: 20px; padding-block: 140px 40px; display: grid; gap: 14px; }
.p-aviso .aviso h1 { margin: 0; font: 400 clamp(2.2rem, 4vw, 3.2rem)/1.05 var(--serif); }
.p-aviso .aviso h2 { margin: 26px 0 4px; font: 500 1.5rem/1.15 var(--serif); }
.p-aviso .aviso p { margin: 0 0 10px; line-height: 1.6; }
.p-aviso .aviso a { color: var(--acento-osc); }
.p-aviso #no-medir { margin-top: 4px; border: 0; cursor: pointer; }
.p-aviso #no-medir:disabled { opacity: .55; cursor: default; }
.p-aviso .aviso .correo, .pie-baja a { display: inline-flex; align-items: center; min-height: 44px; }   /* controles 44 px en móvil */

/* R8 · hoja de detalles (Angel, 1-oct: «el destino tiene que ser una hoja de detalles y al lado la opción mandar mensaje»):
   el contenido a la izquierda y la tarjeta de WhatsApp al lado, fija al bajar; en el móvil la tarjeta es una barra abajo */
.detalle { max-width: 1180px; margin: 0 auto; padding-inline: 24px; padding-block: 60px 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.migas { font-size: .82rem; color: var(--tinta-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.migas a { color: var(--tinta-2); display: inline-flex; align-items: center; min-height: 44px; }
.migas [aria-current] { color: var(--tinta); }
.hoja h1 { margin-top: 6px; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 1.04; }
.hoja > .sub { margin-top: 16px; max-width: 620px; font-size: 1.05rem; color: var(--tinta-2); }
.portada { margin: 30px 0 0; height: clamp(240px, 38vw, 440px); border-radius: 26px; overflow: hidden; box-shadow: 0 2px 6px rgba(var(--sombra), .05), 0 30px 60px rgba(var(--sombra), .12); }
.portada img { width: 100%; height: 100%; object-fit: cover; }
.bloque { padding-top: 64px; }
.bloque h2, .hoja .seccion .cabeza h2 { font-weight: 500; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.tipos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tipo { display: grid; grid-template-rows: 170px auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 22px; overflow: hidden; text-decoration: none;
  box-shadow: 0 2px 4px rgba(var(--sombra), .04), 0 18px 40px rgba(var(--sombra), .08); transition: transform var(--mov), box-shadow var(--mov); }
.tipo:hover { transform: translateY(-4px); box-shadow: 0 8px 18px rgba(var(--sombra), .12); }
.tipo img { width: 100%; height: 100%; object-fit: cover; }
.tipo-txt { display: grid; gap: 6px; padding: 16px 18px 18px; }
.tipo-txt b { font: 500 1.35rem/1.1 var(--serif); }
.tipo .ir { font: 500 .8rem/1 var(--sans); color: var(--acento-osc); }
.grupos { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 30px; }
.nota-bloque { margin-top: 10px; color: var(--tinta-2); }
/* D-78: opciones, no lo incluido: etiquetas sin palomita (la palomita dice «viene incluido») */
.opciones { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.opciones li { font-size: .88rem; padding: 7px 13px; border: 1px solid var(--linea); border-radius: 100px; background: var(--papel); }
.grupo h3 { font-weight: 500; font-size: 1.35rem; margin-bottom: 12px; }
.hoja .y-mas { margin-top: 22px; font-family: var(--serif); font-style: italic; color: var(--tinta-2); }
.hoja .lista-casos { grid-template-columns: 1fr; margin: 18px 0 0; }
.hoja .seccion { padding-inline: 0; padding-block: 64px 0; }
.hoja .seccion .cabeza { justify-items: start; text-align: left; margin: 0; }
.hoja .renglones { margin: 22px 0 0; }
.lado { position: sticky; top: 24px; padding-top: 50px; }
.tarjeta-wa { background: var(--papel); border: 1px solid var(--linea); border-radius: 26px; padding: 26px 24px; display: grid; gap: 12px;
  box-shadow: 0 2px 4px rgba(var(--sombra), .04), 0 30px 60px -30px rgba(var(--sombra), .2); }
.lado-tit { font: 500 1.45rem/1.1 var(--serif); }
.dato { font-size: .88rem; color: var(--tinta-2); }
.dato b { color: var(--tinta); font-weight: 500; font-variant-numeric: lining-nums; }
.tarjeta-wa .pildora { justify-content: center; margin-top: 6px; }
.tarjeta-wa .nota { font-size: .78rem; color: var(--tinta-2); }
.eyebrow a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.eyebrow a:hover { color: var(--tinta); }
.cab .menu { display: none; }
@media (max-width: 1024px) {
  .detalle { grid-template-columns: 1fr; gap: 0; padding-block: 24px 0; padding-inline: 20px; }
  .tipos, .grupos { grid-template-columns: 1fr; }
  .lado { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 20; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(248, 247, 245, .94); backdrop-filter: blur(8px); border-top: 1px solid var(--linea); }
  .tarjeta-wa { background: none; border: 0; box-shadow: none; padding: 0; }
  .tarjeta-wa > :not(.pildora) { display: none; }
  .tarjeta-wa .pildora { margin: 0; }
  .p-hoja .pie { padding-bottom: 80px; }   /* la barra de WhatsApp no tapa el final del pie */
  .cab .menu { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; background: none; border: 0; font: 500 .85rem/1 var(--sans); color: var(--tinta); cursor: pointer; }
  .cab { grid-template-columns: 1fr auto auto; gap: 14px; }
  .cab nav.abierta { display: grid; position: absolute; top: 100%; left: 12px; right: 12px; z-index: 30; gap: 0; padding: 8px 20px; background: var(--papel);
    border: 1px solid var(--linea); border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(var(--sombra), .3); }
  .cab nav.abierta a { padding: 14px 0; min-height: 44px; display: flex; align-items: center; font-size: 1rem; border-bottom: 1px solid var(--linea); }
  .cab nav.abierta a:last-child { border-bottom: 0; }
}

/* etapa 1 (f3/tj.md §2): corporativos e institucionales pasan a TEMPO; arriba de sus páginas, la salida */
.puente { margin: 0; padding: 10px 24px; text-align: center; font-size: 14px; background: var(--tinta, #1d1d1f); }
.puente a { display: inline-block; min-height: 24px; line-height: 24px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }