/* ═══════════════════════════════════════════════════════════════════════════════ Ristorante Da Marc · «AQUÍ SE COCINA A LA VISTA» · ronda 7 (la web entera) Process/design-direction-ronda-7.md · Process/copy-deck-ronda-7.md EL VEREDICTO QUE MANDA (Pere, 2026-08-02): «esto no puede ser una web genérica como la que has creado, SOLO ES UN FONDO DE UN COLOR Y TEXTO, la web tiene que estar completa, no quiero espacio en blanco (el menos posible), toma de referencia otras webs como essens y ozoa». La causa raíz estaba medida: CINCO de las siete secciones eran el mismo componente `.fila`. Esta hoja las borra. `.fila`, `.fila--2`, `.fila--3`, `.fila--foto` y `.franja` NO EXISTEN en este fichero. ⭐ RONDA 7b · «MÁS PIEZAS, MÁS PEQUEÑAS, QUE SE TOCAN» Process/design-direction-ronda-7b.md — DELTA sobre la r7, que NO se reabre. Pere, 2026-08-03: «sigue siendo muy básica… veo las fotos muy grandes… necesitan ser fotos más pequeñas, esto cansa la vista… que haya el mínimo de espacio vacío» · «el diseño es demasiado básico» · «más interactiva y visual». TRES QUEJAS, TRES CAUSAS DISTINTAS, y hay que contestarlas las tres: · «fotos grandes» ⇒ la escalera de pieza baja (techo duro 480 px CSS) · «básico» ⇒ NO EXISTÍA LENGUAJE DE PROFUNDIDAD (0 sombras, 1 degradado, 1 radio en 1.357 líneas). Ahora: degradado de 4 paradas, grano estático, 3 sombras, un filo, dos radios y DOS solapes · «interactiva» ⇒ casi todo pasaba solo. A10, A11 y A12 los CAUSA la mano 🔴 UNA COSA QUE NO SE HACE, y se dice porque es la trampa de esta ronda: una pieza pequeña rodeada de fondo es EXACTAMENTE la «tarjeta con suelo alrededor» que Diego rechaza. La salida son PIEZAS PEQUEÑAS QUE SE TOCAN: costura de 12 px (era 4 hasta el 2026-08-17), y el vecino de cada foto es otra foto, un plano o un filete, nunca el fondo. El héroe sigue a sangre por los cuatro lados. SIETE SECCIONES, SIETE FORMAS CON NOMBRE: 1 FONDO .hero el fuego a sangre, contenido sobre un PLINTO que cruza 2 APAREJO .aparejo 5 teselas del MISMO horno, 2 alturas, 1 que cruza filas 3 ÍNDICE .fams 10 filas, la altura la manda EL TEXTO, 2 filas sin raíl 4 PISTA .pista 4 pasos 9:16 con scroll-snap · LA FIRMA · INTOCABLE — regla .regla puntuación, no sección 5 CARTEL .cartel tríptico 1.15fr/1fr/1fr, una altura, costura de 12 px 6 FICHA .ficha documento de paneles sobre el plano elevado 7 CIERRE .cierre la puerta como raíl y UN SOLO EJE de datos 🔴 TODO `:hover` VA DENTRO DE `@media (hover:hover) and (pointer:fine)`, SIN EXCEPCIÓN. En un móvil el :hover se dispara al tocar y se queda pegado. Los dos que quedaban sueltos (`.nav__a`/`.nav__lang` y `.pie__social`/`.pie__legal`) están gateados desde la r7b. LAS DOS REGLAS QUE GOBIERNAN TODO, SIN CAMBIO DESDE LA r3: 1 · un solo suelo grafito del primer píxel al último. `--grafito-2` existe SÓLO bajo documentos y controles, nunca como fondo de sección. 2 · turquesa sobre crema = 1,04:1 ⇒ NO PUEDE HABER PLANOS CREMA. ANIMACIÓN — sólo `transform`, `opacity` y `clip-path` (y el clip-path nunca sobre una caja que vigile un observador: Ozoa r5 midió ratio 0,000 y doce fotos que no llegaron a pedirse). Jamás `transition: all`. Jamás `ease-in` en interfaz. Nunca desde `scale(0)`. La salida siempre más rápida que la entrada. CERO `will-change` (ESENS lo tenía en 23 elementos: era la presión de memoria detrás de «the computer lags»). Este fichero vive en la RAÍZ del sitio a propósito: menu-check.py lee site.glob("*.css") (no recursivo) y ahí busca `.pick` y las reglas de impresión. Lo mismo main.js. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Las dos caras, leídas de su rotulación ──────────────────────────────── ⚠️ MEDIDO CON fontTools SOBRE ESTOS FICHEROS (2026-07-31) — se hereda: · Mulish NO trae `tnum`; la columna de precios NO se fía de la fuente: es una columna de ancho declarado (--col-precio) alineada a la derecha. · Vollkorn trae cifras ANTIGUAS por defecto y sí trae `lnum` ⇒ body fija `lining-nums`. NINGUNA cifra de esta web se compone en la display. ⭐ LA ITÁLICA ES NUEVA Y NO ES UN GUSTO: en los DOS sitios donde este negocio escribe su propio nombre lo escribe inclinado — la cursiva de «da MaRc» dentro del óvalo y la itálica caligráfica «Marc» del rótulo de la calle. Dos artefactos suyos independientes, la misma inclinación ⇒ la voz de display de esta web es la ITÁLICA de Vollkorn. No toca el cuerpo, ni la carta, ni un precio: sólo los seis

. ⚠️ `-webkit-font-smoothing: antialiased` está PROHIBIDO por nombre. */ @font-face{ font-family:"Vollkorn"; src:url("assets/fonts/vollkorn-latin-wght-normal.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } /* ⚠️ EL ÚNICO FICHERO NUEVO DE LA RONDA, y hay que COPIARLO a mano (esta sesión no tiene shell y un .woff2 es binario): cp Clients/Ristorante-Da-Marc/Website-rediseno/assets/fonts/vollkorn-latin-500-italic.woff2 \ Clients/Ristorante-Da-Marc/Website/assets/fonts/ La SEGUNDA fuente de este mismo @font-face es el roman variable: si el fichero itálico no está, el navegador compone los seis

en Vollkorn recto en vez de caer a la itálica de Georgia. Degrada a la marca, nunca a otra letra. NO se precarga: la promesa está sobre el pliegue, pero el techo de carga inicial es 435 KB y la itálica pesa ~25 KB. `swap` la deja llegar tarde. */ @font-face{ font-family:"Vollkorn"; src:url("assets/fonts/vollkorn-latin-500-italic.woff2") format("woff2"), url("assets/fonts/vollkorn-latin-wght-normal.woff2") format("woff2"); font-weight:400 700; font-style:italic; font-display:swap; } @font-face{ font-family:"Mulish"; src:url("assets/fonts/mulish-latin-wght-normal.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; } /* ── 2 · Tokens ──────────────────────────────────────────────────────────────── PALETA MEDIDA EN SU PROPIO MATERIAL, con recuento de píxeles: --grafito #1C1C1C 260.917 px de sus propios negros --crema #F7E9DB 33.885 px: el lino de su mantel y su servilleta al sol --turquesa #87FCDC 391.328 px = 80,8 % de los saturados de su óvalo ⭐ --grafito-2 #26262A ES DERIVADO Y SE DICE: no es una medición. */ :root{ --grafito:#1C1C1C; --grafito-2:#26262A; --crema:#F7E9DB; --crema-2:#9C9186; --turquesa:#87FCDC; --linea:rgba(247,233,219,.16); --linea-2:rgba(247,233,219,.30); /* ⭐ r9 · EL ORO ES LA ÚNICA EXCEPCIÓN AL ACENTO ÚNICO, y sólo la merece por una razón: unas estrellas de puntuación que no son doradas no se leen como puntuación. Vive EXCLUSIVAMENTE dentro de `.estrella` — si aparece en cualquier otro sitio, la disciplina de un solo acento se ha roto. */ --oro:#EFB63C; --display:"Vollkorn","Hoefler Text","Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif; --texto:"Mulish","Avenir Next","Segoe UI",system-ui,-apple-system,"Helvetica Neue",sans-serif; /* Seis escalas publicadas. El hueco entre 34 y 17 px es deliberado: no existe tamaño intermedio, y por eso el nivel 3 no lleva titular. */ --t-display:clamp(34px,9.2vw,68px); --t-h2:clamp(24px,5.4vw,34px); --t-figure:clamp(44px,12vw,96px); --t-tel:clamp(32px,9vw,64px); --t-body:17px; --t-meta:13px; --t-micro:11px; /* Rampa de tracking EN FUNCIÓN DEL TAMAÑO. Seis valores. */ --tr-display:-.018em; --tr-h2:-.012em; --tr-figure:-.010em; --tr-body:.005em; /* positivo: texto claro sobre grafito florece */ --tr-meta:.02em; --tr-micro:.16em; /* ⭐ EL PRESUPUESTO DE VACÍO, REESCRITO A LA BAJA OTRA VEZ (r7 → r7b). Pere ha pedido «el mínimo de espacio vacío» DOS RONDAS SEGUIDAS, así que: --s6 se queda en 40 (el vacío que ve NO está dentro de las secciones) ⚠️ SUPERADO EL 2026-08-17: sube a 48 por la jerarquía. Ver la nota de la escalera, justo debajo, con la aritmética nueva. --pad-1 72→56/104→80 · --pad-2 56→44/84→64 · --pad-3 44→32/64→48 (−23 %) MONOTONÍA COMPROBADA EN LOS DOS EXTREMOS, que es donde falla siempre: a 320 px: hueco interno máx 40 · costura de suelo mín. 32+32 = 64 ✓ a 1440 : hueco interno máx 40 · costura de suelo mín. 48+48 = 96 ✓ máximo posible 80+80 = 160, contra el umbral 400 de [deadspace]. Acumulado desde la r6: la costura entre secciones baja de 176-336 px a 64-160 px (−52 %). ⭐ REGLA NUEVA DE LA r7b, y cambia una norma del estudio: LA COSTURA ENTRE DOS SECCIONES ES O SUELO (≥ la suma de sus dos paddings) O CONTACTO (--seam). NO EXISTE VALOR INTERMEDIO. La banda muerta de ~150 px entre los botones de la portada y la primera foto era exactamente un valor intermedio: demasiado para ser una junta, demasiado poco para ser jerarquía. Contacto se usa en EXACTAMENTE DOS costuras de toda la web: portada → §2, y §5 media → plano de texto. */ /* ⭐ 2026-08-17 · `--s6` SUBE DE 40 A 48, Y ARREGLA EL PELDAÑO ROTO DE ARRIBA. Pere pidió «mejor jerarquia visual, espaciado y tal» (2026-08-17). Medido sobre la escalera anterior, razón entre peldaños consecutivos: 6→12 = 2,00 · 12→18 = 1,50 · 18→26 = 1,44 · 26→36 = 1,38 · 36→40 = 1,11 El último peldaño era un 11 % más grande que el anterior: a ojo son el MISMO hueco, así que la escalera tenía cinco niveles y no seis. Con 48 la razón queda en 1,33 y la serie decrece limpia (2,00 · 1,50 · 1,44 · 1,38 · 1,33). El efecto concreto que se ve: `--vacio-max` (la costura entre la cabecera de una sección y su media a sangre) pasa de 40 a 48 contra el `--s5` = 36 de dentro de `.sec__in`, o sea de un 11 % de diferencia a un 33 % — DOS niveles distinguibles donde antes había uno. MONOTONÍA RECOMPROBADA EN LOS DOS EXTREMOS, que es donde falla siempre: a 320 px: hueco interno máx 48 · costura de suelo mín. 32+32 = 64 ✓ a 1440 : hueco interno máx 48 · costura de suelo mín. 48+48 = 96 ✓ máximo posible 80+80 = 160, contra el umbral 400 de [deadspace]. */ --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:36px; --s6:48px; --pad-1:clamp(56px,6vw,80px); /* §3 LA CARTA — la protagonista */ --pad-2:clamp(44px,4.8vw,64px); /* §2 · §4 · §5 — apoyo */ --pad-3:clamp(32px,3.6vw,48px); /* §6 · §7 · la regla — servicio */ /* ⭐ 2026-08-17 · LA COSTURA SUBE DE 4 A 12 px, Y ESTO SUSTITUYE A LA DECISIÓN DE LA r7 (`Playbook/Rotation-Log.md`), que la fijó en 4 px. Pere, 2026-08-17: «intenta que no se solapen las fotos y por ejemplo en la de denia en la seccion de nuestra casa esta la misma foto reptida dos veces una al lado de otra». MEDIDO ANTES DE TOCARLO, a 1366 / 1440 / 1680 / 1920 y descontando `clip-path`, `opacity:0` y `visibility:hidden`: en toda la web NO HAY un solo solape accidental entre dos fotografías —los únicos solapes reales son el logotipo sobre el fondo del héroe, que son deliberados, y los tres pósters apilados de §4, que llevan `clip-path:inset(0 0 0 100%)` porque son un secuenciador—. Lo que sí había, y es lo que se está viendo, son teselas a 4 px unas de otras en §2, §5, §6 y §8: dos fotografías a 4 px se leen como pegadas o como solapadas. 12 px NO ES UN NÚMERO NUEVO: es `--s2`, el segundo peldaño de la escalera publicada, así que la costura entra en la jerarquía en vez de vivir fuera de ella. Y sigue siendo CONTACTO y no un valor intermedio: contra los 64–160 px de una costura de suelo, 12 px es una junta. LO QUE CUESTA EN ANCHO DE PIEZA, comprobado contra el techo duro de 480 px CSS y la regla del ×1,35 (a 1440, `.sangra` = 1.352 px): aparejo ≥900 (1352−3×12)/4,4 = 299,1 px/tesela (antes 304,5) ✅ cartel ≥900 (1352−2×12)/3,15 = 421,6 px/media (antes 426,5) ✅ ficha ≥1000 (1352−12)/2,9 = 462,4 px (antes 465,5) ✅ Todas BAJAN, así que ninguna pierde proporción (van con `object-fit:cover` dentro de una caja de altura declarada) y ninguna se acerca más a su ancho nativo. El techo de 1.392 px de `.sangra` se recalcula abajo. */ --seam:12px; /* ⭐ la costura del aparejo, el cartel y la ficha */ /* ⭐ EL ADJETIVO CONVERTIDO EN NÚMERO. Ninguna banda contigua de suelo desnudo —sin texto, sin media, sin filete, sin plano elevado— puede medir más de esto DENTRO de una sección. La r7 decía 120 px. Baja al mismo valor que el hueco interno máximo: no puede haber más aire suelto del que la escalera de espaciado autoriza. */ --vacio-max:var(--s6); /* 48 px · el mismo número que el hueco interno máximo */ /* `--solape` (SOLAPE 1, los 24 px que el plinto cruzaba hacia §2) SE BORRA en la r10: sin plinto no hay nada que cruzar. Queda un solo solape en la web. */ --solape-2:32px; /* SOLAPE 2 · el texto del cartel monta su media */ --edge:clamp(20px,5.2vw,44px); /* el margen propio de la página */ /* ⭐ UN SOLO EJE, EL DE LA VENTANA (Pere, r4). De aquí salen los DOS únicos bordes verticales de toda la web, y miden lo mismo: L = R = max(--edge, (ancho − --marco)/2 + --edge) */ --marco:1120px; --gutter:max(var(--edge), calc((100% - var(--marco)) / 2 + var(--edge))); --medida-txt:44rem; /* ══ LA PROFUNDIDAD · la respuesta a «demasiado básico» ═══════════════════ El recuento que lo motiva, hecho sobre esta misma hoja: 0 sombras, 1 degradado y 1 border-radius en 1.357 líneas. Ozoa tiene 11 sombras y 32 radios; la firma de Esens es literalmente una sombra de contacto bajo cada plato. Una página de rectángulos de canto vivo sobre un color plano se lee como una maqueta, por muchas fotos que lleve. En un suelo oscuro la elevación no la da sólo la sombra: la dan TRES cosas a la vez —el plano, el filo de luz del canto, y la sombra—, y las tres se declaran aquí. */ --plano-0:var(--grafito); /* el suelo · lo visten la barra y la barra fija */ --plano-1:var(--grafito-2); /* ⭐ --grafito-2, POR FIN CON TRABAJO */ --filo:inset 0 1px 0 rgba(247,233,219,.06); /* el filo de luz del canto superior */ --sombra-1:0 2px 6px -2px rgba(0,0,0,.55); /* controles */ --sombra-2:0 18px 40px -24px rgba(0,0,0,.78); /* planos elevados */ --sombra-3:0 40px 90px -20px rgba(0,0,0,.60); /* el tique de la comanda, flotando centrado */ /* ⭐ DOS RADIOS, NI UNO MÁS. `--radius: 0` se borra. Por qué 3 px y no más: Ozoa r4 ya costó una queja de Diego («no me gusta que las fotos estén en un arco, demasiado espacio en blanco»). Un radio de 3 px se come 1,9 px² por esquina: el 0,3 % de lo que se comía aquel arco. Es la diferencia entre «un rectángulo» y «una pieza», y no toca la foto. */ --r-pieza:3px; /* fotografías y vídeos */ --r-control:8px; /* botones, chips, planos elevados, la hoja */ /* Las tres curvas exactas (emil-design-eng). Nunca aproximadas. */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); --barra:52px; --ovalo:clamp(168px,52vw,200px); /* ⭐ 160 → 200: «it needs to be big» */ /* ══ RONDA 10 · EL UMBRAL SE BORRA ═══════════════════════════════════════ La r8 metió delante del fuego una fila de tres —pieza A · plinto · pieza B— y el interruptor `--tira-h` para revertirla. Pere la retiró el 2026-08-03 («quita los dos vídeos que hay a los lados»), así que el interruptor deja de tener sentido: lo que gobernaba ya no existe. Se borran `--tira-h`, `--pza-w`, `--pza`, `--pza-seam` y `--umbral-h`. Vuelve intacta la orden de Pere de la r4: el bucle de FONDO, a sangre por los cuatro lados, y su póster como LCP — pero ahora además SE VE, que era el punto entero del encargo. La columna de texto de escritorio es lo único que queda dimensionado aquí: 30rem de medida sobre el tercio izquierdo, que es el tercio OSCURO del encuadre. Ver la aritmética junto a `.hero__velo`. */ --hero-col:30rem; /* 480 px · la medida de la portada ≥900 */ /* La promesa baja de 68 a 46 px SÓLO en escritorio: a 1440 competía con el óvalo y con el fuego. A 390 da 34 px, exactamente lo de hoy, así que la aritmética del pliegue en móvil NO se toca ni un píxel. */ --t-promesa:clamp(34px,4.2vw,46px); /* ══ RONDA 8 · EL CAPÍTULO CREMA ═════════════════════════════════════════ Tinta derivada para los metadatos sobre crema: `--crema-2` sobre `--crema` da 2,43:1 y no pasa. #6B6058 da 5,74:1. Se declara DERIVADO, no medido. */ --tinta-2:#6B6058; /* ALTURAS DE FILA DECLARADAS, una por partición. Ninguna mitad fluye por su cuenta ⇒ `deadspace`/`lopsided` imposibles por construcción. Cada número sale de la aritmética de nitidez de su propio metraje (dirección §4.2): un clip de 720 px no puede ir a sangre en un escritorio de 1440, y por eso el muro y el cartel SE PARTEN cuando la ventana crece. */ /* ⭐ LA ESCALERA DE TAMAÑO DE PIEZA, REVISADA A LA BAJA (r7b). FONDO 100vw sólo la portada PIEZA 168 – 480 px ⭐ TECHO DURO: ninguna fotografía fija ni vídeo se pinta por encima de 480 px CSS EN NINGUNA PARTE, ni a 1440 ni a 2560 (r7: 193 – 759) PLACA 84 – 120 px la miniatura del índice (r7: 152 – 320) RAÍL 120 – 240 px la puerta del cierre (r7: 120 – 340) El diagnóstico en una línea: la pieza más pequeña de esta web (320 px) era más grande que la pieza MEDIA de Esens (284) y más del doble que la de Ozoa (141). Eso es «las fotos muy grandes». Y bajar el tamaño arregla de paso la nitidez: `horno-lena-encendido` es una foto de móvil que a 1.352 px se veía pastosa y a 448 corre a 0,22×. */ --apar-r1:clamp(120px,38vw,168px); /* aparejo móvil · filas 1 y 3 */ --apar-r2:clamp(170px,54vw,224px); /* aparejo móvil · fila 2 (la que cruza)*/ --apar-r:clamp(190px,18.6vw,268px); /* aparejo ≥900 · 268 px a 1440 */ --pista-t:54vw; /* 210 px a 390 ⇒ se ven 1,86 teselas */ /* ⚠️ La dirección publica clamp(300, 34vw, 480) ⇒ 480 px a 1440. Se construye a 374 y se dice por qué: los 480 salían de un par de medias que podían llenar 480 las dos, y `ig-pared-cuadros-italia` no puede —es una banda de 720 × 382 cuyo recorte no puede crecer sin meter personas—. A 374 px la tercera columna queda EXACTAMENTE llena, y con la costura a 12 px (2026-08-17) la aritmética se recalcula: media 223,7 + costura 12 + panel 138,7 = 374,4. Sigue sin sobrar un plano elevado vacío. El cartel baja 106 px más de lo presupuestado, no menos. */ --cartel-h:clamp(300px,26vw,380px); /* ⚠️ EL RAÍL DE LA PUERTA · el fichero mide 400 px de ancho en disco y ése es su techo. A 320 px de ventana la columna de datos que queda al lado no puede bajar de ~130 px, así que el raíl es fluido y no un número fijo. */ --puerta:clamp(120px,30vw,240px); --mapa:280px; /* ⭐ LA PLACA DE LA CARTA: LA FOTO DEJA DE MANDAR LA ALTURA DE LA FILA. El defecto medido sobre la captura de la r7: placa de 320 × ~310 ⇒ fila de ~345 px; el titular y la línea de platos ocupaban los primeros ~100 y el recuento quedaba clavado abajo ⇒ ~200 px de grafito liso a lo ancho de 700, DIEZ VECES SEGUIDAS. Estirar tres elementos sobre 345 px no llena 345 px: los separa. La inversión de la r7b: la placa se estira a la altura de la fila, y LA ALTURA LA ESCRIBE EL TEXTO. L ≥10 platos 3 líneas de avance 24+22+6+56,6+6+15 = 129,6 → 132 M 5–9 2 líneas 24+22+6+37,7+6+15 = 110,7 → 112 S ≤4 con foto 1 línea 24+22+6+18,9+6+15 = 91,9 → 92 `--placa-L-h`, `--placa-M-h` y `--placa-S-h` SE BORRAN: sobran. ⚠️ 2026-08-24 · HABÍA UN CUARTO PELDAÑO, `--fila-O:72px` («Ø sin foto, 1 línea, SIN RAÍL» = 24+22+6+18,9 = 70,9 → 72). Se retira con la variante: ya no queda familia sin fotografía. El registro está más abajo, donde vivían sus reglas. Índice de diez familias: 3×132 + 3×112 + 4×92 = 1.100 px (r7: 2.640). ⚠️ La suma que había escrita aquí —«2×92 + 2×72 = 1.060»— era la del 2026-08-03 y llevaba desde el 22-08 sin recalcularse: aquel día Pescados pasó de Ø a S y el índice ya medía 1.080, no 1.060. */ --placa-w:clamp(84px,26vw,120px); --fila-L:132px; --fila-M:112px; --fila-S:92px; /* La columna de precios, MEDIDA: «23,90 €» suma 65,2 px con los avances más desfavorables de Mulish 600 a 17 px. 4,8rem = 76,8 px deja 11 px. */ --col-precio:4.8rem; --col-canal:0px; --col-pick:0px; /* ⭐ r9 · EL RECORRIDO DEL REVEAL SE MULTIPLICA POR 2,4. Veredicto de Diego (2026-08-03), en mayúsculas: «Y TODAVÍA NO HE VISTO NI UNA PUTA ANIMACIÓN, DESPUÉS DE HABERLO DICHO 10 VECES». Fui a medirlo y era literal: las piezas subían 14 px repartidos a lo largo de media pantalla de scroll. Eso no es una animación discreta, es una animación invisible — que a efectos de quien mira la web es lo mismo que no tenerla. Ahora recorren 34 px y además entran desde 0,975 de escala, y el recorrido de scroll en el que lo hacen se ha acortado a la mitad (`entry 3% → cover 12%`), que es lo que hace que se lea como un movimiento y no como una deriva. El tope de `emil-design-eng` se respeta: nada bloquea nunca la interacción y el retardo total sigue por debajo de 120 ms. */ --rev-y:34px; --rev-d:520ms; } /* ⭐ La placa ya NO cambia de tamaño por breakpoint: `clamp(84px, 26vw, 120px)` la resuelve entera —84 px a 320, 101 a 390, 120 desde 462— y las cuatro alturas de fila las escribe el TEXTO, no la ventana. Por eso el bloque que en la r7 redeclaraba seis variables de placa en tres breakpoints desaparece, y con él `--puerta:220/340`, que era lo que ponía la puerta en 340 px. */ @media (min-width:900px){ :root{ --barra:64px; --ovalo:320px; --mapa:360px; } } /* ── 3 · Base ──────────────────────────────────────────────────────────────── */ *,*::before,*::after{ box-sizing:border-box } /* ⚠️ EL DEGRADADO VA EN `html`, NO EN `body`, Y NO ES UN CAPRICHO DE ESTILO. `body::before` lleva `z-index:-3`, y una capa de z negativo se pinta en el paso 3 del orden de pintado: ANTES de los fondos de bloque de los descendientes (paso 4). Con el degradado en `body`, el grano quedaba DEBAJO del degradado y no se veía absolutamente nada. En `html` el fondo se propaga al lienzo, que se pinta el primero de todos, y el grano cae encima de él y debajo de todo el contenido — que es exactamente donde lo pone la dirección. `background-size: 100% 100%` resuelve contra la caja del elemento raíz, o sea contra la ALTURA DEL DOCUMENTO: las cuatro paradas se reparten por la página entera, no por una ventana. */ html{ background:linear-gradient(180deg, #1C1C1C 0%, /* la portada y §2 */ #212024 34%, /* el índice */ #1A1A1C 68%, /* la pista y el cartel */ #252429 100%); /* la ficha y el cierre */ background-size:100% 100%; background-repeat:no-repeat; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: no-preference){ html{ scroll-behavior:smooth } } /* ══ LA MATERIA DEL SUELO · dos capas, LAS DOS ESTÁTICAS ═════════════════════ Hasta la r7 esto era #1C1C1C liso desde el píxel 0 hasta el 10.114. 1 · EL DEGRADADO LARGUÍSIMO. Cuatro paradas sobre `body`, sin `fixed` (un `background-attachment: fixed` sobre 7.000 px repinta en cada scroll, y eso es exactamente el veredicto «el ordenador se ralentiza»). Δ máximo entre dos paradas contiguas = 7/255 repartido en ~2.300 px de página, es decir UN NIVEL CADA 330 px: no se puede señalar dónde cambia; sólo se nota que el suelo ya no mide lo mismo en todas las capturas. 2 · EL GRANO (efecto 5.5 del catálogo). Tesela de 96 × 96 con `feTurbulence baseFrequency .9 numOctaves 3`, monocroma, repetida. 🔴 ES ESTÁTICO: no respira, no se mueve, cero @keyframes. Una tesela de 96 px en `fixed` es UNA CAPA COMPUESTA, no un re-raster de viewport — no es la malla desenfocada que causó el lag de Diego, y se dice explícitamente para que nadie lo confunda. Bonus real: difumina el bandeado del degradado de arriba, así que las dos capas se necesitan. El fichero lo entregó `media-agent` esta misma ronda: 96 × 96, 1,44 KB, monocromo, sin costura visible al repetir. */ body{ margin:0; background:transparent; /* el degradado vive en `html` — ver arriba */ color:var(--crema); font-family:var(--texto); font-size:var(--t-body); font-weight:400; line-height:1.62; letter-spacing:var(--tr-body); font-variant-numeric:lining-nums; overflow-x:hidden; /* red de seguridad, no sustituto de medir */ } body::before{ content:""; position:fixed; inset:0; z-index:-3; pointer-events:none; background:url("assets/img/grano-96.webp") repeat; background-size:96px 96px; opacity:.035; } @media (max-width:360px){ body{ font-size:16px } } img{ display:block; max-width:100%; height:auto } a{ color:inherit } button{ font:inherit; color:inherit; background:none; border:0; margin:0 } h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0 } ul{ padding:0; list-style:none } [hidden]{ display:none !important } /* [hidden] es regla de UA: cualquier display de autor la gana */ :focus-visible{ outline:2px solid var(--turquesa); outline-offset:3px } .aparejo :focus-visible,.paso :focus-visible,.cartel :focus-visible{ outline-color:var(--crema) } .skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--crema); color:var(--grafito); padding:.75rem 1rem; font-size:var(--t-meta); font-weight:600; } .skip:focus{ left:0 } /* ── 4 · Tipografía de la página ───────────────────────────────────────────── */ .h2{ font-family:var(--display); font-weight:500; font-style:italic; font-size:var(--t-h2); line-height:1.14; letter-spacing:var(--tr-h2); color:var(--crema); text-wrap:balance; } /* ⭐ El ÚNICO

display de la web es el de la carta: es la protagonista. */ .h2--display{ font-size:var(--t-display); line-height:1.06; letter-spacing:var(--tr-display); max-width:16ch; } .deck{ color:var(--crema-2); max-width:40rem } .fuente{ display:block; font-size:var(--t-micro); line-height:1.35; letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--crema-2); max-width:44rem; } .nota{ font-size:var(--t-meta); line-height:1.45; letter-spacing:var(--tr-meta); color:var(--crema-2) } /* EL MOTIVO · «LA BANDA» — 3 × 14 px maciza, en su turquesa. Sale de las tres bandas verticales de la bandera dibujada dentro de su óvalo. Plana, sin radio, sin sombra, nunca girada. Se dibuja SÓLO donde la página dice «esto está encendido»: la etiqueta de sección, la familia abierta, el día elegido, el paso que suena, el hecho verificado. */ .banda{ display:block; flex:0 0 3px; width:3px; height:14px; background:var(--turquesa); } /* SUS PROPIAS PALABRAS · sus citas de Instagram, byte a byte. ⚠️ `white-space: pre-line`: si su frase se rompe se respetan LAS SUYAS; jamás se inyecta un
dentro de su texto. Las mayúsculas son suyas. */ .cita{ display:grid; gap:var(--s2); border-left:1px solid var(--linea); padding-left:var(--s3); max-width:38rem; min-width:0; } .cita__t{ font-size:var(--t-body); line-height:1.5; color:var(--crema); white-space:pre-line } .cita__f{ font-size:var(--t-micro); letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--crema-2); } /* La cita que ES el titular de §4: su frase, entera y con su fuente, compuesta al tamaño de un

. Sin el filete de la izquierda —dentro de una cabecera centrada, un borde a un solo lado es justo la asimetría que el cliente lleva seis rondas pidiendo que no exista— y con la atribución debajo. */ /* ⭐ r8d · LA CABECERA DE §4, y digo lo que este cambio hace y lo que NO hace. Era una cita centrada de 544 px en una caja de 1.032: ~244 px de suelo desnudo a cada lado, que es la definición de un objeto flotando. Ahora la frase corre 42rem y la pista sube a tocarla a 12 px en vez de a 40. 🔴 ESTO NO AÑADE UN SOLO PÍXEL DE IMAGEN, y no voy a fingir que sí: aquí no cabe una pieza sin inventarse una forma nueva y sin un fichero más, y el peso está por encima del techo. Lo que arregla es la composición —el titular deja de ser una isla y el metraje que lo demuestra empieza justo debajo—, no el número de `[lleno]`. */ .cita--titular{ border-left:0; padding-left:0; text-align:center; justify-items:center; max-width:42rem; margin-inline:auto; } #desde-0 .sec__in + .sangra{ margin-top:var(--seam) } .cita--titular .cita__t{ font-size:var(--t-h2); line-height:1.2; letter-spacing:var(--tr-h2) } /* ── 5 · La retícula y LOS TRES NIVELES ────────────────────────────────────── */ .sec{ scroll-margin-top:calc(var(--barra) + 8px) } /* ⚠️ La carta abre con `--pad-1` y CIERRA con `--pad-2`. El pie de §3 y la cabecera de §4 sumaban 80 + 64 = 144 px de suelo desnudo, y aunque está dentro del rango publicado (96–160) se veía como una banda muerta en el render a 1440. Con 64 + 64 = 128 la costura sigue siendo de SUELO —es exactamente la suma de los dos paddings que la delimitan— y sigue siendo monótona contra el hueco interno máximo de 40. */ .sec--n1{ padding-block:var(--pad-1) var(--pad-2); --rev-y:42px; --rev-d:600ms } .sec--n2{ padding-block:var(--pad-2); --rev-y:34px; --rev-d:520ms } .sec--n3{ padding-block:var(--pad-3); --rev-y:26px; --rev-d:460ms } /* ⭐ COSTURA DE CONTACTO Nº 1 DE 2 · el fondo de fuego TOCA la primera fila del aparejo de piedra. Entre los botones de la portada y la primera foto había ~150 px de grafito sin nada: un valor intermedio, demasiado para ser una junta y demasiado poco para ser jerarquía. Aquí no queda hueco — y encima el plinto cruza 24 px hacia dentro de esta sección. (La costura de contacto nº 2 es §5 media → plano de texto, `--seam` en la rejilla del cartel. No hay ninguna más en toda la web.) */ #el-horno{ padding-top:var(--seam) } /* Costura de contacto nº 3 y nº 4, las dos declaradas: el capítulo claro cierra y el oscuro abre CONTRA la cinta del desfile — contacto 4 + cinta 44 + contacto 4. Ahí es donde el render medía la banda negra muerta, y ya no cabe un valor intermedio ni por accidente. */ .sec--carta{ padding-bottom:var(--seam) } #desde-0{ padding-top:var(--seam) } .sec__in{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s5); width:100%; max-width:var(--marco); margin-inline:auto; padding-inline:var(--edge); } /* ⭐ EL OBJETO A SANGRE. Una sola regla, y gobierna los DOS bordes a la vez: nunca uno solo. Por encima de 1408 px consume `--edge` como todo lo demás — que es lo que mantiene Δ = 0,0 px en symmetry-check. */ .sangra{ width:100%; min-width:0 } /* ⭐ EL TECHO DE 1.392 px, Y SALE DE LA ARITMÉTICA DEL TECHO DE PIEZA (480 px). Sin él, a 2560 px de ventana el aparejo pintaría teselas de 821 px y la fachada 852: el techo duro de la r7b («ninguna pieza por encima de 480 px CSS ni a 1440 ni a 2560») se rompería justo donde nadie mira. ⭐ RECALCULADO EL 2026-08-17 con la costura a 12 px (antes 4). Todos BAJAN, así que el techo duro de 480 px sigue en pie con más margen que antes: aparejo (1,4fr+3×1fr, 3 costuras) (1392−36)/4,4 = 308 ✅ (antes 315) cartel (1,15+1+1, 2 costuras) (1392−24)/3,15 = 434 ✅ (antes 439) ficha (1fr/1,9fr, 1 costura) (1392−12)/2,9 = 476 ✅ (antes 479) A 1440 el ancho sigue siendo 100% − 2×--edge = 1.352, exactamente como en la r7 ⇒ `symmetry-check` no se mueve. El techo sólo muerde por encima de 1.568. */ @media (min-width:1408px){ .sangra,.carta{ width:min(calc(100% - 2 * var(--edge)),1392px); margin-inline:auto } } /* Las costuras INTERNAS de una sección miden `--vacio-max` (48 px desde el 2026-08-17, antes 40 — ver la nota de la escalera arriba; es el hueco interno máximo publicado); la costura ENTRE dos secciones es la suma de sus dos paddings (64 px para arriba) o CONTACTO de 12 px. Ninguna interna puede alcanzar a la externa de suelo: ésa es la monotonía. */ .sec__in + .sangra,.sangra + .sec__in{ margin-top:var(--vacio-max) } .sec__cab{ display:grid; gap:var(--s2); justify-items:center; text-align:center; max-width:var(--medida-txt); margin-inline:auto; min-width:0; } .sec__cab .deck,.sec__cab .nota{ margin-inline:auto } .sec__et{ display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--t-micro); font-weight:600; line-height:1.35; letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--crema-2); } .sec__et--h2{ font-family:var(--texto); font-style:normal } .sec__cuerpo{ min-width:0; display:grid; gap:var(--s3) } /* ── 6 · Botones ───────────────────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:48px; padding:.7rem 1.1rem; border-radius:var(--r-control); box-shadow:var(--sombra-1); font-size:var(--t-meta); font-weight:600; line-height:1.2; letter-spacing:var(--tr-meta); text-align:center; text-decoration:none; cursor:pointer; transition:transform 200ms var(--ease-out), background-color 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out); } /* A2 · en un móvil no existe `:hover` y éste es el único feedback que hay. 0 ms a la ida, 140 a la vuelta: la salida más rápida que la entrada. */ .btn:active{ transform:scale(.97); transition-duration:140ms } .btn--pri{ position:relative; isolation:isolate; min-height:54px; background:var(--turquesa); color:var(--grafito); font-size:var(--t-body); font-weight:700; overflow:hidden; } .acc .btn--pri,.remate .btn--pri,.cierre__acc .btn,.accfija .btn{ width:100% } /* A4 · el relleno se descubre de izquierda a derecha AL CARGAR. Estado base = descubierto: si el navegador no anima, el botón ya está lleno. El clip-path va sobre un ::before decorativo, NUNCA sobre una caja observada. */ .btn--pri::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--grafito); transform:scaleX(0); transform-origin:right; } .btn--sec{ border:1px solid var(--linea-2); color:var(--crema); background:transparent; } /* Elevación sólo donde hay puntero fino. Sobre grafito una sombra no se ve, así que la elevación se hace con 3 px de subida y un filete más claro. */ @media (hover:hover) and (pointer:fine){ .btn--pri:hover{ transform:translateY(-3px) } .btn--sec:hover{ border-color:var(--crema); background:rgba(247,233,219,.06) } } /* ── 7 · La barra fija de arriba · CROMO ───────────────────────────────────── */ .bar{ position:fixed; inset:0 0 auto 0; z-index:90; height:var(--barra); padding-inline:var(--edge); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); } /* ESTADO BASE: SÓLIDA. Sin scroll-driven y sin JavaScript la barra se ve siempre, que es lo legible. */ .bar::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--plano-0); opacity:1; } .bar__marca{ display:inline-flex; align-items:center; text-decoration:none; flex:0 0 auto } .bar__logo{ width:auto; height:40px } @media (min-width:900px){ .bar__logo{ height:48px } } @supports (animation-timeline: scroll()){ .bar::before{ animation:barSolida linear both; animation-timeline:scroll(root); animation-range:0 64px } @keyframes barSolida{ from{opacity:0} to{opacity:1} } } .js-bar .bar::before{ opacity:0; transition:opacity 300ms var(--ease-out) } .js-bar .bar.is-solid::before{ opacity:1 } /* ── 8 · La navegación · A7 ──────────────────────────────────────────────────── UN solo