/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — LA PORTADA CON LA GRIETA DE LUZ
   ───────────────────────────────────────────────────────────────────────────
   Los bloques reales de la portada, en su orden de siempre, acomodados como
   las secciones de la maqueta elegida (propuesta 3 invertida,
   SLT-Next/_etapa2/esteticas/propuesta-3/index.html). Lo común (letras,
   paleta, botones, la caja) está en app/grieta.css; acá, la composición.

   CÓMO SE DIBUJA LA GRIETA
   Cada bloque es una grilla de dos lados y dice por dónde pasa la luz:
     --gr-x0  arriba del bloque · --gr-x1 en la zona del título · --gr-x en el
     resto (la línea SIN desvío: el papel mal cortado se aparta de ella).
     --gr-k y --gr-k2 son el alto de los tramos de arriba; --gr-h, dónde
     termina la zona del título; --gr-j, cuánto se quiebra el zigzag de respaldo.
   El fondo del bloque es hueso; el negro es ::before, recortado hasta la luz
   (en el bloque 1, el video de LOOP 1, recortado igual). La luz es el
   <div class="grieta-luz"> de cada bloque, con su brillo y su parpadeo. En la
   compu el negro ocupa el 56 a 68 % del ancho; en el celular la luz cruza el
   título por el medio y después se va al borde derecho, así todo lo demás
   queda sobre negro (app/grieta.js mide dónde termina cada título).

   Ningún texto cambia, ningún id ni clase de los que usan main.js, entrada.js
   o las pruebas. Las fotos y los videos van enteros: la luz nunca los parte.

   AJUSTES 2 (11/10/2026, noche): la portada igual a la maqueta en letras (la
   itálica es Cormorant Garamond), mayúsculas («Déjalo», no «DÉJALO»), tamaños
   y movimiento. Los títulos que corta la luz son dos capas (ver «El texto
   partido por la luz» y app/grieta.js): la mitad tinta cae y rebota al entrar
   el bloque en pantalla (.is-in), y la luz, que va en zigzag (--gr-j), se
   tuerce con el cursor (--gr-dx). El bloque de El Mundo se sacó; «Videoclips»
   trae un solo video.

   AJUSTES 3 (12/10/2026): EL PAPEL MAL CORTADO. El zigzag de la luz era solo
   de arriba y después bajaba casi recto; el dueño pidió que la división entre
   el negro y el hueso sea, «como un papel mal cortado», de arriba abajo. Ahora
   app/grieta.js arma, con la matemática de app/grieta-papel.js (desvíos lentos
   de 6 a 20 px, dientes de 2 a 6 px, semilla fija por sección), UN polígono por
   bloque y lo escribe en --gr-neg (el negro), --gr-neg0 (el video de la
   puerta), --gr-luzp (la luz) y, en cada título partido, --gr-ca y --gr-cb (sus
   dos mitades): la letra siempre cae del lado justo. Abajo, cada polígono se
   usa como `var(--gr-neg, <el zigzag de antes>)`: sin JavaScript queda el de
   siempre. En el celular y la tableta el corte es más chico (--gr-xr corre la
   línea de abajo hacia adentro) y el pie y las tarjetas de hueso llevan su luz
   acostada (app/grieta.css, «La luz acostada»). La lista de áreas estrena
   letra y tamaños distintos por nombre (5b).
   ═══════════════════════════════════════════════════════════════════════════ */

html:has(body.studio-portada) { background: var(--gr-noche); }
/* --gr-nav-x: por dónde pasa la luz arriba de todo, en la puerta (el bloque 1).
   Baja recta desde debajo de la franja negra del encabezado. */
body.studio-portada { --gr-nav-x: var(--gr-reparto); background: var(--gr-noche); color: var(--gr-hueso); }

/* ── La grieta, para todos los bloques ────────────────────────────────────── */
.studio-portada .grieta,
.studio-portada #ejemplos {
  --gr-pad: 48px;
  --gr-g: 30px;
  --gr-k: 120px;
  --gr-k2: 70px;
  --gr-j: 2;          /* cuánto se quiebra el zigzag (app/grieta.js lo mueve con el cursor, del reposo a 4) */
  --gr-gap: 5px;      /* lo que se abre la letra a cada lado de la luz */
  --gr-x: 62%;
  --gr-x0: var(--gr-x);
  --gr-x1: var(--gr-x);
  --gr-h: var(--gr-k);
  --gr-ya: calc(var(--gr-h) + var(--gr-k2));
  --gr-c1x: calc(var(--gr-x0) + (var(--gr-x1) - var(--gr-x0)) * .16 + 6px * var(--gr-j) + var(--gr-dx, 0px));
  --gr-c1y: calc(var(--gr-k) * .22);
  --gr-c2x: calc(var(--gr-x0) + (var(--gr-x1) - var(--gr-x0)) * .47 - 8px * var(--gr-j) + var(--gr-dx, 0px));
  --gr-c2y: calc(var(--gr-k) * .5);
  --gr-c3x: calc(var(--gr-x0) + (var(--gr-x1) - var(--gr-x0)) * .74 + 7px * var(--gr-j) + var(--gr-dx, 0px));
  --gr-c3y: calc(var(--gr-k) * .8);
  --gr-c6x: calc(var(--gr-x1) + (var(--gr-x) - var(--gr-x1)) * .3 - 6px * var(--gr-j) + var(--gr-dx, 0px));
  --gr-c6y: calc(var(--gr-h) + var(--gr-k2) * .34);
  --gr-c7x: calc(var(--gr-x1) + (var(--gr-x) - var(--gr-x1)) * .7 + 7px * var(--gr-j) + var(--gr-dx, 0px));
  --gr-c7y: calc(var(--gr-h) + var(--gr-k2) * .7);
  --gr-c9y: calc(var(--gr-ya) + (100% - var(--gr-ya)) * .31);
  --gr-c10y: calc(var(--gr-ya) + (100% - var(--gr-ya)) * .57);
  --gr-c11y: calc(var(--gr-ya) + (100% - var(--gr-ya)) * .82);
  /* El texto partido por la luz: claro a la izquierda, tinta a la derecha, y
     5 px de cada lado donde la letra se abre y deja ver la luz. */
  --gr-corte: linear-gradient(90deg, var(--gr-hueso) calc(var(--gr-x1) - 5px), transparent calc(var(--gr-x1) - 5px), transparent calc(var(--gr-x1) + 5px), var(--gr-tinta) calc(var(--gr-x1) + 5px));
  --gr-columnas: [full-start] var(--gr-pad) [l-start] calc(var(--gr-x1) - var(--gr-pad) - var(--gr-g)) [l-end] var(--gr-g) [mid] var(--gr-g) [r-start] minmax(0, 1fr) [r-end] var(--gr-pad) [full-end];
  /* LOS DOS RECORTES DE LA GRIETA. Con JavaScript, app/grieta.js escribe en cada
     bloque --gr-neg (el negro), --gr-neg0 (el negro del video de la puerta) y
     --gr-luzp (la luz): el borde de un papel mal cortado, de arriba abajo
     (app/grieta-papel.js). Sin JavaScript queda el zigzag de siempre, que son
     estos dos polígonos. */
  --gr-poly-negro: polygon(0 0, var(--gr-x0) 0, var(--gr-c1x) var(--gr-c1y), var(--gr-c2x) var(--gr-c2y), var(--gr-c3x) var(--gr-c3y), var(--gr-x1) var(--gr-k), var(--gr-x1) var(--gr-h),
    var(--gr-c6x) var(--gr-c6y), var(--gr-c7x) var(--gr-c7y), var(--gr-x) var(--gr-ya),
    calc(var(--gr-x) + 2px) var(--gr-c9y), calc(var(--gr-x) - 2px) var(--gr-c10y), calc(var(--gr-x) + 1px) var(--gr-c11y), var(--gr-x) 100%, 0 100%);
  --gr-poly-luz: polygon(var(--gr-x0) 0, var(--gr-c1x) var(--gr-c1y), var(--gr-c2x) var(--gr-c2y), var(--gr-c3x) var(--gr-c3y), var(--gr-x1) var(--gr-k), var(--gr-x1) var(--gr-h),
    var(--gr-c6x) var(--gr-c6y), var(--gr-c7x) var(--gr-c7y), var(--gr-x) var(--gr-ya), calc(var(--gr-x) + 2px) var(--gr-c9y), calc(var(--gr-x) - 2px) var(--gr-c10y), calc(var(--gr-x) + 1px) var(--gr-c11y), var(--gr-x) 100%,
    calc(var(--gr-x) + 3px) 100%, calc(var(--gr-x) + 4px) var(--gr-c11y), calc(var(--gr-x) + 1px) var(--gr-c10y), calc(var(--gr-x) + 5px) var(--gr-c9y), calc(var(--gr-x) + 3px) var(--gr-ya),
    calc(var(--gr-c7x) + 3px) var(--gr-c7y), calc(var(--gr-c6x) + 3px) var(--gr-c6y), calc(var(--gr-x1) + 3px) var(--gr-h), calc(var(--gr-x1) + 3px) var(--gr-k),
    calc(var(--gr-c3x) + 3px) var(--gr-c3y), calc(var(--gr-c2x) + 3px) var(--gr-c2y), calc(var(--gr-c1x) + 3px) var(--gr-c1y), calc(var(--gr-x0) + 3px) 0);
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  align-content: start;
  column-gap: 0;
  margin: 0;
  padding: 0;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-hueso);
}
/* Las grillas de adentro usan las mismas columnas: sin el espacio entre
   columnas que les dejaba styles.css (.fila), si no se corren. */
.studio-portada :is(.hero-cuerpo, .hero h1, .seccion-cabecera, .cabecera-lema h2, .ejemplos-cabecera) { column-gap: 0; }
.studio-portada .grieta > *,
.studio-portada #ejemplos > * {
  position: relative;
  z-index: 3;
  max-width: none;
  margin-inline: 0;
  min-width: 0;
}
/* El negro va del borde izquierdo hasta la luz. */
.studio-portada .grieta::before,
.studio-portada #ejemplos::before {
  content: '';
  position: absolute;
  inset: -1px 0 0 0;
  z-index: 0;
  pointer-events: none;
  background: var(--gr-noche) var(--gr-grano-luz);
  clip-path: var(--gr-neg, var(--gr-poly-negro));
}
/* La luz: 3 px de blanco cálido con su brillo, que parpadea cada 11 s. */
.studio-portada .grieta > .grieta-luz,
.studio-portada #ejemplos > .grieta-luz {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-1.5px);
  filter: var(--gr-brillo);
  /* El filtro (el brillo) se calcula sobre la cinta entera, con sus prolongaciones
     por arriba y por abajo (ver abajo), y el resultado se recorta a la caja del
     bloque (más 1 px por arriba: el negro del bloque empieza 1 px antes que su
     caja, para no dejar una línea entre bloques, y ese px tapaba el brillo del de
     arriba con una raya negra): cada bloque pone su parte del brillo, ni más ni
     menos. */
  clip-path: inset(-1px 0 0 0);
  animation: gr-parpadeo 11s steps(1, end) infinite;
  will-change: opacity;
}
/* La cinta sigue --gr-luz-ext px por arriba y --gr-luz-ext2 px por abajo de la
   caja del bloque (100 px, pegada al borde de los bloques vecinos; los escribe
   app/grieta.js) y --gr-luzx es el polígono con esas prolongaciones. El brillo es
   una sombra de hasta 70 px: sin esto se cortaba en seco en cada empalme entre
   dos bloques (la cinta terminaba y la sombra caía a la mitad) y dejaba una raya
   horizontal más oscura cruzando la grieta. Sin JavaScript no hay prolongación y
   queda el polígono de siempre. */
.grieta-luz::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--gr-luz-ext, 0px)) 0 calc(-1 * var(--gr-luz-ext2, 0px)) 0;
  /* --gr-luz-cinta: el color de la luz, para las interfaces (shared/interfaces/
     LEEME.md). Sin ella, la de La grieta: blanco y marfil desde el 23/10/2026
     (era #FFF6E8 → #FFE4BF, durazno; «el color rosa te dije que no lo quería»). */
  background: var(--gr-luz-cinta, linear-gradient(180deg, #FFFFFF, #EFEBE4 45%, #FFFFFF));
  clip-path: var(--gr-luzx, var(--gr-luzp, var(--gr-poly-luz)));
}
@keyframes gr-parpadeo { 0% { opacity: 1 } 62% { opacity: 1 } 62.4% { opacity: .35 } 62.9% { opacity: 1 } 63.5% { opacity: .6 } 64% { opacity: 1 } 100% { opacity: 1 } }

/* ── El texto partido por la luz: dos capas (maqueta, .cut > .a y .b) ──────────
   app/grieta.js le da a cada título cortado por la luz su texto en [data-cut].
   El título de verdad queda transparente (se lee, se selecciona y lo oye un
   lector de pantalla) y arriba van dos copias suyas, del mismo tamaño y en el
   mismo lugar:
     ::before  la mitad clara (hueso), a la izquierda de la luz;
     ::after   la otra mitad, a la derecha, A LA MISMA ALTURA que la clara
               (24/10/2026: ya no cae ni rebota al entrar el bloque, ver abajo).
   Cada una se recorta con clip-path a su lado de la luz, 5 px de aire en el medio
   (--gr-gap), medido desde --gr-x1: el título necesita medir todo el ancho del
   bloque. Sin JavaScript no hay [data-cut] y queda el degradé de siempre. */
.studio-portada [data-cut] {
  --gr-corte: none;
  position: relative;
  color: transparent;
}
.studio-portada [data-cut]::before,
.studio-portada [data-cut]::after {
  content: attr(data-cut);
  content: attr(data-cut) / '';
  position: absolute;
  inset: 0;
  display: block;
  padding: inherit;
  text-indent: inherit;
  text-align: inherit;
  white-space: inherit;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Con JavaScript, app/grieta.js escribe en cada título --gr-ca y --gr-cb: un
   polígono que sigue el MISMO borde del papel mal cortado que el negro y la luz
   (cada letra cae siempre del lado que le toca, con hasta 5 px de aire a cada
   lado de la luz: menos en las letras chicas, ver aireDe). Sin él (o antes de que llegue), queda el recorte recto en --gr-x1.
   --gr-ty es cuánto se corre hacia abajo la mitad tinta (grieta.js lo lee para
   que su recorte vaya con ella).

   LAS DOS MITADES A LA MISMA ALTURA (24/10/2026). Pedido del dueño, mirando la
   portada: «FIJATE LA MITAD DE LA O ESTA MAS ABAJO QUE SU OTRA MITAD Y además
   ese texto también cambia cuando uno cambia el idioma». Hasta hoy la mitad del
   otro lado de la luz caía 0,03 em (a 1440: 7 px en «DÉJALO», 9 en «TRAUMA»;
   4 px los nombres de los presets) con un rebote al entrar el bloque: el
   «quiebre» de la maqueta. Se leía como un error. Ahora --gr-ty vale 0 en todos los títulos partidos (la
   puerta en ES/EN/IT, Videoclips, TRAUMA, los ejemplos, los presets y sus
   nombres, Empezar y Preguntas), en la compu y en el celular, y sin transición:
   la letra se ve entera, partida solo por la luz. */
.studio-portada [data-cut] { --gr-ty: 0px; }
.studio-portada [data-cut]::before {
  color: var(--gr-hueso);
  clip-path: var(--gr-ca, inset(-40% calc(100% - var(--gr-x1) + var(--gr-gap)) -40% -2%));
}
.studio-portada [data-cut]::after {
  color: var(--gr-tinta);
  clip-path: var(--gr-cb, inset(-40% -2% -40% calc(var(--gr-x1) + var(--gr-gap))));
  transform: none;
}

/* Lo que va sobre hueso. */
.studio-portada .grieta .sobre-hueso,
.studio-portada .grieta :is(.pie-superior, .pie-inferior, .faq-pie) { color: var(--gr-tinta); }

/* Los rótulos chicos de la portada, como en la maqueta. */
.studio-portada .grieta .kicker,
.studio-portada #ejemplos .ejemplos-cabecera > .ejemplo-tipo {
  margin: 0;
  font: 600 11.5px/1 var(--gr-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gr-amarillo);
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL ENCABEZADO DE LA PORTADA (#nav)
   Una franja negra entera, de borde a borde, igual arriba de todo y al bajar
   (pedido del dueño, 11/10/2026): «Sweet Little Trauma Studio» a la
   izquierda, en una línea y con «Studio» en la itálica rosa; el menú
   centrado; el idioma, «Empezar» y la cuenta a la derecha. La grieta sale por
   debajo de la franja: la puerta (bloque 1) baja desde ahí. «Más» abre su
   papel hueso debajo. Ya no se parte la marca ni hay hueso en la barra: la luz
   no depende del encabezado (--gr-nav-x es solo de la puerta).
   El alto no cambia al bajar: así nada corre la página.
   ═══════════════════════════════════════════════════════════════════════════ */
html .studio-portada #nav,
html .studio-portada #nav.compacta {
  background: var(--gr-noche) var(--gr-grano-luz);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(236, 227, 211, .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  padding: 22px var(--gr-nav-pad, 48px);
}
html .studio-portada #nav.compacta { box-shadow: 0 1px 0 rgba(236, 227, 211, .08), 0 10px 30px rgba(0, 0, 0, .4); }
html .studio-portada .nav-menu { gap: 30px; }
html .studio-portada #nav .nav-menu > a,
html .studio-portada #nav .nav-menu > button {
  position: relative;
  border-radius: 0;
  padding-inline: 0;
  margin: 0;
  background: transparent;
  font: 500 14.5px/20px var(--gr-texto);
  letter-spacing: .005em;
  color: var(--gr-hueso);
}
/* El subrayado que crece, de la maqueta. */
html .studio-portada #nav .nav-menu > a::after,
html .studio-portada #nav .nav-menu > button::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
html .studio-portada #nav .nav-menu > :is(a, button):hover::after,
html .studio-portada #nav .nav-menu > button.abierta::after { transform: scaleX(1); }
html .studio-portada #nav .nav-menu > a[aria-current="page"] { color: var(--gr-rosa); }
html .studio-portada #nav .nav-menu > :is(a, button):hover { background: transparent; color: var(--gr-hueso); }

/* La marca, en una línea: «Studio» en la itálica rosa, un poco más grande. */
html .studio-portada #nav .marca.firma-editorial {
  display: inline-flex;
  align-items: baseline;
  gap: .3em;
  padding: 10px 0;
  white-space: nowrap;
  font: 400 25px/24px var(--gr-titulo);
  letter-spacing: -.005em;
  color: var(--gr-hueso);
}
html .studio-portada #nav .marca-studio {
  font: 400 29px/24px var(--gr-voz);
  margin-left: 3px;
  color: var(--gr-rosa);
}
html .studio-portada #nav .hamburguesa { color: var(--gr-hueso); }
html .studio-portada #nav .hamburguesa span { background: currentColor; }

/* «Empezar»: un botón de rosa-hueso con letra de hueso (5,4:1), como en la
   maqueta, ya no un enlace de texto. */
html .studio-portada #nav .nav-acciones .cta {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: var(--gr-rosa-hueso);
  color: var(--gr-hueso);
  font: 600 14px/1 var(--gr-texto);
  letter-spacing: .01em;
  text-decoration: none;
  box-shadow: none;
  transform: none;
}
html .studio-portada #nav .nav-acciones .cta:hover { background: var(--gr-rosa-hueso-hondo); color: var(--gr-hueso); text-decoration: none; }
html .studio-portada #nav .idioma-selector select {
  min-height: 36px;
  border-radius: 2px;
  font: 600 12px/1 var(--gr-texto);
  letter-spacing: .04em;
}
html .studio-portada #nav .cuenta-ingresar,
html .studio-portada #nav .cuenta-disparador { font: 500 14px/20px var(--gr-texto); color: var(--gr-hueso); }
html .studio-portada #nav .cuenta-ingresar:hover,
html .studio-portada #nav .cuenta-disparador:hover { color: var(--gr-rosa); }

/* «Más»: papel hueso a lo ancho, debajo de la barra. */
html .studio-portada #nav .mega {
  background: var(--gr-hueso) var(--gr-grano);
  border: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .studio-portada #nav .mega-col h4 { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-tinta-2); }
html .studio-portada #nav .mega-col a { color: var(--gr-tinta); font-family: var(--gr-texto); }
html .studio-portada #nav .mega-col a:hover { color: var(--gr-rosa-hueso); }
html .studio-portada #nav .mega-col a[aria-current="page"] { color: var(--gr-rosa-hueso); }
html .studio-portada #nav .mega-col .menu-nota { border-color: currentColor; }

/* ── Compu (1200 px o más): la marca, el menú y las acciones en una fila ───── */
/* (23/10/2026) Con «Tienda» el menú tiene seis entradas. Medido en las cuatro
   interfaces, los tres idiomas y con sesión (un nombre de 32 letras), de 1200
   a 1920 px: el menú se pisaba con la marca o con el idioma entre 1200 y 1520.
   Se arregla con lo mismo que ya usaba la barra para achicarse, sin tocar
   letras ni colores:
     · las columnas no bajan de lo que ocupan (minmax(max-content, …)): el menú
       ya no se sale de la suya y pisa a los costados; si no está centrado, es
       porque un costado no entra;
     · hasta 1439 el menú va centrado en lo que dejan la marca y las acciones
       (antes, desde 1360, en la pantalla: con sesión quedaba a 12 px del
       idioma y a 100 de la marca); desde 1440, en la pantalla;
     · entre 1200 y 1439, menos aire entre las piezas (las entradas a 14 px, las
       acciones a 10, la fila a 12) y, hasta 1359, la barra con 28 px a los
       costados en vez de 48 (lo que tiene la de las pantallas);
     · con sesión, el nombre cortado («…»): 72 px hasta 1359, 90 hasta 1439 y,
       entre 1440 y 1599, 100 con las acciones más juntas;
     · entre 1440 y 1599, las entradas a 24 px en vez de 30 (revisión).
   Queda al menos 20 px entre la marca, el menú y las acciones (entre las
   entradas, 14) de 1200 a 1439, y al menos 30 de 1440 en adelante (entre las
   entradas, 24 hasta 1599 y 30 desde 1600). */
@media (min-width: 1200px) {
  html .studio-portada .nav-fila {
    display: grid;
    /* Hasta 1439 px el menú queda centrado en lo que dejan la marca y las
       acciones; desde 1440, centrado en la pantalla. */
    grid-template-columns: auto minmax(max-content, 1fr) auto;
    max-width: none;
    gap: 20px;
  }
  html .studio-portada #nav .marca.firma-editorial { grid-column: 1; grid-row: 1; justify-self: start; }
  html .studio-portada .nav-menu { grid-column: 2; grid-row: 1; justify-self: center; margin: 0; }
  html .studio-portada .nav-acciones { grid-column: 3; grid-row: 1; justify-self: end; margin: 0; gap: 22px; }
}
/* (23/10/2026, revisión) Desde 1440 px las letras vuelven a su tamaño y las
   acciones llenan su columna: «Más» quedaba a 23 px de «ES · Español» (entre
   las entradas hay 30) y se leían como un solo grupo, en las cuatro
   interfaces. El idioma lleva 24 px de aire a la izquierda, y la columna de las
   acciones no baja de lo que ocupan: si no entran, el menú se corre ese poco a
   la izquierda en vez de pisarlas. Con lugar de sobra no cambia nada. La
   columna de la marca, tampoco (23/10, con «Tienda»). */
@media (min-width: 1440px) {
  html .studio-portada .nav-fila { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); }
  html .studio-portada #nav .nav-acciones .idioma-selector { margin-left: 24px; }
}
/* Con sesión y un nombre largo (hasta 155 px), entre 1440 y 1599 px las
   acciones pisaban «Más» hasta 73 px (Void en italiano): el nombre va cortado.
   Con «Tienda» (23/10) a 100 px y, con sesión, las acciones a 14 px y el
   idioma a 16 de «Más»: Nervo y Void en italiano todavía pisaban hasta 48 px. */
/* (23/10/2026, revisión del cambio 18) Entre 1440 y 1599 px, con las letras
   de vuelta a su tamaño, no sobraba nada: en italiano, Void y Nervo dejaban
   el menú a 20 px de la marca («Studio» y «Creare», los dos en rosa, se leían
   como una sola cosa) y a 36-44 del idioma. Las entradas van a 24 px en vez
   de 30, sin tocar las letras. El menú sigue centrado en la pantalla (lo que
   pidió el dueño: la marca a la izquierda y el menú al centro) y, donde no
   entra centrado, lo que se gana queda entre la marca y el menú: en lo más
   justo, a 1440 con sesión, Void en italiano queda a 40 px de la marca y
   Nervo a 30, y los dos a 36 del idioma; siempre más que entre las entradas.
   Desde 1600 vuelve todo a lo de antes.
   (24/10/2026) Traído de 257d4e9 a la rama portada-video. Con el logo nuevo,
   de 1440 a 1479 las entradas se juntan un poco más: ver «1440 a 1479 px: el
   menú del 257d4e9 con el logo», al final del archivo. */
@media (min-width: 1440px) and (max-width: 1599px) {
  html .studio-portada .nav-menu { gap: 24px; }
  html .studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 100px; }
  html .studio-portada #nav .nav-acciones:has(.cuenta-disparador) { gap: 14px; }
  html .studio-portada #nav .nav-acciones:has(.cuenta-disparador) .idioma-selector { margin-left: 16px; }
}
/* Entre 1200 y 1439 px entran justas la marca, las seis entradas y, del
   otro lado, el idioma, «Empezar» y la cuenta (medido con «Iniciar sesión» y
   con la cuenta abierta, nombre cortado): todo un poco más chico y más junto. */
@media (min-width: 1200px) and (max-width: 1439px) {
  html .studio-portada .nav-fila { gap: 12px; }
  html .studio-portada .nav-menu { gap: 14px; }
  html .studio-portada #nav .nav-menu > :is(a, button) { font-size: 14px; }
  html .studio-portada #nav .marca.firma-editorial { font-size: 22px; }
  html .studio-portada #nav .marca-studio { font-size: 26px; }
  html .studio-portada .nav-acciones { gap: 10px; }
  html .studio-portada #nav .nav-acciones .cta { padding: 0 16px; }
  html .studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 90px; }
}
@media (min-width: 1200px) and (max-width: 1359px) {
  html .studio-portada #nav { --gr-nav-pad: 28px; }
  html .studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 72px; }
}

/* ── Tableta (761 a 1199 px): dos filas, la marca y las acciones arriba y el
      menú debajo; todo sobre la franja negra ───────────────────────────────── */
@media (min-width: 761px) and (max-width: 1199px) {
  html .studio-portada .nav-fila { grid-template-columns: minmax(0, 1fr) auto; }
  html .studio-portada #nav .marca.firma-editorial { grid-column: 1; grid-row: 1; justify-self: start; font-size: 22px; }
  html .studio-portada #nav .marca-studio { font-size: 26px; }
  html .studio-portada .nav-acciones { grid-column: 2; grid-row: 1; justify-self: end; }
  html .studio-portada .nav-menu { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html .studio-portada #nav { --gr-nav-pad: 16px; padding-block: 16px; }
  html .studio-portada #nav .marca.firma-editorial { font-size: 18px; line-height: 24px; }
  html .studio-portada #nav .marca-studio { font-size: 21px; line-height: 24px; }
  html .studio-portada #nav .nav-acciones .cta { padding: 0 16px; }
  /* El menú abierto: papel hueso, con las entradas en Gloock, una debajo de
     la otra, de 52 px. La fila de arriba también pasa a hueso. */
  html .studio-portada #nav.menu-abierto {
    --tinta: var(--gr-tinta); --tinta-dim: var(--gr-tinta); --tinta-faint: var(--gr-tinta-2);
    --rosa: var(--gr-rosa-hueso); --acento: var(--gr-rosa-hueso); --linea: var(--gr-linea-hueso);
    --tono-foco: var(--gr-rosa-hueso);
    color-scheme: light;
    background: var(--gr-hueso) var(--gr-grano);
    color: var(--gr-tinta);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
  html .studio-portada #nav.menu-abierto .marca.firma-editorial,
  html .studio-portada #nav.menu-abierto .hamburguesa,
  html .studio-portada #nav.menu-abierto .cuenta-ingresar,
  html .studio-portada #nav.menu-abierto .cuenta-disparador { color: var(--gr-tinta); }
  html .studio-portada #nav.menu-abierto .marca-studio { color: var(--gr-rosa-hueso); }
  html .studio-portada #nav.menu-abierto .idioma-selector select { color: var(--gr-tinta); border-color: rgba(22, 17, 14, .45); }
  html .studio-portada #nav.menu-abierto .nav-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-bottom: 0;
  }
  html .studio-portada #nav.menu-abierto .nav-menu > :is(a, button) {
    display: flex; align-items: center;
    min-height: 52px;
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid var(--gr-linea-hueso);
    font: 400 27px/1.1 var(--gr-titulo);
    letter-spacing: -.01em;
    color: var(--gr-tinta);
    text-align: left;
  }
  html .studio-portada #nav.menu-abierto .nav-menu > :is(a, button)::after { content: none; }
  html .studio-portada #nav.menu-abierto .nav-menu > a[aria-current="page"] { color: var(--gr-rosa-hueso); }
  html .studio-portada #nav .mega { background: transparent; box-shadow: none; }
}
@media (max-width: 600px) {
  /* Una sola fila: la marca, «Empezar» y el botón del menú (portada-identidad.css).
     Gloock es más ancha que la letra de antes: la marca va un punto más chica. */
  html .studio-portada #nav .marca.firma-editorial { font-size: 15.5px; gap: .24em; }
  html .studio-portada #nav .marca-studio { font-size: 18.5px; }
  html .studio-portada #nav .nav-acciones .cta { padding: 0 12px; }
}
/* Medido con smoke-menu de 320 a 414 px y en los tres idiomas («Get
   started» es el más largo): la marca termina antes de «Empezar». */
@media (max-width: 400px) {
  html .studio-portada #nav .marca.firma-editorial { font-size: 14.5px; }
  html .studio-portada #nav .marca-studio { font-size: 17.5px; }
  html .studio-portada #nav .nav-acciones .cta { padding: 0 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1 · LA PUERTA: LET IT flow sobre LOOP 1
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada #entrada-portada {
  --gr-x: var(--gr-nav-x);
  --gr-k: 28px;
  --gr-j: 1;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: max(880px, 100svh);
  min-height: max(880px, 100vh);
  /* Solo se recorta a los costados: el desplegable de la caja (Imagen, Sonido,
     Video, Objetos 3D) baja más allá del final de la puerta. */
  overflow-x: clip;
  overflow-y: visible;
}
/* Con un desplegable abierto, la puerta pasa por encima del resto de la página. */
.studio-portada #entrada-portada:has(.entrada-caja.menu-abierto) { z-index: 30; }
/* «Pausar video» (z-index 4) no queda por encima del desplegable. */
.studio-portada #entrada-portada:has(.entrada-caja.menu-abierto) > .entrada-montaje { z-index: 5; }
/* frases-portada.css e intro-video.css le ponían el petróleo, el padding y el
   flex: acá se le sacan. */
.studio-portada #entrada-portada[data-fondo] {
  display: grid;
  padding: 0;
  background: var(--gr-hueso) var(--gr-grano);
}
.studio-portada #entrada-portada::after { content: none; }
/* LOOP 1, del lado negro (lo monta main.js en .hero-media). */
.studio-portada #entrada-portada > .hero-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  max-width: none;
  background: var(--gr-noche);
  clip-path: var(--gr-neg0, var(--gr-poly-negro));
}
.studio-portada #entrada-portada[data-fondo="intro"] > .hero-media { display: none; }
/* LOOP 1 es un atardecer, mucho más claro que la noche de la maqueta: va más
   apagado y bajo un velo más cerrado (medido con smoke-intro: lo que se
   escribe en la caja y los textos chicos, a 4,5:1 o más en su peor punto). */
.studio-portada #entrada-portada .hero-media > img,
.studio-portada #entrada-portada .hero-media > video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 1;
  filter: brightness(.6) saturate(.72) contrast(1.05);
}
.studio-portada #entrada-portada .hero-media > .medio-portada { filter: brightness(.6) saturate(.72); }
/* LOOP 1 en La grieta, sin gris (23/10/2026). El saturate(.72) lo dejaba gris
   pizarra frío arriba a la izquierda (41, 50, 56 en las escenas de cielo
   nublado) y el dueño no quiere nada gris ni apagado. Va con su color natural
   (saturate(1)), un punto más oscuro, y con un velo cálido en multiplicar
   (#FFEBD2): los negros siguen negros y los grises tiran a cálido, sin ponerse
   marrones. Medido a los 1, 4 y 7 s, arriba a la izquierda queda 53, 50, 46
   (antes 61, 60, 60) y la columna de la caja 26, 21, 18; smoke-intro mide que
   lo que se escribe en la caja y los textos chicos sigan a 4,5:1 o más. Las
   pieles siguen con su filtro (Void y Rabbit traen el suyo; Nervo, el de
   arriba). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .hero-media > :is(img, video) { filter: brightness(.46) saturate(1) contrast(1.08); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .hero-media > .medio-portada { filter: brightness(.46) saturate(1); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #FFEBD2;
  mix-blend-mode: multiply;
}
.studio-portada #entrada-portada .hero-velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--gr-grano-luz),
    linear-gradient(90deg, rgba(14, 12, 11, .5) 0, rgba(14, 12, 11, .2) 42%, rgba(14, 12, 11, .1) 62%),
    linear-gradient(180deg, rgba(14, 12, 11, .55) 0, rgba(14, 12, 11, .3) 16%, rgba(14, 12, 11, .38) 30%, rgba(14, 12, 11, .8) 46%, rgba(14, 12, 11, .88) 80%, var(--gr-noche) 100%);
}
/* «Reproducir/Pausar video» abajo a la izquierda, sobre negro. */
.studio-portada #entrada-portada > .video-portada-control {
  position: absolute;
  left: var(--gr-pad);
  right: auto;
  bottom: 22px;
  z-index: 4;
  min-height: 40px;
  padding: 0 14px 0 30px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--gr-ceniza);
  font: 600 11px/1 var(--gr-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.studio-portada #entrada-portada > .video-portada-control::before {
  content: '';
  position: absolute; left: 12px; top: calc(50% - 3.5px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gr-rosa); box-shadow: 0 0 10px var(--gr-rosa);
  animation: gr-rec 1.6s ease-in-out infinite;
}
.studio-portada #entrada-portada > .video-portada-control:hover { color: var(--gr-hueso); }
@keyframes gr-rec { 50% { opacity: .25 } }

/* El montaje (la caja la arma entrada.js) llena la sección. */
.studio-portada #entrada-portada > .entrada-montaje {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
}
/* La caja deja de ser una columna centrada: toma la grilla de la maqueta. */
.studio-portada #entrada-portada .entrada--portada {
  --e-panel: var(--gr-noche-2);
  --e-panel-2: var(--gr-noche-2);
  --e-linea: var(--gr-linea-fuerte);
  --e-linea-suave: var(--gr-linea);
  --e-tinta: var(--gr-hueso);
  --e-tenue: var(--gr-ceniza);
  --e-acento: var(--gr-rosa);
  --e-acento-tinta: var(--gr-tinta);
  display: grid;
  grid-template-columns: var(--gr-columnas);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: start;
  width: 100%;
  max-width: none;
  margin: 0;
  /* Abajo queda lugar para «Pausar video», que va suelto en la esquina. */
  padding: var(--gr-arriba, 88px) 0 76px;
  text-shadow: none;
}
/* La caja es un <section>: styles.css centra a sus hijos con margin auto
   (section > *), y en una grilla eso los deja del ancho de su contenido. */
.studio-portada #entrada-portada .entrada--portada > * { max-width: none; margin-inline: 0; }
/* El vidrio de frases-portada.css (blur) no va: la caja no tiene panel. */
.studio-portada #entrada-portada .entrada--portada .entrada-caja { -webkit-backdrop-filter: none; backdrop-filter: none; }
.studio-portada #entrada-portada .entrada-cabeza { grid-column: full; grid-row: 1; }
.studio-portada #entrada-portada .entrada-cuerpo { grid-column: l; grid-row: 2 / span 3; min-width: 0; margin-top: 6px; }

/* «Déjalo fluir»: «Déjalo» en Gloock enorme, con mayúscula inicial y el resto
   en minúscula como en la maqueta, partido por la luz en dos capas (ver «El
   texto partido» arriba); «fluir» en la itálica fina, del lado hueso. La luz
   cae en la «o»: --gr-corta es cuánto mide, en em del título, lo que va desde
   el comienzo del texto hasta la luz (en la maqueta, 2,573 em: «Déjalo» mide
   2,815 em y la luz pasa por el medio de la «o»). Se calcula en em para que la
   luz pase por la «o» a cualquier ancho de pantalla. */
.studio-portada #entrada-portada .entrada-titulo {
  --gr-corta: 2.573em;
  position: relative;
  margin: 4px 0 0;
  /* La sangría va en text-indent y no en padding: así el título mide lo mismo
     que la sección y los porcentajes de «fluir» (y del corte) son de la
     sección entera. */
  padding: 0;
  text-indent: max(calc(var(--gr-pad) - .045em), calc(var(--gr-x1) - var(--gr-corta)));
  font: 400 clamp(150px, 23.2vw, 450px)/.84 var(--gr-titulo);
  letter-spacing: -.035em;
  white-space: nowrap;
  text-wrap: nowrap;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
/* «fluir» va del lado hueso, a 7,6 vw de la luz (como en la maqueta). */
.studio-portada #entrada-portada .entrada-titulo em {
  position: absolute;
  text-indent: 0;
  left: calc(var(--gr-x1) + 7.6vw);
  top: 56%;
  font: 300 clamp(130px, 18vw, 280px)/.8 var(--gr-voz);
  letter-spacing: -.02em;
  color: var(--gr-rosa-hueso);
  -webkit-text-fill-color: var(--gr-rosa-hueso);
}
/* Inglés e italiano: la maqueta es solo en castellano. «Let it» mide 2,18 em y
   «Lascia che» 4,40 em (en castellano, «Déjalo» 2,82 em): la luz pasa por la
   última letra (la «t») o por «che», y «Lascia che» va más chico para que
   entre. Medido con Gloock, -.035 em. */
:root:lang(en) .studio-portada #entrada-portada .entrada-titulo { --gr-corta: 2em; }
:root:lang(it) .studio-portada #entrada-portada .entrada-titulo { --gr-corta: 4.2em; font-size: clamp(110px, 14.4vw, 330px); }
:root:lang(it) .studio-portada #entrada-portada .entrada-titulo em { font-size: clamp(100px, 12vw, 200px); }

/* «Seguir», parado sobre la grieta. */
.studio-portada #entrada-portada .entrada-barra { min-height: 56px; }
.studio-portada #entrada-portada .entrada-seguir {
  position: absolute;
  /* El centro de la fila de los «+» (la fila tiene 18 px de aire arriba). */
  top: calc(50% + 9px);
  right: calc(-1 * var(--gr-g) - 104px);
  width: 208px;
  transform: translateY(-50%);
}
.studio-portada #entrada-portada .entrada-seguir:active { transform: translateY(-50%); }
/* El contador «12/10.000» no cae sobre la luz. */
.studio-portada #entrada-portada .entrada-contador { right: 0; }

/* «Haz tu videoclip» y el lema, del lado hueso, abajo (la nota de la maqueta). */
.studio-portada #entrada-portada .entrada-videoclip {
  grid-column: r;
  grid-row: 3;
  align-self: end;
  justify-self: start;
  max-width: 370px;
  margin: 0;
  gap: 8px 14px;
  color: var(--gr-tinta);
}
.studio-portada #entrada-portada .entrada-videoclip > svg {
  width: 14px; height: 14px; padding: 11px 11px 11px 13px;
  background: var(--gr-rosa-hueso);
  color: var(--gr-hueso);
}
.studio-portada #entrada-portada .entrada-videoclip-texto {
  font: 600 13px/1.2 var(--gr-texto);
  letter-spacing: .16em;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--gr-rosa-hueso);
  color: var(--gr-tinta);
}
.studio-portada #entrada-portada .entrada-videoclip-bajada {
  margin-left: 52px;
  font: 400 22px/1.3 var(--gr-voz);
  color: var(--gr-tinta-2);
}
.studio-portada #entrada-portada .entrada-bajada {
  grid-column: r;
  grid-row: 4;
  justify-self: start;
  margin: 18px 0 0;
  font: 400 38px/1.05 var(--gr-voz);
  color: var(--gr-rosa-hueso);
  text-shadow: none;
}
.studio-portada #entrada-portada .entrada-videoclip:focus-visible { outline-color: var(--gr-rosa-hueso); }

/* ── El lema: «Sueños que se materializan.» (ajustes 5, 12/10/2026) ──────────
   El dueño: «"Dreams, materialized." otra tipografía». Iba en la misma
   Cormorant itálica rosa de «fluir», justo arriba: se leía como un eco del
   título. Tres opciones, todas con letras que el sitio ya servía (no se bajó
   ninguna), por una clase en #entrada-portada (como las áreas, 5b):
     lema-a · Gloock, recta y en minúsculas: la voz de los títulos, en chico.
     lema-b · la grotesca angosta en mayúsculas (recta desde el 14/10), el renglón de
              un afiche de cine (Sofia Sans Extra Condensed, la de las áreas).
              LA ELEGIDA: va puesta también sin clase.
     lema-c · JetBrains Mono en mayúsculas: el renglón escrito a máquina de un
              guion, sobre el papel.
   Por qué la B, y de dónde sale cada letra: FUENTES-LICENCIAS.md («El lema de
   la puerta»). Las capturas de las tres: IMAGENES/PAGINA/ESTETICAS/LA GRIETA EN
   LA PAGINA REAL (11-10-2026)/AJUSTES 5 - music videos y botones de texto/
   (las saca tools/capturas-ajustes-5.js). */
.studio-portada #entrada-portada:is(.lema-b, :not([class*='lema-'])) .entrada-bajada {
  font: 400 44px/.98 var(--gr-condensada);
  letter-spacing: .015em;
  text-transform: uppercase;
}
.studio-portada #entrada-portada.lema-a .entrada-bajada {
  font: 400 40px/1.02 var(--gr-titulo);
  letter-spacing: -.015em;
}
.studio-portada #entrada-portada.lema-c .entrada-bajada {
  margin-top: 26px;
  font: 400 16px/1.5 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* El campo de la idea, como el de la maqueta: 114 px, sin agarrador, y crece
   solo (hasta 240 px) cuando el texto es largo. */
.studio-portada #entrada-portada .entrada-texto {
  height: 114px;
  max-height: 240px;
  resize: none;
  overflow-y: auto;
}
@supports (field-sizing: content) {
  .studio-portada #entrada-portada .entrada-texto { height: auto; min-height: 114px; field-sizing: content; }
}

/* ── La puerta en la compu, con los tamaños y los espacios de la maqueta ──────
   (propuesta 3, 1 · Portada, a 1440 × 900). El título grande baja un poco y
   deja pasar la cola de la «j»; los ejemplos van a 36 px uno del otro; los «+» miden 40 y «Seguir» 58; y la nota del lado hueso va pegada
   al borde derecho. Con eso todo entra en 900 px de alto. */
@media (min-width: 1200px) {
  .studio-portada #entrada-portada .entrada--portada { --gr-arriba: 104px; }
  .studio-portada #entrada-portada .entrada-cuerpo { margin-top: 66px; }
  .studio-portada #entrada-portada .entrada-seguir { min-height: 58px; }
  .studio-portada #entrada-portada .entrada-videoclip,
  .studio-portada #entrada-portada .entrada-bajada { justify-self: end; width: min(370px, 100%); max-width: none; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  .studio-portada #entrada-portada .entrada-sumar-boton { min-height: 40px; }
  .studio-portada #entrada-portada .entrada-pruebas { gap: 4px 22px; }
  .studio-portada #entrada-portada .entrada-prueba { min-height: 32px; padding: 3px 0; font-weight: 500; }
  .studio-portada #entrada-portada .entrada-pruebas-rotulo { padding-top: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   1b · VIDEOCLIPS
   11/10/2026: el título es solo «Videoclips» y la imagen del bloque es UN
   video, la chica en la sala oscura (4,6 s en bucle, mudo; su póster es la
   imagen quieta). El baile de fondo y la foto fija se sacaron.

   AJUSTES 5 (12/10/2026, pedido del dueño): «Music video, donde está la
   modelo, tiene que ser más grande el video. "Music videos" las letras tienen
   que estar al frente del video, el video debe ocupar más espacio».
   · El video ES el lado negro del bloque: va a sangre desde el borde
     izquierdo, de arriba abajo, y termina en el mismo papel mal cortado que el
     negro (--gr-neg0, como la imagen a sangre del bloque 7). A 1440 × 900 son
     979 × 812 px a la vista, contra 479 × 740 de antes (2,2 veces el área).
     La chica queda en el medio del lado negro: la cara nunca toca el papel.
   · «Videoclips» va abajo, ENCIMA del video, enorme y partido por el papel
     como el resto de los títulos: la mitad hueso sobre el video (con un velo
     oscuro abajo, para que se lea) y la mitad tinta sobre el papel. Termina
     1,3 em después de la luz en cualquier idioma: siempre la cruza.
   · El texto, «Hacer un videoclip» y las tres cifras pasan al papel hueso, a
     la derecha, arriba del título.
   El video sigue sin bajarse con la página (app/grieta.js lo monta al verse;
   con ahorro de datos o «menos movimiento», el póster).

   AJUSTES 6 (12/10/2026, pedido del dueño, con la captura de la página
   publicada: «acá el video de la chica debe ocupar todo el lado izquierdo y el
   texto va sobre el video»):
   · El video sigue ocupando todo el lado izquierdo, a sangre (sin cambios).
   · El párrafo y «Hacer un videoclip» dejan el papel y pasan ENCIMA del video,
     del lado izquierdo, en hueso. Un velo oscuro suave a la izquierda (el
     ::after del video) los sostiene sin llegar a la cara de la chica: ella
     corre su lugar en el cuadro hacia el medio del lado negro (object-position
     más bajo) y la columna de texto termina antes de su cara.
   · Las tres cifras se quedan sobre el papel, arriba a la derecha, en tinta.
   · De la tableta para abajo, el texto va sobre la parte de abajo del video,
     encima del título y debajo de la cara.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada .videoclips.grieta {
  --gr-x0: var(--gr-nav-x);
  --gr-x: 68%;
  --gr-k: 60px;
  --gr-k2: 40px;
  /* Alto del bloque: lo que queda debajo de la franja negra (88 px), entre 760 y 980. */
  min-height: clamp(760px, calc(100vh - 88px), 980px);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: 0;
  /* Solo a los costados: la luz del bloque de abajo sube sobre éste (--gr-luz-ext). */
  overflow-x: clip;
  overflow-y: visible;
}
/* El video, a sangre en el lado negro: más ancho que el corte (64 px de sobra) y
   recortado con el polígono del negro. Sin JavaScript, el corte recto de
   siempre (2 px antes de la luz). */
.studio-portada .videoclips > .clip-foto {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  height: auto;
  margin: 0;
  pointer-events: none;
  background: var(--gr-noche);
  clip-path: var(--gr-neg0, inset(0 calc(100% - var(--gr-x) + 2px) 0 0));
}
/* El video 16:9 llena el lado negro: la chica (del 40 al 70 % del ancho del
   cuadro; la cara, del 44 al 63 % y del 5 al 42 % del alto) queda a la derecha
   del medio de lo que se ve, y a su izquierda el texto (ajustes 6). */
.studio-portada .videoclips > .clip-foto video {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(var(--gr-x) + 64px);
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 30% 30%;
  background: var(--gr-noche-2);
  box-shadow: none;
}
/* El velo: arriba, la costura con la puerta (sale del negro); abajo, la sombra
   donde se apoya el título; a la izquierda, el degradé que sostiene el texto
   (ajustes 6): oscuro contra el borde y sin nada ya antes de la cara de la
   chica (con la luz en --gr-x, termina a un tercio de ella). */
.studio-portada .videoclips > .clip-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--gr-noche) 0, rgba(14, 12, 11, 0) 9%, rgba(14, 12, 11, 0) 50%, rgba(14, 12, 11, .5) 68%, rgba(14, 12, 11, .86) 88%, var(--gr-noche) 100%),
    linear-gradient(90deg, rgba(14, 12, 11, .82) 0, rgba(14, 12, 11, .66) calc(var(--gr-x) * .16), rgba(14, 12, 11, .3) calc(var(--gr-x) * .3), rgba(14, 12, 11, 0) calc(var(--gr-x) * .42));
}
/* «Videoclips», abajo y encima del video: termina 1,3 em después de la luz. */
.studio-portada .videoclips-titulo {
  grid-column: full;
  grid-row: 4;
  align-self: end;
  margin: 0 0 clamp(34px, 5vh, 60px);
  padding: 0 calc(100% - var(--gr-x) - 1.3em) 0 var(--gr-pad);
  text-align: right;
  font: 400 clamp(130px, 13vw, 230px)/.86 var(--gr-titulo);
  letter-spacing: -.035em;
  white-space: nowrap;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
/* El texto y el botón, sobre el video, a la izquierda (ajustes 6). */
.studio-portada .videoclips > .clip-text {
  grid-column: l;
  grid-row: 1;
  align-self: start;
  width: auto;
  max-width: min(400px, 30vw);
  margin: clamp(92px, 12vh, 132px) 0 0;
  color: var(--gr-hueso);
  text-shadow: 0 1px 14px rgba(14, 12, 11, .7);
}
.studio-portada .clip-text p { margin: 0 0 28px; font: 400 18px/1.55 var(--gr-texto); text-wrap: pretty; }
.studio-portada .clip-text p b { font-weight: 600; }
.studio-portada .clip-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 2px;
  background: var(--gr-hueso);
  color: var(--gr-tinta);
  font: 600 15px/1 var(--gr-texto);
  letter-spacing: .01em;
  text-decoration: none;
  text-shadow: none;
  transition: background .25s ease;
}
.studio-portada .clip-boton:hover { background: #fff; }
.studio-portada .clip-boton:focus-visible { outline: 2px solid var(--gr-rosa); outline-offset: 4px; }
.studio-portada .clip-boton i { font-style: normal; transition: transform .25s ease; }
.studio-portada .clip-boton:hover i { transform: translateX(4px); }
.studio-portada .videoclips > .clip-cifras {
  grid-column: r;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  width: auto;
  margin: clamp(92px, 12vh, 132px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.studio-portada .clip-cifras > div { display: flex; flex-direction: column; gap: 6px; }
.studio-portada .clip-cifras dt { font: 400 46px/1 var(--gr-titulo); color: var(--gr-tinta); }
.studio-portada .clip-cifras dd { margin: 0; font: 600 11px/1.3 var(--gr-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--gr-amarillo-hueso); }

/* ═══════════════════════════════════════════════════════════════════════════
   2 · «DE UNA IDEA A ALGO QUE EXISTE»
   Sin video (LOOP 1 subió al bloque 1). El título contra la luz, del lado
   negro, y «existe» en la itálica rosa del lado hueso; la bajada sobre negro;
   las pastillas como chips cuadrados; «Empezar ahora», el botón de luz
   parado sobre la grieta.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada .hero.grieta {
  --gr-x0: 68%;
  --gr-x: 68%;
  --gr-k: 60px;
  --gr-k2: 40px;
  min-height: 0;
  padding: 0 0 72px;
  text-align: left;
  overflow-x: clip;
  overflow-y: visible;
}
.studio-portada .hero-cuerpo {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  max-width: none;
  padding-top: 64px;
  text-shadow: none;
}
.studio-portada .hero .kicker {
  grid-column: l;
  justify-self: start;
  width: auto;
  margin: 0 0 30px;
  padding: 0;
  border: 0;
  color: var(--gr-amarillo);
}
.studio-portada .hero h1 {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  margin: 0;
  font: 400 clamp(88px, 8.6vw, 156px)/.92 var(--gr-titulo);
  letter-spacing: -.005em;
  color: var(--gr-hueso);
  text-wrap: balance;
}
.studio-portada .hero h1 > br { display: none; }
.studio-portada .hero h1 > span { grid-column: l; justify-self: end; text-align: right; }
.studio-portada .hero h1 > span:first-child { grid-row: 1; }
.studio-portada .hero h1 > span:nth-of-type(2) { grid-row: 2; }
.studio-portada .hero h1 > em {
  grid-column: r;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  margin-bottom: -.06em;
  font: 400 1.04em/.9 var(--gr-voz);
  letter-spacing: -.01em;
  color: var(--gr-rosa-hueso);
}
.studio-portada .hero-bajada {
  grid-column: l;
  max-width: 46ch;
  margin: 40px 0 0;
  font: 400 18px/1.55 var(--gr-texto);
  color: var(--gr-hueso);
}
.studio-portada .hero .pastillas {
  grid-column: l;
  justify-content: flex-start;
  gap: 8px;
  margin: 28px 0 0;
}
.studio-portada .hero .pastillas a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(236, 227, 211, .55);
  border-radius: 2px;
  font: 500 13px/1 var(--gr-texto);
  letter-spacing: .08em;
  color: var(--gr-hueso);
}
.studio-portada .hero .pastillas a:hover { background: var(--gr-hueso); border-color: var(--gr-hueso); color: var(--gr-tinta); }
/* «Empezar ahora»: el botón de luz, parado sobre la grieta. */
html .studio-portada .hero .boton-grande {
  grid-column: full;
  justify-self: start;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 240px;
  min-height: 60px;
  margin: 46px 0 0 calc(var(--gr-x) - 120px);
  padding: 0 24px;
  border-radius: 2px;
  background: var(--gr-luz);
  color: var(--gr-tinta);
  box-shadow: var(--gr-brillo-boton);
  font: 600 17px/1 var(--gr-texto);
  letter-spacing: .01em;
  text-transform: none;
  text-decoration: none;
}
/* 23/10/2026, sin durazno: el brillo al pasar el cursor, blanco (era 255, 196, 140). */
html .studio-portada .hero .boton-grande:hover { box-shadow: 0 0 0 1px #fff, 0 0 30px rgba(255, 255, 255, .85), 0 0 90px color-mix(in oklch, var(--gr-rosa) 60%, transparent); text-decoration: none; }
.studio-portada .hero .boton-grande::after { content: '→'; transition: transform .25s ease; }
.studio-portada .hero .boton-grande:hover::after { transform: translateX(4px); }
.studio-portada .hero-scroll { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   3 · HECHO CON MÁS TRAUMA QUE CAFÉ
   «Hecho con más» en la itálica sobre negro; «TRAUMA» enorme y partido;
   «que café» en la itálica rosa del lado hueso. Las dos tarjetas: la primera
   sobre negro y la segunda sobre hueso, con sus fotos enteras.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada #produccion {
  /* Como en la maqueta (4 · «Hecho con más trauma»): la luz arranca en 68 %,
     donde terminó el bloque anterior, y cae en 66 %, que parte la «M». */
  --gr-x0: 68%;
  --gr-x: 66%;
  --gr-k: 60px;
  --gr-k2: 56px;
  padding: 64px 0 64px;
}
.studio-portada #produccion .seccion-cabecera {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  margin: 0;
}
.studio-portada #produccion .cabecera-lema h2 {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  margin: 0;
  font-size: inherit;
  line-height: 1;
  color: var(--gr-hueso);
}
.studio-portada #produccion .cabecera-lema h2 > span:first-child {
  grid-column: l; grid-row: 1;
  font: 400 clamp(40px, 3.6vw, 54px)/1 var(--gr-voz);
  letter-spacing: 0;
}
.studio-portada #produccion .cabecera-lema h2 > em {
  grid-column: full; grid-row: 2;
  margin-top: 6px;
  padding-left: max(calc(var(--gr-pad) - .04em), calc(var(--gr-x1) - 3.02em));
  font: 400 clamp(200px, 21vw, 330px)/.8 var(--gr-titulo);
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada #produccion .cabecera-lema h2 > span:last-child {
  grid-column: r; grid-row: 3; justify-self: start;
  margin-top: 8px;
  font: 300 clamp(50px, 4.3vw, 64px)/1 var(--gr-voz);
  letter-spacing: 0;
  color: var(--gr-rosa-hueso);
}
.studio-portada #produccion .seccion-cabecera > p {
  grid-column: r;
  margin: 12px 0 0;
  max-width: 36ch;
  font: 400 15px/1.55 var(--gr-texto);
  color: var(--gr-tinta-2);
}
.studio-portada #produccion .bento-grilla {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-pad) calc(var(--gr-x1) - var(--gr-pad) - var(--gr-g)) calc(var(--gr-g) * 2) minmax(0, 1fr) var(--gr-pad);
  gap: 0;
  margin-top: 40px;
}
.studio-portada #produccion .tarjeta {
  position: relative;
  display: grid;
  align-content: start;
  min-height: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(236, 227, 211, .25);
  border-radius: 0;
  background: transparent;
  overflow: visible;
  isolation: auto;
}
.studio-portada #produccion .tarjeta:hover { transform: none; }
.studio-portada #produccion .tarjeta::after { content: none; }
.studio-portada #produccion .tarjeta:nth-child(1) {
  grid-column: 2;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 40px;
}
.studio-portada #produccion .tarjeta:nth-child(2) { grid-column: 4; border-top-color: rgba(22, 17, 14, .3); }
.studio-portada #produccion .tarjeta img {
  position: static;
  z-index: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: 1;
  filter: saturate(.9);
  transition: filter .3s ease;
}
.studio-portada #produccion .tarjeta:hover img { transform: none; filter: none; }
.studio-portada #produccion .tarjeta-cuerpo { padding: 0; color: inherit; }
.studio-portada #produccion .tarjeta:nth-child(2) .tarjeta-cuerpo { padding-top: 22px; }
.studio-portada #produccion .tarjeta-cuerpo h3 {
  margin: 0 0 14px;
  font: 400 32px/1.08 var(--gr-titulo);
  letter-spacing: -.01em;
  color: inherit;
}
.studio-portada #produccion .tarjeta-cuerpo p { margin: 0 0 18px; font: 400 16px/1.55 var(--gr-texto); max-width: 46ch; }
.studio-portada #produccion .tarjeta-ir { font: 600 11.5px/1 var(--gr-texto); letter-spacing: .16em; color: inherit; }
.studio-portada #produccion .tarjeta:nth-child(1) { color: var(--gr-hueso); }
.studio-portada #produccion .tarjeta:nth-child(1) p { color: var(--gr-ceniza); }
.studio-portada #produccion .tarjeta:nth-child(2) { color: var(--gr-tinta); --tono-foco: var(--gr-rosa-hueso); }
.studio-portada #produccion .tarjeta:nth-child(2) p { color: var(--gr-tinta-2); }
.studio-portada #produccion .tarjeta:nth-child(2) .tarjeta-ir { color: var(--gr-rosa-hueso); }

/* ═══════════════════════════════════════════════════════════════════════════
   4 · «UNA IDEA PUEDE VERSE ASÍ» (lo arma ejemplos.js)
   El montaje, entero, del lado negro y pegado a la luz. Dos tarjetas sobre
   negro y dos sobre hueso. Las escenas, pestañas con subrayado rosa; «Ver
   toda la inspiración», un botón de línea.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada #ejemplos {
  --gr-x0: 66%;
  --gr-x: 66%;
  --gr-k: 90px;
  --gr-k2: 70px;
  padding: 64px 0 64px;
  row-gap: 0;
}
.studio-portada #inicio > #ejemplos { background: var(--gr-hueso) var(--gr-grano); padding: 64px 0; }
.studio-portada #ejemplos .ejemplos-cabecera { grid-column: full; display: grid; grid-template-columns: var(--gr-columnas); max-width: none; margin: 0 0 30px; }
.studio-portada #ejemplos .ejemplos-cabecera > .ejemplo-tipo { grid-column: l; }
.studio-portada #ejemplos .ejemplos-cabecera h2 {
  grid-column: full;
  margin: 26px 0 0;
  padding-left: var(--gr-pad);
  font: 400 clamp(64px, 6.6vw, 104px)/.95 var(--gr-titulo);
  letter-spacing: -.005em;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada #ejemplos .ejemplos-cabecera > p:last-child { grid-column: l; margin: 18px 0 0; max-width: 48ch; font: 400 16px/1.55 var(--gr-texto); color: var(--gr-ceniza); }
.studio-portada #ejemplos .montaje {
  grid-column: l;
  justify-self: end;
  width: min(100%, 760px);
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.studio-portada #ejemplos .montaje video { aspect-ratio: 16 / 9; object-fit: cover; background: var(--gr-noche-2); box-shadow: 0 34px 50px -30px rgba(0, 0, 0, .7); }
.studio-portada #ejemplos .montaje-info { padding: 14px 0 0; }
.studio-portada #ejemplos .montaje-info .ejemplo-tipo { font: 600 10.5px/1 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ceniza); }
.studio-portada #ejemplos .montaje-escenas { gap: 2px; }
.studio-portada #ejemplos .montaje-escenas button,
.studio-portada #ejemplos .montaje-escenas button:not([aria-pressed=true]) {
  position: relative;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gr-ceniza);
  font: 500 14px/1 var(--gr-texto);
}
.studio-portada #ejemplos .montaje-escenas button:hover { color: var(--gr-hueso); }
.studio-portada #ejemplos .montaje-escenas button[aria-pressed=true] { background: transparent; color: var(--gr-hueso); font-weight: 600; }
.studio-portada #ejemplos .montaje-escenas button[aria-pressed=true]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; background: var(--gr-rosa);
}
.studio-portada #ejemplos .ejemplos-videos:empty { display: none; }
/* Las cuatro tarjetas: dos del lado hueso, al lado del montaje; dos del lado
   negro, debajo. La grilla de las tarjetas se deshace (display: contents) para
   que cada tarjeta caiga en su lado de la luz. */
.studio-portada #ejemplos .ejemplos-grid { display: contents; }
/* Sueltas de su grilla, las tarjetas ya no son hijas directas del bloque: se
   les da la misma capa que al resto, si no el negro (::before) las tapa. */
.studio-portada #ejemplos .ejemplos-grid > * { position: relative; z-index: 3; }
.studio-portada #ejemplos .ejemplo:not(.montaje) {
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  color: var(--gr-hueso);
}
.studio-portada #ejemplos .ejemplo-imagen { aspect-ratio: 16 / 10; }
.studio-portada #ejemplos .ejemplo-texto { padding: 12px 0 0; }
.studio-portada #ejemplos .ejemplo .ejemplo-tipo { font: 600 10.5px/1 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ceniza); }
.studio-portada #ejemplos .ejemplo h3 { margin: 8px 0 10px; font: 400 22px/1.1 var(--gr-titulo); letter-spacing: -.005em; color: inherit; }
.studio-portada #ejemplos .ejemplo-prompt { color: var(--gr-ceniza); margin-bottom: 6px; }
.studio-portada #ejemplos .ejemplo-usar { color: var(--gr-rosa); font: 600 13px/1.2 var(--gr-texto); }
.studio-portada #ejemplos .ejemplos-grid > :nth-child(1) { grid-column: r; grid-row: 2; align-self: start; }
.studio-portada #ejemplos .ejemplos-grid > :nth-child(2) { grid-column: r; grid-row: 3; align-self: start; margin-top: 26px; }
.studio-portada #ejemplos .ejemplos-grid > :nth-child(3),
.studio-portada #ejemplos .ejemplos-grid > :nth-child(4) { grid-row: 3; margin-top: 30px; }
.studio-portada #ejemplos .ejemplos-grid > :nth-child(3) { grid-column: l; width: calc(50% - 13px); }
.studio-portada #ejemplos .ejemplos-grid > :nth-child(4) { grid-column: l; width: calc(50% - 13px); justify-self: end; }
.studio-portada #ejemplos .ejemplos-grid > :is(:nth-child(1), :nth-child(2)) {
  --tono-foco: var(--gr-rosa-hueso);
  color: var(--gr-tinta);
}
.studio-portada #ejemplos .ejemplos-grid > :is(:nth-child(1), :nth-child(2)) :is(.ejemplo-tipo, .ejemplo-prompt) { color: var(--gr-tinta-2); }
.studio-portada #ejemplos .ejemplos-grid > :is(:nth-child(1), :nth-child(2)) .ejemplo-usar { color: var(--gr-rosa-hueso); }
.studio-portada #ejemplos .ejemplos-grid > :is(:nth-child(1), :nth-child(2)) a:focus-visible,
.studio-portada #ejemplos .ejemplos-grid > :is(:nth-child(1), :nth-child(2)) summary:focus-visible { outline-color: var(--gr-rosa-hueso); }
.studio-portada #ejemplos .montaje { grid-row: 2; }
.studio-portada #ejemplos .ejemplo-ver-todo {
  grid-column: l;
  grid-row: 4;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px;
  margin: 34px 0 0;
  padding: 0 18px;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--gr-hueso);
  color: var(--gr-hueso);
  font: 600 14px/1 var(--gr-texto);
}
.studio-portada #ejemplos .ejemplo-ver-todo:hover { background: var(--gr-hueso); color: var(--gr-tinta); }
.studio-portada #ejemplos .ejemplos-nota { grid-column: r; grid-row: 4; align-self: end; margin: 34px 0 0; font: 400 12.5px/1.5 var(--gr-texto); color: var(--gr-tinta-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   5 · LOS PRESETS COMO LA LISTA «ÁREAS» (decisión D4)
   Una fila por preset: el número, la bajada a la izquierda, el nombre grande
   que termina 1,4 em después de la luz y la foto chica a la derecha. Al pasar
   el mouse, la mitad clara del nombre pasa a rosa. Las flechas del carrusel
   quedan escondidas: no hay nada que deslizar (su código sigue en main.js).

   Cada fila es una grilla: [margen] [número] [bajada] [aire] [nombre] [lado
   hueso]. La columna del nombre se ajusta a lo que mide el nombre y la bajada
   se angosta si hace falta: los nombres largos («Voce fuori campo e
   narrazione») no la pisan. El nombre se corre 1,4 em sobre el lado hueso con
   un margen negativo, así que la luz queda SIEMPRE a 1,4 em de su borde
   derecho: el corte de dos tonos se mide desde ahí (degradé hacia la
   izquierda) y no depende de dónde empieza la palabra.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada #presets {
  --gr-x0: 66%;
  --gr-x: 58%;
  --gr-k: 56px;
  --gr-k2: 60px;
  padding: 64px 0 56px;
}
.studio-portada #presets .seccion-cabecera {
  grid-column: full;
  display: grid;
  grid-template-columns: var(--gr-columnas);
  margin: 0;
}
.studio-portada #presets .seccion-cabecera > div:first-child { display: contents; }
.studio-portada #presets .seccion-cabecera h2 {
  grid-column: full;
  margin: 0;
  padding: 0 var(--gr-pad);
  font: 400 clamp(60px, 5.6vw, 92px)/.98 var(--gr-titulo);
  letter-spacing: -.005em;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada #presets .seccion-cabecera p {
  grid-column: l;
  justify-self: start;
  max-width: 52ch;
  margin: 18px 0 0;
  padding: 0;
  font: 400 16px/1.55 var(--gr-texto);
  color: var(--gr-ceniza);
}
.studio-portada #presets .seccion-cabecera > .apps-controles { display: none; }
.studio-portada #presets .apps-pista {
  grid-column: full;
  display: block;
  overflow: visible;
  margin-top: 34px;
  padding: 0;
  scroll-snap-type: none;
  counter-reset: preset;
}
.studio-portada #presets .app {
  --gr-nombre: clamp(40px, 3.6vw, 66px);
  position: relative;
  display: grid;
  grid-template-columns: var(--gr-pad) 64px minmax(0, 300px) minmax(26px, 1fr) auto calc(100% - var(--gr-x1));
  align-items: center;
  width: auto;
  height: auto;
  min-height: 104px;
  aspect-ratio: auto;
  padding: 12px 0;
  border-radius: 0;
  overflow: visible;
  counter-increment: preset;
  scroll-snap-align: none;
  /* El filete de arriba: hueso del lado negro, tinta del lado hueso, con un
     hueco en la luz. */
  background: linear-gradient(90deg, transparent var(--gr-pad), rgba(236, 227, 211, .2) var(--gr-pad) calc(var(--gr-x1) - 10px), transparent calc(var(--gr-x1) - 10px) calc(var(--gr-x1) + 10px), rgba(22, 17, 14, .25) calc(var(--gr-x1) + 10px) calc(100% - var(--gr-pad)), transparent calc(100% - var(--gr-pad))) top left / 100% 1px no-repeat;
}
.studio-portada #presets .app::after { content: none; }
.studio-portada #presets .app::before {
  content: counter(preset, decimal-leading-zero);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  padding-top: 12px;
  font: 600 12px/1 var(--gr-texto);
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--gr-amarillo);
}
.studio-portada #presets .app-cuerpo { display: contents; }
.studio-portada #presets .app p {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  max-width: none;
  font: 400 15px/1.45 var(--gr-texto);
  color: var(--gr-ceniza);
}
.studio-portada #presets .app h3 {
  --gr-pasa: 1.4em;
  grid-column: 5;
  grid-row: 1;
  margin: 0 calc(-1 * var(--gr-pasa)) 0 0;
  /* La letra, el tamaño, el peso y las mayúsculas de cada nombre salen de variables
     (ver «Tipografía de las áreas» más abajo): por defecto, Gloock. --gr-fit lo
     achica app/grieta.js si el nombre no entra en su renglón (otro idioma). */
  font: var(--gr-ne, normal) var(--gr-nw, 400) calc(var(--gr-nombre) * var(--gr-fit, 1))/var(--gr-nl, 1.05) var(--gr-nf, var(--gr-titulo));
  letter-spacing: var(--gr-nls, -.025em);
  text-transform: var(--gr-ntt, none);
  white-space: nowrap;
  text-align: right;
  color: transparent;
  /* Medido desde el borde derecho del nombre: la luz está a 1,4 em. */
  background: linear-gradient(270deg, var(--gr-tinta) calc(var(--gr-pasa) - 5px), transparent calc(var(--gr-pasa) - 5px) calc(var(--gr-pasa) + 5px), var(--gr-hueso) calc(var(--gr-pasa) + 5px));
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada #presets .app img {
  position: static;
  grid-column: 6;
  grid-row: 1;
  justify-self: end;
  width: min(230px, calc(100% - 1.4 * var(--gr-nombre) * var(--gr-fit, 1) - 40px));
  height: 76px;
  margin-right: var(--gr-pad);
  object-fit: cover;
  opacity: 1;
  filter: saturate(.85);
  transition: filter .3s ease;
}
.studio-portada #presets .app:hover img { transform: none; filter: none; }
/* Sin las dos capas (sin JavaScript), la mitad tinta pasa a rosa. */
.studio-portada #presets .app:hover h3,
.studio-portada #presets .app:focus-visible h3 {
  background-image: linear-gradient(270deg, var(--gr-rosa-hueso) calc(var(--gr-pasa) - 5px), transparent calc(var(--gr-pasa) - 5px) calc(var(--gr-pasa) + 5px), var(--gr-hueso) calc(var(--gr-pasa) + 5px));
}
/* Con las dos capas (como .area .w.a y .w.b de la maqueta): el nombre se mide
   desde su borde derecho, donde está la luz a --gr-pasa. Al pasar el mouse o
   con el foco del teclado, la mitad tinta se corre 14 px a la derecha y la
   clara 8 px a la izquierda: se abren de costado, sin rosa (23/10/2026).
   24/10/2026, pedido del dueño («LA MITAD DE LA O ESTA MAS ABAJO QUE SU OTRA
   MITAD»): las dos mitades quedan siempre a la misma altura. Antes la tinta
   bajaba 4 px al entrar el bloque y 10 más con el mouse; ya no baja nunca. */
.studio-portada #presets .app h3[data-cut] { --gr-corte: none; --gr-ty: 0px; background: none; }
.studio-portada #presets .app h3[data-cut]::before {
  clip-path: var(--gr-ca, inset(-20% calc(var(--gr-pasa) + var(--gr-gap)) -20% -2%));
  transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.studio-portada #presets .app h3[data-cut]::after {
  clip-path: var(--gr-cb, inset(-20% -2% -20% calc(100% - var(--gr-pasa) + var(--gr-gap))));
  transform: none;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), color .45s cubic-bezier(.2, .7, .2, 1);
}
.studio-portada #presets .app:is(:hover, :focus-visible) h3[data-cut]::before { transform: translateX(-8px); }
.studio-portada #presets .app:is(:hover, :focus-visible) h3[data-cut]::after { transform: translateX(14px); color: var(--gr-rosa-hueso); }
.studio-portada #presets .app:focus-visible { outline: none; }
.studio-portada #presets .app:focus-visible img { outline: 2px solid var(--gr-rosa-hueso); outline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════
   5b · TIPOGRAFÍA DE LAS ÁREAS (pedido del dueño, 12/10/2026)
   «La parte de cinematográfico, retrato y producto, marketing y publicidad...
   busca otra tipografía... variá los tamaños». Tres opciones, todas con letras
   que ya están en shared/fonts/ (no se bajó nada) y con los nombres a
   tamaños distintos, como recortes de revista, sin que se pisen ni se rompa la
   grilla. Cada una se prende con UNA clase en la sección #presets:

     class="apps grieta areas-a"   A · una sola letra de exhibición: Sofia Sans
                                      Extra Condensed 800, en mayúsculas, de
                                      107 a 53 px (a 1440)
     class="apps grieta areas-b"   B · collage de tres letras, como recortes de
                                      papel: la grotesca angosta en mayúsculas,
                                      Gloock y la itálica Cormorant
     class="apps grieta areas-c"   C · la grotesca angosta muy grande en
                                      mayúsculas, alternada con la itálica fina
                                      Cormorant 300, chica

   LA ELEGIDA ES LA C: va puesta sin ninguna clase (y también con areas-c). Para
   pasar a otra basta esa clase, en index.html o con
   document.getElementById('presets').classList.add('areas-b'). Capturas y los
   motivos de la elección: _etapa2/TIPOGRAFIA-AREAS-1210.md.

   Cómo funciona: cada fila (.app) trae su letra, su peso, su tamaño y sus
   mayúsculas en variables (--gr-nf, --gr-nw, --gr-ne, --gr-nombre, --gr-nls,
   --gr-ntt, --gr-nl) y --gr-nm, el tamaño en el celular. Se repiten cada 6
   filas (:nth-child(6n + k)), así sirven con cualquier cantidad de presets. El
   nombre sigue partido por la luz como antes (las dos capas de app/grieta.js) y
   termina 1,4 em después de ella: con tamaños distintos, cada uno llega a una
   distancia distinta. Si en inglés o en italiano un nombre no entra, grieta.js
   lo achica (--gr-fit) lo justo.
   ═══════════════════════════════════════════════════════════════════════════ */
/* A · una sola letra de exhibición con tamaños variados */
.studio-portada #presets.areas-a .app { --gr-nf: var(--gr-condensada); --gr-nw: 800; --gr-nls: .012em; --gr-ntt: uppercase; --gr-nl: .95; }
.studio-portada #presets.areas-a .app:nth-child(6n + 1) { --gr-nombre: clamp(40px, 7.4vw, 124px); --gr-nm: 12.6vw; }
.studio-portada #presets.areas-a .app:nth-child(6n + 2) { --gr-nombre: clamp(34px, 5.6vw, 96px); --gr-nm: 11vw; }
.studio-portada #presets.areas-a .app:nth-child(6n + 3) { --gr-nombre: clamp(30px, 4.5vw, 78px); --gr-nm: 9.4vw; }
.studio-portada #presets.areas-a .app:nth-child(6n + 4) { --gr-nombre: clamp(28px, 3.7vw, 64px); --gr-nm: 8.4vw; }
.studio-portada #presets.areas-a .app:nth-child(6n + 5) { --gr-nombre: clamp(38px, 6.6vw, 112px); --gr-nm: 13vw; }
.studio-portada #presets.areas-a .app:nth-child(6n + 6) { --gr-nombre: clamp(32px, 5vw, 88px); --gr-nm: 10.4vw; }

/* B · collage de dos o tres letras, como recortes de papel */
.studio-portada #presets.areas-b .app:nth-child(6n + 1) { --gr-nf: var(--gr-condensada); --gr-nw: 900; --gr-nls: .01em; --gr-ntt: uppercase; --gr-nl: .95; --gr-nombre: clamp(40px, 7vw, 120px); --gr-nm: 12.6vw; }
.studio-portada #presets.areas-b .app:nth-child(6n + 2) { --gr-nf: var(--gr-titulo); --gr-nw: 400; --gr-nls: -.025em; --gr-nl: 1.05; --gr-nombre: clamp(34px, 5.2vw, 90px); --gr-nm: 10vw; }
.studio-portada #presets.areas-b .app:nth-child(6n + 3) { --gr-nf: var(--gr-voz); --gr-ne: normal; --gr-nw: 400; --gr-nls: -.01em; --gr-nl: 1; --gr-nombre: clamp(40px, 6.4vw, 110px); --gr-nm: 12vw; }
.studio-portada #presets.areas-b .app:nth-child(6n + 4) { --gr-nf: var(--gr-condensada); --gr-nw: 300; --gr-nls: .05em; --gr-ntt: uppercase; --gr-nl: 1; --gr-nombre: clamp(26px, 3.6vw, 60px); --gr-nm: 8.6vw; }
.studio-portada #presets.areas-b .app:nth-child(6n + 5) { --gr-nf: var(--gr-condensada); --gr-nw: 900; --gr-nls: .01em; --gr-ntt: uppercase; --gr-nl: .95; --gr-nombre: clamp(38px, 6.2vw, 106px); --gr-nm: 12.6vw; }
.studio-portada #presets.areas-b .app:nth-child(6n + 6) { --gr-nf: var(--gr-titulo); --gr-nw: 400; --gr-nls: -.025em; --gr-nl: 1.05; --gr-nombre: clamp(30px, 4.4vw, 76px); --gr-nm: 9.4vw; }

/* C · la grotesca angosta muy grande con la itálica fina, chica.
   ÁREAS · LA ELEGIDA: es la que no lleva clase (y también la que lleva areas-c). */
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(odd) { --gr-nf: var(--gr-condensada); --gr-nw: 900; --gr-nls: .01em; --gr-ntt: uppercase; --gr-nl: .92; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(even) { --gr-nf: var(--gr-voz); --gr-ne: normal; --gr-nw: 300; --gr-nls: 0; --gr-nl: 1.05; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 1) { --gr-nombre: clamp(44px, 8vw, 136px); --gr-nm: 12.6vw; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 2) { --gr-nombre: clamp(30px, 3.9vw, 66px); --gr-nm: 8.4vw; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 3) { --gr-nombre: clamp(34px, 5.2vw, 90px); --gr-nm: 11vw; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 4) { --gr-nombre: clamp(28px, 3.5vw, 60px); --gr-nm: 8vw; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 5) { --gr-nombre: clamp(40px, 7.2vw, 122px); --gr-nm: 13vw; }
.studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(6n + 6) { --gr-nombre: clamp(30px, 3.9vw, 66px); --gr-nm: 8.4vw; }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · LA IMAGEN A SANGRE: solo del lado negro, con velo
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada .cinematica.grieta {
  --gr-x: 58%;
  --gr-k: 0px;
  --gr-k2: 0px;
  padding: 0;
  overflow-x: clip;
  overflow-y: visible;
}
/* La foto termina en el MISMO borde de papel que el negro: se la hace más ancha
   que el corte (64 px de sobra) y se la recorta con --gr-neg0, el polígono del
   negro (app/grieta.js). Antes llegaba hasta una línea derecha en --gr-x y entre
   su canto liso y el papel quedaba una tira negra: el único borde de toda la
   portada que no estaba cortado a mano. Sin JavaScript, el recorte derecho de
   siempre (2 px antes de la luz). */
.studio-portada .cinematica img {
  grid-column: 1 / -1;
  width: calc(var(--gr-x) + 64px);
  max-width: none;
  aspect-ratio: auto;
  height: clamp(320px, 38vw, 620px);
  object-fit: cover;
  filter: brightness(.72) saturate(.85);
  clip-path: var(--gr-neg0, inset(0 66px 0 0));
}

/* ═══════════════════════════════════════════════════════════════════════════
   8 · «EMPEZAR AHORA»: el título del cierre
   En Gloock enorme y partido (sin pasar a mayúsculas: el texto ya es
   «Empezar ahora»). La flecha, en un círculo de luz sobre la grieta.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada .cta-final.grieta {
  --gr-x0: 58%;
  --gr-x: 56%;
  --gr-k: 90px;
  --gr-k2: 50px;
  padding: 72px 0 80px;
  text-align: left;
}
html .studio-portada .cta-final a {
  grid-column: full;
  display: grid;
  justify-items: start;
  gap: 30px;
  font: 400 clamp(92px, 9.6vw, 160px)/.9 var(--gr-titulo);
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--gr-hueso);
}
.studio-portada .cta-final a > span {
  display: block;
  width: 100%;
  padding-left: max(var(--gr-pad), calc(var(--gr-x1) - 4.4em));
  white-space: nowrap;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada .cta-final .flecha-circulo {
  display: grid;
  place-items: center;
  width: 92px;
  margin-left: calc(var(--gr-x) - 46px);
  border-radius: 50%;
  background: var(--gr-luz);
  color: var(--gr-tinta);
  box-shadow: var(--gr-brillo-boton);
  font: 400 34px/1 var(--gr-texto);
}
/* 23/10/2026, sin durazno: el brillo al pasar el cursor, blanco (era 255, 196, 140). */
.studio-portada .cta-final a:hover .flecha-circulo { color: var(--gr-tinta); transform: translateX(6px); box-shadow: 0 0 0 1px #fff, 0 0 30px rgba(255, 255, 255, .85), 0 0 90px color-mix(in oklch, var(--gr-rosa) 60%, transparent); }
.studio-portada .cta-final a:focus-visible { outline-offset: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   9 · PREGUNTAS FRECUENTES
   El título partido; la lista en la columna negra, con filetes y el «+» en
   rosa; «¿Queda algo sin responder?», del lado hueso.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada .faq.grieta {
  --gr-x0: 56%;
  --gr-x: 60%;
  --gr-k: 60px;
  --gr-k2: 50px;
  padding: 64px 0 72px;
}
.studio-portada .faq h2 {
  grid-column: full;
  margin: 0 0 40px;
  padding-left: var(--gr-pad);
  font: 400 clamp(64px, 6.6vw, 108px)/.95 var(--gr-titulo);
  letter-spacing: -.005em;
  color: transparent;
  background: var(--gr-corte);
  -webkit-background-clip: text;
  background-clip: text;
}
.studio-portada .faq-lista { grid-column: l; border-top: 1px solid rgba(236, 227, 211, .2); }
.studio-portada .faq-item { border-bottom: 1px solid rgba(236, 227, 211, .2); }
.studio-portada .faq-boton {
  min-height: 60px;
  padding: 20px 56px 20px 0;
  font: 400 21px/1.25 var(--gr-titulo);
  letter-spacing: -.005em;
  color: var(--gr-hueso);
}
.studio-portada .faq-boton:hover { color: var(--gr-rosa); }
.studio-portada .faq-boton::after { color: var(--gr-rosa); font: 300 26px/1 var(--gr-texto); }
.studio-portada .faq-cuerpo p { font: 400 16px/1.6 var(--gr-texto); color: var(--gr-ceniza); max-width: 68ch; }
.studio-portada .faq-pie {
  grid-column: r;
  grid-row: 2;
  align-self: start;
  margin: 0;
  font: 400 24px/1.35 var(--gr-voz);
  color: var(--gr-tinta-2);
}
.studio-portada .faq-pie a { display: inline-block; margin-top: 8px; font: 600 14px/1.4 var(--gr-texto); color: var(--gr-rosa-hueso); overflow-wrap: anywhere; }
.studio-portada .faq-pie a:focus-visible { outline-color: var(--gr-rosa-hueso); }

/* ═══════════════════════════════════════════════════════════════════════════
   10 · EL PIE: la grieta se abre en una cuña de luz hacia abajo
   Las columnas de enlaces sobre negro; la frase de la casa y la fila legal,
   del lado hueso. El logo sigue escondido: no hay arcoíris.
   ═══════════════════════════════════════════════════════════════════════════ */
.studio-portada #pie.grieta {
  --gr-x0: 60%;
  --gr-x: 60%;
  --gr-k: 40px;
  --gr-k2: 40px;
  --gr-abre: 240px;
  --gr-yo: calc(100% - 150px);
  --gr-c9y: calc(var(--gr-ya) + (var(--gr-yo) - var(--gr-ya)) * .5);
  --gr-c10y: calc(var(--gr-yo) + (100% - var(--gr-yo)) * .38);
  --gr-c11y: calc(var(--gr-yo) + (100% - var(--gr-yo)) * .74);
  --gr-w1y: calc(var(--gr-yo) + (100% - var(--gr-yo)) * .3);
  --gr-w2y: calc(var(--gr-yo) + (100% - var(--gr-yo)) * .66);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 72px 0 0;
  border-top: 0;
}
/* Su cuña, sin JavaScript (con JavaScript la arma app/grieta.js sobre el mismo
   borde de papel mal cortado: --gr-neg y --gr-luzp). */
.studio-portada #pie.grieta {
  --gr-poly-negro: polygon(0 0, var(--gr-x0) 0, var(--gr-c1x) var(--gr-c1y), var(--gr-c2x) var(--gr-c2y), var(--gr-c3x) var(--gr-c3y), var(--gr-x1) var(--gr-k), var(--gr-x1) var(--gr-h),
    var(--gr-c6x) var(--gr-c6y), var(--gr-c7x) var(--gr-c7y), var(--gr-x) var(--gr-ya), calc(var(--gr-x) + 2px) var(--gr-c9y), calc(var(--gr-x) - 1px) var(--gr-yo),
    calc(var(--gr-x) - var(--gr-abre) * .27 + 6px) var(--gr-w1y), calc(var(--gr-x) - var(--gr-abre) * .64 - 7px) var(--gr-w2y), calc(var(--gr-x) - var(--gr-abre)) 100%, 0 100%);
  --gr-poly-luz: polygon(var(--gr-x0) 0, var(--gr-c1x) var(--gr-c1y), var(--gr-c2x) var(--gr-c2y), var(--gr-c3x) var(--gr-c3y), var(--gr-x1) var(--gr-k), var(--gr-x1) var(--gr-h),
    var(--gr-c6x) var(--gr-c6y), var(--gr-c7x) var(--gr-c7y), var(--gr-x) var(--gr-ya), calc(var(--gr-x) + 2px) var(--gr-c9y), calc(var(--gr-x) - 1px) var(--gr-yo),
    calc(var(--gr-x) - var(--gr-abre) * .27 + 6px) var(--gr-w1y), calc(var(--gr-x) - var(--gr-abre) * .64 - 7px) var(--gr-w2y), calc(var(--gr-x) - var(--gr-abre)) 100%,
    calc(var(--gr-x) + 3px) 100%, calc(var(--gr-x) + 4px) var(--gr-c11y), calc(var(--gr-x) + 1px) var(--gr-c10y), calc(var(--gr-x) + 2px) var(--gr-yo),
    calc(var(--gr-x) + 5px) var(--gr-c9y), calc(var(--gr-x) + 3px) var(--gr-ya),
    calc(var(--gr-c7x) + 3px) var(--gr-c7y), calc(var(--gr-c6x) + 3px) var(--gr-c6y), calc(var(--gr-x1) + 3px) var(--gr-h), calc(var(--gr-x1) + 3px) var(--gr-k),
    calc(var(--gr-c3x) + 3px) var(--gr-c3y), calc(var(--gr-c2x) + 3px) var(--gr-c2y), calc(var(--gr-c1x) + 3px) var(--gr-c1y), calc(var(--gr-x0) + 3px) 0);
}
/* 23/10/2026, sin durazno («el color rosa te dije que no lo quería»): la luz
   del pie iba de durazno (#FFCF9C, #FFE7C6) a blanco cálido; ahora de plata a
   marfil y blanco, como la de los demás bloques. */
.studio-portada #pie.grieta > .grieta-luz::before {
  background: linear-gradient(90deg, #DCD8D1 calc(var(--gr-x) - var(--gr-abre)), #EFEBE4 calc(var(--gr-x) - var(--gr-abre) * .55), #FFFFFF calc(var(--gr-x) - 6px));
}
.studio-portada #pie > * { max-width: none; margin-inline: 0; }
.studio-portada #pie .pie-columnas {
  grid-column: l;
  grid-row: 1 / span 2;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 26px;
  padding-bottom: 150px;
}
.studio-portada #pie .pie-col h4 { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-amarillo); }
.studio-portada #pie .pie-col a { font: 400 14px/1.4 var(--gr-texto); color: var(--gr-hueso); padding: 5px 0; }
.studio-portada #pie .pie-col a:hover { color: var(--gr-rosa); }
.studio-portada #pie .pie-superior { grid-column: r; grid-row: 1; display: block; margin: 0; }
.studio-portada #pie .pie-superior p { margin: 0; max-width: 32ch; font: 400 24px/1.35 var(--gr-voz); color: var(--gr-tinta-2); }
.studio-portada #pie .pie-inferior {
  grid-column: r;
  grid-row: 2;
  align-self: end;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 40px;
  padding-top: 18px;
  border-top: 1px solid var(--gr-linea-hueso);
  font: 400 12.5px/1.5 var(--gr-texto);
  letter-spacing: 0;
  color: var(--gr-tinta-2);
}
.studio-portada #pie .pie-correo { color: var(--gr-tinta-2); }
.studio-portada #pie .pie-correo:hover { color: var(--gr-rosa-hueso); }
.studio-portada #pie :is(.pie-superior, .pie-inferior) :focus-visible { outline-color: var(--gr-rosa-hueso); }

/* ── Colores forzados: el navegador pinta el texto de verdad; las dos capas
      sobran (si no, se leería doble). ─────────────────────────────────────── */
@media (forced-colors: active) {
  .studio-portada [data-cut]::before,
  .studio-portada [data-cut]::after { display: none; }
}

/* ── Menos movimiento ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .studio-portada #entrada-portada > .video-portada-control::before { animation: none; }
  .studio-portada #presets .app h3 { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CELULAR Y TABLETA (menos de 1200 px)
   La luz cruza los títulos por el medio y después se va al borde derecho
   (calc(100% - 11px)): el contenido queda sobre negro. Promediado, el negro
   ocupa alrededor del 70 % de la pantalla. --gr-h lo mide app/grieta.js.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  /* Con :is() la regla pesa como un id: les gana a las luces de la compu de
     cada bloque (.hero.grieta, #produccion…), que van más arriba. */
  .studio-portada :is(.grieta, #ejemplos) {
    --gr-pad: 22px;
    --gr-g: 12px;
    --gr-k: 80px;
    --gr-k2: 80px;
    /* Dónde pasa la luz abajo: junto al borde derecho. --gr-xr la corre hacia
       adentro cuando el corte es más grande (tabletas), para que el borde de
       papel nunca llegue a la letra ni se salga de la pantalla. */
    --gr-xr: calc(100% - 11px);
    --gr-x: var(--gr-xr);
    --gr-x0: var(--gr-xr);
    --gr-columnas: [full-start] var(--gr-pad) [l-start r-start] minmax(0, 1fr) [l-end r-end] var(--gr-pad) [full-end];
  }
  /* Con dos sombras de las cuatro: pinta menos (--gr-brillo-corto, app/grieta.css). */
  .studio-portada .grieta > .grieta-luz,
  .studio-portada #ejemplos > .grieta-luz { filter: var(--gr-brillo-corto); }

  /* 1 · La puerta */
  /* Debajo de la franja negra del encabezado la luz baja recta, por el medio
     del título, y recién después se va al borde derecho (maqueta, celular). */
  .studio-portada #entrada-portada {
    --gr-x0: var(--gr-x1);
    --gr-x: var(--gr-xr);
    --gr-x1: 54.5%;
    --gr-k: 28px;
    --gr-h: 330px;
    min-height: 0;
  }
  .studio-portada #entrada-portada .entrada--portada { --gr-arriba: 150px; grid-template-rows: auto auto auto auto; padding-bottom: 84px; }
  /* El título y «fluir», como en la maqueta en el celular: 29 vw (hasta 124 px),
     con la itálica a la derecha de la luz, justo debajo. */
  .studio-portada #entrada-portada .entrada-titulo { margin-top: 12px; font-size: min(29vw, 124px); letter-spacing: -.04em; }
  .studio-portada #entrada-portada .entrada-titulo em {
    position: static;
    display: block;
    margin: .02em 0 0 calc(var(--gr-x1) + 14px);
    text-indent: 0;
    font-size: min(25vw, 104px);
  }
  /* Italiano: «Lascia che» mide 4,4 em y «scorra», 2 em: más chicos para que entren. */
  :root:lang(it) .studio-portada #entrada-portada .entrada-titulo { font-size: min(20vw, 120px); }
  :root:lang(it) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(17vw, 104px); }
  .studio-portada #entrada-portada .entrada-cuerpo { grid-column: l; grid-row: 2; margin-top: 34px; }
  .studio-portada #entrada-portada .entrada-seguir { position: relative; top: auto; right: auto; width: 100%; transform: none; flex-basis: 100%; }
  .studio-portada #entrada-portada .entrada-seguir:active { transform: none; }
  .studio-portada #entrada-portada .entrada-videoclip { grid-column: l; grid-row: 3; align-self: start; margin-top: 34px; color: var(--gr-hueso); }
  .studio-portada #entrada-portada .entrada-videoclip > svg { background: var(--gr-rosa); color: var(--gr-tinta); }
  .studio-portada #entrada-portada .entrada-videoclip-texto { color: var(--gr-hueso); border-bottom-color: var(--gr-rosa); }
  .studio-portada #entrada-portada .entrada-videoclip-bajada { color: var(--gr-ceniza); }
  .studio-portada #entrada-portada .entrada-bajada { grid-column: l; grid-row: 4; font-size: 30px; color: var(--gr-rosa); }
  .studio-portada #entrada-portada:is(.lema-b, :not([class*='lema-'])) .entrada-bajada { font-size: 36px; }
  .studio-portada #entrada-portada.lema-a .entrada-bajada { font-size: 30px; }
  .studio-portada #entrada-portada.lema-c .entrada-bajada { font-size: 14px; }
  .studio-portada #entrada-portada .entrada-videoclip:focus-visible { outline-color: var(--gr-rosa); }
  .studio-portada #entrada-portada .hero-velo {
    background: var(--gr-grano-luz),
      linear-gradient(180deg, rgba(14, 12, 11, .6) 0, rgba(14, 12, 11, .4) 9%, rgba(14, 12, 11, .62) 20%, rgba(14, 12, 11, .82) 30%, rgba(14, 12, 11, .88) 94%, var(--gr-noche) 100%);
  }

  /* 1b · Videoclips (ajustes 5): el video a todo el ancho, arriba de todo, y
     «Videoclips» encima, sobre su parte de abajo. La luz baja junto al borde
     derecho de punta a punta y el video termina en ese papel: el título va
     entero sobre el video (como los nombres de las áreas, que en el celular
     tampoco se parten).
     Ajustes 6: el párrafo y el botón también van sobre el video, a la
     izquierda y encima del título, debajo de la cara de la chica. La grilla
     tiene tres filas: el texto (la que se estira), el título y, debajo del
     video y sobre negro, las cifras. El video ocupa las dos primeras. */
  .studio-portada .videoclips.grieta { --gr-x1: var(--gr-xr); min-height: 0; grid-template-rows: 1fr auto auto; padding-bottom: 56px; }
  .studio-portada .videoclips > .clip-foto {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-row: 1 / 3;
    justify-self: stretch;
    align-self: stretch;
    width: auto;
    height: auto;
    min-height: min(180vw, 780px);
    clip-path: var(--gr-neg0, inset(0 13px 0 0));
  }
  .studio-portada .videoclips > .clip-foto video { width: 100%; object-position: 58% 30%; }
  /* El velo: la sombra que sube desde abajo empieza antes del texto (ya no
     es solo el pie del título) y llega a negro bajo el título. */
  .studio-portada .videoclips > .clip-foto::after {
    background:
      linear-gradient(180deg, var(--gr-noche) 0, rgba(14, 12, 11, 0) 7%, rgba(14, 12, 11, 0) 38%, rgba(14, 12, 11, .62) 56%, rgba(14, 12, 11, .84) 72%, rgba(14, 12, 11, .94) 90%, var(--gr-noche) 100%),
      linear-gradient(90deg, rgba(14, 12, 11, .5) 0, rgba(14, 12, 11, 0) 40%);
  }
  .studio-portada .videoclips-titulo {
    grid-column: full;
    grid-row: 2;
    align-self: end;
    margin: 0 0 18px;
    padding: 0 var(--gr-pad);
    text-align: left;
    font-size: min(17.7vw, 76px);
    line-height: .92;
    white-space: normal;
  }
  .studio-portada .videoclips > .clip-text { grid-column: l; grid-row: 1; align-self: end; max-width: 330px; margin: 0 0 26px; color: var(--gr-hueso); }
  .studio-portada .videoclips > .clip-cifras { grid-column: l; grid-row: 3; justify-self: stretch; align-self: start; width: auto; margin: 34px 0 0; flex-direction: row; justify-content: space-between; gap: 12px; }
  .studio-portada .clip-cifras dt { font-size: 36px; color: var(--gr-hueso); }
  /* Sobre el negro, en hueso. */
  .studio-portada .clip-cifras dd { color: var(--gr-amarillo); }

  /* 2 · De una idea */
  .studio-portada .hero.grieta { --gr-x1: 58%; --gr-h: 300px; }
  .studio-portada .hero h1 { font-size: min(13.6vw, 104px); }
  /* Partido por la luz como los demás títulos: una palabra larga que no
     entra («something», «qualcosa») cruza la luz en tinta y no queda hueso
     sobre hueso. */
  .studio-portada .hero h1 > span {
    grid-column: full; justify-self: stretch; text-align: left;
    padding: 0 calc(100% - var(--gr-x1) + 14px) 0 var(--gr-pad);
    color: transparent;
    background: var(--gr-corte);
    -webkit-background-clip: text;
    background-clip: text;
  }
  .studio-portada .hero h1 > em { grid-column: full; grid-row: 3; justify-self: start; margin: 4px 0 0 calc(var(--gr-x1) + 14px); font-size: .9em; }
  /* La luz baja del título al borde en --gr-k2: la bajada empieza después. */
  .studio-portada .hero-bajada { margin-top: calc(var(--gr-k2) + 12px); }
  html .studio-portada .hero .boton-grande { grid-column: l; width: 100%; margin: 40px 0 0; }

  /* 3 · Trauma */
  .studio-portada #produccion { --gr-x0: 56%; --gr-x1: 66.5%; --gr-h: 330px; }
  .studio-portada #produccion .cabecera-lema h2 > span:first-child { font-size: 30px; }
  .studio-portada #produccion .cabecera-lema h2 > em { font-size: min(21vw, 200px); padding-left: calc(var(--gr-pad) - .04em); letter-spacing: -.05em; }
  .studio-portada #produccion .cabecera-lema h2 > span:last-child { grid-column: full; margin: 10px 0 0 calc(var(--gr-x1) + 10px); font-size: min(8.4vw, 54px); }
  .studio-portada #produccion .seccion-cabecera > p { grid-column: l; margin-top: calc(var(--gr-k2) + 24px); color: var(--gr-ceniza); }
  .studio-portada #produccion .bento-grilla { grid-template-columns: var(--gr-pad) minmax(0, 1fr) var(--gr-pad); row-gap: 40px; margin-top: 34px; }
  .studio-portada #produccion .tarjeta:nth-child(1),
  .studio-portada #produccion .tarjeta:nth-child(2) { grid-column: 2; grid-template-columns: minmax(0, 1fr); border-top-color: rgba(236, 227, 211, .25); color: var(--gr-hueso); }
  .studio-portada #produccion .tarjeta:nth-child(2) p { color: var(--gr-ceniza); }
  .studio-portada #produccion .tarjeta:nth-child(2) .tarjeta-ir { color: var(--gr-rosa); }
  .studio-portada #produccion .tarjeta:nth-child(1) .tarjeta-cuerpo { padding-top: 22px; }
  .studio-portada #produccion .tarjeta-cuerpo h3 { font-size: 27px; }

  /* 4 · Una idea puede verse así */
  .studio-portada #ejemplos { --gr-x1: 52%; --gr-h: 260px; }
  .studio-portada #ejemplos .ejemplos-cabecera h2 { font-size: min(11.6vw, 80px); padding-right: var(--gr-pad); }
  /* El rótulo es largo: se parte antes de la luz, que acá todavía cruza. */
  .studio-portada #ejemplos .ejemplos-cabecera > .ejemplo-tipo { grid-column: full; padding: 0 calc(100% - var(--gr-x1) + 12px) 0 var(--gr-pad); line-height: 1.5; }
  .studio-portada #ejemplos .ejemplos-cabecera > p:last-child { margin-top: calc(var(--gr-k2) + 6px); }
  .studio-portada #ejemplos .montaje { grid-column: l; grid-row: 2; width: 100%; }
  .studio-portada #ejemplos .ejemplos-grid { display: grid; grid-column: l; grid-row: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 14px; margin-top: 30px; }
  .studio-portada #ejemplos .ejemplos-grid > * { grid-column: auto !important; grid-row: auto !important; width: auto !important; margin: 0 !important; justify-self: stretch !important; color: var(--gr-hueso) !important; }
  .studio-portada #ejemplos .ejemplos-grid > * :is(.ejemplo-tipo, .ejemplo-prompt) { color: var(--gr-ceniza) !important; }
  .studio-portada #ejemplos .ejemplos-grid > * .ejemplo-usar { color: var(--gr-rosa) !important; }
  .studio-portada #ejemplos .ejemplo h3 { font-size: 18px; }
  .studio-portada #ejemplos .ejemplo-ver-todo { grid-column: l; grid-row: 4; }
  .studio-portada #ejemplos .ejemplos-nota { grid-column: l; grid-row: 5; margin-top: 22px; color: var(--gr-ceniza); }

  /* 5 · Presets */
  .studio-portada #presets { --gr-x1: 56%; --gr-h: 230px; }
  .studio-portada #presets .seccion-cabecera h2 { font-size: min(10.4vw, 64px); }
  .studio-portada #presets .seccion-cabecera p { margin-top: calc(var(--gr-k2) + 4px); }
  /* Cada fila: el número, el nombre entero (sobre negro: la luz ya se fue al
     borde) y abajo la bajada con la foto chica a la derecha. */
  .studio-portada #presets .app {
    grid-template-columns: var(--gr-pad) minmax(0, 1fr) 14px 34% var(--gr-pad);
    grid-template-rows: auto auto auto;
    align-items: start;
    min-height: 0;
    padding: 18px 0 20px;
    background: linear-gradient(90deg, transparent var(--gr-pad), rgba(236, 227, 211, .2) var(--gr-pad) calc(100% - var(--gr-pad)), transparent calc(100% - var(--gr-pad))) top left / 100% 1px no-repeat;
  }
  .studio-portada #presets .app::before { grid-column: 2; grid-row: 1; padding-top: 0; }
  .studio-portada #presets .app h3 {
    grid-column: 2 / 5;
    grid-row: 2;
    margin: 10px 0 12px;
    font-size: min(var(--gr-nm, 9.6vw), 72px);
    white-space: normal;
    text-align: left;
    background: none;
    color: var(--gr-hueso);
  }
  .studio-portada #presets .app:hover h3,
  .studio-portada #presets .app:focus-visible h3 { background: none; color: var(--gr-rosa); }
  .studio-portada #presets .app p { grid-column: 2; grid-row: 3; font-size: 13.5px; }
  .studio-portada #presets .app img { grid-column: 4; grid-row: 3; width: 100%; height: 64px; margin: 0; }
  .studio-portada #presets .app:focus-visible img { outline-color: var(--gr-rosa); }

  /* 7 · La imagen a sangre */
  .studio-portada .cinematica img { height: clamp(220px, 56vw, 520px); }

  /* 8 · Empezar ahora */
  .studio-portada .cta-final.grieta { --gr-x1: 58%; --gr-h: 260px; }
  html .studio-portada .cta-final a { font-size: min(15vw, 120px); }
  .studio-portada .cta-final a > span { padding: 0 var(--gr-pad); white-space: normal; }
  .studio-portada .cta-final .flecha-circulo { margin-left: var(--gr-pad); width: 76px; font-size: 28px; }

  /* 9 · Preguntas */
  .studio-portada .faq.grieta { --gr-x1: 60%; --gr-h: 200px; }
  .studio-portada .faq h2 { font-size: min(12.6vw, 84px); padding-right: var(--gr-pad); margin-bottom: calc(var(--gr-k2) + 12px); }
  .studio-portada .faq-boton { font-size: 19px; }
  .studio-portada .grieta .faq-pie { grid-column: l; grid-row: 3; margin-top: 34px; color: var(--gr-ceniza); }
  .studio-portada .faq-pie a { color: var(--gr-rosa); }
  .studio-portada .faq-pie a:focus-visible { outline-color: var(--gr-rosa); }

  /* 10 · El pie: las columnas sobre negro y la fila legal en una franja de
     hueso a lo ancho, al final, con la luz acostada encima (la cuña de la
     compu no deja lugar para el texto). */
  .studio-portada #pie.grieta { --gr-x0: var(--gr-xr); --gr-x: var(--gr-xr); --gr-abre: 0px; --gr-yo: 100%; padding-top: 56px; }
  /* Sin la cuña, el degradé horizontal del pie (durazno → blanco, medido desde
     --gr-abre) quedaba todo en durazno: la luz cambiaba de color de golpe al pasar
     de las preguntas al pie. Acá lleva el blanco de los demás bloques (blanco y
     marfil desde el 23/10/2026, sin durazno). */
  .studio-portada #pie.grieta > .grieta-luz::before { background: linear-gradient(180deg, #FFFFFF, #EFEBE4 45%, #FFFFFF); }
  .studio-portada #pie .pie-columnas { grid-column: l; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
  .studio-portada #pie .pie-superior { grid-column: l; grid-row: 2; margin-top: 34px; }
  .studio-portada #pie .pie-superior p { color: var(--gr-ceniza); font-size: 20px; }
  .studio-portada #pie .pie-inferior {
    grid-column: full; grid-row: 3;
    margin: 40px 0 0;
    padding: 23px var(--gr-pad) 28px;
    /* El papel y su luz acostada: ::before y ::after, con la tira acostada del
       papel mal cortado (app/grieta.css, «La luz acostada»). */
    border-top: 0;
    box-shadow: none;
    background: none;
    font-size: 12px;
  }
}
@media (min-width: 481px) and (max-width: 699px) {
  .studio-portada :is(.grieta, #ejemplos) { --gr-xr: calc(100% - 14px); }
}
@media (min-width: 700px) and (max-width: 1199px) {
  .studio-portada :is(.grieta, #ejemplos) { --gr-pad: 9vw; --gr-xr: calc(100% - 26px); }
  /* La tableta, como la de la maqueta: la luz por la mitad y las letras más grandes. */
  .studio-portada #entrada-portada { --gr-x1: 50%; }
  .studio-portada #entrada-portada .entrada-titulo { font-size: min(24vw, 210px); }
  .studio-portada #entrada-portada .entrada-titulo em { font-size: min(20vw, 180px); }
  :root:lang(it) .studio-portada #entrada-portada .entrada-titulo { font-size: min(15vw, 190px); }
  :root:lang(it) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(17vw, 180px); }
  .studio-portada #ejemplos .ejemplos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* «Videoclips» encima del video, más grande que en el teléfono (ajustes 5). */
  .studio-portada .videoclips-titulo { font-size: min(12vw, 132px); }
  /* El texto, más angosto: se queda a la izquierda del pelo de la chica (ajustes 6). */
  .studio-portada .videoclips > .clip-text { max-width: 300px; }
}
@media (max-width: 760px) {
  .studio-portada #entrada-portada .entrada--portada { --gr-arriba: 108px; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .studio-portada #entrada-portada .entrada--portada { --gr-arriba: 150px; }
}
@media (max-width: 420px) {
  .studio-portada #pie .pie-columnas { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAS ACCIONES DE TEXTO (ajustes 5, 12/10/2026)
   El dueño: «Continue centralo en la pantalla... sin el botón, solo texto que
   cambie de forma, color y letra cuando el cursor pasa por sobre él», y «el
   idioma y Get started también son botón». «Seguir», el idioma, «Empezar» e
   «Iniciar sesión» dejan de ser cajas: son texto. Siguen siendo un <button>,
   un <a> y un <select> de verdad, con 44 px o más para tocar.

   Cada una tiene dos caras, en el mismo lugar (app/texto-accion.js):
     .ta-a     la de siempre: la grotesca (Schibsted), recta;
     ::after   la otra: la itálica (Cormorant Garamond), más grande y en otro
               color (data-ta, que no se lee dos veces).
   Al pasar el cursor, o con el foco del teclado, una luz de 2 px cruza la
   palabra de izquierda a derecha y la deja del otro lado en la otra letra, el
   otro color y otro ancho: es la grieta de la página pasando por la palabra.
   Todo sale de una sola variable, --ta-on (de 0 a 1, registrada con
   @property para que se anime): las dos caras se recortan con la misma línea
   y la luz va en esa línea. Al salir, vuelve igual, de derecha a izquierda.
   Con «menos movimiento» el cambio es instantáneo. En una pantalla sin cursor
   (el celular) no hay cambio: el texto va subrayado y «Seguir» lleva flecha,
   para que se lea como una acción.
   ═══════════════════════════════════════════════════════════════════════════ */
@property --ta-on {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion {
  --ta-on: 0;
  --ta-a-color: var(--gr-hueso);
  --ta-b-color: var(--gr-rosa);
  --ta-b-tam: 1.42em;
  --ta-luz-alto: 1.9em;
  position: relative;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas: 'ta fl';
  align-items: center;
  justify-content: center;
  column-gap: 0;
  min-width: 44px;
  min-height: 44px;
  max-width: none;
  margin: 0;
  padding: 0 4px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  transform: none;
  color: var(--ta-a-color);
  text-decoration: none;
  text-overflow: clip;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: --ta-on .5s cubic-bezier(.65, 0, .25, 1);
}
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion > .ta-a,
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion[data-ta]::after {
  grid-area: ta;
  display: block;
  text-align: center;
  white-space: nowrap;
}
/* La cara de siempre: se va por la izquierda cuando pasa la luz. */
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion > .ta-a {
  clip-path: inset(-45% -20% -45% calc(-20% + 140% * var(--ta-on)));
}
/* La otra cara: entra detrás de la luz. */
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion[data-ta]::after {
  content: attr(data-ta);
  content: attr(data-ta) / '';
  font: 500 var(--ta-b-tam)/1 var(--gr-voz);
  letter-spacing: -.01em;
  text-transform: none;
  color: var(--ta-b-color);
  clip-path: inset(-45% calc(120% - 140% * var(--ta-on)) -45% -20%);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
/* La luz: solo se ve mientras cruza (su brillo, el de la grieta). */
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(-20% + 140% * var(--ta-on));
  width: 2px;
  height: var(--ta-luz-alto);
  margin: calc(var(--ta-luz-alto) / -2) 0 0 -1px;
  border-radius: 1px;
  /* --ta-luz y --ta-luz-brillo: la luz que cruza la palabra, para las
     interfaces (shared/interfaces/LEEME.md). Sin ellas, la de siempre.
     23/10/2026, sin durazno («el color rosa te dije que no lo quería»): la
     de La grieta es blanca y marfil (era #FFF6E8 → #FFE4BF con brillo ámbar). */
  background: var(--ta-luz, linear-gradient(180deg, transparent, #FFFFFF 22%, #EFEBE4 50%, #FFFFFF 78%, transparent));
  box-shadow: var(--ta-luz-brillo, 0 0 6px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 255, 255, .7), 0 0 30px color-mix(in oklch, var(--gr-rosa) 50%, transparent));
  opacity: 0;
  opacity: sin(var(--ta-on) * 180deg);
  pointer-events: none;
}
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion > svg { grid-area: fl; display: none; }
/* Con el cursor encima o con el foco del teclado: la otra cara. */
@media (hover: hover) {
  html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion:hover,
  html body.studio-portada #nav .idioma-texto:hover > .texto-accion.texto-accion { --ta-on: 1; }
}
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion:focus-visible,
html body.studio-portada #nav .idioma-texto:has(select:focus-visible) > .texto-accion.texto-accion { --ta-on: 1; }
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion:focus-visible,
html body.studio-portada #nav .idioma-texto:has(select:focus-visible) {
  outline: 2px solid var(--gr-rosa);
  outline-offset: 4px;
}
/* Las hojas de antes le ponían fondo, sombra o un salto al pasar el mouse
   («Empezar» se volvía una caja bordó): acá no. El salto (transform) ya lo
   anula la regla de arriba, que pesa más que las de antes; acá no se toca para
   no mover «Seguir», que se centra con transform. */
html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion:is(:hover, :focus-visible, :active) {
  background: none;
  box-shadow: none;
  filter: none;
  color: var(--ta-a-color);
  text-decoration: none;
}
/* Sin cursor (el celular): subrayado, y «Seguir» con su flecha. */
@media (hover: none) {
  html body.studio-portada :is(#nav, #entrada-portada) .texto-accion > .ta-a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ta-subrayado, var(--gr-rosa));
    text-underline-offset: .42em;
  }
  html body.studio-portada #entrada-portada .texto-accion > svg { display: block; margin-left: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion { transition: none; }
  html body.studio-portada :is(#nav, #entrada-portada) .texto-accion::before { display: none; }
}

/* ── En la barra: el idioma, «Empezar» e «Iniciar sesión» ─────────────────── */
html body.studio-portada #nav .texto-accion.texto-accion { font-size: 14px; }
html body.studio-portada #nav .texto-accion.texto-accion > .ta-a { font: 500 14px/20px var(--gr-texto); letter-spacing: .005em; }
/* «Empezar» es la acción de la barra: en rosa y un punto más firme; al pasar,
   la itálica en el ámbar de la luz. */
html body.studio-portada #nav .nav-acciones .cta.texto-accion { --ta-a-color: var(--gr-rosa); --ta-b-color: var(--gr-ambar); }
html body.studio-portada #nav .nav-acciones .cta.texto-accion > .ta-a { font-weight: 600; }
/* El idioma: el <select> de verdad, transparente, encima de su texto. Lo
   abre el mouse, el dedo o el teclado y el lector de pantalla lo lee como
   siempre («Idioma del sitio», y la opción elegida). */
/* (Sin tocar su display: en el celular, con el menú cerrado, la etiqueta se
   esconde con display: none, portada-identidad.css.) */
html body.studio-portada #nav .idioma-selector.idioma-texto {
  position: relative;
  align-items: center;
  min-height: 44px;
  gap: 0;
}
html body.studio-portada #nav .idioma-texto > .idioma-ver { pointer-events: none; }
html body.studio-portada #nav .idioma-texto > select {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
  -webkit-appearance: none;
  appearance: none;
}
/* El menú abierto del celular es papel hueso: tinta, y el rosa del hueso. */
@media (max-width: 760px) {
  html body.studio-portada #nav.menu-abierto .texto-accion.texto-accion { --ta-a-color: var(--gr-tinta); --ta-b-color: var(--gr-rosa-hueso); --ta-subrayado: var(--gr-rosa-hueso); }
  html body.studio-portada #nav.menu-abierto .nav-acciones .cta.texto-accion { --ta-a-color: var(--gr-rosa-hueso); --ta-b-color: var(--gr-tinta); }
  html body.studio-portada #nav.menu-abierto .texto-accion.texto-accion:focus-visible,
  html body.studio-portada #nav.menu-abierto .idioma-texto:has(select:focus-visible) { outline-color: var(--gr-rosa-hueso); }
}

/* ── «Seguir»: en el centro de la pantalla ─────────────────────────────────── */
html body.studio-portada #entrada-portada .entrada-seguir.texto-accion {
  --ta-a-color: var(--gr-luz);
  --ta-b-tam: 2.3em;
  --ta-luz-alto: 3.2em;
  font-size: 15px;
  min-height: 56px;
  padding: 0 22px;
}
html body.studio-portada #entrada-portada .entrada-seguir.texto-accion > .ta-a {
  font: 600 15px/1 var(--gr-texto);
  letter-spacing: .24em;
  text-transform: uppercase;
  /* El espacio de después de la última letra no corre el texto del centro. */
  margin-right: -.24em;
}
/* En la compu va suelto en la fila de los «+», con su centro en el de la
   ventana. Se mide desde la fila (.entrada-barra), que va de --gr-pad a la luz
   menos --gr-g; la luz de la puerta está en el 62 % (--gr-nav-x), así que el
   ancho del bloque es (fila + pad + g) / 0,62 y su mitad, eso / 1,24. Si
   --gr-nav-x cambia, cambia el 1,24 (el doble del nuevo valor). */
@media (min-width: 1200px) {
  html body.studio-portada #entrada-portada .entrada-seguir.texto-accion,
  html body.studio-portada #entrada-portada .entrada-seguir.texto-accion:active {
    position: absolute;
    top: calc(50% + 9px);
    right: auto;
    left: calc((100% + var(--gr-pad) + var(--gr-g)) / 1.24 - var(--gr-pad));
    width: auto;
    transform: translate(-50%, -50%);
  }
}
/* En el celular y la tableta, a lo ancho de la caja (el toque es grande) y con
   el texto en el medio: la caja está centrada en la pantalla. */
@media (max-width: 1199px) {
  html body.studio-portada #entrada-portada .entrada-seguir.texto-accion { width: 100%; min-height: 60px; font-size: 16px; --ta-b-tam: 2.2em; }
  html body.studio-portada #entrada-portada .entrada-seguir.texto-accion > .ta-a { font-size: 16px; letter-spacing: .22em; margin-right: -.22em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIN CURSIVA, LETRAS MODERNAS: LA PORTADA (14 y 15/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Lo de la portada del cambio de letras (app/grieta.css, «Las letras» y «SIN
   CURSIVA, LETRAS MODERNAS»: ahí están las caras, las variables, la red de
   «nada inclinado» y por qué). Dos voces de la misma letra, como un bloque de
   créditos de cine: impacto (Sofia Sans Extra Condensed 900) y su fino (300),
   las dos en mayúsculas; el texto, en Schibsted Grotesk. Nada de serif, nada
   inclinado. La palabra destacada de cada título queda en la misma impacto y
   se distingue por el color. Mismo alcance: solo La grieta; Void, Nervo y
   Rabbit traen su letra en su interfaz.css.
   Las medidas en em (--gr-corta, la luz de «TRAUMA» y de «START NOW») se
   tomaron en Chrome con la letra nueva: la luz sigue cayendo en la última
   letra.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La marca: «SWEET LITTLE TRAUMA» de impacto, «STUDIO» en fino ─────────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca.firma-editorial {
  font: 900 27px/24px var(--gr-impacto);
  letter-spacing: .03em;
  text-transform: uppercase;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca-studio {
  font: 300 27px/24px var(--gr-impacto-fino);
  margin-left: .1em;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 761px) and (max-width: 1439px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca.firma-editorial,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca-studio { font-size: 24px; }
}
@media (max-width: 760px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca.firma-editorial,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca-studio { font-size: 19px; }
}
@media (max-width: 600px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca.firma-editorial,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca-studio { font-size: 17px; }
}
@media (max-width: 400px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca.firma-editorial,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav .marca-studio { font-size: 15.5px; }
}

/* El peso que se ve: SLT Impacto tiene uno solo (900) y lo dibuja aunque la
   regla pida 400 (eran para Gloock); acá se dice. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada :is(#ejemplos .ejemplos-cabecera h2, #presets .seccion-cabecera h2, .clip-cifras dt) { font-weight: 900; }

/* ── La puerta: «DÉJALO FLUIR», «LET IT FLOW», «LASCIA CHE SCORRA» ─────────
   El título de impacto. --gr-corta, medido en Chrome a 1440 px: la «O» de
   «DÉJALO» va de 1,876 a 2,343 em (la luz a 2,11), la última «T» de «LET IT»
   de 1,476 a 1,875 (a 1,675) y la «E» de «LASCIA CHE» de 3,422 a 3,811 (a
   3,617). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo {
  --gr-corta: 2.11em;
  font-size: clamp(160px, 25.5vw, 500px);
  font-weight: 900;
  line-height: .84;
  letter-spacing: -.005em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada #entrada-portada .entrada-titulo { --gr-corta: 1.675em; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo { --gr-corta: 3.617em; font-size: clamp(110px, 16vw, 360px); }
/* En mayúsculas la tilde de la «É» sube por encima de la línea y se metía
   debajo de la barra: en castellano el título baja un poco. */
@media (min-width: 761px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(es) .studio-portada #entrada-portada .entrada-titulo { margin-top: .11em; }
}
/* «FLUIR», «FLOW», «SCORRA»: la misma impacto, en el rosa hondo del hueso.
   Del lado hueso, sin tocar el borde. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em {
  font: 900 clamp(110px, 13.5vw, 220px)/.8 var(--gr-impacto);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo em { font-size: clamp(90px, 10.5vw, 170px); }
/* Celular y tableta: el título más grande que antes y la palabra debajo y a
   la derecha de la luz (medido a 390 px). */
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo { font-size: min(36vw, 150px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo { font-size: min(23vw, 120px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(21vw, 104px); margin-top: .06em; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(20vw, 100px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(14.5vw, 72px); }
}
/* La tableta (700 a 1199 px): la luz va por la mitad, y el título crece hasta
   donde la luz sigue cayendo en la última letra ((50 % − 9 vw) / 2,11 em ≈
   19,4 vw: 159 px a 820 y 199 px a 1024). La palabra, en la misma proporción
   que en la compu. El italiano queda como en el celular. */
@media (min-width: 700px) and (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo { font-size: min(19.4vw, 210px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada #entrada-portada .entrada-titulo em { font-size: min(11vw, 120px); }
}

/* El lema: la misma grotesca angosta, recta y más liviana que el título (el
   renglón de un afiche de cine). Los tamaños, los de siempre (44 y 36 px). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada:is(.lema-b, :not([class*='lema-'])) .entrada-bajada {
  font-family: var(--gr-condensada);
  font-weight: 600;
  letter-spacing: .03em;
}

/* ── Las acciones de texto (el idioma, «Interfaz», «Empezar», «Iniciar
   sesión» y «Seguir»): la segunda cara que entra detrás de la luz es la
   impacto en mayúsculas, en rosa (antes, una serif inclinada). Es más angosta
   que la cara de siempre: va más grande y el botón no crece. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion { --ta-b-tam: 1.5em; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada #entrada-portada .entrada-seguir.texto-accion.texto-accion { --ta-b-tam: 2.3em; }
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada #entrada-portada .entrada-seguir.texto-accion.texto-accion { --ta-b-tam: 2.2em; }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada :is(#nav, #entrada-portada) .texto-accion[data-ta]::after {
  font-family: var(--gr-impacto);
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}

/* ── El botón «Interfaz», sin el recuadro ───────────────────────────────────
   Era el contorno del foco de las acciones de texto (2 px rosa, a 4 px). Ni
   con el teclado ni después de elegir con el mouse: con el foco se ve la
   segunda cara (impacto, rosa) subrayada, sin caja. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada #nav .interfaz-boton.texto-accion.texto-accion:is(:focus, :focus-visible) {
  outline: none;
  box-shadow: none;
  background: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada #nav .interfaz-boton.texto-accion.texto-accion:focus-visible::after {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
  text-underline-offset: .22em;
}

/* ── El menú abierto del celular: los destinos de impacto, en mayúsculas ── */
@media (max-width: 760px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav.menu-abierto .nav-menu > :is(a, button) {
    font: 900 30px/1.1 var(--gr-impacto);
    letter-spacing: .005em;
    text-transform: uppercase;
  }
}

/* ── El resto de la portada ─────────────────────────────────────────────── */
/* «DE UNA IDEA A ALGO QUE EXISTE»: «EXISTE», la misma impacto, en el rosa
   hondo del hueso. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero h1 > em {
  font: 900 1em/.9 var(--gr-impacto);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
/* «HECHO CON MÁS TRAUMA QUE CAFÉ»: las dos frases en el fino, «TRAUMA» (el
   <em>) de impacto. Grueso y fino de la misma letra. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .cabecera-lema h2 > span {
  font-family: var(--gr-impacto-fino);
  font-weight: 300;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* La luz pasa por el medio de la «M» de «TRAUMA» (de 1,78 a 2,36 em). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .cabecera-lema h2 > em {
  padding-left: max(calc(var(--gr-pad) - .02em), calc(var(--gr-x1) - 2.07em));
  font-family: var(--gr-impacto);
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .cabecera-lema h2 > em { font-size: min(30vw, 220px); padding-left: calc(var(--gr-pad) - .02em); }
}
/* «EMPEZAR AHORA», el cierre: de impacto en mayúsculas, como los títulos. En
   inglés y en italiano «START NOW» (3,74 em) e «INIZIARE ORA» (4,31 em)
   quedaban enteros antes de la luz: se corren para que la luz caiga en la
   última letra. En castellano sigue en 4,4 em (la «O» de «AHORA»). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .cta-final a {
  font-weight: 900;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada .cta-final a > span { padding-left: max(var(--gr-pad), calc(var(--gr-x1) - 3.42em)); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada .cta-final a > span { padding-left: max(var(--gr-pad), calc(var(--gr-x1) - 4.08em)); }
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):is(:lang(en), :lang(it)) .studio-portada .cta-final a > span { padding: 0 var(--gr-pad); }
}
/* Los títulos de las dos tarjetas de «HECHO CON MÁS TRAUMA» y los de «Una
   idea puede verse así»: de impacto en mayúsculas. Las preguntas, en
   Schibsted (en impacto, la lista de ocho preguntas pesaba demasiado). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .tarjeta-cuerpo h3,
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo h3 {
  font-family: var(--gr-impacto);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .tarjeta-cuerpo h3 { font-size: 38px; line-height: .95; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo h3 { font-size: 26px; line-height: 1; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .faq-boton {
  font: 500 20px/1.3 var(--gr-texto);
  letter-spacing: -.01em;
}
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #produccion .tarjeta-cuerpo h3 { font-size: 32px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo h3 { font-size: 22px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .faq-boton { font-size: 18px; }
}
/* La voz baja del lado hueso (el pie de las preguntas, el del sitio):
   Schibsted, en el tono bajo. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada :is(.faq-pie, #pie .pie-superior p) {
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -.01em;
}
/* Las áreas pares (la opción C): el fino de la impacto, en mayúsculas y
   espaciado; las impares siguen en la condensada 900. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #presets:is(.areas-c, :not([class*='areas-'])) .app:nth-child(even) {
  --gr-nf: var(--gr-impacto-fino);
  --gr-ne: normal;
  --gr-nw: 300;
  --gr-nls: .06em;
  --gr-ntt: uppercase;
  --gr-nl: .95;
}
/* La opción B de las áreas (no está puesta): su tercera fila iba en la voz
   baja, que ahora es la grotesca ancha y se comía la bajada; va en el fino de
   la impacto, como las pares de la C. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #presets.areas-b .app:nth-child(6n + 3) {
  --gr-nf: var(--gr-impacto-fino);
  --gr-nw: 300;
  --gr-nls: .06em;
  --gr-ntt: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA PUERTA, PARTIDA COMO TODAS (16/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Pedido del dueño: «todas las pantallas tienen que tener el mismo diseño en la
   parte principal, partido en dos, más blanco que negro». La luz de la puerta
   pasa a --gr-nav-x = --gr-reparto (38 % del ancho, ver app/grieta.css) y todo
   lo que dependía de que el negro llevara el 62 % se ajusta acá, en la compu:
     · el título: la luz tiene que seguir cayendo en la última letra, así que el
       tamaño sale del ancho del negro (--gr-corta-n es lo que mide, en em, lo
       que va desde el comienzo del texto hasta la luz) y no al revés;
     · «fluir» va del lado del papel, en la misma proporción que antes;
     · «Seguir» deja de estar parado sobre la luz (la caja ya no es lo bastante
       ancha para que no pise los «+») y va debajo de la fila, a la izquierda.
   En la tableta y el celular la luz sigue cruzando el título por el medio, pero
   después baja hacia el borde izquierdo (más abajo). Las otras interfaces
   conservan la suya. */
@media (min-width: 1200px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo {
    --gr-corta-n: 2.11;
    --gr-corta: calc(var(--gr-corta-n) * 1em);
    font-size: min(clamp(160px, 25.5vw, 500px), calc((var(--gr-reparto-v) - var(--gr-pad)) / var(--gr-corta-n)));
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada #entrada-portada .entrada-titulo { --gr-corta-n: 1.675; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo {
    --gr-corta-n: 3.617;
    font-size: min(clamp(110px, 16vw, 360px), calc((var(--gr-reparto-v) - var(--gr-pad)) / var(--gr-corta-n)));
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(en) .studio-portada #entrada-portada .entrada-titulo em {
    left: calc(var(--gr-x1) + 4vw);
    font-size: .58em;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):lang(it) .studio-portada #entrada-portada .entrada-titulo em { left: calc(var(--gr-x1) + 4vw); font-size: .66em; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-seguir {
    position: relative; top: auto; right: auto; left: auto; transform: none;
    flex-basis: auto; width: auto; margin-top: 8px;
  }
  /* Al apretarlo, el botón de antes volvía a su lugar centrado sobre la luz (la regla de «Seguir: en el centro de la pantalla»,
     más arriba, repite la posición también para :active): acá se queda donde está. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-seguir.texto-accion:is(:hover, :focus-visible, :active) {
    position: relative; top: auto; right: auto; left: auto; transform: none;
  }
}

/* La puerta en la tableta y el celular: lo mismo, con la luz que baja del título
   hacia el borde IZQUIERDO (antes, hacia el derecho): el negro queda arriba, en
   el título, y todo lo de abajo sobre papel. La caja es la única pieza oscura:
   una tarjeta de negro sobre el papel (así no se reescribe nada de lo que ya
   está pensado para leerse sobre negro), y lo demás vuelve a sus colores de papel,
   los mismos de la compu. */
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada { --gr-xr: 11px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-cuerpo {
    /* La tarjeta sale 12 px de cada lado hacia afuera: lo de adentro mide lo mismo que sin ella. */
    margin-inline: -12px;
    padding: 22px 12px 26px;
    background: var(--gr-noche) var(--gr-grano-luz);
    box-shadow: 0 18px 40px -22px rgba(14, 12, 11, .55);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-videoclip { color: var(--gr-tinta); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-videoclip > svg { background: var(--gr-rosa-hueso); color: var(--gr-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-videoclip-texto { color: var(--gr-tinta); border-bottom-color: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-videoclip-bajada { color: var(--gr-tinta-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-bajada { color: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-videoclip:focus-visible { outline-color: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .video-portada-control { color: var(--gr-tinta-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .video-portada-control:hover { color: var(--gr-tinta); }
  /* El punto que titila (23/10/2026): acá cae sobre el papel, y en marfil
     (--gr-rosa desde el 23/10, «el color rosa te dije que no lo quería») no se
     veía (1,1:1). Va del color de su letra, sin brillo. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .video-portada-control::before { background: currentColor; box-shadow: none; }
}
@media (min-width: 481px) and (max-width: 699px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada { --gr-xr: 14px; }
}
@media (min-width: 700px) and (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada { --gr-xr: 26px; }
}

/* El amarillo patito en la puerta (16/10/2026): «FLUIR», la palabra destacada,
   cae sobre el papel en la compu y en el celular: va con el patito detrás y la
   tinta encima (el resaltador). Mismo criterio que en las pantallas
   (app/grieta.css, «El amarillo patito en la parte principal»). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em {
  color: var(--gr-tinta);
  -webkit-text-fill-color: var(--gr-tinta);
  background: linear-gradient(var(--gr-patito), var(--gr-patito)) 0 62% / 100% 74% no-repeat;
  padding: 0 .06em;
  width: fit-content;
}

/* Las pestañas de la caja, un poco más angostas entre 1200 y 1439 px: la columna
   del negro (38 %) mide menos de lo que necesitan las cinco a 15 px. */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.studio-portada #entrada-portada, .entrada--pagina) .entrada-tipo { font-size: clamp(12.5px, 1.05vw, 15px); padding-inline: clamp(7px, .8vw, 12px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.studio-portada #entrada-portada, .entrada--pagina) .entrada-tipo-auto { padding-left: 0; }
  /* Y si aun así no entran, bajan de renglón en vez de esconderse en una tira que se desliza. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.studio-portada #entrada-portada, .entrada--pagina) .entrada-tipos { flex-wrap: wrap; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.studio-portada #entrada-portada, .entrada--pagina) .entrada-tipos-pista { flex-wrap: wrap; overflow: visible; }
}

/* ── La puerta, 23/10/2026 (pedidos del dueño sobre el cambio 17) ─────────────
   «no entiendo por qué FLUIR tiene esa letra… y está pintado de amarillo»;
   «todo el espacio blanco… no tiene el video que debería tener», «en pantalla
   grande», «no es un recuadro»; «ese coso de Videoclips que metiste suelto ahí
   abajo»; «por qué no está mi logo». */

/* El video del lado claro: de un poco antes de la luz hasta el borde derecho,
   a sangre. El negro (.hero-media, z-index 1, después en el HTML) lo tapa del
   lado izquierdo; la luz (z-index 2) y los textos (3) van encima. */
.studio-portada #entrada-portada > .papel-media {
  position: absolute;
  inset: 0 0 0 calc(var(--gr-x1, 40%) - 80px);
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  background: var(--gr-noche);
}
.studio-portada #entrada-portada > .papel-media > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
/* Un velo suave arriba, donde cae «FLUIR», para que se lea sobre el desierto. */
.studio-portada #entrada-portada > .papel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 7, 6, .42) 0, rgba(8, 7, 6, .12) 48%, rgba(8, 7, 6, 0) 70%);
}
.studio-portada #entrada-portada[data-fondo="intro"] > .papel-media { display: none; }

/* El video del lado claro en el celular y la tableta (23/10/2026). Pedido del
   dueño: «todo el espacio blanco … no tiene el video que debería tener, ponele
   parte de disco, parte del hombre en la terraza, parte de una de las mujeres
   de rojo, partes del bailarín», «en pantalla grande», «no es un recuadro».
   Por debajo de 1200 px la puerta se apila y mide de 1180 a 1340 px de alto:
   con el video cubriendo la sección entera, `cover` lo agrandaba al alto de
   todo eso y del lado claro quedaba una franja del 10 % del cuadro (el cielo o
   la arena): un panel liso. Ahora va solo en la zona del título: arranca
   debajo de la barra fija (76 px en el celular, 136 en la tableta, medido en
   los tres idiomas; va 4 y 6 px por debajo, para que nunca quede una raya) y
   termina donde la luz vuelve al borde izquierdo (--gr-ya, debajo del título,
   ya detrás de la caja). Así entra el cuadro entero de alto: se ven la cara y
   el vestido rojo, el bailarín y el escenario de la disco. Abajo se funde en 40 px
   con el papel. De 1200 px para arriba no cambia nada. */
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .papel-media {
    --papel-arriba: 130px;
    inset: var(--papel-arriba) 0 auto calc(var(--gr-x1, 50%) - 80px);
    height: calc(var(--gr-ya, 410px) - var(--papel-arriba));
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .papel-media > video { object-position: 60% 50%; }
}
@media (max-width: 760px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .papel-media { --papel-arriba: 72px; }
}

/* «FLUIR», «FLOW», «SCORRA»: la misma letra, el mismo tamaño y el mismo color
   que «DÉJALO», en la misma línea, sin el resaltador amarillo. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em {
  top: 0;
  left: calc(var(--gr-x1) + 6.5vw);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  color: var(--gr-hueso);
  -webkit-text-fill-color: var(--gr-hueso);
  background: none;
  padding: 0;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .5);
}
/* En inglés y en italiano, desde 1200 px, las reglas de la compu de más arriba
   (`:lang(en)` y `:lang(it)`, más fuertes que la de acá) dejaban «FLOW» a
   .58 em y «SCORRA» a .66 em, a 4 vw de la luz: «LET IT» medía 298 px y «FLOW»
   173 a 1440 (23/10/2026, revisión de las pruebas). Así van como «FLUIR»: del
   tamaño del título y a la misma distancia de la luz. Medido de 1200 a 2560 px,
   las dos quedan enteras del lado claro. */
@media (min-width: 1200px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):is(:lang(en), :lang(it)) .studio-portada #entrada-portada .entrada-titulo em {
    left: calc(var(--gr-x1) + 6.5vw);
    font-size: 1em;
  }
}
/* La mitad de «DÉJALO» que cae del lado del video va del mismo hueso: ya no
   hay papel detrás para la tinta. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo[data-cut]::after {
  color: var(--gr-hueso);
  -webkit-text-fill-color: var(--gr-hueso);
  text-shadow: 0 2px 34px rgba(0, 0, 0, .5);
}
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada .entrada-titulo em {
    font-size: min(21vw, 104px);
    line-height: .8;
  }
}

/* El botón de «Videoclips» y el lema sueltos abajo a la derecha: afuera de la
   puerta (Videoclip sigue en el menú y en el bloque de abajo). */
.studio-portada #entrada-portada :is(.entrada-videoclip, .entrada-bajada) { display: none; }

/* ── La barra de la portada con el logo (23/10/2026) ─────────────────────────
   El logo (app/grieta.css) suma unos 54 px a la marca a 24 px de letra. Medido
   en las cuatro interfaces y los tres idiomas, de 320 a 2560 px, la marca
   pisaba el menú o el idioma en cuatro franjas. Van al final porque tienen que
   ganarles a las medidas de La grieta de más arriba (las de la marca de
   impacto, de igual peso). */

/* De 1200 a 1439 px el menú va centrado entre la marca y las acciones: las
   entradas, 6 px más juntas. */
@media (min-width: 1200px) and (max-width: 1439px) {
  html .studio-portada .nav-menu { gap: 14px; }
}
/* Y donde ya no se pisaba pero quedaba pegada («STUDIO» a 6 px de «Crear» a
   1200 en La grieta; «Studio» a 7 px de «Creare» a 1281 en Nervo, en
   italiano), la marca un punto más chica: así queda a 16 px o más del menú en
   las cuatro interfaces y los tres idiomas. A 22 px, La grieta va igual que en
   la barra de las pantallas. */
@media (min-width: 1200px) and (max-width: 1279px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav :is(.marca.firma-editorial, .marca-studio) { font-size: 22px; }
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca.firma-editorial { font-size: 19px; }
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca-studio { font-size: 22px; }
}
@media (min-width: 1281px) and (max-width: 1359px) {
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca.firma-editorial { font-size: 21.5px; }
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca-studio { font-size: 24.5px; }
}
/* De 761 a 1199 px (dos filas: la marca y las acciones arriba, el menú abajo)
   la marca no entraba en su columna: las acciones, más juntas. */
@media (min-width: 761px) and (max-width: 1199px) {
  html .studio-portada .nav-acciones { gap: 10px; }
}
/* De 761 a 899 px (el iPad vertical es 768) ya se pisaba antes del logo, a
   768 en castellano por 37 px: la marca va del tamaño que tiene en el celular
   (como ya hace Void en esa franja) y el logo baja con ella. */
@media (min-width: 761px) and (max-width: 899px) {
  html .studio-portada .nav-acciones { gap: 8px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #nav :is(.marca.firma-editorial, .marca-studio) { font-size: 19px; }
  html:root[data-interfaz="rabbit"] .studio-portada #nav .marca.firma-editorial { font-size: 19px; }
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca.firma-editorial { font-size: 16.5px; }
  html:root[data-interfaz="nervo"] body.studio-portada #nav .marca-studio { font-size: 19.5px; }
}
/* Hasta 430 px, en inglés y en italiano «Get started» e «Iniziare» quedaban
   debajo de la marca (29 px a 360 en La grieta). Sin «Studio» en los tres
   idiomas, para que la marca sea la misma, como la barra de las pantallas por
   debajo de 390 px. */
@media (max-width: 430px) {
  html .studio-portada #nav .marca .marca-studio { display: none; }
}
/* RESUELTO el 23/10/2026 con la salida B (la marca apilada por debajo de 351
   px, en las dos barras: app/grieta.css, al final). Lo que había:
   de 320 a 340 px, en inglés,
   «Get started» todavía no entra al lado de la marca con el logo. En la
   portada la pisa (24 px a 320 en La grieta, 11 en Nervo, 7 en Rabbit); en la
   barra de las pantallas corta el final de «Trauma» (6 px en La grieta, 22 en
   Nervo, 3 en Rabbit; y 1 px en italiano en Nervo). En castellano entra, pero
   justa: hasta 350 px «Empezar» o «Get started» quedan a 3–6 px de la marca
   en la portada. Void ya va apilada. No queda de dónde sacar sin cambiar algo
   que se ve. Dos salidas probadas por debajo de 351 px, las dos con 0 pisadas
   y 0 cortes en las cuatro interfaces y los tres idiomas, con el logo en su
   lugar:
   A · la marca más chica: 13 px (12 en Nervo) en la portada y 13 px (12 en
       Rabbit, 11 en Nervo) en las pantallas. A 320 en inglés queda a 1 px;
   B · la marca apilada en las dos barras, «SWEET LITTLE» arriba y «TRAUMA»
       abajo, con el logo al lado, como Void por debajo de 390. Queda con aire
       en todos los casos: es la recomendada.
   Otras: «Start» en vez de «Get started» (es texto: index.html y shell.js) o
   sin el logo por debajo de 351. */


/* ── El logo y la Tienda juntos en la barra de la portada (23/10/2026) ───────
   El logo de la mañana se midió con cinco entradas, y el cambio 18 sumó la
   Tienda midiendo sin el logo. Juntos, medidos en las cuatro interfaces y los
   tres idiomas, con y sin sesión (un nombre de 32 letras), de 1200 a 1920 px,
   no se pisa nada, el logo sigue a la altura de las mayúsculas y la Tienda se
   ve entre «Mis creaciones» y «Más». Lo único que no entraba es Nervo en
   italiano (la monoespaciada con las palabras más largas: «Le mie creazioni»,
   «Negozio», «IT · Italiano»): la fila se comía el margen derecho, sin sesión
   3 px a 1281 y 10 a 1440; con sesión 9 a 1200, 4 a 1281, 15 a 1360 y 23 a
   1440. Solo ahí, sin tocar letras, colores, el logo ni la Tienda, con las
   mismas salidas del cambio 18: las entradas un poco más juntas y, con sesión,
   el nombre más cortado («…»).
   Y de 1200 a 1208 px, en La grieta y en Nervo, la marca quedaba a 12-15 px del
   menú (y el menú a 12-15 del idioma), lo mismo o menos que entre las entradas
   (14): se leía todo como una sola tira. De 1200 a 1279 las entradas van a
   12 px y lo que se gana queda a los dos lados del menú. Void y Rabbit ya
   tenían aire; Void, además, lleva corchetes que a 12 px se tocarían. */
@media (min-width: 1200px) and (max-width: 1279px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz]), [data-interfaz="nervo"]) body.studio-portada .nav-menu { gap: 12px; }
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 60px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada .nav-menu { gap: 12px; }
}
@media (min-width: 1360px) and (max-width: 1439px) {
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 72px; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada .nav-menu { gap: 18px; }
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada #nav .acceso-cuenta .cuenta-disparador { max-width: 80px; }
}

/* ── 1440 a 1479 px: el menú del 257d4e9 con el logo (24/10/2026) ──────────
   El cambio 18 (257d4e9, 23/10) volvió a centrar el menú en la pantalla de
   1440 a 1599 px, como pidió el dueño: «la marca a la izquierda y el menú al
   centro», con las entradas a 24 px. Se midió sin el logo. Con el logo la
   marca es unos 55 px más ancha y, medido en las cuatro interfaces, es/en/it,
   con y sin sesión, de 1440 a 1640 px (_trabajo/final/menu/), de 1440 a 1460
   el menú quedaba a 20-29 px de la marca en La grieta (es, it), Void (it) y
   Nervo (es, en, it), y en Void en italiano la fila se comía hasta 16 px del
   margen derecho. Nada se pisaba.
   Solo en esa franja, sin tocar el logo, las letras ni las acciones, las
   entradas se juntan de a poco hasta 1480 px, donde vuelven a los 24:
     · todas, de 20 px a 1440 a 24 a 1480;
     · Void en italiano (las palabras más largas en mayúsculas), de 18 a 24;
       sus corchetes, de 10 px, se ven de a uno y no llegan a la vecina;
     · Nervo en italiano (ya a 18 desde 1440), de 15 a 18.
   El menú queda centrado en la pantalla donde entra. Donde no entra (las
   acciones, con «Interfaz» y la cuenta, son más anchas que la marca), queda
   lo más cerca posible del centro y lo que se gana va entre la marca y el
   menú: 30 px o más de la marca y de las acciones en todos los casos, y
   siempre más que entre las entradas. */
@media (min-width: 1440px) and (max-width: 1479px) {
  html .studio-portada .nav-menu { gap: clamp(20px, calc(20px + (100vw - 1440px) / 10), 24px); }
  :root[data-interfaz="void"]:lang(it) body.studio-portada .nav-menu { gap: clamp(18px, calc(18px + (100vw - 1440px) * .15), 24px); }
  :root[data-interfaz="nervo"]:lang(it) body.studio-portada .nav-menu { gap: clamp(15px, calc(15px + (100vw - 1440px) / 10), 18px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS BOTONES SON LA PALABRA (24/10/2026)
   Pedido del dueño (24/10/2026): «LOS BOTONES ENCERRADOS EN UNA CAJA CUADRADA
   Y PUNTAGUDA NO VAN, EMPEZAR NO LLEVA BOTON... EL BOTON DE COMENZAR SOLO LLEVA
   LA PALABRA COMO BOTON». Antes (21/10/2026): «que los botones no tengan un
   cuadrado que los encierre, que sea todo soft delicado».
   Lo común está en app/grieta.css (misma fecha, mismo título); acá, los
   botones propios de la portada, que traían su caja escrita con más fuerza:
     · «Hacer un videoclip» y «Empezar ahora»: solo la palabra, sin la caja de
       luz y sin la flecha.
     · «EMPEZAR AHORA», el cierre: la palabra grande, sin el círculo de luz con
       la flecha.
     · «HERRAMIENTAS», «MARKETING» y los demás accesos del bloque «De una idea»:
       las versalitas, sin el recuadro.
     · «Ver toda la inspiración»: la palabra subrayada, sin el filete.
   «Empezar ahora» estaba parado sobre la luz (la mitad sobre el papel): sin
   caja, la letra marfil no se leería del lado claro, así que pasa a la
   columna negra, debajo de los accesos, como ya iba en el celular.
   Solo La grieta; Void, Nervo y Rabbit conservan su diseño.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .clip-boton {
  min-height: 48px;
  padding: 0 2px;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--gr-hueso);
  font: 700 17px/1.2 var(--gr-texto);
  letter-spacing: .01em;
  text-decoration: underline 1px color-mix(in oklch, currentColor 50%, transparent);
  text-underline-offset: .34em;
  text-shadow: 0 1px 14px rgba(14, 12, 11, .8);
  transition: text-decoration-color .2s ease, text-shadow .3s ease;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .clip-boton > i { display: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .clip-boton:hover {
  background: none;
  text-decoration-color: currentColor;
  text-shadow: 0 1px 14px rgba(14, 12, 11, .8), 0 0 18px rgba(255, 255, 255, .35);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .clip-boton:focus-visible { outline: 2px solid color-mix(in oklch, var(--gr-hueso) 45%, transparent); outline-offset: 5px; border-radius: 10px; text-decoration: underline 3px currentColor; }

:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .pastillas { gap: 0 18px; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .pastillas a {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gr-hueso);
  font: 600 13px/1 var(--gr-texto);
  letter-spacing: .16em;
  text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: .5em;
  transition: text-decoration-color .2s ease, text-shadow .3s ease;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .pastillas a:hover {
  border-color: transparent;
  background: none;
  color: var(--gr-hueso);
  text-decoration-color: currentColor;
  text-shadow: 0 0 18px rgba(255, 255, 255, .35);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .pastillas a:focus-visible { outline: 2px solid color-mix(in oklch, var(--gr-hueso) 45%, transparent); outline-offset: 5px; border-radius: 10px; text-decoration: underline 3px currentColor; }

html:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .boton-grande {
  grid-column: l;
  justify-self: start;
  width: auto;
  min-height: 48px;
  margin: 36px 0 0;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--gr-hueso);
  font: 700 18px/1.2 var(--gr-texto);
  letter-spacing: .01em;
  text-decoration: underline 1px color-mix(in oklch, currentColor 50%, transparent);
  text-underline-offset: .34em;
  transition: text-decoration-color .2s ease, text-shadow .3s ease;
}
html:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .boton-grande::after { content: none; }
html:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .boton-grande:is(:hover, :active) {
  background: none;
  box-shadow: none;
  transform: none;
  color: var(--gr-hueso);
  text-decoration: underline 1px currentColor;
  text-underline-offset: .34em;
  text-shadow: 0 0 18px rgba(255, 255, 255, .35);
}
html:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .boton-grande:focus-visible { outline: 2px solid color-mix(in oklch, var(--gr-hueso) 45%, transparent); outline-offset: 5px; border-radius: 10px; text-decoration: underline 3px currentColor; }
@media (max-width: 1199px) {
  html:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .hero .boton-grande { width: auto; margin: 32px 0 0; }
}

/* El cierre: la palabra grande, partida por la luz, y nada más. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .cta-final .flecha-circulo { display: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .cta-final a { transition: filter .3s ease; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada .cta-final a:hover { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .22)); }

:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo-ver-todo {
  padding: 0 2px;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  color: var(--gr-hueso);
  text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: .34em;
  transition: text-decoration-color .2s ease, text-shadow .3s ease;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo-ver-todo:hover {
  background: none;
  color: var(--gr-hueso);
  text-decoration-color: currentColor;
  text-shadow: 0 0 18px rgba(255, 255, 255, .35);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #ejemplos .ejemplo-ver-todo:focus-visible { outline: 2px solid color-mix(in oklch, var(--gr-hueso) 45%, transparent); outline-offset: 5px; border-radius: 10px; text-decoration: underline 3px currentColor; }

/* ── El foco del teclado, tenue también en la portada (24/10/2026) ─────────────
   Pedido del dueño (24/10/2026): «LOS BOTONES ENCERRADOS EN UNa cJA CUADRADA Y
   PUNTAGUDA NO VAN, EMPEZAR NO LLEVA BOTON... EL BOTON DE COMENZAR SOLO LLEVA
   LA PALABRA COMO BOTON».
   La forma redondeada del foco está en app/grieta.css («Lo que quedaba con
   caja, visto con el ojo del dueño»). Acá, el color: en «Empezar», «Iniciar
   sesión», «Seguir» y los enlaces de los ejemplos, las reglas de la portada lo
   ponían opaco, y con el teclado «EMPEZAR» se veía como un botón con marco.
   Ahora es el mismo anillo tenue de los demás. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada :is(#nav, #entrada-portada) .texto-accion.texto-accion:focus-visible,
:root:is([data-interfaz="grieta"], :not([data-interfaz])) body.studio-portada #ejemplos :is(a, summary):not(.ejemplo-ver-todo):focus-visible {
  outline-color: color-mix(in oklch, currentColor 55%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA RAJADURA QUIETA CON REFLEJOS DE SOL (propuesta d, 24/10/2026)
   Pedido del dueño: «la rajadura que sea estatica, pero de algunas partes del
   total de la rajadura, sale un reflejo de sol medio mistico, asi con polvo de
   estrellas». app/grieta.js pone la clase grieta-quieta en el <html> mientras
   está la rajadura quieta (solo con La grieta; las pieles siguen como antes).
   ═══════════════════════════════════════════════════════════════════════════ */
/* La línea: fina (2 px, centrada en el borde: ya no hace falta correrla 1,5 px),
   de luz blanca suave y QUIETA: sin el parpadeo de cada 11 s. El brillo, corto
   y blando; el sol lo ponen los reflejos. */
html.grieta-quieta .studio-portada .grieta > .grieta-luz,
html.grieta-quieta .studio-portada #ejemplos > .grieta-luz {
  transform: none;
  animation: none;
  will-change: auto;
  filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .95)) drop-shadow(0 0 4px rgba(255, 255, 255, .5)) drop-shadow(0 0 14px rgba(236, 240, 248, .2));
}
html.grieta-quieta .studio-portada .grieta-luz::before { background: linear-gradient(180deg, #FFFFFF, #F3F1EC 45%, #FFFFFF); }
@media (max-width: 1199px) {
  html.grieta-quieta .studio-portada .grieta > .grieta-luz,
  html.grieta-quieta .studio-portada #ejemplos > .grieta-luz { filter: drop-shadow(0 0 .7px rgba(255, 255, 255, .95)) drop-shadow(0 0 5px rgba(255, 255, 255, .42)); }
}
/* Los lienzos de los reflejos (app/grieta-reflejos.js): fijos en su sección,
   encima del negro y de los videos (z-index 1) y de la cinta, DEBAJO de las
   letras, la caja y los botones (3): la luz entra desde atrás y las letras
   quedan a contraluz, nítidas. No reciben clics. Con :is() le ganan a
   «.grieta > *» (position: relative, z-index 3). */
.studio-portada :is(.grieta, #ejemplos) > .grieta-reflejo {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  max-width: none;
  pointer-events: none;
  user-select: none;
}
/* (Vuelta 2, 24/10/2026) El video de la puerta vuelve a terminar como en la
   rama, con su color hasta el final de la sección. En la vuelta 1 se fundía en
   el papel en sus últimos 160 px y ese fundido entraba en la primera pantalla:
   con la mujer de rojo daba ROSA (171, 93, 96) y con las tomas claras lavaba
   el video a niebla. El dueño no lo pidió y el rosa ya lo rechazó el 23/10. El
   empalme con Videoclips queda en un corte seco al pie de la sección, debajo
   del codo de la rajadura (a 1440 × 900, 65 px por debajo de la pantalla). */

/* La línea de la puerta en el teléfono (vuelta 2): debajo del título se iba al
   borde izquierdo, a 11 px, y asomaba junto a la caja (que empieza en 10 px).
   Ahora sale de la pantalla (a −16 px, con sus ondas y su brillo afuera):
   debajo del título todo queda sobre papel, como pide el diseño de la puerta
   del celular, y la caja es la única pieza oscura, con el mismo margen de papel
   a los dos lados. */
@media (max-width: 699px) {
  :root.grieta-quieta:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada { --gr-xr: -16px; }
}
/* Y el video del celular y la tableta (vuelta 2) tampoco se funde en el papel:
   el fundido de 40 px de la rama caía en las dos franjas de papel que quedan
   junto a la caja y, con la mujer de rojo, daba ROSA (173, 104, 105 a 390 px).
   Termina seco donde terminaba (--gr-ya), detrás de la caja. */
@media (max-width: 1199px) {
  :root.grieta-quieta:is([data-interfaz="grieta"], :not([data-interfaz])) .studio-portada #entrada-portada > .papel-media {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* El negro de la puerta baja al de Videoclips en sus últimos 190 px: en el
   empalme había un escalón de tono (17 de brillo arriba, 12 abajo) que se leía
   como una raya horizontal cruzando la página. */
@media (min-width: 1200px) {
  html.grieta-quieta .studio-portada #entrada-portada > .hero-media::before {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 190px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 11, 10, 0), rgb(12, 11, 10) 92%);
  }
}

/* El resplandor de lente de cada reflejo (app/grieta-reflejos.js): lo único
   que va ADELANTE de las letras (z-index 4), chico, en «pantalla» (sobre lo
   claro casi no cambia nada): el sol que la cámara ve a través de la rendija
   se derrama un poco sobre el borde de la letra partida. Una mancha blanda
   (la caída imita una exponencial, sin anillos) y sin rayas (vuelta 2: la
   línea plata horizontal de lente salió del lienzo). Su opacidad la lleva el
   bucle de los reflejos (la entrada y la respiración). */
.studio-portada :is(.grieta, #ejemplos) > .grieta-reflejo-sol {
  position: absolute;
  z-index: 4;
  display: block;
  margin: 0;
  max-width: none;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .86) 0%, rgba(255, 254, 251, .66) 3%, rgba(255, 252, 248, .42) 7%, rgba(250, 250, 253, .25) 12%, rgba(244, 247, 255, .13) 20%, rgba(240, 244, 255, .062) 31%, rgba(238, 243, 255, .024) 48%, rgba(238, 243, 255, .007) 70%, rgba(238, 243, 255, 0) 100%);
}