/* ════════════════════════════════════════════════════════════════════════════
   IDEAVIA 2026 · SISTEMA DE BOCETOS
   Extraido de boceto-home.html (v2, 09-08-2026). Una sola fuente de verdad para
   todas las pantallas: si cambia el rojo, el titular o el ritmo, se cambia aqui
   y no en doce archivos.

   Lo que hereda de la home, y que NO se renegocia pantalla a pantalla:
   - Todo el texto va en rojo. No hay gris neutro en el sitio: lo que parece gris
     es el rojo de marca oscurecido contra el blanco. Por eso las variables se
     llaman --tinta-*, no --gris-*: el rojo PURO (#E84332) da 3,98:1 sobre blanco
     y NO cumple AA (4,5:1) en texto de cuerpo. Se reserva para logotipo, cifras
     grandes y titulares 24px+, donde el umbral baja a 3:1.
   - Fira Sans Light (300) en todo. Ningun titular display tipografico: la home
     v2 los retiro. La unica pieza dibujada es el lettering "otra cosa".
   - Bordes rectos, cero radius, cero sombras. La separacion la hacen filetes de
     1 px, bloques de color solido y aire.
   - Rejillas asimetricas con proporciones fr sacadas del mockup, no 50/50.
   ════════════════════════════════════════════════════════════════════════════ */

/* Fira Sans se sirve por CSS del sistema; en los bocetos cae a la del sistema
   operativo si no esta instalada. El boceto no es la web: no incrusto 3 TTF en
   base64 en doce archivos. */
/* ── LAS FUENTES SE SIRVEN, no se buscan instaladas (13-08-2026) ──────────────
   Antes esto era `src:local("Fira Sans Light")` y nada mas. Dos consecuencias que
   nadie habia mirado:
     · En el ordenador de un visitante sin Fira Sans instalada, TODO el sitio menos
       la home salia en Helvetica o Arial. La home no, porque lleva las suyas
       incrustadas en base64: o sea que la home y las fichas se veian distintas.
     · Faltaba el peso 400, que piden cinco reglas de titulillo (`.tarjeta h3`,
       `.paso h3`, `.lista-filete h3`, `.celda h3`, `h3.trabajo`). El navegador lo
       sintetizaba desde el 300 o el 500.

   Ahora se sirven tres archivos de `fuentes/`, sacados de los TTF completos que ya
   estaban en el disco del estudio y subconjuntados una sola vez: latin + latin-A +
   puntuacion + flechas + superindices. **38 KB por peso, 115 KB los tres.**
   Comprobado por script que cubren TODO el texto de las cuatro pantallas — el
   subconjunto anterior no llegaba, y por eso el `²` de «1.100 m²» se dibujaba en
   Arial dentro de una frase en Fira Sans.

   Las rutas son relativas A ESTE ARCHIVO, no a la pagina que lo carga, asi que
   valen igual desde `/` que desde `/casos/coque/`.
   SIN `local()`: con local() el navegador coge la version instalada en la maquina,
   que no tiene por que ser esta ni estar subconjuntada igual. Si se sirve, se sirve.
   Fira Sans es SIL Open Font License: se puede alojar y redistribuir. ========== */
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:300;font-display:swap;
  src:url(fuentes/fira-sans-300.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url(fuentes/fira-sans-400.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url(fuentes/fira-sans-500.woff2) format("woff2")}
/* La CURSIVA de verdad. `.nota` y `.pie-foto` piden `font-style:italic` —son 14
   elementos entre las cuatro pantallas— y sin una cara italica declarada el
   navegador inclina la redonda: eso no es Fira Sans Italic, es Fira Sans torcida,
   con las astas deformadas y sin las formas propias de la a y la e cursivas.
   Solo hace falta el peso 300, que es el que heredan las dos de `body`. */
@font-face{font-family:"Fira Sans";font-style:italic;font-weight:300;font-display:swap;
  src:url(fuentes/fira-sans-300-italica.woff2) format("woff2")}

:root{
  --rojo:#E84332;                                        /* rojo de marca */
  /* 5,13:1 sobre blanco. El rojo puro se queda en 3,98 y no cumple AA en texto. */
  --tinta:color-mix(in srgb, var(--rojo) 86%, #000);
  --tinta-secundaria:color-mix(in srgb, var(--rojo) 92%, #000);      /* 4,61:1 — secundario */
  --tinta-clara:color-mix(in srgb, var(--tinta) 52%, #fff);
  --linea:color-mix(in srgb, var(--rojo) 28%, #fff);
  --blanco:#fff;

  /* acentos de silo. Solo en filetes, numeros y bordes: nunca en texto de cuerpo
     y nunca sustituyendo al rojo de marca. */
  --verde:#1B4922;      /* la mesa */
  --naranja:#EC642A;    /* el lineal */
  --acento:var(--rojo); /* cada pantalla lo redefine si es de silo */

  --kern:0em;   /* kerning de la display. Solo lo usa la home, pero el token vive
                   en los dos archivos para que el juego de variables sea el mismo
                   (familia de color cerrada el 12-08-2026: gana el sistema). */
  --marco:1440px;
  --lat:80px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}

/* ANCLAS · MEDIDO EL 04-09-2026, y corrige el diagnostico que llevaba abierto
   desde el 26-08. El aterrizaje desviado de las siete anclas de
   /la-mesa/branding-restaurantes/ NO era el servidor de pruebas: era
   scroll-behavior:smooth en este mismo selector.

   Lo que hace el navegador al abrir una URL con fragmento es un scroll de
   carga. Si html lleva smooth, ese scroll se anima; en un documento de 32.805
   px la animacion se aborta mientras la pagina sigue componiendo y el
   navegador SE QUEDA EN CERO. Medido con la misma URL y solo esta linea de
   diferencia: con smooth, scrollY=0 en las siete; con auto, scrollY=4048 en
   #fotografia y 5440 en #apertura, exacto. La desviacion variable que se
   anoto entonces (entre 57 y 404 px) es la misma animacion abortandose en
   momentos distintos, no un fallo intermitente.

   Por que se quita en vez de rescatarlo con JS: de los 236 enlaces con
   fragmento del sitio, 90 son a #hablemos y 82 a #por-que-gastronomia y
   #como-trabajamos, y TODOS llegan desde otra pagina, o sea por scroll de
   carga, que es justo lo que smooth rompe. El deslizamiento suave solo
   beneficiaba a los clics dentro de la misma pagina, que son minoria.

   Y el segundo fallo, independiente del primero: sin scroll-margin-top el
   titular aterriza pegado al borde, DEBAJO de la cabecera sticky. :target
   cubre de una vez cualquier ancla del sitio, presente o futura, en lugar de
   ir id por id. Alturas de cabecera medidas EN UNA PAGINA CON ESTA HOJA
   (agencia.html y branding-restaurantes, misma altura): 77 px a 1280, 75 px
   de 390 a 900, y 133 px por debajo de 380, donde la fila envuelve. A cada
   tramo su altura + 16 de aire.

   OJO: la HOME no vale de referencia. Carga ademas home-2026.css, que le sube
   la cabecera, y por eso #hablemos lleva sus propios numeros alli (93/97/55).
   Un id gana a :target en especificidad, asi que esa regla sigue mandando.

   El corte de abajo va en 389 y no en 479 a proposito: entre 390 y 479 la
   cabecera mide 75, y darle 149 dejaria 74 px de aire de mas — el mismo error
   que ya se corrigio en #hablemos el 28-08-2026. */
:target{scroll-margin-top:93px}
@media (max-width:900px){ :target{scroll-margin-top:91px} }
@media (max-width:389px){ :target{scroll-margin-top:149px} }
body{
  background:var(--blanco);color:var(--tinta);
  font-family:"Fira Sans",Helvetica,Arial,sans-serif;font-weight:300;
  font-size:18px;line-height:1.6;
}
img{max-width:100%}

/* ─────────── estructura ─────────── */
.wrap{max-width:var(--marco);margin:0 auto;padding:0 var(--lat)}
.bloque{position:relative;padding:96px 0;border-top:1px solid var(--linea)}
.bloque:first-of-type{border-top:0}
.bloque.apretado{padding:64px 0}

/* ─────────── andamiaje del boceto (no va a produccion) ─────────── */
.tag{font-size:11px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-clara);display:flex;gap:10px;align-items:center;margin-bottom:32px}
.tag::before{content:"";width:18px;height:2px;background:var(--rojo);flex:none}
.nota{font-size:12px;color:var(--tinta-clara);letter-spacing:.04em;display:block;
  margin-top:10px;font-style:italic;line-height:1.55}
.nota code{font-style:normal;font-family:Consolas,monospace;font-size:11px}
/* ANDAMIAJE DE BOCETO — retirado el 14-08-2026.
   `.alerta`, `.leyenda`, `.pantalla-rotulo` y `.swatch` no las usa ninguna pantalla de
   produccion (0 usos) y solo viven en BOCETOS (25, 22, 21 y 2 usos). Las reglas siguen
   intactas en `BOCETOS/sistema-2026.css`, que es una copia aparte: los bocetos no se
   tocan y las once pantallas que faltan ya no arrastraran esto al pasar a produccion.
   NO devolverlas aqui. Si una pantalla nueva las necesita, es que es un boceto. */

/* caja roja = imagen o ilustracion pendiente de producir */
.img{background:var(--rojo);color:#fff;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:20px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  line-height:1.5}
.img span{max-width:82%}
/* Proporciones. LA TARJETA DE CASO ES 3:4 — cerrado el 12-08-2026, y ya estaba asi en
   `.caso-foto, .caso .img` mas abajo. La guia del 25-07 decia 4:5 y esta desactualizada.
   OJO A LA ESPECIFICIDAD: `.caso .img` gana a `.r-4x5`. No poner `r-4x5` dentro de un `.caso`.
   `.r-4x5` es valida fuera de las tarjetas de caso: editorial, mapas y fotos de apoyo.

   ── MEDIDAS DE ENTREGA DE LAS PIEZAS DEL INDICE DE CASOS (medido el 04-09-2026) ──
   La rejilla `.casos-rejilla` deja de crecer en 1280 px: medido a 1440 y a 1920 da lo
   mismo, asi que las casillas tienen un techo y estas cifras no caducan al salir un
   monitor mas grande.

     ESPACIO SIMPLE  `.caso`             pinta como maximo  407 x 542   proporcion 3:4
     ESPACIO DOBLE   `.caso.destacado`   pinta como maximo  843 x 542   proporcion 14:9

   SE ENTREGA AL DOBLE, que es lo que pide una pantalla de densidad 2x:

     SIMPLE ->   840 x 1120 px   (3:4 exacto)
     DOBLE  ->  1750 x 1125 px   (14:9 exacto)
     Peso: 180 KB o menos las dos.

   Nunca por debajo de esas cifras. Con `object-fit:cover` una pieza mas grande se
   recorta sin deformarse; una mas pequena se escala y se ve blanda.

   OJO, CONFLICTO SIN RESOLVER: mas abajo se declara `aspect-ratio:16/9` para la
   casilla doble, pero lo que se PINTA es 14:9 (843x542, comprobado a 1100, 1440 y
   1920). Hasta que se decida cual manda, las dobles se encuadran con aire arriba y
   abajo para que nada importante caiga en la franja que se recorta. */
.r-1x1{aspect-ratio:1}
.r-3x4{aspect-ratio:3/4}   /* tarjeta y fotografia de caso */
.r-4x5{aspect-ratio:4/5}   /* editorial y apoyo · NUNCA dentro de .caso */
.r-16x9{aspect-ratio:16/9}
.r-21x9{aspect-ratio:21/9}

/* ─────────── tipografia ─────────── */
/* El titular de seccion del sitio. Es el mismo valor que la home usa en el bloque
   del reel y en el de Coque, que es la relacion titulo/parrafo dada por buena. */
.titular-seccion{font-size:clamp(32px,2.6vw + 12px,42px);font-weight:300;letter-spacing:0;
  line-height:1.15;max-width:24ch}
.titular-seccion.ancho{max-width:32ch}
h1.titular-pagina,h2.titular-pagina{font-size:clamp(38px,3.4vw + 14px,58px);font-weight:300;letter-spacing:-.01em;
  line-height:1.1;max-width:20ch}
h3.trabajo{font-size:22px;font-weight:400;letter-spacing:-.005em;line-height:1.3}
h4.trabajo{font-size:19px;font-weight:500;line-height:1.35}
.lead{font-size:22px;line-height:1.5;font-weight:300;max-width:44ch}
.txt{max-width:66ch}
.txt + .txt{margin-top:1.6em}
.txt b,.resalte{font-weight:500}
.meta{font-size:14px;color:var(--tinta-secundaria);letter-spacing:.02em}
.rotulo{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-secundaria);
  margin-bottom:14px}
/* la capa literal del sistema de tres capas. Puede ser pequeña; no puede faltar. */
.literal{font-size:clamp(16px,1.35vw,19px);color:var(--tinta-secundaria);max-width:56ch;margin-top:18px}
.claim{font-size:clamp(24px,3.1vw,42px);line-height:1.22;font-weight:300;
  letter-spacing:-.018em;max-width:23ch}

/* "Now playing:" con el triangulo de play. Recurso de voz de la home. */
.ahora{display:flex;align-items:center;gap:12px;color:var(--tinta);font-weight:500;
  font-size:19px;letter-spacing:.01em;margin-bottom:49px}
.ahora::before{content:"";flex:none;border-style:solid;border-width:17px 0 17px 26px;
  border-color:transparent transparent transparent var(--rojo)}

/* ─────────── botones y enlaces ─────────── */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
/* TRACKING IGUAL QUE EL RESTO DEL SITIO. Estaba en +.02em mientras el cuerpo, la
   navegacion y los enlaces van todos en negativo —-.03em el texto, -.036 el menu—,
   y a 24 px la diferencia de .05em se ve: el boton parecia de otra tipografia.
   El positivo solo se justifica en versalitas, y el boton va en caja baja. */
.btn{display:inline-block;padding:14px 28px;font-size:15px;letter-spacing:-.03em;
  border:1px solid var(--rojo);background:var(--rojo);color:#fff;text-decoration:none}
.btn.sec{background:transparent;color:var(--tinta)}
.btn.inv{background:#fff;border-color:#fff;color:var(--tinta)}
/* el boton grande del sitio: 175x71 minimo y 24 px, que es lo que le permite cumplir
   contraste con el rojo de marca intacto (texto grande, 3:1). */
.btn-camino{min-width:175px;min-height:71px;display:inline-flex;align-items:center;
  justify-content:center;font-size:24px;line-height:1;text-transform:lowercase;padding:14px 28px}
.btn:focus-visible,.link:focus-visible,a:focus-visible{outline:2px solid var(--tinta);
  outline-offset:3px}
.link{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--rojo);font-size:16px}

/* ─────────── cabecera ─────────── */
.head{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1px solid var(--linea)}
.head .wrap{display:flex;align-items:center;gap:32px;height:76px}
/* El logotipo va en linea (lo inyecta piezas.js) y hereda el color: un solo archivo
   sirve para el rojo de la cabecera y el blanco del pie. */
/* El logotipo va en el ROJO DE MARCA a pelo, no en la tinta roja del texto.
   Es la unica pieza de la cabecera que no sigue la regla de contraste del texto:
   es marca, no lectura, y en la home ya va asi. */
/* la .logo de 132px se retira: la buena, de 121 px, esta mas abajo. *//* FAMILIA LOGOTIPO, cerrada el 13-08-2026. Mecanismo del SISTEMA, tamano de la
   HOME, que es la pantalla aprobada:
     - El color va en el CONTENEDOR y el trazado hereda con fill:currentColor, asi
       que un solo trazado sirve para el rojo de la cabecera y el blanco del pie.
       Fijar el fill en el SVG, como hacia la home, obliga a duplicarlo.
     - 121 px de ancho = 28 px de alto con este viewBox (relacion 4,329), que es la
       medida del mockup. El sistema llevaba 132 px: el logotipo era un 9 % mas
       grande en las fichas que en la home y cambiaba de tamano al pasar de una a
       otra.
     - El rojo es el de MARCA a pelo, no la tinta roja del texto: es marca, no
       lectura. */
.logo{flex:none;display:block;width:121px;color:var(--rojo)}
.logo svg{display:block;width:100%;height:auto;fill:currentColor}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px}
.nav a{color:var(--tinta);text-decoration:none}
.nav a.on{border-bottom:1px solid var(--rojo)}
.idioma{font-size:14px;color:var(--tinta-secundaria);letter-spacing:.06em;flex:none}
.head .btn{font-size:24px;padding:9px 24px;line-height:1.15}
.hamburguesa{display:none}

/* ─────────── migas ─────────── */
.migas{font-size:13px;color:var(--tinta-secundaria);letter-spacing:.02em;margin-bottom:28px}
.migas a{color:var(--tinta-secundaria);text-decoration:none;border-bottom:1px solid var(--linea)}
.migas span{opacity:.6;margin:0 8px}

/* ─────────── rejillas de dos columnas (las de la home) ─────────── */
.dos-col{display:grid;gap:71px;align-items:start}
.dos-col.reel{grid-template-columns:590fr 619fr}   /* el reparto del bloque del reel */
.dos-col.coque{grid-template-columns:659fr 466fr;gap:155px}
.dos-col.mitades{grid-template-columns:1fr 1fr;gap:48px}
.dos-col .txt{max-width:none}

/* ─────────── tarjetas de caso (componente compartido) ─────────── */
.casos-rejilla{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.casos-rejilla.dos{grid-template-columns:repeat(2,1fr)}
.caso-foto,.caso .img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  background:var(--linea);margin-bottom:17px}
.caso-enlace{display:block;color:inherit;text-decoration:none}
.caso-enlace:focus-visible{outline:2px solid var(--rojo);outline-offset:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.chip{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-secundaria);
  border:1px solid var(--linea);padding:5px 10px}/* 66 px, el valor de la home, que es la unica pantalla que usa esta clase. */
.casos-pie{margin-top:66px}
/* la variante a doble ancho del listado */
.caso.destacado{grid-column:span 2}
.caso.destacado .caso-foto{aspect-ratio:16/9}
/* Filete de contorno (19-08-2026). Las fichas admiten imagenes con fondo blanco
   —la de Vinos de Madrid lo es— y sin contorno la tarjeta pierde su caja y la
   fila se lee mal. Nacio en `home-2026.css` y subio aqui en cuanto `/casos/` lo
   necesito. NO CAMBIA LA MEDIDA: con `box-sizing:border-box` se pinta por dentro. */
.caso-foto{border:1px solid var(--linea)}

/* Estado: TARJETA SIN FOTOGRAFIA (26-08-2026). Las cinco fichas de la tanda de
   rescates entran en el indice antes de que exista material grafico del cliente.
   Es un estado del sistema, no un hueco: misma caja 3:4, mismo filete y mismo
   fondo que la foto que vendra, para que la rejilla no se descuadre ni salte
   cuando entren las imagenes. Se retira sustituyendo el <div> por el <img>, sin
   tocar ninguna otra regla. */
.caso-sinfoto{display:block;width:100%;aspect-ratio:3/4;background:var(--linea);
  border:1px solid var(--linea);margin-bottom:17px}
.caso.destacado .caso-sinfoto{aspect-ratio:16/9}

/* ─────────── rejilla de tarjetas (servicios, recursos, entregables) ─────────── */
.tarjetas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.tarjetas.cuatro{grid-template-columns:repeat(4,1fr)}
.tarjetas.dos{grid-template-columns:repeat(2,1fr)}
.tarjeta{background:#fff;padding:34px 30px 38px;display:flex;flex-direction:column}
.tarjeta h3,.tarjeta h4{font-size:20px;font-weight:400;line-height:1.25;margin-bottom:12px}
.tarjeta p{font-size:15px;color:var(--tinta-secundaria);margin-bottom:20px}
.tarjeta .link{margin-top:auto;font-size:15px;align-self:flex-start}

/* ─────────── pasos numerados ─────────── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.pasos.cinco{grid-template-columns:repeat(5,1fr)}
.pasos.tres{grid-template-columns:repeat(3,1fr)}
.paso{background:#fff;padding:36px 26px 40px;border-top:3px solid transparent}
.paso .n{font-size:13px;letter-spacing:.16em;color:var(--acento);display:block;margin-bottom:16px}
.paso h3{font-size:20px;font-weight:400;margin-bottom:10px;line-height:1.25}
.paso p{font-size:15px;color:var(--tinta-secundaria)}
.paso.clave{border-top-color:var(--acento)}

/* ─────────── cifras ─────────── */
.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.cifra{background:#fff;padding:32px 24px}
.cifra .n{font-size:52px;color:var(--rojo);line-height:1;display:block;margin-bottom:12px;
  font-weight:300}
.cifra .d{font-size:14px;color:var(--tinta-secundaria);line-height:1.4}

/* ─────────── lista con filete (perfiles, entregables, indices) ─────────── */
.lista-filete{list-style:none;border-top:1px solid var(--linea)}
.lista-filete li{border-bottom:1px solid var(--linea);padding:22px 0;display:grid;
  grid-template-columns:56px 1fr;gap:24px;align-items:baseline}
.lista-filete .n{font-size:13px;letter-spacing:.14em;color:var(--acento)}
.lista-filete h3,.lista-filete h4{font-size:20px;font-weight:400;margin-bottom:6px}
.lista-filete p{font-size:15px;color:var(--tinta-secundaria);max-width:64ch}

/* ─────────── ficha tecnica (caso) ─────────── */
/* Las columnas se cuentan solas. Iba con `repeat(6,1fr)` fijo y la ficha de Coque
   se quedo en 5 celdas al fundir «Año» y «Relacion», que decian lo mismo: la sexta
   columna quedaba vacia y se veia como una franja del color de filete, porque el
   fondo del contenedor ES la linea. Con auto-fit no hay pistas vacias que pintar.
   Importa porque son 21 fichas y ninguna va a tener el mismo numero de filas.
   Las dos consultas de mas abajo (1080 y 900) siguen mandando en movil. */
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--linea);
  border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.ficha div{background:#fff;padding:20px 18px}
.ficha dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-clara);
  margin-bottom:8px}
.ficha dd{font-size:16px;line-height:1.35}

/* ─────────── banda a sangre ───────────
   Una pieza del cliente cruzando la ventana entera, fuera del `.wrap`. Es el
   respiro de las fichas de caso: en Coque la gramatica de formas, en Taberna
   Pedraza el arte final del carton de la huevera.
   Unificado el 12-08-2026: era `.banda-svg` en Coque y estaba a punto de nacer un
   tercer nombre en Pedraza. Sirve para SVG y para imagen — lo unico que hace es
   dejar que la pieza crezca con la ventana sin deformarse.

   Ojo con el alto: una banda de proporcion 3,4:1 mide 425 px a 1440 y 567 px a
   1920. Cuanto mas cuadrada sea la pieza, mas ventana se come. No se recorta con
   `max-height` + `cover` sin mirar que hay dentro: en la de Pedraza los sellos y
   el bocadillo estan arriba y se perderian. */
.banda{display:block;width:100%;height:auto;margin:40px 0 8px}

/* ── .banda.rematada · la banda cerrada con filete arriba y abajo ──
   SUBIDA AL SISTEMA EL 14-08-2026 con UNA sola ficha usandola, y a proposito:
   el usuario la dio por buena y dijo que se repetira en otros clientes. Es una
   DECISION de diseno declarada reutilizable, no una coincidencia del material
   —que es la linea que separa lo que sube de lo que no—.

   Va como MODIFICADOR y no reescribiendo `.banda`: Coque y Pedraza la usan sin
   filetes y no se tocan.

   Son dos reglas, y la segunda es la que no se ve venir: todo `.bloque` dibuja ya
   su filete superior, asi que sin anularlo salen DOS lineas casi pegadas debajo
   de la banda. Y el margen se va a cero porque con filetes el aire lo tiene que
   poner el relleno de 96 px de los bloques de al lado, que ademas es simetrico;
   los 40/8 de `.banda` dejaban el filete de abajo pegado al del bloque siguiente. */
.banda.rematada{margin:0;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.banda.rematada + section.bloque{border-top:0}

/* ─────────── pieza dentro de una columna de texto ───────────
   Una imagen del trabajo con su pie, metida en la columna y no a sangre. Es lo
   que permite que un bloque de relato tenga una prueba al lado sin convertirse en
   galeria. El pie usa `.nota`, que ya es la voz de la casa para el margen. */
.figura{margin:0}
/* La regla alcanza tambien a `video`: las spokes meten metraje dentro de una
   `.figura`. Sin esto el video sale a su ancho nativo y revienta la rejilla
   —paso el 19-08-2026 al publicar cartas-y-menus—. Gemela de la de
   BOCETOS/sistema-2026.css: si se toca una, se toca la otra. */
.figura img,
.figura video{display:block;width:100%;height:auto}
.figura figcaption{margin-top:12px}

/* ─────────── celdas de una ficha de caso ───────────
   La rejilla de cajas con filete que enumera las partes de un trabajo. Subida al
   sistema el 12-08-2026, al maquetar la segunda ficha: en Coque se llamaba
   `.espacios/.espacio` (los cuatro espacios de la casa) y en Pedraza
   `.encargos/.encargo` (los cuatro encargos), y eran REGLA POR REGLA el mismo
   componente. Dos nombres para lo mismo es como empieza una divergencia: a la
   tercera ficha habria tres. El nombre es neutro a proposito — lo que enumera lo
   dice el contenido, no la clase.
   `--celdas` es cuantas caben por fila; por defecto 4. */
.celdas{display:grid;grid-template-columns:repeat(var(--celdas,4),1fr);
  border:1px solid var(--linea)}
.celda{padding:32px 24px 36px}
.celda + .celda{border-left:1px solid var(--linea)}
.celda .n{font-size:12px;letter-spacing:.16em;color:var(--rojo);display:block;margin-bottom:14px}
.celda h3{font-size:20px;font-weight:400;margin-bottom:8px}
.celda p{font-size:15px;color:var(--tinta-secundaria)}
@media (max-width:1080px){
  .celdas{grid-template-columns:1fr}
  .celda + .celda{border-left:0;border-top:1px solid var(--linea)}
}

/* ─────────── el mosaico de piezas ───────────
   SUBIDO AL SISTEMA EL 14-08-2026, al montar la cuarta ficha. Estaba duplicado
   palabra por palabra en el <style> de Pedraza (los cuatro encargos) y en el de
   dOrio (cuatro referencias de la gama). Vinos de Madrid iba a ser la TERCERA
   copia, que es exactamente lo que el patron anunciaba.

   De las 12 reglas, 10 eran identicas. Solo divergian dos cosas, y ninguna era
   una decision de diseno:
   - la PROPORCION de la caja, que la manda el material (4/5 en Pedraza porque
     sus JPG son 1079x1331; 1/1 en dOrio porque los suyos son 800x800). Va como
     `--mos`, asi que cada ficha declara la suya y nadie redefine el componente.
   - que Pedraza ademas lleva VIDEO en una de las cajas. La version del sistema
     cubre `img` y `video`, que a una ficha sin metraje no le cuesta nada.

   Anchos DESIGUALES a proposito para que la franja tenga ritmo y no parezca un
   catalogo; proporcion IGUAL en todas para que el recorte sea el mismo y el
   material no se maltrate.

   NO se subio `.video-cabecera`, que tambien aparecia identica en Coque y en
   Pedraza: es una sola declaracion de `aspect-ratio` y coincide porque los dos
   videos son 672x656. Eso es una coincidencia del material, no un componente.
   Subirla habria congelado en el sistema la medida de dos archivos concretos. */
/* Sin filete arriba ni abajo (18-08-2026, a peticion del usuario): el mosaico ya
   tiene forma propia y los dos filetes lo encajonaban. */
.mosaico{display:grid;grid-template-columns:1.15fr .85fr 1fr 1fr}
/* Modificador de DOS piezas. `.mosaico` nació con la gama de dÓrio, que son cuatro
   botellas, y con dos hijos la primera se queda la columna de 1,15fr: como `.marco`
   cuelga de `aspect-ratio`, sale también más alta. Dos en una fila van igualadas.
   Vivió en el `<style>` de Guilis con la nota de subirla en cuanto una segunda ficha
   la necesitara. La segunda es El Jaral de la Mira, 27-08-2026. */
.mosaico.dos{grid-template-columns:1fr 1fr}
.mos{border-left:1px solid var(--linea);display:flex;flex-direction:column}
.mos:first-child{border-left:0}
.mos .marco{overflow:hidden;background:var(--linea);aspect-ratio:var(--mos,1)}
.mos .marco img,.mos .marco video{width:100%;height:100%;object-fit:cover;display:block}
.mos figcaption{padding:16px 18px 22px}
.mos figcaption .n{display:block;font-size:11px;letter-spacing:.16em;color:var(--rojo);
  margin-bottom:6px}
.mos figcaption b{font-size:15px;font-weight:400}
@media (max-width:1080px){
  .mosaico{grid-template-columns:1fr 1fr}
  .mos:nth-child(3){border-left:0}
  .mos:nth-child(3),.mos:nth-child(4){border-top:1px solid var(--linea)}
}
@media (max-width:640px){
  /* El modificador `.dos` tiene mas especificidad que `.mosaico` y ganaba tambien aqui:
     los mosaicos de dos piezas se quedaban en dos columnas en el movil, a la mitad de
     ancho y sin poder leerse. Se repite el selector para que apilen como el resto
     (02-09-2026, a raiz de la ficha de Campos Rey). */
  .mosaico,.mosaico.dos{grid-template-columns:1fr}
  .mos{border-left:0;border-top:1px solid var(--linea)}
  .mos:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){.mos .marco video{display:none}}

/* ─────────── F-02b · la frase citable ───────────
   Los cuatro hechos juntos y en texto plano: cliente, sector, provincia y que
   hacemos. Es la unidad que un motor de IA cita ENTERA, y el patron que produjo
   la unica cita comprobada del dominio (la ficha de dorio en ChatGPT).
   NO usa .claim: .claim es una frase-bandera de 23ch y hasta 42px, y esto es un
   parrafo de hechos que tiene que poder leerse de corrido. Ancho de lectura,
   cuerpo grande, y el filete de arriba para que se lea como una declaracion.
   Va en las 21 fichas. */
.citable{border-top:1px solid var(--linea);padding-top:24px;max-width:58ch;
  font-size:21px;line-height:1.45;font-weight:300}
.citable b{font-weight:500}
.citable + .txt{margin-top:1.6em}
/* Su sitio es la ENTRADILLA del encabezado, debajo del titular: primero que es
   esto, despues la historia. En la columna del hero el tope de 58ch no aplica
   —la columna ya es mas estrecha—, y el filete de arriba hace de separacion con
   el titular. */
.hero-caso .texto .citable{margin-top:26px}

/* ─────────── plantilla de ficha de caso ───────────
   Subido desde el CSS local de `05-caso-coque.html` el 12-08-2026, al pasar la
   primera ficha a produccion. Esto es plantilla de las 21, no decoracion de una:
   si vive en la pantalla, la segunda ficha lo copia y a la tercera hay tres
   versiones distintas. Lo que SI se queda en la pantalla es lo que solo le pasa a
   ese cliente (la banda de la gramatica de Coque, sus cuatro espacios). */

/* El video apoya su base en el filete que cierra el bloque, como todas las piezas
   del sistema: align-items:end en la rejilla y el bloque sin relleno inferior. El
   texto se queda arriba con align-self, que si no bajaria con el. */
.hero-caso{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.hero-caso .texto{align-self:start;padding-bottom:64px}
.hero-caso .video-caja{margin-right:calc(-1 * var(--lat))}   /* sangra por la derecha */

/* La relacion de aspecto se declara con la NATIVA del archivo, no redondeada:
   reserva el hueco antes de que cargue y no hay salto de maqueta. */
.video-caja{position:relative;overflow:hidden;background:var(--linea)}
/* Vale para video y para imagen: hay fichas cuyo encabezado es una fotografia y no
   un video, y el hueco es el mismo. Añadido el 13-08-2026 con dOrio, que no tiene
   metraje. */
.video-caja video,.video-caja > img{display:block;width:100%;height:100%;object-fit:cover}

/* El año va EN EL MARGEN, en vertical, acompañando al hito mientras dura el bloque
   — y sin empujar el contenido, que es lo que hacia antes.

   El fallo, corregido el 13-08-2026: sin el margen negativo, un bloque con año
   empezaba 72 px mas a la derecha (40 de columna + 32 de hueco) que uno sin el. Y en
   una ficha se alternan: «El punto de partida», los bloques de fases y «El resultado»
   llevan año; «La narrativa» y «Servicios relacionados» no. Media pagina metida y
   media no.

   Lo que manda es el borde de .wrap: ahi empiezan el titular, las migas, la ficha
   tecnica, el mosaico y las tarjetas. Tirando la rejilla 72 px a la izquierda, el
   contenido cae en esa misma linea y el año se aloja en el relleno lateral, que mide
   80 px y le sobra.

   Se hace con margen negativo y no posicionando el año en absoluto, porque eso
   romperia su position:sticky, que es lo que hace que acompañe al scroll. */
.con-año{display:grid;grid-template-columns:40px 1fr;gap:32px;align-items:start;
  margin-left:calc(-40px - 32px)}
.hito-año{position:sticky;top:100px;font-size:13px;letter-spacing:.16em;color:var(--rojo);
  writing-mode:vertical-rl;text-orientation:mixed}

@media (max-width:1080px){
  .hero-caso{grid-template-columns:1fr;gap:36px}
  .hero-caso .video-caja{margin-right:0}
  .con-año{grid-template-columns:1fr;gap:12px;margin-left:0}
  .hito-año{position:static;writing-mode:horizontal-tb}
}
/* Quien pide menos movimiento no recibe video en bucle: se queda el poster y
   aparecen los controles para verlo si quiere. Lo decide el, no nosotros. */
@media (prefers-reduced-motion:reduce){ .video-caja video{display:none} }

/* ─────────── FAQ ─────────── */
.faq{border-top:1px solid var(--linea);max-width:900px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;font-size:21px;font-weight:300;
  display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--rojo);font-size:26px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 24px;color:var(--tinta-secundaria);max-width:64ch;font-size:16px}
.faq p + p{padding-top:0;margin-top:-8px}

/* ─────────── filtros ─────────── */
.filtros{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}
.filtros a{font-size:15px;padding:9px 18px;border:1px solid var(--linea);color:var(--tinta);
  text-decoration:none}
.filtros a.on{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* ─────────── formulario ─────────── */
.campo{margin-bottom:21px}
.campo > label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.campo input[type=text],.campo input[type=email],.campo input[type=tel],.campo textarea,
.campo select{width:100%;font:inherit;font-size:16px;color:var(--tinta);padding:14px 18px;
  border:1px solid var(--linea);background:#fff;border-radius:0}
.campo textarea{min-height:170px;resize:vertical}
.campo ::placeholder{color:var(--tinta-clara)}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:2px solid var(--rojo);
  outline-offset:-2px;border-color:var(--rojo)}
.privacidad{display:flex;gap:10px;align-items:flex-start;margin:26px 0 30px;font-size:13px;
  color:var(--tinta-secundaria)}
.privacidad input{margin-top:3px;accent-color:var(--rojo);flex:none}
.btn-enviar{min-width:181px;min-height:74px;font-size:24px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--rojo);background:var(--rojo);
  color:#fff;cursor:pointer;font-family:inherit;font-weight:300}
/* opciones seleccionables del briefing */
.opciones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.opcion{background:#fff;padding:20px 22px;display:flex;gap:12px;align-items:flex-start;
  font-size:16px;cursor:pointer}
.opcion input{margin-top:5px;accent-color:var(--rojo);flex:none}

/* ─────────── bloque de cierre rojo (componente de home) ─────────── */
.cierre{background:var(--rojo);color:#fff;padding:120px 0;border:0}
.cierre .tag{color:rgba(255,255,255,.55)}
.cierre .tag::before{background:#fff}
.cierre .titular-seccion{color:#fff}
.cierre p{max-width:48ch;font-size:22px;margin-top:24px;color:#fff}
.cierre .nota{color:rgba(255,255,255,.75)}
.cierre p,.cierre .titular-seccion{max-width:34ch}

/* La figura del cierre. Se mide por la ALTURA del bloque, no por un ancho en px: el
   alto lo pone el texto y con un ancho fijo la figura se queda pequeña en cuanto el
   bloque crece. Recortada por el canto derecho, que es de donde entra. */
.cierre{position:relative;overflow:hidden}
.cierre .wrap{position:relative;z-index:1}
.cierre .ilu{position:absolute;right:7%;bottom:0;height:112%;width:auto;z-index:0}


.siguiente .titular-seccion{max-width:22ch}

/* ─────────── pie ─────────── */
.pie-capa{position:relative}
.pie-capa img{position:absolute;right:var(--lat);bottom:0;width:163px;height:auto;
  pointer-events:none}
.pie{background:var(--rojo);color:#fff;padding:61px 0 96px;border-top:0}
.pie a{color:#fff;text-decoration:none}
.pie-logo{display:block;width:100%;color:#fff;margin-bottom:56px}
.pie-logo svg{display:block;width:100%;height:auto;fill:currentColor}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;font-size:15px}
.pie h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:18px;
  font-weight:500;opacity:.7}
.pie ul{list-style:none}
.pie li{padding:5px 0}
.legal{border-top:1px solid rgba(255,255,255,.3);margin-top:56px;padding-top:24px;font-size:13px;
  display:flex;gap:24px;flex-wrap:wrap;opacity:.85}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}

/* ─────────── responsive ─────────── */
@media (max-width:1080px){
  :root{--lat:24px}
  .dos-col{grid-template-columns:1fr !important;gap:40px}
  .casos-rejilla,.casos-rejilla.dos{grid-template-columns:1fr;gap:48px}
  .caso.destacado{grid-column:auto}
  .tarjetas,.tarjetas.cuatro,.tarjetas.dos,.pasos,.pasos.cinco,.pasos.tres,
  .cifras,.opciones{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr 1fr}
  .pie-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  body{font-size:17px}
  .bloque{padding:64px 0}
  .head .wrap{flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:14px;gap:14px}
  .head .btn{padding:8px 20px;margin-left:auto}
  .head .idioma{margin-left:auto}
  .nav{display:none}
  .head.abierto .nav{display:flex;flex-direction:column;gap:0;flex-basis:100%;order:9;
    margin-top:6px;border-top:1px solid var(--linea)}
  .head.abierto .nav a{padding:15px 0;font-size:20px;border-bottom:1px solid var(--linea)}
  .hamburguesa{display:block;margin:0 auto;width:44px;height:44px;padding:0;border:0;
    background:none;cursor:pointer;position:relative}
  .hamburguesa span,.hamburguesa span::before,.hamburguesa span::after{content:"";
    position:absolute;height:2px;width:26px;background:var(--tinta);transition:transform .18s ease}
  .hamburguesa span{left:9px;top:21px}
  .hamburguesa span::before{left:0;top:-8px}
  .hamburguesa span::after{left:0;top:8px}
  .head.abierto .hamburguesa span{background:transparent}
  .head.abierto .hamburguesa span::before{transform:translateY(8px) rotate(45deg)}
  .head.abierto .hamburguesa span::after{transform:translateY(-8px) rotate(-45deg)}
  .pie-grid{grid-template-columns:1fr}
  .pie-capa img{width:104px;right:24px}
  .ficha{grid-template-columns:1fr}
  .cierre{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){
  /* El html ya no lleva scroll-behavior:smooth desde el 04-09-2026, asi que
     aqui no queda nada que anular. Lo mismo pasa en home-2026.css:58. */
  .hamburguesa span,.hamburguesa span::before,.hamburguesa span::after{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   AÑADIDO 10-08-2026 · lo que trae el PSD «La agencia A-Recovered5»
   Dos cosas nuevas, y las dos son sistema, no decoracion de una pantalla.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─────────── 1 · reglas de columna desbordadas ───────────
   En el PSD los separadores de las rejillas NO se paran en la caja de la tarjeta:
   suben hasta el filete que abre el bloque y bajan hasta el que lo cierra. Es lo
   que hace que la pagina se lea como una reticula y no como una pila de cajas.

   No se resuelve con el gap de la rejilla —eso solo pinta entre celdas— sino con
   una capa de reglas que ocupa el bloque entero y se alinea a las mismas columnas.
   Va en un elemento aparte y con aria-hidden: es dibujo, no contenido.

   Uso:
     <section class="bloque lineado" style="--cols:4">
       <div class="reglas" aria-hidden="true"><i></i><i></i><i></i></div>
       <div class="wrap"> … </div>
     </section>
   Tantos <i> como separadores: cols - 1.                                        */
.lineado{position:relative}
.reglas{
  position:absolute;inset:0;pointer-events:none;
  /* mismas guias que el contenido: el marco de 1440 y los margenes laterales */
  max-width:var(--marco);margin:0 auto;padding:0 var(--lat);
  display:grid;grid-template-columns:repeat(var(--cols,3),1fr);
}
/* El primer <i> cae en la columna 2, asi que su borde izquierdo es el primer
   separador. Por eso hay cols-1 y no cols. */
.reglas i{grid-column:auto;border-left:1px solid var(--linea)}

/* ── DOS REGLAS DE USO, aprendidas en la ficha de Coque el 12-08-2026 ──────────
   Las dos veces que esto se rompio fue por lo mismo: la capa ocupa el BLOQUE
   ENTERO, y el bloque tenia dentro algo que no era la rejilla.

   1 · SOLO en bloques cuyo contenido sea una rejilla de columnas IGUALES
       (`repeat(n,1fr)`). Si dentro hay un texto corrido, un `.con-año` o
       cualquier rejilla asimetrica, el filete cae al 50 % y PARTE EL PARRAFO
       por la mitad. Un bloque de una sola columna no tiene separadores que
       desbordar: no lleva `lineado`.
       Excepcion medida: `.dos-col.reel` (590/619) con `--cols:2` SI vale — la
       linea real cae a 1,2 % del centro y eso son ~15 px dentro de un hueco de
       71 px, o sea que el filete sigue cayendo en el aire del hueco.

   2 · Si el bloque lleva un TITULAR encima de la rejilla, la capa lo cruza.
       No se arregla con un desplazamiento en px —el titular ocupa una o dos
       lineas segun el ancho—: se saca el titular fuera y se envuelve SOLO la
       rejilla con `.lineado.rejilla-sola`, que ademas da el desborde arriba y
       abajo. Va como hijo directo de la <section>, no dentro de `.wrap`, porque
       la capa se alinea al marco de la pagina y no a la caja de contenido. */
.lineado.rejilla-sola{padding:32px 0}
.reglas i:first-child{grid-column:2}
/* En movil las rejillas pasan a una columna y las reglas dejan de tener sentido. */
@media (max-width:1080px){.reglas{display:none}}

/* Cuando el bloque lleva reglas, la rejilla no necesita pintar tambien sus lineas
   internas: se quedarian dobles. La tarjeta conserva su borde y el fondo blanco,
   que es lo que la separa de la regla que pasa por detras. */
/* Dentro de un bloque lineado, la tarjeta NO dibuja sus separadores internos: los
   pinta la capa de reglas y solo ella. Si los dibujan los dos salen DOS lineas a 1 px
   una de otra —el borde de la tarjeta cae dentro de su columna y la regla al principio
   de la siguiente— y a tamaño real se ve como un filete sucio.

   Las tarjetas se quedan con el filete de arriba y el de abajo, que son los que cierran
   la caja, mas los dos cantos exteriores en la primera y la ultima. Los cantos no tienen
   que cuadrar con nada: van por fuera de la reticula.

   Importante: los bordes propios de las celdas NO mueven las columnas. Las pistas del
   grid se calculan sobre la caja de contenido del contenedor, asi que las de la rejilla
   y las de .reglas caen en el mismo sitio al pixel. */
.lineado .tarjetas,.lineado .cifras{background:transparent;border:0;gap:0}
.lineado .tarjeta,.lineado .cifra{
  border:0;
  border-top:1px solid var(--linea);
  border-bottom:1px solid var(--linea);
}
.lineado .tarjeta:first-child,.lineado .cifra:first-child{border-left:1px solid var(--linea)}
.lineado .tarjeta:last-child,.lineado .cifra:last-child{border-right:1px solid var(--linea)}

/* ─────────── 2 · ilustraciones a rotulador ───────────
   Las piezas se guardan como tinta negra sobre nada: solo forma, en el canal alfa.
   Para pintarlas de blanco sobre el rojo del cierre se invierten con un filtro, que
   respeta el alfa y solo le da la vuelta al color. La MISMA pieza sirve en los dos
   sitios: un archivo, dos usos.

   Se probo antes con mascara de CSS y currentColor, que es mas elegante, y NO vale:
   una mascara con imagen externa la bloquea CORS en cuanto la pagina se abre con
   doble clic (protocolo file://). Es exactamente lo que hacia que el logotipo de la
   cabecera no apareciera en el mockup. Un <img> no tiene ese problema.              */
.ilu{display:block;width:100%;height:auto}
.cierre .ilu{filter:invert(1)}

/* La ilustracion del encabezado sangra por la derecha: se ancla al borde de la
   ventana, no al marco de 1440, y desborda por abajo el filete que cierra el
   bloque. Posicion absoluta y no un margen negativo calculado: el margen depende
   de la relacion entre el marco y el ancho de ventana y se descuadra en cuanto
   una de las dos cosas cambia. Anclada a la derecha no hay nada que calcular. */
/* .recorta: la pieza entra por el borde y el bloque la corta, en vez de asomar por
   encima del bloque anterior. Lo pide la cara de «como trabajamos», que en el PSD
   esta cortada por arriba. */
.hero-ilu.recorta{overflow:hidden}
.hero-ilu{position:relative}
.hero-ilu .wrap{position:relative;z-index:1}
.hero-ilu .texto{max-width:46ch}
/* --alto-ilu: el sitio que hay que reservarle a la pieza. El bloque nunca puede ser
   mas bajo que ella o la pieza se sale por arriba y pisa la cabecera.
   --posa: a que altura se posa sobre el filete que cierra el bloque. En positivo se
   queda dentro, que es lo que hace el PSD; en negativo lo desborda. Por defecto 0:
   apoyada en la linea, sin cruzarla. */
.hero-ilu{min-height:var(--alto-ilu, auto)}
/* La pieza se ata a la RETICULA, no a la ventana.

   - Por la izquierda arranca en el 50 %, que es la linea de columna del sitio. Como el
     marco va centrado, el 50 % de la ventana y el 50 % de la caja de contenido son el
     mismo punto a cualquier ancho: la pieza cae siempre sobre la linea, sin cuentas.
   - Por la derecha se sale del marco --sangra y ahi se planta. Con right:0 se pegaba al
     canto de la ventana, que en una pantalla de 2000 px esta 280 px fuera del marco: la
     ilustracion se despegaba de la reticula y se veia escorada.

   La cuenta se cierra sola: ancho = 50vw - (50vw - marco/2 - sangra) = marco/2 + sangra.
   O sea 850 px CONSTANTES en cuanto la ventana pasa del marco, crezca lo que crezca la
   pantalla. Y por debajo del marco, right cae a 0 y la pieza sangra hasta el canto,
   encogiendo con la ventana. */
.hero-ilu .ilu{
  position:absolute;
  bottom:var(--posa, 0px);
  left:var(--empieza, 50%);
  right:max(0px, calc((100vw - var(--marco)) / 2 - var(--sangra, 130px)));
  /* El ancho va explicito. Con width:auto no basta: en una imagen —que es un elemento
     reemplazado— auto NO se estira entre left y right, se queda en el tamaño nativo del
     archivo y el right se ignora. La cuenta es la de arriba, ya resuelta:
       por debajo del marco  -> 50vw, encogiendo con la ventana
       por encima del marco  -> marco/2 + sangra, constante */
  width:var(--ancho-ilu, min(50vw, calc(var(--marco) / 2 + var(--sangra, 130px))));
  /* El ancho no puede pasar de lo que queda a la derecha de `left`. Sin esto,
     `min(50vw,…)` se calcula sobre la ventana CON barra de scroll mientras que
     `left:50%` se calcula sobre el ancho de maquetacion SIN ella: la pieza se
     salia ~8px y aparecia scroll horizontal. Se vio el 19-08-2026 al publicar
     cartas-y-menus. En pantallas anchas no cambia nada, porque ahi manda el
     tope en px. */
  max-width:calc(100% - var(--empieza, 50%));
  z-index:0;
}
@media (max-width:1080px){
  /* En movil la ilustracion no puede competir con el texto: pasa debajo, en flujo.
     Y ocupa el ancho entero de la ventana, sin tope: un tope en px la dejaba pegada a
     la izquierda con un vacio a la derecha, que es lo peor de los dos mundos —ni sangra
     ni esta centrada—. Al ser hija de la <section> y no de .wrap, el 100 % es la ventana
     entera, asi que sigue sangrando por los dos lados como en escritorio. */
  .hero-ilu .ilu{position:static;width:100%;max-width:none;margin:32px 0 0}
}

/* ─────────── 3 · paralaje ───────────
   La pieza se centra en su bloque y se mueve con el scroll. El bloque la recorta
   (.recorta), asi que lo que se ve es una ventana sobre un dibujo mas grande.
   El desplazamiento entra por --par, que escribe paralaje.js; sin JavaScript la
   variable vale 0 y la pieza se queda centrada, que es un encuadre valido. */
.hero-ilu .ilu[data-paralaje]{
  bottom:auto;top:50%;
  transform:translate3d(0, calc(-50% + var(--par, 0px)), 0);
  will-change:transform;
}
@media (max-width:1080px){
  /* En movil la pieza va en flujo: ni recorte ni recorrido que aprovechar. */
  .hero-ilu .ilu[data-paralaje]{top:auto;transform:none}
}

/* Pie de foto de las imagenes de archivo, en la voz de la casa. */
.pie-foto{font-size:13px;color:var(--tinta-clara);margin-top:12px;font-style:italic}


/* ─────────── caso siguiente ─────────── */
.siguiente{border-top:1px solid var(--linea);padding:56px 0;display:flex;
  justify-content:space-between;align-items:baseline;gap:32px;text-decoration:none;color:inherit}

@media (max-width:1080px){
  /* En movil no hay sitio a la derecha del texto, asi que la figura baja al flujo. Dos
     cosas la salvan de parecer una imagen suelta mal recortada:
     - se pega al canto de abajo (padding-bottom:0), asi que el corte del dibujo se lee
       como que la figura SALE del bloque y no como un recorte a medias;
     - se justifica a la derecha, que equilibra el boton, que va a la izquierda.
     Y se escala a lo que da el ancho, no a un ancho heredado del escritorio. */
  .cierre{padding-bottom:0}
  .cierre .ilu{
    position:static;height:auto;width:min(72vw,340px);
    margin:40px 0 0 auto;   /* el auto de la izquierda es lo que la manda a la derecha */
  }
}

/* ─────────── medidas de linea en pantalla estrecha ───────────
   Los topes en ch estan para gobernar la medida de linea cuando sobra ancho. En una
   ventana estrecha quien la gobierna ya es la propia ventana, y mantenerlos solo deja
   un vacio a la derecha del texto. Se sueltan.

   .txt (66ch) y .faq p (64ch) NO estan aqui a proposito: a estos anchos no llegan a
   morder, asi que soltarlos no cambiaria nada. */
@media (max-width:1080px){
  .titular-pagina,.titular-seccion,.claim,.lead,.literal,
  .hero-ilu .texto,.cierre p,.cierre .titular-seccion{max-width:none}
}

/* Modificadores que solo vivian en la copia de BOCETOS. Suben al sistema el
   13-08-2026, al dejar las tres copias identicas. Los usan el briefing y las
   tarjetas anchas del listado. */
.tarjeta.ancha{grid-column:1/-1;padding:38px 34px 40px}
.tarjeta.ancha .cuerpo{display:grid;grid-template-columns:minmax(0,30ch) 1fr;gap:44px; align-items:start}
.tarjeta.ancha h3,.tarjeta.ancha h4{font-size:24px;margin-bottom:0}
.tarjeta.ancha p{margin-bottom:14px}
.tarjeta.ancha .cuerpo{grid-template-columns:1fr;gap:16px}
.opciones.dos{grid-template-columns:repeat(2,1fr)}
.opciones.cuatro{grid-template-columns:repeat(4,1fr)}
.opciones.una{grid-template-columns:1fr}
.opciones.dos, .opciones.cuatro{grid-template-columns:1fr}

/* ══════════════════════════════════════════════════════════════════════════
   PRUEBA DE TRACKING · 18-08-2026 · REVERSIBLE
   Para deshacerla: borrar este bloque entero. No hay nada tocado mas arriba.

   Peticion: bajar 30 el kerning de toda la web. En unidades de Photoshop el
   tracking va en milesimas de em, asi que -30 = -0,03em. Se probo primero a -20
   y a 18px eran 0,36px, casi invisible; a -30 son 0,54 y ya se lee la diferencia.

   SE APLICA RELATIVO, NO ABSOLUTO. El tracking del sitio ya estaba trabajado a
   mano: el h1 llevaba -.01, el claim -.018, h3.trabajo -.005 y .titular-seccion
   un cero explicito. Poner -.02 solo en `body` habria dejado los titulares mas
   sueltos que el texto de lectura, que es justo al reves de como se compone.
   Aqui cada uno baja sus 30 desde donde estaba.

   NO SE TOCAN LAS VERSALITAS ESPACIADAS —.tag, .rotulo, .chip, .n, dt, pie h4—.
   Ese espaciado positivo es un recurso deliberado, no un descuido: cerrarlas 30
   no las afina, las rompe.

   OJO A LOS SALTOS DE LINEA. Cerrar el tracking mete texto por linea en TODAS
   las cajas con ancho medido: comprobado que a -30 el lead del bloque de
   contacto sube una palabra por linea. Si alguna caja estaba cuadrada contra el
   mockup, hay que volver a mirarla. ═════════════════════ */
body{letter-spacing:-.03em}
h1.titular-pagina,h2.titular-pagina{letter-spacing:-.04em}
.titular-seccion{letter-spacing:-.03em}
.claim{letter-spacing:-.048em}
h3.trabajo{letter-spacing:-.035em}
.display,h1.display,h2.display{letter-spacing:-.03em}