/* ═══════════════════════════════════════════════════════════════════════════
   ZIG·ZAG · ESTILO DEL ESTUDIO · 5-oct-2026
   YAS: «las máscaras de pruebas están mejor hechas: se ven más limpias y por lo
   menos son todas iguales». Es el sistema de public/prueba/herramientas (letra
   Inter / Inter Tight, título grande fino con una palabra en negrita, pasos
   01-02-03, líneas finas, un solo granate) en UNA hoja para todas.
   Reglas de uso:
   · Las páginas que la cargan NO cargan ninguna piel vieja (zz-tool-style,
     zz-herramientas, zz-plantillas, zz-sistema, zz-skin, zz-cabe, zz-tipografia).
   · Nada de selectores :not(#zz…) ni !important para pisar otras capas: si una
     página necesita algo propio, va en su <style>, debajo de esta hoja.
   · Burdeos único #7A0C14 (--wine), el de la plantilla de pruebas (5-oct, auditoría de coherencia).
   ═══════════════════════════════════════════════════════════════════════════ */
/* letras de la casa, servidas desde /fonts (norma: cero URLs externas en herramientas). OFL. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/InterTight-var.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/Inter-300.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Inter-600.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Inter-700.woff2) format('woff2')}

/* ═══ 8-oct · HOJA DE ESTILOS DEL ESTUDIO · los estilos oficiales de letra, definidos UNA sola vez (YAS: «estandarizar todo»).
   Las páginas toman de aquí el tamaño: font-size:var(--t-…). Para cambiar un estilo en toda la web se cambia aquí.
   Guía con ejemplos vivos: /_comparar/estilos/  ·  reglas: DESIGN.md (Reglas fijas del estudio).
   1 Título de página ....... Inter Tight, var(--t-titulo), una palabra 300 y otra 600 (h1)
   2 Números ................ Inter Tight 700 burdeos: pasos var(--t-num), índices var(--t-num-indice)
   3 Título de sección ...... Inter NEGRITA 600, var(--t-seccion) = 18 px (YAS, 8-oct): pasos, bloques, familias de los índices
   4 Texto .................. Inter var(--t-texto): 400 opciones, campos, enlaces, pestañas; NEGRITA 600 títulos de tarjeta
   5 Etiquetas y botones .... Inter 400, var(--t-etiq), MAYÚSCULAS, .1em
   6 Pequeño ................ Inter var(--t-peq): 400 etiquetas de campo, notas, ayudas; 600 títulos pequeños
   La escala, cerrada (YAS, 8-oct): 18 negrita · 15 normal y negrita · 13 normal y negrita · 12 MAYÚS. Ninguna más.
   Negrita: siempre 600, la misma en todos los títulos (la 700, solo números). Para resaltar algo, color (burdeos), no otra letra. ═══ */
:root{--t-titulo:clamp(34px,min(calc(5.4vw*var(--vk,1)),calc(8.4vh*var(--vk,1))),80px);--t-num:36px;--t-num-indice:clamp(44px,calc(4.2vw*var(--vk,1)),68px);--t-seccion:18px;--t-texto:15px;--t-etiq:13px;--t-peq:14px}/* 11-oct · YAS: «13 lo veo muy pequeño»: letra pequeña 14 y etiquetas en mayúsculas 13 */
:root{--ink:#0a0a0a;--muted:var(--ink);--gris:#8a8a86;--line:#dcdcd8;--wine:#7A0C14;--vacio:var(--wine);--pad:clamp(20px,calc(3vw*var(--vk,1)),48px);--ui:'Inter','Segoe UI',Arial,sans-serif;--disp:'Inter Tight','Inter','Helvetica Neue',Arial,sans-serif;--ease:cubic-bezier(.19,1,.22,1)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.4;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
.hdr{position:fixed;inset:0 0 auto 0;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad);background:rgba(255,255,255,.92);backdrop-filter:blur(10px)}
.hdr img{display:block;height:44px}
.hdr a.go{font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;transition:color .2s}
.hdr a.go:hover{color:var(--wine)}
main{height:calc(100svh*var(--vk,1));padding:76px var(--pad) 22px;display:grid;grid-template-rows:auto auto minmax(0,1fr)}
.rail{display:flex;justify-content:space-between;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--ink);padding-top:9px}
/* 5-oct · auditoría de coherencia: el título mide lo mismo que el modelo (prueba/cad-rayas): 65 px a 1366×768 */
h1{margin:clamp(4px,calc(1vh*var(--vk,1)),12px) 0 40px;font:300 var(--t-titulo)/.92 var(--disp);letter-spacing:-.045em}
h1 b{font-weight:600}
.work{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:clamp(24px,calc(4vw*var(--vk,1)),80px);min-height:0}
aside{display:flex;flex-direction:column;min-height:0}
.step{border-top:1px solid var(--line);padding:9px 0 14px;display:flex;flex-direction:column;min-height:0}
.step.grow{flex:1}
.step h2{margin:0 0 10px;display:flex;justify-content:space-between;align-items:flex-end;flex-direction:row-reverse;font-family:var(--ui);font-size:var(--t-seccion);font-weight:600;letter-spacing:0;text-transform:none;line-height:1}
.step h2 small{font-family:var(--disp);font-size:var(--t-num);font-weight:700;letter-spacing:-.04em;color:var(--wine);line-height:.8}
.drop{position:relative;border:1px solid var(--ink);flex:1;min-height:90px;display:grid;place-items:center;text-align:center;padding:12px;overflow:hidden;cursor:pointer;background:#fff}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop strong{display:block;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--ink);transition:letter-spacing .4s var(--ease)}
.drop:hover strong,.drop.drag strong{font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.drop small{display:block;margin-top:10px;font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.drop img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.drop .replace{position:absolute;right:10px;bottom:10px;z-index:2;display:none;background:#fff;border:1px solid var(--ink);padding:6px 10px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.drop.has{border-color:var(--line)}
.drop.has .replace{display:block}
.opts{display:flex;gap:26px;font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;flex-wrap:wrap}
.opts button{color:var(--muted);padding-bottom:3px;border-bottom:1px solid transparent;transition:color .2s;text-align:left}
.opts button:hover{color:var(--wine)}
.opts button.on{color:var(--ink);border-color:var(--ink)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--ink);padding:15px 14px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--ink);background:#fff;transition:background .3s,color .3s,border-color .3s}
.btn:hover:not(:disabled){background:#fff;color:var(--wine);border-color:var(--wine)}
.btn:disabled{color:var(--ink);border-color:var(--ink);cursor:not-allowed}/* 11-oct · YAS: el botón aún sin activar, en negro como todos los cajones (antes gris pálido, no se veía) */
.btn .mini{display:none;width:14px;height:14px}
.btn.busy .mini{display:block}
.link{font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);border-bottom:1px solid var(--line);transition:.2s}
.link:hover{color:var(--wine);border-color:var(--wine)}
.status{margin-top:10px;font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);min-height:2.6em}
.status.good{color:var(--ink)}
.status.bad,.status.busy{color:var(--ink)}
.result{min-width:0;border-top:1px solid var(--ink);padding-top:9px;display:flex;flex-direction:column;min-height:0}
.rhead{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:16px;gap:16px}
/* 8-oct · YAS: «los títulos siempre más grandes»: el nombre del bloque de resultados («Propuestas», «Parecidos en el mercado», «Dirección»…) es título de sección */
.rhead>span:first-child{font-family:var(--ui);font-size:var(--t-seccion);font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.acts{display:flex;gap:22px}
.acts button,.acts a{color:var(--ink);font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;transition:color .2s}
.acts button:hover,.acts a:hover{color:var(--wine)}
.acts .hid{display:none}
.acts .show{display:block}
.acts button:disabled{color:#c9c9c5;cursor:not-allowed}
.stage{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;padding-top:12px;position:relative}
.stage figure{margin:0;position:relative;height:100%;aspect-ratio:3/4;max-width:100%;background:#fff;overflow:hidden}
.stage figure img,.stage figure video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.stage figcaption{position:absolute;left:12px;bottom:12px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 0 12px rgba(0,0,0,.5)}
.orb{position:relative;width:116px;height:116px;margin:0 auto 20px;animation:breath 2.8s ease-in-out infinite}
.orb i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#ff5fa2,#8a5cff,#27c6ff,#4dffb8,#ffd45c,#ff5fa2);filter:blur(10px);opacity:.9;animation:sp 3.2s linear infinite}
.orb b{position:absolute;inset:9%;border-radius:50%;background:conic-gradient(from 200deg,#ff9be0,#8f8bff,#4fe3ff,#fff1a1,#ff9be0);filter:blur(3px);animation:sp 5.5s linear infinite reverse}
.orb u{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95) 0,rgba(255,255,255,.55) 16%,rgba(255,255,255,0) 46%);animation:glint 4s ease-in-out infinite}
.btn .mini,.zz-spin{position:relative;border-radius:50%;background:conic-gradient(#ff5fa2,#8a5cff,#27c6ff,#4dffb8,#ffd45c,#ff5fa2);animation:sp 1.6s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes breath{50%{transform:scale(1.08)}}
@keyframes glint{50%{transform:translate(5%,4%)}}
.msg{text-align:center;color:var(--muted);font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none}
.msg b{display:block;color:var(--ink);font-family:var(--ui);font-size:var(--t-seccion);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.1;margin-bottom:8px}
.center{display:grid;place-items:center;height:100%;width:100%}
.toast,.aviso{position:fixed;right:var(--pad);bottom:28px;background:var(--ink);color:#fff;padding:12px 16px;font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none;transform:translateY(14px);opacity:0;pointer-events:none;transition:.3s var(--ease);z-index:50}
.toast.show{opacity:1;transform:none}
.aviso{left:50%;right:auto;transform:translate(-50%,14px);display:block}
.aviso.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.aviso button{margin-left:14px;border:1px solid #fff;color:#fff;padding:3px 9px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.hide{display:none!important}
@media(max-width:900px){html,body{height:auto}main{height:auto;min-height:calc(100svh*var(--vk,1))}.work{grid-template-columns:1fr}.stage{min-height:calc(60vh*var(--vk,1))}}
.btn.busy .mini{display:none!important}
.btn.busy{border:3px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff0055,#ff8a00,#ffe600,#31d158,#00c7ff,#5856d6,#af52de,#ff0055) border-box!important;background-size:100% 100%,300% 100%!important;animation:zzArcoiris .85s linear infinite!important;box-sizing:border-box!important}
@keyframes zzArcoiris{0%{background-position:0 0,0% 50%}100%{background-position:0 0,300% 50%}}
@media (prefers-reduced-motion:reduce){.btn.busy{animation-duration:2.4s!important}}
/* 11-oct · YAS: el borde multicolor de «está pensando» también en los botones que no son .btn (pasar a vector, quitar fondo,
   guardar con REF, dibujar con IA en las capas…). Misma regla que .btn.busy; se pone y se quita con la clase zz-pensando. */
.zz-pensando{border:3px solid transparent!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#ff0055,#ff8a00,#ffe600,#31d158,#00c7ff,#5856d6,#af52de,#ff0055) border-box!important;background-size:100% 100%,300% 100%!important;animation:zzArcoiris .85s linear infinite!important;box-sizing:border-box!important;opacity:1!important;color:var(--ink)!important}
@media (prefers-reduced-motion:reduce){.zz-pensando{animation-duration:2.4s!important}}

/* ── añadidos del estudio sobre la plantilla ───────────────────────────── */
.hdr nav{display:flex;gap:26px;align-items:center}
.hdr nav a{font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;transition:color .2s}.hdr nav a:hover{color:var(--wine)}
.hint,.nota{font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--muted);margin:8px 0 0}
.nota b{color:var(--ink);font-weight:inherit}
/* opciones pequeñas junto a los resultados (fondo, vista…) */
/* 8-oct · los botones no heredan solos las mayúsculas ni el espaciado (el navegador se los quita): que tomen el estilo de etiqueta */
.opts.peq button{text-transform:inherit;letter-spacing:inherit}
.opts.peq{gap:16px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase}
/* ejemplo de antes → después mientras no hay resultado */
.demo{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;height:100%;width:100%;max-width:820px}
.demo figure{margin:0;position:relative;height:100%;max-height:calc(62vh*var(--vk,1));aspect-ratio:3/4;background:#fff;overflow:hidden;opacity:.9}
.demo figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.demo figcaption{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.demo .arrow{font:200 34px/1 var(--disp);color:var(--muted)}
.demo .eti{position:absolute;left:10px;top:10px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
/* tablero de cuadros para ver la transparencia */
.chess{background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px}
@media print{.hdr,.toast,.aviso{display:none!important}main{height:auto;padding-top:0}}

/* piezas comunes dentro de la cabecera (zz-tutorial.js, zz-barra.js) */
.hdr nav .zz-ver-nav,.hdr nav .zz-limpiar-nav{font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;line-height:1;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.hdr nav .zz-ver-nav:hover,.hdr nav .zz-limpiar-nav:hover{color:var(--wine)}
.hdr nav .zz-limpiar-nav[data-seguro="1"]{color:var(--ink)}
/* ejemplos fantasma (zz-ejemplo.js): translúcidos, con su etiqueta, se van al usar la herramienta */
.zz-ejemplo{position:relative;opacity:.45;pointer-events:none;user-select:none;transition:opacity .25s var(--ease)}
.zz-ejemplo::before{content:"Ejemplo";position:absolute;top:0;left:0;z-index:2;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--muted);background:#fff;border:1px solid var(--muted);padding:5px 8px}
.zz-ejemplo--fuera{opacity:0!important}
/* aviso de «no hay conexión» (zz-barra.js) con el estilo nuevo */
.zz-aviso{border-radius:0!important;border:1px solid var(--ink)!important;font-family:var(--ui)!important;box-shadow:none!important}

/* páginas que van dentro de otra (pestañas de Color, Fotos, Fichas): sin cabecera propia */
html.en-marco .hdr{display:none}
html.en-marco main{padding-top:18px;height:calc(100vh*var(--vk,1))}
/* cuando el ejemplo se va, queda el mensaje de espera */
.zz-ejemplo:not([hidden]) ~ .msg{display:none}
.zz-ejemplo[hidden]{display:none!important}

/* registro-ref.js en la cabecera nueva: «Enviar a cliente / fábrica» y el sello REF en la línea de arriba */
.hdr nav .zz-enviar-nav{font-family:var(--ui);font-size:var(--t-texto);font-weight:400;letter-spacing:0;text-transform:none;line-height:1;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.hdr nav .zz-enviar-nav:hover{color:var(--wine)}
.rail .zz-ref-rail{font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--muted)}
#zz-enviar-pop{border-radius:0!important;box-shadow:none!important;border:1px solid var(--ink)!important;font-family:var(--ui)!important}

/* acciones comunes dentro de una pestaña (iframe): en la línea fina de arriba */
.rail .zz-acc{display:flex;gap:22px;align-items:baseline}
.rail .zz-acc .zz-ver-nav,.rail .zz-acc .zz-limpiar-nav,.rail .zz-acc .zz-enviar-nav{font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;line-height:1;background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.rail .zz-acc .zz-enviar-nav{color:var(--ink)}
.rail .zz-acc button:hover{color:var(--wine)}
@media print{.rail .zz-acc{display:none!important}}

/* 5-oct · mesas de trabajo con documento (lámina, hoja): ocupan todo el ancho, sin centrar (Chrome encogía la lámina) */
.stage.mesa{display:block;justify-items:stretch;align-items:normal;place-items:normal}

/* 5-oct · auditoría: en el móvil la cabecera no cabía (Ver cómo se hace · Enviar · Limpiar · ← Herramientas se salían por la derecha).
   En pantalla estrecha deja de ser fija y sus enlaces bajan de línea. */
@media(max-width:700px){
  .hdr{position:static;flex-wrap:wrap;gap:10px 18px;padding:14px var(--pad)}
  .hdr img{height:36px}
  .hdr nav{flex-wrap:wrap;gap:8px 16px}
  .hdr nav a,.hdr nav .zz-ver-nav,.hdr nav .zz-limpiar-nav,.hdr nav .zz-enviar-nav{font-size:14px}
  main{padding-top:14px}
}

/* 5-oct · (agente de Color) dentro de una pestaña (iframe) en pantalla estrecha la página se cortaba: html.en-marco main{height:calc(100vh*var(--vk,1))} pisaba la regla de 900 px */
@media(max-width:900px){html.en-marco main{height:auto}}

/* 5-oct · auditoría de coherencia: dentro de una pestaña (Fichas, Color, Fotos, Biblioteca) el contenedor ya lleva el título;
   la herramienta de dentro no repite el suyo (salían dos títulos) y gana ese alto de mesa. Su línea fina con las acciones se queda. */
html.en-marco main > h1{display:none}
html.en-marco main{grid-template-rows:auto minmax(0,1fr)}

/* 5-oct · YAS: «reagrupar, utilizar + desplegables». UN solo desplegable para toda la web:
   <details class="plega"><summary>Título <small>lo elegido</small></summary><div class="cuerpo">…</div></details>
   Cerrado muestra «+», abierto «−». Lo elegido se puede enseñar en <small> sin abrirlo. */
details.plega{border-top:1px solid var(--line)}
details.plega>summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:12px;padding:10px 0;font-family:var(--ui);font-size:var(--t-seccion);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.25;color:var(--ink)}
details.plega>summary::-webkit-details-marker{display:none}
details.plega>summary small{margin-left:auto;font-family:var(--ui);font-size:var(--t-peq);font-weight:400;letter-spacing:0;text-transform:none;line-height:1.2;color:var(--muted);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
details.plega>summary::after{content:"+";flex:none;width:14px;text-align:center;font:300 20px/1 var(--disp);color:var(--muted)}
details.plega>summary:not(:has(small))::after{margin-left:auto}
details.plega[open]>summary::after{content:"−";color:var(--muted)}
details.plega>summary:hover{color:var(--wine)}
details.plega>.cuerpo{padding:2px 0 12px}

/* 5-oct · en el móvil la línea fina (.rail) se salía de la pantalla (432 px a 390): baja de línea */
@media(max-width:700px){.rail{flex-wrap:wrap;gap:6px 14px;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase}}

/* ═══ 8-oct · VUELTA AL ASPECTO DEL 6-OCT (antes de las 19:30, el vídeo a dirección). Esta hoja es la de ese día.
   Solo se añaden dos cosas de después que hacen FUNCIONAR lo nuevo, con el aspecto que tenía la web entonces: ═══ */
/* las fichas dentro de las pestañas de Fichas: su familia ya va en el contenedor, no se repite (7-oct, punto 16) */
html.en-marco .rail > .zz-grupo{display:none}
/* pestañas comunes (Color, Fotos de producto, Fichas, Prompts…): las de cada página del 6-oct, ahora en un solo sitio */
.tabsrow{border-top:1px solid var(--ink);padding:9px 0 10px}
.tabs{display:flex;flex-wrap:wrap;gap:6px 28px;min-width:0}
.tabsrow:has(>.tabs){min-width:0}   /* en el móvil la fila se desplaza de lado sin ensanchar la página */
.tabs>button,.tabs>a{padding:0 0 5px;border-bottom:1px solid transparent;color:var(--wine);font-family:var(--ui);font-size:var(--t-seccion);font-weight:600;letter-spacing:0;text-transform:none;line-height:1.2;white-space:nowrap;transition:color .2s}
.tabs>button:hover,.tabs>a:hover{color:var(--ink)}
.tabs>.on,.tabs>.active,.tabs>[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink)}
/* 11-oct · YAS (captura Radar vs Color): las pestañas de toda la web como las del Radar aprobadas el 10-oct: 18, negrita, burdeos; la elegida y al pasar, negro con su raya */
.tabs{gap:6px 36px}
.tabsrow:has(>.tabs){padding:28px 0 0}
.tabs>button:focus-visible,.tabs>a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
@media(max-width:900px){.tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}}

/* ═══ 8-oct · FASE 1 (revisor + YAS: «el orden de la derecha con los números de la izquierda»). Aplicada arriba, en cada regla:
   · 40 px entre el título de la página y lo que va justo debajo (h1).
   · 5 estilos y 2 familias: 1 título Inter Tight 65 (300 + 600) · 2 números Inter Tight 700 burdeos (pasos 36 px; índices
     como «Plantillas y documentos») · 3 texto Inter 15 (400; 500 en títulos de paso, bloque y tarjeta) · 4 etiquetas y
     botones Inter 12 400 MAYÚS .1em · 5 pequeño Inter 13 400.
   · En burdeos, solo los números. Cajas, campos, desplegables y botones: raya fina oscura y texto negro (--vacio también).
   Rayas, Cuadros y Colección a medida cargan /zz-estudio-congelada.css (la de antes), que no se toca. ═══ */

/* ═══ 8-oct · YAS: el texto, en negro («no me gustan los textos en gris»). --muted ya es tinta; el gris (--gris) queda para
   formularios (etiqueta de campo, ejemplo dentro del campo), lo desactivado y el paso del ratón.
   Y al pasar el ratón las cajas no se rellenan de negro («muy agresivo»): blanco, letras y raya burdeos. ═══ */
input::placeholder,textarea::placeholder{color:var(--gris)}

/* ═══ 8-oct · ESCALA DEL ESTUDIO (YAS): la web, de serie, como se ve con el navegador al 80 %. La persona tiene el navegador al 100 %.
   Las medidas de pantalla (vw/vh) de esta hoja y de cada página van × var(--vk) = 1,25, porque Chrome también las encoge con el
   zoom y el navegador no; así se ve igual. Dentro de una pestaña, --vk = 1. Dentro de una pestaña (iframe, html.en-marco) el zoom ya llega de fuera: no se repite.
   Rayas, Cuadros y Colección a medida llevan la hoja congelada y no cambian. ═══ */
/* 11-oct · YAS: «pon ya la letra como al 100 %, ya no tengas en cuenta lo del 80 %». La escala vuelve a 1
   (del 8 al 11-oct fue --vk:1.25 y zoom:.8). Se deja el mecanismo: para volver al 80 % basta poner esos dos valores. */
/* 11-oct (noche) · YAS, opción A: VUELVE el 80 % para todos; el agente de estampación sube la letra para que a esta escala se lea bien */
:root{--vk:1.25}
html{zoom:.8}
html.en-marco,html.zz-dentro{zoom:1;--vk:1}   /* zz-dentro: cualquier marco (lo pone zz-vacios.js) */

/* 11-oct · revisor (YAS: «límpialo todo»): dentro de una página con pestañas (Color, Fotos de producto) la herramienta
   no repite su nombre ni la raya de arriba: la línea fina solo lleva «Limpiar», a la derecha */
html.en-marco main .rail{border-top:0!important;justify-content:flex-end!important;padding-top:12px!important}
html.en-marco main .rail>span:not(.zz-acc){display:none!important}

/* 14-oct · YAS: fuera la línea fina de en medio (.rail). «Limpiar» y «Ver…» van a la cabecera, junto a «← Herramientas»;
   «Enviar a cliente / fábrica» y la REF, pequeñitos abajo del todo (lo mueve zz-vacios.js). Dentro de un marco, como estaba. */
html:not(.en-marco):not(.zz-dentro) main .rail{height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;visibility:hidden!important}   /* no display:none: las páginas con pestañas reservan una fila de la rejilla para esta línea */
.zz-pie-acc{position:fixed;right:24px;bottom:8px;z-index:5;display:flex;gap:18px;align-items:baseline;font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:#fff;padding:4px 0 0 12px}
.zz-pie-acc .zz-enviar-nav,.zz-pie-acc button{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:pointer}
.zz-pie-acc .zz-enviar-nav:hover,.zz-pie-acc button:hover{color:var(--wine)}
.zz-pie-acc .zz-ref-rail{color:var(--ink)}
@media print{.zz-pie-acc{display:none!important}}

/* ═══════ FRANJA DE NEWSLETTER · debajo del hero (19-oct · YAS) ═══════
   No es una herramienta ni una biblioteca: es el quiosco. Por eso continúa
   el negro del hero en lugar de abrir el blanco del índice — así no es un
   cajón oscuro sobre fondo blanco, que es lo que prohíbe la norma.
   Sin rayas ni marcos: todo se separa con aire. Titular en Inter Tight 700
   apretado, el mismo corte gordo que los números del índice. */
.nlb{background:#000;color:#fff;padding:clamp(86px,11vh,124px) var(--pad) clamp(42px,7vh,82px)}
.nlb-in{max-width:1280px;margin:0 auto}
.nlb-et{font-family:var(--ui);font-size:var(--t-etiq);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#9a9a96;margin:0 0 clamp(16px,2.4vh,28px)}
.nlb-et i{font-style:normal;color:var(--wine)}
.nlb-lead{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(22px,3.4vw,52px);align-items:center;text-decoration:none;color:#fff}
.nlb-lead img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#111}
.nlb-tit{font-family:var(--disp);font-weight:700;letter-spacing:-.045em;line-height:.94;font-size:clamp(29px,4.2vw,60px);margin:0;text-wrap:balance}
.nlb-pie{font-family:var(--ui);font-size:var(--t-etiq);letter-spacing:.1em;text-transform:uppercase;color:#9a9a96;margin:clamp(13px,2vh,20px) 0 0}
.nlb-ver{display:inline-block;margin-top:clamp(15px,2.2vh,24px);font-family:var(--ui);font-size:var(--t-peq);letter-spacing:.06em;text-transform:uppercase;color:#fff}
.nlb-ver i{font-style:normal;color:var(--wine)}
.nlb-lead:hover .nlb-tit,.nlb-lead:hover .nlb-ver{color:var(--wine)}
.nlb-mas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,38px);margin-top:clamp(32px,5vh,62px)}
.nlb-mas a{text-decoration:none;color:#fff;display:block}
.nlb-mas img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:#111;margin:0 0 11px}
.nlb-mas h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;font-size:clamp(15px,1.3vw,20px);margin:0;text-wrap:balance}
.nlb-mas a:hover h3{color:var(--wine)}
@media (max-width:860px){.nlb-lead{grid-template-columns:1fr;gap:18px}.nlb-mas{grid-template-columns:1fr;gap:24px}}

/* ── REVISTA: apartado del índice, no herramienta (Laura, 19-oct) ──
   «no como una herramienta sino como un apartado y diferenciado ya en el
   ÍNDICE … que destaque … arriba a la derecha». Negro como el fondo de la
   revista, mayúsculas, e Inter Tight 700 frente al Inter 400 de los enlaces
   de herramienta: el contraste lo da la letra, sin salirse de las dos de la
   casa ni del burdeos único. */
.idx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:clamp(4px,calc(1vh*var(--vk,1)),12px) 0 40px}
.idx-top h1{margin:0}
.a-revista{display:inline-flex;align-items:baseline;gap:10px;background:#000;color:#fff;text-decoration:none;padding:9px 16px 10px;margin-bottom:5px;font-family:var(--disp);font-weight:700;font-size:clamp(14px,1.2vw,19px);letter-spacing:.045em;text-transform:uppercase;white-space:nowrap}
.a-revista em{font-style:normal;font-family:var(--ui);font-weight:400;font-size:var(--t-etiq);letter-spacing:.1em;opacity:.6}
.a-revista:hover{background:var(--wine)}
@media(max-width:700px){.idx-top{align-items:flex-start}.a-revista{margin-bottom:0}}