/* ═══════════════════════════════════════════════════════════════════════════
   SWEET LITTLE TRAUMA — LA GRIETA DE LUZ · LO COMÚN
   ───────────────────────────────────────────────────────────────────────────
   La estética que eligió el dueño el 11/10/2026: la propuesta 3, «La grieta
   de luz», invertida. El negro a la izquierda y dominante, el hueso a la
   derecha y una grieta de luz cálida que baja por la página. Maqueta:
   SLT-Next/_etapa2/esteticas/propuesta-3/index.html. Plan:
   _etapa2/ESTETICA-GRIETA-PLAN.md.

   Es una CAPA ENCIMA: va al final del <head> de cada página y les cambia el
   valor a las variables de siempre (--papel, --g0…--g10, --tinta, --f-rara…),
   así lo que no se reescribe hereda el negro, el hueso y las letras nuevas sin
   romperse. Para ver una página como antes alcanza con sacar su <link>.

   Acá vive lo que comparten todas las pantallas: las letras, la paleta, el
   encabezado, el pie, los botones, los paneles que se abren en papel hueso
   («Más», la cuenta, los desplegables de la caja) y la caja LET IT flow, que
   es la misma en la portada y en /crear/. La composición de la portada está
   en studio/portada-grieta.css.

   Ningún texto cambia: las mayúsculas de algunos rótulos las pone el CSS.

   EL PAPEL MAL CORTADO (12/10/2026). La división entre el negro y el hueso ya
   no es un zigzag solo arriba: es, de arriba abajo, el borde de un papel
   cortado con tijera por alguien que se fue de lado. La portada lo calcula en
   vivo (app/grieta.js y app/grieta-papel.js). Las pantallas internas no cargan
   JavaScript: acá lo dibuja una tira que se repite hacia abajo (la escribe
   tools/gen-papel-grieta.js entre PAPEL-INICIO y PAPEL-FIN) y que cada pieza
   —la cabecera, los paneles de hueso, /crear/, /entrar/, el pie— usa como
   máscara; el celular y la tableta traen otro juego, más chico, y la luz
   acostada de los bloques de hueso su propia tira.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Las letras (15/10/2026) ──────────────────────────────────────────────────
   Pedido del dueño: «te pedí mil veces que cambies la tipografía de la página
   y sigue en cursiva como si fuera letra de carta española de mi bisabuela…
   letras modernas en toda la página». Antes (14/10): «la letra cursiva o así
   medio inclinada no va, tiene que ser letras de impacto, letras de editorial».

   Dos familias de palo seco, las dos rectas, las dos ya alojadas en
   shared/fonts/ (OFL; no se bajó nada):
     · «SLT Impacto»: Sofia Sans Extra Condensed 900, la grotesca angosta de
       los créditos de un afiche (Lettersoup). Títulos, marca, menú abierto del
       celular, lista de áreas y lema, siempre en mayúsculas. La palabra que
       antes iba en cursiva se queda en la misma letra y el mismo peso y se
       destaca solo con el color (rosa sobre el negro, rosa hondo sobre el
       hueso).
     · «SLT Impacto Fino»: el mismo archivo variable, a 300. La segunda voz de
       impacto («STUDIO» de la marca, las áreas pares, las frases de «Hecho con
       más TRAUMA que café»): el contraste sale del peso, grueso y fino de la
       misma letra, como un cartel de créditos de cine. Va declarada aparte,
       así las reglas viejas que piden 400 con la letra de títulos (eran para
       Gloock) siguen saliendo en 900.
     · Schibsted Grotesk (variable de 400 a 900): todo el texto, los botones,
       los rótulos (600, mayúsculas, espaciados) y lo que antes iba «en voz
       baja» con una serif itálica (las bajadas, la caja, los ejemplos, el pie,
       las preguntas, la cita de /nosotros/). Esa voz se separa del cuerpo por
       el tamaño y el tono, no por la inclinación.
     · JetBrains Mono (shared/fonts/fonts.css) queda solo para el dato exacto:
       el pedido tal cual, los números de trabajo, los tiempos, los códigos.
   Ninguna cara itálica se declara ni se pide: Gloock, Cormorant Garamond, la
   Times del sistema, la itálica de Sofia y la de Instrument Serif salieron
   (sus archivos siguen en shared/fonts/, sin uso; FUENTES-LICENCIAS.md).
   body no sintetiza (font-synthesis: none): ni negritas ni cursivas falsas.
   Licencias en shared/fonts/OFL-*.txt. */
/* Schibsted Grotesk · latin-ext */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../../shared/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Schibsted Grotesk · latin */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../../shared/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Sofia Sans Extra Condensed con todo su rango de peso (1 a 1000): la lista de
   áreas de la portada y el lema la piden en pesos intermedios (--gr-condensada).
   Ya estaba en shared/fonts/ (la bajó el 02/10/2026; OFL en OFL-sofia-sans.txt). */
/* latin */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sofia Sans Extra Condensed';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* «SLT Impacto»: el mismo archivo, con un solo peso, 900. Toda regla que pide
   otro peso con la letra de títulos dibuja la 900 (el navegador lleva el eje
   de peso al rango de la declaración). */
/* latin */
@font-face {
  font-family: 'SLT Impacto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'SLT Impacto';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* «SLT Impacto Fino»: el mismo archivo, a 300. */
/* latin */
@font-face {
  font-family: 'SLT Impacto Fino';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'SLT Impacto Fino';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../../shared/fonts/sofia-sans-xc-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── El papel mal cortado: las tiras ──────────────────────────────────────────
   La división entre el negro y el hueso de las pantallas internas (sin
   JavaScript) es el borde de un papel cortado con tijera por alguien que se fue
   de lado: de arriba abajo, con desvíos lentos de 6 a 20 px y dientes de 2 a 6
   px a distancias distintas. Lo dibuja UNA tira que se repite hacia abajo y que
   escribe tools/gen-papel-grieta.js (misma matemática que app/grieta-papel.js,
   que usa la portada en vivo). Más abajo, en «El papel mal cortado: cómo se
   usa», cada pieza (cabecera, paneles de hueso, pie) la pone en su lugar. */
/* PAPEL-INICIO · generado por tools/gen-papel-grieta.js (no se edita a mano) */
/* Tira de 60 × 2400 px, línea sin desvío en x = 30; 151 puntos; semilla «tira-papel»; sal «papel-mal-cortado-1». Tres juegos: el desvío entero, a 0,75 y a 0,45 (el borde no se pasa de la pantalla en el celular). */
/* compu (1200 px o más) */
:root {
  --gr-tira-izq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M0 0L30 0L33 12L30.3 52.2L36.7 77.9L35.1 89.2L32.1 108.5L36.2 117.1L41.5 125.9L39.1 136.2L43.5 143.9L42.1 186.5L37 201.4L41.4 227L47.6 232.9L45 258.1L39.8 269.5L43.6 291.7L44.2 293.7L46.5 304L42.5 309.1L38.6 321.3L44.1 336.6L40.5 348.4L41.9 380.6L38.4 405.7L43.8 421.1L37.7 428.6L42.3 450.7L38.6 456.9L42.1 481.2L36.9 499.9L38.5 524.8L38.2 533.8L32.3 545L31.2 587.2L26.1 597L28.7 602.3L29.4 639.6L23.3 663.5L23.4 664.2L26.6 670.2L24.8 694.6L23.8 706.5L28.6 716.4L27.6 735.4L34.5 746.7L43.1 778.9L48.7 789.1L46.5 807.3L45.2 809.9L40.3 815.6L42 822.1L45.4 831L36.7 851.7L37.7 873.4L30.8 882.9L34.4 898.3L35.4 932.1L27.5 957.3L21.5 965.3L18.1 970.4L16.3 996.3L17.7 1005.2L15.8 1013.2L19.1 1023.6L26.7 1066.9L21.6 1076.5L26 1097.3L30.9 1105L29 1137L34.5 1155.7L40.2 1178.4L38.8 1196L35.2 1207.7L36.9 1217.1L30.5 1226.9L33.3 1235.9L26.3 1268.6L27.4 1286.9L22.1 1296.3L26.3 1308.1L22 1316.2L22.8 1338.3L18 1349.3L17 1364.2L18.6 1381.5L13.4 1402.3L9.3 1426.8L15.2 1438.4L18.2 1443.8L16.4 1466.6L19.6 1486.7L15.3 1492.9L21 1506L15.7 1524.6L19.4 1560.2L14.6 1572.8L12.9 1599.9L16.8 1605.2L21.7 1627L18.9 1641.4L17.1 1665L23.2 1671.1L22.7 1672.6L17.8 1687L21.8 1695.3L17 1707.8L19.4 1724.2L16.7 1731.5L14.5 1751.8L12.2 1763.7L17.3 1782.7L23.3 1796.5L17.8 1819L15.5 1824.1L18.2 1835L13.3 1869.5L19.3 1886L22.4 1892.4L25.4 1915.3L22 1924L23.5 1935L26.2 1955.2L22.2 1983L17.4 1991.5L14.8 2010.3L17.1 2021.5L20.6 2030.3L17 2037.6L19.4 2059.1L21.9 2096.8L19.8 2116.9L24.7 2128.1L28.4 2146.2L25.8 2169.7L28.2 2177.9L25.7 2189L29 2198.9L23.2 2205.9L28.2 2228.1L27.4 2231.2L25.5 2239L23.7 2245.4L21 2270.9L26.7 2287.8L24.8 2304.6L29.6 2327.3L27.1 2346.4L23.1 2366.5L27.4 2389.9L30 2400L0 2400Z'/%3E%3C/svg%3E");
  --gr-tira-der: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M60 0L30 0L33 12L30.3 52.2L36.7 77.9L35.1 89.2L32.1 108.5L36.2 117.1L41.5 125.9L39.1 136.2L43.5 143.9L42.1 186.5L37 201.4L41.4 227L47.6 232.9L45 258.1L39.8 269.5L43.6 291.7L44.2 293.7L46.5 304L42.5 309.1L38.6 321.3L44.1 336.6L40.5 348.4L41.9 380.6L38.4 405.7L43.8 421.1L37.7 428.6L42.3 450.7L38.6 456.9L42.1 481.2L36.9 499.9L38.5 524.8L38.2 533.8L32.3 545L31.2 587.2L26.1 597L28.7 602.3L29.4 639.6L23.3 663.5L23.4 664.2L26.6 670.2L24.8 694.6L23.8 706.5L28.6 716.4L27.6 735.4L34.5 746.7L43.1 778.9L48.7 789.1L46.5 807.3L45.2 809.9L40.3 815.6L42 822.1L45.4 831L36.7 851.7L37.7 873.4L30.8 882.9L34.4 898.3L35.4 932.1L27.5 957.3L21.5 965.3L18.1 970.4L16.3 996.3L17.7 1005.2L15.8 1013.2L19.1 1023.6L26.7 1066.9L21.6 1076.5L26 1097.3L30.9 1105L29 1137L34.5 1155.7L40.2 1178.4L38.8 1196L35.2 1207.7L36.9 1217.1L30.5 1226.9L33.3 1235.9L26.3 1268.6L27.4 1286.9L22.1 1296.3L26.3 1308.1L22 1316.2L22.8 1338.3L18 1349.3L17 1364.2L18.6 1381.5L13.4 1402.3L9.3 1426.8L15.2 1438.4L18.2 1443.8L16.4 1466.6L19.6 1486.7L15.3 1492.9L21 1506L15.7 1524.6L19.4 1560.2L14.6 1572.8L12.9 1599.9L16.8 1605.2L21.7 1627L18.9 1641.4L17.1 1665L23.2 1671.1L22.7 1672.6L17.8 1687L21.8 1695.3L17 1707.8L19.4 1724.2L16.7 1731.5L14.5 1751.8L12.2 1763.7L17.3 1782.7L23.3 1796.5L17.8 1819L15.5 1824.1L18.2 1835L13.3 1869.5L19.3 1886L22.4 1892.4L25.4 1915.3L22 1924L23.5 1935L26.2 1955.2L22.2 1983L17.4 1991.5L14.8 2010.3L17.1 2021.5L20.6 2030.3L17 2037.6L19.4 2059.1L21.9 2096.8L19.8 2116.9L24.7 2128.1L28.4 2146.2L25.8 2169.7L28.2 2177.9L25.7 2189L29 2198.9L23.2 2205.9L28.2 2228.1L27.4 2231.2L25.5 2239L23.7 2245.4L21 2270.9L26.7 2287.8L24.8 2304.6L29.6 2327.3L27.1 2346.4L23.1 2366.5L27.4 2389.9L30 2400L60 2400Z'/%3E%3C/svg%3E");
  --gr-tira-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='2400'%3E%3Cstop offset='0' stop-color='%23FFF6E8'/%3E%3Cstop offset='.33' stop-color='%23FFE4BF'/%3E%3Cstop offset='.66' stop-color='%23FFF6E8'/%3E%3Cstop offset='1' stop-color='%23FFF6E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='3' stroke-linejoin='round' d='M30 0L33 12L30.3 52.2L36.7 77.9L35.1 89.2L32.1 108.5L36.2 117.1L41.5 125.9L39.1 136.2L43.5 143.9L42.1 186.5L37 201.4L41.4 227L47.6 232.9L45 258.1L39.8 269.5L43.6 291.7L44.2 293.7L46.5 304L42.5 309.1L38.6 321.3L44.1 336.6L40.5 348.4L41.9 380.6L38.4 405.7L43.8 421.1L37.7 428.6L42.3 450.7L38.6 456.9L42.1 481.2L36.9 499.9L38.5 524.8L38.2 533.8L32.3 545L31.2 587.2L26.1 597L28.7 602.3L29.4 639.6L23.3 663.5L23.4 664.2L26.6 670.2L24.8 694.6L23.8 706.5L28.6 716.4L27.6 735.4L34.5 746.7L43.1 778.9L48.7 789.1L46.5 807.3L45.2 809.9L40.3 815.6L42 822.1L45.4 831L36.7 851.7L37.7 873.4L30.8 882.9L34.4 898.3L35.4 932.1L27.5 957.3L21.5 965.3L18.1 970.4L16.3 996.3L17.7 1005.2L15.8 1013.2L19.1 1023.6L26.7 1066.9L21.6 1076.5L26 1097.3L30.9 1105L29 1137L34.5 1155.7L40.2 1178.4L38.8 1196L35.2 1207.7L36.9 1217.1L30.5 1226.9L33.3 1235.9L26.3 1268.6L27.4 1286.9L22.1 1296.3L26.3 1308.1L22 1316.2L22.8 1338.3L18 1349.3L17 1364.2L18.6 1381.5L13.4 1402.3L9.3 1426.8L15.2 1438.4L18.2 1443.8L16.4 1466.6L19.6 1486.7L15.3 1492.9L21 1506L15.7 1524.6L19.4 1560.2L14.6 1572.8L12.9 1599.9L16.8 1605.2L21.7 1627L18.9 1641.4L17.1 1665L23.2 1671.1L22.7 1672.6L17.8 1687L21.8 1695.3L17 1707.8L19.4 1724.2L16.7 1731.5L14.5 1751.8L12.2 1763.7L17.3 1782.7L23.3 1796.5L17.8 1819L15.5 1824.1L18.2 1835L13.3 1869.5L19.3 1886L22.4 1892.4L25.4 1915.3L22 1924L23.5 1935L26.2 1955.2L22.2 1983L17.4 1991.5L14.8 2010.3L17.1 2021.5L20.6 2030.3L17 2037.6L19.4 2059.1L21.9 2096.8L19.8 2116.9L24.7 2128.1L28.4 2146.2L25.8 2169.7L28.2 2177.9L25.7 2189L29 2198.9L23.2 2205.9L28.2 2228.1L27.4 2231.2L25.5 2239L23.7 2245.4L21 2270.9L26.7 2287.8L24.8 2304.6L29.6 2327.3L27.1 2346.4L23.1 2366.5L27.4 2389.9L30 2400'/%3E%3C/svg%3E");
}
/* tableta (981 a 1199 px) */
@media (max-width: 1199px) {
  :root {
    --gr-tira-izq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M0 0L30 0L32.3 12L30.2 52.2L35.1 77.9L33.8 89.2L31.6 108.5L34.7 117.1L38.6 125.9L36.8 136.2L40.1 143.9L39 186.5L35.2 201.4L38.5 227L43.2 232.9L41.3 258.1L37.3 269.5L40.2 291.7L40.6 293.7L42.3 304L39.4 309.1L36.4 321.3L40.6 336.6L37.8 348.4L38.9 380.6L36.3 405.7L40.4 421.1L35.8 428.6L39.2 450.7L36.4 456.9L39.1 481.2L35.2 499.9L36.4 524.8L36.1 533.8L31.7 545L30.9 587.2L27 597L29 602.3L29.5 639.6L25 663.5L25 664.2L27.4 670.2L26.1 694.6L25.4 706.5L28.9 716.4L28.2 735.4L33.4 746.7L39.9 778.9L44.1 789.1L42.4 807.3L41.4 809.9L37.7 815.6L39 822.1L41.6 831L35 851.7L35.8 873.4L30.6 882.9L33.3 898.3L34 932.1L28.1 957.3L23.6 965.3L21 970.4L19.7 996.3L20.8 1005.2L19.4 1013.2L21.9 1023.6L27.5 1066.9L23.7 1076.5L27 1097.3L30.7 1105L29.2 1137L33.4 1155.7L37.6 1178.4L36.6 1196L33.9 1207.7L35.1 1217.1L30.4 1226.9L32.5 1235.9L27.2 1268.6L28.1 1286.9L24.1 1296.3L27.3 1308.1L24 1316.2L24.6 1338.3L21 1349.3L20.3 1364.2L21.4 1381.5L17.5 1402.3L14.4 1426.8L18.9 1438.4L21.1 1443.8L19.8 1466.6L22.2 1486.7L19 1492.9L23.3 1506L19.3 1524.6L22 1560.2L18.4 1572.8L17.2 1599.9L20.1 1605.2L23.8 1627L21.7 1641.4L20.3 1665L24.9 1671.1L24.5 1672.6L20.8 1687L23.9 1695.3L20.3 1707.8L22 1724.2L20 1731.5L18.4 1751.8L16.6 1763.7L20.5 1782.7L25 1796.5L20.8 1819L19.1 1824.1L21.2 1835L17.5 1869.5L21.9 1886L24.3 1892.4L26.5 1915.3L24 1924L25.1 1935L27.2 1955.2L24.2 1983L20.6 1991.5L18.6 2010.3L20.3 2021.5L23 2030.3L20.2 2037.6L22.1 2059.1L23.9 2096.8L22.3 2116.9L26 2128.1L28.8 2146.2L26.8 2169.7L28.6 2177.9L26.8 2189L29.3 2198.9L24.9 2205.9L28.6 2228.1L28 2231.2L26.6 2239L25.2 2245.4L23.3 2270.9L27.6 2287.8L26.1 2304.6L29.7 2327.3L27.8 2346.4L24.8 2366.5L28.1 2389.9L30 2400L0 2400Z'/%3E%3C/svg%3E");
    --gr-tira-der: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M60 0L30 0L32.3 12L30.2 52.2L35.1 77.9L33.8 89.2L31.6 108.5L34.7 117.1L38.6 125.9L36.8 136.2L40.1 143.9L39 186.5L35.2 201.4L38.5 227L43.2 232.9L41.3 258.1L37.3 269.5L40.2 291.7L40.6 293.7L42.3 304L39.4 309.1L36.4 321.3L40.6 336.6L37.8 348.4L38.9 380.6L36.3 405.7L40.4 421.1L35.8 428.6L39.2 450.7L36.4 456.9L39.1 481.2L35.2 499.9L36.4 524.8L36.1 533.8L31.7 545L30.9 587.2L27 597L29 602.3L29.5 639.6L25 663.5L25 664.2L27.4 670.2L26.1 694.6L25.4 706.5L28.9 716.4L28.2 735.4L33.4 746.7L39.9 778.9L44.1 789.1L42.4 807.3L41.4 809.9L37.7 815.6L39 822.1L41.6 831L35 851.7L35.8 873.4L30.6 882.9L33.3 898.3L34 932.1L28.1 957.3L23.6 965.3L21 970.4L19.7 996.3L20.8 1005.2L19.4 1013.2L21.9 1023.6L27.5 1066.9L23.7 1076.5L27 1097.3L30.7 1105L29.2 1137L33.4 1155.7L37.6 1178.4L36.6 1196L33.9 1207.7L35.1 1217.1L30.4 1226.9L32.5 1235.9L27.2 1268.6L28.1 1286.9L24.1 1296.3L27.3 1308.1L24 1316.2L24.6 1338.3L21 1349.3L20.3 1364.2L21.4 1381.5L17.5 1402.3L14.4 1426.8L18.9 1438.4L21.1 1443.8L19.8 1466.6L22.2 1486.7L19 1492.9L23.3 1506L19.3 1524.6L22 1560.2L18.4 1572.8L17.2 1599.9L20.1 1605.2L23.8 1627L21.7 1641.4L20.3 1665L24.9 1671.1L24.5 1672.6L20.8 1687L23.9 1695.3L20.3 1707.8L22 1724.2L20 1731.5L18.4 1751.8L16.6 1763.7L20.5 1782.7L25 1796.5L20.8 1819L19.1 1824.1L21.2 1835L17.5 1869.5L21.9 1886L24.3 1892.4L26.5 1915.3L24 1924L25.1 1935L27.2 1955.2L24.2 1983L20.6 1991.5L18.6 2010.3L20.3 2021.5L23 2030.3L20.2 2037.6L22.1 2059.1L23.9 2096.8L22.3 2116.9L26 2128.1L28.8 2146.2L26.8 2169.7L28.6 2177.9L26.8 2189L29.3 2198.9L24.9 2205.9L28.6 2228.1L28 2231.2L26.6 2239L25.2 2245.4L23.3 2270.9L27.6 2287.8L26.1 2304.6L29.7 2327.3L27.8 2346.4L24.8 2366.5L28.1 2389.9L30 2400L60 2400Z'/%3E%3C/svg%3E");
    --gr-tira-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='2400'%3E%3Cstop offset='0' stop-color='%23FFF6E8'/%3E%3Cstop offset='.33' stop-color='%23FFE4BF'/%3E%3Cstop offset='.66' stop-color='%23FFF6E8'/%3E%3Cstop offset='1' stop-color='%23FFF6E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='3' stroke-linejoin='round' d='M30 0L32.3 12L30.2 52.2L35.1 77.9L33.8 89.2L31.6 108.5L34.7 117.1L38.6 125.9L36.8 136.2L40.1 143.9L39 186.5L35.2 201.4L38.5 227L43.2 232.9L41.3 258.1L37.3 269.5L40.2 291.7L40.6 293.7L42.3 304L39.4 309.1L36.4 321.3L40.6 336.6L37.8 348.4L38.9 380.6L36.3 405.7L40.4 421.1L35.8 428.6L39.2 450.7L36.4 456.9L39.1 481.2L35.2 499.9L36.4 524.8L36.1 533.8L31.7 545L30.9 587.2L27 597L29 602.3L29.5 639.6L25 663.5L25 664.2L27.4 670.2L26.1 694.6L25.4 706.5L28.9 716.4L28.2 735.4L33.4 746.7L39.9 778.9L44.1 789.1L42.4 807.3L41.4 809.9L37.7 815.6L39 822.1L41.6 831L35 851.7L35.8 873.4L30.6 882.9L33.3 898.3L34 932.1L28.1 957.3L23.6 965.3L21 970.4L19.7 996.3L20.8 1005.2L19.4 1013.2L21.9 1023.6L27.5 1066.9L23.7 1076.5L27 1097.3L30.7 1105L29.2 1137L33.4 1155.7L37.6 1178.4L36.6 1196L33.9 1207.7L35.1 1217.1L30.4 1226.9L32.5 1235.9L27.2 1268.6L28.1 1286.9L24.1 1296.3L27.3 1308.1L24 1316.2L24.6 1338.3L21 1349.3L20.3 1364.2L21.4 1381.5L17.5 1402.3L14.4 1426.8L18.9 1438.4L21.1 1443.8L19.8 1466.6L22.2 1486.7L19 1492.9L23.3 1506L19.3 1524.6L22 1560.2L18.4 1572.8L17.2 1599.9L20.1 1605.2L23.8 1627L21.7 1641.4L20.3 1665L24.9 1671.1L24.5 1672.6L20.8 1687L23.9 1695.3L20.3 1707.8L22 1724.2L20 1731.5L18.4 1751.8L16.6 1763.7L20.5 1782.7L25 1796.5L20.8 1819L19.1 1824.1L21.2 1835L17.5 1869.5L21.9 1886L24.3 1892.4L26.5 1915.3L24 1924L25.1 1935L27.2 1955.2L24.2 1983L20.6 1991.5L18.6 2010.3L20.3 2021.5L23 2030.3L20.2 2037.6L22.1 2059.1L23.9 2096.8L22.3 2116.9L26 2128.1L28.8 2146.2L26.8 2169.7L28.6 2177.9L26.8 2189L29.3 2198.9L24.9 2205.9L28.6 2228.1L28 2231.2L26.6 2239L25.2 2245.4L23.3 2270.9L27.6 2287.8L26.1 2304.6L29.7 2327.3L27.8 2346.4L24.8 2366.5L28.1 2389.9L30 2400'/%3E%3C/svg%3E");
  }
}
/* celular y tableta angosta (hasta 980 px) */
@media (max-width: 980px) {
  :root {
    --gr-tira-izq: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M0 0L30 0L31.4 12L30.1 52.2L33 77.9L32.3 89.2L31 108.5L32.8 117.1L35.2 125.9L34.1 136.2L36.1 143.9L35.4 186.5L33.1 201.4L35.1 227L37.9 232.9L36.8 258.1L34.4 269.5L36.1 291.7L36.4 293.7L37.4 304L35.6 309.1L33.9 321.3L36.3 336.6L34.7 348.4L35.4 380.6L33.8 405.7L36.2 421.1L33.5 428.6L35.5 450.7L33.9 456.9L35.5 481.2L33.1 499.9L33.8 524.8L33.7 533.8L31 545L30.5 587.2L28.2 597L29.4 602.3L29.7 639.6L27 663.5L27 664.2L28.5 670.2L27.7 694.6L27.2 706.5L29.4 716.4L28.9 735.4L32 746.7L35.9 778.9L38.4 789.1L37.4 807.3L36.8 809.9L34.6 815.6L35.4 822.1L36.9 831L33 851.7L33.5 873.4L30.3 882.9L32 898.3L32.4 932.1L28.9 957.3L26.2 965.3L24.6 970.4L23.8 996.3L24.5 1005.2L23.6 1013.2L25.1 1023.6L28.5 1066.9L26.2 1076.5L28.2 1097.3L30.4 1105L29.5 1137L32 1155.7L34.6 1178.4L33.9 1196L32.4 1207.7L33.1 1217.1L30.2 1226.9L31.5 1235.9L28.3 1268.6L28.9 1286.9L26.4 1296.3L28.4 1308.1L26.4 1316.2L26.7 1338.3L24.6 1349.3L24.2 1364.2L24.9 1381.5L22.5 1402.3L20.7 1426.8L23.3 1438.4L24.7 1443.8L23.9 1466.6L25.3 1486.7L23.4 1492.9L26 1506L23.6 1524.6L25.2 1560.2L23.1 1572.8L22.3 1599.9L24.1 1605.2L26.3 1627L25 1641.4L24.2 1665L26.9 1671.1L26.7 1672.6L24.5 1687L26.3 1695.3L24.2 1707.8L25.2 1724.2L24 1731.5L23 1751.8L22 1763.7L24.3 1782.7L27 1796.5L24.5 1819L23.5 1824.1L24.7 1835L22.5 1869.5L25.2 1886L26.6 1892.4L27.9 1915.3L26.4 1924L27.1 1935L28.3 1955.2L26.5 1983L24.3 1991.5L23.2 2010.3L24.2 2021.5L25.8 2030.3L24.1 2037.6L25.2 2059.1L26.4 2096.8L25.4 2116.9L27.6 2128.1L29.3 2146.2L28.1 2169.7L29.2 2177.9L28.1 2189L29.6 2198.9L26.9 2205.9L29.2 2228.1L28.8 2231.2L28 2239L27.1 2245.4L26 2270.9L28.5 2287.8L27.7 2304.6L29.8 2327.3L28.7 2346.4L26.9 2366.5L28.8 2389.9L30 2400L0 2400Z'/%3E%3C/svg%3E");
    --gr-tira-der: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cpath d='M60 0L30 0L31.4 12L30.1 52.2L33 77.9L32.3 89.2L31 108.5L32.8 117.1L35.2 125.9L34.1 136.2L36.1 143.9L35.4 186.5L33.1 201.4L35.1 227L37.9 232.9L36.8 258.1L34.4 269.5L36.1 291.7L36.4 293.7L37.4 304L35.6 309.1L33.9 321.3L36.3 336.6L34.7 348.4L35.4 380.6L33.8 405.7L36.2 421.1L33.5 428.6L35.5 450.7L33.9 456.9L35.5 481.2L33.1 499.9L33.8 524.8L33.7 533.8L31 545L30.5 587.2L28.2 597L29.4 602.3L29.7 639.6L27 663.5L27 664.2L28.5 670.2L27.7 694.6L27.2 706.5L29.4 716.4L28.9 735.4L32 746.7L35.9 778.9L38.4 789.1L37.4 807.3L36.8 809.9L34.6 815.6L35.4 822.1L36.9 831L33 851.7L33.5 873.4L30.3 882.9L32 898.3L32.4 932.1L28.9 957.3L26.2 965.3L24.6 970.4L23.8 996.3L24.5 1005.2L23.6 1013.2L25.1 1023.6L28.5 1066.9L26.2 1076.5L28.2 1097.3L30.4 1105L29.5 1137L32 1155.7L34.6 1178.4L33.9 1196L32.4 1207.7L33.1 1217.1L30.2 1226.9L31.5 1235.9L28.3 1268.6L28.9 1286.9L26.4 1296.3L28.4 1308.1L26.4 1316.2L26.7 1338.3L24.6 1349.3L24.2 1364.2L24.9 1381.5L22.5 1402.3L20.7 1426.8L23.3 1438.4L24.7 1443.8L23.9 1466.6L25.3 1486.7L23.4 1492.9L26 1506L23.6 1524.6L25.2 1560.2L23.1 1572.8L22.3 1599.9L24.1 1605.2L26.3 1627L25 1641.4L24.2 1665L26.9 1671.1L26.7 1672.6L24.5 1687L26.3 1695.3L24.2 1707.8L25.2 1724.2L24 1731.5L23 1751.8L22 1763.7L24.3 1782.7L27 1796.5L24.5 1819L23.5 1824.1L24.7 1835L22.5 1869.5L25.2 1886L26.6 1892.4L27.9 1915.3L26.4 1924L27.1 1935L28.3 1955.2L26.5 1983L24.3 1991.5L23.2 2010.3L24.2 2021.5L25.8 2030.3L24.1 2037.6L25.2 2059.1L26.4 2096.8L25.4 2116.9L27.6 2128.1L29.3 2146.2L28.1 2169.7L29.2 2177.9L28.1 2189L29.6 2198.9L26.9 2205.9L29.2 2228.1L28.8 2231.2L28 2239L27.1 2245.4L26 2270.9L28.5 2287.8L27.7 2304.6L29.8 2327.3L28.7 2346.4L26.9 2366.5L28.8 2389.9L30 2400L60 2400Z'/%3E%3C/svg%3E");
    --gr-tira-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='2400' viewBox='0 0 60 2400'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='2400'%3E%3Cstop offset='0' stop-color='%23FFF6E8'/%3E%3Cstop offset='.33' stop-color='%23FFE4BF'/%3E%3Cstop offset='.66' stop-color='%23FFF6E8'/%3E%3Cstop offset='1' stop-color='%23FFF6E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='3' stroke-linejoin='round' d='M30 0L31.4 12L30.1 52.2L33 77.9L32.3 89.2L31 108.5L32.8 117.1L35.2 125.9L34.1 136.2L36.1 143.9L35.4 186.5L33.1 201.4L35.1 227L37.9 232.9L36.8 258.1L34.4 269.5L36.1 291.7L36.4 293.7L37.4 304L35.6 309.1L33.9 321.3L36.3 336.6L34.7 348.4L35.4 380.6L33.8 405.7L36.2 421.1L33.5 428.6L35.5 450.7L33.9 456.9L35.5 481.2L33.1 499.9L33.8 524.8L33.7 533.8L31 545L30.5 587.2L28.2 597L29.4 602.3L29.7 639.6L27 663.5L27 664.2L28.5 670.2L27.7 694.6L27.2 706.5L29.4 716.4L28.9 735.4L32 746.7L35.9 778.9L38.4 789.1L37.4 807.3L36.8 809.9L34.6 815.6L35.4 822.1L36.9 831L33 851.7L33.5 873.4L30.3 882.9L32 898.3L32.4 932.1L28.9 957.3L26.2 965.3L24.6 970.4L23.8 996.3L24.5 1005.2L23.6 1013.2L25.1 1023.6L28.5 1066.9L26.2 1076.5L28.2 1097.3L30.4 1105L29.5 1137L32 1155.7L34.6 1178.4L33.9 1196L32.4 1207.7L33.1 1217.1L30.2 1226.9L31.5 1235.9L28.3 1268.6L28.9 1286.9L26.4 1296.3L28.4 1308.1L26.4 1316.2L26.7 1338.3L24.6 1349.3L24.2 1364.2L24.9 1381.5L22.5 1402.3L20.7 1426.8L23.3 1438.4L24.7 1443.8L23.9 1466.6L25.3 1486.7L23.4 1492.9L26 1506L23.6 1524.6L25.2 1560.2L23.1 1572.8L22.3 1599.9L24.1 1605.2L26.3 1627L25 1641.4L24.2 1665L26.9 1671.1L26.7 1672.6L24.5 1687L26.3 1695.3L24.2 1707.8L25.2 1724.2L24 1731.5L23 1751.8L22 1763.7L24.3 1782.7L27 1796.5L24.5 1819L23.5 1824.1L24.7 1835L22.5 1869.5L25.2 1886L26.6 1892.4L27.9 1915.3L26.4 1924L27.1 1935L28.3 1955.2L26.5 1983L24.3 1991.5L23.2 2010.3L24.2 2021.5L25.8 2030.3L24.1 2037.6L25.2 2059.1L26.4 2096.8L25.4 2116.9L27.6 2128.1L29.3 2146.2L28.1 2169.7L29.2 2177.9L28.1 2189L29.6 2198.9L26.9 2205.9L29.2 2228.1L28.8 2231.2L28 2239L27.1 2245.4L26 2270.9L28.5 2287.8L27.7 2304.6L29.8 2327.3L28.7 2346.4L26.9 2366.5L28.8 2389.9L30 2400'/%3E%3C/svg%3E");
  }
}
/* La tira acostada (60 px de alto, 2400 de ancho): la luz de los bloques de hueso del celular. */
:root {
  --gr-tira-h-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='60' viewBox='0 0 2400 60'%3E%3Cpath d='M0 60L0 30L12 32.3L52.2 30.2L77.9 35.1L89.2 33.8L108.5 31.6L117.1 34.7L125.9 38.6L136.2 36.8L143.9 40.1L186.5 39L201.4 35.2L227 38.5L232.9 43.2L258.1 41.3L269.5 37.3L291.7 40.2L293.7 40.6L304 42.3L309.1 39.4L321.3 36.4L336.6 40.6L348.4 37.8L380.6 38.9L405.7 36.3L421.1 40.4L428.6 35.8L450.7 39.2L456.9 36.4L481.2 39.1L499.9 35.2L524.8 36.4L533.8 36.1L545 31.7L587.2 30.9L597 27L602.3 29L639.6 29.5L663.5 25L664.2 25L670.2 27.4L694.6 26.1L706.5 25.4L716.4 28.9L735.4 28.2L746.7 33.4L778.9 39.9L789.1 44.1L807.3 42.4L809.9 41.4L815.6 37.7L822.1 39L831 41.6L851.7 35L873.4 35.8L882.9 30.6L898.3 33.3L932.1 34L957.3 28.1L965.3 23.6L970.4 21L996.3 19.7L1005.2 20.8L1013.2 19.4L1023.6 21.9L1066.9 27.5L1076.5 23.7L1097.3 27L1105 30.7L1137 29.2L1155.7 33.4L1178.4 37.6L1196 36.6L1207.7 33.9L1217.1 35.1L1226.9 30.4L1235.9 32.5L1268.6 27.2L1286.9 28.1L1296.3 24.1L1308.1 27.3L1316.2 24L1338.3 24.6L1349.3 21L1364.2 20.3L1381.5 21.4L1402.3 17.5L1426.8 14.4L1438.4 18.9L1443.8 21.1L1466.6 19.8L1486.7 22.2L1492.9 19L1506 23.3L1524.6 19.3L1560.2 22L1572.8 18.4L1599.9 17.2L1605.2 20.1L1627 23.8L1641.4 21.7L1665 20.3L1671.1 24.9L1672.6 24.5L1687 20.8L1695.3 23.9L1707.8 20.3L1724.2 22L1731.5 20L1751.8 18.4L1763.7 16.6L1782.7 20.5L1796.5 25L1819 20.8L1824.1 19.1L1835 21.2L1869.5 17.5L1886 21.9L1892.4 24.3L1915.3 26.5L1924 24L1935 25.1L1955.2 27.2L1983 24.2L1991.5 20.6L2010.3 18.6L2021.5 20.3L2030.3 23L2037.6 20.2L2059.1 22.1L2096.8 23.9L2116.9 22.3L2128.1 26L2146.2 28.8L2169.7 26.8L2177.9 28.6L2189 26.8L2198.9 29.3L2205.9 24.9L2228.1 28.6L2231.2 28L2239 26.6L2245.4 25.2L2270.9 23.3L2287.8 27.6L2304.6 26.1L2327.3 29.7L2346.4 27.8L2366.5 24.8L2389.9 28.1L2400 30L2400 60Z'/%3E%3C/svg%3E");
  --gr-tira-h-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='60' viewBox='0 0 2400 60'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2400' y2='0'%3E%3Cstop offset='0' stop-color='%23FFF6E8'/%3E%3Cstop offset='.33' stop-color='%23FFE4BF'/%3E%3Cstop offset='.66' stop-color='%23FFF6E8'/%3E%3Cstop offset='1' stop-color='%23FFF6E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='3' stroke-linejoin='round' d='M0 30L12 32.3L52.2 30.2L77.9 35.1L89.2 33.8L108.5 31.6L117.1 34.7L125.9 38.6L136.2 36.8L143.9 40.1L186.5 39L201.4 35.2L227 38.5L232.9 43.2L258.1 41.3L269.5 37.3L291.7 40.2L293.7 40.6L304 42.3L309.1 39.4L321.3 36.4L336.6 40.6L348.4 37.8L380.6 38.9L405.7 36.3L421.1 40.4L428.6 35.8L450.7 39.2L456.9 36.4L481.2 39.1L499.9 35.2L524.8 36.4L533.8 36.1L545 31.7L587.2 30.9L597 27L602.3 29L639.6 29.5L663.5 25L664.2 25L670.2 27.4L694.6 26.1L706.5 25.4L716.4 28.9L735.4 28.2L746.7 33.4L778.9 39.9L789.1 44.1L807.3 42.4L809.9 41.4L815.6 37.7L822.1 39L831 41.6L851.7 35L873.4 35.8L882.9 30.6L898.3 33.3L932.1 34L957.3 28.1L965.3 23.6L970.4 21L996.3 19.7L1005.2 20.8L1013.2 19.4L1023.6 21.9L1066.9 27.5L1076.5 23.7L1097.3 27L1105 30.7L1137 29.2L1155.7 33.4L1178.4 37.6L1196 36.6L1207.7 33.9L1217.1 35.1L1226.9 30.4L1235.9 32.5L1268.6 27.2L1286.9 28.1L1296.3 24.1L1308.1 27.3L1316.2 24L1338.3 24.6L1349.3 21L1364.2 20.3L1381.5 21.4L1402.3 17.5L1426.8 14.4L1438.4 18.9L1443.8 21.1L1466.6 19.8L1486.7 22.2L1492.9 19L1506 23.3L1524.6 19.3L1560.2 22L1572.8 18.4L1599.9 17.2L1605.2 20.1L1627 23.8L1641.4 21.7L1665 20.3L1671.1 24.9L1672.6 24.5L1687 20.8L1695.3 23.9L1707.8 20.3L1724.2 22L1731.5 20L1751.8 18.4L1763.7 16.6L1782.7 20.5L1796.5 25L1819 20.8L1824.1 19.1L1835 21.2L1869.5 17.5L1886 21.9L1892.4 24.3L1915.3 26.5L1924 24L1935 25.1L1955.2 27.2L1983 24.2L1991.5 20.6L2010.3 18.6L2021.5 20.3L2030.3 23L2037.6 20.2L2059.1 22.1L2096.8 23.9L2116.9 22.3L2128.1 26L2146.2 28.8L2169.7 26.8L2177.9 28.6L2189 26.8L2198.9 29.3L2205.9 24.9L2228.1 28.6L2231.2 28L2239 26.6L2245.4 25.2L2270.9 23.3L2287.8 27.6L2304.6 26.1L2327.3 29.7L2346.4 27.8L2366.5 24.8L2389.9 28.1L2400 30'/%3E%3C/svg%3E");
}
/* acostada · hasta 760 px */
@media (max-width: 760px) {
  :root {
    --gr-tira-h-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='60' viewBox='0 0 2400 60'%3E%3Cpath d='M0 60L0 30L12 31.4L52.2 30.1L77.9 33L89.2 32.3L108.5 31L117.1 32.8L125.9 35.2L136.2 34.1L143.9 36.1L186.5 35.4L201.4 33.1L227 35.1L232.9 37.9L258.1 36.8L269.5 34.4L291.7 36.1L293.7 36.4L304 37.4L309.1 35.6L321.3 33.9L336.6 36.3L348.4 34.7L380.6 35.4L405.7 33.8L421.1 36.2L428.6 33.5L450.7 35.5L456.9 33.9L481.2 35.5L499.9 33.1L524.8 33.8L533.8 33.7L545 31L587.2 30.5L597 28.2L602.3 29.4L639.6 29.7L663.5 27L664.2 27L670.2 28.5L694.6 27.7L706.5 27.2L716.4 29.4L735.4 28.9L746.7 32L778.9 35.9L789.1 38.4L807.3 37.4L809.9 36.8L815.6 34.6L822.1 35.4L831 36.9L851.7 33L873.4 33.5L882.9 30.3L898.3 32L932.1 32.4L957.3 28.9L965.3 26.2L970.4 24.6L996.3 23.8L1005.2 24.5L1013.2 23.6L1023.6 25.1L1066.9 28.5L1076.5 26.2L1097.3 28.2L1105 30.4L1137 29.5L1155.7 32L1178.4 34.6L1196 33.9L1207.7 32.4L1217.1 33.1L1226.9 30.2L1235.9 31.5L1268.6 28.3L1286.9 28.9L1296.3 26.4L1308.1 28.4L1316.2 26.4L1338.3 26.7L1349.3 24.6L1364.2 24.2L1381.5 24.9L1402.3 22.5L1426.8 20.7L1438.4 23.3L1443.8 24.7L1466.6 23.9L1486.7 25.3L1492.9 23.4L1506 26L1524.6 23.6L1560.2 25.2L1572.8 23.1L1599.9 22.3L1605.2 24.1L1627 26.3L1641.4 25L1665 24.2L1671.1 26.9L1672.6 26.7L1687 24.5L1695.3 26.3L1707.8 24.2L1724.2 25.2L1731.5 24L1751.8 23L1763.7 22L1782.7 24.3L1796.5 27L1819 24.5L1824.1 23.5L1835 24.7L1869.5 22.5L1886 25.2L1892.4 26.6L1915.3 27.9L1924 26.4L1935 27.1L1955.2 28.3L1983 26.5L1991.5 24.3L2010.3 23.2L2021.5 24.2L2030.3 25.8L2037.6 24.1L2059.1 25.2L2096.8 26.4L2116.9 25.4L2128.1 27.6L2146.2 29.3L2169.7 28.1L2177.9 29.2L2189 28.1L2198.9 29.6L2205.9 26.9L2228.1 29.2L2231.2 28.8L2239 28L2245.4 27.1L2270.9 26L2287.8 28.5L2304.6 27.7L2327.3 29.8L2346.4 28.7L2366.5 26.9L2389.9 28.8L2400 30L2400 60Z'/%3E%3C/svg%3E");
    --gr-tira-h-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2400' height='60' viewBox='0 0 2400 60'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='2400' y2='0'%3E%3Cstop offset='0' stop-color='%23FFF6E8'/%3E%3Cstop offset='.33' stop-color='%23FFE4BF'/%3E%3Cstop offset='.66' stop-color='%23FFF6E8'/%3E%3Cstop offset='1' stop-color='%23FFF6E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='none' stroke='url(%23g)' stroke-width='3' stroke-linejoin='round' d='M0 30L12 31.4L52.2 30.1L77.9 33L89.2 32.3L108.5 31L117.1 32.8L125.9 35.2L136.2 34.1L143.9 36.1L186.5 35.4L201.4 33.1L227 35.1L232.9 37.9L258.1 36.8L269.5 34.4L291.7 36.1L293.7 36.4L304 37.4L309.1 35.6L321.3 33.9L336.6 36.3L348.4 34.7L380.6 35.4L405.7 33.8L421.1 36.2L428.6 33.5L450.7 35.5L456.9 33.9L481.2 35.5L499.9 33.1L524.8 33.8L533.8 33.7L545 31L587.2 30.5L597 28.2L602.3 29.4L639.6 29.7L663.5 27L664.2 27L670.2 28.5L694.6 27.7L706.5 27.2L716.4 29.4L735.4 28.9L746.7 32L778.9 35.9L789.1 38.4L807.3 37.4L809.9 36.8L815.6 34.6L822.1 35.4L831 36.9L851.7 33L873.4 33.5L882.9 30.3L898.3 32L932.1 32.4L957.3 28.9L965.3 26.2L970.4 24.6L996.3 23.8L1005.2 24.5L1013.2 23.6L1023.6 25.1L1066.9 28.5L1076.5 26.2L1097.3 28.2L1105 30.4L1137 29.5L1155.7 32L1178.4 34.6L1196 33.9L1207.7 32.4L1217.1 33.1L1226.9 30.2L1235.9 31.5L1268.6 28.3L1286.9 28.9L1296.3 26.4L1308.1 28.4L1316.2 26.4L1338.3 26.7L1349.3 24.6L1364.2 24.2L1381.5 24.9L1402.3 22.5L1426.8 20.7L1438.4 23.3L1443.8 24.7L1466.6 23.9L1486.7 25.3L1492.9 23.4L1506 26L1524.6 23.6L1560.2 25.2L1572.8 23.1L1599.9 22.3L1605.2 24.1L1627 26.3L1641.4 25L1665 24.2L1671.1 26.9L1672.6 26.7L1687 24.5L1695.3 26.3L1707.8 24.2L1724.2 25.2L1731.5 24L1751.8 23L1763.7 22L1782.7 24.3L1796.5 27L1819 24.5L1824.1 23.5L1835 24.7L1869.5 22.5L1886 25.2L1892.4 26.6L1915.3 27.9L1924 26.4L1935 27.1L1955.2 28.3L1983 26.5L1991.5 24.3L2010.3 23.2L2021.5 24.2L2030.3 25.8L2037.6 24.1L2059.1 25.2L2096.8 26.4L2116.9 25.4L2128.1 27.6L2146.2 29.3L2169.7 28.1L2177.9 29.2L2189 28.1L2198.9 29.6L2205.9 26.9L2228.1 29.2L2231.2 28.8L2239 28L2245.4 27.1L2270.9 26L2287.8 28.5L2304.6 27.7L2327.3 29.8L2346.4 28.7L2366.5 26.9L2389.9 28.8L2400 30'/%3E%3C/svg%3E");
  }
}
/* PAPEL-FIN */

/* ── La paleta, una sola vez ──────────────────────────────────────────────────
   Contrastes medidos (WCAG 2): hueso sobre noche 15,3:1 · ceniza sobre noche
   9,4:1 · rosa sobre noche 8,5:1 · tinta sobre hueso 14,7:1 · tinta-2 sobre
   hueso 6,3:1 · rosa-hueso sobre hueso 5,9:1 (5,2 sobre hueso-2).
   El rosa claro sobre hueso da 1,8:1: NUNCA se usa ahí. Por eso cada
   superficie de hueso redefine también las variables viejas (más abajo).

   EL ROSA (15/10/2026). Pedido del dueño: «cambia el rosa por un rosa un poco
   más fuerte». Un solo token, --gr-rosa, y todo lo demás sale de él: ninguna
   hoja vuelve a escribir un rosa suelto. #F28AB9 = oklch(0.758 0.137 352): el
   mismo tono que el de antes (oklch 0.810 0.093 353) con 47 % más de
   croma y un poco menos de luz; más fuerte, sin llegar al fucsia ni al flúor
   de Rabbit (#FF78BA). Medido: 8,5:1 sobre la noche, 7,7:1 sobre noche-2, 8,1:1
   con la tinta encima (botones rosas). Sobre el petróleo de /nosotros/ da
   3,2:1: ahí solo va en la raya de la cita y en lo grande.
     · --gr-rosa-hover #FCA6CC: al pasar el cursor sobre lo oscuro, aclara
       (10,7:1 sobre la noche).
     · --gr-rosa-hueso #9A255E: el mismo tono, hondo, para texto y botones
       sobre el papel claro (5,9:1 sobre hueso, 5,2:1 sobre hueso-2: pasa AA
       en texto chico en los dos).
     · --gr-rosa-hueso-hondo #861A50: su hover (7,2:1 sobre hueso).
   Las transparencias se mezclan del token (color-mix), no se escriben.

   LAS INTERFACES (12/10/2026): estas variables son el corazón del contrato de
   las pieles (shared/interfaces/LEEME.md): una piel las cambia en
   :root[data-interfaz="<id>"] y todo lo que sale de ellas se viste solo. El
   contenido de /nosotros/ (y cualquier cosa marcada [data-interfaz-intocable])
   las vuelve a fijar en el valor de La grieta: ahí no llega ninguna piel. Con
   La grieta los valores son los mismos, así que no cambia nada. */
:root,
body:has(.cierre-nosotros) .cuerpo > .contenido,
[data-interfaz-intocable] {
  --gr-noche: #0E0C0B;
  --gr-noche-2: #1B1714;
  --gr-noche-3: #231E1A;
  --gr-noche-4: #2C2621;
  --gr-hueso: #ECE3D3;
  --gr-hueso-2: #E2D6C2;
  --gr-tinta: #16110E;
  --gr-tinta-2: #5A4E44;
  --gr-ceniza: #BDB3A6;
  /* Sin rosa desde el 23/10/2026 («el color rosa te dije que no lo quería»):
     los acentos van en marfil sobre el negro y en tinta sobre el hueso. Los
     nombres de las variables quedan para no tocar cada regla.
     23/10/2026, a la tarde: el #FFE4BF de la mañana se leía durazno, casi
     rosa. Pasa a marfil neutro, #EFEBE4 (saturación HSL 0,25; 16,4:1 sobre la
     noche), y al pasar el cursor, blanco. La luz de los botones y el ámbar de
     «Empezar» tampoco van en durazno: blanco apenas cálido y blanco. Medido en
     vivo en la portada y en /crear/: ningún color rosado, durazno ni dorado
     claro (_trabajo/colores/medir-colores.mjs). */
  --gr-rosa: #EFEBE4;
  --gr-rosa-hover: #FFFFFF;
  --gr-rosa-hueso: #16110E;
  --gr-luz: #F7F5F1;
  --gr-ambar: #FFFFFF;
  /* El amarillo cálido: un detalle discreto en unos pocos textos secundarios
     (rótulos chicos, el «Prueba:» de la caja, los numeritos de los presets, los
     rótulos de las cifras). Un solo lugar: acá. Sobre negro, #E8C468 da 11,6:1; sobre
     hueso va el amarillo oscuro, 5,2:1 (4,6:1 sobre hueso-2). */
  --gr-amarillo: #E8C468;
  --gr-amarillo-hueso: #765808;
  /* El amarillo patito (16/10/2026). Pedido del dueño: «algunas palabras o
     títulos en amarillo anaranjado o patito». Se usa con medida: UNA palabra o
     UN título por pantalla, en la parte principal (ver «7 · La parte principal
     partida»). Sobre el negro, de letra: #FFC53D da 12,4:1. Sobre el papel, de
     resaltador detrás de la palabra, con la tinta encima: 11,9:1. Si hace falta
     como letra sobre el papel, el tono hondo #7A5200: 5,4:1. Un solo lugar:
     acá; el rosa sigue siendo el de los botones y los enlaces. */
  --gr-patito: #FFC53D;
  --gr-patito-hueso: #7A5200;
  --gr-linea: rgba(236, 227, 211, .17);
  --gr-linea-fuerte: rgba(236, 227, 211, .36);
  --gr-linea-hueso: rgba(22, 17, 14, .14);
  --gr-linea-hueso-fuerte: rgba(22, 17, 14, .28);
  --gr-error-hueso: #A4472F;

  /* Las letras (arriba, «Las letras»): impacto para los títulos, la misma en
     fino para la segunda voz, Schibsted para todo lo demás. */
  --gr-titulo: 'SLT Impacto', 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --gr-impacto: var(--gr-titulo);
  --gr-impacto-fino: 'SLT Impacto Fino', 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --gr-texto: 'Schibsted Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* La voz baja (bajadas, caja, ejemplos, pie, preguntas): era una serif
     itálica; desde el 15/10/2026 es la misma Schibsted, más grande y en un tono
     más bajo. Las pieles la cambian por la suya. */
  --gr-voz: var(--gr-texto);
  /* La grotesca angosta con todos sus pesos (la lista de áreas, el lema). */
  --gr-condensada: 'Sofia Sans Extra Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;

  /* El grano de la maqueta: oscuro sobre el hueso, claro sobre la noche. */
  --gr-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  --gr-grano-luz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .95 0 0 0 0 .88 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");

  /* La luz de la grieta: la cadena de sombras de la maqueta (línea 91).
     23/10/2026, sin durazno ni dorado («el color rosa te dije que no lo
     quería»): el brillo era ámbar y durazno (255, 200, 140 y 255, 170, 120);
     ahora es blanco y marfil, una luz neutra. El trazo de la tira trae
     escrito su degradé (#FFF6E8 a #FFE4BF, lo genera tools/gen-papel-grieta.js
     y una prueba controla que esté al día): `grayscale(1)` lo deja en blanco y
     plata (#F7F7F7 a #E7E7E7) antes de las sombras. Las pieles traen su
     propio --gr-brillo, así que su color no cambia. */
  --gr-brillo: grayscale(1) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 9px rgba(255, 255, 255, .82)) drop-shadow(0 0 30px rgba(239, 235, 228, .5)) drop-shadow(0 0 70px color-mix(in oklch, var(--gr-rosa) 45%, transparent));
  --gr-brillo-boton: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 22px rgba(255, 255, 255, .5), 0 0 60px color-mix(in oklch, var(--gr-rosa) 40%, transparent);

  /* Ganchos para las pieles (12/10/2026, shared/interfaces/LEEME.md, 3.3).
     Antes estaban escritos a mano en cada regla; con La grieta valen lo de
     siempre, así que nada cambia. */
  /* El peso de los títulos: la impacto tiene uno solo, 900. */
  --gr-titulo-peso: 900;
  /* El acento sobre el claro al pasar el cursor («Empezar» de la barra, los
     botones rosa sobre hueso) y el velo de las filas de los desplegables. */
  --gr-rosa-hueso-hondo: #000;
  --gr-velo-hueso: color-mix(in oklch, var(--gr-rosa-hueso) 8%, transparent);
  /* La luz corta: dos sombras de las cuatro, en las tiras acostadas y en la
     portada de la tableta y el celular (pinta menos). */
  --gr-brillo-corto: drop-shadow(0 0 1.5px #fff7ea) drop-shadow(0 0 12px rgba(255, 200, 140, .85));
}
/* La luz corta de La grieta, sin durazno (23/10/2026, «el color rosa te dije
   que no lo quería»): gris el trazo y blanco el brillo, como --gr-brillo. Va
   aparte porque las pieles no traen la suya y usan la de arriba con su propio
   color de luz: así a ellas no les cambia nada. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])),
body:has(.cierre-nosotros) .cuerpo > .contenido,
[data-interfaz-intocable] {
  --gr-brillo-corto: grayscale(1) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 12px rgba(255, 255, 255, .78));
}

/* ── El reparto de la parte principal (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». Un solo lugar dice por
   dónde pasa la grieta en la parte principal de CADA pantalla (la cabecera partida,
   /crear/, /entrar/, la puerta de la portada): el negro lleva el 38 % del ancho y
   el papel el 62 %. En las otras tres interfaces (Void, Nervo, Rabbit) queda el
   reparto de siempre, 62 % de negro: ellas conservan su diseño.
     --gr-reparto   el ancho del negro (y dónde está la luz), en % del ancho de la pantalla
     --gr-reparto-v el mismo ancho en vw, para las cuentas que no pueden usar % */
:root {
  --gr-reparto: 62%;
  --gr-reparto-v: 62vw;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) {
  /* 38 % hasta los 1440 px. Más ancho que eso el contenido deja de crecer (queda
     centrado, a 1440 px con su relleno) y el negro, que arranca en el borde de la
     pantalla, tiene que seguirlo: la luz pasa siempre unos 500 px después del
     comienzo del contenido (50 % − 173 px: 787 px a 1920, 1107 px a 2560; a 1440
     da justo 38 %), así la columna del negro conserva su ancho (unos 450 px) y el
     papel sigue llevando más de la mitad (59 % a 1920, 57 % a 2560). */
  --gr-reparto: max(38%, calc(50% - 173px));
  --gr-reparto-v: max(38vw, calc(50vw - 173px));
}

/* ── Las variables de siempre, con el valor nuevo ─────────────────────────────
   Van en :root y también en .studio-portada, porque portada-identidad.css las
   vuelve a poner con esa clase. Tabla completa en el plan, 1.4. */
:root,
.studio-portada {
  --papel: var(--gr-noche);
  --papel-2: var(--gr-noche-2);
  --noche: var(--gr-noche);
  --noche-1: var(--gr-noche);
  --g0: var(--gr-noche);
  --g1: #141110;
  --g2: var(--gr-noche-2);
  --g3: var(--gr-noche-3);
  --g4: var(--gr-noche-4);
  --g5: #26201C;
  --g6: rgba(236, 227, 211, .20);
  --g7: rgba(236, 227, 211, .34);
  --g8: #8C8276;
  --g9: var(--gr-ceniza);
  --g10: #CFC5B6;
  --tinta: var(--gr-hueso);
  --tinta-dim: #CFC5B6;
  --tinta-faint: var(--gr-ceniza);
  --noche-tinta: var(--gr-hueso);
  --noche-tinta-dim: #CFC5B6;
  --noche-tinta-faint: var(--gr-ceniza);
  --rosa: var(--gr-rosa);
  --rojo: var(--gr-rosa);
  --acento: var(--gr-rosa);
  --rosa-fuerte: var(--gr-rosa);
  --acento-ink: var(--gr-tinta);
  --acento-soft: color-mix(in oklch, var(--gr-rosa) 10%, transparent);
  --linea: var(--gr-linea);
  --linea-fuerte: var(--gr-linea-fuerte);
  --linea-noche: var(--gr-linea);
  --capa: rgba(236, 227, 211, .06);
  --capa-fuerte: rgba(236, 227, 211, .11);
  --papel-25: rgba(14, 12, 11, .25);
  --papel-45: rgba(14, 12, 11, .45);
  --papel-58: rgba(14, 12, 11, .58);
  --papel-70: rgba(14, 12, 11, .70);
  --papel-84: rgba(14, 12, 11, .84);
  --papel-90: rgba(27, 23, 20, .90);
  --papel-97: rgba(27, 23, 20, .97);
  --papel-98: rgba(27, 23, 20, .98);
  --papel-99: rgba(27, 23, 20, .99);
  --f-sans: var(--gr-texto);
  --sans: var(--gr-texto);
  --f-rara: var(--gr-titulo);
  --f-serif: var(--gr-voz);
  --serif: var(--gr-voz);
}
/* La portada mandaba también la letra «mono» a Archivo (portada-identidad.css):
   ahí pasa a Schibsted. En las pantallas JetBrains Mono queda solo para el
   texto exacto (el pedido tal cual, los números de trabajo). */
.studio-portada { --mono: var(--gr-texto); }

html { background: var(--gr-noche); }
body {
  /* El mismo grano de la grieta sobre el negro de toda la página: sin él, el
     negro de las cabeceras (que lleva grano) se ve apenas distinto del de abajo. */
  background-color: var(--gr-noche);
  background-image: var(--gr-grano-luz);
  font-family: var(--gr-texto);
  /* Ninguna letra se inventa una negrita ni una cursiva falsas. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* ── Tonos: sobre negro y sobre hueso ─────────────────────────────────────────
   Lo que cae sobre hueso redefine también las variables viejas: así un
   componente que no se reescribió (un desplegable, el panel de la cuenta) se
   lee bien y nunca queda rosa claro sobre hueso. */
.sobre-noche {
  --tono-tinta: var(--gr-hueso);
  --tono-fondo: var(--gr-noche);
  --tono-tenue: var(--gr-ceniza);
  --tono-acento: var(--gr-rosa);
  --tono-linea: var(--gr-linea);
  --tono-foco: var(--gr-rosa);
}
.sobre-hueso,
.cuenta-panel,
.mas-panel,
#nav .mega,
.entrada-menu,
.entrada-cajon,
.idioma-dialogo,
/* Etapa 2: lo que cae sobre el hueso de las pantallas internas (ver más abajo). */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) > :is(.bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .legal-fecha, .presets-ayuda, .comprar-saldo, .soporte-entradilla, .manual-bajada, .manual-datos, .mc-bajada, .catalogo-cerrado-texto, .catalogo-cerrado-volver),
.contenido:not(:has(.cierre-nosotros)) .biblio-cabecera > p,
.contenido:not(:has(.cierre-nosotros)) .banda-cuerpo > p:not(.kicker),
.contenido:not(:has(.cierre-nosotros)) .banda-cuerpo > .banda-botones,
.contenido:not(:has(.cierre-nosotros)) .portada-cuerpo > :is(.bajada, .ejemplo-usar),
.contenido:not(:has(.cierre-nosotros)) .comprar-cabecera > div > .comprar-bajada,
.taller-capas,
.vc-tarjeta,
.insp-dialogo,
.viaje-caja,
.facil,
.personaje-dialogo,
body.montar-pagina .montar-dialogo {
  --tono-tinta: var(--gr-tinta);
  --tono-fondo: var(--gr-hueso);
  --tono-tenue: var(--gr-tinta-2);
  --tono-acento: var(--gr-rosa-hueso);
  --tono-linea: var(--gr-linea-hueso);
  --tono-foco: var(--gr-rosa-hueso);
  --tinta: var(--gr-tinta);
  --tinta-dim: #4A3F37;
  --tinta-faint: var(--gr-tinta-2);
  --noche-tinta: var(--gr-tinta);
  --noche-tinta-dim: #4A3F37;
  --noche-tinta-faint: var(--gr-tinta-2);
  --acento: var(--gr-rosa-hueso);
  --rosa: var(--gr-rosa-hueso);
  --rojo: var(--gr-rosa-hueso);
  --rosa-fuerte: var(--gr-rosa-hueso);
  --acento-ink: var(--gr-hueso);
  --acento-soft: color-mix(in oklch, var(--gr-rosa-hueso) 8%, transparent);
  --linea: var(--gr-linea-hueso);
  --linea-fuerte: var(--gr-linea-hueso-fuerte);
  --linea-noche: var(--gr-linea-hueso);
  --capa: rgba(22, 17, 14, .05);
  --capa-fuerte: rgba(22, 17, 14, .09);
  --g0: var(--gr-hueso);
  --g1: var(--gr-hueso-2);
  --g2: var(--gr-hueso);
  --g3: var(--gr-hueso-2);
  --g4: #D9CCB6;
  --g5: #DDD1BC;
  --g6: rgba(22, 17, 14, .18);
  --g7: rgba(22, 17, 14, .32);
  --g8: #6E6258;
  --g9: var(--gr-tinta-2);
  --g10: #4A3F37;
  --papel-90: rgba(236, 227, 211, .96);
  --papel-97: rgba(236, 227, 211, .98);
  --papel-98: rgba(236, 227, 211, .99);
  --papel-99: var(--gr-hueso);
  --ambar: #8A5300;
  --verde: #2F6B4F;
  --e-tinta: var(--gr-tinta);
  --e-tenue: var(--gr-tinta-2);
  --e-acento: var(--gr-rosa-hueso);
  --e-acento-tinta: var(--gr-hueso);
  --e-linea: var(--gr-linea-hueso-fuerte);
  --e-linea-suave: var(--gr-linea-hueso);
  --e-panel: var(--gr-hueso-2);
  --e-panel-2: var(--gr-hueso-2);
  --e-error: var(--gr-error-hueso);
  --e-ok: #2F6B4F;
  color-scheme: light;
  color: var(--gr-tinta);
}

/* ── Títulos ───────────────────────────────────────────────────────────────── */
h1, h2 {
  font-family: var(--gr-titulo);
  font-weight: var(--gr-titulo-peso);
  letter-spacing: -.005em;
}
h1 em, h2 em,
.studio-portada h1 em, .studio-portada h2 em {
  /* La palabra destacada de cada título (15/10/2026): la misma letra, el mismo
     peso y la misma caja que el resto; se destaca con el color. Ni otra
     familia ni inclinada. portada-identidad.css los pasaba a la grotesca en 800. */
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
/* Los títulos que pedían 500, 600 o 650 en la letra de títulos: la impacto va
   en su único peso (font-synthesis: none ya evita la negrita falsa; esto deja
   dicho el peso real, que es lo que mide tools/revisar-grieta.js). */
.entrada-titulo, .entrada-titulo-input, .entrada-avance-titulo, .entrada-cajon-titulo,
.entrada-menu-titulo, .atajo-movimiento-titulo, .insp-dialogo-titulo, .insp-avance-titulo,
.insp-tarjeta-titulo, .mc-vacio-grande, .recorte-titulo, .referencias-titulo-movimiento,
.personaje-crear-titulo, .vc-tarjeta-titulo, .vc-precio-fila b, .vc-prod-titulo,
.vc-pausa h3, .vc-final h3, .ejemplos-cabecera h2 { font-weight: var(--gr-titulo-peso); }
/* Los usos chicos de la letra de títulos (menos de 20 px: rótulos, botones,
   nombres en listas) vuelven a la letra de texto, que se lee mejor chica. */
:root:root:root :is(.mas-col h4, .capa-cabecera h4, .entrada-herramienta-nombre, .seguir-con-opcion,
.movimiento-cabecera h4, .movimiento-numero, .movimiento-etiqueta, .movimiento-ir-ajustes,
.movimiento-motor-opcion, .movimiento-kling-casilla, .cara-fija-casilla,
.referencias-varias-numero, .vc-trabajando, .estilo-nombre, .manual-indice a, .manual-indice .t,
.manual-correo) { font-family: var(--gr-texto); }
/* Y los títulos de tarjeta que siguen en la impacto piden su único peso (las hojas
   de cada pantalla llegan después y piden 500 o 600). */
:root:root:root :is(.insp-idea-texto h3, .referencias-titulo-movimiento, .manual-paso h3, .manual-paso h3 a, .manual-resultado-titulo, .manual-visor-titulo, .manual-indice-seccion) { font-weight: var(--gr-titulo-peso); }

/* Los rótulos (kicker) como en la maqueta: Schibsted 600, mayúsculas, ceniza. */
:where(html:not(:has(.cierre-nosotros))) .kicker {
  font-family: var(--gr-texto);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ── El foco: 2 px, rosa sobre negro y rosa-hueso sobre hueso ─────────────── */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--tono-foco, var(--gr-rosa));
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOTONES
   · Rosa: sobre negro, rosa con tinta (10:1); sobre hueso, rosa-hueso con
     hueso (5,4:1). Esquinas de 2 px y 44 px de alto o más.
   · Luz (la acción principal de cada lugar): el blanco cálido de la grieta,
     letra tinta y el brillo ámbar y rosa (maqueta, .btn-light).
   · Línea: filete del color del tono; al pasar el mouse se invierte.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Estas reglas de forma y letra no valen en /nosotros/ (queda como estaba, D3):
   `:where` las deja con la misma fuerza de siempre. */
:where(html:not(:has(.cierre-nosotros))) :is(.boton-acento, .boton-borde, .boton-claro) {
  min-height: 44px;
  border-radius: 2px;
  font-family: var(--gr-texto);
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.boton-acento { background: var(--acento); color: var(--acento-ink); border-color: transparent; }
.boton-acento:hover { background: var(--gr-rosa-hover); }
.sobre-hueso .boton-acento:hover, .barra-acciones .boton-acento:hover { background: var(--gr-rosa-hueso-hondo); }
.boton-borde { background: transparent; color: var(--tinta); border: 0; box-shadow: inset 0 0 0 1px currentColor; }
.boton-borde:hover { background: var(--tinta); color: var(--g0); }

/* La acción principal: «Seguir», «Generar» y el botón fijo «Crear». */
.boton-luz,
.entrada-seguir,
.entrada-generar,
html .crear-fijo {
  background: var(--gr-luz);
  color: var(--gr-tinta);
  border: 0;
  border-radius: 2px;
  box-shadow: var(--gr-brillo-boton);
  font-family: var(--gr-texto);
  font-weight: 600;
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.boton-luz:hover,
.entrada-seguir:hover,
.entrada-generar:hover:not(:disabled),
html .crear-fijo:hover {
  filter: none;
  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);
}
/* La flecha de los botones se corre 4 px al pasar el mouse. */
.entrada-seguir svg { transition: transform .25s ease; }
.entrada-seguir:hover svg { transform: translateX(4px); }
.entrada-generar:disabled { box-shadow: none; }
html .crear-fijo {
  font-size: 15px;
  letter-spacing: .01em;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .6), var(--gr-brillo-boton);
}
html .crear-fijo:focus-visible { outline-color: var(--gr-rosa); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA MARCA: tipográfica, sin arcoíris
   «SWEET LITTLE TRAUMA» de impacto; «STUDIO» en la misma letra en fino, en rosa.
   ═══════════════════════════════════════════════════════════════════════════ */
.marca.firma-editorial {
  font: 900 20px/24px var(--gr-titulo);
  letter-spacing: -.005em;
  gap: .26em;
}
.firma-editorial .marca-trauma { font-weight: 900; }
.firma-editorial .marca-studio {
  font: 300 21px/24px var(--gr-impacto-fino, var(--gr-voz));
  letter-spacing: .08em;
  color: var(--gr-rosa);
}
/* En el celular, la barra de las pantallas escondía «Studio» (menu.css, a 600 px
   o menos) y la portada no: la marca es la misma en todas, «Sweet Little Trauma
   Studio» en una línea. Se muestra desde 390 px, con la letra un poco más chica
   (medido en castellano, inglés e italiano, con y sin sesión: no se corta ni
   empuja a «Empezar»); por debajo queda sin «Studio», como antes, para que
   entren «Empezar» y el menú. (Desde el 23/10/2026, con el logo, se muestra
   desde 431 px: ver «La barra de las pantallas con el logo», al final.) */
@media (min-width: 390px) and (max-width: 600px) {
  html .barra .marca.firma-editorial { font-size: 16px; }
  html .barra .marca .marca-studio { display: inline; font-size: 18px; }
}
/* El subrayado de la marca era un degradé celeste: queda el foco, sin él. */
.firma-editorial .marca-sweet::after { content: none; }
.marca.firma-editorial:focus-visible { outline: 2px solid var(--gr-rosa); outline-offset: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   EL ENCABEZADO DE LAS PANTALLAS (.barra, lo arma shell.js)
   Una franja negra entera (pedido del dueño, 11/10/2026): la marca a la
   izquierda, las pestañas centradas y el idioma, «Empezar» y la cuenta a la
   derecha. Antes la cuenta iba sobre una parte de hueso con borde dentado: ya
   no hay hueso en la barra, como en el encabezado de la portada.
   menu.css llega después por JS: lo que se le pisa va con `html` adelante.
   ═══════════════════════════════════════════════════════════════════════════ */
html .barra {
  /* Con el mismo grano que el resto de la página: sin él la franja se ve más
     oscura que el negro de abajo. */
  background: var(--gr-noche) var(--gr-grano-luz);
  border-bottom: 1px solid var(--gr-linea);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
html .barra .marca.firma-editorial { color: var(--gr-hueso); }
html .barra .pestanas > a,
html .barra .pestanas .mas-boton {
  position: relative;
  padding: 10px 12px;
  border-radius: 0;
  background: transparent;
  font: 500 14px/1.2 var(--gr-texto);
  color: var(--gr-hueso);
}
html .barra .pestanas > a::after,
html .barra .pestanas .mas-boton::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
html .barra .pestanas > a:hover::after,
html .barra .pestanas .mas-boton:hover::after { transform: scaleX(1); }
html .barra .pestanas > a.activa,
html .barra .pestanas .mas-boton.activa { background: transparent; color: var(--gr-hueso); }
html .barra .pestanas > a.activa::after,
html .barra .pestanas .mas-boton.activa::after { transform: scaleX(1); height: 2px; background: var(--gr-rosa); }
.barra .pestanas .mas-boton::after { right: 30px; }

@media (min-width: 1181px) {
  /* La barra es una grilla de tres columnas (estetica.css): la marca a la
     izquierda, las pestañas centradas y las acciones a la derecha, todo sobre
     la franja negra. Cada pieza va a su lugar, en la primera fila. */
  html .barra > .marca { grid-column: 1; grid-row: 1; }
  html .barra > .pestanas { grid-column: 2; grid-row: 1; }
  html .barra > .barra-acciones { grid-column: 3; grid-row: 1; }
  html .barra .barra-acciones a:hover,
  html .barra .barra-acciones .cuenta-disparador:hover { color: var(--gr-rosa); }
}
/* «Empezar»: rosa-hueso con letra de hueso (5,4:1), como en la maqueta. */
html .barra .barra-acciones > .boton-acento,
html .barra .barra-acciones > .boton-acento:visited {
  background: var(--gr-rosa-hueso);
  color: var(--gr-hueso);
  border-radius: 2px;
  box-shadow: none;
}
html .barra .barra-acciones > .boton-acento:hover { background: var(--gr-rosa-hueso-hondo); color: var(--gr-hueso); }
/* Revisión del cambio 14 (12/10/2026): app.css dibuja el foco del teclado de
   los botones de acento con una sombra y la regla de arriba la saca, así que
   «Empezar gratis» no mostraba dónde estaba parado quien navega con Tab. */
html .barra .barra-acciones > .boton-acento:focus-visible { outline: 2px solid var(--gr-rosa); outline-offset: 3px; }
/* El botón de menú va hasta 1180 px (estetica.css, 23/10/2026). */
@media (max-width: 1180px) {
  html .barra > * { position: relative; z-index: 1; }
  html .barra .menu-movil { color: var(--gr-hueso); background: transparent; border: 0; }
  /* El menú abierto: papel hueso, con las entradas de impacto. */
  html .barra.menu-visible .pestanas {
    --tinta: var(--gr-tinta); --tinta-dim: var(--gr-tinta); --tinta-faint: var(--gr-tinta-2);
    --g6: rgba(22, 17, 14, .18); --rosa: var(--gr-rosa-hueso); --acento: var(--gr-rosa-hueso);
    --tono-foco: var(--gr-rosa-hueso);
    color-scheme: light;
    background: var(--gr-hueso) var(--gr-grano);
    color: var(--gr-tinta);
    border-bottom: 0;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
  html .barra.menu-visible .pestanas > a {
    flex: 1 1 100%;
    justify-content: flex-start; text-align: left;
    min-height: 52px; padding: 10px 2px;
    border: 0; border-bottom: 1px solid var(--gr-linea-hueso); border-radius: 0;
    font: 400 26px/1.1 var(--gr-titulo);
    color: var(--gr-tinta);
  }
  html .barra.menu-visible .pestanas > a::after { content: none; }
  html .barra.menu-visible .pestanas > a.activa { color: var(--gr-rosa-hueso); border-color: var(--gr-linea-hueso); }
  html .barra.menu-visible .pestanas .mas-col h4 { color: var(--gr-tinta-2); }
  html .barra.menu-visible .pestanas .mas-col a { color: var(--gr-tinta); }
  html .barra.menu-visible .pestanas .mas-col a[aria-current="page"] { color: var(--gr-rosa-hueso); }
  html .barra.menu-visible .menu-movil-cuenta > a { color: var(--gr-tinta); border-color: var(--gr-linea-hueso-fuerte); border-radius: 2px; }
  /* El idioma en tinta solo adentro del menú abierto (celular, ≤ 600 px). De
     601 a 1180 px el idioma sigue en la barra negra y, con el menú abierto, la
     tinta lo hacía desaparecer (23/10/2026). Con :where() la regla pesa lo
     mismo que antes: con `.pestanas` suelto le ganaba al borde claro de Void
     (void/interfaz.css) y lo pasaba a tinta, un color que nadie pidió
     (revisión del cambio 18). */
  html .barra.menu-visible :where(.pestanas) .idioma-selector select { color: var(--gr-tinta); border-color: rgba(22, 17, 14, .45); }
  html .barra.menu-visible .mas-panel { border-top-color: var(--gr-linea-hueso); background: transparent; }
}

/* ── «Más» de las pantallas: papel hueso ──────────────────────────────────── */
@media (min-width: 1181px) {
  html .mas-panel {
    background: var(--gr-hueso) var(--gr-grano);
    border: 0; border-radius: 3px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
    backdrop-filter: none;
  }
  html .mas-col h4 { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-tinta-2); }
  html .mas-col a { border-radius: 2px; color: var(--gr-tinta); }
  html .mas-col a:hover { background: var(--gr-velo-hueso); }
  html .mas-col a[aria-current="page"] { color: var(--gr-rosa-hueso); }
}
/* «Cerrado», con su píldora: en tinta suave sobre hueso, en ceniza sobre negro. */
.menu-cerrado { opacity: 1; color: var(--tinta-faint) !important; }

/* ── El idioma ──────────────────────────────────────────────────────────────
   idioma.css llega después (lo carga i18n.js): va con `html` adelante. */
html .idioma-selector select { border-radius: 2px; font-family: var(--gr-texto); border-color: var(--gr-linea-fuerte); }
html .idioma-selector select:focus-visible { outline-color: var(--tono-foco, var(--gr-rosa)); }
html .idioma-selector option { background: var(--gr-noche-2); color: var(--gr-hueso); }
html .idioma-estado { background: var(--gr-noche-2); color: var(--gr-hueso); }
html .idioma-dialogo {
  background: var(--gr-hueso) var(--gr-grano); color: var(--gr-tinta);
  border: 0; border-radius: 3px; font-family: var(--gr-texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
html .idioma-dialogo h2 { font-family: var(--gr-titulo); font-weight: 400; color: var(--gr-tinta); }
html .idioma-dialogo button { border-radius: 2px; border-color: var(--gr-linea-hueso-fuerte); color: var(--gr-tinta); min-height: 44px; }
html .idioma-dialogo button:last-child { color: var(--gr-rosa-hueso); }
html .idioma-dialogo::backdrop { background: rgba(14, 12, 11, .7); }

/* ── El panel de la cuenta: papel hueso ───────────────────────────────────── */
html .cuenta-panel {
  background: var(--gr-hueso) var(--gr-grano);
  border: 0; border-radius: 3px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
html .cuenta-panel .cuenta-panel-nombre { font: 400 18px/1.25 var(--gr-titulo); color: var(--gr-tinta); }
html .cuenta-panel .cuenta-grupo { border-top-color: var(--gr-linea-hueso); }
html .cuenta-panel .cuenta-grupo-titulo { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-tinta-2); }
html .cuenta-panel a,
html .cuenta-panel button { border-radius: 2px; color: var(--gr-tinta); font-family: var(--gr-texto); }
html .cuenta-panel a:hover,
html .cuenta-panel button:hover { background: var(--gr-velo-hueso); color: var(--gr-tinta); }
html .cuenta-panel .cuenta-menu-aviso { color: var(--gr-rosa-hueso); }
html .cuenta-panel .menu-cuenta-salir { border-top-color: var(--gr-linea-hueso) !important; }
.cuenta-disparador, .cuenta-ingresar { font-family: var(--gr-texto); }

/* ═══════════════════════════════════════════════════════════════════════════
   EL PIE DE LAS PANTALLAS (.pie-app, lo arma shell.js)
   Una grilla de dos zonas partida en 62 %: las columnas de enlaces sobre
   negro; la frase de la casa y la fila legal, sobre hueso. Se ubica con
   grid-row y grid-column: da igual si el catálogo suma una columna o no. El
   logo sigue escondido (estetica.css): no hay arcoíris en ningún lado.
   ═══════════════════════════════════════════════════════════════════════════ */
html .pie-app {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: [l-start] minmax(0, calc(62% - 40px)) [l-end] 80px [r-start] minmax(0, 1fr) [r-end];
  grid-template-rows: auto 1fr;
  gap: 0;
  padding: 56px clamp(18px, 3.4vw, 48px) 40px;
  background: var(--gr-hueso) var(--gr-grano);
  border-top: 0;
  color: var(--gr-tinta);
}
/* El negro, hasta la luz: el borde de un papel mal cortado (la tira de arriba,
   alineada abajo), con su luz encima. */
html .pie-app::before {
  content: '';
  position: absolute; inset: 0 auto 0 0; width: calc(62% + 30px); z-index: -1;
  background: var(--gr-noche) var(--gr-grano-luz);
  -webkit-mask-image: var(--gr-tira-izq), linear-gradient(#000, #000);
  mask-image: var(--gr-tira-izq), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
  mask-size: 60px 2400px, calc(100% - 60px) 100%;
  -webkit-mask-position: right 0 bottom 900px, left top;
  mask-position: right 0 bottom 900px, left top;
}
html .pie-app::after {
  content: '';
  position: absolute; inset: 0 auto 0 calc(62% - 110px); width: 220px; z-index: 0;
  pointer-events: none;
  background: var(--gr-tira-luz) left 80px bottom 900px / 60px 2400px repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  filter: var(--gr-brillo);
}
html .pie-app-cols {
  grid-column: l; grid-row: 1 / span 2;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 26px;
}
html .pie-app-cols h5 { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ceniza); }
html .pie-app-cols a { font-size: 13.5px; color: var(--gr-hueso); padding: 5px 0; }
html .pie-app-cols a:hover { color: var(--gr-rosa); }
html .pie-app-marca { grid-column: r; grid-row: 1; }
html .pie-app-marca p { margin: 0 0 24px; font: 400 20px/1.32 var(--gr-voz); letter-spacing: -.01em; color: var(--gr-tinta-2); max-width: 34ch; }
html .pie-app-legal {
  grid-column: r; grid-row: 2; align-self: end;
  flex-direction: column; gap: 8px;
  margin: 0; padding: 18px 0 0; border-top: 1px solid var(--gr-linea-hueso);
  font-size: 12px; color: var(--gr-tinta-2);
}
html .pie-app-legal a { color: var(--gr-tinta-2); }
html .pie-app-legal a:hover { color: var(--gr-rosa-hueso); }
html .pie-app :focus-visible { outline-color: var(--gr-rosa); }
html .pie-app :is(.pie-app-marca, .pie-app-legal) :focus-visible { outline-color: var(--gr-rosa-hueso); }
@media (max-width: 760px) {
  /* En el celular: las columnas sobre negro y la fila legal, en una franja de
     hueso al final. */
  html .pie-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; padding-bottom: 0; background: var(--gr-noche) var(--gr-grano-luz); }
  html .pie-app::before, html .pie-app::after { content: none; }
  html .pie-app-cols { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .pie-app-marca { grid-column: 1; grid-row: 2; margin-top: 30px; }
  html .pie-app-marca p { color: var(--gr-ceniza); }
  html .pie-app-legal {
    grid-column: 1; grid-row: 3;
    margin: 18px calc(-1 * clamp(18px, 3.4vw, 48px)) 0; padding: 23px clamp(18px, 3.4vw, 48px) 28px;
    /* El papel y su luz acostada (ver «La luz acostada»); 23 px y no 20: sin el filete de 3 px de antes. */
    background: none;
    border-top: 0; box-shadow: none;
  }
}

/* ── La luz acostada ─────────────────────────────────────────────────────────
   En el celular, el panel de capas de /video/ e /imagen/, la tarjeta de
   /videoclip/ y la fila legal del pie son bloques de hueso a lo ancho, sobre
   el negro, con la luz acostada en su borde de arriba. Ese borde también es el
   de un papel mal cortado (la tira acostada de «El papel mal cortado: las
   tiras»: 2400 px de ancho por 60 de alto, la línea sin desvío a 30 px).
     ::before  el hueso, que empieza 30 px arriba del bloque y se recorta con la
               tira (el hueso queda por debajo del borde);
     ::after   la luz: la tira con el brillo.
   El bloque pasa a ser su propio contexto de capas para que el hueso quede
   detrás de su texto. El `content` (y ese contexto) lo da cada tamaño de
   pantalla, más abajo. */
:is(.contenido > .taller-con-capas > .taller-capas, .contenido > .vc-armado > .vc-tarjeta, html .pie-app-legal, .studio-portada #pie .pie-inferior)::before {
  position: absolute; z-index: -1;
  inset: -30px 0 0 0;
  pointer-events: none;
  background: var(--gr-hueso) var(--gr-grano);
  -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
  mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
  mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
  -webkit-mask-position: left 0 top 0, left bottom;
  mask-position: left 0 top 0, left bottom;
}
:is(.contenido > .taller-con-capas > .taller-capas, .contenido > .vc-armado > .vc-tarjeta, html .pie-app-legal, .studio-portada #pie .pie-inferior)::after {
  position: absolute; z-index: 1;
  inset: -30px 0 auto 0;
  height: 60px;
  pointer-events: none;
  background: var(--gr-tira-h-luz) left 0 top 0 / 2400px 60px repeat-x;
  filter: var(--gr-brillo-corto);
}
/* Cada tira empieza en otro lugar de la tira de 2400 px: no se parecen. */
.contenido > .vc-armado > .vc-tarjeta::before { -webkit-mask-position: left -700px top 0, left bottom; mask-position: left -700px top 0, left bottom; }
.contenido > .vc-armado > .vc-tarjeta::after { background-position: left -700px top 0; }
html .pie-app-legal::before { -webkit-mask-position: left -1500px top 0, left bottom; mask-position: left -1500px top 0, left bottom; }
html .pie-app-legal::after { background-position: left -1500px top 0; }
.studio-portada #pie .pie-inferior::before { -webkit-mask-position: left -400px top 0, left bottom; mask-position: left -400px top 0, left bottom; }
.studio-portada #pie .pie-inferior::after { background-position: left -400px top 0; }
/* Solo en el tamaño donde el bloque es de hueso a lo ancho: ahí pasa a ser su
   propio contexto de capas. (Arriba de eso, el panel de capas y la tarjeta de
   /videoclip/ siguen siendo los de siempre —pegajosos, de una columna—: darles
   position: relative les activaría el `top` de su regla de pegarse y los
   correría; por eso `top: auto`.) */
@media (max-width: 1100px) {
  .contenido > .taller-con-capas > .taller-capas { position: relative; top: auto; isolation: isolate; }
  .contenido > .taller-con-capas > .taller-capas::before, .contenido > .taller-con-capas > .taller-capas::after { content: ''; }
}
@media (max-width: 960px) {
  .contenido > .vc-armado > .vc-tarjeta { position: relative; top: auto; isolation: isolate; }
  .contenido > .vc-armado > .vc-tarjeta::before, .contenido > .vc-armado > .vc-tarjeta::after { content: ''; }
}
@media (max-width: 760px) {
  html .pie-app-legal { position: relative; top: auto; isolation: isolate; }
  html .pie-app-legal::before, html .pie-app-legal::after { content: ''; }
}
@media (max-width: 1199px) {
  .studio-portada #pie .pie-inferior { position: relative; isolation: isolate; }
  .studio-portada #pie .pie-inferior::before, .studio-portada #pie .pie-inferior::after { content: ''; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA CAJA LET IT FLOW (portada y /crear/)
   Sin panel y sin desenfoque: filetes, pestañas con subrayado rosa, el texto
   en la itálica y los «+» como chips cuadrados de borde fino. La grilla de la
   portada está en portada-grieta.css.
   ═══════════════════════════════════════════════════════════════════════════ */
.entrada {
  --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);
  font-family: var(--gr-texto);
}
.entrada-titulo {
  font-family: var(--gr-titulo);
  font-weight: var(--gr-titulo-peso);
  letter-spacing: -.005em;
  line-height: .95;
}
.entrada-titulo em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}
.entrada-caja {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.entrada-caja:focus-within, .entrada-caja.soltando { box-shadow: none; }
.entrada-caja.soltando { outline: 1px dashed var(--e-acento); outline-offset: 8px; }

/* Los tipos: pestañas sin borde. La elegida, en hueso con un subrayado rosa
   de 3 px; la flechita gira con el desplegable abierto. */
.entrada-tipos {
  gap: 4px;
  margin: 0;
  border-top: 1px solid rgba(236, 227, 211, .24);
  border-bottom: 1px solid rgba(236, 227, 211, .24);
}
.entrada-tipos-pista { gap: 4px; }
.entrada-tipo {
  position: relative;
  min-height: 48px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--e-tenue);
  font: 500 15px/1 var(--gr-texto);
  letter-spacing: 0;
  box-shadow: none;
}
.entrada-tipo-auto { padding-left: 0; }
.entrada-tipo svg { display: none; }
.entrada-tipo:hover { background: transparent; border-color: transparent; color: var(--e-tinta); }
.entrada-tipo[aria-pressed="true"], .entrada-tipo.con-elegida,
.entrada--portada .entrada-tipo[aria-pressed="true"], .entrada--portada .entrada-tipo.con-elegida {
  background: transparent;
  border-color: transparent;
  color: var(--e-tinta);
  font-weight: 600;
}
.entrada-tipo[aria-pressed="true"]::after, .entrada-tipo.con-elegida::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  background: var(--e-acento);
}
.entrada-tipo-auto[aria-pressed="true"]::after { left: 0; }
.entrada-tipo[aria-expanded="true"] { border-color: transparent; box-shadow: none; color: var(--e-tinta); }
/* inline-block para que pueda girar; en el celular entrada.css la esconde. */
.entrada-tipo-flecha { font-size: 9px; opacity: .8; transition: transform .2s ease; }
@media (min-width: 641px) { .entrada-tipo-flecha { display: inline-block; } }
.entrada-tipo[aria-expanded="true"] .entrada-tipo-flecha { transform: rotate(180deg); }
.entrada-tipo.con-elegida::before { background: var(--e-acento); }

/* El texto: la grotesca grande, en voz baja, con un filete abajo que se vuelve rosa con el
   foco. El filete es el borde de arriba de la fila de los «+» y no del lugar
   de escribir: smoke-intro mide el píxel más claro de adentro contra la
   letra, y un filete claro pegado ahí contaría como fondo. */
.entrada-texto {
  min-height: 112px;
  padding: 20px 0 14px;
  border-bottom: 0;
  font: 400 clamp(22px, 2.1vw, 30px)/1.25 var(--gr-voz);
  letter-spacing: -.01em;
  color: var(--e-tinta);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.entrada-texto::placeholder { color: #AFA396; opacity: 1; font-family: var(--gr-voz); }
.entrada-caja:focus-within .entrada-barra { border-top-color: var(--e-acento); box-shadow: inset 0 1px 0 var(--e-acento); }
.entrada-contador { font-family: var(--gr-texto); top: 0; right: 0; }

/* «+ Foto», «+ Canción», «+ Video» y «+ Personaje»: chips cuadrados de 2 px
   con filete hueso al 55 %; al pasar el mouse se llenan de hueso. Los íconos
   se esconden (en la maqueta no están); el contador «3/15» sigue. */
.entrada-barra {
  position: relative;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(236, 227, 211, .85);
  gap: 8px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.entrada-sumar { gap: 8px; }
.entrada-sumar-boton {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(236, 227, 211, .55);
  border-radius: 2px;
  background: transparent;
  color: var(--e-tinta);
  font: 500 14px/1 var(--gr-texto);
  letter-spacing: 0;
}
.entrada-sumar-boton > svg { display: none; }
.entrada-sumar-boton:hover { background: var(--gr-hueso); border-color: var(--gr-hueso); color: var(--gr-tinta); }
.entrada-sumar-boton:hover .entrada-sumar-cuenta { color: var(--gr-tinta-2); }
.entrada-sumar-boton.hace-falta { border-color: var(--e-acento); }
.entrada-sumar-personaje { color: var(--e-acento); border-color: color-mix(in oklch, var(--gr-rosa) 60%, transparent); }
.entrada-sumar-personaje:hover { background: var(--e-acento); border-color: var(--e-acento); color: var(--gr-tinta); }
.entrada-seguir {
  min-height: 56px;
  padding: 0 30px;
  font-size: 17px;
  letter-spacing: .01em;
}

/* «Prueba:»: el rótulo en mayúsculas ceniza; los ejemplos en la itálica,
   subrayados y uno debajo del otro, de 44 px. */
.entrada-pruebas { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 22px; margin-top: 16px; }
.entrada-pruebas-rotulo {
  grid-row: 1 / span 3;
  align-self: start; padding-top: 15px;
  font: 600 11.5px/1 var(--gr-texto); letter-spacing: .18em; text-transform: uppercase;
  color: var(--gr-amarillo);
}
.entrada-prueba {
  grid-column: 2; justify-self: start;
  min-height: 44px; padding: 6px 0;
  border: 0;
  font: 400 19px/1.3 var(--gr-voz);
  letter-spacing: -.005em;
  color: var(--e-tinta);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px;
  text-decoration-color: rgba(236, 227, 211, .4);
}
.entrada-prueba:hover { color: var(--e-acento); text-decoration-color: var(--e-acento); }

/* Lo que se dice en voz baja, las preguntas, la tarjeta y las piezas. */
.entrada-estado, .entrada-nota, .entrada-espera, .entrada-guardamos { color: var(--e-tenue); }
.entrada-cuenta, .entrada-tarjeta, .entrada-pieza, .entrada-faltan, .entrada-confirmar {
  border-radius: 2px;
  background: var(--gr-noche-2);
  border-color: var(--gr-linea);
}
.entrada-aviso { border-radius: 2px; }
.entrada-opcion, .entrada-boton, .entrada-elegida, .entrada-ajuste, .entrada-menu-filtro, .entrada-sello, .entrada-ia-sello { border-radius: 2px; }
.entrada-elegida-nombre { border-radius: 2px 0 0 2px; }
.entrada-elegida-quitar { border-radius: 0 2px 2px 0; }
.entrada-opcion { background: transparent; }
.entrada-opcion[aria-pressed="true"],
.entrada--portada .entrada-opcion[aria-pressed="true"] { background: var(--gr-hueso); border-color: var(--gr-hueso); color: var(--gr-tinta); }
.entrada-opcion[aria-pressed="true"] .entrada-punto,
.entrada--portada .entrada-opcion[aria-pressed="true"] .entrada-punto { border-color: var(--gr-tinta); background: var(--gr-tinta); }
.entrada-estilo-muestra, .entrada-foto img, .entrada-medio, .entrada-adjunto, .entrada-adjunto img { border-radius: 2px; }
.entrada-rotulo, .entrada-pieza-titulo, .entrada-tanda-rotulo, .entrada-cajon-modelo, .entrada-menu-rotulo {
  font-family: var(--gr-texto); font-weight: 600; letter-spacing: .16em;
}
/* El precio grande, en la impacto. */
.entrada-precio { font-family: var(--gr-texto); }
.entrada-precio strong { font: 900 28px/1 var(--gr-titulo); letter-spacing: -.01em; }
.entrada-ajustes-precio { font-family: var(--gr-texto); }
.entrada-ajustes-precio strong { font: 900 22px/1.1 var(--gr-titulo); }
.entrada-opcion-precio, .entrada-lista-precio, .entrada-herramienta-precio { font-family: var(--gr-texto); font-variant-numeric: tabular-nums; }
.entrada-propuesta { font-family: var(--gr-voz); }
.entrada-pedido pre { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.entrada-generar { border-radius: 2px; letter-spacing: .16em; }
.entrada-barra-avance, .entrada-barra-avance i { border-radius: 0; }

/* «Haz tu videoclip» y el lema (en /crear/; en la portada los ubica
   portada-grieta.css). */
.entrada-videoclip > svg { background: var(--e-acento); color: var(--e-acento-tinta); }
.entrada-videoclip-texto { font: 600 14px/1.1 var(--gr-texto); letter-spacing: .18em; border-bottom-width: 1px; }
.entrada-videoclip-bajada { font: 400 19px/1.3 var(--gr-voz); letter-spacing: -.01em; }
.entrada-bajada { font-family: var(--gr-voz); }

/* ── Los desplegables de la caja: papel hueso ─────────────────────────────── */
.entrada-menu {
  border: 0;
  border-radius: 3px;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
.entrada-menu:modal { border-radius: 3px 3px 0 0; }
.entrada-menu::backdrop { background: rgba(14, 12, 11, .62); }
.entrada-menu-titulo { font: 900 clamp(22px, 2.6vw, 26px)/1.1 var(--gr-titulo); color: var(--gr-tinta); }
.entrada-menu-titulo em { font-family: inherit; color: var(--gr-rosa-hueso); }
/* styles.css y portada-identidad.css (la portada) les ponen la grotesca en 650
   y -.045em a todos los h1, h2 y h3 (0,1,1): adentro de la caja y de sus
   desplegables cada título vuelve a lo suyo. En /crear/ no hace falta. */
.studio-portada .entrada-menu .entrada-menu-titulo { font: 900 clamp(22px, 2.6vw, 26px)/1.1 var(--gr-titulo); letter-spacing: -.015em; }
.studio-portada .entrada-menu .entrada-menu-titulo.entrada-menu-titulo-chico { font-size: 18px; }
.studio-portada .entrada-menu .entrada-menu-rotulo { font: 600 10.5px/1.2 var(--gr-texto); letter-spacing: .16em; }
.studio-portada .entrada-cajon .entrada-cajon-titulo { font: 400 clamp(24px, 4vw, 30px)/1.1 var(--gr-titulo); letter-spacing: -.01em; }
.studio-portada .entrada .entrada-pieza-titulo { font-weight: 600; letter-spacing: .16em; }
.studio-portada .personaje-crear-titulo { font-family: var(--gr-titulo); font-weight: 400; letter-spacing: -.02em; }
.entrada-menu-titulo-chico { font-size: 18px; }
/* Las marcas a la izquierda, con su cantidad, y a la derecha las herramientas
   de la elegida (pedido del dueño, 11/10/2026; maqueta, «.pop.grande»). El
   desplegable nace alineado con la caja y un poco más ancho que antes. */
.entrada-menu--herramientas:not(:modal) { left: 0; width: min(780px, 100%); max-height: min(74vh, 600px); }
.entrada-menu-lista.con-marcas { border-top-color: var(--gr-linea-hueso); }
.entrada-menu-marcas { border-right-color: var(--gr-linea-hueso); }
.entrada-menu-marca-boton { font: 600 11.5px/1 var(--gr-texto); letter-spacing: .13em; color: var(--gr-tinta); }
.entrada-menu-marca-cuenta { font: 500 12px/1 var(--gr-texto); color: var(--gr-tinta-2); }
.entrada-menu-marca-boton:hover { background: color-mix(in oklch, var(--gr-rosa-hueso) 6%, transparent); }
.entrada-menu-marca-boton[aria-selected="true"] { color: var(--gr-rosa-hueso); background: color-mix(in oklch, var(--gr-rosa-hueso) 9%, transparent); box-shadow: inset 3px 0 0 var(--gr-rosa-hueso); }
.entrada-menu-marca-boton[aria-selected="true"] .entrada-menu-marca-cuenta { color: var(--gr-rosa-hueso); }
.entrada-menu-rotulo { padding: 12px 10px 8px; background: none; color: var(--gr-rosa-hueso); font-size: 10.5px; }
@media (max-width: 640px) {
  .entrada-menu-marcas { border-bottom-color: var(--gr-linea-hueso); }
  .entrada-menu-marca-boton { padding: 0 12px; }
  .entrada-menu-marca-boton[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--gr-rosa-hueso); }
}
.entrada-herramienta { border-radius: 2px; border-top: 1px solid rgba(22, 17, 14, .12); }
.entrada-herramienta-elegir { border-radius: 2px; }
.entrada-herramienta-elegir:hover { background: var(--gr-velo-hueso); }
.entrada-herramienta:has(> .entrada-herramienta-elegir[aria-pressed="true"]) { background: var(--gr-velo-hueso); box-shadow: inset 3px 0 0 var(--gr-rosa-hueso); }
.entrada-herramienta-precio { font-weight: 600; font-size: 12px; color: var(--gr-rosa-hueso); }
/* Revisión del cambio 14 (12/10/2026): sobre el velo rosa de la marca elegida
   y sobre el grano del papel, el rosa-hueso daba 4,3 y 4,4:1 en letra chica
   (revisar-grieta: la marca elegida, su cantidad y «Desde N créditos» en los
   cuatro menús, 110 avisos). En La grieta van en el bordó hondo de «Empezar»
   al pasar el cursor (5,4:1); el filete de la marca sigue en rosa-hueso. Solo
   La grieta: cada piel ya pinta estos tres con su paleta. */
:root[data-interfaz="grieta"] .entrada-menu-marca-boton[aria-selected="true"],
:root[data-interfaz="grieta"] .entrada-menu-marca-boton[aria-selected="true"] .entrada-menu-marca-cuenta,
:root[data-interfaz="grieta"] .entrada-herramienta-precio { color: var(--gr-rosa-hueso-hondo); }
/* «Próximamente» (cambio 14), sobre el papel hueso: el rótulo en la grotesca del
   menú, la línea cortada como el resto y sin el rosa de lo que se elige. */
.entrada-menu-subrotulo { border-top-color: var(--gr-linea-hueso-fuerte); font-family: var(--gr-texto); color: var(--gr-tinta-2); }
.studio-portada .entrada-menu .entrada-menu-subrotulo { font: 600 9.5px/1.2 var(--gr-texto); letter-spacing: .18em; }
.entrada-herramienta--pronto .entrada-herramienta-nombre { color: var(--gr-tinta-2); }
.entrada-herramienta--pronto .entrada-herramienta-elegir:focus-visible { outline-color: var(--gr-rosa-hueso); }
.entrada-sello-sinapi { border-color: var(--gr-tinta-2); color: var(--gr-tinta-2); }
/* «Próximamente» en /imagen/, /video/, /voz/ y /musica/ (cambio 14): sobre el negro de la pantalla, la letra de la casa y el rosa claro. */
.generar-pronto-cabeza { background: var(--gr-noche); }
.generar-pronto-titulo, .generar-pronto-rotulo, .generar-pronto-chip { font-family: var(--gr-texto); }
.generar-pronto-rotulo { color: var(--gr-rosa); }
.generar-pronto-chip { border-color: var(--gr-linea); color: var(--gr-ceniza); }
.generar-pronto-chip[aria-pressed="true"] { color: var(--gr-rosa); border-color: var(--gr-rosa); }
.generar-pronto-aviso { color: var(--gr-amarillo); }
.entrada-menu-filtro { border-color: var(--gr-linea-hueso-fuerte); }
.entrada-menu-filtro[aria-pressed="true"] { background: var(--gr-tinta); border-color: var(--gr-tinta); color: var(--gr-hueso); }
.entrada-lista-opcion { border-radius: 2px; }
.entrada-lista-opcion:hover, .entrada-menu-cerrar:hover, .entrada-cajon-cerrar:hover { background: var(--gr-velo-hueso); }
.entrada-menu .entrada-enlace:hover, .entrada-cajon .entrada-enlace:hover { color: var(--gr-rosa-hueso); }

/* ── El panel de la caja, del lado negro (23/10/2026, tanda 2) ───────────────
   El dueño marcó el desplegable «cuadrado, de papel» (21/10: «que los botones no tengan un cuadrado
   que los encierre, que sea todo soft delicado»). En La grieta deja de ser una hoja de papel hueso con
   esquinas rectas: es del mismo negro que la caja de donde sale, apenas más claro, con las esquinas
   redondeadas, un filete de luz casi invisible en vez de borde y una sombra larga y suave. La letra,
   en marfil; lo secundario, en ceniza (9,9:1 sobre el fondo). Nada rosa, dorado ni marrón.
   Las variables del papel se dan vuelta solo adentro del panel (la tinta pasa a marfil y el hueso a
   tinta): así cada regla de arriba (los filtros elegidos, la marca elegida, las filas, los precios)
   queda bien sin reescribirla. Solo La grieta: Void, Nervo y Rabbit pintan su panel en su piel. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu {
  --gr-tinta: #ECE3D3;
  --gr-tinta-2: #BDB3A6;
  --gr-hueso: #121110;
  --gr-rosa-hueso: #EFEBE4;
  --gr-rosa-hueso-hondo: #FFFFFF;
  --gr-linea-hueso: rgba(236, 227, 211, .1);
  --gr-linea-hueso-fuerte: rgba(236, 227, 211, .2);
  --gr-velo-hueso: rgba(236, 227, 211, .065);
  --e-tinta: #ECE3D3;
  --e-tenue: #BDB3A6;
  --e-acento: #EFEBE4;
  --e-acento-tinta: #121110;
  --e-linea: rgba(236, 227, 211, .2);
  --e-linea-suave: rgba(236, 227, 211, .08);
  color-scheme: dark;
  border: 0;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 120px),
    rgba(20, 19, 18, .96);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
  backdrop-filter: blur(18px) saturate(1.05);
  color: var(--gr-tinta);
  box-shadow: 0 0 0 1px rgba(236, 227, 211, .09), 0 30px 80px -24px rgba(0, 0, 0, .78), 0 10px 26px -12px rgba(0, 0, 0, .55);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu:modal { border-radius: 20px 20px 0 0; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu::backdrop { background: rgba(8, 7, 6, .58); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
/* Adentro, nada con esquinas rectas: las filas, las opciones y los sellos se redondean, y los sellos y
   los filtros van sin recuadro, con un tono apenas más claro que el fondo. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu :is(.entrada-herramienta, .entrada-herramienta-elegir, .entrada-lista-opcion, .entrada-menu-marca-boton) { border-radius: 10px; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-herramienta { border-top: 0; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-herramienta + .entrada-herramienta { box-shadow: 0 -1px 0 var(--gr-linea-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-herramienta:has(> .entrada-herramienta-elegir[aria-pressed="true"]) { box-shadow: inset 2px 0 0 var(--gr-rosa-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-sello { border-color: transparent; border-radius: 999px; background: rgba(236, 227, 211, .08); color: var(--gr-tinta-2); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-filtro { border-radius: 999px; border-color: transparent; background: rgba(236, 227, 211, .07); color: var(--gr-tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-filtro:not([aria-pressed="true"]):hover { background: rgba(236, 227, 211, .13); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-filtro[aria-pressed="true"] { background: var(--gr-tinta); color: var(--gr-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-buscar { border-bottom-color: var(--gr-linea-hueso-fuerte); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-buscar:focus { border-bottom-color: var(--gr-tinta); box-shadow: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-cerrar { color: var(--gr-tinta-2); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-cerrar:hover { color: var(--gr-tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-subrotulo { border-top-style: solid; border-top-color: var(--gr-linea-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-lista-opcion[aria-pressed="true"] { background: var(--gr-velo-hueso); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-punto { border-color: var(--gr-linea-hueso-fuerte); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu :is(.entrada-menu-cols, .entrada-menu-marcas, .entrada-menu-lista, .entrada-menu-opciones, .entrada-menu-motores, .entrada-menu-resoluciones) { scrollbar-color: rgba(236, 227, 211, .22) transparent; }

/* El cajón «¿Qué hace?»: papel hueso. */
.entrada-cajon {
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  border-left: 0;
  box-shadow: -24px 0 60px rgba(0, 0, 0, .55);
}
.entrada-cajon::backdrop { background: rgba(14, 12, 11, .62); }
.entrada-cajon-titulo { font: 400 clamp(24px, 4vw, 30px)/1.1 var(--gr-titulo); color: var(--gr-tinta); }
@media (max-width: 640px) {
  .entrada-cajon { border-radius: 3px 3px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, .55); }
}

/* La caja en el celular: Automático en su renglón y los cuatro tipos en una
   fila de cuatro, como hoy, pero como pestañas (sin borde ni relleno); el
   subrayado rosa marca el elegido. */
@media (max-width: 640px) {
  .entrada-tipos { border-bottom: 0; }
  .entrada-tipos-pista { border-top: 1px solid rgba(236, 227, 211, .24); border-bottom: 1px solid rgba(236, 227, 211, .24); padding-top: 0; }
  .entrada-tipos-pista .entrada-tipo { min-height: 56px; border-radius: 0; font-size: 13px; }
  .entrada-tipos-pista .entrada-tipo[aria-pressed="true"]::after,
  .entrada-tipos-pista .entrada-tipo.con-elegida::after { left: 8px; right: 8px; }
  .entrada-texto { font-size: 27px; min-height: 112px; }
  .entrada-sumar-boton { justify-content: center; }
  .entrada-seguir { width: 100%; }
  .entrada-pruebas { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .entrada-pruebas-rotulo { grid-row: auto; padding-top: 0; margin-bottom: 4px; }
  .entrada-prueba { grid-column: 1; font-size: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   /nosotros/: HEREDA EL ENCABEZADO, EL PIE Y LAS LETRAS (decisión D3)
   Textos, rótulos, fotos y cita quedan como están, también en su petróleo:
   dentro de `.cuerpo` de esa página vuelven los colores de antes. El pie de
   esa página vive adentro de `.cuerpo`, así que a él se los vuelve a sacar.
   LAS LETRAS (15/10/2026): «letras modernas en toda la página». Desde ese día
   /nosotros/ habla con las de la casa (arriba, «Las letras»): los títulos de
   impacto en mayúsculas, el texto y la cita en Schibsted, recta. Se fijan en
   .contenido, donde la paleta vuelve a poner los valores de La grieta: así
   ninguna interfaz llega acá. Los textos no cambian.
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(.cierre-nosotros) .cuerpo {
  --papel: #405967; --papel-2: #354f5d; --noche: #304956; --noche-1: #304956;
  --tinta: #edf2f4; --tinta-dim: #d5e1e7; --tinta-faint: #cad8df;
  --noche-tinta: #edf2f4; --noche-tinta-dim: #d5e1e7; --noche-tinta-faint: #cad8df;
  --rosa: var(--gr-rosa); --rojo: var(--gr-rosa); --acento: var(--gr-rosa); --rosa-fuerte: var(--gr-rosa);
  --acento-ink: #28161f; --acento-soft: color-mix(in oklch, var(--gr-rosa) 10%, transparent);
  --g0: #405967; --g1: #354f5d; --g2: #304b59; --g3: #3b5665; --g4: #42606f; --g5: #3f5b6b;
  --g6: #5d7887; --g7: #7893a0; --g8: #92abb6; --g9: #cad8df; --g10: #d5e1e7;
  --linea: #d5e8f02b; --linea-fuerte: #d5e8f05c; --linea-noche: #ffffff21;
  --capa: #c3e2ef12; --capa-fuerte: #c3e2ef20;
  --papel-25: #40596740; --papel-45: #40596773; --papel-58: #40596794; --papel-70: #405967b3;
  --papel-84: #405967d6; --papel-90: #354f5de6; --papel-97: #354f5df7; --papel-99: #354f5dfc;
  --r-lg: 16px; --r-md: 8px; --r-sm: 4px;
  background: #405967;
  color: #edf2f4;
  font-family: var(--gr-texto);
  /* El pie, ahora negro y hueso, es lo último de la página: sin los 40 px de
     petróleo que quedaban debajo de él. */
  padding-bottom: 0;
}
/* El rosa de /nosotros/ es siempre el de La grieta, también con otra
   interfaz: en .contenido el bloque de la paleta vuelve a fijar --gr-rosa, y
   acá las variables viejas se recalculan con ese valor (15/10/2026). */
body:has(.cierre-nosotros) .cuerpo > .contenido {
  --rosa: var(--gr-rosa); --rojo: var(--gr-rosa); --acento: var(--gr-rosa); --rosa-fuerte: var(--gr-rosa);
  --acento-soft: color-mix(in oklch, var(--gr-rosa) 10%, transparent);
  --f-sans: var(--gr-texto); --sans: var(--gr-texto);
  --f-rara: var(--gr-titulo);
  --f-serif: var(--gr-voz); --serif: var(--gr-voz);
  --mono: var(--gr-texto);
  font-family: var(--gr-texto);
}
body:has(.cierre-nosotros) .cuerpo > .contenido :is(h1, h2) {
  font-family: var(--gr-titulo);
  font-weight: var(--gr-titulo-peso);
  letter-spacing: -.005em;
  line-height: .96;
  text-transform: uppercase;
}
body:has(.cierre-nosotros) .cuerpo > .contenido :is(h1, h2) em { font-family: inherit; font-weight: inherit; letter-spacing: inherit; color: var(--gr-rosa); }
/* Los rótulos («QUIÉNES SOMOS», «LA TESIS»…): Schibsted 600, como en el resto
   del sitio. El rosa del token sobre el petróleo da 3,2:1, poco para 11 px:
   va un rosa más claro, mezclado del mismo token (4,9:1). */
body:has(.cierre-nosotros) .cuerpo > .contenido .kicker {
  font-family: var(--gr-texto);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
}
body:has(.cierre-nosotros) .cuerpo > .contenido .portada-cuerpo .kicker { color: color-mix(in oklch, var(--gr-rosa) 55%, white); }
body:has(.cierre-nosotros) .cuerpo .pie-app {
  --f-sans: var(--gr-texto); --sans: var(--gr-texto); --f-rara: var(--gr-titulo); --f-serif: var(--gr-voz); --serif: var(--gr-voz);
  --mono: var(--gr-texto);
  --papel: var(--gr-noche); --g0: var(--gr-noche); --g1: #141110; --g6: rgba(236, 227, 211, .20);
  --tinta: var(--gr-hueso); --tinta-dim: #CFC5B6; --tinta-faint: var(--gr-ceniza);
  --rosa: var(--gr-rosa); --acento: var(--gr-rosa); --linea: var(--gr-linea);
  color: var(--gr-hueso);
  font-family: var(--gr-texto);
  font-synthesis: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ETAPA 2 · LAS PANTALLAS INTERNAS (12/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Todo lo que sigue es CSS sobre el marcado que ya existe: ningún texto, id,
   clase ni data-* cambia. Tres piezas que se repiten en todas las pantallas:

   1 · LA CABECERA PARTIDA. La cabecera de cada pantalla (la que arma cada
       página: .portada-prompt, .cuenta-cabecera, .vc-cabecera…) ocupa todo el
       ancho: negro a la izquierda con el rótulo y el título de impacto,
       hueso a la derecha con la bajada, y la grieta de luz entre los dos. El
       título va entero del lado negro (los títulos de las pantallas son más
       cortos que los de la portada y el rosa claro no se lee sobre hueso).
       En el celular el negro se lleva todo el ancho y la luz baja por el borde.
   2 · EL HUESO A SANGRE, para las dos columnas (el panel de capas de /video/ e
       /imagen/, el resumen de /videoclip/): la segunda columna es un papel
       hueso que llega al borde derecho, con la luz recta en su borde izquierdo.
   3 · LO DE ADENTRO: paneles de 2 px de radio, filetes en vez de cajas,
       campos con filete y foco rosa, pestañas con subrayado.

   Para ver una pantalla como en la etapa 1 alcanza con borrar este bloque.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lo que se sale de la página (el hueso a sangre) no hace scroll de costado. */
.cuerpo { overflow-x: clip; }
/* /modelos/ y /como-se-factura/ no cargan bloques.css: sin esto la barra lateral
   (que las demás pantallas esconden) les dejaba 232 px vacíos a la izquierda. */
body.sin-lateral .lateral { display: none; }
body.sin-lateral .cuerpo { margin-left: 0; }

/* ── La cabecera partida ─────────────────────────────────────────────────────
   --gr-x1: por dónde pasa la luz. --gr-izq: cuánto se aleja del borde de la
   pantalla el contenido de la página (se calcula con el mismo % que el margen
   que la saca a sangre, así sirve en cualquier ancho). */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) {
  --gr-x1: var(--gr-reparto);
  --gr-x1v: var(--gr-reparto-v);
  --gr-izq: calc(50vw - 50%);
  --gr-hueco: 44px;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, calc(var(--gr-x1v) - var(--gr-izq) - var(--gr-hueco))) calc(var(--gr-hueco) * 2) minmax(0, 1fr);
  column-gap: 0;
  align-items: start;
  align-content: end;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0 calc(50% - 50vw) clamp(32px, 4vw, 56px);
  padding: clamp(40px, 5vw, 76px) var(--gr-izq) clamp(34px, 4vw, 58px);
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-hueso);
  text-align: left;
}
/* El negro, con su borde quebrado arriba. */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::before {
  content: '';
  /* La caja llega 30 px después de la luz (--gr-x1): ahí termina la tira, que va
     pegada a su borde derecho; a la izquierda de la tira, el negro lleno. */
  position: absolute; inset: -1px auto -1px 0; z-index: 0;
  width: calc(var(--gr-x1) + 30px);
  display: block;
  pointer-events: none;
  background: var(--gr-noche) var(--gr-grano-luz);
  -webkit-mask-image: var(--gr-tira-izq), linear-gradient(#000, #000);
  mask-image: var(--gr-tira-izq), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
  mask-size: 60px 2400px, calc(100% - 60px) 100%;
  /* Alineada abajo: la cabecera y el panel que le sigue (/video/, /videoclip/)
     se encuentran sobre la línea, sin escalón. */
  -webkit-mask-position: right 0 bottom var(--gr-fase, 0px), left top;
  mask-position: right 0 bottom var(--gr-fase, 0px), left top;
}
/* La luz: 3 px de blanco cálido con su brillo, que nace arriba, se enciende y se
   apaga abajo, y parpadea cada 11 s como la de la portada. */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::after {
  content: '';
  position: absolute; z-index: 2;
  display: block;
  /* 220 px de ancho para que entre el brillo; la tira (la luz sobre el borde del
     papel) va en el medio, con su línea sin desvío a 110 px. */
  inset: 0 auto 0 calc(var(--gr-x1) - 110px);
  width: 220px;
  pointer-events: none;
  background: var(--gr-tira-luz) left 80px bottom var(--gr-fase, 0px) / 60px 2400px repeat-y;
  /* Nace arriba (se enciende en 84 px) y se apaga abajo (en 70 px). */
  -webkit-mask-image: var(--gr-apaga, linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 70px), transparent 100%));
  mask-image: var(--gr-apaga, linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 70px), transparent 100%));
  filter: var(--gr-brillo);
  animation: gr-parpadeo 11s steps(1, end) infinite;
  will-change: opacity;
}
/* Los hijos, por encima del negro y de la luz. Los envoltorios que las páginas
   le ponen a rótulo, título y bajada se aplanan: así todo cae en la grilla. */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo, .banda-cuerpo, .comprar-cabecera > div:first-child) { display: contents; }
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) > *:not(img.fondo, .medio-portada) { position: relative; z-index: 3; min-width: 0; max-width: none; margin-inline: 0; justify-self: start; }
.contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo, .banda-cuerpo, .comprar-cabecera > div:first-child) > * { position: relative; z-index: 3; min-width: 0; max-width: none; margin-inline: 0; justify-self: start; }
/* Todo va en la columna del negro, salvo lo que abajo manda a la del hueso
   (con :where, para que la regla de cada pieza le gane sin pelear). */
:where(.contenido:not(:has(.cierre-nosotros))) :where(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado, .portada-cuerpo, .banda-cuerpo) > :where(*:not(img.fondo, .medio-portada)) { grid-column: 1; }

/* Cada cabecera suelta tiene su propio tramo de la tira (la tira mide 2.400 px y
   se alinea por abajo): así el corte de /precios/ no es el de /modelos/. Las dos
   que van pegadas a un panel de hueso (.portada-prompt: /video/, /imagen/, /voz/,
   /musica/; y .vc-cabecera: /videoclip/) quedan en 0: terminan sobre la línea y
   el panel empieza sobre la línea, sin escalón. */
.contenido:not(:has(.cierre-nosotros)) .cuenta-cabecera { --gr-fase: 300px; }
.contenido:not(:has(.cierre-nosotros)) .biblio-cabecera { --gr-fase: 600px; }
.contenido:not(:has(.cierre-nosotros)) .mc-cabecera { --gr-fase: 900px; }
.contenido:not(:has(.cierre-nosotros)) .insp-cabeza { --gr-fase: 1200px; }
.contenido:not(:has(.cierre-nosotros)) .fact-banda { --gr-fase: 1500px; }
.contenido:not(:has(.cierre-nosotros)) .banda { --gr-fase: 1800px; }
.contenido:not(:has(.cierre-nosotros)) .modelos-cabecera { --gr-fase: 2100px; }
.contenido:not(:has(.cierre-nosotros)) .comprar-cabecera { --gr-fase: 450px; }
.contenido:not(:has(.cierre-nosotros)) .manual-cabecera { --gr-fase: 1000px; }

/* El rótulo, como en la maqueta: Schibsted 600, mayúsculas, ceniza. */
.contenido:not(:has(.cierre-nosotros)) :is(.kicker, .cuenta-kicker, .vc-rotulo, .insp-kicker, .modelos-rotulo) {
  margin: 0 0 18px;
  font: 600 11.5px/1.2 var(--gr-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gr-ceniza);
}
/* El rótulo de la banda con foto va en hueso (la ceniza no alcanzaba sobre la foto). */
.contenido:not(:has(.cierre-nosotros)) .banda .kicker { color: var(--gr-hueso); }
/* El título: de impacto, entero del lado negro; la palabra destacada, en rosa. */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) :is(h1, h2) {
  margin: 0;
  font: 900 clamp(46px, 5.6vw, 88px)/.94 var(--gr-titulo);
  letter-spacing: -.005em;
  color: var(--gr-hueso);
  text-shadow: none;
  text-wrap: balance;
}
.contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) :is(h1, h2) em {
  font: inherit;
  color: var(--gr-rosa);
}
/* La bajada, del lado hueso: en voz baja, abajo, a la altura del pie del título. */
.contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto) {
  grid-column: 3;
  grid-row: 1 / span 6;
  align-self: end;
  margin: 0;
  max-width: 27em;
  font: 400 clamp(19px, 1.7vw, 24px)/1.32 var(--gr-voz);
  letter-spacing: -.01em;
  color: var(--gr-tinta);
}
.contenido:not(:has(.cierre-nosotros)) :is(.presets-ayuda, .legal-fecha, .comprar-saldo, .banda-botones, .manual-datos, .catalogo-cerrado-volver) { grid-column: 3; align-self: end; }
.contenido:not(:has(.cierre-nosotros)) .banda-botones { margin-top: 6px; }

/* En el celular el negro se lleva el ancho y la luz baja por el borde derecho.
   Rótulo, título y bajada van uno debajo del otro, sobre negro. */
@media (max-width: 980px) {
  .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) {
    --gr-x1: calc(100% - 12px);
    --gr-x1v: 100vw;
    grid-template-columns: minmax(0, 1fr);
    padding-block: 34px 30px;
    padding-right: max(var(--gr-izq), 22px);
  }
  .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) :is(h1, h2) { font-size: clamp(38px, 11.5vw, 60px); }
  .contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto) {
    grid-column: 1; grid-row: auto;
    margin-top: 18px;
    font: 400 16px/1.6 var(--gr-texto);
    color: var(--gr-hueso);
  }
  :root .contenido:not(:has(.cierre-nosotros)) :is(.presets-ayuda, .legal-fecha, .comprar-saldo, .banda-botones, .manual-datos, .catalogo-cerrado-volver) { grid-column: 1; margin-top: 14px; color: var(--gr-ceniza); }
}

/* La foto de la banda (/realizacion/ y /marca/) y el medio propio que la cuenta
   dueña pone detrás de la cabecera de una pantalla («Mi sitio»), velados y solo
   del lado negro. */
.contenido:not(:has(.cierre-nosotros)) :is(.banda > img.fondo, .portada-prompt > .medio-portada) {
  position: absolute; z-index: 1;
  inset: 0 auto 0 0;
  /* Llega 30 px después de la luz: el borde de la derecha es el del papel mal
     cortado (la misma tira que el negro de la cabecera), no el de la caja. */
  width: calc(var(--gr-x1) + 30px); height: 100%;
  object-fit: cover; object-position: 70% 30%;
  opacity: .5;
  /* Más velada del lado del título (donde van las letras) que del otro: el
     rótulo y el título se leen y la cara de la foto queda a la vista. Tres
     capas de máscara: el velo, atravesado por (la tira + el negro lleno). */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) 38%, #000 100%), var(--gr-tira-izq), linear-gradient(#000, #000);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(0, 0, 0, .28) 38%, #000 100%), var(--gr-tira-izq), linear-gradient(#000, #000);
  -webkit-mask-composite: source-in, source-over, source-over;
  mask-composite: intersect, add, add;
  -webkit-mask-repeat: no-repeat, repeat-y, no-repeat;
  mask-repeat: no-repeat, repeat-y, no-repeat;
  -webkit-mask-size: 100% 100%, 60px 2400px, calc(100% - 60px) 100%;
  mask-size: 100% 100%, 60px 2400px, calc(100% - 60px) 100%;
  -webkit-mask-position: 0 0, right 0 bottom var(--gr-fase, 0px), left top;
  mask-position: 0 0, right 0 bottom var(--gr-fase, 0px), left top;
  border-radius: 0;
}

/* ── El hueso a sangre: dos columnas ─────────────────────────────────────────
   /video/, /imagen/ (el panel de capas) y /videoclip/ (el resumen). La segunda
   columna es un papel hueso que llega al borde derecho de la pantalla y
   empieza justo donde está la luz de la cabecera (62 % del ancho): la grieta
   baja de la cabecera al panel sin cortarse. La columna de la izquierda sigue
   sobre negro. --gr-borde: lo que hay entre el borde de la pantalla y el
   contenido (el .contenido va centrado, a 1440 px como mucho, con relleno). */
:root { --gr-borde: calc(max(0px, (100vw - 1440px) / 2) + clamp(18px, 3.5vw, 58px)); }
@media (min-width: 1101px) {
  .contenido > .taller.taller-con-capas {
    --gr-col2: calc(38vw - var(--gr-borde));
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) var(--gr-col2);
    column-gap: 0;
    align-items: start;
    margin-top: 0;
  }
  /* El papel y su luz. El papel llega 30 px antes de la luz y su borde izquierdo
     es la tira del papel mal cortado (alineada arriba, donde termina la de la
     cabecera: se encuentran sobre la línea, sin escalón). */
  .contenido > .taller.taller-con-capas::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--gr-borde)) 0 auto;
    width: calc(var(--gr-col2) + var(--gr-borde) + 30px);
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
    mask-size: 60px 2400px, calc(100% - 60px) 100%;
    -webkit-mask-position: left top, right top;
    mask-position: left top, right top;
  }
  .contenido > .taller.taller-con-capas::after {
    content: '';
    position: absolute; z-index: 2;
    inset: 0 auto 0 calc(100% - var(--gr-col2) - 110px);
    width: 220px;
    pointer-events: none;
    background: var(--gr-tira-luz) 80px top / 60px 2400px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%);
    filter: var(--gr-brillo);
    animation: gr-parpadeo 11s steps(1, end) infinite;
    will-change: opacity;
  }
  /* La cabecera de arriba sigue la misma luz sin cortarse: sin pausa de
     margen y sin apagarse abajo. */
  .contenido > .portada-prompt:has(+ .taller-con-capas) { margin-bottom: 0; }
  .contenido > .portada-prompt:has(+ .taller-con-capas) { --gr-apaga: linear-gradient(180deg, transparent 0, #000 84px, #000 100%); }
  .taller.taller-con-capas > .taller-pedido { padding-right: 44px; }
  .taller.taller-con-capas > .taller-capas { padding-left: 40px; }
}
@media (min-width: 961px) {
  .contenido > .vc-armado {
    --gr-col2: calc(38vw - var(--gr-borde));
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) var(--gr-col2);
    column-gap: 0;
    align-items: start;
    margin-top: 0;
  }
  /* El papel y su luz (igual que en /video/: tira alineada arriba). */
  .contenido > .vc-armado::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--gr-borde)) 0 auto;
    width: calc(var(--gr-col2) + var(--gr-borde) + 30px);
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
    mask-size: 60px 2400px, calc(100% - 60px) 100%;
    -webkit-mask-position: left top, right top;
    mask-position: left top, right top;
  }
  .contenido > .vc-armado::after {
    content: '';
    position: absolute; z-index: 2;
    inset: 0 auto 0 calc(100% - var(--gr-col2) - 110px);
    width: 220px;
    pointer-events: none;
    background: var(--gr-tira-luz) 80px top / 60px 2400px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 90px), transparent 100%);
    filter: var(--gr-brillo);
    animation: gr-parpadeo 11s steps(1, end) infinite;
    will-change: opacity;
  }
  /* La cabecera de arriba sigue la misma luz sin cortarse: sin pausa de
     margen y sin apagarse abajo. */
  .contenido > .vc-cabecera:has(+ .vc-armado, + .vc-aviso + .vc-armado) { margin-bottom: 0; }
  .contenido > .vc-cabecera:has(+ .vc-armado, + .vc-aviso + .vc-armado) { --gr-apaga: linear-gradient(180deg, transparent 0, #000 84px, #000 100%); }
  .vc-armado > .vc-pasos { padding-right: 44px; }
  .vc-armado > .vc-tarjeta { padding-left: 40px; }
}
/* Debajo de eso las dos columnas pasan a una: el panel de capas y el resumen
   quedan abajo, en un bloque de hueso a sangre, con la luz acostada arriba (la
   misma del pie en el celular). */
@media (max-width: 1100px) {
  .contenido > .taller-con-capas > .taller-capas {
    margin: 28px calc(-1 * var(--gr-borde)) 0;
    /* 37 px y no 34: el filete de 3 px de arriba (la luz recta de antes) ya no
       está, y el bloque mide lo mismo que antes. */
    padding: 37px var(--gr-borde) 44px;
    /* El papel y su luz acostada: el borde de arriba es el del papel mal cortado
       (ver «La luz acostada» más abajo). */
    background: none;
    border-top: 0;
    box-shadow: none;
  }
}
@media (max-width: 960px) {
  .contenido > .vc-armado > .vc-tarjeta {
    margin: 12px calc(-1 * var(--gr-borde)) 0;
    padding: 37px var(--gr-borde) 44px;
    background: none;
    border: 0; border-radius: 0;
    box-shadow: none;
  }
}
/* El pedido y el panel de capas, sin la caja de antes: el pedido sobre el negro
   de la página y las capas sobre el hueso, que se leen por sus filetes. */
.taller-pedido { background: transparent; border: 0; padding: 36px 0 44px; }
.taller-capas .presets-capas { background: transparent; border: 0; padding: 34px 0 44px; }
@media (min-width: 961px) {
  .vc-armado > .vc-tarjeta { background: transparent; border: 0; padding: 38px 0 44px 40px; }
}

/* ── Las migas y las pestañas (Video · Imagen · Voz · Música) ────────────────
   Las pestañas dejan de ser una píldora con caja: una raya fina y la activa,
   con su subrayado rosa de 3 px, como en la caja de la portada. */
:where(html:not(:has(.cierre-nosotros))) .migas { font: 500 12px/1.2 var(--gr-texto); letter-spacing: .02em; }
:where(html:not(:has(.cierre-nosotros))) .migas .actual { color: var(--gr-hueso); }
.crear-tipos {
  width: 100%;
  gap: 2px;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--gr-linea);
  border-radius: 0;
  background: transparent;
}
.crear-tipos a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 0;
  background: transparent;
  font: 500 15px/1 var(--gr-texto);
  color: var(--gr-ceniza);
}
.crear-tipos a:hover { background: transparent; color: var(--gr-hueso); }
.crear-tipos a.activa { background: transparent; color: var(--gr-hueso); font-weight: 600; }
.crear-tipos a.activa::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: -1px; height: 3px; background: var(--gr-rosa); }
@media (max-width: 600px) {
  .crear-tipos { justify-content: space-between; }
  .crear-tipos a { padding: 0 10px; flex: 1 1 0; justify-content: center; }
  .crear-tipos a.activa::after { left: 10px; right: 10px; }
}

/* ── /modelos/ y /como-se-factura/ ───────────────────────────────────────────
   Sin la columna angosta de antes: la cabecera parte desde el borde, como las
   demás; el contenido va a todo el ancho del sitio. */
body:has(.modelos, .fact-banda, .catalogo-cerrado) .lateral { display: none; }
body:has(.modelos, .fact-banda, .catalogo-cerrado) .cuerpo { margin-left: 0; }
.modelos { max-width: none; margin-inline: 0; }
.modelos > .modelos-cabecera { max-width: none; }
.modelos-filtro { font-family: var(--gr-texto); }
.modelos-filtro[aria-pressed="true"] { background: var(--gr-hueso); border-color: var(--gr-hueso); color: var(--gr-tinta); }
.fact-banda { max-width: none; }

/* ── La puerta: entrar, cuenta, editor sin sesión ────────────────────────────
   Pantalla partida: el formulario sobre negro, a la izquierda, y el papel
   hueso a la derecha con la luz entre los dos. En el celular el negro se lleva
   todo y la luz baja por el borde. */
.pantalla-entrar .cuerpo {
  position: relative; isolation: isolate;
  grid-template-columns: minmax(0, var(--gr-reparto)) minmax(0, 1fr);
  place-items: center;
  /* El cuerpo arranca en el borde de arriba (la barra va fija por encima): con
     la altura de entrar.css (100svh menos la barra) quedaba una franja lisa de
     72 px debajo del hueso y se veía el corte. Ahora llega hasta abajo y el
     formulario sigue centrado en lo que se ve, bajo la barra. */
  min-height: 100svh;
  padding: calc(var(--barra) + clamp(28px, 6vh, 72px)) clamp(20px, 4vw, 64px) clamp(28px, 6vh, 72px);
}
.pantalla-entrar .cuerpo::before {
  content: '';
  position: absolute; z-index: -1; inset: 0 0 0 auto;
  width: calc(100% - var(--gr-reparto) + 30px);
  background: var(--gr-hueso) var(--gr-grano);
  /* El borde del papel: la tira del papel mal cortado (app/grieta.css, arriba). */
  -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
  mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
  -webkit-mask-repeat: repeat-y, no-repeat;
  mask-repeat: repeat-y, no-repeat;
  -webkit-mask-size: 60px 2400px, max(0px, calc(100% - 60px)) 100%;
  mask-size: 60px 2400px, max(0px, calc(100% - 60px)) 100%;
  -webkit-mask-position: left 0 top 600px, right top;
  mask-position: left 0 top 600px, right top;
}
.pantalla-entrar .cuerpo::after {
  content: '';
  position: absolute; z-index: 2; inset: 0 auto 0 calc(var(--gr-reparto) - 110px);
  width: 220px;
  pointer-events: none;
  background: var(--gr-tira-luz) 80px 600px / 60px 2400px repeat-y;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  filter: var(--gr-brillo);
  animation: gr-parpadeo 11s steps(1, end) infinite;
  will-change: opacity;
}
.pantalla-entrar .entrar-caja { grid-column: 1; justify-self: center; max-width: 460px; }
.pantalla-entrar .entrar-marco { border: 0; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.pantalla-entrar .entrar-titulo { font: 900 clamp(44px, 5vw, 72px)/.94 var(--gr-titulo); letter-spacing: -.005em; color: var(--gr-hueso); }
.pantalla-entrar .entrar-titulo em { font: inherit; color: var(--gr-rosa); }
.pantalla-entrar .entrar-kicker { font: 600 11.5px/1.2 var(--gr-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--gr-ceniza); }
.pantalla-entrar .entrar-bajada { font: 400 20px/1.32 var(--gr-voz); letter-spacing: -.01em; color: var(--gr-hueso); }
.pantalla-entrar .entrar-etiqueta { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .14em; color: var(--gr-ceniza); }
.pantalla-entrar .entrar-campo input { border-radius: 2px; background: var(--gr-noche); }
@media (max-width: 760px) {
  .pantalla-entrar .cuerpo { grid-template-columns: minmax(0, 1fr); padding-inline: 22px 28px; }
  /* En el celular el papel es una tira angosta a la derecha (la luz a 12 px del borde). */
  .pantalla-entrar .cuerpo::before { width: 42px; }
  .pantalla-entrar .cuerpo::after { inset: 0 0 0 calc(100% - 122px); width: auto; }
  .pantalla-entrar .entrar-caja { justify-self: stretch; max-width: none; }
}

/* ── Los documentos legales y la denuncia ────────────────────────────────────
   El título parte como en todas; el texto largo va sobre negro, a 68
   caracteres de ancho, en Schibsted de 17 px con 1,65 de interlineado. */
.legal { max-width: none; margin: 0; padding: 0 0 40px; }
.legal > .legal-cabecera { margin-bottom: clamp(32px, 4vw, 56px); border-bottom: 0; }
.legal .legal-seccion,
.legal .legal-indice,
.legal .denuncia-form,
.legal .denuncia-gracias,
.legal .denuncia-alterno { max-width: 68ch; }
/* Con otra interfaz (12/10/2026): 68 caracteres de una letra más ancha que
   Schibsted (Geist, Bricolage) se metían debajo del papel, que baja a la
   derecha desde el 62 % (con su borde de 60 px): entre 981 y 1100 px el texto
   quedaba blanco sobre blanco. La revisión del cambio 14 (12/10) lo extiende
   a La grieta: con Schibsted también se metía, de 981 a unos 1060 px, hasta
   40 px debajo del papel en /terminos/, /privacidad/, /cookies/, /licencia/,
   /copyright/ y /denunciar/ («responsabilidad», «leerla», el campo «¿Dónde
   está?»). De 1100 px para arriba 68 caracteres ya entran y nada cambia. */
@media (min-width: 981px) {
  .legal :is(.legal-seccion, .legal-indice, .denuncia-form, .denuncia-gracias, .denuncia-alterno) { max-width: min(68ch, calc(62vw - 90px)); }
}
.legal-seccion h2 { font: 400 26px/1.15 var(--gr-titulo); letter-spacing: -.015em; }
.legal-seccion p { font: 400 17px/1.65 var(--gr-texto); color: var(--tinta-dim); }
.legal-indice h3 { font: 600 11.5px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-ceniza); }

/* Los documentos largos: el papel hueso baja a la derecha, a todo el alto, con
   la misma luz de la cabecera (empieza donde ella, a 62 % del ancho). */
.legal-fecha { font: 500 13px/1.4 var(--gr-texto); letter-spacing: .02em; }
@media (min-width: 981px) {
  .contenido > .legal { position: relative; isolation: isolate; }
  .contenido > .legal::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--gr-borde)) 0 auto;
    width: calc(38vw + 30px);
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
    mask-size: 60px 2400px, calc(100% - 60px) 100%;
    -webkit-mask-position: left 0 top 1200px, right top;
    mask-position: left 0 top 1200px, right top;
  }
  .contenido > .legal::after {
    content: '';
    position: absolute; z-index: 2;
    inset: 0 auto 0 calc(62vw - var(--gr-borde) - 110px);
    width: 220px;
    pointer-events: none;
    background: var(--gr-tira-luz) 80px 1200px / 60px 2400px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%);
    filter: var(--gr-brillo);
    animation: gr-parpadeo 11s steps(1, end) infinite;
    will-change: opacity;
  }
  .contenido > .legal > .legal-cabecera::after { display: none; }
  /* La cabecera de un documento largo no dibuja su propio borde: el papel de
     .legal baja a todo el alto (cabecera incluida) con UN solo borde de papel
     mal cortado, sin escalón entre la cabecera y el texto. */
  .contenido > .legal > .legal-cabecera { background: none; }
  .contenido > .legal > .legal-cabecera::before { display: none; }
}

/* ── /crear/: la misma puerta de la portada, sin el video ───────────────────
   El título y la caja sobre negro, a la izquierda; del lado hueso, «Haz tu
   videoclip» con su lema; la luz baja entre los dos a todo el alto (y sigue
   en el pie, que también parte en 62 %). En el celular, todo sobre negro y la
   luz por el borde. */
@media (min-width: 981px) {
  .entrada.entrada--pagina {
    --gr-izq: calc(50vw - 50%);
    position: relative; isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, calc(var(--gr-reparto-v) - var(--gr-izq) - 40px)) 80px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    /* A sangre, desde la barra hasta el pie: se come el relleno de arriba y de
       abajo del .contenido (30 y 60 px). */
    max-width: none; width: auto;
    margin: -30px calc(50% - 50vw) -60px;
    min-height: calc(100vh - var(--barra));
    padding: clamp(44px, 6vw, 92px) var(--gr-izq) clamp(60px, 7vw, 110px);
  }
  .entrada--pagina::before {
    content: '';
    position: absolute; z-index: -1; inset: 0 0 0 auto;
    width: calc(100% - var(--gr-reparto) + 30px);
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
    mask-size: 60px 2400px, calc(100% - 60px) 100%;
    -webkit-mask-position: left 0 top 1800px, right top;
    mask-position: left 0 top 1800px, right top;
  }
  .entrada--pagina::after {
    content: '';
    position: absolute; z-index: 2; inset: 0 auto 0 calc(var(--gr-reparto) - 110px);
    width: 220px;
    pointer-events: none;
    background: var(--gr-tira-luz) 80px 1800px / 60px 2400px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%);
    filter: var(--gr-brillo);
    animation: gr-parpadeo 11s steps(1, end) infinite;
    will-change: opacity;
  }
  .entrada--pagina > .entrada-cabeza { grid-column: 1; grid-row: 1; margin: 0; }
  .entrada--pagina > .entrada-cuerpo { grid-column: 1; grid-row: 2; min-width: 0; max-width: 860px; }
  .entrada--pagina > .entrada-videoclip { grid-column: 3; grid-row: 2; align-self: end; justify-self: start; max-width: 370px; margin: 0; color: var(--gr-tinta); --tono-foco: var(--gr-rosa-hueso); }
  .entrada--pagina > .entrada-videoclip > svg { background: var(--gr-rosa-hueso); color: var(--gr-hueso); }
  .entrada--pagina .entrada-videoclip-texto { color: var(--gr-tinta); border-bottom-color: var(--gr-rosa-hueso); }
  .entrada--pagina .entrada-videoclip-bajada { margin-left: 52px; font: 400 20px/1.3 var(--gr-voz); letter-spacing: -.01em; color: var(--gr-tinta-2); }
  .entrada--pagina .entrada-videoclip:focus-visible { outline-color: var(--gr-rosa-hueso); }
  .entrada--pagina .entrada-titulo { font-size: clamp(64px, 8vw, 128px); line-height: .92; text-wrap: balance; margin: 0 0 clamp(18px, 2.4vw, 34px); }
}
@media (max-width: 980px) {
  .entrada.entrada--pagina {
    --gr-izq: calc(50vw - 50%);
    position: relative; isolation: isolate;
    max-width: none; width: auto;
    margin: -30px calc(50% - 50vw) -60px;
    padding-inline: var(--gr-izq) max(var(--gr-izq), 28px);
  }
  @media (max-width: 600px) { .entrada.entrada--pagina { margin-block: -24px -40px; } }
  /* En el celular el papel es una tira angosta a la derecha: la luz a 12 px del borde. */
  .entrada--pagina::before {
    content: '';
    position: absolute; z-index: -1; inset: 0 0 0 auto;
    width: 42px;
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-der);
    mask-image: var(--gr-tira-der);
    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;
    -webkit-mask-size: 60px 2400px;
    mask-size: 60px 2400px;
    -webkit-mask-position: left 0 top 1800px;
    mask-position: left 0 top 1800px;
  }
  .entrada--pagina::after {
    content: '';
    position: absolute; z-index: 2; inset: 0 0 0 calc(100% - 122px);
    pointer-events: none;
    background: var(--gr-tira-luz) 80px 1800px / 60px 2400px repeat-y;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 70px, #000 calc(100% - 90px), transparent 100%);
    filter: var(--gr-brillo);
  }
  .entrada--pagina .entrada-titulo { font-size: clamp(48px, 14vw, 96px); line-height: .94; }
  .entrada--pagina > .entrada-videoclip { color: var(--gr-hueso); }
  .entrada--pagina .entrada-videoclip > svg { background: var(--gr-rosa); color: var(--gr-tinta); }
  .entrada--pagina .entrada-videoclip-texto { color: var(--gr-hueso); border-bottom-color: var(--gr-rosa); }
  .entrada--pagina .entrada-videoclip-bajada { color: var(--gr-ceniza); }
}

/* ── Letras: los rótulos y las cifras en la letra de texto ───────────────────
   Las hojas de siempre ponen rótulos, cifras y precios en JetBrains Mono
   (--mono). En la maqueta todo eso es Schibsted: el editor de /montar/ (tiempos,
   cuadros) la conserva; el pedido tal cual de la caja tiene su propia regla. */
:root { --mono: var(--gr-texto); }
body.montar-pagina { --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; }
.manual-datos { font: 600 11.5px/1.5 var(--gr-texto); letter-spacing: .12em; }
/* Los números de las marcas: letra oscura sobre el naranja (6,4:1; la blanca
   daba 3,1:1). El círculo es el mismo que dibuja tools/capturas-manual.js. */
.manual-marca-num { color: var(--gr-tinta); font: 700 12px/24px var(--gr-texto); }
/* La cabecera del manual es un contexto de capas (isolation): sin un z-index
   propio, la lista de resultados del buscador, que baja por afuera de ella,
   quedaba por debajo del índice y de las secciones que le siguen. */
:root .contenido:not(:has(.cierre-nosotros)) .manual-cabecera { z-index: 20; }
/* Y el buscador, por encima de los atajos que le siguen (la lista les baja encima). */
:root .contenido:not(:has(.cierre-nosotros)) .manual-cabecera > .manual-buscar { z-index: 6; }
/* El buscador y los atajos del manual ocupan todo el ancho del negro. */
:root .contenido:not(:has(.cierre-nosotros)) .manual-cabecera > :is(.manual-buscar, .manual-atajos) { justify-self: stretch; max-width: 720px; }
:root .contenido:not(:has(.cierre-nosotros)) .manual-cabecera > .manual-atajos { max-width: none; }

/* ── El Estudio (/studio/): riel y accesos ───────────────────────────────── */
.studio-riel { background: var(--gr-noche-2); border-right-color: var(--gr-linea); }
.riel-boton.activo { background: var(--gr-noche-4); }
.studio-cabecera h2 { font: 900 clamp(36px, 4vw, 56px)/.96 var(--gr-titulo); letter-spacing: -.005em; }
.studio-cabecera p { font: 400 20px/1.32 var(--gr-voz); letter-spacing: -.01em; color: var(--gr-ceniza); max-width: 42ch; }
.studio-grupo-titulo { font: 600 11.5px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-ceniza); }
.studio-acceso b, .studio-personaje b { font-family: var(--gr-texto); }

/* ── El editor (/montar/) ────────────────────────────────────────────────────
   Su paleta propia era un petróleo más oscuro; pasa al negro cálido de la casa,
   con los paneles un escalón arriba. El escenario (donde se mira el video) queda
   casi negro, que es donde va. Los tiempos conservan JetBrains Mono. */
body.montar-pagina .montar {
  --m-fondo: var(--gr-noche);
  --m-panel: var(--gr-noche-2);
  --m-escenario: #080706;
  --m-linea: #231E1A;
  --m-fila: var(--gr-noche-2);
  --m-cabeza: var(--gr-noche-3);
  --m-borde: rgba(236, 227, 211, .14);
  --m-borde-fuerte: rgba(236, 227, 211, .30);
  --m-hover: rgba(236, 227, 211, .07);
  --rara: var(--gr-titulo);
}
body.montar-pagina .montar-nombre { font: 400 20px/1.2 var(--gr-titulo); letter-spacing: -.01em; }
body.montar-pagina .montar-kicker { font-family: var(--gr-texto); letter-spacing: .16em; }
body.montar-pagina .montar-fila.tipo-video { background: var(--gr-noche-3); }
body.montar-pagina .montar-aviso { background: var(--gr-noche-3); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); border-radius: 3px; }
/* Los diálogos del editor, en papel hueso como los del resto del sitio. */
body.montar-pagina .montar-dialogo {
  --m-tinta: var(--gr-tinta);
  --m-tenue: var(--gr-tinta-2);
  --m-rosa: var(--gr-rosa-hueso);
  --m-borde: var(--gr-linea-hueso);
  --m-borde-fuerte: var(--gr-linea-hueso-fuerte);
  --m-hover: var(--gr-velo-hueso);
  border: 0;
  border-radius: 3px;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
body.montar-pagina .montar-dialogo::backdrop { background: rgba(14, 12, 11, .7); }
body.montar-pagina .montar-dialogo-cabeza { border-bottom-color: var(--gr-linea-hueso); }
body.montar-pagina .montar-dialogo .montar-opcion { border-color: var(--gr-linea-hueso-fuerte); background: rgba(22, 17, 14, .04); border-radius: 2px; }
body.montar-pagina .montar-dialogo .montar-icono:hover { background: var(--gr-velo-hueso); }

/* ── Inspiración: el detalle en papel hueso ──────────────────────────────────
   El video o la foto, entera, en un recuadro oscuro a la izquierda; el texto
   sobre hueso a la derecha. */
.insp-dialogo {
  --i-linea: var(--gr-linea-hueso-fuerte);
  --i-linea-suave: var(--gr-linea-hueso);
  --i-tinta: var(--gr-tinta);
  --i-tenue: var(--gr-tinta-2);
  --i-acento: var(--gr-rosa-hueso);
  --i-acento-tinta: var(--gr-hueso);
  border: 0;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
.insp-dialogo::backdrop { background: rgba(14, 12, 11, .74); }
.insp-dialogo-medio { background: #080706; }
.insp-dialogo-titulo { font: 400 clamp(28px, 3.4vw, 44px)/1.05 var(--gr-titulo); letter-spacing: -.02em; }
.insp-dialogo-bajada { color: var(--gr-tinta-2); }
.insp-datos dt { color: var(--gr-rosa-hueso); }
.insp-datos dd { color: var(--gr-tinta); }
.insp-legal { color: var(--gr-tinta-2); }
.insp-filtro[aria-pressed="true"] { background: var(--gr-hueso); border-color: var(--gr-hueso); color: var(--gr-tinta); }

/* ── La puerta de salida (viaje.css) y «¿Te resultó fácil?» (medicion.css) ────
   Dos avisos chicos que se abren o aparecen sobre el negro: van en papel hueso,
   como los demás desplegables. La capa de transición (el video a pantalla
   completa) no cambia. */
.viaje-dialogo::backdrop { background: rgba(14, 12, 11, .78); backdrop-filter: blur(6px); }
.viaje-caja {
  border: 0;
  border-radius: 3px;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
.viaje-cabecera .kicker { font: 600 11px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-rosa-hueso); }
.viaje-cabecera h2 { font: 400 28px/1.12 var(--gr-titulo); letter-spacing: -.015em; }
.viaje-bajada { color: var(--gr-tinta-2); font-size: 14px; }
.viaje-cerrar { border-color: var(--gr-linea-hueso-fuerte); }
.viaje-cerrar:hover { background: var(--gr-velo-hueso); border-color: var(--gr-rosa-hueso); }
.viaje-destino, .viaje-modo { background: rgba(22, 17, 14, .035); border-color: var(--gr-linea-hueso); }
.viaje-destino:hover, .viaje-modo:hover { background: var(--gr-velo-hueso); border-color: var(--gr-rosa-hueso); }
.viaje-destino.en-obra:hover { background: none; border-color: var(--gr-linea-hueso); }
.viaje-destino-texto span, .viaje-modo span { color: var(--gr-tinta-2); }
.viaje-destino-estado { font-family: var(--gr-texto); font-weight: 600; border-color: var(--gr-linea-hueso-fuerte); color: var(--gr-tinta-2); }
.viaje-destino:focus-visible, .viaje-modo:focus-visible { outline-color: var(--gr-rosa-hueso); }
.facil { border: 0; background: var(--gr-hueso) var(--gr-grano); color: var(--gr-tinta); }
.facil-boton { border-color: var(--gr-linea-hueso-fuerte); }
.facil-boton:hover:not(:disabled) { border-color: var(--gr-rosa-hueso); background: var(--gr-velo-hueso); }

/* ── Precios: las cifras grandes de impacto, los montos chicos en Schibsted ── */
.comprar-monto { font: 900 32px/1 var(--gr-titulo); letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; }
.comprar-saldo-n { font: 600 17px/1 var(--gr-texto); font-variant-numeric: tabular-nums; }
.comprar-ficha { background: var(--gr-noche-2); border-color: var(--gr-linea); }
.comprar-ficha[data-estado="sin_precio"], .comprar-ficha[data-estado="precio_roto"] { border-color: var(--gr-linea-fuerte); }
/* «Pedir cotización» (Enterprise) se puede apretar aunque no tenga precio: la
   ficha no se apaga, así su botón da 9:1 y no 4,4:1. */
.comprar-ficha[data-estado="sin_precio"]:has(.comprar-boton:not(:disabled)) { opacity: 1; }
.comprar-titulo { font: 600 11.5px/1.2 var(--gr-texto); letter-spacing: .16em; color: var(--gr-ceniza); }

/* ── El diálogo de personajes (referencias.css): papel hueso ─────────────────── */
html .personaje-dialogo {
  border: 0;
  background: var(--gr-hueso) var(--gr-grano);
  color: var(--gr-tinta);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(239, 235, 228, .25);
}
html .personaje-dialogo::backdrop { background: rgba(14, 12, 11, .72); }
html .personaje-dialogo .studio-campo { border: 1px solid var(--gr-linea-hueso-fuerte); background: rgba(22, 17, 14, .04); color: var(--gr-tinta); }
html .personaje-dialogo button, html .personaje-dialogo .referencia-subir { border-color: var(--gr-linea-hueso-fuerte); }
html .personaje-dialogo .boton-acento { background: var(--gr-rosa-hueso); color: var(--gr-hueso); border-color: transparent; }

/* Los títulos de impacto, en su único peso. Las hojas de las pantallas piden
   500, 600 o 700 en h1 y h2 (una clase les gana a las reglas de arriba): acá
   se les vuelve a decir el de la letra, con más fuerza. /nosotros/ tiene el suyo. */
:root:root:root:not(:has(.cierre-nosotros)) :is(h1, h2) { font-weight: var(--gr-titulo-peso); }

/* ── Los radios: de 2 a 4 px, como la maqueta ────────────────────────────────
   Las hojas de siempre traen esquinas de 8 a 20 px y píldoras. Este tramo lo
   escribe tools/gen-radios-grieta.py (no se edita a mano): la misma regla de
   cada hoja, con `html` adelante y el radio nuevo. /nosotros/ queda afuera. */
html { --r-lg: 4px; --r-md: 2px; --r-sm: 2px; }
/* RADIOS-INICIO · generado por tools/gen-radios-grieta.py (no se edita a mano) */

html:not(:has(.cierre-nosotros)) .buscador,
html:not(:has(.cierre-nosotros)) .pestanas,
html:not(:has(.cierre-nosotros)) .pestanas a,
html:not(:has(.cierre-nosotros)) .lateral a,
html:not(:has(.cierre-nosotros)) .desplegable,
html:not(:has(.cierre-nosotros)) .ficha-filtro,
html:not(:has(.cierre-nosotros)) .pista-fila,
html:not(:has(.cierre-nosotros)) .pista-arte,
html:not(:has(.cierre-nosotros)) .icono-boton,
html:not(:has(.cierre-nosotros)) .pieza-duracion,
html:not(:has(.cierre-nosotros)) .repro-pista img,
html:not(:has(.cierre-nosotros)) .menu-cuenta,
html:not(:has(.cierre-nosotros)) .menu-cuenta a,
html:not(:has(.cierre-nosotros)) .menu-cuenta button,
html:not(:has(.cierre-nosotros)) .campo-prompt,
html:not(:has(.cierre-nosotros)) .riel-boton,
html:not(:has(.cierre-nosotros)) .riel-tooltip,
html:not(:has(.cierre-nosotros)) .studio-campo,
html:not(:has(.cierre-nosotros)) .catalogo-cerrado-volver,
html:not(:has(.cierre-nosotros)) .boton-acento,
html:not(:has(.cierre-nosotros)) .boton-borde,
html:not(:has(.cierre-nosotros)) .boton-claro,
html:not(:has(.cierre-nosotros)) .menu-movil,
html:not(:has(.cierre-nosotros)) .crear-tipos,
html:not(:has(.cierre-nosotros)) .crear-tipos a,
html:not(:has(.cierre-nosotros)) .campo-prompt textarea,
html:not(:has(.cierre-nosotros)) .generar-modelo,
html:not(:has(.cierre-nosotros)) .generar-presupuesto,
html:not(:has(.cierre-nosotros)) .capa-ficha,
html:not(:has(.cierre-nosotros)) .biblioteca-controles input,
html:not(:has(.cierre-nosotros)) .biblioteca-controles select,
html:not(:has(.cierre-nosotros)) .sitio-editor select,
html:not(:has(.cierre-nosotros)) .sitio-previa,
html:not(:has(.cierre-nosotros)) .cuenta-panel a,
html:not(:has(.cierre-nosotros)) .cuenta-panel button,
html:not(:has(.cierre-nosotros)) .biblio-ficha,
html:not(:has(.cierre-nosotros)) .biblio-vacia .boton-acento,
html:not(:has(.cierre-nosotros)) .cuenta-numero,
html:not(:has(.cierre-nosotros)) .cuenta-campo input,
html:not(:has(.cierre-nosotros)) .cuenta-form .boton-acento,
html:not(:has(.cierre-nosotros)) .cuenta-aviso,
html:not(:has(.cierre-nosotros)) .cuenta-sesion,
html:not(:has(.cierre-nosotros)) .cuenta-sesiones .boton-borde,
html:not(:has(.cierre-nosotros)) .biblio-editar,
html:not(:has(.cierre-nosotros)) .biblio-aviso,
html:not(:has(.cierre-nosotros)) .generar-saldo,
html:not(:has(.cierre-nosotros)) .generar-insignia,
html:not(:has(.cierre-nosotros)) .generar-aviso,
html:not(:has(.cierre-nosotros)) .generar-ficha,
html:not(:has(.cierre-nosotros)) .generar-barra,
html:not(:has(.cierre-nosotros)) .generar-preset,
html:not(:has(.cierre-nosotros)) .generar-preset-nuevo,
html:not(:has(.cierre-nosotros)) .generar-previa,
html:not(:has(.cierre-nosotros)) .generar-aceptada,
html:not(:has(.cierre-nosotros)) .presets-abrir,
html:not(:has(.cierre-nosotros)) .seguir-con-opcion,
html:not(:has(.cierre-nosotros)) .referencia-previa img,
html:not(:has(.cierre-nosotros)) .referencia-previa video,
html:not(:has(.cierre-nosotros)) .personaje-fotos img,
html:not(:has(.cierre-nosotros)) .personaje-portada,
html:not(:has(.cierre-nosotros)) .referencias-medios .referencia-selector,
html:not(:has(.cierre-nosotros)) .personaje-fotos video,
html:not(:has(.cierre-nosotros)) .personaje-dialogo .studio-campo,
html:not(:has(.cierre-nosotros)) .personaje-dialogo button,
html:not(:has(.cierre-nosotros)) .tramos-oferta,
html:not(:has(.cierre-nosotros)) .tramos-lista .tramo,
html:not(:has(.cierre-nosotros)) .personaje-edicion,
html:not(:has(.cierre-nosotros)) .movimiento-marco,
html:not(:has(.cierre-nosotros)) .movimiento-marco .movimiento-etiqueta,
html:not(:has(.cierre-nosotros)) .movimiento-tipo,
html:not(:has(.cierre-nosotros)) .movimiento-nombre,
html:not(:has(.cierre-nosotros)) .movimiento-video,
html:not(:has(.cierre-nosotros)) .movimiento-video video,
html:not(:has(.cierre-nosotros)) .movimiento-galeria,
html:not(:has(.cierre-nosotros)) .movimiento-opcion img,
html:not(:has(.cierre-nosotros)) .movimiento-opcion video,
html:not(:has(.cierre-nosotros)) .personaje-cara,
html:not(:has(.cierre-nosotros)) .referencias-varias,
html:not(:has(.cierre-nosotros)) .referencias-varias-foto img,
html:not(:has(.cierre-nosotros)) .referencias-varias-numero,
html:not(:has(.cierre-nosotros)) .personaje-dialogo .referencia-subir,
html:not(:has(.cierre-nosotros)) .personaje-despues-opcion,
html:not(:has(.cierre-nosotros)) .personaje-seguimiento,
html:not(:has(.cierre-nosotros)) .personaje-seguimiento-fotos img,
html:not(:has(.cierre-nosotros)) .capas-contador,
html:not(:has(.cierre-nosotros)) .ficha-borrar,
html:not(:has(.cierre-nosotros)) .capa-formulario,
html:not(:has(.cierre-nosotros)) .capa-formulario input,
html:not(:has(.cierre-nosotros)) .capa-formulario textarea,
html:not(:has(.cierre-nosotros)) .capas-volver,
html:not(:has(.cierre-nosotros)) .capa-elegido,
html:not(:has(.cierre-nosotros)) .capa-quitar,
html:not(:has(.cierre-nosotros)) .salida-texto,
html:not(:has(.cierre-nosotros)) .estilo-tarjeta,
html:not(:has(.cierre-nosotros)) .estilo-muestra,
html:not(:has(.cierre-nosotros)) .estilo-variante,
html:not(:has(.cierre-nosotros)) .vc-aviso,
html:not(:has(.cierre-nosotros)) .vc-lectura.mala,
html:not(:has(.cierre-nosotros)) .vc-ficha,
html:not(:has(.cierre-nosotros)) .vc-onda-marco,
html:not(:has(.cierre-nosotros)) .vc-onda-ventana,
html:not(:has(.cierre-nosotros)) .vc-opcion-texto,
html:not(:has(.cierre-nosotros)) .vc-miniatura,
html:not(:has(.cierre-nosotros)) .vc-personaje,
html:not(:has(.cierre-nosotros)) .vc-personaje img,
html:not(:has(.cierre-nosotros)) .vc-encuadre,
html:not(:has(.cierre-nosotros)) .vc-enc-marco,
html:not(:has(.cierre-nosotros)) .vc-enc-aviso,
html:not(:has(.cierre-nosotros)) .vc-casilla,
html:not(:has(.cierre-nosotros)) .vc-entera,
html:not(:has(.cierre-nosotros)) .vc-espera,
html:not(:has(.cierre-nosotros)) .insp-filtro,
html:not(:has(.cierre-nosotros)) .insp-mas,
html:not(:has(.cierre-nosotros)) .insp-boton,
html:not(:has(.cierre-nosotros)) .insp-aviso,
html:not(:has(.cierre-nosotros)) .modelos-filtro,
html:not(:has(.cierre-nosotros)) .modelo-muestra-boton,
html:not(:has(.cierre-nosotros)) .modelo-limite,
html:not(:has(.cierre-nosotros)) .modelo-texto p,
html:not(:has(.cierre-nosotros)) .presets-quitar,
html:not(:has(.cierre-nosotros)) .presets-usar,
html:not(:has(.cierre-nosotros)) .comprar-saldo,
html:not(:has(.cierre-nosotros)) .comprar-modo,
html:not(:has(.cierre-nosotros)) .comprar-aviso,
html:not(:has(.cierre-nosotros)) .comprar-ficha,
html:not(:has(.cierre-nosotros)) .comprar-periodos,
html:not(:has(.cierre-nosotros)) .comprar-periodo-op,
html:not(:has(.cierre-nosotros)) .cotiza-campo input,
html:not(:has(.cierre-nosotros)) .cotiza-campo textarea,
html:not(:has(.cierre-nosotros)) .cotiza-aviso,
html:not(:has(.cierre-nosotros)) .mc-filtros,
html:not(:has(.cierre-nosotros)) .mc-filtro,
html:not(:has(.cierre-nosotros)) .mc-buscar,
html:not(:has(.cierre-nosotros)) .mc-aviso,
html:not(:has(.cierre-nosotros)) .mc-insignia,
html:not(:has(.cierre-nosotros)) .mc-titulo-campo,
html:not(:has(.cierre-nosotros)) .mc-menu-item,
html:not(:has(.cierre-nosotros)) .mc-confirmar,
html:not(:has(.cierre-nosotros)) .mc-visor-medio,
html:not(:has(.cierre-nosotros)) .mc-aviso-accion,
html:not(:has(.cierre-nosotros)) .entrar-campo input,
html:not(:has(.cierre-nosotros)) .entrar-ojo,
html:not(:has(.cierre-nosotros)) .entrar-aviso,
html:not(:has(.cierre-nosotros)) .entrar-enviar,
html:not(:has(.cierre-nosotros)) .entrar-acciones .boton-acento,
html:not(:has(.cierre-nosotros)) .entrar-acciones .boton-borde,
html:not(:has(.cierre-nosotros)) .entrar-rescate button,
html:not(:has(.cierre-nosotros)) .entrar-nota,
html:not(:has(.cierre-nosotros)) .entrar-codigo,
html:not(:has(.cierre-nosotros)) .legal-indice-fila a,
html:not(:has(.cierre-nosotros)) .fact-etiqueta,
html:not(:has(.cierre-nosotros)) .fact-apagado,
html:not(:has(.cierre-nosotros)) .denuncia-enviar,
html:not(:has(.cierre-nosotros)) .ajustes-campo input,
html:not(:has(.cierre-nosotros)) .ajustes-campo select,
html:not(:has(.cierre-nosotros)) .ajustes-fijo,
html:not(:has(.cierre-nosotros)) .ajustes-aviso,
html:not(:has(.cierre-nosotros)) .ajustes-previo,
html:not(:has(.cierre-nosotros)) .boton-peligro,
html:not(:has(.cierre-nosotros)) .editar-video,
html:not(:has(.cierre-nosotros)) .editar-linea,
html:not(:has(.cierre-nosotros)) .editar-asa,
html:not(:has(.cierre-nosotros)) .editar-clip,
html:not(:has(.cierre-nosotros)) .editar-agregar,
html:not(:has(.cierre-nosotros)) .editar-elector,
html:not(:has(.cierre-nosotros)) .editar-elector-item,
html:not(:has(.cierre-nosotros)) .editar-perilla input,
html:not(:has(.cierre-nosotros)) .editar-lienzo,
html:not(:has(.cierre-nosotros)) .editar-imagen-listo,
html:not(:has(.cierre-nosotros)) .editar-onda,
html:not(:has(.cierre-nosotros)) .recorte-marco,
html:not(:has(.cierre-nosotros)) .recorte-tira,
html:not(:has(.cierre-nosotros)) .recorte-elegida,
html:not(:has(.cierre-nosotros)) .recorte-aviso,
html:not(:has(.cierre-nosotros)) .facil-boton,
html:not(:has(.cierre-nosotros)) .viaje-saltar,
html:not(:has(.cierre-nosotros)) .manual-tecla,
html:not(:has(.cierre-nosotros)) .manual-resultado,
html:not(:has(.cierre-nosotros)) .manual-atajos a,
html:not(:has(.cierre-nosotros)) .manual-indice-seccion,
html:not(:has(.cierre-nosotros)) .manual-quien,
html:not(:has(.cierre-nosotros)) .manual-vistas,
html:not(:has(.cierre-nosotros)) .manual-vistas button,
html:not(:has(.cierre-nosotros)) .manual-visor-cerrar,
html:not(:has(.cierre-nosotros)) .manual-visor-lienzo img,
html:not(:has(.cierre-nosotros)) .manual-tira-boton,
html:not(:has(.cierre-nosotros)) .manual-ampliar { border-radius: 2px; }

html:not(:has(.cierre-nosotros)) .menu-cuenta,
html:not(:has(.cierre-nosotros)) .taller-pedido,
html:not(:has(.cierre-nosotros)) .presets-capas,
html:not(:has(.cierre-nosotros)) .sitio-espacios .cuenta-bloque,
html:not(:has(.cierre-nosotros)) .portada-prompt.con-medio-propio,
html:not(:has(.cierre-nosotros)) .cuenta-panel,
html:not(:has(.cierre-nosotros)) .soporte-bloque,
html:not(:has(.cierre-nosotros)) .presets-en-prompt,
html:not(:has(.cierre-nosotros)) .atajo-movimiento,
html:not(:has(.cierre-nosotros)) .seguir-con-menu,
html:not(:has(.cierre-nosotros)) .referencias-generacion,
html:not(:has(.cierre-nosotros)) .movimiento-paso,
html:not(:has(.cierre-nosotros)) .movimiento-motor,
html:not(:has(.cierre-nosotros)) .movimiento-kling,
html:not(:has(.cierre-nosotros)) .referencias-cara,
html:not(:has(.cierre-nosotros)) .vc-soltar,
html:not(:has(.cierre-nosotros)) .vc-tarjeta,
html:not(:has(.cierre-nosotros)) .vc-pausa,
html:not(:has(.cierre-nosotros)) .vc-video,
html:not(:has(.cierre-nosotros)) .insp-tarjeta-boton,
html:not(:has(.cierre-nosotros)) .insp-idea,
html:not(:has(.cierre-nosotros)) .insp-hoja,
html:not(:has(.cierre-nosotros)) .insp-reciente,
html:not(:has(.cierre-nosotros)) .insp-foto,
html:not(:has(.cierre-nosotros)) .insp-resultado-medio :is(video, img),
html:not(:has(.cierre-nosotros)) .modelo,
html:not(:has(.cierre-nosotros)) .contenido > .presets-seleccion,
html:not(:has(.cierre-nosotros)) .mc-menu,
html:not(:has(.cierre-nosotros)) .mc-visor,
html:not(:has(.cierre-nosotros)) .mc-aviso-flotante,
html:not(:has(.cierre-nosotros)) .denuncia-motivo,
html:not(:has(.cierre-nosotros)) .denuncia-campo :is(input, textarea),
html:not(:has(.cierre-nosotros)) .denuncia-gracias,
html:not(:has(.cierre-nosotros)) .recorte,
html:not(:has(.cierre-nosotros)) .facil,
html:not(:has(.cierre-nosotros)) .viaje-caja,
html:not(:has(.cierre-nosotros)) .viaje-destino,
html:not(:has(.cierre-nosotros)) .viaje-modo,
html:not(:has(.cierre-nosotros)) .ejemplo,
html:not(:has(.cierre-nosotros)) .manual-buscar-campo,
html:not(:has(.cierre-nosotros)) .manual-resultados,
html:not(:has(.cierre-nosotros)) .manual-ampliar,
html:not(:has(.cierre-nosotros)) .manual-sin-captura,
html:not(:has(.cierre-nosotros)) .manual-contacto,
html:not(:has(.cierre-nosotros)) .manual-visor { border-radius: 3px; }

html:not(:has(.cierre-nosotros)) .banda,
html:not(:has(.cierre-nosotros)) .pieza,
html:not(:has(.cierre-nosotros)) .portada-prompt,
html:not(:has(.cierre-nosotros)) .alterno-imagen img,
html:not(:has(.cierre-nosotros)) .biblio-vacia,
html:not(:has(.cierre-nosotros)) .cuenta-bloque,
html:not(:has(.cierre-nosotros)) .personaje-preset,
html:not(:has(.cierre-nosotros)) .personaje-dialogo,
html:not(:has(.cierre-nosotros)) .presets-capas,
html:not(:has(.cierre-nosotros)) .insp-dialogo,
html:not(:has(.cierre-nosotros)) .entrar-marco,
html:not(:has(.cierre-nosotros)) .montaje-escenas button,
html:not(:has(.cierre-nosotros)) .video-portada-control,
html:not(:has(.cierre-nosotros)) .manual-captura.es-celular .manual-ampliar { border-radius: 4px; }

html:not(:has(.cierre-nosotros)) .cita-void,
html:not(:has(.cierre-nosotros)) .movimiento-aviso,
html:not(:has(.cierre-nosotros)) .capas-linea-modo,
html:not(:has(.cierre-nosotros)) .preset-vista,
html:not(:has(.cierre-nosotros)) .preset-vista-cerca { border-radius: 0 2px 2px 0; }

html:not(:has(.cierre-nosotros)) .insp-dialogo { border-radius: 4px 4px 0 0; }
/* RADIOS-FIN */

/* ── Menos movimiento y colores forzados ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grieta-luz { animation: none !important; }
  /* Las luces de las pantallas internas (etapa 2) tampoco parpadean. */
  .contenido :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::after,
  .contenido > :is(.taller-con-capas, .vc-armado, .legal, .entrada--pagina)::after,
  .entrada--pagina::after,
  .pantalla-entrar .cuerpo::after { animation: none !important; will-change: auto; }
}
@media (forced-colors: active) {
  /* Sin la luz ni los dos tonos: el navegador pinta el texto. */
  .grieta-luz, html .barra::before, html .barra::after, html .pie-app::before, html .pie-app::after { display: none; }
  .contenido > .taller-con-capas > .taller-capas::after, .contenido > .vc-armado > .vc-tarjeta::after, html .pie-app-legal::after, .studio-portada #pie .pie-inferior::after { display: none; }
  .contenido :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::before,
  .contenido :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::after,
  .contenido > :is(.taller-con-capas, .vc-armado, .legal)::before,
  .contenido > :is(.taller-con-capas, .vc-armado, .legal)::after,
  .entrada--pagina::before, .entrada--pagina::after,
  .pantalla-entrar .cuerpo::before, .pantalla-entrar .cuerpo::after { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIN CURSIVA, LETRAS MODERNAS (14 y 15/10/2026)
   ───────────────────────────────────────────────────────────────────────────
   Pedidos del dueño: «la letra cursiva o así medio inclinada no va, tiene que
   ser letras de impacto, letras de editorial» (14/10) y «te pedí mil veces
   que cambies la tipografía de la página y sigue en cursiva como si fuera
   letra de carta española de mi bisabuela… letras modernas en toda la
   página» (15/10).

   El 14/10 la cursiva se fue, pero en su lugar entró la Times New Roman, que
   es justamente una letra de carta. Desde el 15/10 no queda ninguna serif:
   las letras son las de arriba («Las letras»), impacto (Sofia Sans Extra
   Condensed 900) para títulos y marca, la misma en fino (300) para la segunda
   voz, y Schibsted Grotesk para todo lo demás. La palabra que iba en cursiva
   queda en la letra del título y se destaca con el rosa. Las reglas de cada
   pantalla ya piden la letra nueva (las variables --gr-titulo y --gr-voz); acá
   queda lo que es solo de La grieta.

   ALCANCE:
     · La red de «nada inclinado» (punto 1) vale para TODA la página, en las
       cuatro interfaces y también en /nosotros/.
     · Lo demás (mayúsculas, marca, menú del celular, el botón «Interfaz») es
       de La grieta: va detrás de :root:is([data-interfaz="grieta"], :not([data-interfaz])). Void, Nervo y Rabbit traen sus letras,
       rectas, en su interfaz.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Nada inclinado, en ningún lado ─────────────────────────────────────
   Las hojas ya no piden cursiva; esta red cubre lo que llegue de afuera (un
   <em> o un <i> de un script, un estilo de un navegador). Con !important:
   ninguna regla, de ninguna interfaz, la vuelve a inclinar. */
html body,
html body *,
html body *::before,
html body *::after,
html body *::placeholder,
html body *::marker {
  font-style: normal !important;
}

/* ── 2 · Los títulos: impacto en mayúsculas ─────────────────────────────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(h1, h2),
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.entrada-titulo, .entrada-menu-titulo, .entrada-cajon-titulo, .videoclips-titulo, .personaje-crear-titulo, .insp-dialogo-titulo, .entrada-avance-titulo, .atajo-movimiento-titulo, .insp-avance-titulo, .insp-tarjeta-titulo, .recorte-titulo, .referencias-titulo-movimiento, .vc-tarjeta-titulo, .vc-prod-titulo, .vc-pausa h3, .vc-final h3, .insp-idea-texto h3, .manual-paso h3, .manual-resultado-titulo, .manual-visor-titulo, .studio-cabecera h2, .mc-vacio-grande) {
  text-transform: uppercase;
  letter-spacing: -.005em;
}
/* El peso escrito: SLT Impacto tiene uno solo (900) y lo dibuja aunque la
   regla pida 400; acá se dice el que se ve (los h1 y h2 ya lo toman de
   --gr-titulo-peso). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.marca.firma-editorial, .entrada-titulo, .entrada-menu-titulo, .entrada-cajon-titulo, .personaje-crear-titulo, .insp-dialogo-titulo, .pantalla-entrar .entrar-titulo, .entrada-precio strong, .entrada-ajustes-precio strong, .comprar-monto) {
  font-weight: 900;
}
/* La palabra destacada de cada título (el <em>): la misma letra, el mismo
   peso, la misma caja. La distingue el color que ya le da cada pantalla (rosa
   sobre el negro, rosa hondo sobre el hueso). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(h1, h2, h3, .entrada-titulo, .entrada-menu-titulo, .entrada-cajon-titulo) em {
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
/* Los títulos de los desplegables de la caja («SOUND tools»). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-titulo {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada-menu .entrada-menu-titulo.entrada-menu-titulo-chico { font-size: 20px; line-height: 1.1; }

/* ── 3 · La marca: «SWEET LITTLE TRAUMA» de impacto, «STUDIO» en fino ───────
   Grueso y fino de la misma letra, como el bloque de créditos de un afiche. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .marca.firma-editorial {
  font: 900 22px/24px var(--gr-impacto);
  letter-spacing: .03em;
  text-transform: uppercase;
  gap: .2em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .firma-editorial .marca-trauma { font-weight: 900; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .firma-editorial .marca-studio {
  font: 300 22px/24px var(--gr-impacto-fino);
  margin-left: .1em;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (min-width: 390px) and (max-width: 600px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra .marca.firma-editorial { font-size: 17.5px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra .marca .marca-studio { font-size: 17.5px; }
}
/* Por debajo de 390 px va sin «Studio» (menu.css), como antes, a 14 px: así
   entran «Empezar» y el menú (smoke-menu.js, de 320 a 414 px). */
@media (max-width: 389px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra .marca.firma-editorial { font-size: 14px; }
}

/* ── 4 · Los nombres chicos que iban en la letra de títulos ──────────────────
   El nombre de la cuenta y el del montaje (es el nombre que la persona le
   dio al proyecto, un <h1>): Schibsted 700, sin mayúsculas, así entra entero
   a 390 px. Repite el selector del punto 2 para ganarle. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) :is(.cuenta-panel .cuenta-panel-nombre, body.montar-pagina .montar-nombre) {
  font-family: var(--gr-texto);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ── 5 · El menú abierto del celular (pantallas): los destinos en impacto ── */
@media (max-width: 1180px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra.menu-visible .pestanas > a {
    font: 900 30px/1.1 var(--gr-impacto);
    letter-spacing: .005em;
    text-transform: uppercase;
  }
}

/* ── 6 · El botón «Interfaz», sin el recuadro ───────────────────────────────
   El único recuadro que tenía era el contorno del foco (2 px rosa, a 3 px):
   aparece con el teclado y, en Safari, también después de elegir con el mouse
   (el foco vuelve al botón por código). Se saca en todos los estados y
   tamaños. El foco sigue viéndose, pero sin caja: la palabra subrayada en
   rosa, 2 px (más de 3:1 contra el negro y contra el hueso, como pide
   shared/interfaces/LEEME.md, 3.1.6). En la portada, al final de
   portada-grieta.css. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .interfaz-boton,
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .interfaz-boton:is(:focus, :focus-visible, :hover, :active) {
  outline: none;
  border: 0;
  box-shadow: none;
  background: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .interfaz-boton:focus-visible {
  color: var(--tinta);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--gr-rosa);
  text-underline-offset: .38em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra.menu-visible .menu-movil-interfaz .interfaz-boton:focus-visible { text-decoration-color: var(--gr-rosa-hueso); }

/* ═══════════════════════════════════════════════════════════════════════════
   7 · LA PARTE PRINCIPAL PARTIDA, IGUAL EN 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». Solo La grieta: las
   otras tres interfaces siguen con su reparto.
   El reparto está en un solo lugar (--gr-reparto, arriba de «Las variables de
   siempre»): el negro lleva el 38 % y el papel el 62 %. La cabecera de cada
   pantalla lo toma de ahí; acá solo se le da el tamaño que le toca a un lado
   de papel más ancho: la cabecera es más alta, el título cabe en la columna
   angosta del negro y la bajada, en el papel, va más grande y en tinta.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 981px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) {
    min-height: clamp(250px, 22vw, 330px);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) :is(h1, h2) {
    font-size: clamp(44px, 5.2vw, 84px);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto) {
    font: 400 clamp(22px, 2.1vw, 32px)/1.28 var(--gr-voz);
    max-width: 21em;
  }
}

/* ── En el celular y la tableta: la misma cabecera, partida a lo ancho ───────
   «En el celular, que se mantenga la idea con la grieta horizontal.» El negro
   queda arriba (rótulo y título) y el papel abajo (la bajada y lo que la
   acompaña), con la grieta de luz acostada en el borde de arriba del papel: el
   mismo borde del papel mal cortado de «La luz acostada». Sin JavaScript: el
   papel lo pinta la propia bajada (hacia afuera, a todo el ancho), y todo lo
   del lado del papel va al final de la cabecera (order) para que el corte caiga
   entre el título y la bajada, en el orden en que cada pantalla las escribió.
   Una cabecera sin bajada (/mis-creaciones/, /galeria/) cierra con una tira
   de papel. El papel lleva un poco más de la mitad del alto. */
@media (max-width: 980px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) {
    --gr-pd: max(var(--gr-izq), 22px);
    background: var(--gr-noche) var(--gr-grano-luz);
    padding-block: 28px 0;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado)::after { content: none; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(> :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto), > * > :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto))) { padding-bottom: 150px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(> :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto), > * > :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)))::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(> :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto), > * > :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)))::after { content: ''; position: absolute; inset: auto 0 0 0; pointer-events: none; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(> :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto), > * > :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)))::before {
    z-index: 0; height: 120px;
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
    -webkit-mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    -webkit-mask-position: left 0 top 0, left bottom; mask-position: left 0 top 0, left bottom;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(> :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto), > * > :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)))::after {
    z-index: 1; height: 60px; bottom: 60px;
    background: var(--gr-tira-h-luz) left 0 top 0 / 2400px 60px repeat-x;
    filter: var(--gr-brillo-corto);
  }
  /* La bajada: el papel, con la luz acostada en su borde de arriba. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto) {
    order: 10;
    position: relative; z-index: 3;
    justify-self: stretch;
    margin: 44px 0 0;
    padding: 12px 0 34px;
    min-height: clamp(210px, 32svh, 290px);
    font: 400 clamp(21px, 5.8vw, 28px)/1.3 var(--gr-voz);
    letter-spacing: -.01em;
    color: var(--gr-tinta);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)::before {
    content: '';
    position: absolute; z-index: -1;
    inset: -30px calc(-1 * var(--gr-pd)) -1px calc(-1 * var(--gr-izq));
    pointer-events: none;
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
    -webkit-mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    -webkit-mask-position: left 0 top 0, left bottom; mask-position: left 0 top 0, left bottom;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)::after {
    content: '';
    position: absolute; z-index: 1;
    inset: -30px calc(-1 * var(--gr-pd)) auto calc(-1 * var(--gr-izq));
    height: 60px;
    pointer-events: none;
    background: var(--gr-tira-h-luz) left 0 top 0 / 2400px 60px repeat-x;
    filter: var(--gr-brillo-corto);
  }
  /* Lo que acompaña a la bajada, en el mismo papel y a continuación. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.presets-ayuda, .legal-fecha, .comprar-saldo, .banda-botones, .manual-datos, .catalogo-cerrado-volver) {
    order: 11;
    position: relative; z-index: 3;
    justify-self: stretch;
    margin: 0;
    padding: 0 0 30px;
    color: var(--gr-tinta-2);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.presets-ayuda, .legal-fecha, .comprar-saldo, .banda-botones, .manual-datos, .catalogo-cerrado-volver)::before {
    content: '';
    position: absolute; z-index: -1;
    inset: 0 calc(-1 * var(--gr-pd)) -1px calc(-1 * var(--gr-izq));
    pointer-events: none;
    background: var(--gr-hueso) var(--gr-grano);
  }
}

/* ── Los documentos largos: la cabecera partida y el texto sobre negro ───────
   Antes el papel bajaba a la derecha a todo el alto, con la luz de la cabecera
   a 62 %. Con el negro a 38 % el texto de 68 caracteres no entra en esa
   columna, así que en La grieta el documento tiene la misma cabecera que las
   demás pantallas (negro con el título, papel con la bajada y la fecha) y, de
   ahí para abajo, el texto a todo el ancho que le toca, sobre negro. Las otras
   interfaces conservan su papel a todo el alto. */
@media (min-width: 981px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido > .legal::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido > .legal::after { content: none; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido > .legal > .legal-cabecera { background: var(--gr-hueso) var(--gr-grano); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido > .legal > .legal-cabecera::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido > .legal > .legal-cabecera::after { display: block; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .legal :is(.legal-seccion, .legal-indice, .denuncia-form, .denuncia-gracias, .denuncia-alterno) { max-width: 68ch; }
}

/* ── /entrar/, en el celular y la tableta: el título sobre negro y el formulario
   sobre papel ──────────────────────────────────────────────────────────────
   Lo mismo que las cabeceras: el negro arriba, con el rótulo, el título y la
   bajada; el papel abajo, con el formulario y el enlace para cambiar de modo,
   con la luz acostada en su borde de arriba. El formulario usa los tonos del
   papel (los mismos de «Tonos: sobre negro y sobre hueso»): los campos, las
   etiquetas y los avisos se leen solos sobre el hueso. Hasta 1199 px, la misma
   pantalla apilada (la columna del negro, a 38 %, no alcanza para el formulario
   de una tableta apaisada); arriba, el negro y el papel lado a lado. */
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .cuerpo {
    grid-template-columns: minmax(0, 1fr);
    place-items: start stretch;
    overflow: clip;
    padding-inline: clamp(20px, 5vw, 48px);
    padding-bottom: 0;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .cuerpo::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .cuerpo::after { content: none; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-caja { justify-self: stretch; max-width: none; width: 100%; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar :is(.entrar-form, .entrar-acciones) {
    position: relative; z-index: 1; isolation: isolate;
    margin-top: 56px;
    padding: 24px 0 40px;   /* (16/10/2026) 6 → 24 px: la etiqueta «Correo» tocaba el borde rasgado del papel */
    max-width: 560px;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar :is(.entrar-form, .entrar-acciones)::before {
    content: '';
    position: absolute; z-index: -1;
    inset: -30px -100vw -3000px -100vw;
    pointer-events: none;
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
    -webkit-mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    -webkit-mask-position: left 0 top 0, left bottom; mask-position: left 0 top 0, left bottom;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar :is(.entrar-form, .entrar-acciones)::after {
    content: '';
    position: absolute; z-index: 1;
    inset: -30px -100vw auto -100vw;
    height: 60px;
    pointer-events: none;
    background: var(--gr-tira-h-luz) left 0 top 0 / 2400px 60px repeat-x;
    filter: var(--gr-brillo-corto);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar :is(.entrar-form, .entrar-acciones, .entrar-cambio, .entrar-ayuda, .entrar-nota, .entrar-rescate) {
  --tono-tinta: var(--gr-tinta);
  --tono-fondo: var(--gr-hueso);
  --tono-tenue: var(--gr-tinta-2);
  --tono-acento: var(--gr-rosa-hueso);
  --tono-linea: var(--gr-linea-hueso);
  --tono-foco: var(--gr-rosa-hueso);
  --tinta: var(--gr-tinta);
  --tinta-dim: #4A3F37;
  --tinta-faint: var(--gr-tinta-2);
  --noche-tinta: var(--gr-tinta);
  --noche-tinta-dim: #4A3F37;
  --noche-tinta-faint: var(--gr-tinta-2);
  --acento: var(--gr-rosa-hueso);
  --rosa: var(--gr-rosa-hueso);
  --rojo: var(--gr-rosa-hueso);
  --rosa-fuerte: var(--gr-rosa-hueso);
  --acento-ink: var(--gr-hueso);
  --acento-soft: color-mix(in oklch, var(--gr-rosa-hueso) 8%, transparent);
  --linea: var(--gr-linea-hueso);
  --linea-fuerte: var(--gr-linea-hueso-fuerte);
  --linea-noche: var(--gr-linea-hueso);
  --capa: rgba(22, 17, 14, .05);
  --capa-fuerte: rgba(22, 17, 14, .09);
  --g0: var(--gr-hueso);
  --g1: var(--gr-hueso-2);
  --g2: var(--gr-hueso);
  --g3: var(--gr-hueso-2);
  --g4: #D9CCB6;
  --g5: #DDD1BC;
  --g6: rgba(22, 17, 14, .18);
  --g7: rgba(22, 17, 14, .32);
  --g8: #6E6258;
  --g9: var(--gr-tinta-2);
  --g10: #4A3F37;
  --papel-90: rgba(236, 227, 211, .96);
  --papel-97: rgba(236, 227, 211, .98);
  --papel-98: rgba(236, 227, 211, .99);
  --papel-99: var(--gr-hueso);
  --ambar: #8A5300;
  --verde: #2F6B4F;
  --e-tinta: var(--gr-tinta);
  --e-tenue: var(--gr-tinta-2);
  --e-acento: var(--gr-rosa-hueso);
  --e-acento-tinta: var(--gr-hueso);
  --e-linea: var(--gr-linea-hueso-fuerte);
  --e-linea-suave: var(--gr-linea-hueso);
  --e-panel: var(--gr-hueso-2);
  --e-panel-2: var(--gr-hueso-2);
  --e-error: var(--gr-error-hueso);
  --e-ok: #2F6B4F;
  color-scheme: light;
  color: var(--gr-tinta);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-form .entrar-etiqueta { color: var(--gr-tinta-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-form .entrar-campo input { background: var(--gr-hueso-2); border-color: var(--gr-linea-hueso-fuerte); color: var(--gr-tinta); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-form .entrar-campo input::placeholder { color: var(--gr-tinta-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-form .entrar-campo input:focus { background: var(--gr-hueso); border-color: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-form .entrar-campo input:-webkit-autofill { -webkit-text-fill-color: var(--gr-tinta); box-shadow: inset 0 0 0 100px var(--gr-hueso-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-cambio { position: relative; z-index: 1; margin: 0; padding: 0 0 36px; max-width: 560px; border-top: 0; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-cambio::before { content: none; }
}

/* ── /crear/, en el celular y la tableta: el título sobre negro y la caja sobre
   papel ────────────────────────────────────────────────────────────────────
   Como la puerta de la portada: el negro arriba con el título; el papel abajo,
   con la luz acostada en su borde, y la caja como una tarjeta de negro encima
   (todo lo que ya está pensado para leerse sobre negro queda igual). «Haz tu
   videoclip» va sobre el papel, en tinta. Hasta 1199 px (la columna del negro, a
   38 %, no le alcanza a la caja de una tableta apaisada). */
@media (min-width: 981px) and (max-width: 1199px) {
  /* Lo que la compu le daba a la grilla de dos columnas, afuera. */
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada.entrada--pagina { display: block; min-height: 0; padding: clamp(30px, 4vw, 44px) max(var(--gr-izq), 28px) 0 var(--gr-izq); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-titulo { font-size: clamp(48px, 14vw, 96px); line-height: .94; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-videoclip { justify-self: auto; max-width: none; }
}
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada.entrada--pagina { overflow: clip; --gr-pd: max(var(--gr-izq), 28px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina::after { content: none; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo {
    position: relative; z-index: 2; isolation: isolate;
    margin-top: 48px;
    padding: 4px 0 8px;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo::before {
    content: '';
    position: absolute; z-index: -1;
    inset: -30px calc(-1 * var(--gr-pd)) -3000px calc(-1 * var(--gr-izq));
    pointer-events: none;
    background: var(--gr-hueso) var(--gr-grano);
    -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-h-abajo), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-x, no-repeat; mask-repeat: repeat-x, no-repeat;
    -webkit-mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    mask-size: 2400px 60px, 100% max(0px, calc(100% - 60px));
    -webkit-mask-position: left 0 top 0, left bottom; mask-position: left 0 top 0, left bottom;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo::after {
    content: '';
    position: absolute; z-index: 1;
    inset: -30px calc(-1 * var(--gr-pd)) auto calc(-1 * var(--gr-izq));
    height: 60px;
    pointer-events: none;
    background: var(--gr-tira-h-luz) left 0 top 0 / 2400px 60px repeat-y;
    background-repeat: repeat-x;
    filter: var(--gr-brillo-corto);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-caja {
    /* La tarjeta sale 12 px de cada lado hacia afuera: lo de adentro mide lo mismo que sin ella (las cuatro pestañas entran en 320 px). */
    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])) .entrada--pagina .entrada-pruebas { --e-tinta: var(--gr-tinta); --e-acento: var(--gr-rosa-hueso); position: relative; z-index: 2; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-pruebas-rotulo { color: var(--gr-amarillo-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-prueba { text-decoration-color: var(--gr-linea-hueso-fuerte); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-videoclip { position: relative; z-index: 2; margin-top: 26px; color: var(--gr-tinta); --tono-foco: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-videoclip > svg { background: var(--gr-rosa-hueso); color: var(--gr-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-videoclip-texto { color: var(--gr-tinta); border-bottom-color: var(--gr-rosa-hueso); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-videoclip-bajada { color: var(--gr-tinta-2); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-videoclip:focus-visible { outline-color: var(--gr-rosa-hueso); }
}

/* ── El amarillo patito en la parte principal ────────────────────────────────
   Una sola marca por pantalla, con el mismo criterio en todas:
     1 · si el título trae una palabra destacada (la que iba en rosa), esa
         palabra va en patito: de letra sobre el negro; sobre el papel (la
         puerta de la portada), con el patito detrás y la tinta encima;
     2 · si el título no la trae, la primera línea de la bajada va resaltada
         (patito detrás, tinta encima) sobre el papel. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado) :is(h1, h2) em { color: var(--gr-patito); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .contenido:not(:has(.cierre-nosotros)) :is(.portada-prompt, .cuenta-cabecera, .biblio-cabecera, .mc-cabecera, .vc-cabecera, .insp-cabeza, .fact-banda, .banda, .modelos-cabecera, .legal-cabecera, .comprar-cabecera, .manual-cabecera, .catalogo-cerrado):not(:has(h1 em, h2 em)) :is(.portada-cuerpo > .bajada, .herram-bajada, .vc-bajada, .insp-bajada, .fact-bajada, .modelos-bajada, .legal-bajada, .comprar-bajada, .banda-cuerpo > p:not(.kicker), .cuenta-cabecera > .soporte-entradilla, .manual-bajada, .mc-bajada, .biblio-cabecera > p, .catalogo-cerrado-texto)::first-line {
  background: var(--gr-patito);
  color: var(--gr-tinta);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .entrar-titulo em { color: var(--gr-patito); }
/* «FLUIR», «FLOW», «SCORRA» en /crear/ (23/10/2026, tanda 2). Pedido del dueño del 23/10: «no entiendo
   por qué fluir tiene esa letra de mierda, y está pintado de amarillo». En la portada ya iba como «DÉJALO»
   (portada-grieta.css); en /crear/ seguía en el patito (#FFC53D). Ahora, igual que en la portada: la misma
   letra, el mismo tamaño y el mismo color que el resto del título, sin amarillo, en los tres idiomas. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-titulo em {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* /entrar/ en la compu: la columna del negro termina 64 px antes de la luz (el
   borde de papel mal cortado entra hasta unos 30 px y los campos no pueden
   tocarlo). */
@media (min-width: 1200px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .pantalla-entrar .cuerpo {
    grid-template-columns: minmax(0, calc(var(--gr-reparto-v) - 64px - clamp(20px, 4vw, 64px))) minmax(0, 1fr);
  }
}

/* /crear/ entre 1200 y 1439 px: la columna del negro (38 %) mide menos de lo que
   necesitan las cinco pestañas de la caja a 15 px. Más angostas, y si aun así no
   entran bajan de renglón en vez de esconderse en una tira que se desliza (la
   puerta de la portada hace lo mismo, en portada-grieta.css). */
@media (min-width: 1200px) and (max-width: 1439px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .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])) .entrada--pagina .entrada-tipo-auto { padding-left: 0; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos { flex-wrap: wrap; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .entrada-tipos-pista { flex-wrap: wrap; overflow: visible; }
}

/* El logo en la barra (23/10/2026): el arcoíris partido del PNG oficial
   (logos/slt-arcoiris-menu.png, recortado de slt-arcoiris-original.png), chico,
   delante del nombre. estetica.css escondía toda imagen de la marca.
   Alineado con la escritura («fijate que el logo quede alineado con la
   escritura»): los tubos van de la línea de las letras al alto de las
   mayúsculas de «SWEET LITTLE TRAUMA», en las cuatro interfaces y en cada
   ancho. Medido en el PNG (alfa > 160), los tubos ocupan del 2,8 % al 94,3 %
   del alto: el 91,5 %. Por eso:
   · va por la línea de base (`align-self: baseline`: el borde de abajo de la
     imagen cae en la línea de las letras; la marca ya alinea por la base en
     las cuatro) y baja el 5,66 % de su alto, lo transparente bajo los tubos.
     Centrada, como antes, caía hasta 1 px más abajo o más arriba según la letra;
   · el alto es el de las mayúsculas de cada letra dividido 0,915 (medido en
     Chrome con el canvas): SLT Impacto 0,655 em → .716 em; Void Unbounded
     0,75 → .82; Nervo Titulo 0,703 → .768; Rabbit Marca 0,66 → .721.
   En em, para que siga a la letra en cada barra y en el celular. Medido de 320
   a 2560 px, en la portada y en /crear/, en los tres idiomas: 0,02 px de
   diferencia como mucho, arriba y abajo. */
:is(#nav, .barra) .marca .marca-arcoiris {
  --logo-alto: .716em;
  display: block;
  align-self: baseline;
  flex: none;
  position: relative;
  top: calc(var(--logo-alto) * .0566);
  width: auto;
  height: var(--logo-alto);
  margin: 0 .28em 0 0;
}
:root[data-interfaz="void"] :is(#nav, .barra) .marca .marca-arcoiris { --logo-alto: .82em; }
:root[data-interfaz="nervo"] :is(#nav, .barra) .marca .marca-arcoiris { --logo-alto: .768em; }
:root[data-interfaz="rabbit"] :is(#nav, .barra) .marca .marca-arcoiris { --logo-alto: .721em; }
/* Void, por debajo de 390 px, apila la marca («Sweet Little» arriba y «Trauma»
   abajo, en su interfaz.css): en columna, el logo quedaba solo arriba de todo.
   En una grilla de dos columnas queda al lado de «Sweet Little», a la altura
   de sus mayúsculas, y «Trauma» debajo del nombre. */
@media (max-width: 389px) {
  html:root[data-interfaz="void"] :is(.barra, .studio-portada #nav) .marca.firma-editorial {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 1px 0;
  }
  html:root[data-interfaz="void"] :is(.barra, .studio-portada #nav) .marca > .marca-arcoiris { grid-area: 1 / 1; }
  html:root[data-interfaz="void"] :is(.barra, .studio-portada #nav) .marca > .marca-sweet { grid-area: 1 / 2; }
  html:root[data-interfaz="void"] :is(.barra, .studio-portada #nav) .marca > .marca-trauma { grid-area: 2 / 2; }
  html:root[data-interfaz="void"] :is(.barra, .studio-portada #nav) .marca > .marca-studio { grid-area: 3 / 2; }
}

/* ── La barra de las pantallas con el logo (23/10/2026) ──────────────────────
   El logo suma unos 43 px a la marca. Medido en las cuatro interfaces y los
   tres idiomas, de 320 a 2560 px (smoke-interfaces.js, sección 9, y
   smoke-menu.js miden una parte), hacía falta lugar en dos franjas: */

/* Hasta 430 px, sin «Studio» (antes, solo por debajo de 390): con el logo, de
   390 a 430 px «Studio» se cortaba contra «Empezar» en inglés («STUDI», 20 px a
   390 en La grieta, 31 en Nervo). Lo mismo que la barra de la portada
   (portada-grieta.css), en los tres idiomas. */
@media (max-width: 430px) {
  html .barra .marca .marca-studio { display: none; }
}

/* De 601 a 760 px: el botón del menú ya quedaba afuera de la pantalla antes del
   logo (hasta 640 px en La grieta, hasta 690 en Nervo) y con el logo, hasta
   760. Es la misma fila del celular más el idioma e «Iniciar sesión» (shell.js
   los saca de la barra recién a 600 px): la marca va del tamaño que tiene de
   390 a 600 px, «Empezar gratis» pasa a «Empezar» (como de 1281 a 1400 px, en
   menu.css) y los espacios son los del celular. */
@media (min-width: 601px) and (max-width: 760px) {
  html .barra { gap: 8px; padding-inline: 12px; }
  html .barra .boton-empezar .empezar-largo { display: none; }
  html .barra .boton-empezar .empezar-corto { display: inline; }
  html .barra .barra-acciones > .boton-empezar { padding-inline: 14px; }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra .marca.firma-editorial,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .barra .marca .marca-studio { font-size: 17.5px; }
  html:root[data-interfaz="void"] .barra .marca.firma-editorial { font-size: 10px; }
  html:root[data-interfaz="void"] .barra .marca .marca-studio { font-size: 8.5px; }
  html:root[data-interfaz="nervo"] .barra > .marca.firma-editorial { font-size: 14.5px; }
  html:root[data-interfaz="nervo"] .barra > .marca .marca-studio { font-size: 16.5px; }
  html:root[data-interfaz="rabbit"] .barra .marca.firma-editorial { font-size: 16px; }
}

/* De 981 a 1199 px, con la Tienda en la barra (23/10/2026, al juntar el
   logo con el cambio 18). A la mañana, con cinco entradas, esta franja era la
   barra de la compu y llevaba sus propias medidas para que entrara el logo: la
   marca y las acciones a su ancho, las pestañas a 7 px (5 px hasta 1050). Con
   la Tienda como sexta entrada el botón de menú va hasta 1180 px (estetica.css,
   menu.css, shell.js), así que de 981 a 1180 esas medidas ya no tienen barra
   que acomodar, y en el menú abierto le cambiaban el aire a las entradas. De
   1181 a 1199 manda la grilla del cambio 18 (estetica.css: los costados no
   bajan de lo que ocupan) con el ajuste de menu.css (entradas a 11 px, 20 px a
   los costados, la cuenta cortada a 100 px). Medido con el logo en las cuatro
   interfaces y los tres idiomas, con y sin sesión: no se pisa nada y entre la
   marca, el menú y las acciones quedan 14 px o más (el hueco de la grilla). Lo
   único que no entraba es el italiano con sesión y un nombre largo, de 1181 a
   1195: la fila se comía el margen derecho (quedaban 7 px en La grieta y 3 en
   Nervo, en vez de 20). Ahí el nombre va cortado a 80 px en vez de 100, la
   misma salida que usa el cambio 18 para la cuenta; las letras, el logo y la
   Tienda no cambian. */
@media (min-width: 1181px) and (max-width: 1199px) {
  :root:lang(it) .barra .cuenta-disparador { max-width: 80px; }
}

/* De 320 a 350 px, la marca apilada (23/10/2026). Con el logo, en inglés
   «Get started» pisaba la marca en la portada (24 px a 320 en La grieta, 11 en
   Nervo, 7 en Rabbit) y en la barra de las pantallas cortaba el final de
   «Trauma» (6, 22 y 3 px); en castellano entraba con 3 a 6 px de aire. El
   agente de la barra probó dos salidas (_trabajo/barra/propuesta-320-en/) y
   esta es la B, la recomendada: por debajo de 351 px la marca va en dos
   renglones, «SWEET LITTLE» arriba y «TRAUMA» abajo, con el logo al lado de
   «SWEET LITTLE» y a la altura de sus mayúsculas, como Void por debajo de 390
   (Void ya va apilada: queda con la suya). La letra no se achica. Vale para las
   dos barras: la de la portada (#nav) y la de las pantallas. */
@media (max-width: 350px) {
  html:root:not([data-interfaz="void"]) :is(.barra, .studio-portada #nav) .marca.firma-editorial {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: baseline;
    gap: 0;
    line-height: 1.05;
  }
  html:root:not([data-interfaz="void"]) :is(.barra, .studio-portada #nav) .marca > span { line-height: 1.05; }
  html:root:not([data-interfaz="void"]) :is(.barra, .studio-portada #nav) .marca > .marca-arcoiris { grid-area: 1 / 1; }
  html:root:not([data-interfaz="void"]) :is(.barra, .studio-portada #nav) .marca > .marca-sweet { grid-area: 1 / 2; }
  html:root:not([data-interfaz="void"]) :is(.barra, .studio-portada #nav) .marca > .marca-trauma { grid-area: 2 / 2; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   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».

   En La grieta ningún botón va encerrado: sin borde, sin filete, sin fondo y
   sin sombra. El botón es la palabra, en marfil sobre el negro y en tinta
   sobre el papel (sale de --tinta, --e-tinta o --pc-tinta, que cada tono
   redefine). Sigue siendo el mismo <button> o <a>, con 44 px de alto o más
   para tocar: el relleno está, no se ve.
     · La acción principal (Seguir, Generar, Descargar, «Sí, gastar N», Entrar,
       Pedir cotización…) va en versalitas espaciadas y en 700: se distingue
       por la letra, no por una caja.
     · Las otras acciones, en 600 con un subrayado fino.
     · Las opciones que se marcan (presets, filtros, motores, formatos): el
       texto en tono bajo; la elegida, entera, en 650 y subrayada de 2 px.
     · Al pasar el cursor el subrayado se completa y la palabra toma un brillo
       suave. Con el teclado, un anillo suave del color de la letra (el foco no
       se saca nunca). Lo apagado queda más tenue.
     · «Empezar» de la barra, «Empezar ahora», «Empezar gratis» y «Hacer un
       videoclip»: SOLO la palabra, sin flecha en círculo y sin fondo.
   Los campos (textarea, input, select) siguen siendo campos; los avisos y las
   tarjetas que no son botones no se tocan; las píldoras redondas y los íconos
   en círculo tampoco (no son una caja cuadrada). Vale solo para La grieta
   —Void, Nervo y Rabbit tienen su diseño propio— y no entra en /nosotros/.
   Lo de la portada (su barra, su «Seguir» de dos caras, .texto-accion) ya era
   texto desde el 12/10/2026 y queda como está; sus otros botones están en
   portada-grieta.css, «Los botones son la palabra». Relevamiento con las
   capturas de antes y de después: _trabajo/botones/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Todos: sin caja, 44 px para tocar, el foco como anillo suave ──────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-acento, .boton-borde, .boton-claro, .boton-luz, .boton-peligro,
  .entrada-seguir, .entrada-generar, .entrada-boton, .pc-boton, .crear-fijo,
  .montar-boton, .presets-abrir, .presets-usar, .presets-quitar, .generar-preset-nuevo, .capas-volver,
  .ejemplo-ver-todo, .facil-boton, .viaje-saltar, .insp-boton, .insp-mas, .catalogo-cerrado-volver,
  .denuncia-enviar, .biblio-editar, .modelo-muestra-boton, :where(.entrar-rescate) button, .mc-aviso-accion,
  .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
  .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op,
  .montar-carril-vacio
):where(:not(.texto-accion)) {
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: none;
  box-shadow: none;
  filter: none;
  text-decoration-skip-ink: auto;
  transition: color .2s ease, opacity .2s ease, text-decoration-color .2s ease, text-shadow .3s ease;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-acento, .boton-borde, .boton-claro, .boton-luz, .boton-peligro,
  .entrada-seguir, .entrada-generar, .entrada-boton, .pc-boton, .crear-fijo,
  .montar-boton, .presets-abrir, .presets-usar, .presets-quitar, .generar-preset-nuevo, .capas-volver,
  .ejemplo-ver-todo, .facil-boton, .viaje-saltar, .insp-boton, .insp-mas, .catalogo-cerrado-volver,
  .denuncia-enviar, .biblio-editar, .modelo-muestra-boton, :where(.entrar-rescate) button, .mc-aviso-accion,
  .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
  .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op,
  .montar-carril-vacio
):where(:not(.texto-accion)):is(:hover, :active, :focus-visible, [aria-expanded="true"]) {
  border-color: transparent;
  background: none;
  box-shadow: none;
  filter: none;
}
/* Al pasar el cursor: el subrayado entero y un brillo suave del color de la letra. */
@media (hover: hover) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
    .boton-acento, .boton-borde, .boton-claro, .boton-luz, .boton-peligro,
    .entrada-seguir, .entrada-generar, .entrada-boton, .pc-boton, .crear-fijo,
    .montar-boton, .presets-abrir, .presets-usar, .presets-quitar, .generar-preset-nuevo, .capas-volver,
    .ejemplo-ver-todo, .facil-boton, .viaje-saltar, .insp-boton, .insp-mas, .catalogo-cerrado-volver,
    .denuncia-enviar, .biblio-editar, .modelo-muestra-boton, :where(.entrar-rescate) button, .mc-aviso-accion,
    .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
    .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op,
    .montar-carril-vacio
  ):where(:not(.texto-accion, :disabled, [aria-disabled="true"])):hover {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-shadow: 0 0 18px color-mix(in oklch, currentColor 42%, transparent);
  }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-acento, .boton-borde, .boton-claro, .boton-luz, .boton-peligro,
  .entrada-seguir, .entrada-generar, .entrada-boton, .pc-boton, .crear-fijo,
  .montar-boton, .presets-abrir, .presets-usar, .presets-quitar, .generar-preset-nuevo, .capas-volver,
  .ejemplo-ver-todo, .facil-boton, .viaje-saltar, .insp-boton, .insp-mas, .catalogo-cerrado-volver,
  .denuncia-enviar, .biblio-editar, .modelo-muestra-boton, :where(.entrar-rescate) button, .mc-aviso-accion,
  .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
  .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op,
  .montar-carril-vacio
):where(:not(.texto-accion)):focus-visible {
  /* El foco del teclado: el subrayado grueso y entero, el brillo, y un anillo
     tenue y redondeado alrededor (no un recuadro: 2 px al 45 %, 10 px de radio). */
  outline: 2px solid color-mix(in oklch, currentColor 45%, transparent);
  outline-offset: 5px;
  border-radius: 10px;
  text-decoration-line: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: currentColor;
  text-shadow: 0 0 18px color-mix(in oklch, currentColor 42%, transparent);
}
/* Apagado: más tenue y sin subrayado; sigue diciendo lo que haría. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-acento, .boton-borde, .boton-claro, .boton-luz, .boton-peligro,
  .entrada-seguir, .entrada-generar, .entrada-boton, .pc-boton,
  .montar-boton, .presets-abrir, .presets-usar, .presets-quitar, .generar-preset-nuevo, .capas-volver,
  .facil-boton, .insp-boton, .insp-mas, .denuncia-enviar, .capa-ficha, .generar-pronto-chip,
  .mc-filtro, .montar-opcion, .entrada-opcion, .entrada-menu-filtro, .comprar-periodo-op
):is(:disabled, [aria-disabled="true"]) {
  opacity: .42;
  cursor: not-allowed;
  text-decoration-color: transparent;
  text-shadow: none;
}

/* ── 2 · La acción principal: versalitas espaciadas, 700 ───────────────────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-acento, .boton-luz, .entrada-seguir, .entrada-generar, .entrada-boton-acento,
  .pc-boton-fuerte, :where(.montar-boton).acento, .denuncia-enviar, .presets-usar
):where(:not(.texto-accion, .boton-empezar)) {
  padding-inline: 4px;
  color: var(--tinta);
  font-family: var(--gr-texto);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration-line: none;
  text-decoration-thickness: 2px;
  text-underline-offset: .5em;
}
/* El espacio de después de la última letra no corre la palabra de su lugar. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.entrada-generar) { text-indent: .2em; }

/* ── 3 · Las otras acciones: la palabra con un subrayado fino ─────────────── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .boton-borde, .boton-claro, .boton-peligro, .entrada-boton-borde, .pc-boton:where(:not(.pc-boton-fuerte)),
  .montar-boton:where(:not(.acento)), .presets-abrir, .presets-quitar, .generar-preset-nuevo, .capas-volver,
  .ejemplo-ver-todo, .facil-boton, .viaje-saltar, .insp-boton, .insp-mas, .catalogo-cerrado-volver,
  .biblio-editar, .modelo-muestra-boton, :where(.entrar-rescate) button, .mc-aviso-accion, .montar-carril-vacio
):where(:not(.texto-accion)) {
  padding-inline: 2px;
  color: var(--tinta);
  font-family: var(--gr-texto);
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .34em;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
}

/* ── 4 · Las opciones que se marcan ──────────────────────────────────────────
   El tono bajo; al pasar, entera; la elegida, entera, en 650 y con 2 px de
   subrayado. Sin la caja, la separación entre palabras la da el relleno de
   los costados (no se ve) y el hueco de la fila. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
  .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op
) {
  padding-inline: 6px;
  color: var(--tinta-dim);
  font-weight: 500;
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: .38em;
  text-decoration-color: color-mix(in oklch, currentColor 45%, transparent);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .capa-ficha, .generar-pronto-chip, .mc-filtro, .montar-subpestana, .montar-opcion, .montar-formato-rapido, :where(.montaje-escenas) button,
  .entrada-opcion, .entrada-menu-filtro, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op
):is([aria-pressed="true"], [aria-selected="true"], [aria-checked="true"], [aria-current="true"], .elegida, .elegido, .activo, .activa, :where(:has(input:checked))) {
  color: var(--tinta);
  font-weight: 650;
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: currentColor;
}
/* Los de la caja y los de su desplegable toman sus tonos (--e-*). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.entrada-opcion, .entrada-menu-filtro) { color: var(--e-tenue); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.entrada-opcion, .entrada-menu-filtro):is([aria-pressed="true"], :hover) { color: var(--e-tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-opcion[aria-pressed="true"] :is(.entrada-opcion-precio, .entrada-opcion-plan, .entrada-opcion-detalle) { color: var(--e-tenue); opacity: 1; }
/* El punto de la opción que viene puesta queda: es la marca de la radio. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-opcion[aria-pressed="true"] .entrada-punto { border-color: currentColor; background: currentColor; }
/* Los presets de la casa conservan su rombo; los propios, la cruz para borrarlos. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .capa-ficha.firma { color: var(--tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .capa-ficha:is(.firma, .elegida)::before { color: currentColor; opacity: 1; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .capa-ficha .ficha-borrar { color: currentColor; opacity: .7; background: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .capa-ficha .ficha-borrar:hover { opacity: 1; background: none; color: currentColor; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .capa-nueva { color: var(--tinta); font-family: var(--gr-texto); letter-spacing: .01em; text-decoration-line: underline; }
/* La fila de las opciones: más aire entre palabras (antes lo daba la caja). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.capas-fichas, .capas-modos, .mc-filtros, .montaje-escenas, .entrada-opciones, .entrada-menu-filtros, .generar-pronto-marcas, .montar-segmento) { column-gap: 10px; row-gap: 0; }

/* Las opciones con una segunda línea (los formatos y calidades del editor): el
   subrayado alcanzaría también a la línea chica, así que la elegida lleva una
   raya de 2 px debajo, como la pestaña elegida. Las de la caja ya tienen su
   punto lleno: con eso, la letra entera y el peso alcanza. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .montar-opcion:has(> small)[aria-pressed="true"] {
  text-decoration-line: none;
  border-radius: 0;
  box-shadow: inset 0 -2px 0 currentColor;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-opcion[aria-pressed="true"] { text-decoration-line: none; }
/* Los grupos que encerraban sus opciones en una caja (los filtros de Mis
   creaciones, Galería/Subir y los formatos rápidos del editor): sin la caja. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.mc-filtros, .montar-subpestanas, .montar-formatos-rapidos) {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  column-gap: 8px;
}
/* /videoclip/: las opciones son radios con el texto al lado (.vc-opcion-texto). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion-texto {
  min-height: 44px;
  padding: 6px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--tinta-dim);
  transition: color .2s ease, text-shadow .3s ease;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion:hover .vc-opcion-texto { border-color: transparent; color: var(--tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion input:checked + .vc-opcion-texto { border-color: transparent; background: none; color: var(--tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion input:checked + .vc-opcion-texto b {
  font-weight: 650;
  text-decoration: underline 2px currentColor;
  text-underline-offset: .38em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion input:focus-visible + .vc-opcion-texto {
  outline: 2px solid color-mix(in oklch, currentColor 45%, transparent);
  outline-offset: 3px;
  border-radius: 10px;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .vc-opcion.apagada .vc-opcion-texto { border: 0; opacity: .5; }

/* Que se lea que se tocan (24/10/2026, el pedido de hoy): las listas de opciones
   sueltas (presets, motores en pronto, filtros de una sola fila) llevan un
   subrayado apenas marcado; las pestañas (Todo · Videoclips…, Galería · Subir,
   las escenas del montaje) no, como las pestañas de la barra. Los radios de
   /videoclip/ y los motores de las pantallas de IA llevan un punto, como las
   opciones de la caja: vacío; lleno el elegido. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.capa-ficha, .generar-pronto-chip, .insp-filtro, .modelos-filtro, .ficha-filtro, .comprar-periodo-op, .montar-opcion:not(:has(> small, > .montar-forma))):not([aria-pressed="true"], .elegida, .elegido, .activo, .activa) {
  text-decoration-line: underline;
  text-decoration-color: color-mix(in oklch, currentColor 30%, transparent);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.vc-opcion-texto, .generar-modelo-alto) > b::before {
  content: '';
  display: inline-block;
  width: 9px; height: 9px;
  margin: 0 9px 1px 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  vertical-align: middle;
  opacity: .75;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.vc-opcion input:checked + .vc-opcion-texto, .generar-modelo:is(.elegido, [aria-pressed="true"]) .generar-modelo-alto) > b::before { background: currentColor; opacity: 1; }

/* ── 5 · Las tarjetas que son botones: los motores y los formatos ───────────
   Los modelos de /video/, /imagen/, /voz/ y /musica/ vuelven a ser la lista que
   pedía generar.css («si es clicable, se nota por el texto»): un filete arriba
   separa una opción de la otra, sin recuadro ni fondo. El elegido, con el
   nombre entero y subrayado. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo {
  min-height: 0;
  padding: 12px 4px 14px;
  border: 0;
  border-top: 1px solid var(--linea);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--tinta-dim);
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:is(.elegido, [aria-pressed="true"]) { border-color: var(--linea); background: none; color: var(--tinta); }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:is(.elegido, [aria-pressed="true"]) b {
  color: var(--tinta);
  text-decoration: underline 2px currentColor;
  text-underline-offset: .32em;
}
@media (hover: hover) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:hover:not(:disabled) { color: var(--tinta); border-color: var(--linea); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:hover:not(:disabled) b { text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent); text-underline-offset: .32em; }
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:focus-visible { outline: 2px solid color-mix(in oklch, currentColor 45%, transparent); outline-offset: 2px; border-radius: 10px; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-modelo:focus-visible b { text-decoration: underline 3px currentColor; text-underline-offset: .32em; }
/* Los formatos de /montar/: la forma dibujada queda (es el ícono); el recuadro, no. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .montar-opcion { text-align: left; }
/* Las muestras de estilo son fotos: sin el marco; la elegida, con su tilde y el nombre subrayado. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.estilo-muestra, .entrada-estilo-muestra) { border-color: transparent; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.estilo-tarjeta, .entrada-estilo):is(:hover, [aria-pressed="true"]) :is(.estilo-muestra, .entrada-estilo-muestra) { border-color: transparent; box-shadow: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.estilo-tarjeta, .entrada-estilo)[aria-pressed="true"] :is(.estilo-nombre, .entrada-estilo-nombre) {
  color: var(--tinta);
  font-weight: 650;
  text-decoration: underline 2px currentColor;
  text-underline-offset: .32em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-estilo[aria-pressed="true"] .entrada-estilo-nombre { color: var(--e-tinta); }

/* ── 6 · Cada lugar con su tono ──────────────────────────────────────────── */
/* La caja (portada y /crear/) y su desplegable: --e-tinta. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.entrada-boton, .entrada-seguir:not(.texto-accion), .entrada-generar) { color: var(--e-tinta); }
/* «Seguir» de /crear/: como en la portada, la palabra y su flecha. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-seguir:not(.texto-accion) { min-height: 56px; padding-inline: 4px; gap: 12px; font-size: 15px; letter-spacing: .24em; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-seguir:not(.texto-accion) svg { flex: none; }
/* «Generar» y «Sí, gastar N»: a lo ancho (el toque es grande), la palabra en el medio. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-generar { min-height: 58px; font-size: 16px; letter-spacing: .22em; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-generar:disabled { border: 0; background: none; color: var(--e-tinta); }
/* /precios/: el paquete sin precio sigue tachado, como pedía comprar.css. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .comprar-boton:disabled { color: var(--tinta-faint); text-decoration: line-through 1px currentColor; }
/* Pedir un cambio: --pc-tinta. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .pc .pc-boton { color: var(--pc-tinta); }
/* Sobre fotos y videos («Ver muestra», «Saltar» del viaje): una sombra corta detrás de la letra para leerse sobre cualquier cuadro. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.modelo-muestra-boton, .viaje-saltar) { color: var(--gr-hueso); text-shadow: 0 1px 2px rgba(14, 12, 11, .9), 0 0 14px rgba(14, 12, 11, .85); }
/* En el editor, «Exportar» y «Abrir Medios» en versalitas, más chicas: la barra es angosta. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .montar-boton.acento { font-size: 12.5px; letter-spacing: .16em; }
/* Los carriles vacíos del editor: la palabra en tono bajo, sin el recuadro punteado. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .montar-carril-vacio { min-height: 0; color: var(--tinta-dim); font-weight: 500; justify-content: flex-start; }
/* «Videoclips» de /crear/: la palabra y su subrayado, sin el círculo de la flecha. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-videoclip > svg { display: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-videoclip { min-height: 44px; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-videoclip-bajada { margin-left: 0; }

/* ── 7 · La barra: «Empezar» es la palabra, y el idioma, un campo de una línea ── */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .barra-acciones > .boton-acento,
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .barra-acciones > .boton-acento:is(:visited, :hover, :focus-visible) {
  padding-inline: 4px;
  background: none;
  box-shadow: none;
  color: var(--gr-hueso);
  font: 600 14px/1.2 var(--gr-texto);
  letter-spacing: .01em;
  text-transform: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .barra-acciones > .boton-acento: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; text-underline-offset: .34em; }
/* Sin cursor (el celular) la palabra va subrayada, como la de la portada. */
@media (hover: none) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .barra-acciones > .boton-acento {
    text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent);
    text-underline-offset: .34em;
  }
}
@media (min-width: 601px) and (max-width: 760px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .barra-acciones > .boton-empezar { padding-inline: 4px; }
}
/* El menú abierto del celular es papel: ahí «Empezar» e «Iniciar sesión» van en tinta, sin recuadro. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra.menu-visible .menu-movil-cuenta > a {
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--gr-tinta);
  font-weight: 600;
  text-decoration: underline 1px color-mix(in oklch, currentColor 45%, transparent);
  text-underline-offset: .34em;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra.menu-visible .menu-movil-cuenta > a:focus-visible { outline: 2px solid color-mix(in oklch, currentColor 45%, transparent); outline-offset: 5px; border-radius: 10px; text-decoration: underline 3px currentColor; }
/* El idioma de la barra: un campo, con una línea abajo (no un recuadro). */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra .idioma-selector select {
  border: 0;
  border-bottom: 1px solid var(--gr-linea-fuerte);
  border-radius: 0;
  background-color: transparent;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .barra.menu-visible .idioma-selector select { border-bottom-color: var(--gr-linea-hueso-fuerte); }

/* ── 8 · «Crear», el botón fijo del celular ──────────────────────────────────
   Flota sobre lo que haya abajo (negro, papel o una foto): sin la píldora, la
   palabra va en versalitas sobre un halo oscuro que se desvanece hacia los
   bordes, sin borde ni esquinas, para leerse sobre cualquier fondo. */
@media (max-width: 760px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .crear-fijo {
    min-height: 56px;
    padding: 0 40px;
    background: radial-gradient(closest-side, rgba(14, 12, 11, .9), rgba(14, 12, 11, .78) 55%, rgba(14, 12, 11, 0));
    color: var(--gr-hueso);
    font: 700 15px/1 var(--gr-texto);
    letter-spacing: .24em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(14, 12, 11, .9);
    transform: translateX(-50%);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .crear-fijo:is(:hover, :active, :focus-visible) {
    background: radial-gradient(closest-side, rgba(14, 12, 11, .9), rgba(14, 12, 11, .78) 55%, rgba(14, 12, 11, 0));
    transform: translateX(-50%);
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .crear-fijo.oculto { transform: translate(-50%, 18px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .crear-fijo:focus-visible { outline: 2px solid color-mix(in oklch, var(--gr-hueso) 45%, transparent); outline-offset: -8px; border-radius: 999px; text-decoration: underline 3px currentColor; text-underline-offset: .45em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LO QUE QUEDABA CON CAJA, VISTO CON EL OJO DEL DUEÑO (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». Antes (21/10/2026): «que los botones no tengan un
   cuadrado que los encierre, que sea todo soft delicado».
   La verificación (_trabajo/verificar-botones-video/) encontró dos restos:
     · Con el teclado (Tab), el foco de los botones y enlaces que ya eran
       palabra —Empezar, Iniciar sesión, la barra, Imagen ▾, Motor, Seguir,
       los ejemplos, «Usar esta idea», las preguntas, Contraseña olvidada…—
       se dibujaba como un recuadro de esquinas rectas. Ahora es un anillo
       tenue y redondeado, como en los demás botones (2 px, 10 px de radio).
       El foco no se saca: solo cambia la forma. Las tarjetas con foto siguen
       con su foco recto (son fotos, no botones).
     · Las etiquetas de los motores («Foto + audio», «Wan 2.2 · 720p»,
       «SIN API») y el contador de los presets («0 marcados · 0 en uso») iban
       en una cajita de esquinas rectas: quedan como letra chica, sin recuadro.
   Solo La grieta; Void, Nervo y Rabbit no cambian, y /nosotros/ queda fuera.
   ═══════════════════════════════════════════════════════════════════════════ */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .marca, #navegacion-principal > a, #navegacion-principal > button, #navegacion-estudio > a, #mas-boton,
  .nav-acciones :is(a, button), .barra-acciones > :is(a, button), .barra-cuenta, .menu-movil,
  .entrada-seguir, .entrada-prueba, .entrada-videoclip, .video-portada-control,
  .ejemplo-usar, .muestra-usar, .insp-idea-usar, .presets-biblioteca, .generar-duracion,
  .entrar-ojo, .entrar-olvide, .entrar-cambio-boton, .pie-correo, #pie a, .pie-app a, .montar-pestana
):where(:not(.interfaz-boton, .hamburguesa, .crear-fijo)):focus-visible {
  outline: 2px solid color-mix(in oklch, currentColor 55%, transparent);
  outline-offset: 5px;
  border-radius: 10px;
}
/* Los que van dentro de una pista o una grilla justa: el anillo más pegado,
   para que no lo corte el borde de la fila. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .entrada-tipo, .entrada-mando-boton, .montar-opcion
):focus-visible {
  outline: 2px solid color-mix(in oklch, currentColor 55%, transparent);
  outline-offset: 1px;
  border-radius: 10px;
}
/* Las filas a lo ancho (preguntas, «Ver descripción», las capas de presets):
   el anillo por dentro, redondeado. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(
  .faq-boton, .pregunta-boton, .ejemplo-prompt > summary, .capa-cabecera
):focus-visible {
  outline: 2px solid color-mix(in oklch, currentColor 55%, transparent);
  outline-offset: -3px;
  border-radius: 10px;
}
/* Las etiquetas y el contador: letra chica en tono bajo, sin la cajita. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) :is(.generar-insignia, .capas-contador) {
  border: 0;
  border-radius: 0;
  padding-inline: 0;
  background: none;
  box-shadow: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .generar-insignia { padding-block: 0; opacity: .85; }
/* Los filtros de los paneles «Herramientas de imagen/video…» y «Motores» (Todo,
   Desde texto, Imagen, Video…): la píldora vieja del desplegable les dejaba el
   fondo, con más fuerza que la regla común, y el elegido quedaba como un
   cuadrado hueso con la letra hueso, que no se leía. Sin fondo, en todos sus
   estados: el elegido entero y subrayado, como las demás opciones que se marcan. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .entrada-menu .entrada-menu-filtro:is(*, [aria-pressed="true"], :hover, :focus-visible) {
  border-color: transparent;
  background: none;
  box-shadow: none;
}
/* La lista de modelos de «¿Qué cambiar?» (y del visor de Mis creaciones): con
   el teclado, el navegador dibujaba un recuadro recto alrededor de la radio
   (a una radio nativa no le toma el radio redondo). El foco pasa a la fila
   entera, como un anillo tenue y redondeado; la radio queda limpia. */
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .pc .pc-opcion input:focus-visible { outline: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])):not(:has(.cierre-nosotros)) .pc .pc-opcion:has(input:focus-visible) {
  outline: 2px solid color-mix(in oklch, currentColor 55%, transparent);
  outline-offset: -2px;
  border-radius: 10px;
}

/* ── /crear/: el video del lado claro y sin «VIDEOCLIPS» suelto (24/10/2026) ─
   Pedidos del dueño: sobre una captura de /crear/ publicada, «LA PARTE BLANCA
   ESTA TODA EN BLANCO»; sobre la portada, el 23/10, «no entiendo ese coso de
   video clips que metiste suelto ahi abajo» (en la portada ya se sacó, en
   portada-grieta.css).

   1 · «VIDEOCLIPS» con su círculo y su triángulo, suelto sobre el papel, sale
       de la vista también acá, en las cuatro interfaces. Videoclip sigue en el
       menú de la barra y en el pie. El enlace queda en el HTML, escondido.

   2 · El papel lleva el mismo video que el lado claro de la portada (lo arma
       app/papel-video.js: papel-montaje-v3 desde 1200 px, v2 por debajo, con
       el póster de v2, mudo, en bucle; con ahorro de datos o «menos
       movimiento» queda el póster). Va adentro de .entrada-cuerpo, con
       z-index −1: arriba del papel hueso (que queda debajo como respaldo
       mientras carga), debajo de la luz y de todo lo que se lee, y sin tomar
       clics. Solo con La grieta: Void, Nervo y Rabbit conservan su /crear/.
       · Desde 1200 px, la puerta va en dos columnas: el video ocupa el papel
         entero, de la luz al borde derecho, con el mismo borde de papel mal
         cortado que el hueso (la tira --gr-tira-der en la misma posición).
         .entrada-cuerpo no está posicionado en ese ancho: el video se ubica
         contra .entrada--pagina, como el ::before del hueso. El cuadro va
         pegado debajo de la barra (sticky) y mide lo que se ve de pantalla:
         con una pieza terminada la puerta crece y el video no se agranda.
       · Por debajo de 1200 px, la puerta se apila: el título sobre negro y la
         caja como una tarjeta de negro sobre el papel. El video entra en una
         franja a sangre de borde a borde, desde el borde de papel (la luz
         acostada, --gr-tira-h-abajo) hasta la tarjeta, que baja lo que mide la
         franja y le tapa los últimos 120 px, como la caja de la portada en el
         celular. Abajo se funde con el papel: los ejemplos y la pieza
         terminada siguen sobre hueso.
   3 · La luz no lava el video. Desde 1200 px el brillo de la luz llega a 70 px
       de la línea y sobre el video quedaba como una niebla blanca. Del lado
       del video se corta con un degradé: hasta 134 px del borde izquierdo de
       la cinta de luz va entero (la línea va de 89 a 130 px, medido en la
       tira del papel: 80 px de corrimiento + 9,3 a 48,7 + el trazo) y se
       apaga del todo a los 190 px. Del lado negro, el brillo de siempre. Por
       debajo de 1200 px la luz es el brillo corto de 12 px: no hace falta. */
html body .entrada.entrada--pagina > .entrada-videoclip { display: none; }

.crear-papel { display: none; }
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel {
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
:root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel > video {
  display: block;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}
@media (min-width: 1200px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel {
    inset: 0 0 0 auto;
    width: calc(100% - var(--gr-reparto) + 30px);
    -webkit-mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    mask-image: var(--gr-tira-der), linear-gradient(#000, #000);
    -webkit-mask-repeat: repeat-y, no-repeat;
    mask-repeat: repeat-y, no-repeat;
    -webkit-mask-size: 60px 2400px, calc(100% - 60px) 100%;
    mask-size: 60px 2400px, calc(100% - 60px) 100%;
    -webkit-mask-position: left 0 top 1800px, right top;
    mask-position: left 0 top 1800px, right top;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel > video {
    position: sticky;
    top: var(--barra, 72px);
    height: min(100%, calc(100vh - var(--barra, 72px)));
    object-position: 50% 45%;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina:has(.crear-papel)::after {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%), linear-gradient(90deg, #000 0, #000 134px, rgba(0, 0, 0, .45) 156px, transparent 190px);
    mask-image: linear-gradient(180deg, transparent 0, #000 84px, #000 calc(100% - 90px), transparent 100%), linear-gradient(90deg, #000 0, #000 134px, rgba(0, 0, 0, .45) 156px, transparent 190px);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }
}
@media (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada.entrada--pagina { --crear-franja: clamp(170px, 46vw, 400px); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo:has(> .crear-papel) { padding-top: calc(4px + var(--crear-franja)); }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel {
    inset: -30px calc(-1 * var(--gr-pd)) auto calc(-1 * var(--gr-izq));
    height: calc(30px + var(--crear-franja) + 4px + 120px);
    -webkit-mask-image: var(--gr-tira-h-abajo), linear-gradient(180deg, #000 0, #000 calc(100% - 100px), transparent 100%);
    mask-image: var(--gr-tira-h-abajo), linear-gradient(180deg, #000 0, #000 calc(100% - 100px), transparent 100%);
    -webkit-mask-repeat: repeat-x, no-repeat;
    mask-repeat: repeat-x, no-repeat;
    -webkit-mask-size: 2400px 60px, 100% calc(100% - 60px);
    mask-size: 2400px 60px, 100% calc(100% - 60px);
    -webkit-mask-position: left 0 top 0, left bottom;
    mask-position: left 0 top 0, left bottom;
  }
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel > video {
    height: 100%;
    object-position: 60% 42%;
  }
}
/* De 981 a 1199 px la caja de /crear/ mide como mucho 860 px y queda a la
   izquierda: el papel (::before), la luz acostada (::after) y el video, que
   se ubican contra ella con calc(50vw − 50 %), terminaban antes del borde
   derecho (a 1100 px, 81 px de negro a la derecha y la luz cortada en seco).
   Acá van de borde a borde: la caja arranca donde termina el relleno de
   .contenido (estetica.css: clamp(18px, 3,5vw, 58px)). */
@media (min-width: 981px) and (max-width: 1199px) {
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo::before,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina > .entrada-cuerpo::after,
  :root:is([data-interfaz="grieta"], :not([data-interfaz])) .entrada--pagina .crear-papel {
    left: calc(-1 * clamp(18px, 3.5vw, 58px));
    right: calc(100% + clamp(18px, 3.5vw, 58px) - 100vw);
  }
}