/* ===== css/tokens.css ===== */
/* Tokens de marca emadigital · dueño: A01 (identidad).
   Regla: se pueden ajustar valores y sumar tokens; nunca renombrar ni borrar (los usan todas las secciones).
   Guía visual con todos los tokens: /identidad.html */
:root {
  /* ---------- Color (Ronda 3: docs/DIRECCION-R3.md) ----------
     Penumbra violeta + papel obra; el ámbar es la luz de la puerta y aparece poco.
     Contrastes medidos con scratchpad/a01r3/contrast.js (WCAG 2.x). */
  --ink: #1c1830;         /* penumbra violeta tinta. Papel sobre tinta 16,4:1 */
  --ink-2: #262140;       /* paneles sobre tinta */
  --ink-3: #352f52;       /* bordes/hover sobre tinta */
  --paper: #fafaf7;       /* papel obra, casi blanco (fondo por defecto) */
  --paper-2: #f1f0ea;     /* superficie sobre papel */
  --paper-3: #e3e1d8;     /* trazos y fondos de dato */
  --gray: #6b6878;        /* texto secundario sobre papel 5,2:1 · sobre luz 4,9:1 · sobre paper-2 4,7:1 */
  --gray-dark: #5a5768;   /* secundario más firme sobre papel 6,7:1 */
  --gray-light: #b3afc2;  /* nuevo R3: texto secundario sobre tinta 8,0:1 (sobre ink-2 7,2:1) */
  --signal: #ffb21a;      /* el haz ámbar: formas, fondos, trazos, luces. NUNCA texto sobre papel (1,7:1). Sobre tinta 9,5:1 */
  --signal-ink: #1c1830;  /* texto sobre fondo señal = tinta (9,5:1) */
  --light: #fff3d6;       /* luz de lámpara: manifiesto, empalme del hero. Tinta sobre luz 15,6:1 */

  /* nuevos (A01) */
  --signal-deep: #8a5a00;                /* señal como texto: sobre papel 5,7:1 · sobre luz 5,4:1 */
  --signal-soft: rgb(255 178 26 / 0.18); /* fondos de chip, hover, selección suave */
  --signal-glow: rgb(255 178 26 / 0.45); /* halos, la luz que se derrama */
  --light-glow: rgb(255 243 214 / 0.6);  /* el borde de la rendija */
  --ink-rgb: 28 24 48;                    /* para rgb(var(--ink-rgb) / a) */
  --paper-rgb: 250 250 247;
  --signal-rgb: 255 178 26;
  --light-rgb: 255 243 214;               /* nuevo R3 */

  /* Sombras teñidas de tinta violeta (nuevo R3). Nunca rgba(0,0,0,.1) gris.
     Elegí según jerarquía: -1 apoyo, -2 objeto, -3 lo que se levanta. */
  --shadow-ink-1: 0 1px 2px rgb(28 24 48 / 0.10), 0 2px 6px -2px rgb(28 24 48 / 0.10);
  --shadow-ink-2: 0 2px 4px rgb(28 24 48 / 0.08), 0 12px 24px -10px rgb(28 24 48 / 0.28);
  --shadow-ink-3: 0 4px 8px rgb(28 24 48 / 0.08), 0 30px 60px -24px rgb(28 24 48 / 0.42);
  --shadow-ink: var(--shadow-ink-2);
  --shadow-light: 0 0 0 1px rgb(255 178 26 / 0.35), 0 18px 50px -12px rgb(255 178 26 / 0.45); /* luz, no sombra: solo sobre tinta */

  /* Superficie actual (se invierte con [data-theme="dark"]) */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-muted: var(--gray-dark);
  --line: rgb(28 24 48 / 0.12);
  --line-strong: rgb(28 24 48 / 0.56);  /* ≥ 3:1 para bordes de controles (3,9:1) */
  --surface: var(--paper-2);            /* nuevo: tarjetas/paneles sobre --bg */
  --accent: var(--signal-deep);         /* nuevo: la señal legible en el tema actual */

  /* ---------- Tipografía (R3) ----------
     Poppins = la del logo y la protagonista: Black ↔ Light Italic es la gramática (ema / digital).
     Newsreader = lectura, bajadas y citas. Fuera JetBrains Mono, Instrument Serif e Inter. */
  --f-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --f-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  /* --f-mono ya NO es monoespaciada: Poppins + tabular-nums (aplicá --num) solo para cifras y datos.
     No usar para rótulos ni eyebrows. */
  --f-mono: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --num: tabular-nums;  /* nuevo R3: font-variant-numeric de datos */

  /* pesos y tracking del sistema (nuevos) */
  --w-ema: 700;        /* peso de "ema" en el logo */
  --w-digital: 400;    /* peso de "digital" en el logo (itálica) */
  --w-display: 800;
  --w-black: 900;      /* nuevo R3: "ema" del par Black ↔ Light Italic */
  --w-light: 300;      /* nuevo R3: "digital" del par */
  --w-label: 500;      /* nuevo R3: rótulos y datos chicos (Poppins 500, minúscula) */
  --lh-display: 0.9;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;     /* Newsreader 17–19px: 1.6–1.7 */
  --measure: 64ch;     /* < 72 caracteres */     /* nuevo: ancho de lectura cómodo para párrafos */
  --tr-display: -0.045em;
  --tr-logo: -0.05em;  /* tracking real del wordmark (-50/1000) */
  --tr-mono: 0;        /* R3: sin tracking en datos */
  --tr-eyebrow: 0;     /* R3: rótulos en minúscula, sin tracking */

  /* Escala fluida (360 → 1600 px) */
  --t-2xs: clamp(0.6875rem, 0.67rem + 0.08vw, 0.75rem); /* nuevo: marcas de pliego, coordenadas (≥ 11px) */
  --t-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);   /* ≥ 12px: etiquetas mono legibles */
  --t-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);  /* ≥ 14px */
  --t-base: clamp(1.0625rem, 1.03rem + 0.15vw, 1.1875rem); /* cuerpo ≥ 17px en móvil, 19px en desktop */
  --t-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --t-xl: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
  --t-2xl: clamp(2.5rem, 1.6rem + 4vw, 5.5rem);
  --t-3xl: clamp(3.25rem, 1.5rem + 8vw, 10rem);
  --t-mega: clamp(4.5rem, 1rem + 16vw, 20rem);
  /* Escala de títulos de sección (QA6 #1 · PLAN-FIX). El h1 del hero no la usa. */
  --t-display-xl: clamp(3.6rem, 0.8rem + 10.5vw, 10.5rem); /* manifiesto, contacto */
  --t-display-l: clamp(3rem, 1rem + 7vw, 8.25rem);         /* laboratorio, marcas */
  --t-display-m: clamp(2.5rem, 1.2rem + 4.6vw, 6rem);      /* servicios, auditoría, proceso, estudio */
  --tr-display-xl: -0.055em;
  --tr-display-l: -0.045em;
  --tr-display-m: -0.035em;
  --t-label-min: 0.9375rem;  /* rótulos chicos: nunca por debajo de 15px (QA6 #15) */

  /* ---------- Espacio y grilla ---------- */
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --section-y: clamp(6rem, 4rem + 9vw, 14rem);
  --maxw: 1600px;
  --radius: 2px;
  --radius-pill: 999px;          /* nuevo */
  --s-1: 0.25rem;                /* escala de espacio (nuevos) */
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;
  --cols: 12;                    /* grilla editorial */
  --cols-sm: 4;                  /* en móvil la grilla baja a 4 columnas (no desborda en 360) */
  --grid-gap: clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);
  --hair: 1px;                   /* grosor de líneas finas */
  --crop: 12px;                  /* largo de una marca de corte */
  --crop-gap: 4px;               /* separación al borde (crop + gap = 16px ≤ --gutter mínimo: no desborda en 360) */

  /* ---------- Marca ---------- */
  --italic-angle: -10deg;        /* ángulo de la itálica de "digital"; úsalo en skews y cortes */
  --italic-slant: 0.176;         /* tan(10°) */
  --grain-url: url("../assets/identidad/grain.svg");
  --grain-opacity: 0.035;        /* muy sutil: textura, no ruido */

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* suave (antes 0.16,1,0.3,1) */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* suave (antes 0.83,0,0.17,1) */
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* rebote apenas perceptible */
  --ease-door: cubic-bezier(0.6, 0, 0.2, 1);   /* nuevo: la puerta que se abre */
  --dur-fast: 0.2s;
  --dur: 0.45s;
  --dur-slow: 0.8s;
  --dur-xslow: 1.2s;                           /* nuevo: tope para cualquier animación */

  /* ---------- Capas ---------- */
  --z-nav: 50;
  --z-menu: 60;
  --z-overlay: 70;   /* nuevo: progreso, indicador de sección */
  --z-grain: 80;     /* nuevo: grano global */
  --z-cursor: 90;
  --z-preloader: 100;
}

[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--paper);
  --fg-muted: var(--gray-light);          /* 8,0:1 */
  --line: rgb(250 250 247 / 0.14);
  --line-strong: rgb(250 250 247 / 0.45); /* 4,3:1 */
  --surface: var(--ink-2);
  --accent: var(--signal);                /* ámbar sobre tinta 9,5:1: acá sí puede ser texto */
  --shadow-ink: 0 2px 4px rgb(10 8 20 / 0.3), 0 16px 32px -12px rgb(10 8 20 / 0.6);
}

/* Laboratorio: fondo ámbar, texto tinta */
[data-theme="signal"] {
  --bg: var(--signal);
  --fg: var(--signal-ink);                /* 9,5:1 */
  --fg-muted: rgb(28 24 48 / 0.78);       /* 5,9:1 sobre ámbar */
  --line: rgb(28 24 48 / 0.18);
  --line-strong: rgb(28 24 48 / 0.6);     /* 3,7:1 */
  --surface: rgb(28 24 48 / 0.07);
  --accent: var(--ink);
  --shadow-ink: 0 2px 4px rgb(28 24 48 / 0.12), 0 14px 28px -12px rgb(28 24 48 / 0.35);
}


/* ===== css/base.css ===== */
/* Base + utilidades compartidas · dueño: A01. Nuevas utilidades al final (sección "Sistema A01"). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;   /* Newsreader usa su tamaño óptico */
  font-kerning: normal;
  hanging-punctuation: first;  /* comillas colgadas donde el navegador lo soporta */
  overflow-x: clip;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--signal); color: var(--ink); }

/* Microtipografía (R3): titulares balanceados, párrafos sin viudas, comillas latinas */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, blockquote, figcaption, dd { text-wrap: pretty; }
:lang(es) q, q { quotes: "«" "»" "“" "”"; }
abbr[title] { text-decoration: none; }
.num, time, data { font-variant-numeric: var(--num); }

/* Foco (R3): anillo de tinta sobre un halo ámbar. En tinta el anillo pasa a ámbar.
   Se ve en los tres temas: papel (tinta 16:1), tinta (ámbar 9,5:1), señal (tinta 9,5:1). */
:root { --focus-ring: var(--ink); --focus-halo: var(--signal); }
[data-theme="dark"] { --focus-ring: var(--signal); --focus-halo: rgb(250 250 247 / 0.9); }
[data-theme="signal"] { --focus-ring: var(--ink); --focus-halo: var(--paper); }
:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}
/* Destinos de foco programático (skip-link, paneles): no muestran anillo */
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  padding: .75rem 1rem; background: var(--ink); color: var(--paper);
  font-family: var(--f-display); font-weight: var(--w-label); font-size: var(--t-sm);
  transform: translateY(-200%); transition: transform .3s var(--ease-out);
}
.skip-link:focus { transform: none; }

/* Cada sección pinta su superficie con los tokens del tema */
section, [data-surface] { background: var(--bg); color: var(--fg); position: relative; }

/* ---------- Utilidades ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.display {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.9;
  text-transform: uppercase;
}
/* "digital" del logo: Poppins itálica liviana */
.display-it { font-family: var(--f-display); font-style: italic; font-weight: 300; letter-spacing: -0.04em; text-transform: none; }
.serif-it { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; text-transform: none; }
/* R3: .mono y .eyebrow ya no son monoespaciadas ni MAYÚSCULAS con tracking.
   Rótulo = Poppins 500 en minúscula/tipo oración, cifras tabulares. Si el rótulo no informa nada, sacalo. */
.mono, .eyebrow {
  font-family: var(--f-display);
  font-size: max(var(--t-label-min, .9375rem), var(--t-xs)); /* ≥ 15px (QA6 #15) */
  font-weight: var(--w-label);
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: var(--num);
}
.eyebrow { color: var(--fg-muted); display: inline-block; }
.muted { color: var(--fg-muted); }
.signal { color: var(--accent); } /* R3: el ámbar no es texto sobre papel; --accent da la versión legible del tema */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Máscara para revelar líneas/palabras desde abajo (SplitText) */
.line-mask { overflow: clip; display: block; padding-bottom: .06em; margin-bottom: -.06em; }

/* Botones (QA6 #4 · PLAN-FIX): dos estilos, rectos, Poppins 600, ≥ 48px.
   .btn         → sobre papel, luz o ámbar: fondo tinta, texto papel.
                  Dentro de [data-theme="dark"] pasa solo a la variante señal.
   .btn--signal → sobre tinta: fondo ámbar, texto tinta (no usar sobre papel).
   La pastilla queda solo en la nav. Las puertas de contacto y auditoría son piezas y no usan esto. */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-hover: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
  min-height: 48px; padding: 1rem 1.5rem;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bg); border-radius: var(--radius);
  font-family: var(--f-display); font-weight: 600; font-size: max(var(--t-label-min, .9375rem), var(--t-sm)); line-height: 1.2;
  letter-spacing: 0; text-transform: none; text-align: center;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
[data-theme="dark"] .btn, .btn--signal { --btn-bg: var(--signal); --btn-fg: var(--ink); --btn-hover: var(--light); }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--btn-fg); }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 7px var(--focus-halo); }

/* Sin JS o con movimiento reducido el contenido siempre queda visible */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Sistema A01 · utilidades de marca
   Todas usan tokens y se pueden sobreescribir con variables locales.
   ===================================================================== */

/* Logo en línea: <span class="logo-type"><b>ema</b><i>digital</i></span>
   (para texto vivo; el logo oficial es assets/identidad/wordmark*.svg) */
.logo-type { font-family: var(--f-display); letter-spacing: var(--tr-logo); line-height: 1; white-space: nowrap; text-transform: none; }
.logo-type > b { font-weight: var(--w-ema); }
.logo-type > i { font-weight: var(--w-digital); font-style: italic; margin-left: -0.04em; }

/* Grilla editorial: 4 columnas en móvil, 12 desde 768 px.
   Hijos: .col-N (ancho) y --start (columna de inicio). Nunca desborda: minmax(0,1fr). */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--cols-sm), minmax(0, 1fr));
  column-gap: var(--grid-gap);
}
.grid-12 > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .grid-12 { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
  .grid-12 > [class*="col-"] { grid-column: var(--start, auto) / span var(--span, 12); }
  .col-1 { --span: 1; } .col-2 { --span: 2; } .col-3 { --span: 3; } .col-4 { --span: 4; }
  .col-5 { --span: 5; } .col-6 { --span: 6; } .col-7 { --span: 7; } .col-8 { --span: 8; }
  .col-9 { --span: 9; } .col-10 { --span: 10; } .col-11 { --span: 11; } .col-12 { --span: 12; }
}
/* Retícula visible (las columnas como textura): sumá .grid-12--show */
.grid-12--show {
  background-image: repeating-linear-gradient(90deg,
    var(--line) 0 var(--hair), transparent var(--hair) calc((100% + var(--grid-gap)) / var(--cols-sm)));
}
@media (min-width: 768px) {
  .grid-12--show {
    background-image: repeating-linear-gradient(90deg,
      var(--line) 0 var(--hair), transparent var(--hair) calc((100% + var(--grid-gap)) / var(--cols)));
  }
}

/* Línea fina animable. Visible por defecto (sin JS / reduced).
   Para dibujarla: gsap.from(el, { scaleX: 0 }) o --p de 0 a 1. Origen: izquierda (o .hairline--end) */
.hairline {
  display: block; width: 100%; height: var(--hair); border: 0; margin: 0;
  background: var(--hairline-color, var(--line-strong));
  transform: scaleX(var(--p, 1)); transform-origin: left center;
}
.hairline--end { transform-origin: right center; }
.hairline--center { transform-origin: center; }
.hairline--v { width: var(--hair); height: 100%; transform: scaleY(var(--p, 1)); transform-origin: center top; }
.hairline--signal { --hairline-color: var(--signal); }

/* Marcas de corte en las 4 esquinas (un solo pseudo-elemento: ::after queda libre).
   Variables: --crop, --crop-gap, --crop-color */
.crop-marks { position: relative; }
.crop-marks::before {
  content: ""; position: absolute; pointer-events: none;
  inset: calc(-1 * (var(--crop) + var(--crop-gap)));
  --cc: var(--crop-color, var(--line-strong));
  --h: linear-gradient(var(--cc), var(--cc));
  background:
    var(--h) 0 calc(var(--crop) + var(--crop-gap)) / var(--crop) var(--hair) no-repeat,
    var(--h) calc(var(--crop) + var(--crop-gap)) 0 / var(--hair) var(--crop) no-repeat,
    var(--h) 100% calc(var(--crop) + var(--crop-gap)) / var(--crop) var(--hair) no-repeat,
    var(--h) calc(100% - var(--crop) - var(--crop-gap)) 0 / var(--hair) var(--crop) no-repeat,
    var(--h) 0 calc(100% - var(--crop) - var(--crop-gap)) / var(--crop) var(--hair) no-repeat,
    var(--h) calc(var(--crop) + var(--crop-gap)) 100% / var(--hair) var(--crop) no-repeat,
    var(--h) 100% calc(100% - var(--crop) - var(--crop-gap)) / var(--crop) var(--hair) no-repeat,
    var(--h) calc(100% - var(--crop) - var(--crop-gap)) 100% / var(--hair) var(--crop) no-repeat;
}
/* Variante en esquinas, dentro de la caja (pegada al borde de pantalla no genera scroll horizontal) */
.crop-marks--inset::before {
  inset: var(--crop-gap);
  background:
    var(--h) 0 0 / var(--crop) var(--hair) no-repeat, var(--h) 0 0 / var(--hair) var(--crop) no-repeat,
    var(--h) 100% 0 / var(--crop) var(--hair) no-repeat, var(--h) 100% 0 / var(--hair) var(--crop) no-repeat,
    var(--h) 0 100% / var(--crop) var(--hair) no-repeat, var(--h) 0 100% / var(--hair) var(--crop) no-repeat,
    var(--h) 100% 100% / var(--crop) var(--hair) no-repeat, var(--h) 100% 100% / var(--hair) var(--crop) no-repeat;
}

/* Grano: overlay con assets/identidad/grain.svg. Usa ::after (no combinar con otro ::after propio). */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grain-url) 0 0 / 220px 220px repeat;
  opacity: var(--grain-opacity); mix-blend-mode: multiply;
}
[data-theme="dark"] .grain::after, .grain[data-theme="dark"]::after { mix-blend-mode: screen; filter: invert(1); opacity: calc(var(--grain-opacity) * 1.2); }

/* Chip / etiqueta. .chip--signal = encendido. Si es <a>/<button> ya trae hover y foco. */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .45em .9em; border: var(--hair) solid var(--line-strong); border-radius: var(--radius-pill);
  font-family: var(--f-display); font-size: max(var(--t-label-min, .9375rem), var(--t-xs)); font-weight: var(--w-label); line-height: 1.2;
  letter-spacing: 0; text-transform: none; white-space: nowrap; color: var(--fg); font-variant-numeric: var(--num);
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.chip::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .5; }
.chip--plain::before { content: none; }
.chip--signal { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); }
.chip--signal::before { background: var(--signal-ink); opacity: 1; }
a.chip:hover, button.chip:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* Contador / numeración tipo pliego: cifras tabulares que no saltan al animar.
   <span class="counter" data-pad="3">007</span> · .counter--big para números display */
.counter {
  font-family: var(--f-display); font-weight: var(--w-label); font-variant-numeric: tabular-nums;
  font-size: max(var(--t-label-min, .9375rem), 1em); /* hereda, pero nunca < 15px */
  font-feature-settings: "tnum" 1; letter-spacing: 0; white-space: nowrap;
}
.counter--big { font-family: var(--f-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: var(--lh-display); font-feature-settings: "tnum" 1; }

/* Flecha de la marca en línea (hereda color y tamaño de la fuente).
   <span class="arrow" aria-hidden="true"></span> · .arrow--ne la gira a 45° */
.arrow {
  display: inline-block; width: 1.1em; height: .7em; flex: none; vertical-align: middle;
  background: currentColor;
  -webkit-mask: url("../assets/identidad/flecha.svg") center / contain no-repeat;
  mask: url("../assets/identidad/flecha.svg") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.arrow--ne { transform: rotate(-45deg); }
a:hover > .arrow, button:hover > .arrow { transform: translateX(.2em); }
a:hover > .arrow--ne, button:hover > .arrow--ne { transform: rotate(-45deg) translateX(.2em); }

/* Corte itálico: inclina un bloque con el ángulo de "digital" */
.slant { transform: skewX(var(--italic-angle)); }

/* Texto de lectura: ancho cómodo e interlineado amplio (cambio de dirección: sitio legible y sin fricción) */
.prose { max-width: var(--measure); font-size: var(--t-base); line-height: var(--lh-body); }
.prose > * + * { margin-top: 1em; }
.lead { font-size: var(--t-lg); line-height: 1.45; max-width: 40ch; }

.lead { font-family: var(--f-serif); font-weight: 400; }
blockquote { font-family: var(--f-serif); }

/* R3: .fade-up queda SIN efecto (fade/slide-up genérico en cada bloque está prohibido por DIRECCION-R3).
   La clase se mantiene para no romper partials; el contenido se ve siempre.
   Cada sección orquesta su propio momento (uno por pantalla) con una razón. */
.fade-up { opacity: 1; transform: none; }


/* ===== css/sections/00-fx.css ===== */
/* Sección fx (A02) — preloader, cursor, grano, progreso. Todo scopeado bajo [data-section="fx"].
   .fx no crea contexto de apilamiento (sin position/z-index) para que el cursor pueda usar mix-blend-mode. */

[data-section="fx"] { --fx-on-dark: var(--light); }
[data-section="fx"] p { margin: 0; }

/* ---------- Preloader ---------- */
[data-section="fx"] .fx__pre { display: none; }
.js [data-section="fx"] .fx__pre {
  position: fixed; inset: 0; z-index: var(--z-preloader);
  display: grid; place-items: center;
  color: var(--paper);
  font-family: var(--f-display);
  pointer-events: auto;
  overflow: hidden;
}
.js.fx-seen [data-section="fx"] .fx__pre,
.js [data-section="fx"] .fx__pre.is-done { display: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-section="fx"] .fx__pre { display: none; }
}

[data-section="fx"] .fx__leaf {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--ink);
  will-change: transform;
}
[data-section="fx"] .fx__leaf--l { left: 0; }
[data-section="fx"] .fx__leaf--r { right: 0; }

/* La rendija de luz que queda al separarse las hojas */
[data-section="fx"] .fx__seam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--light) 30%, var(--signal) 70%, transparent);
  transform: scaleY(0); opacity: 0;
  box-shadow: 0 0 24px 2px var(--signal-glow);
}

[data-section="fx"] .fx__stage {
  position: relative; display: grid; justify-items: center; gap: clamp(1.25rem, 3vh, 2rem);
}
[data-section="fx"] .fx__frame {
  position: relative;
  width: clamp(72px, 12vmin, 150px); aspect-ratio: 1 / 2.05;
  perspective: 700px;
  outline: 1px solid rgb(var(--paper-rgb) / 0.12); outline-offset: 6px;
}
[data-section="fx"] .fx__light {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--light) 0%, color-mix(in srgb, var(--light), var(--signal) 35%) 45%, var(--signal) 100%);
  box-shadow: 0 0 60px 6px var(--signal-glow), 0 0 160px 30px rgb(var(--paper-rgb) / 0.08);
  transform: scaleY(0); transform-origin: 50% 100%;
}
/* La hoja de la puerta: cubre todo menos 2px de rendija a la derecha */
[data-section="fx"] .fx__door {
  position: absolute; top: 0; bottom: 0; left: 0; width: calc(100% - 2px);
  background: linear-gradient(90deg, var(--ink-2), var(--ink-3));
  transform-origin: 0 50%;
  transform: rotateY(0deg);
  backface-visibility: hidden;
}

/* Wordmark oficial (A01, paths por letra): se arma letra por letra subiendo desde la línea de base */
[data-section="fx"] .fx__word {
  display: block; width: clamp(168px, 12rem + 6vw, 300px); height: auto;
  overflow: hidden; color: var(--paper);
}


[data-section="fx"] .fx__count {
  position: absolute; bottom: calc(var(--gutter) + 18px); right: var(--gutter);
  font-size: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); font-weight: 300; font-style: italic; line-height: 1;
  letter-spacing: -0.04em; color: var(--paper); font-variant-numeric: tabular-nums;
}
[data-section="fx"] .fx__pct { font-size: .35em; color: var(--signal); vertical-align: top; margin-left: .15em; }

/* ---------- Grano ---------- */
/* Contenedor recortado: el grano sobredimensionado nunca agranda el ancho de la página */
[data-section="fx"] .fx__grain-wrap {
  position: fixed; inset: 0; z-index: calc(var(--z-cursor) - 1);
  overflow: hidden; contain: strict; pointer-events: none;
}
[data-section="fx"] .fx__grain {
  position: absolute; inset: -50%;
  pointer-events: none;
  background: url("../assets/fx/grain.svg") repeat 0 0 / 240px 240px;
  opacity: .04;
  animation: fx-grain .9s steps(1) infinite;
}
@keyframes fx-grain {
  0%   { transform: translate(0, 0); }
  12%  { transform: translate(-6%, 4%); }
  25%  { transform: translate(5%, -7%); }
  37%  { transform: translate(-3%, -2%); }
  50%  { transform: translate(8%, 5%); }
  62%  { transform: translate(-8%, 1%); }
  75%  { transform: translate(2%, 8%); }
  87%  { transform: translate(-1%, -8%); }
}
@media (prefers-reduced-motion: reduce) {
  [data-section="fx"] .fx__grain { animation: none; }
}
/* En mobile / touch el grano se apaga: no suma y cuesta batería */
@media (max-width: 767px), (hover: none) {
  [data-section="fx"] .fx__grain-wrap { display: none; }
}

/* ---------- Progreso de scroll ---------- */
[data-section="fx"] .fx__progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--z-menu) - 1);
  pointer-events: none;
}
[data-section="fx"] .fx__bar {
  display: block; height: 100%; background: var(--signal);
  transform: scaleX(0); transform-origin: 0 50%;
}
[data-section="fx"][data-top="signal"] .fx__bar { background: var(--ink); }

/* ---------- Indicador de sección: riel vertical ----------
   Pegado al borde izquierdo, centrado en alto y rotado (se lee de abajo hacia arriba). Vive dentro del margen
   (--gutter), así que nunca pisa contenido. En papel, luz y tinta usa mix-blend-mode: difference sobre --light:
   queda tinta sobre papel y papel sobre tinta, incluso sobre una fila invertida de servicios. Sobre señal pasa a
   tinta-señal sin blend (difference daría un celeste fuera de marca). */
[data-section="fx"] .fx__where { display: none; }
@media (min-width: 900px) {
  [data-section="fx"] .fx__where {
    display: flex; align-items: center; gap: .55rem;
    position: fixed; top: 50%; left: calc(var(--gutter) * .4); z-index: var(--z-overlay);
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    font-family: var(--f-display); font-size: 0.75rem; line-height: 1; font-weight: 500; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    color: var(--light); mix-blend-mode: difference;
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  }
}
[data-section="fx"][data-mid="signal"] .fx__where { color: var(--signal-ink); mix-blend-mode: normal; }
[data-section="fx"] .fx__tot { opacity: .55; }
[data-section="fx"] .fx__track {
  position: relative; display: block;
  inline-size: 3.25rem; block-size: 1px;
  background: color-mix(in srgb, currentColor 35%, transparent);
}
[data-section="fx"] .fx__fill {
  position: absolute; inset: 0;
  background: currentColor;
  transform: scaleY(0); transform-origin: 50% 0;
}
[data-section="fx"] .fx__name { display: inline-block; min-inline-size: 7.5em; }
/* Oculto antes de la intro, en el hero (ahí manda la puerta) y con el menú abierto */
.js:not(.intro-done) [data-section="fx"] .fx__where,
[data-section="fx"].is-first .fx__where,
[data-section="fx"].is-bleed .fx__where,
[data-section="fx"].is-menu .fx__where { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  [data-section="fx"] .fx__where { transition: none; }
}

/* ---------- Cursor ----------
   El cursor nativo NO se oculta. Esto es un acompañante: anillo fino con inercia (difference) que crece sobre
   lo clickeable, y una etiqueta chica desplazada abajo a la derecha para data-cursor="text|drag|view". */
[data-section="fx"] .fx__ring {
  display: none;
  position: fixed; top: 0; left: 0; z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}
[data-section="fx"].has-cursor .fx__ring { display: block; }
[data-section="fx"].is-out .fx__ring { opacity: 0; }

[data-section="fx"] .fx__ring-in {
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--light);
  opacity: .7;
  transform: translate(-50%, -50%);
  transition: width .45s var(--ease-out), height .45s var(--ease-out), opacity .3s;
}
[data-section="fx"] .fx__label {
  position: absolute; left: calc(50% + 46px); top: calc(50% + 40px); /* lejos del puntero: no tapa las letras que apuntás */
  padding: .25rem .45rem; border-radius: 999px;
  background: var(--signal); color: var(--signal-ink);
  font-family: var(--f-display); font-size: 0.6875rem; font-weight: 500; letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0; transform: translateY(4px) scale(.9); transform-origin: 0 0;
  transition: opacity .2s, transform .3s var(--ease-out);
}

[data-section="fx"][data-cursor-state="link"] .fx__ring-in { width: 46px; height: 46px; opacity: 1; }
[data-section="fx"][data-cursor-state="down"] .fx__ring-in { width: 20px; height: 20px; }
[data-section="fx"][data-cursor-state="hide"] .fx__ring-in { opacity: 0; }

/* Con etiqueta: el anillo se hace chico y la etiqueta (sin blend) aparece al costado */
[data-section="fx"][data-cursor-state="text"] .fx__ring,
[data-section="fx"][data-cursor-state="drag"] .fx__ring,
[data-section="fx"][data-cursor-state="view"] .fx__ring { mix-blend-mode: normal; }
[data-section="fx"][data-cursor-state="text"] .fx__ring-in,
[data-section="fx"][data-cursor-state="drag"] .fx__ring-in,
[data-section="fx"][data-cursor-state="view"] .fx__ring-in { width: 8px; height: 8px; border-color: var(--signal); background: var(--signal); opacity: 1; }
[data-section="fx"][data-cursor-state="text"] .fx__label,
[data-section="fx"][data-cursor-state="drag"] .fx__label,
[data-section="fx"][data-cursor-state="view"] .fx__label { opacity: 1; transform: none; }


/* ===== css/sections/01-nav.css ===== */
/* Sección nav (A03) — header fijo + menú a pantalla completa. Todo scopeado bajo [data-section="nav"]. */

[data-section="nav"] {
  --nav-fg: var(--ink);
  --nav-muted: var(--gray-dark);
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  color: var(--nav-fg);
  pointer-events: none; /* solo los controles reciben clics: el header no tapa el contenido */
  transition: transform .6s var(--ease-out), color .45s var(--ease-out);
}
[data-section="nav"][data-on="dark"] { --nav-fg: var(--paper); --nav-muted: var(--gray-light); }
[data-section="nav"][data-on="signal"] { --nav-fg: var(--signal-ink); --nav-muted: color-mix(in srgb, var(--signal-ink) 72%, transparent); }
[data-section="nav"].is-hidden { transform: translateY(-110%); }
[data-section="nav"].is-open { z-index: var(--z-menu); transform: none; --nav-fg: var(--paper); --nav-muted: var(--gray-light); }

/* Fondo translúcido cuando ya bajaste: el logo y los botones nunca quedan encima de texto grande */
[data-section="nav"] { --nav-bg: rgb(var(--paper-rgb) / .86); } /* .86: aun sobre una fila de servicios invertida a tinta, la tinta del header queda > 9:1 */
[data-section="nav"][data-on="dark"] { --nav-bg: rgb(var(--ink-rgb) / .8); }
[data-section="nav"][data-on="signal"] { --nav-bg: rgb(var(--signal-rgb) / .86); }
[data-section="nav"]::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid rgb(var(--ink-rgb) / .1);
  opacity: 0; transition: opacity .45s var(--ease-out), background-color .45s var(--ease-out);
}
[data-section="nav"].is-solid::before { opacity: 1; }
[data-section="nav"].is-open::before { opacity: 0; }

/* ---------- Barra ---------- */
[data-section="nav"] .nav__bar {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(.875rem, .6rem + .8vw, 1.5rem) var(--gutter);
}
[data-section="nav"] .nav__bar > * { pointer-events: auto; }
[data-section="nav"] .nav__brand { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding-block: .5rem; }
[data-section="nav"] .nav__logo { display: block; width: clamp(104px, 90px + 2.6vw, 144px); height: auto; aspect-ratio: 4914 / 1031; overflow: visible; }

[data-section="nav"] .nav__time { display: none; }
[data-section="nav"] .nav__time,
[data-section="nav"] .nav__cta,
[data-section="nav"] .nav__toggle {
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0;
}
[data-section="nav"] .nav__clock { font-variant-numeric: tabular-nums; }
[data-section="nav"] .nav__clock .nav__colon { animation: nav-blink 2s steps(1) infinite; }
[data-section="nav"] .nav__time-city,
[data-section="nav"] .nav__time-gmt { color: var(--nav-muted); transition: color .45s var(--ease-out); }
@keyframes nav-blink { 50% { opacity: .25; } }

[data-section="nav"] .nav__actions { display: flex; align-items: center; gap: .5rem; justify-self: end; }

[data-section="nav"] .nav__cta { display: none; }
[data-section="nav"] .nav__cta,
[data-section="nav"] .nav__toggle {
  align-items: center; gap: .6rem;
  min-height: 44px; padding: .65rem 1.1rem;
  border: 1px solid currentColor; border-radius: 999px;
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s;
}
[data-section="nav"] .nav__toggle { display: inline-flex; }
[data-section="nav"] .nav__cta-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal-glow);
  animation: nav-pulse 2.4s var(--ease-out) infinite;
}
[data-section="nav"][data-on="signal"]:not(.is-open) .nav__cta-dot { background: var(--signal-ink); }
@keyframes nav-pulse { 0% { box-shadow: 0 0 0 0 var(--signal-glow); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }

@media (hover: hover) {
  [data-section="nav"] .nav__cta:hover,
  [data-section="nav"] .nav__toggle:hover { background: var(--nav-fg); color: var(--bg-under, var(--ink)); }
  [data-section="nav"][data-on="paper"]:not(.is-open) .nav__cta:hover,
  [data-section="nav"][data-on="paper"]:not(.is-open) .nav__toggle:hover { color: var(--paper); }
  [data-section="nav"][data-on="signal"]:not(.is-open) .nav__cta:hover,
  [data-section="nav"][data-on="signal"]:not(.is-open) .nav__toggle:hover { color: var(--signal); }
}

[data-section="nav"] .nav__burger { position: relative; width: 18px; height: 8px; display: block; }
[data-section="nav"] .nav__burger span {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .5s var(--ease-out), top .5s var(--ease-out);
}
[data-section="nav"] .nav__burger span:first-child { top: 0; }
[data-section="nav"] .nav__burger span:last-child { top: 6.5px; }
[data-section="nav"].is-open .nav__burger span:first-child { top: 3.25px; transform: rotate(45deg); }
[data-section="nav"].is-open .nav__burger span:last-child { top: 3.25px; transform: rotate(-45deg); }

.no-js [data-section="nav"] .nav__toggle { display: none; }

@media (min-width: 640px) {
  [data-section="nav"] .nav__cta { display: inline-flex; }
}
@media (min-width: 900px) {
  [data-section="nav"] .nav__bar { grid-template-columns: 1fr auto 1fr; }
  [data-section="nav"] .nav__time { display: inline-flex; gap: .6rem; justify-self: center; }
}

[data-section="nav"] .nav__cta,
[data-section="nav"] .nav__time { transition: opacity .4s var(--ease-out), visibility .4s, background-color .3s var(--ease-out), color .3s var(--ease-out); }
[data-section="nav"].is-open .nav__cta { opacity: 0; visibility: hidden; }

/* ---------- Menú ---------- */
[data-section="nav"] .nav__menu {
  position: fixed; inset: 0; z-index: 1;
  display: block; overflow-y: auto; overscroll-behavior: contain;
  background: var(--ink); color: var(--paper);
  pointer-events: auto;
}
[data-section="nav"] .nav__menu[hidden] { display: none; }

/* Textura de retícula muy tenue, como un pliego */
[data-section="nav"] .nav__veil {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgb(var(--paper-rgb) / .05) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--gutter)) / 4) 100%;
  background-position: var(--gutter) 0;
}
@media (min-width: 900px) {
  [data-section="nav"] .nav__veil { background-size: calc((100% - 2 * var(--gutter)) / 12) 100%; }
}
[data-section="nav"] .nav__beam {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, var(--light), var(--signal));
  box-shadow: 0 0 30px 3px var(--signal-glow);
  transform: scaleY(0); opacity: 0; pointer-events: none;
}

[data-section="nav"] .nav__inner {
  position: relative;
  min-height: 100%;
  max-width: var(--maxw); margin-inline: auto;
  padding: calc(5.5rem + 2vh) var(--gutter) calc(var(--gutter) + 1rem);
  display: grid; gap: 2.5rem; align-content: space-between;
}
@media (min-width: 900px) {
  [data-section="nav"] .nav__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter);
    align-content: end; align-items: end;
    padding-top: 7rem;
  }
  [data-section="nav"] .nav__links { grid-column: 1 / span 8; }
  [data-section="nav"] .nav__side { grid-column: 9 / span 4; }
}

[data-section="nav"] .nav__links li { overflow: clip; padding-bottom: .04em; }
[data-section="nav"] .nav__link {
  display: inline-flex; align-items: flex-start; gap: .6rem;
  font-family: var(--f-display); font-weight: 800; letter-spacing: -0.045em;
  /* tope por ancho: «laboratorio» (≈ 5,5 em) entra con aire en 320 */
  font-size: min(10.5vh, 2.25rem + 6vw, (100vw - 2 * var(--gutter)) / 5.7); line-height: .98;
  color: var(--paper);
}
[data-section="nav"] .nav__mask { display: inline-grid; overflow: clip; padding-right: .12em; }
[data-section="nav"] .nav__w {
  grid-area: 1 / 1; display: block;
  transition: transform .6s var(--ease-out);
}
[data-section="nav"] .nav__w--b {
  font-weight: 300; font-style: italic; letter-spacing: -0.04em; color: var(--signal);
  transform: translateY(105%);
}
@media (hover: hover) {
  [data-section="nav"] .nav__link:hover .nav__w--a { transform: translateY(-105%); }
  [data-section="nav"] .nav__link:hover .nav__w--b { transform: none; }
}
[data-section="nav"] .nav__link:focus-visible { outline: 2px solid var(--signal); outline-offset: 6px; }
[data-section="nav"] .nav__link:focus-visible .nav__w--a { transform: translateY(-105%); }
[data-section="nav"] .nav__link:focus-visible .nav__w--b { transform: none; }

[data-section="nav"] .nav__side { display: grid; gap: 1.75rem; align-content: end; }
[data-section="nav"] .nav__lema { font-size: var(--t-lg); line-height: 1.15; color: var(--paper); max-width: 22ch; }
[data-section="nav"] .nav__rule { display: block; height: 1px; margin-bottom: -.5rem; background: rgb(var(--paper-rgb) / .18); transform-origin: 0 50%; }
[data-section="nav"] .nav__contact { display: grid; gap: .9rem; }
[data-section="nav"] .nav__contact li { display: grid; gap: .15rem; }
[data-section="nav"] .nav__k {
  font-family: var(--f-display); font-size: var(--t-sm); font-weight: 400; font-style: italic; color: var(--nav-k, rgb(var(--paper-rgb) / .62));
}
[data-section="nav"] .nav__contact a {
  justify-self: start; font-size: var(--t-base); color: var(--paper);
  background: linear-gradient(var(--signal), var(--signal)) 0 100% / 0 1px no-repeat;
  transition: background-size .5s var(--ease-out), color .3s;
  overflow-wrap: anywhere;
}
[data-section="nav"] .nav__contact a:hover,
[data-section="nav"] .nav__contact a:focus-visible { background-size: 100% 1px; color: var(--light); }
[data-section="nav"] .nav__place { font-size: var(--t-sm); line-height: 1.5; color: rgb(var(--paper-rgb) / .62); font-variant-numeric: tabular-nums; }

/* ---------- Preview de sección en el menú (Ronda 2) ----------
   Una mini card de papel que acompaña al cursor al pasar por un link: número grande (dato real de la sección),
   una línea real y un detalle gráfico del lenguaje de esa sección. Solo desktop con puntero fino o foco de
   teclado; decorativa (aria-hidden) y sin eventos de puntero. */
[data-section="nav"] .nav__peek { display: none; }
@media (min-width: 900px) {
  [data-section="nav"] .nav__peek {
    display: grid;
    position: fixed; left: 0; top: 0; z-index: 3;
    width: 260px;
    pointer-events: none;
    opacity: 0; visibility: hidden;
    will-change: transform;
  }
  [data-section="nav"] .nav__peek.is-on { visibility: visible; }
}
[data-section="nav"] .nav__card {
  grid-area: 1 / 1;
  position: relative;
  display: grid; gap: .7rem;
  padding: 1.1rem 1.15rem 1.2rem; border-radius: 3px 3px 14px 3px; /* esquina de hoja doblada: es una nota, no un botón */
  background: var(--paper); color: var(--ink);
  box-shadow: 0 34px 70px -24px rgb(var(--ink-rgb) / .9);
  clip-path: inset(0 0 100% 0);
}
[data-section="nav"] .nav__card.is-active { clip-path: inset(0 0 0 0); }
[data-section="nav"] .nav__card-big {
  font-family: var(--f-display); font-size: 2.6rem; line-height: .9; letter-spacing: var(--tr-logo, -0.05em);
  text-wrap: balance;
}
[data-section="nav"] .nav__card-big b { font-weight: 900; }
[data-section="nav"] .nav__card-big i { font-weight: 300; font-style: italic; }
[data-section="nav"] .nav__card-art { display: block; width: 100%; height: auto; overflow: visible; }
[data-section="nav"] .nav__card-art * { vector-effect: non-scaling-stroke; }
[data-section="nav"] .nav__card-art path,
[data-section="nav"] .nav__card-art circle,
[data-section="nav"] .nav__card-art rect { stroke: var(--ink); stroke-width: 1.25; }
[data-section="nav"] .nav__card-art .a-dim { stroke-opacity: .28; }
[data-section="nav"] .nav__card-art .a-sig { stroke: var(--signal); stroke-width: 2; }
[data-section="nav"] .nav__card-art .a-sigf { fill: var(--signal); stroke: none; }
[data-section="nav"] .nav__card-art .a-ink,
[data-section="nav"] .nav__card-art .a-fill { fill: var(--ink); stroke: none; }
[data-section="nav"] .nav__card-art text { fill: var(--ink); font-family: var(--f-display); font-style: italic; font-size: 14px; }
[data-section="nav"] .nav__card-art .a-sigt { fill: var(--signal-deep); font-weight: 700; }
[data-section="nav"] .nav__card-art .a-poster { fill: var(--signal-ink); font-family: var(--f-display); font-weight: 900; font-size: 30px; letter-spacing: -1px; }
/* piezas que se mueven al activarse la card (solo transform) */
[data-section="nav"] .nav__card-art .a-line { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease-out) .12s; }
[data-section="nav"] .nav__card-art .a-arrow,
[data-section="nav"] .nav__card-art .a-flo { transform-box: fill-box; transition: transform .7s var(--ease-out) .12s; }
[data-section="nav"] .nav__card-art .a-arrow { transform: translateX(-10px); }
[data-section="nav"] .nav__card-art .a-flo { transform-origin: 0 0; transform: scaleX(.2); }
[data-section="nav"] .nav__card.is-active .a-line,
[data-section="nav"] .nav__card.is-active .a-flo { transform: none; }
[data-section="nav"] .nav__card.is-active .a-arrow { transform: none; }
[data-section="nav"] .nav__card-txt {
  font-family: var(--f-serif); font-size: 1.0625rem; line-height: 1.4; color: var(--ink); text-wrap: pretty;
  max-width: 22ch;
}

/* ---------- Cortina de luz para saltos largos de ancla (Ronda 2) ---------- */
[data-section="nav"] .nav__curtain {
  position: fixed; inset: 0; z-index: 5;
  background: var(--light);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  visibility: hidden;
}
[data-section="nav"] .nav__curtain.is-on { visibility: visible; }
/* el borde que avanza: la línea de luz naranja */
[data-section="nav"] .nav__curtain-edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--signal) 20%, var(--signal) 80%, transparent);
  box-shadow: 0 0 28px 4px var(--signal-glow);
}
/* Mientras salta, el header sube por encima del riel y la barra de progreso para que la cortina los cubra */
[data-section="nav"].is-jumping { z-index: calc(var(--z-overlay) + 1); transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-section="nav"] .nav__cta-dot,
  [data-section="nav"] .nav__clock .nav__colon { animation: none; }
  [data-section="nav"] .nav__card-art .a-line,
  [data-section="nav"] .nav__card-art .a-arrow,
  [data-section="nav"] .nav__card-art .a-flo { transition: none; transform: none; }
}


/* ===== css/sections/02-hero.css ===== */
/* Sección hero — todo scopeado bajo [data-section="hero"]
   Ronda 3 (DIRECCION-R3): penumbra violeta, luz ámbar, el lema con la gramática del logo.
   - "no importa qué vendés, sino" en Poppins Light Italic (lo que no importa: susurro, más tenue).
   - "cómo lo vendés." en Poppins Black (lo que importa: peso). Misma medida para los dos tramos chicos;
     "cómo" a escala de cartel. La línea de base de "cómo lo vendés." pisa el mismo piso que la puerta.
   - La luz de la puerta toca el titular (degradé ámbar recortado al texto + copia que sube de opacidad).
   Colores siempre desde tokens (A01 cambia valores, no nombres). */

[data-section="hero"] {
  --hero-pad-top: clamp(5.25rem, 11svh, 8rem);
  /* tamaños del lema: --hb = "cómo"; --ha = los dos tramos chicos (light italic y "lo vendés.") */
  --hb: min(33vw, 20svh);
  --ha: min(10vw, 6svh);
  --hero-door-h: 78%;
  --leaf: 16deg; /* hoja entreabierta: estado estático (sin JS, touch y reducido) */
  /* derivados de tokens */
  --hero-whisper: color-mix(in oklab, var(--fg) 70%, var(--bg));      /* tramo light italic: tenue, AA de sobra */
  --hero-warm: color-mix(in oklab, var(--light), var(--signal) 45%);  /* la luz ya calentada */
  --hero-deep: color-mix(in oklab, var(--ink), black 45%);            /* lo más oscuro del cuarto */
  --hero-wood: color-mix(in oklab, var(--ink), black 18%);            /* la hoja */
  --hero-frame: color-mix(in oklab, var(--ink), var(--paper) 7%);     /* el marco, apenas más claro que la pared */
  --hero-signal-a: color-mix(in srgb, var(--signal) 24%, transparent);
  --hero-signal-b: color-mix(in srgb, var(--signal) 9%, transparent);
  --hero-shadow: color-mix(in srgb, var(--hero-deep) 75%, transparent); /* sombras teñidas de penumbra */
  background: var(--ink);
}

/* ---------- Escenario (se fija con pin en JS) ---------- */
[data-section="hero"] .hero__stage {
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  padding: var(--hero-pad-top) var(--gutter) clamp(1.25rem, 4svh, 2.5rem);
  /* QA3 #3: el fondo sigue a sangre, pero el contenido se alinea con el contenedor del nav (--maxw) */
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  isolation: isolate;
  /* la penumbra tiene color: un poco más de violeta donde está la puerta */
  background:
    radial-gradient(70% 55% at 50% 72%, color-mix(in oklab, var(--ink), var(--paper) 5%), transparent 70%),
    var(--ink);
}

/* ---------- El lema ---------- */
[data-section="hero"] .hero__title {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  z-index: 2;
}
[data-section="hero"] .hero__h1 {
  margin: 0;
  font-size: var(--ha); /* h1 y su copia de luz (<p>) con la misma base: los em internos coinciden */
  font-weight: 400;
  line-height: 1;
  font-family: var(--f-display);
  color: var(--fg);
  text-transform: none;
  white-space: nowrap;
  font-kerning: normal;
}
[data-section="hero"] .hero__line { display: block; }

/* Tramo 1 · Light Italic: lo que vendés, en voz baja */
[data-section="hero"] .hero__a {
  font-size: var(--ha);
  font-style: italic;
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  padding-right: .08em; /* la itálica no se corta en la máscara */
  color: var(--hero-whisper);
}

/* Tramo 2 · Black: cómo lo vendés */
[data-section="hero"] .hero__b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-weight: 900;
  color: var(--fg);
  margin-left: calc(-.045 * var(--hb)); /* alineación óptica: la panza de la c se mete en el margen */
}
[data-section="hero"] .hero__como {
  display: block;
  font-size: var(--hb);
  line-height: .8;
  letter-spacing: -0.062em;
  padding-right: .07em;
}
/* la máscara se corre hacia el margen lo mismo que la c, así no la recorta */
[data-section="hero"] .hero__mask-b { margin-left: calc(-.06 * var(--hb)); padding-left: calc(.06 * var(--hb)); }
/* kerning a mano en cuerpo de cartel: la ó se acerca a la c y deja respirar a la m */
[data-section="hero"] .hero__k-o { margin-left: -.018em; margin-right: .006em; }
[data-section="hero"] .hero__lv {
  display: block;
  align-self: flex-end;
  font-size: var(--ha);
  line-height: 1;
  letter-spacing: -0.045em;
  margin-top: .1em;
  padding-right: .02em;
}

/* La luz de la puerta toca "cómo lo vendés." (en móvil la puerta está abajo: la luz sube desde el piso) */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-section="hero"] .hero__b {
    background-image: linear-gradient(180deg, var(--fg) 45%, var(--light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  [data-section="hero"] .hero__h1--lit .hero__b {
    background-image: linear-gradient(180deg, transparent 25%, var(--light) 62%, var(--hero-warm) 100%);
  }
}

/* Copia de luz: misma caja que el h1, encima; solo cambia su opacidad (mouse/tap cerca de la puerta) */
[data-section="hero"] .hero__h1--lit {
  position: absolute;
  inset: 0;
  margin: 0;
  pointer-events: none;
  opacity: 0;
}
[data-section="hero"] .hero__h1--lit .hero__mask-a { visibility: hidden; }

/* ---------- La puerta (CSS 3D) ---------- */
[data-section="hero"] .hero__door {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  justify-self: center;
  position: relative;
  height: var(--hero-door-h);
  aspect-ratio: 1 / 1.85;
  z-index: 1;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* El piso: una línea que no es adorno, es donde apoyan la puerta y el lema */
[data-section="hero"] .door__floor {
  position: absolute;
  left: -60%;
  right: -60%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 25%, var(--line-strong) 75%, transparent);
  pointer-events: none;
}

[data-section="hero"] .door__glow {
  position: absolute;
  left: -90%;
  right: -90%;
  top: -25%;
  bottom: -35%;
  z-index: -1;
  opacity: .6;
  pointer-events: none;
}
/* La luz respira: el halo late apenas (la opacidad del padre la maneja GSAP en intro/scroll) */
[data-section="hero"] .door__glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(closest-side at 56% 60%, var(--hero-signal-a), var(--hero-signal-b) 48%, transparent 100%);
  animation: hero-breathe 5.2s ease-in-out infinite;
}
/* Refuerzo de luz cuando el mouse se acerca o se toca la puerta */
[data-section="hero"] .door__bloom {
  position: absolute;
  left: -40%;
  right: -60%;
  top: -12%;
  bottom: -30%;
  z-index: -1;
  background: radial-gradient(closest-side at 62% 58%, color-mix(in srgb, var(--light) 22%, transparent), var(--hero-signal-b) 52%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}

[data-section="hero"] .door__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Marco: jambas y dintel con volumen (luz de la izquierda, sombra violeta a la derecha) */
[data-section="hero"] .door__frame {
  position: absolute;
  inset: 0;
  padding: 7% 9% 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--paper) 6%, transparent), transparent 18%, transparent 80%, var(--hero-shadow)),
    linear-gradient(180deg, var(--hero-frame), color-mix(in oklab, var(--hero-frame), var(--hero-deep) 40%));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--paper) 7%, transparent),
    0 2.5rem 4.5rem -1.5rem var(--hero-shadow);
}

[data-section="hero"] .door__opening {
  position: relative;
  height: 100%;
  background: var(--hero-deep);
  /* QA3 #4: la perspectiva vive en el transform de la hoja (WebKit aplanaba la del padre) */
  box-shadow: inset 0 0 0 1px var(--hero-shadow);
}
/* Cara interna de la jamba y el dintel (profundidad) sobre la luz */
[data-section="hero"] .door__opening::before,
[data-section="hero"] .door__opening::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
[data-section="hero"] .door__opening::before {
  left: 0; top: 0; bottom: 0;
  width: 7%;
  background: linear-gradient(90deg, var(--hero-shadow), transparent);
}
[data-section="hero"] .door__opening::after {
  left: 0; right: 0; top: 0;
  height: 4%;
  background: linear-gradient(180deg, var(--hero-shadow), transparent);
}

/* La luz del otro lado: --light arriba, el ámbar (--signal) se junta abajo como luz de lámpara */
[data-section="hero"] .door__light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 55% at 50% 100%, color-mix(in srgb, var(--signal) 55%, transparent), transparent 72%),
    linear-gradient(180deg, var(--light) 0%, var(--light) 42%, var(--hero-warm) 100%);
}
/* La luz titila apenas: el calor de abajo sube y baja (solo opacity) */
[data-section="hero"] .door__flicker {
  position: absolute;
  inset: 0;
  background: radial-gradient(110% 55% at 70% 100%, var(--signal), transparent 72%);
  opacity: .3;
  animation: hero-flicker 6.5s linear infinite;
}

/* Hoja: gira sobre las bisagras (borde izquierdo) hacia adentro.
   --leaf (intro/scroll) + corriente de aire (--sway) + invitación del mouse/tap (--peek).
   --live (1 → 0 al empezar el scroll) apaga lo vivo para que el pase quede exacto. */
[data-section="hero"] .door__leaf {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 0 50%;
  /* perspective() propia (QA3 #4): no depende del contexto 3D del padre. Los translateX(±30%) ponen el punto de
     fuga donde estaba el perspective-origin del vano (30% 50%), así el giro se ve igual que antes. */
  transform: translateX(30%) perspective(900px) translateX(-30%)
    rotateY(calc(var(--leaf) + (var(--sway, 0deg) + var(--peek, 0deg)) * var(--live, 1)));
  transform-style: preserve-3d;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--hero-wood), var(--paper) 4%) 0%,
    var(--hero-wood) 55%,
    color-mix(in oklab, var(--hero-wood), black 25%) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper) 5%, transparent);
}
[data-section="hero"] .door__panel {
  position: absolute;
  inset: 9% 14% 9% 14%;
  border: 1px solid color-mix(in srgb, var(--paper) 5%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--paper) 3%, transparent);
}
[data-section="hero"] .door__knob {
  position: absolute;
  right: 9%;
  top: 51%;
  width: 13%;
  height: max(3px, 1.1%);
  border-radius: 1px 3px 3px 1px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--hero-frame), var(--light) 22%), var(--hero-frame));
}
/* Canto de la hoja: lo ilumina la luz de adentro */
[data-section="hero"] .door__edge {
  position: absolute;
  top: 0;
  right: 0;
  width: max(6px, 5%);
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(180deg, var(--light), var(--hero-warm));
  opacity: .92;
}
[data-section="hero"] .door__shade {
  position: absolute;
  inset: 0;
  background: var(--hero-deep);
  opacity: 0;
  pointer-events: none;
}

/* Luz que se derrama en el piso, desde la rendija hacia el frente */
[data-section="hero"] .door__spill {
  position: absolute;
  top: 100%;
  left: -6%;
  right: -6%;
  height: 22%;
  transform-origin: 100% 0;
  transform: scaleX(calc(var(--spill-s, .42) + var(--peek-s, 0) * var(--live, 1)));
  clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--light) 42%, transparent),
    color-mix(in srgb, var(--signal) 12%, transparent) 60%,
    transparent);
  pointer-events: none;
}

/* Polvo flotando en el haz (canvas: lo dibuja el JS; en reducido queda un cuadro fijo) */
[data-section="hero"] .door__dust {
  position: absolute;
  left: -6%;
  width: 112%;
  top: 62%;
  height: 60%;
  z-index: 3;
  pointer-events: none;
}

/* ---------- Pie: bajada + "pasá" ---------- */
[data-section="hero"] .hero__foot {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.25rem;
  position: relative;
  z-index: 2;
}
[data-section="hero"] .hero__sub {
  max-width: 31ch;
  font-family: "Newsreader", var(--f-serif), Georgia, serif;
  font-optical-sizing: auto;
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.45;
  color: var(--fg-muted);
  text-wrap: pretty;
}
/* "pasá": lo que se dice al abrirle la puerta a alguien. Flecha dibujada a mano; un tramo de luz baja por ella. */
[data-section="hero"] .hero__scroll {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  justify-self: end;
  min-height: 44px;
  min-width: 44px;
  padding: .25rem .5rem;
  color: var(--fg);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  text-decoration: none;
}
[data-section="hero"] .hero__scroll-mark {
  width: 1.1rem;
  height: 2.9rem;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4;
}
[data-section="hero"] .hero__scroll-mark .is-base { stroke: var(--line-strong); }
[data-section="hero"] .hero__scroll-mark .is-lit {
  stroke: var(--signal);
  stroke-width: 1.8;
  clip-path: inset(0 0 100% 0);
  animation: hero-scroll 2.2s var(--ease-in-out) infinite;
}
[data-section="hero"] .hero__scroll:hover .is-lit,
[data-section="hero"] .hero__scroll:focus-visible .is-lit { animation-duration: 1.2s; }
@keyframes hero-scroll {
  0% { clip-path: inset(0 0 100% 0); }
  55% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(100% 0 0 0); }
}
@keyframes hero-breathe {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes hero-flicker {
  0% { opacity: .3; }
  18% { opacity: .46; }
  20% { opacity: .26; }
  23% { opacity: .42; }
  50% { opacity: .58; }
  70% { opacity: .33; }
  72% { opacity: .5; }
  75% { opacity: .37; }
  100% { opacity: .3; }
}
/* Fuera de pantalla todo lo que late se pausa */
[data-section="hero"].hero--paused .door__glow::before,
[data-section="hero"].hero--paused .door__flicker,
[data-section="hero"].hero--paused .hero__scroll-mark .is-lit { animation-play-state: paused; }

/* ---------- Luz final ---------- */
[data-section="hero"] .hero__flood {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--light);
  visibility: hidden;
  pointer-events: none;
}
[data-section="hero"].hero--motion .hero__flood { visibility: visible; clip-path: inset(50% 50% 50% 50%); opacity: 0; }

/* Sin JS / reducido: degradé estático de la penumbra a la luz del manifiesto */
[data-section="hero"] .hero__after {
  height: clamp(8rem, 30svh, 18rem);
  background: linear-gradient(to bottom,
    var(--ink) 0%,
    color-mix(in oklab, var(--ink), var(--signal) 18%) 45%,
    var(--light) 100%);
}
[data-section="hero"].hero--motion .hero__after { display: none; }

/* ---------- Móvil (< 600): la puerta más grande y menos aire abajo (QA6 #13) ---------- */
@media (max-width: 599px) {
  [data-section="hero"] .hero__door {
    width: min(56vw, 15rem);
    height: auto;
    max-height: 100%; /* si la pantalla es baja, manda el alto de la fila (aspect-ratio ajusta el ancho) */
  }
  [data-section="hero"] .hero__after { height: 28svh; }
  /* la punta de la flecha cae sobre la línea de base de la bajada */
  [data-section="hero"] .hero__scroll { padding-bottom: .55rem; }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
  [data-section="hero"] {
    --hb: min(30vw, 22svh);
    /* QA3 #1: la línea mide ~13,4em; con /14 entra en el ancho útil en todo 600–899 */
    --ha: min(calc((100vw - 2 * var(--gutter)) / 14), 6.2svh);
    --hero-door-h: min(74%, 60vw);
  }
  [data-section="hero"] .hero__br { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) {
  /* QA3 #2: "lo vendés." alinea con el final de "cómo", no contra el margen */
  [data-section="hero"] .hero__b { width: max-content; max-width: 100%; }
}

/* ---------- Desktop (y celular apaisado): el lema y la puerta comparten piso ---------- */
@media (min-width: 900px), (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  [data-section="hero"] {
    /* tope en el contenedor (--maxw): en 1920/2560 el lema y la puerta no crecen más que la grilla (QA3 #3) */
    --hb: min(18vw, 30svh, calc(var(--maxw) * .18));
    --ha: calc(var(--hb) * .225);
    --hero-door-h: min(60svh, 31vw, calc(var(--maxw) * .31));
  }
  [data-section="hero"] .hero__stage {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr) auto auto;
    padding-bottom: clamp(4.5rem, 10svh, 6.5rem); /* deja libre el indicador de sección de A02 */
    background:
      radial-gradient(48% 70% at 84% 62%, color-mix(in oklab, var(--ink), var(--paper) 5%), transparent 70%),
      var(--ink);
  }
  /* El lema mide lo mismo que la puerta: el susurro a la altura del dintel, "cómo" parado en el piso.
     El hueco entre "sino" y "cómo" es la pausa antes de lo que importa. */
  [data-section="hero"] .hero__title {
    grid-column: 1 / 10;
    grid-row: 1 / 3;
    align-self: end;
    display: flex;
    height: calc(var(--hero-door-h) + .3 * var(--ha));
    /* la caja termina en la línea de base de "cómo": así la puerta (alineada abajo) apoya en el mismo piso */
    margin-bottom: calc(-0.05 * var(--hb));
  }
  [data-section="hero"] .hero__h1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
  }
  [data-section="hero"] .hero__b {
    flex-direction: row;
    align-items: baseline;
    gap: .3em;
  }
  [data-section="hero"] .hero__lv { align-self: auto; margin-top: 0; }
  /* la puerta está a la derecha: la luz llega de costado */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    [data-section="hero"] .hero__b {
      background-image: linear-gradient(90deg, var(--fg) 50%, var(--light) 100%);
    }
    [data-section="hero"] .hero__h1--lit .hero__b {
      background-image: linear-gradient(90deg, transparent 30%, var(--light) 66%, var(--hero-warm) 100%);
    }
  }
  [data-section="hero"] .hero__door {
    grid-column: 10 / 13;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: center;
  }
  [data-section="hero"] .door__floor { left: -600%; right: -30%; }
  [data-section="hero"] .hero__foot {
    grid-column: 1 / 10;
    grid-row: 3;
    margin-top: clamp(1.75rem, 5svh, 3.25rem);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2.5rem;
  }
  [data-section="hero"] .hero__sub { grid-column: 1; margin-left: calc(var(--hb) * 1.18); }
  [data-section="hero"] .hero__scroll { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="hero"] .door__glow::before,
  [data-section="hero"] .door__flicker,
  [data-section="hero"] .hero__scroll-mark .is-lit { animation: none; }
  [data-section="hero"] .hero__scroll-mark .is-lit { clip-path: inset(55% 0 0 0); }
}

/* ---------- Celular apaisado (QA3 #2): misma composición que desktop, todo dentro de 390 px de alto ---------- */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 640px) {
  [data-section="hero"] { --hero-door-h: 46svh; }
  [data-section="hero"] .hero__stage { min-height: 0; padding-bottom: 1rem; }
  [data-section="hero"] .hero__b { width: auto; }
  [data-section="hero"] .hero__foot { margin-top: .75rem; }
}


/* ===== css/sections/03-manifiesto.css ===== */
/* Sección manifiesto (A05 · ronda 3) — todo scopeado bajo [data-section="manifiesto"]
   La frase es un afiche: Poppins Black = lo que sostenemos, Poppins Light Italic = lo que descartamos,
   Newsreader itálica = la bisagra. Un solo color de luz: el trazo ámbar bajo "lo que funciona."
   Pasada final (F3): escala --t-display-xl, cinta con los 6 servicios y destello, sin flecha. */
[data-section="manifiesto"] {
  /* Empalme con el hero: --light desde el primer píxel */
  --bg: var(--light);
  --fg: var(--ink);
  --fg-muted: var(--gray);
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 45%, transparent);
  /* Fantasma: ≥ 3:1 sobre --light (texto grande); la frase se lee entera antes de entintarse */
  --mnf-ghost: color-mix(in srgb, var(--ink) 50%, var(--light));
  --mnf-serif: "Newsreader", var(--f-serif), Georgia, serif;
  /* QA6 #1: escala común de títulos (xl = manifiesto, contacto) */
  --mnf-poster: var(--t-display-xl, clamp(3.6rem, 0.8rem + 10.5vw, 10.5rem));
  position: relative;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
}

[data-section="manifiesto"] .mnf__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Escenario ---------- */
[data-section="manifiesto"] .mnf__stage {
  position: relative;
  overflow: clip;
  padding-block: clamp(5rem, 3rem + 7vw, 10rem) clamp(4rem, 2rem + 6vw, 9rem);
}
[data-section="manifiesto"] .mnf__inner { position: relative; z-index: 1; container-type: inline-size; }

/* La luz que entra respira muy lento detrás de la frase (lo único ambiental de la sección) */
[data-section="manifiesto"] .mnf__glow {
  position: absolute;
  top: -35%;
  right: -30%;
  width: min(110vw, 76rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--signal) 26%, transparent),
    color-mix(in srgb, var(--signal) 8%, transparent) 55%,
    transparent 74%);
  opacity: 0.8;
  pointer-events: none;
}
[data-section="manifiesto"].is-live .mnf__glow { animation: mnf-breathe 10s ease-in-out infinite alternate; }
@keyframes mnf-breathe {
  from { transform: scale(0.94); opacity: 0.65; }
  to { transform: scale(1.05); opacity: 1; }
}

/* ---------- La frase como afiche ---------- */
[data-section="manifiesto"] .mnf__title {
  font-family: var(--f-display);
  font-size: var(--mnf-poster);
  font-weight: 900;
  line-height: 0.86;
  letter-spacing: -0.055em;
  font-kerning: normal;
  text-wrap: balance;
}
[data-section="manifiesto"] .mnf__line { display: block; }
/* aire entre palabras solo en las líneas Black gigantes (el tracking negativo las pegaba) */
[data-section="manifiesto"] .mnf__line--lead,
[data-section="manifiesto"] .mnf__line--works { word-spacing: 0.1em; }

/* "La diferencia": Black a tamaño afiche */
[data-section="manifiesto"] .mnf__line--lead { margin-left: -0.05em; }

/* "no está en hacer más,": lo que se descarta, en la liviana del logo */
[data-section="manifiesto"] .mnf__line--less {
  font-size: 0.5em;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: 0.32em;
  padding-left: 0.2em;
}

/* "sino": la bisagra, en Newsreader; "en hacer" la sigue chica */
[data-section="manifiesto"] .mnf__line--turn {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.18em;
  margin-top: 0.06em;
  margin-bottom: 0.1em;
}
[data-section="manifiesto"] .mnf__w--sino {
  font-family: var(--mnf-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.92em;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
}
[data-section="manifiesto"] .mnf__then {
  font-size: 0.42em;
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* "lo que funciona.": Black, a tamaño afiche, con el trazo detrás */
/* QA3 #7: la línea se achica lo justo para entrar en la caja (cqi = ancho del contenido de .mnf__inner) */
[data-section="manifiesto"] .mnf__line--works {
  position: relative;
  font-size: min(1em, var(--mnf-fit) * 1cqi);
  padding-right: 0.06em;
  --mnf-fit: 17.6; /* mobile: el renglón más ancho es "funciona." */
}
[data-section="manifiesto"] .mnf__acc {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  white-space: nowrap;
}
[data-section="manifiesto"] .mnf__acc--b { margin-top: 0.02em; }

/* kerning a mano en los cuerpos gigantes */
[data-section="manifiesto"] .mnf__w--la { letter-spacing: -0.075em; }
[data-section="manifiesto"] .mnf__w--funciona { letter-spacing: -0.06em; }

/* Cada palabra: fantasma de fondo + tinta encima (la tinta se revela con clip-path) */
[data-section="manifiesto"] .mnf__w {
  position: relative;
  z-index: 1;
  display: inline-block;
}
[data-section="manifiesto"] .mnf__w::before {
  content: attr(data-w);
  content: attr(data-w) / "";
  position: absolute;
  inset: 0;
  color: var(--mnf-ghost);
  pointer-events: none;
}
[data-section="manifiesto"] .mnf__ink { position: relative; display: inline-block; }

/* ---------- El trazo ámbar: pincel con presión, revelado por una máscara ---------- */
[data-section="manifiesto"] .mnf__brush {
  position: absolute;
  z-index: 0;
  left: -0.08em;
  bottom: -0.2em;
  width: calc(100% + 0.14em);
  height: 0.4em;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.85; /* QA6 #11: el titular gana */
}
[data-section="manifiesto"] .mnf__ink-brush { fill: var(--signal); }
[data-section="manifiesto"] .mnf__ink-brush--dry { opacity: 0.55; }
[data-section="manifiesto"] .mnf__reveal {
  fill: none;
  stroke: #fff;
  stroke-width: 64;
  stroke-linecap: butt;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}
/* Mobile: una pasada por renglón. Desktop: una sola pasada larga */
[data-section="manifiesto"] .mnf__brush--full { display: none; }
[data-section="manifiesto"] .mnf__brush--b { height: 0.38em; }

/* ---------- Principios: tres frases, tres gestos de lapicera ---------- */
[data-section="manifiesto"] .mnf__principles {
  display: grid;
  gap: clamp(3.5rem, 2.5rem + 4vw, 7rem);
  padding-block: clamp(1rem, 0.5rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 3rem);
}
[data-section="manifiesto"] .mnf__p { position: relative; }
[data-section="manifiesto"] .mnf__p-text {
  font-family: var(--f-display);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
  margin: 0;
}
[data-section="manifiesto"] .mnf__soft {
  display: block;
  font-weight: 300;
  font-style: italic;
  font-size: 0.48em;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 0.12em;
}
[data-section="manifiesto"] .mnf__firm { display: block; font-weight: 900; word-spacing: 0.08em; }

/* cada uno con su escala y su lugar */
[data-section="manifiesto"] .mnf__p--ruido .mnf__p-text { font-size: clamp(2.6rem, 0.8rem + 8vw, 6.6rem); }
[data-section="manifiesto"] .mnf__p--rumbo { justify-self: end; text-align: right; }
[data-section="manifiesto"] .mnf__p--rumbo .mnf__p-text { font-size: clamp(2.1rem, 0.8rem + 5.6vw, 4.8rem); }
[data-section="manifiesto"] .mnf__p--foco { margin-left: 6%; }
[data-section="manifiesto"] .mnf__p--foco .mnf__p-text { font-size: clamp(1.9rem, 0.9rem + 4vw, 3.6rem); }

/* Lapicera: tinta, trazo irregular, se dibuja con stroke-dashoffset */
[data-section="manifiesto"] .mnf__pen {
  position: absolute;
  overflow: visible;
  pointer-events: none;
  max-width: none;
}
[data-section="manifiesto"] .mnf__pen path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

/* 1 · "ruido," queda tachado y se apaga */
[data-section="manifiesto"] .mnf__noise { position: relative; display: inline-block; }
[data-section="manifiesto"] .mnf__pen--strike { left: -6%; top: 22%; width: 112%; height: 62%; }
[data-section="manifiesto"] .mnf__pen--strike path { stroke-width: 2.8; }
[data-section="manifiesto"] .mnf__noise { opacity: 0.62; } /* sin JS: ya tachado (≥ 3:1, texto grande) */
.js [data-section="manifiesto"] .mnf__p--ruido:not(.is-done) .mnf__noise { opacity: 1; }
[data-section="manifiesto"] .mnf__noise { transition: opacity 0.9s var(--ease-out) 0.35s; }

/* 2 · "dirección comercial." va sin adorno (QA6 #11: un solo protagonista por pantalla) */
[data-section="manifiesto"] .mnf__aim { display: inline-block; }

/* 3 · "foco." queda encerrado en un círculo que no cierra */
[data-section="manifiesto"] .mnf__focus { position: relative; display: inline-block; }
[data-section="manifiesto"] .mnf__pen--ring { left: -5%; top: -22%; width: 114%; height: 146%; }

/* ---------- Cinta: los seis servicios, separados por un destello de luz ---------- */
[data-section="manifiesto"] .mnf__tape-zone {
  position: relative;
  overflow: clip;
  padding-block: calc(1.5rem + 4vw) calc(2.5rem + 5vw);
}
[data-section="manifiesto"] .mnf__tape {
  position: relative;
  left: 50%;
  width: 130vw;
  margin-left: -65vw;
  background: var(--ink);
  color: var(--light);
  transform: rotate(-3.5deg);
  padding-block: clamp(0.85rem, 0.6rem + 0.8vw, 1.5rem);
  overflow: clip;
  box-shadow: 0 1.2rem 2.4rem -1.4rem color-mix(in srgb, var(--ink) 55%, transparent);
}
[data-section="manifiesto"] .mnf__track { display: flex; width: max-content; will-change: transform; }
[data-section="manifiesto"] .mnf__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.55em;
  padding-right: 0.55em;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 0.9rem + 2.8vw, 3.9rem);
  line-height: 1.1;
  white-space: nowrap;
}
[data-section="manifiesto"] .mnf__svc { display: inline; }
[data-section="manifiesto"] .mnf__svc b { font-weight: 900; letter-spacing: -0.045em; word-spacing: 0.1em; }
[data-section="manifiesto"] .mnf__svc i {
  font-family: var(--mnf-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  opacity: 0.8;
}
[data-section="manifiesto"] .mnf__svc em { font-style: italic; font-weight: 300; letter-spacing: -0.03em; }

/* el destello: la luz de la puerta reducida a un brillo (QA6 #10: la puerta queda para hero, proceso y contacto) */
[data-section="manifiesto"] .mnf__spark {
  width: 0.5em;
  height: 0.5em;
  flex-shrink: 0;
  overflow: visible;
  fill: var(--signal);
  transform: translateY(-0.04em) rotate(8deg);
}

/* ---------- Breakpoints ---------- */
/* Celular con movimiento: el hero termina con la pantalla llena de luz y el manifiesto sigue en la misma luz.
   Con el colchón de arriba completo había casi una pantalla de crema vacía; acá la frase asoma enseguida. */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  .js [data-section="manifiesto"] .mnf__stage { padding-top: 2rem; }
}
@media (min-width: 768px) {
  [data-section="manifiesto"] .mnf__line--less { padding-left: 1.6em; font-size: 0.46em; }
  [data-section="manifiesto"] .mnf__line--turn { justify-content: flex-start; padding-left: 42%; }
  [data-section="manifiesto"] .mnf__acc { display: inline-block; }
  [data-section="manifiesto"] .mnf__acc--b { margin-top: 0; }
  [data-section="manifiesto"] .mnf__line--works { display: inline-block; white-space: nowrap; --mnf-fit: 12.4; }
  [data-section="manifiesto"] .mnf__brush--a,
  [data-section="manifiesto"] .mnf__brush--b { display: none; }
  [data-section="manifiesto"] .mnf__brush--full { display: block; height: 0.36em; bottom: -0.17em; }

  [data-section="manifiesto"] .mnf__principles { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  [data-section="manifiesto"] .mnf__p--ruido { grid-column: 1 / 11; }
  [data-section="manifiesto"] .mnf__p--rumbo { grid-column: 4 / 13; }
  [data-section="manifiesto"] .mnf__p--foco { grid-column: 2 / 9; margin-left: 0; }
}

@media (min-width: 1200px) {
  [data-section="manifiesto"] .mnf__p--rumbo { margin-top: -2.5rem; }
  [data-section="manifiesto"] .mnf__p--foco { margin-top: -1rem; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="manifiesto"] .mnf__glow,
  [data-section="manifiesto"].is-live .mnf__glow { animation: none; }
  [data-section="manifiesto"] .mnf__noise { transition: none; }
}


/* ===== css/sections/04-servicios.css ===== */
/* Sección servicios — A06 · ronda 3 (+ F4: "+" a mano, jerarquía fila 1, escala m, botón del sistema) · todo scopeado bajo [data-section="servicios"]
   Gramática: Poppins Black (lo que hacemos) ↔ Poppins Light Italic (lo que te llevás).
   La luz (--light) entra en la fila como entra por una puerta; el ámbar (--signal) es solo luz. */

[data-section="servicios"] {
  --srv-name: clamp(1.9rem, 0.95rem + 3.3vw, 4.25rem);
  --srv-serif: "Newsreader", var(--f-serif);
  --srv-shadow: color-mix(in srgb, var(--ink) 30%, transparent);
  --srv-hair: color-mix(in srgb, var(--ink) 14%, transparent);
  --srv-stage: clamp(7rem, 1rem + 7.5vw, 10rem);  /* ancho de la pieza viajera (desktop) */
  --srv-mini: 4.75rem;                              /* miniatura en mobile/touch */
  --srv-tilt: 0deg;
  --srv-slant: 4rem;                                /* inclinación del borde de la luz */
  padding-block: var(--section-y);
  overflow-x: clip;
}
/* cada hoja se apoyó a mano: ninguna queda derecha */
[data-section="servicios"] [data-srv="1"] { --srv-tilt: -2deg; }
[data-section="servicios"] [data-srv="2"] { --srv-tilt: 1.4deg; }
[data-section="servicios"] [data-srv="3"] { --srv-tilt: -0.8deg; }
[data-section="servicios"] [data-srv="4"] { --srv-tilt: 2.2deg; }
[data-section="servicios"] [data-srv="5"] { --srv-tilt: -1.5deg; }
[data-section="servicios"] [data-srv="6"] { --srv-tilt: 1deg; }

[data-section="servicios"] .srv__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Encabezado: el par Black ↔ Light Italic, en diagonal ---------- */
[data-section="servicios"] .srv__head { margin-bottom: clamp(3rem, 1.5rem + 5vw, 7rem); }
[data-section="servicios"] .srv__title {
  display: grid;
  font-family: var(--f-display);
  font-size: var(--t-display-m, clamp(2.5rem, 1.2rem + 4.6vw, 6rem)); /* PLAN-FIX: escala m */
  line-height: 0.88;
  text-transform: none;
}
[data-section="servicios"] .srv__title-a {
  max-width: 11ch;
  font-weight: 900;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
[data-section="servicios"] .srv__title-b {
  justify-self: end;
  margin-top: -0.06em;
  padding-right: 0.08em; /* la itálica se va de caja: que no la corte el borde */
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.035em;
  text-align: right;
  text-wrap: balance;
}

/* ---------- Lista ---------- */
[data-section="servicios"] .srv__list { position: relative; border-bottom: 1px solid var(--line-strong); }

[data-section="servicios"] .srv__item { position: relative; isolation: isolate; color: var(--fg); }
/* la luz que entra: un plano --light con el borde inclinado que barre la fila */
[data-section="servicios"] .srv__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(-1 * var(--gutter));
  z-index: -1;
  background: var(--light);
  clip-path: polygon(0 0, 0 0, calc(-1 * var(--srv-slant)) 100%, 0 100%);
  transition: clip-path 0.6s var(--ease-door);
}
[data-section="servicios"] .srv__rule {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: var(--line-strong);
  transform-origin: 0 50%;
}

[data-section="servicios"] .srv__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "lock door"
    "desc slot";
  gap: 1.25rem 1rem;
  padding-block: 1.75rem 2rem;
}

/* ---------- Bloque de título + resultado ---------- */
[data-section="servicios"] .srv__lock { grid-area: lock; min-width: 0; }
[data-section="servicios"] .srv__h { font-size: inherit; font-weight: inherit; }
[data-section="servicios"] .srv__btn { display: block; width: 100%; text-align: left; color: inherit; }
/* toda la fila es clickeable, sin anidar contenido en el botón */
[data-section="servicios"] .srv__btn::after { content: ""; position: absolute; inset: 0; z-index: 2; }
/* el foco del sistema (anillo de tinta + halo ámbar) se dibuja sobre la fila entera, no sobre el texto */
[data-section="servicios"] .srv__btn:focus-visible { outline: none; box-shadow: none; }
[data-section="servicios"] .srv__btn:focus-visible::after {
  outline: 2px solid var(--focus-ring, var(--fg));
  outline-offset: -2px;
  box-shadow: inset 0 0 0 6px var(--focus-halo, transparent);
}

[data-section="servicios"] .srv__mask,
[data-section="servicios"] .srv__out {
  display: block;
  container-type: inline-size; /* el par se ajusta a su columna y nunca invade la bajada */
}
[data-section="servicios"] .srv__mask { overflow: clip; padding-block: 0.12em 0.22em; margin-block: -0.12em -0.22em; }
[data-section="servicios"] .srv__name,
[data-section="servicios"] .srv__out {
  font-family: var(--f-display);
  line-height: 0.92;
}
[data-section="servicios"] .srv__name { display: grid; font-size: min(var(--srv-name), 11cqi); }
[data-section="servicios"] .srv__name > *,
[data-section="servicios"] .srv__out > * { grid-area: 1 / 1; text-wrap: balance; }
[data-section="servicios"] .srv__name-a {
  font-weight: 900;
  letter-spacing: -0.05em;
  text-transform: lowercase; /* como "ema": la marca habla en minúscula */
  clip-path: inset(-0.3em -0.3em -0.3em -0.3em);
  transition: clip-path 0.5s var(--ease-door);
}
[data-section="servicios"] .srv__name-b {
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  clip-path: inset(-0.3em 100% -0.3em -0.3em);
  transition: clip-path 0.5s var(--ease-door);
}
/* el resultado: mismo cuerpo, peso opuesto, corrido como la itálica del logo */
[data-section="servicios"] .srv__out {
  display: grid;
  margin-top: 0.12rem;
}
[data-section="servicios"] .srv__out > * { font-size: min(var(--srv-name), 11cqi); padding-left: 0.9em; }
[data-section="servicios"] .srv__out-a {
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.03em;
  clip-path: inset(-0.3em -0.3em -0.3em -0.3em);
  transition: clip-path 0.5s var(--ease-door) 0.07s;
}
[data-section="servicios"] .srv__out-b {
  font-weight: 900;
  letter-spacing: -0.05em;
  clip-path: inset(-0.3em 100% -0.3em -0.3em);
  transition: clip-path 0.5s var(--ease-door) 0.07s;
}

/* ---------- Bajada: Newsreader, para leer ---------- */
[data-section="servicios"] .srv__desc {
  grid-area: desc;
  max-width: 30ch;
  font-family: var(--srv-serif);
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}

/* ---------- El "+": dibujado a mano, gira 45° al abrir (marca visual del acordeón) ---------- */
[data-section="servicios"] .srv__plus {
  grid-area: door;
  justify-self: end;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.5rem;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  transition: rotate 0.45s var(--ease-door);
}
[data-section="servicios"] .srv__item.is-open .srv__plus { rotate: 45deg; }

/* ---------- Panel (acordeón) ---------- */
[data-section="servicios"] .srv__panel { padding-bottom: 2rem; }
[data-section="servicios"] .srv__fig { display: grid; gap: 1rem; width: min(100%, 20rem); }
[data-section="servicios"] .srv__cap {
  max-width: 28ch;
  font-family: var(--srv-serif);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--fg-muted);
}

/* La hoja donde vive cada pieza: papel sobre la luz, apoyada a mano, sombra de tinta */
[data-section="servicios"] .srv__card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--paper);
  color: var(--ink);
  border-radius: 1px;
  box-shadow: 0 0 0 1px var(--srv-hair), 0 22px 36px -24px var(--srv-shadow);
  rotate: var(--srv-tilt);
}

[data-section="servicios"] .srv-art { width: 100%; height: 100%; overflow: visible; }
[data-section="servicios"] .srv-art__key { fill: var(--signal); }
[data-section="servicios"] .srv-art__hand { filter: url(#srv-hand); }
[data-section="servicios"] .srv-art__guides { fill: none; stroke: var(--gray); stroke-width: 0.9; opacity: 0.75; }
[data-section="servicios"] .srv-art__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-section="servicios"] .srv-art__line--thin { stroke-width: 1.1; }
[data-section="servicios"] .srv-art__line--heavy { stroke-width: 20; }
[data-section="servicios"] .srv-art__line--block { stroke-width: 12; }
[data-section="servicios"] .srv-art__hatch { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linecap: round; }
[data-section="servicios"] .srv-art__note {
  fill: currentColor;
  font-family: var(--srv-serif);
  font-style: italic;
  font-size: 17px;
}


/* ---------- Pie con CTA: pregunta en Black, respuesta en Light Italic ---------- */
[data-section="servicios"] .srv__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}
[data-section="servicios"] .srv__foot-txt {
  display: grid;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  line-height: 1;
}
[data-section="servicios"] .srv__foot-a { font-weight: 900; letter-spacing: -0.045em; }
[data-section="servicios"] .srv__foot-b { padding-left: 0.9em; font-weight: 300; font-style: italic; letter-spacing: -0.03em; }
/* PLAN-FIX: primario sobre papel */
[data-section="servicios"] .srv__cta,
[data-section="servicios"] .srv__cta:hover {
  justify-content: center;
  min-height: 48px;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  font: 600 1rem/1 var(--f-display);
  box-shadow: var(--shadow-ink-2);
}
[data-section="servicios"] .srv__cta { transition: box-shadow var(--dur-fast); }
[data-section="servicios"] .srv__cta:hover { box-shadow: var(--shadow-ink-3); }

/* ---------- Estados ----------
   abierta / hover / foco: entra la luz, la puerta se abre y el par cambia de peso
   (el resultado pasa a Black: lo que te llevás queda en primer plano). */
[data-section="servicios"] .srv__item.is-open::before,
[data-section="servicios"] .srv__item.is-active::before,
[data-section="servicios"] .srv__item:has(.srv__btn:focus-visible)::before {
  clip-path: polygon(0 0, calc(100% + var(--srv-slant)) 0, 100% 100%, 0 100%);
}
[data-section="servicios"] .srv__item.is-open .srv__name-a,
[data-section="servicios"] .srv__item.is-active .srv__name-a,
[data-section="servicios"] .srv__item:has(.srv__btn:focus-visible) .srv__name-a,
[data-section="servicios"] .srv__item.is-open .srv__out-a,
[data-section="servicios"] .srv__item.is-active .srv__out-a,
[data-section="servicios"] .srv__item:has(.srv__btn:focus-visible) .srv__out-a { clip-path: inset(-0.3em -0.3em -0.3em 100%); }
[data-section="servicios"] .srv__item.is-open .srv__name-b,
[data-section="servicios"] .srv__item.is-active .srv__name-b,
[data-section="servicios"] .srv__item:has(.srv__btn:focus-visible) .srv__name-b,
[data-section="servicios"] .srv__item.is-open .srv__out-b,
[data-section="servicios"] .srv__item.is-active .srv__out-b,
[data-section="servicios"] .srv__item:has(.srv__btn:focus-visible) .srv__out-b { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }

@media (hover: hover) and (pointer: fine) {
  [data-section="servicios"] .srv__item:hover::before { clip-path: polygon(0 0, calc(100% + var(--srv-slant)) 0, 100% 100%, 0 100%); }
  [data-section="servicios"] .srv__item:hover .srv__name-a,
  [data-section="servicios"] .srv__item:hover .srv__out-a { clip-path: inset(-0.3em -0.3em -0.3em 100%); }
  [data-section="servicios"] .srv__item:hover .srv__name-b,
  [data-section="servicios"] .srv__item:hover .srv__out-b { clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
  [data-section="servicios"] .srv__item:hover:not(.is-open) .srv__plus { rotate: 12deg; }
}

/* ---------- Carril: miniatura en mobile/touch, lugar de la pieza viajera en desktop ---------- */
[data-section="servicios"] .srv__slot { grid-area: slot; position: relative; align-self: start; width: var(--srv-mini); }
/* jerarquía: la fila 1 (identidad, el oficio del dueño) muestra su boceto grande y en hoja;
   el resto, el dibujo directo sobre el papel, sin tarjeta ni sombra */
[data-section="servicios"] [data-srv="1"] { --srv-mini: 7.5rem; --srv-slot: clamp(9rem, 14vw, 13rem); }
[data-section="servicios"] .srv__item:not([data-srv="1"]) .srv__mini { background: none; box-shadow: none; rotate: none; }
[data-section="servicios"] .srv__mini { width: 100%; transition: transform 0.6s var(--ease-out); }
[data-section="servicios"] .srv__mini .srv-art__note { display: none; }
[data-section="servicios"] .srv__mini .srv-art__line { stroke-width: 5; }
[data-section="servicios"] .srv__mini .srv-art__line--thin { stroke-width: 3; }
[data-section="servicios"] .srv__mini .srv-art__line--heavy { stroke-width: 26; }
[data-section="servicios"] .srv__mini .srv-art__line--block { stroke-width: 18; }
[data-section="servicios"] .srv__mini .srv-art__guides { stroke-width: 2.4; }
[data-section="servicios"] .srv__mini .srv-art__hatch { stroke-width: 5; }
[data-section="servicios"]:not(.srv--stage) .srv__item.is-center .srv__mini { transform: translateY(-4px) rotate(-1.5deg); }
/* con la pieza viajera, el carril queda vacío para ella */
[data-section="servicios"].srv--stage .srv__item:not([data-srv="1"]) .srv__mini { display: none; }

/* ---------- Mobile: filas 2–6 sin miniatura (el boceto está al abrir), más cortas ---------- */
@media (max-width: 899.98px) {
  [data-section="servicios"] .srv__row { padding-block: 1.25rem 1.5rem; gap: 0.75rem 1rem; }
  [data-section="servicios"] .srv__item:not([data-srv="1"]) .srv__row { grid-template-areas: "lock door" "desc desc"; }
  [data-section="servicios"] .srv__item:not([data-srv="1"]) .srv__slot { display: none; }
  [data-section="servicios"] [data-srv="1"] .srv__row { padding-block: 1.5rem 2rem; }
}

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  [data-section="servicios"] .srv__title-b { margin-top: -0.02em; }
  [data-section="servicios"] .srv__row {
    grid-template-columns: minmax(0, 1.8fr) var(--srv-slot, var(--srv-stage)) minmax(13rem, 1fr) 1.125rem;
    grid-template-areas: "lock slot desc door";
    align-items: start;
    column-gap: var(--gutter);
    min-height: calc(var(--srv-stage) * 1.25 + 3rem);
    padding-block: clamp(1.75rem, 1rem + 1.6vw, 3rem);
  }
  /* la bajada arriba, pegada a su título (QA6 #2b) */
  [data-section="servicios"] .srv__desc { align-self: start; padding-top: 0.35em; }
  [data-section="servicios"] .srv__slot { align-self: center; width: 100%; }
  [data-section="servicios"] .srv__item:not([data-srv="1"]) .srv__slot { width: min(100%, 6.5rem); justify-self: center; }
  [data-section="servicios"] [data-srv="1"] .srv__row { min-height: calc(var(--srv-slot) * 1.25 + 3rem); }
  [data-section="servicios"] .srv__mini .srv-art__line { stroke-width: 3.4; }
  [data-section="servicios"] .srv__mini .srv-art__line--thin { stroke-width: 1.8; }
  [data-section="servicios"] .srv__mini .srv-art__line--heavy { stroke-width: 22; }
  [data-section="servicios"] .srv__mini .srv-art__line--block { stroke-width: 14; }
  [data-section="servicios"] .srv__panel { padding-bottom: 3.5rem; }
  [data-section="servicios"] .srv__fig {
    grid-template-columns: 20rem minmax(0, 15rem);
    align-items: end;
    gap: calc(var(--gutter) * 1.5);
    width: auto;
    padding-left: 0.9em;
  }
}

/* ---------- Pieza viajera (desktop con mouse; la crea el JS) ---------- */
[data-section="servicios"] .srv__inner { position: relative; }
[data-section="servicios"] .srv__stage {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: var(--srv-stage);
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
[data-section="servicios"] .srv__stage .srv__card { rotate: none; box-shadow: 0 0 0 1px var(--srv-hair), 0 26px 40px -22px var(--srv-shadow); }
[data-section="servicios"] .srv__stage .srv-art__note { display: none; }
[data-section="servicios"] .srv__stage .srv-art__line { stroke-width: 3.2; }
[data-section="servicios"] .srv__stage .srv-art__line--thin { stroke-width: 1.8; }
[data-section="servicios"] .srv__stage .srv-art__line--heavy { stroke-width: 22; }
[data-section="servicios"] .srv__stage .srv-art__line--block { stroke-width: 14; }
[data-section="servicios"] .srv__stage .srv-art__guides { stroke-width: 1.6; }
[data-section="servicios"] .srv__stage .srv-art__hatch { stroke-width: 3.6; }

/* ---------- La luz respira (lo único ambiental, y solo mientras se ve) ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-section="servicios"] .srv-art__key,
  [data-section="servicios"] .srv-art__hatch { animation: srv-lamp 3.6s var(--ease-in-out) infinite alternate; }
  [data-section="servicios"] .srv-art__hatch { animation-delay: -1.8s; }
  [data-section="servicios"].srv--js .srv__card:not(.is-live) .srv-art * { animation-play-state: paused; }
}
@keyframes srv-lamp { from { opacity: 0.8; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  [data-section="servicios"] .srv__item::before,
  [data-section="servicios"] .srv__name > *,
  [data-section="servicios"] .srv__out > *,
  [data-section="servicios"] .srv__plus,
  [data-section="servicios"] .srv__mini { transition-duration: 0.01ms; transition-delay: 0s; }
}

/* ---------- Sin JS: paneles abiertos, sin puerta ---------- */
.no-js [data-section="servicios"] .srv__panel[hidden] { display: block; }
.no-js [data-section="servicios"] .srv__plus { display: none; }


/* ===== css/sections/04b-auditoria.css ===== */
/* A13 · Auditoría digital — todo scopeado bajo [data-section="auditoria"]
   Idea: la auditoría es una ficha de diagnóstico impresa. Un perfil esquemático dibujado a lápiz,
   las marcas de quien audita en birome (--signal-deep) y una lupa que la persona mueve.
   El ámbar (--signal) es solo luz: el resaltador, la cinta, el brillo de la lupa y la luz bajo la puerta. */

[data-section="auditoria"] {
  --au-read: "Newsreader", var(--f-serif);
  --au-pen: var(--signal-deep);
  --au-tilt: -1.2deg;
  position: relative;
  /* QA6 #3: mesa de trabajo, otro plano que servicios. Arranca con un pliegue (borde + sombra
     que cae desde arriba) y un tono más cálido que el papel; la ficha se apoya encima. */
  background:
    linear-gradient(rgb(var(--ink-rgb) / 0.07), rgb(var(--ink-rgb) / 0) 1.25rem) no-repeat,
    linear-gradient(#e6e1d4, #ece8de 18rem, var(--paper-2) 60%);
  box-shadow: inset 0 1px 0 rgb(var(--ink-rgb) / 0.16);
  color: var(--ink);
  padding-block: var(--section-y);
  overflow-x: clip;
}
[data-section="auditoria"] .au__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

[data-section="auditoria"] .au__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
}

/* ---------- Título: el par Black ↔ Light Italic ---------- */
[data-section="auditoria"] .au__title {
  display: grid;
  font-family: var(--f-display);
  font-size: var(--t-display-m, clamp(2.5rem, 1.2rem + 4.6vw, 6rem)); /* PLAN-FIX: escala m */
  line-height: 0.9;
}
[data-section="auditoria"] .au__title-a {
  font-weight: 900;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
[data-section="auditoria"] .au__title-b {
  margin-top: 0.08em;
  padding-left: 0.9em;
  padding-right: 0.08em;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* ---------- Bajada ---------- */
[data-section="auditoria"] .au__lead {
  max-width: 34ch;
  font-family: var(--au-read);
  font-optical-sizing: auto;
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- La ficha ---------- */
[data-section="auditoria"] .au__sheet {
  position: relative;
  width: 100%;
  max-width: 34rem;
  justify-self: center;
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  background: var(--paper);
  color: var(--ink);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgb(var(--ink-rgb) / 0.08), var(--shadow-ink-3);
  rotate: var(--au-tilt);
}
[data-section="auditoria"] .au__sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 1.5px solid var(--ink);
}
[data-section="auditoria"] .au__sheet-t {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}
[data-section="auditoria"] .au__sheet-a { font-weight: 900; }
[data-section="auditoria"] .au__sheet-b { font-weight: 300; font-style: italic; }

[data-section="auditoria"] .au__board { position: relative; touch-action: pan-y; }
[data-section="auditoria"] .au__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* lápiz */
[data-section="auditoria"] .au__base { filter: url(#au-hand); }
[data-section="auditoria"] .au__p { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
[data-section="auditoria"] .au__p--thin { stroke-width: 1.1; }
[data-section="auditoria"] .au__fill { fill: var(--ink); }
[data-section="auditoria"] .au__dim { fill: none; stroke: var(--gray); stroke-width: 1.1; stroke-linecap: round; opacity: 0.7; }
[data-section="auditoria"] .au__dim--w { stroke-width: 3.4; opacity: 0.55; }
[data-section="auditoria"] .au__note { fill: var(--paper-2); stroke: var(--ink); stroke-width: 1.1; }
[data-section="auditoria"] .au__note--paper { fill: var(--paper); }
[data-section="auditoria"] .au__tape { fill: var(--signal); opacity: 0.55; }

/* birome y resaltador: dibujados por defecto (sin JS y con reduced se ven completos) */
[data-section="auditoria"] .au__ann {
  fill: none;
  stroke: var(--au-pen);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.02;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.9s var(--ease-out), opacity 0.15s linear;
}
[data-section="auditoria"] .au__mark { stroke: var(--signal); stroke-width: 11; opacity: 0.85; }
[data-section="auditoria"] .au__hand-t {
  fill: var(--au-pen);
  font-family: var(--au-read);
  font-style: italic;
  font-size: 15px;
  transition: opacity 0.5s var(--ease-out) 0.35s;
}

/* armado por JS: lo que la lupa todavía no encontró queda sin marcar */
[data-section="auditoria"].is-armed .au__ann { stroke-dashoffset: 1; opacity: 0; }
[data-section="auditoria"].is-armed .au__hand-t { opacity: 0; }
[data-section="auditoria"].is-f1 [data-z="1"] .au__ann,
[data-section="auditoria"].is-f2 [data-z="2"] .au__ann,
[data-section="auditoria"].is-f3 [data-z="3"] .au__ann,
[data-section="auditoria"].is-f4 [data-z="4"] .au__ann,
[data-section="auditoria"].is-f4 .au__ann[data-z="4"] { stroke-dashoffset: 0; opacity: 1; }
[data-section="auditoria"].is-f4 .au__mark[data-z="4"] { opacity: 0.85; }
[data-section="auditoria"].is-f1 [data-z="1"] .au__hand-t,
[data-section="auditoria"].is-f2 [data-z="2"] .au__hand-t { opacity: 1; }

/* la lupa */
[data-section="auditoria"] .au__lens { pointer-events: none; }
[data-section="auditoria"] .au__lens-bg { fill: none; }
[data-section="auditoria"].has-lens .au__lens-bg { fill: var(--paper); }
[data-section="auditoria"] .au__lens-ring { fill: none; stroke: var(--ink); stroke-width: 3; }
[data-section="auditoria"] .au__lens-handle { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; }
[data-section="auditoria"] .au__lens-shadow { fill: rgb(var(--ink-rgb) / 0.1); stroke: none; }
[data-section="auditoria"] .au__lens-shadow--h { fill: none; stroke: rgb(var(--ink-rgb) / 0.1); stroke-width: 9; stroke-linecap: round; }
[data-section="auditoria"] .au__lens-glint { fill: none; stroke: var(--signal); stroke-width: 3; stroke-linecap: round; }

/* pie de ficha: datos reales, texto en el DOM */
[data-section="auditoria"] .au__facts {
  display: grid;
  margin-top: 1.25rem;
  border-top: 1px solid var(--line-strong);
}
[data-section="auditoria"] .au__fact {
  display: grid;
  grid-template-columns: 6.25rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
}
[data-section="auditoria"] .au__fact dt {
  font-family: var(--f-display);
  font-weight: var(--w-label);
  font-size: var(--t-sm);
  color: var(--gray-dark);
}
[data-section="auditoria"] .au__fact dd {
  font-family: var(--au-read);
  font-size: var(--t-base);
  line-height: 1.45;
  text-wrap: pretty;
}
[data-section="auditoria"] .au__fact--price { border-bottom: 0; padding-bottom: 0; }
[data-section="auditoria"] .au__fact--price dd {
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

/* ---------- Qué incluye ---------- */
[data-section="auditoria"] .au__inc-t {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-lg);
  letter-spacing: -0.025em;
  margin-bottom: 0.5rem;
}
[data-section="auditoria"] .au__list { border-top: 1px solid var(--line-strong); }
[data-section="auditoria"] .au__item {
  position: relative;
  padding: 0.95rem 0 0.95rem 1.4rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--au-read);
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: 44ch;
  text-wrap: pretty;
}
/* la marca en el margen: el resaltador de quien revisa */
[data-section="auditoria"] .au__item::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 1.05rem;
  bottom: 1.05rem;
  width: 5px;
  background: var(--signal);
  border-radius: 3px 1px 4px 2px;
  rotate: 1.5deg;
  transform-origin: 50% 0;
  transition: transform 0.6s var(--ease-out);
}
[data-section="auditoria"] .au__item:nth-child(2)::before { rotate: -1deg; }
[data-section="auditoria"] .au__item:nth-child(3)::before { rotate: 2deg; }
[data-section="auditoria"] .au__item:nth-child(4)::before { rotate: -0.5deg; }
[data-section="auditoria"].is-armed .au__item::before { transform: scaleY(0); }
[data-section="auditoria"].is-f1 .au__item[data-z="1"]::before,
[data-section="auditoria"].is-f2 .au__item[data-z="2"]::before,
[data-section="auditoria"].is-f3 .au__item[data-z="3"]::before,
[data-section="auditoria"].is-f4 .au__item[data-z="4"]::before { transform: none; }

/* ---------- La acción: una puerta cerrada con luz por debajo y por la cerradura ---------- */
[data-section="auditoria"] .au__act { display: grid; justify-items: start; gap: 2.4rem; }
[data-section="auditoria"] .au__cta {
  position: relative;
  display: inline-grid;
  max-width: 100%;
  color: var(--paper);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
[data-section="auditoria"] .au__cta-door {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-height: 4.25rem;
  padding: 1.3rem 1.5rem 1.3rem 1.7rem;
  background: var(--ink);
  border-radius: 3px 3px 0 0;
  /* el tablero de la puerta: un filete interior, como una moldura */
  box-shadow: inset 0 0 0 7px var(--ink), inset 0 0 0 8px rgb(var(--paper-rgb) / 0.16), var(--shadow-ink-2);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
[data-section="auditoria"] .au__cta-txt { min-width: 0; }
/* la acción en grande; cómo se hace, en chico debajo */
[data-section="auditoria"] .au__cta-sub {
  display: block;
  margin-top: 0.35em;
  font-family: var(--f-body);
  font-weight: 400;
  font-size: max(15px, 0.62em);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.82;
}
[data-section="auditoria"] .au__cta-hole {
  flex: none;
  width: 0.8rem;
  height: 1.35rem;
  fill: var(--signal);
  filter: drop-shadow(0 0 0 rgb(var(--signal-rgb) / 0));
  transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
/* la rendija bajo la puerta */
[data-section="auditoria"] .au__cta-gap {
  display: block;
  height: 3px;
  background: var(--signal);
  transform: scaleX(0.6);
  transition: transform 0.6s var(--ease-door);
}
/* la luz que se derrama en el piso */
[data-section="auditoria"] .au__cta-spill {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2.2rem;
  background: linear-gradient(to bottom, var(--signal-glow), rgb(var(--signal-rgb) / 0));
  clip-path: polygon(4% 0, 96% 0, 108% 100%, -8% 100%);
  transform-origin: 50% 0;
  transform: scaleY(0.45);
  opacity: 0.65;
  pointer-events: none;
  transition: transform 0.7s var(--ease-door), opacity 0.7s var(--ease-door);
}
[data-section="auditoria"] .au__cta:hover .au__cta-gap,
[data-section="auditoria"] .au__cta:focus-visible .au__cta-gap,
[data-section="auditoria"].is-complete .au__cta-gap { transform: none; }
[data-section="auditoria"] .au__cta:hover .au__cta-spill,
[data-section="auditoria"] .au__cta:focus-visible .au__cta-spill,
[data-section="auditoria"].is-complete .au__cta-spill { transform: none; opacity: 1; }
[data-section="auditoria"] .au__cta:hover .au__cta-hole,
[data-section="auditoria"] .au__cta:focus-visible .au__cta-hole {
  filter: drop-shadow(0 0 5px rgb(var(--signal-rgb) / 0.9));
  transform: scale(1.12);
}
[data-section="auditoria"] .au__cta:active .au__cta-gap { transform: scaleY(2); transition-duration: 0.2s; }
[data-section="auditoria"] .au__cta:focus-visible { outline: none; box-shadow: none; }
[data-section="auditoria"] .au__cta:focus-visible .au__cta-door {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  box-shadow: 0 0 0 8px var(--focus-halo);
}

[data-section="auditoria"] .au__note-impl {
  max-width: 34ch;
  font-family: var(--au-read);
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--gray-dark);
}

/* ---------- Desktop: la ficha a la derecha, apoyada; el texto a la izquierda ---------- */
@media (min-width: 1024px) {
  [data-section="auditoria"] .au__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    row-gap: clamp(2rem, 1rem + 2vw, 3rem);
    align-items: start;
  }
  [data-section="auditoria"] .au__head { grid-column: 1 / 8; grid-row: 1; }
  [data-section="auditoria"] .au__lead { grid-column: 1 / 6; grid-row: 2; }
  [data-section="auditoria"] .au__inc { grid-column: 1 / 7; grid-row: 3; }
  [data-section="auditoria"] .au__act { grid-column: 1 / 7; grid-row: 4; }
  [data-section="auditoria"] .au__sheet {
    grid-column: 7 / 13;
    grid-row: 1 / 6;
    justify-self: end;
    margin-top: clamp(4rem, 1rem + 5vw, 8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="auditoria"] .au__ann,
  [data-section="auditoria"] .au__hand-t,
  [data-section="auditoria"] .au__item::before,
  [data-section="auditoria"] .au__cta-gap,
  [data-section="auditoria"] .au__cta-spill,
  [data-section="auditoria"] .au__cta-hole { transition: none; }
}


/* ===== css/sections/05-proceso.css ===== */
/* Sección proceso (A07) — ronda 3: un cuadernillo de cuatro páginas, cada una con su composición.
   Todo scopeado bajo [data-section="proceso"]. Colores solo por tokens (penumbra --ink, luz --signal/--light).
   Base mobile-first = páginas apiladas (también sin JS y con reduced motion).
   .is-h la agrega el JS en ≥768px sin reduced: scroll horizontal fijado. */

[data-section="proceso"] {
  --proc-read: "Newsreader", var(--f-serif), Georgia, serif;
  --proc-txt: color-mix(in srgb, var(--fg) 82%, var(--bg));
  --proc-dim: color-mix(in srgb, var(--fg) 12%, var(--bg));
  --proc-lit: var(--light);
  --proc-shadow: color-mix(in srgb, var(--ink) 55%, #000);
  overflow: clip;
  padding-block: var(--section-y);
}

[data-section="proceso"] .proc__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

[data-section="proceso"] .proc__track {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Título: afirmación grande en Poppins Black + la cola dicha en voz baja ---------- */
[data-section="proceso"] .proc__intro { padding-bottom: clamp(4rem, 3rem + 5vw, 7rem); }

[data-section="proceso"] .proc__title { font-weight: inherit; }

[data-section="proceso"] .proc__title-big {
  display: block;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: var(--t-display-m, clamp(2.5rem, 1.2rem + 4.6vw, 6rem));
  line-height: .9;
  letter-spacing: -0.035em;
}
[data-section="proceso"] .proc__title-big > span { display: block; }
/* escalera: "corto," se mete bajo "proceso" esquivando la p; "conversado," vuelve a medio camino */
[data-section="proceso"] .proc__title-l2 { margin-left: 1.05em; }
[data-section="proceso"] .proc__title-l3 { margin-left: .42em; }

[data-section="proceso"] .proc__title-tail {
  display: block;
  margin: 1.1rem 0 0 clamp(1.25rem, .6rem + 3vw, 3rem);
  max-width: 18ch;
  /* QA6 #6: el par de la marca, Black ↔ Light Italic */
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.6rem, 1rem + 2.4vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--proc-txt);
  text-wrap: balance;
}

/* ---------- Páginas ---------- */
[data-section="proceso"] .proc__steps {
  display: grid;
  gap: clamp(5rem, 4rem + 4vw, 8rem);
}

[data-section="proceso"] .proc__step {
  position: relative;
  display: grid;
  column-gap: clamp(1rem, .5rem + 2vw, 2rem);
  align-items: end;
}

[data-section="proceso"] .proc__body { grid-area: body; }
[data-section="proceso"] .proc__fig { grid-area: fig; margin: 0; }
[data-section="proceso"] .proc__num { grid-area: num; }

[data-section="proceso"] .proc__name {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

[data-section="proceso"] .proc__text {
  margin-top: .8rem;
  max-width: 30ch;
  font-family: var(--proc-read);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--proc-txt);
  text-wrap: pretty;
}

/* ---------- Numerales: piezas tipográficas, uno distinto por paso ----------
   En reposo están en penumbra (--proc-dim); la luz los recorre de izquierda a derecha (clip-path). */
[data-section="proceso"] .proc__num {
  position: relative;
  width: max-content;
  font-family: var(--f-display);
  line-height: .8;
  user-select: none;
}
[data-section="proceso"] .proc__num-dim { display: block; color: var(--proc-dim); }
[data-section="proceso"] .proc__num-fill {
  position: absolute;
  inset: 0;
  color: var(--proc-lit);
  clip-path: inset(-20% -12% -20% -12%);
}

/* i: Poppins Light, una sola asta recta y alta como una persona parada; el punto es luz, dibujado a mano.
   Fuste recto (QA6 #6): en itálica la asta sola se leía como "/". */
[data-section="proceso"] .proc__num--1 {
  font-size: clamp(14rem, 8rem + 26vw, 24rem);
  line-height: .7;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0;
  padding-right: .12em;
}
[data-section="proceso"] .proc__tittle {
  position: absolute;
  top: -.06em;
  left: .038em; /* centrado sobre el fuste recto */
  width: .15em;
  height: .15em;
  overflow: visible;
}
[data-section="proceso"] .proc__tittle path {
  fill: var(--signal);
  stroke: var(--signal);
  stroke-width: 2;
}

/* ii: Black, las dos astas casi tocándose */
[data-section="proceso"] .proc__num--2 {
  font-size: clamp(7rem, 4rem + 12vw, 11rem);
  font-weight: 900;
  letter-spacing: -0.015em;
  padding-right: .06em;
}

/* iii: del trazo suelto al trazo firme (Light Italic → Medium → Black): ordenar */
[data-section="proceso"] .proc__num--3 {
  font-size: clamp(6rem, 3.5rem + 10vw, 9rem);
  letter-spacing: -0.02em;
}
[data-section="proceso"] .proc__num--3 span span:nth-child(1) { font-weight: 300; font-style: italic; }
[data-section="proceso"] .proc__num--3 span span:nth-child(2) { font-weight: 500; font-style: italic; margin-inline: .02em; }
[data-section="proceso"] .proc__num--3 span span:nth-child(3) { font-weight: 900; }

/* iv: Black; lo que lo ilumina es la luz de la puerta (ámbar, nunca sobre papel) */
[data-section="proceso"] .proc__num--4 {
  --proc-lit: var(--signal);
  font-size: clamp(8rem, 4rem + 14vw, 13rem);
  font-weight: 900;
  letter-spacing: -0.07em;
  padding-right: .08em;
}

/* ---------- Ilustraciones: trazo con pulso de mano ---------- */
[data-section="proceso"] .proc__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-section="proceso"] .proc__pen { filter: url(#proc-pen); }
[data-section="proceso"] .proc__soft { stroke-width: 1.25; opacity: .5; }
[data-section="proceso"] .proc__bold { stroke-width: 2.75; }
[data-section="proceso"] .proc__draw--signal { stroke: var(--signal); }

/* capa viva: oculta sin JS y con reduced (la ilustración queda completa y quieta) */
[data-section="proceso"] .proc__live { opacity: 0; }
[data-section="proceso"] .proc__ink {
  stroke: var(--proc-lit);
  stroke-width: 1.75;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}
[data-section="proceso"] .proc__steam {
  stroke: color-mix(in srgb, var(--fg) 55%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 34 100;
  stroke-dashoffset: 34;
}
[data-section="proceso"] .proc__spark {
  stroke: var(--proc-lit);
  stroke-width: 3.25;
  stroke-dasharray: 5 100;
  stroke-dashoffset: 5;
}

/* iii: el pliego */
[data-section="proceso"] .proc__sheet {
  --fg: var(--ink);
  --bg: var(--paper);
  --proc-txt: color-mix(in srgb, var(--ink) 84%, var(--paper));
  --proc-dim: color-mix(in srgb, var(--ink) 11%, var(--paper));
  --proc-lit: var(--ink);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "num" "fig" "body";
  row-gap: 1.5rem;
  padding: clamp(1.5rem, 1rem + 3vw, 2.75rem);
  color: var(--ink);
  background: var(--paper);
  border-radius: 3px;
  transform: rotate(-1.1deg);
  box-shadow: 0 2.5rem 4rem -1.5rem var(--proc-shadow), 0 .25rem .75rem -.25rem var(--proc-shadow);
}
[data-section="proceso"] .proc__grid { stroke: color-mix(in srgb, var(--ink) 30%, var(--paper)); stroke-width: 1.25; }
[data-section="proceso"] .proc__block { stroke: var(--ink); stroke-width: 1.75; fill: var(--paper); }
[data-section="proceso"] .proc__block--signal { fill: var(--signal); }
[data-section="proceso"] .proc__hatch { stroke: var(--ink); stroke-width: 1; opacity: .55; }
[data-section="proceso"] .proc__fig--3 { max-width: 26rem; }

/* iv: la puerta */
[data-section="proceso"] .proc__light { fill: var(--signal); stroke: none; }
[data-section="proceso"] .proc__light--floor { fill: url(#proc-floor); }
[data-section="proceso"] .proc__floor-a { stop-color: var(--signal); stop-opacity: .7; }
[data-section="proceso"] .proc__floor-b { stop-color: var(--signal); stop-opacity: 0; }
[data-section="proceso"] .proc__leaf-fill { fill: var(--bg); stroke: none; }

/* ---------- Composición apilada (mobile, sin JS, reduced) ---------- */
[data-section="proceso"] .proc__step--1 {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "num fig" "num body";
}
[data-section="proceso"] .proc__step--1 .proc__fig { max-width: 15rem; align-self: start; padding-top: 1rem; }

[data-section="proceso"] .proc__step--2 {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "body body" "fig num";
  row-gap: 1.5rem;
  padding-left: clamp(0rem, 8vw, 6rem);
}
[data-section="proceso"] .proc__step--2 .proc__fig { max-width: 16rem; align-self: center; }

[data-section="proceso"] .proc__step--3 { padding-inline: clamp(.25rem, 2vw, 2rem); }

[data-section="proceso"] .proc__step--4 {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr);
  grid-template-areas: "fig num" "fig body";
  align-items: end;
  row-gap: 1rem;
}
[data-section="proceso"] .proc__step--4 .proc__fig { max-width: 15rem; align-self: stretch; }
[data-section="proceso"] .proc__step--4 .proc__num { justify-self: start; }
/* en 320 «ejecutamos» comparte fila con la puerta y se pasaba 3 px del borde */
@media (max-width: 767.98px) {
  [data-section="proceso"] .proc__step--4 .proc__name { font-size: min(var(--t-xl), 8vw); }
}

/* Línea de tiempo: solo existe en modo horizontal */
[data-section="proceso"] .proc__timeline { display: none; }

@media (min-width: 560px) {
  [data-section="proceso"] .proc__sheet {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "num fig" "body body";
    align-items: start;
    column-gap: 2rem;
  }
}

/* Apilado ancho (reduced o sin JS en desktop): las páginas alternan lado */
@media (min-width: 900px) {
  [data-section="proceso"]:not(.is-h) .proc__steps { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 7rem; }
  [data-section="proceso"]:not(.is-h) .proc__step--1 { grid-column: 1 / span 6; }
  [data-section="proceso"]:not(.is-h) .proc__step--2 { grid-column: 8 / span 5; padding-left: 0; align-self: end; }
  [data-section="proceso"]:not(.is-h) .proc__step--3 { grid-column: 2 / span 7; }
  [data-section="proceso"]:not(.is-h) .proc__step--4 { grid-column: 9 / span 4; grid-template-columns: minmax(0, 1fr); grid-template-areas: "num" "fig" "body"; row-gap: 1.5rem; }
}

/* ================= Modo horizontal fijado (≥768px, sin reduced) ================= */
[data-section="proceso"].is-h { padding-block: 0; height: calc(100svh + var(--proc-run, 0px)); }

/* sticky en vez de pin de GSAP: mismo efecto, sin layout shift */
[data-section="proceso"].is-h .proc__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: flex;
  flex-direction: column;
}

[data-section="proceso"].is-h .proc__track {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: none;
  margin: 0;
  padding: clamp(5.5rem, 3rem + 6vh, 8rem) 0 0 var(--gutter);
  will-change: transform;
}

[data-section="proceso"].is-h .proc__intro {
  flex: 0 0 auto;
  width: clamp(20rem, 33vw, 36rem);
  padding: 0 clamp(2rem, 4vw, 5rem) 6vh 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
[data-section="proceso"].is-h .proc__title-big { font-size: min(var(--t-display-m, clamp(2.5rem, 1.2rem + 4.6vw, 6rem)), 10vh, 4.5vw); }

[data-section="proceso"].is-h .proc__steps {
  display: flex;
  gap: 0;
  padding-right: var(--gutter);
}

[data-section="proceso"].is-h .proc__step {
  flex: 0 0 auto;
  height: 100%;
  padding-bottom: clamp(1rem, 4vh, 2.5rem);
}

[data-section="proceso"].is-h .proc__name { font-size: min(var(--t-xl), 5.2vh); }

/* i — página angosta y alta: el numeral de punta a punta, texto arriba, dibujo abajo */
[data-section="proceso"].is-h .proc__step--1 {
  width: clamp(28rem, 41vw, 44rem);
  padding-right: clamp(2rem, 4vw, 5rem);
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "num body" "num ." "num fig";
}
[data-section="proceso"].is-h .proc__num--1 { font-size: min(92vh, 40vw); align-self: end; }
[data-section="proceso"].is-h .proc__step--1 .proc__body { padding-top: 4vh; }
[data-section="proceso"].is-h .proc__step--1 .proc__fig { max-width: min(17rem, 30vh); justify-self: end; padding-top: 0; }

/* ii — columna estrecha, el texto colgado arriba y el numeral abajo a la derecha */
[data-section="proceso"].is-h .proc__step--2 {
  width: clamp(19rem, 27vw, 28rem);
  padding-left: 0;
  padding-right: clamp(2.5rem, 5vw, 6rem);
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "body" "fig" "num";
  row-gap: 2vh;
}
[data-section="proceso"].is-h .proc__step--2 .proc__body { align-self: start; padding-top: 12vh; }
[data-section="proceso"].is-h .proc__step--2 .proc__fig { max-width: min(17rem, 32vh); align-self: center; }
[data-section="proceso"].is-h .proc__num--2 { font-size: min(26vh, 14vw); justify-self: end; }

/* iii — el pliego claro, más ancho, apenas torcido */
[data-section="proceso"].is-h .proc__step--3 {
  width: clamp(30rem, 45vw, 46rem);
  padding: 2vh clamp(2rem, 4vw, 4.5rem) clamp(2rem, 7vh, 4rem) 0;
  align-items: center;
}
[data-section="proceso"].is-h .proc__sheet {
  height: 100%;
  max-height: 40rem;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "num fig" "body body";
  align-items: start;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
[data-section="proceso"].is-h .proc__num--3 { font-size: min(20vh, 10vw); align-self: start; }
[data-section="proceso"].is-h .proc__fig--3 { justify-self: end; width: 100%; max-width: min(26rem, 46vh); margin-top: 3vh; }
[data-section="proceso"].is-h .proc__sheet .proc__body { align-self: end; }

/* iv — la puerta ocupa el alto; el numeral grande toma la luz */
[data-section="proceso"].is-h .proc__step--4 {
  width: clamp(30rem, 47vw, 50rem);
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "fig num" "fig ." "fig body";
}
[data-section="proceso"].is-h .proc__step--4 .proc__fig { max-width: none; height: 100%; align-self: stretch; display: flex; align-items: flex-end; }
[data-section="proceso"].is-h .proc__step--4 .proc__svg { width: auto; max-width: 100%; height: 100%; max-height: min(36rem, 62vh); }
[data-section="proceso"].is-h .proc__num--4 { font-size: min(34vh, 17vw); margin-top: 3vh; }

/* ---------- Línea de tiempo: un trazo a mano con anotación ---------- */
[data-section="proceso"].is-h .proc__timeline {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  /* deja libre la franja inferior para el indicador global de sección */
  padding: 0 var(--gutter) clamp(2.75rem, 6.5vh, 4rem);
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

[data-section="proceso"] .proc__bar {
  position: relative;
  flex: 1 1 auto;
  height: 2.75rem;
}
[data-section="proceso"] .proc__line {
  position: absolute;
  left: 0;
  top: calc(50% - 10px);
  width: 100%;
  height: 20px;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
}
[data-section="proceso"] .proc__line-base { stroke: color-mix(in srgb, var(--fg) 40%, transparent); stroke-width: 1.25; }
[data-section="proceso"] .proc__line-fill {
  stroke: var(--signal);
  stroke-width: 2.25;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
}

[data-section="proceso"] .proc__hito {
  position: absolute;
  top: 0;
  left: var(--at, 0%);
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -1.375rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
/* marca de hito: un círculo hecho a pulso (radios desparejos), relleno de luz por opacidad */
[data-section="proceso"] .proc__hito-mark {
  position: relative;
  width: 12px;
  height: 11px;
  border: 1.5px solid color-mix(in srgb, var(--fg) 60%, transparent);
  border-radius: 46% 54% 50% 48% / 55% 45% 52% 47%;
  background: var(--bg);
  transform: rotate(-8deg);
  transition: transform var(--dur-fast) var(--ease-out);
}
[data-section="proceso"] .proc__hito-mark::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--signal);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
[data-section="proceso"] .proc__hito-n {
  position: absolute;
  top: calc(50% - 1.75rem);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--proc-txt);
  opacity: .7;
  transition: opacity var(--dur-fast) var(--ease-out);
}
[data-section="proceso"] .proc__hito.is-on .proc__hito-mark::after { opacity: 1; }
[data-section="proceso"] .proc__hito.is-on .proc__hito-n { opacity: 1; }
[data-section="proceso"] .proc__hito.is-cur .proc__hito-mark { transform: rotate(-8deg) scale(1.55); }
[data-section="proceso"] .proc__hito:hover .proc__hito-mark { transform: rotate(-8deg) scale(1.3); }
[data-section="proceso"] .proc__hito.is-cur:hover .proc__hito-mark { transform: rotate(-8deg) scale(1.55); }
[data-section="proceso"] .proc__hito:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

[data-section="proceso"] .proc__counter {
  flex: 0 0 auto;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--proc-txt);
  transform: rotate(-2deg) translateY(-.35rem);
}
[data-section="proceso"] .proc__count {
  display: inline-block;
  min-width: 1ch;
  font-weight: 800;
  font-size: 1.5em;
  color: var(--proc-lit);
}


/* ===== css/sections/06-laboratorio.css ===== */
/* Sección laboratorio (A08), ronda 3. Todo scopeado bajo [data-section="laboratorio"].
   Idea: una pared ámbar con el afiche colgado y, al lado, la mesa del estudio (papel) con las herramientas. */

/* Fuentes del afiche (woff2 locales, OFL, ver assets/laboratorio/fonts/LICENCIAS.txt).
   Solo se descargan si algo las usa: el afiche y las muestras de estilo. */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/laboratorio/fonts/bodoni-moda-800.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 500; font-display: swap; src: url("../assets/laboratorio/fonts/bodoni-moda-500-italic.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/laboratorio/fonts/big-shoulders-display-900.woff2") format("woff2"); }

[data-section="laboratorio"] {
  /* tokens locales: todo sale de la paleta global (tinta violeta, papel, luz, ámbar) */
  --lab-wall: var(--signal);
  --lab-ink: var(--ink);
  --lab-paper: var(--paper);
  --lab-lamp: var(--light);
  --lab-sub: var(--gray);                       /* texto secundario sobre papel */
  --lab-hair: rgb(28 24 48 / 0.16);
  --lab-edge: rgb(28 24 48 / 0.55);             /* bordes de controles: ≥ 3:1 sobre papel */
  --lab-shade: 28 24 48;                        /* sombras teñidas de tinta violeta */
  --lab-gap: clamp(2rem, 1rem + 4vw, 5rem);
  --lab-read: "Newsreader", Georgia, serif;    /* lectura (bajadas y ayudas) */
  --fg-muted: rgb(28 24 48 / 0.8);              /* texto chico sobre ámbar, AA */
  padding-block: var(--section-y);
  overflow: clip;
  isolation: isolate;
}
[data-section="laboratorio"] :focus-visible {
  outline: 2px solid var(--lab-ink); outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(255 243 214 / 0.7);
}

/* ---------- Título: el par del logo (Black / Light Italic) ---------- */
[data-section="laboratorio"] .lab__title {
  font-family: var(--f-display); color: var(--fg);
  font-size: var(--t-display-l, clamp(3rem, 1rem + 7vw, 8.25rem));
  line-height: 0.88; letter-spacing: var(--tr-display-l, -0.045em);
  text-wrap: balance;
}
[data-section="laboratorio"] .lab__t { display: block; }
[data-section="laboratorio"] .lab__t--a { font-weight: 900; }
[data-section="laboratorio"] .lab__t--b {
  font-weight: 300; font-style: italic; letter-spacing: -0.04em;
  padding-left: clamp(1.5rem, -1rem + 12vw, 15rem);
  margin-top: 0.06em;
}
[data-section="laboratorio"] .lab__lead {
  margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); max-width: 34ch;
  font-family: var(--lab-read); font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); line-height: 1.55;
  color: var(--fg); text-wrap: pretty;
}

/* ---------- Banco: pared (afiche) + mesa (controles) ---------- */
[data-section="laboratorio"] .lab__bench {
  display: grid; gap: var(--lab-gap);
  grid-template-areas: "stage" "panel" "cta";
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 6rem);
}
[data-section="laboratorio"] .lab__stage { grid-area: stage; }
[data-section="laboratorio"] .lab__panel { grid-area: panel; }
[data-section="laboratorio"] .lab__cta { grid-area: cta; }

/* La pared: una lámpara de cuadro ilumina el afiche desde arriba */
[data-section="laboratorio"] .lab__stage {
  position: relative; margin: 0;
  display: grid; justify-items: center; gap: 1rem;
  padding: clamp(2.25rem, 1.5rem + 3vw, 4rem) 0 clamp(.5rem, .3rem + 1vw, 1.25rem);
}
[data-section="laboratorio"] .lab__stage::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: -4%;
  width: min(120%, 52rem); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 243 214 / 0.75), rgb(255 243 214 / 0.25) 55%, rgb(255 243 214 / 0) 100%);
  pointer-events: none;
}

/* El afiche como objeto: cuelga de un clip, con sombra en la pared, brillo de papel y leve inclinación 3D */
[data-section="laboratorio"] .lab__rig {
  --lab-side: 0rem;
  position: relative;
  width: min(100%, calc(100% - var(--lab-side) * 2), calc((100svh - 11rem) * 297 / 420));
  min-width: min(100%, 17rem);
  aspect-ratio: 297 / 420;
  margin-top: .75rem;
  perspective: 1500px;
}
[data-section="laboratorio"] .lab__wire {
  position: absolute; left: 50%; bottom: 100%; width: 1.5px; height: clamp(1.5rem, .5rem + 2.4vw, 2.75rem);
  background: var(--lab-ink); opacity: .6; transform: translateX(-50%);
}
[data-section="laboratorio"] .lab__shadow {
  position: absolute; inset: 2% 3% -1.5% 3%; z-index: 0;
  background: rgb(var(--lab-shade) / 0.42); filter: blur(24px);
  transform: translate3d(0, 18px, 0); transform-origin: 50% 0;
  pointer-events: none;
}
[data-section="laboratorio"] .lab__tilt {
  position: relative; z-index: 1; width: 100%; height: 100%;
  transform-origin: 50% 0;
  will-change: transform;
}
[data-section="laboratorio"] .lab__sheet {
  position: relative; width: 100%; height: 100%;
  background: var(--lab-paper);
  box-shadow: 0 1px 1.5px rgb(var(--lab-shade) / 0.3), 0 6px 14px -6px rgb(var(--lab-shade) / 0.42);
}
[data-section="laboratorio"] .lab__sheen {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(172deg, rgb(255 255 255 / 0.16) 0%, rgb(255 255 255 / 0) 22%),
    linear-gradient(to bottom, rgb(0 0 0 / 0) 82%, rgb(var(--lab-shade) / 0.08) 100%),
    linear-gradient(to right, rgb(var(--lab-shade) / 0.06), rgb(0 0 0 / 0) 6%, rgb(0 0 0 / 0) 94%, rgb(var(--lab-shade) / 0.06));
  mix-blend-mode: soft-light;
}
[data-section="laboratorio"] .lab__glare {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.12) 45%, rgb(255 255 255 / 0) 70%);
  opacity: 0; transform: translate3d(0, 0, 0);
}
[data-section="laboratorio"] .lab__clip {
  position: absolute; left: 50%; top: 0; width: 3.4rem; height: auto;
  color: var(--lab-ink); transform: translate(-50%, -62%);
  filter: drop-shadow(0 3px 2px rgb(var(--lab-shade) / 0.35));
  pointer-events: none;
}

/* ---------- Tus versiones: pruebas anteriores, chicas, como sueltas sobre la pared ---------- */
[data-section="laboratorio"] .lab__versions[hidden] { display: none; }
[data-section="laboratorio"] .lab__versions { width: 100%; min-width: 0; }
[data-section="laboratorio"] .lab__verlabel { color: var(--fg); font-family: var(--f-display); font-weight: 500; font-size: .875rem; margin-bottom: .5rem; }
[data-section="laboratorio"] .lab__verlist {
  display: flex; gap: .7rem; margin: 0; padding: .35rem .25rem .6rem; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
[data-section="laboratorio"] .lab__veritem { flex: none; scroll-snap-align: start; }
[data-section="laboratorio"] .lab__ver {
  --r: 0deg;
  display: block; width: 3.5rem; aspect-ratio: 297 / 420; padding: 0; border: 0; cursor: pointer;
  background: var(--lab-paper);
  box-shadow: 0 1px 2px rgb(var(--lab-shade) / 0.32), 0 8px 14px -8px rgb(var(--lab-shade) / 0.55);
  transform: rotate(var(--r));
  transition: transform .45s var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
[data-section="laboratorio"] .lab__veritem:nth-child(4n+1) .lab__ver { --r: -1.6deg; }
[data-section="laboratorio"] .lab__veritem:nth-child(4n+2) .lab__ver { --r: 1.2deg; }
[data-section="laboratorio"] .lab__veritem:nth-child(4n+3) .lab__ver { --r: -.8deg; }
[data-section="laboratorio"] .lab__veritem:nth-child(4n+4) .lab__ver { --r: 1.8deg; }
[data-section="laboratorio"] .lab__ver svg { display: block; width: 100%; height: 100%; pointer-events: none; }
@media (hover: hover) {
  [data-section="laboratorio"] .lab__ver:hover { transform: rotate(0deg) scale(1.06); }
}
[data-section="laboratorio"] .lab__ver:focus-visible { transform: rotate(0deg); }

@media (min-width: 48em) {
  [data-section="laboratorio"] .lab__rig { --lab-side: 5.75rem; }
  [data-section="laboratorio"] .lab__versions {
    position: absolute; z-index: 3; right: 0;
    top: clamp(3.25rem, 2.4rem + 3vw, 5rem); width: 4.5rem;
  }
  [data-section="laboratorio"] .lab__verlabel { line-height: 1.25; font-size: .8125rem; }
  [data-section="laboratorio"] .lab__verlist { flex-direction: column; gap: .9rem; overflow: visible; padding: .25rem 0 0; }
  [data-section="laboratorio"] .lab__ver { width: 4.5rem; }
}
[data-section="laboratorio"] .lab__poster { width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; }
[data-section="laboratorio"] .lab__glyph { outline: none; }
[data-section="laboratorio"].lab--move .lab__glyph { cursor: grab; }
[data-section="laboratorio"] .lab__glyph.is-grab { cursor: grabbing; }
[data-section="laboratorio"] .lab__hit { stroke: transparent; stroke-width: 6; stroke-dasharray: 18 12; }
[data-section="laboratorio"] .lab__glyph:focus-visible .lab__hit { stroke: var(--lab-pfg, var(--lab-ink)); }
[data-section="laboratorio"] .lab__glyph.is-held .lab__hit { stroke: var(--lab-pfg, var(--lab-ink)); stroke-dasharray: none; stroke-width: 9; }
/* En Luz, con el foco en una letra se prende todo: el anillo de foco no queda en penumbra */
[data-section="laboratorio"] .lab__poster [data-layer="letters"]:focus-within { mask: none; }
@media (hover: hover) {
  [data-section="laboratorio"].lab--move .lab__glyph:hover .lab__hit { stroke: var(--lab-pfg, var(--lab-ink)); stroke-opacity: .45; }
}
[data-section="laboratorio"] .lab__caption { color: var(--fg); font-family: var(--f-display); font-weight: 500; font-size: .875rem; text-align: center; margin-top: .25rem; }
[data-section="laboratorio"] .lab__caption > span { display: inline-flex; align-items: center; gap: .55rem; }
/* demo: un punto de luz que respira, para que se lea "en vivo" sin gritar */
[data-section="laboratorio"].lab--demo .lab__caption > span::before {
  content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  background: var(--lab-ink); box-shadow: 0 0 0 3px rgb(255 243 214 / 0.8);
  animation: lab-breathe 2.4s ease-in-out infinite;
}
@keyframes lab-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* ---------- La mesa: una hoja de papel apoyada en la pared ámbar ---------- */
[data-section="laboratorio"] .lab__panel {
  --fg: var(--lab-ink); --bg: var(--lab-paper);
  position: relative; display: grid; gap: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); align-content: start; min-width: 0;
  padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
  background: var(--lab-paper); color: var(--lab-ink);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgb(var(--lab-shade) / 0.12), 0 22px 40px -26px rgb(var(--lab-shade) / 0.6);
}
[data-section="laboratorio"] .lab__group { border: 0; margin: 0; padding: 0; min-width: 0; }
[data-section="laboratorio"] .lab__label {
  display: block; padding: 0; margin-bottom: .8rem;
  font-family: var(--f-display); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--lab-ink);
}

/* Nombre: se escribe en grande, como si fuera ya parte del afiche */
[data-section="laboratorio"] .lab__inputwrap { position: relative; }
[data-section="laboratorio"] .lab__input {
  width: 100%; min-height: 3.75rem; padding: .35rem 3.75rem .45rem 0;
  font-family: var(--f-display); font-weight: 900; font-size: clamp(1.7rem, 1.25rem + 1.6vw, 2.5rem);
  letter-spacing: -0.045em; line-height: 1.1; color: var(--lab-ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--lab-ink); border-radius: 0;
  caret-color: var(--lab-wall);
}
[data-section="laboratorio"] .lab__input::placeholder { color: var(--lab-sub); opacity: 1; font-style: italic; font-weight: 300; }
[data-section="laboratorio"] .lab__input:focus-visible { outline: none; box-shadow: 0 4px 0 -1px var(--lab-wall), 0 2px 0 0 var(--lab-ink); }
[data-section="laboratorio"] .lab__count {
  position: absolute; right: 0; bottom: .85rem; color: var(--lab-sub);
  font-family: var(--f-display); font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums;
}

/* Radios nativos, visualmente reemplazados */
[data-section="laboratorio"] .lab__opts { display: grid; gap: .65rem; }
[data-section="laboratorio"] .lab__opts--style { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-section="laboratorio"] .lab__opts--pal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
[data-section="laboratorio"] .lab__opt,
[data-section="laboratorio"] .lab__sw { position: relative; display: block; cursor: pointer; min-width: 0; }
[data-section="laboratorio"] .lab__radio {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2;
}

/* Estilos: muestras tipográficas, como pruebas de imprenta */
[data-section="laboratorio"] .lab__optbox {
  position: relative; isolation: isolate; display: grid; height: 100%;
  grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: .85rem; row-gap: .15rem; align-items: start;
  padding: .85rem .9rem .9rem;
  border: 1px solid var(--lab-edge); border-radius: 2px; color: var(--lab-ink); background: var(--lab-paper);
  transition: border-color var(--dur-fast) var(--ease-out), transform .45s var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out);
}
[data-section="laboratorio"] .lab__optglyph {
  grid-row: span 2; align-self: center; font-size: 2.3rem; line-height: 1; min-width: 2.2ch; text-align: center;
  transition: transform .4s var(--ease-spring);
}
[data-section="laboratorio"] .lab__optglyph--suizo { font-family: var(--f-display); font-weight: 900; letter-spacing: -0.06em; }
[data-section="laboratorio"] .lab__optglyph--editorial { font-family: "Bodoni Moda", Didot, serif; font-style: italic; font-weight: 500; font-size: 2.5rem; }
[data-section="laboratorio"] .lab__optglyph--brutal { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 900; font-size: 2.6rem; padding: 0 .12em; background: var(--lab-ink); color: var(--lab-paper); }
[data-section="laboratorio"] .lab__optglyph--luz { font-family: var(--f-display); font-weight: 300; font-style: italic; letter-spacing: -0.04em; text-shadow: 0 0 .5em rgb(255 178 26 / 0.9); }
[data-section="laboratorio"] .lab__optname { font-family: var(--f-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.15; align-self: end; }
[data-section="laboratorio"] .lab__optdesc { font-family: var(--lab-read); font-size: .9375rem; line-height: 1.35; color: var(--lab-sub); text-wrap: pretty; }

/* Elegido: borde de tinta y un pedazo de cinta de papel que lo marca (viaja con Flip) */
[data-section="laboratorio"] .lab__radio:checked + .lab__optbox { border-color: var(--lab-ink); box-shadow: inset 0 0 0 1px var(--lab-ink), 0 10px 18px -14px rgb(var(--lab-shade) / 0.7); }
[data-section="laboratorio"] .lab__ind {
  position: absolute; z-index: 1; left: 50%; top: -.55rem; width: 3.6rem; height: 1.15rem; margin-left: -1.8rem;
  background: rgb(255 178 26 / 0.82);
  clip-path: polygon(2% 8%, 9% 0, 20% 9%, 33% 1%, 47% 8%, 61% 0, 75% 7%, 89% 1%, 98% 9%, 100% 92%, 90% 100%, 77% 92%, 63% 100%, 50% 93%, 36% 100%, 22% 92%, 9% 100%, 0 91%);
  transform: rotate(-4deg); pointer-events: none;
}

/* Colores: chips de muestrario (el color arriba, el nombre abajo en el blanco del papel) */
[data-section="laboratorio"] .lab__swbox {
  position: relative; isolation: isolate; display: grid; grid-template-rows: auto auto;
  padding: .35rem .35rem .55rem; border-radius: 3px; background: #fff; color: var(--lab-ink);
  box-shadow: 0 0 0 1px var(--lab-hair), 0 6px 12px -10px rgb(var(--lab-shade) / 0.8);
  transition: transform .45s var(--ease-spring);
}
[data-section="laboratorio"] .lab__swchip {
  display: grid; place-items: end start; aspect-ratio: 5 / 3; padding: .3rem .45rem; border-radius: 1px;
  font-family: var(--f-display); font-weight: 900; font-size: 1.15rem; letter-spacing: -0.04em; line-height: 1;
}
[data-section="laboratorio"] .lab__swchip--tinta { background: var(--lab-paper); color: var(--lab-ink); box-shadow: inset 0 0 0 1px var(--lab-hair); }
[data-section="laboratorio"] .lab__swchip--senal { background: var(--lab-wall); color: var(--lab-ink); }
[data-section="laboratorio"] .lab__swchip--negativo { background: var(--lab-ink); color: var(--lab-paper); }
[data-section="laboratorio"] .lab__swchip--negativo span { text-shadow: 0 0 0 transparent; }
[data-section="laboratorio"] .lab__swname { padding: .45rem .15rem 0; font-family: var(--f-display); font-weight: 500; font-size: .875rem; line-height: 1.2; overflow-wrap: anywhere; }
/* el chip elegido se marca con un marco de tinta que viaja con Flip */
[data-section="laboratorio"] .lab__ind--sw {
  inset: -5px; top: -5px; left: -5px; width: auto; height: auto; margin: 0; transform: none; clip-path: none;
  background: none; border: 2px solid var(--lab-ink); border-radius: 5px;
}

[data-section="laboratorio"] .lab__radio:focus-visible + .lab__optbox,
[data-section="laboratorio"] .lab__radio:focus-visible + .lab__swbox { outline: 2px solid var(--lab-ink); outline-offset: 5px; }
/* sin JS / antes de que exista el indicador: el activo igual se marca */
[data-section="laboratorio"]:not(.lab--ready) .lab__radio:checked + .lab__swbox { box-shadow: 0 0 0 2px var(--lab-ink); }
@media (hover: hover) {
  [data-section="laboratorio"] .lab__opt:hover .lab__radio:not(:checked) + .lab__optbox { border-color: var(--lab-ink); transform: rotate(-.6deg); }
  [data-section="laboratorio"] .lab__opt:hover .lab__radio:not(:checked) + .lab__optbox .lab__optglyph { transform: scale(1.08); }
  [data-section="laboratorio"] .lab__sw:hover .lab__radio:not(:checked) + .lab__swbox { transform: translateY(-3px) rotate(1deg); }
}

/* Herramientas */
[data-section="laboratorio"] .lab__actions { display: grid; gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-section="laboratorio"] .lab__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: 1rem 1.5rem; border-radius: var(--radius, 2px);
  font-family: var(--f-display); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
[data-section="laboratorio"] .lab__btn:active { transform: scale(.98); }
[data-section="laboratorio"] .lab__btn > span { white-space: nowrap; }
/* secundarios de la mesa: la misma geometría del botón primario, en contorno de tinta */
[data-section="laboratorio"] .lab__btn--ghost { border: 1.5px solid var(--lab-ink); color: var(--lab-ink); background: transparent; }
[data-section="laboratorio"] .lab__btn--move[aria-pressed="true"] { background: var(--lab-ink); color: var(--lab-paper); }
[data-section="laboratorio"].lab--move.lab--touch .lab__sheet { outline: 2px dashed var(--lab-ink); outline-offset: 6px; }
/* Descargar: la acción principal, un bloque de tinta con el texto en luz */
[data-section="laboratorio"] .lab__btn--dl {
  grid-column: 1 / -1; min-height: 3.75rem;
  background: var(--lab-ink); color: var(--lab-paper); border: 1px solid var(--lab-ink); font-size: 1.0625rem;
  box-shadow: var(--shadow-ink-2);
}
[data-section="laboratorio"] .lab__btn[aria-busy="true"] { cursor: progress; }
[data-section="laboratorio"] .lab__ico { width: 1.35rem; height: 1.35rem; flex: none; }
@media (hover: hover) {
  [data-section="laboratorio"] .lab__btn--mix:hover,
  [data-section="laboratorio"] .lab__btn--move:hover:not([aria-pressed="true"]) { background: rgb(var(--lab-shade) / 0.07); }
  [data-section="laboratorio"] .lab__btn--dl:hover { background: var(--ink-3, var(--lab-ink)); border-color: var(--ink-3, var(--lab-ink)); color: var(--lab-paper); }
  [data-section="laboratorio"] .lab__btn--dl:hover .lab__ico { transform: translateY(2px); }
  [data-section="laboratorio"] .lab__ico { transition: transform .5s var(--ease-out); }
}
[data-section="laboratorio"] .lab__hint { color: var(--lab-sub); font-family: var(--lab-read); font-size: .9375rem; line-height: 1.5; max-width: 46ch; text-wrap: pretty; }

/* ---------- Cierre: sobre la pared, sin caja ---------- */
[data-section="laboratorio"] .lab__cta { display: grid; gap: .9rem; align-content: start; }
[data-section="laboratorio"] .lab__ctalink {
  justify-self: start; gap: .6rem; min-height: 3.5rem;
  font-size: 1.0625rem; box-shadow: var(--shadow-ink-2);
}
[data-section="laboratorio"] .lab__ctaq {
  margin: 0; color: var(--fg); font-family: var(--f-display); font-weight: 300; font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em;
}
[data-section="laboratorio"] .lab__arrow { flex: none; width: 1.6em; height: auto; transition: transform .6s var(--ease-out); }
[data-section="laboratorio"] .lab__ctalink:hover .lab__arrow,
[data-section="laboratorio"] .lab__ctalink:focus-visible .lab__arrow { transform: translateX(.18em) rotate(-4deg); }
[data-section="laboratorio"] .lab__wa {
  justify-self: start; color: var(--fg); font-family: var(--f-display); font-weight: 500; font-size: 1rem;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  display: inline-flex; align-items: center; min-height: 44px; padding-block: .5rem;
}

/* Sin JS: se ve el afiche estático y un aviso; los controles se ocultan */
[data-section="laboratorio"] .lab__nojs { display: none; color: var(--fg); font-family: var(--f-display); font-size: 1rem; }
[data-section="laboratorio"] .lab__nojs a { text-decoration: underline; }
.no-js [data-section="laboratorio"] .lab__panel,
.no-js [data-section="laboratorio"] .lab__caption { display: none; }
.no-js [data-section="laboratorio"] .lab__nojs { display: block; }

/* ---------- Desktop: afiche y cierre a la izquierda; la mesa a la derecha ---------- */
@media (min-width: 64em) {
  [data-section="laboratorio"] .lab__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
  [data-section="laboratorio"] .lab__title { grid-column: 1 / span 9; grid-row: 1; }
  [data-section="laboratorio"] .lab__lead { grid-column: 9 / -1; grid-row: 1; align-self: end; margin: 0 0 .6em; }
  [data-section="laboratorio"] .lab__bench {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "stage panel" "cta panel";
    grid-template-rows: auto 1fr;
    align-items: start; row-gap: clamp(1.5rem, .5rem + 1.5vw, 2.5rem);
  }
  [data-section="laboratorio"] .lab__panel { margin-top: 2.5rem; }
  /* el cierre cuelga debajo del afiche, centrado con él: no queda ámbar muerto abajo a la izquierda */
  [data-section="laboratorio"] .lab__cta { justify-items: center; text-align: center; }
  [data-section="laboratorio"] .lab__cta .lab__ctalink,
  [data-section="laboratorio"] .lab__cta .lab__wa { justify-self: center; }
}

/* Mobile: menos texto en las muestras, más aire */
@media (max-width: 39.99em) {
  [data-section="laboratorio"] .lab__optdesc { display: none; }
  [data-section="laboratorio"] .lab__optbox { grid-template-rows: auto; align-items: center; padding: .75rem .8rem; }
  [data-section="laboratorio"] .lab__optglyph { grid-row: auto; font-size: 1.9rem; }
  [data-section="laboratorio"] .lab__optglyph--editorial { font-size: 2.05rem; }
  [data-section="laboratorio"] .lab__optglyph--brutal { font-size: 2.1rem; }
  [data-section="laboratorio"] .lab__optname { align-self: center; }
  [data-section="laboratorio"] .lab__opts--pal { gap: .55rem; }
  [data-section="laboratorio"] .lab__btn { padding-inline: .8rem; gap: .45rem; font-size: .9375rem; }
  /* el nombre del color nunca se parte a mitad de palabra («Penumb-ra» en 360) */
  [data-section="laboratorio"] .lab__swname { overflow-wrap: normal; hyphens: none; font-size: .8125rem; }
}
/* Celulares angostos (≤ 384 px): la muestra va arriba y el nombre abajo, como un chip de muestrario;
   así «Portada» no se sale de su caja ni empuja la grilla. */
@media (max-width: 24em) {
  [data-section="laboratorio"] .lab__panel { padding-inline: 1rem; }
  [data-section="laboratorio"] .lab__optbox { grid-template-columns: 1fr; row-gap: .35rem; justify-items: start; padding: .7rem .75rem .75rem; }
  [data-section="laboratorio"] .lab__optglyph { min-width: 0; text-align: left; }
  [data-section="laboratorio"] .lab__opts--pal { gap: .45rem; }
  [data-section="laboratorio"] .lab__swbox { padding: .3rem .3rem .5rem; }
  [data-section="laboratorio"] .lab__swname { padding-inline: .05rem; letter-spacing: -0.01em; }
}
/* 320 px (iPhone SE): «Mover letras» con su ícono no entra en media columna → una herramienta por fila */
@media (max-width: 22.4em) {
  [data-section="laboratorio"] .lab__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="laboratorio"].lab--demo .lab__caption > span::before { animation: none; }
}


/* ===== css/sections/07-marcas.css ===== */
/* Sección marcas (A09) — todo scopeado bajo [data-section="marcas"]
   Ronda 3: muestrario de estudio. Cada logo ocupa el lugar que pide su peso visual
   (los de trazo fino, grandes; los densos, compactos) y una luz de lámpara los recorre de a uno. */
[data-section="marcas"] {
  --mrc-u: clamp(2.4rem, 1.6rem + 2.6vw, 4.6rem); /* módulo de alto de la pared */
  --mrc-lamp: color-mix(in srgb, var(--signal) 52%, transparent);
  --mrc-lamp-2: color-mix(in srgb, var(--signal) 16%, transparent);
  padding-block: var(--section-y);
  overflow-x: clip;
}

/* ---------- Título: la gramática del logo (ema Black / digital Light Italic) ---------- */
[data-section="marcas"] .mrc__head {
  margin-bottom: clamp(3rem, 1.5rem + 6vw, 8rem);
}
[data-section="marcas"] .mrc__title {
  margin: 0;
  font-family: var(--f-display);
  color: var(--fg);
  text-transform: none;
}
[data-section="marcas"] .mrc__t1 {
  display: block;
  font-weight: 900;
  font-size: var(--t-display-l, clamp(3rem, 1rem + 7vw, 8.25rem));
  line-height: 0.88;
  letter-spacing: var(--tr-display-l, -0.045em);
  word-spacing: 0.1em;
  text-wrap: balance;
}
[data-section="marcas"] .mrc__t2 {
  display: block;
  max-width: 15ch;
  margin-top: 0.35em;
  margin-left: 0.15em;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 0.95rem + 2.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
@media (min-width: 900px) {
  [data-section="marcas"] .mrc__head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }
  [data-section="marcas"] .mrc__title { display: contents; }
  [data-section="marcas"] .mrc__t1 { grid-column: 1 / -1; }
  /* la voz "digital" entra por debajo de la coma, corrida a la derecha: un par, no un acento */
  [data-section="marcas"] .mrc__t2 {
    grid-column: 7 / 13;
    margin-top: 0.12em;
    margin-left: 0;
  }
}

/* ---------- Muestrario ---------- */
[data-section="marcas"] .mrc__wall {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: var(--mrc-u);
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  isolation: isolate;
}
[data-section="marcas"] .mrc__item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.7rem;
  grid-column: var(--cm);
  grid-row: var(--rm);
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
[data-section="marcas"] .mrc__logo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: var(--pos, left bottom);
  transform-origin: var(--pos, left bottom);
  align-self: end;
  justify-self: var(--js, start);
  /* tamaño óptico parejo (QA6 #7c): los apaisados topean en ancho, los altos/cuadrados en alto */
  max-inline-size: var(--mrc-wide, 15rem);
  transition: filter 0.9s var(--ease-out), opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
/* pie: el nombre en Light Italic; cuando la luz llega pasa a Black (dos capas, cruce por opacidad) */
[data-section="marcas"] .mrc__cap {
  position: relative;
  display: grid;
  justify-items: var(--cap-align, start);
  font-family: var(--f-display);
  font-size: var(--t-sm);
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: var(--cap-text, left);
}
[data-section="marcas"] .mrc__cap-a,
[data-section="marcas"] .mrc__cap-b {
  grid-area: 1 / 1;
  transition: opacity 0.6s var(--ease-out);
}
[data-section="marcas"] .mrc__cap-a { font-weight: 300; font-style: italic; color: var(--fg-muted); }
[data-section="marcas"] .mrc__cap-b { font-weight: 800; color: var(--fg); opacity: 0; letter-spacing: -0.025em; }

/* altos o cuadrados: topean en alto para pesar como los apaisados */
[data-section="marcas"] .mrc__item--vidon .mrc__logo,
[data-section="marcas"] .mrc__item--panal .mrc__logo,
[data-section="marcas"] .mrc__item--triangulo .mrc__logo,
[data-section="marcas"] .mrc__item--vibras .mrc__logo { max-block-size: clamp(5.25rem, 1rem + 8vw, 8.5rem); }
/* los muy densos (bloque lleno de tinta) van un poco más chicos */
[data-section="marcas"] .mrc__item--lagran { --mrc-wide: 13rem; }
[data-section="marcas"] .mrc__item--checkpet,
[data-section="marcas"] .mrc__item--peludopolis { --mrc-wide: 14rem; }

/* posiciones (mobile, 6 columnas): dos por renglón; la columna derecha baja un módulo, como colgada a mano */
[data-section="marcas"] .mrc__item--instante    { --cm: 1 / 4; --rm: 1 / 4; }
[data-section="marcas"] .mrc__item--vidon       { --cm: 4 / 7; --rm: 2 / 5; }
[data-section="marcas"] .mrc__item--lagran      { --cm: 1 / 4; --rm: 5 / 8; }
[data-section="marcas"] .mrc__item--checkpet    { --cm: 4 / 7; --rm: 6 / 9; }
[data-section="marcas"] .mrc__item--panal       { --cm: 1 / 4; --rm: 9 / 12; }
[data-section="marcas"] .mrc__item--elvis       { --cm: 4 / 7; --rm: 10 / 13; }
[data-section="marcas"] .mrc__item--rock        { --cm: 1 / 4; --rm: 13 / 16; }
[data-section="marcas"] .mrc__item--triangulo   { --cm: 4 / 7; --rm: 14 / 17; }
[data-section="marcas"] .mrc__item--peludopolis { --cm: 1 / 4; --rm: 17 / 20; }
[data-section="marcas"] .mrc__item--vibras      { --cm: 4 / 7; --rm: 18 / 21; }
@media (max-width: 899.98px) {
  /* en 6 columnas cada logo tiene ~170 px: los apaisados topean más bajo para no gritar */
  [data-section="marcas"] .mrc__item { --mrc-wide: 9rem; }
  [data-section="marcas"] :is(.mrc__item--lagran, .mrc__item--elvis) { --mrc-wide: 8rem; }
  [data-section="marcas"] :is(.mrc__item--checkpet, .mrc__item--peludopolis) { --mrc-wide: 8.75rem; }
  [data-section="marcas"] :is(.mrc__item--vidon, .mrc__item--checkpet, .mrc__item--elvis, .mrc__item--triangulo, .mrc__item--vibras) { --pos: right bottom; --js: end; --cap-align: end; --cap-text: right; }
}

/* posiciones (desktop, 12 columnas): tres renglones como texto, cada uno apoyado en su línea de base */
@media (min-width: 900px) {
  [data-section="marcas"] .mrc__wall { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: clamp(2.5rem, 1rem + 3.5vw, 5rem); }
  [data-section="marcas"] .mrc__item--instante    { --cm: 1 / 4;   --rm: 1 / 3; }
  [data-section="marcas"] .mrc__item--elvis       { --cm: 5 / 7;   --rm: 1 / 3; }
  [data-section="marcas"] .mrc__item--vidon       { --cm: 8 / 10;  --rm: 1 / 3; }
  [data-section="marcas"] .mrc__item--rock        { --cm: 11 / 13; --rm: 1 / 3; --pos: right bottom; --js: end; --cap-align: end; --cap-text: right; }
  [data-section="marcas"] .mrc__item--lagran      { --cm: 2 / 5;   --rm: 3 / 5; }
  [data-section="marcas"] .mrc__item--checkpet    { --cm: 6 / 9;   --rm: 3 / 5; }
  [data-section="marcas"] .mrc__item--panal       { --cm: 10 / 12; --rm: 3 / 5; }
  [data-section="marcas"] .mrc__item--triangulo   { --cm: 2 / 4;   --rm: 5 / 7; }
  [data-section="marcas"] .mrc__item--peludopolis { --cm: 5 / 8;   --rm: 5 / 7; }
  [data-section="marcas"] .mrc__item--vibras      { --cm: 10 / 12;  --rm: 5 / 7; }
}

/* ---------- La lámpara: una sola luz ámbar que pasa de marca en marca ---------- */
[data-section="marcas"] .mrc__lamp {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 20rem;
  height: 15rem;
  margin: -7.5rem 0 0 -10rem;   /* centrada en (x, y) */
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--mrc-lamp), var(--mrc-lamp-2) 58%, transparent);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* con JS, las que no tienen luz quedan en tinta; sin JS se ven todas a color */
[data-section="marcas"].is-ready .mrc__logo {
  filter: grayscale(1) contrast(1.1) brightness(0.78);
  opacity: 0.82;
}
/* LAGRAN7 es un SVG verde: el gris lo dejaba en gris medio. Va a tinta, como Elvis y Rock & Roll (QA6 #7a). */
[data-section="marcas"].is-ready .mrc__item--lagran .mrc__logo { filter: brightness(0); }
[data-section="marcas"].is-ready .mrc__item.is-lit .mrc__logo {
  filter: none;
  opacity: 1;
  transform: scale(1.04);
}
[data-section="marcas"] .mrc__item.is-lit .mrc__cap-a { opacity: 0; }
[data-section="marcas"] .mrc__item.is-lit .mrc__cap-b { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  [data-section="marcas"] .mrc__logo,
  [data-section="marcas"] .mrc__cap-a,
  [data-section="marcas"] .mrc__cap-b { transition: none; }
  [data-section="marcas"].is-ready .mrc__item.is-lit .mrc__logo { transform: none; }
}


/* ===== css/sections/07b-estudio.css ===== */
/* A14 · El estudio — todo scopeado bajo [data-section="estudio"]
   Una idea: detrás de la puerta está Eugenia. Penumbra entre dos papeles (marcas / contacto);
   al bajar, la hoja de la puerta gira sobre su bisagra y la luz ámbar entra de costado sobre el retrato.
   Sin JS o con reduced: la puerta ya está abierta y el retrato, con su luz final. */
[data-section="estudio"] {
  --est-leaf: linear-gradient(90deg, var(--ink-2) 0%, color-mix(in srgb, var(--ink-3) 70%, var(--ink-2)) 100%);
  padding-block: var(--section-y);
  overflow-x: clip;
}

[data-section="estudio"] .est__grid { display: grid; gap: 0; }

/* ---------- Título: la pregunta, en la voz liviana de la marca ---------- */
[data-section="estudio"] .est__title {
  margin: 0 0 clamp(2rem, 1.2rem + 3vw, 3.5rem);
  font-family: var(--f-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-display-m, clamp(2.5rem, 1.2rem + 4.6vw, 6rem));
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: balance;
  color: var(--fg);
}

/* ---------- Retrato: un vano de puerta, recortado a sangre por la izquierda ---------- */
[data-section="estudio"] .est__fig { position: relative; margin: 0; }
[data-section="estudio"] .est__frame {
  position: relative;
  width: min(64vw, 16rem); /* retrato de presentación, no de portada */
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ink-2);
  isolation: isolate;
}
[data-section="estudio"] .est__frame picture { display: block; height: 100%; }
[data-section="estudio"] .est__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  /* grade cálido sutil: es una persona real, nada que deforme */
  filter: saturate(0.9) contrast(1.04) sepia(0.06);
}
/* viñeta tinta suave en los bordes: la foto entra en la penumbra */
[data-section="estudio"] .est__vig {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(120% 95% at 55% 38%, transparent 58%, rgb(28 24 48 / 0.18) 100%);
  mix-blend-mode: multiply;
}
/* la luz que entra de costado: cálida sobre la pared gris, apenas sobre la cara */
[data-section="estudio"] .est__warm {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgb(var(--signal-rgb) / 0.55) 0%, rgb(var(--signal-rgb) / 0.18) 34%, transparent 62%);
  mix-blend-mode: soft-light;
}
/* la hoja de la puerta: solo existe cuando hay animación (JS sin reduced) */
[data-section="estudio"] .est__leaf {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--est-leaf);
  box-shadow: inset 0 0 0 1px rgb(var(--paper-rgb) / 0.06);
  backface-visibility: hidden;
}
/* la rendija: la luz que se filtra por el canto antes de abrir */
[data-section="estudio"] .est__leaf::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 2px;
  background: var(--signal);
  box-shadow: 0 0 14px 2px var(--signal-glow), 0 0 40px 6px rgb(var(--signal-rgb) / 0.22);
}
[data-section="estudio"].is-anim .est__leaf { display: block; }

/* la luz bajo la puerta: un umbral limpio (línea de luz + un halo corto y difuso), sin degradé de fondo */
[data-section="estudio"] .est__spill {
  position: relative;
  display: block;
  width: min(64vw, 16rem);
  height: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
  transform-origin: 50% 0;
  pointer-events: none;
}
[data-section="estudio"] .est__spill::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--signal-rgb) / 0.2), var(--signal) 30%, var(--signal) 80%, rgb(var(--signal-rgb) / 0.35));
}
[data-section="estudio"] .est__spill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 4%;
  height: 55%;
  background: rgb(var(--signal-rgb) / 0.35);
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  filter: blur(18px);
}

/* ---------- Firma: nombre en el par de la marca + rol ---------- */
[data-section="estudio"] .est__sign {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
  margin-top: calc(-1 * clamp(1.25rem, 0.6rem + 2.4vw, 2.75rem));
}
[data-section="estudio"] .est__name {
  display: grid;
  font-family: var(--f-display);
  color: var(--fg);
}
[data-section="estudio"] .est__name-a {
  font-weight: 900;
  font-size: clamp(3.6rem, 1.2rem + 12.5vw, 12.5rem);
  line-height: 0.8;
  letter-spacing: -0.06em;
  margin-left: -0.06em;
}
[data-section="estudio"] .est__name-b {
  margin-top: 0.7em;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.035em;
}
[data-section="estudio"] .est__role {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ---------- Texto ---------- */
[data-section="estudio"] .est__txt {
  display: grid;
  gap: 1.1em;
  max-width: 34rem;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}
[data-section="estudio"] .est__txt p { margin: 0; text-wrap: pretty; }
[data-section="estudio"] .est__p1 {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  line-height: 1.45;
  font-variation-settings: "opsz" 30;
  color: var(--fg);
}
[data-section="estudio"] .est__p2 {
  font-family: var(--f-serif);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

/* ---------- Desktop: el retrato a la izquierda, la firma cruza por debajo hacia el texto ---------- */
@media (min-width: 900px) {
  [data-section="estudio"] .est__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto auto;
    column-gap: var(--grid-gap);
  }
  [data-section="estudio"] .est__fig {
    grid-column: 1 / -1;
    grid-row: 1 / 5;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
  }
  [data-section="estudio"] .est__frame {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    align-self: end; /* si el texto estira las filas, el vano sigue apoyado en el piso de luz */
    width: min(100%, 20rem);
  }
  [data-section="estudio"] .est__spill {
    grid-column: 1 / 6;
    grid-row: 3;
    width: min(100%, 20rem);
  }
  [data-section="estudio"] .est__sign {
    grid-column: 4 / -1;
    grid-row: 3 / 5;
    align-self: start;
    margin-top: clamp(0.75rem, 0.2rem + 1vw, 1.5rem);
  }
  [data-section="estudio"] .est__name-b { margin-top: 0.3em; }
  [data-section="estudio"] .est__name-b,
  [data-section="estudio"] .est__role { margin-left: calc((100% + var(--grid-gap)) / 9 * 3); }
  [data-section="estudio"] .est__title {
    grid-column: 7 / -1;
    grid-row: 1;
    margin: 0;
    padding-top: 0.05em;
  }
  [data-section="estudio"] .est__txt {
    grid-column: 7 / 12;
    grid-row: 2;
    align-self: start;
    margin: clamp(2rem, 4vw, 4rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
  }
}


/* ===== css/sections/08-contacto.css ===== */
/* Sección contacto (A10, ronda 3) — todo scopeado bajo [data-section="contacto"]
   Una idea: la puerta se cierra y adentro queda la invitación. El ámbar es luz:
   el canto de la puerta, la luz bajo la puerta, la puerta de WhatsApp y la selección al copiar. */
[data-section="contacto"] {
  --ct-ink-deep: color-mix(in srgb, var(--ink) 70%, #000);
  --ct-shadow-sheet: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 2px 3px color-mix(in srgb, var(--ink) 40%, #000), 0 40px 70px -30px color-mix(in srgb, var(--ink) 25%, #000);
  padding: 0;
  overflow: clip;
}
[data-section="contacto"] .ct__num { font-family: var(--f-display); font-variant-numeric: tabular-nums; }

/* =========================================================
   1. Posicionamiento (papel) y la puerta que se cierra
   ========================================================= */
[data-section="contacto"] .ct__stage { position: relative; }
[data-section="contacto"] .ct__sticky { position: relative; overflow: clip; }
[data-section="contacto"] .ct__pane { position: relative; background: var(--bg); color: var(--fg); }
[data-section="contacto"] .ct__edge { display: none; }
/* «No trabajamos con todos» en luz de lámpara: rima con el manifiesto; al cerrar la puerta, se apaga */
[data-section="contacto"] .ct__pane--paper {
  --bg: var(--light); --fg: var(--ink);
  --fg-muted: color-mix(in srgb, var(--ink) 74%, var(--light));
  background: var(--bg); color: var(--fg);
}

[data-section="contacto"] .ct__pos {
  display: grid; align-content: start; gap: clamp(2rem, 5vw, 4rem);
  min-height: 72svh;
  padding-block: clamp(5.5rem, 4rem + 6vw, 9rem) clamp(2.5rem, 2rem + 3vw, 4.5rem);
}
[data-section="contacto"] .ct__no {
  margin: 0;
  font-family: var(--f-display);
  /* escala --t-display-xl, topada al ancho útil para que «No trabajamos» no toque el borde en 390 */
  font-size: min(var(--t-display-xl, clamp(3.6rem, 0.8rem + 10.5vw, 10.5rem)), calc((100vw - 2 * var(--gutter)) / 5.6));
  line-height: 0.84;
  letter-spacing: -0.055em;
  text-transform: none;
}
[data-section="contacto"] .ct__no-a { display: block; font-weight: 900; margin-left: -0.05em; }
/* "con todos." en la otra voz de la marca: Light Italic, corrida a la derecha y montada sobre la línea de arriba */
[data-section="contacto"] .ct__no-b {
  display: block; width: max-content; max-width: 100%;
  margin: -0.02em 0 0 auto; padding-right: 0.06em;
  font-weight: 300; font-style: italic; letter-spacing: -0.045em;
}
[data-section="contacto"] .ct__pos-foot {
  display: grid; gap: 0.6rem;
  max-width: 34rem;
}
[data-section="contacto"] .ct__pos-txt {
  margin: 0;
  font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.35;
  font-variation-settings: "opsz" 36;
  text-wrap: balance;
}
[data-section="contacto"] .ct__pos-sub {
  margin: 0;
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* --- Tinta: la puerta cerrada --- */
[data-section="contacto"] .ct__in {
  display: grid; align-content: end;
  min-height: 78svh;
  padding-block: clamp(5rem, 4rem + 5vw, 8rem) clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
}
[data-section="contacto"] .ct__title {
  margin: 0;
  font-family: var(--f-display); text-transform: none;
  line-height: 0.86;
}
[data-section="contacto"] .ct__title-a {
  display: block;
  font-size: min(8.2vw, 6.5rem); font-weight: 300; font-style: italic; letter-spacing: -0.04em;
  margin: 0 0 0.12em 0.04em;
  color: var(--fg-muted);
}
[data-section="contacto"] .ct__title-b {
  display: block;
  font-size: min(17.4vw, 19.5rem); font-weight: 900; letter-spacing: -0.05em;
  margin-left: -0.055em;
  white-space: nowrap;
}
/* La luz que queda bajo la puerta cerrada */
[data-section="contacto"] .ct__floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent 2%, var(--signal) 18%, var(--light) 50%, var(--signal) 82%, transparent 98%);
  transform-origin: 50% 50%;
}
[data-section="contacto"] .ct__floor::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 6rem;
  background: radial-gradient(48% 100% at 50% 100%, rgb(var(--signal-rgb) / 0.2), rgb(var(--signal-rgb) / 0.05) 55%, transparent 80%);
  pointer-events: none;
}

/* La puerta que se cierra: solo con JS y movimiento permitido */
@media (prefers-reduced-motion: no-preference) {
  .js [data-section="contacto"] .ct__stage { height: 190svh; }
  .js [data-section="contacto"] .ct__sticky { position: sticky; top: 0; height: 100svh; }
  .js [data-section="contacto"] .ct__pane { position: absolute; inset: 0; }
  .js [data-section="contacto"] .ct__pos,
  .js [data-section="contacto"] .ct__in { min-height: 0; height: 100%; }
  .js [data-section="contacto"] .ct__pane--ink { clip-path: inset(0 0 0 100%); will-change: clip-path; }
  .js [data-section="contacto"] .ct__floor { transform: scaleX(0); }
  /* pantallas altas: el bloque se centra en el sticky en vez de dejar un hueco bajo el título (QA3 #5) */
  @media (min-height: 1000px) {
    .js [data-section="contacto"] .ct__pos { align-content: center; }
  }
  .js [data-section="contacto"] .ct__edge {
    display: block; position: absolute; inset: 0; pointer-events: none;
    will-change: transform;
  }
  /* Celular: con la puerta cerrada el título quedaba abajo y la pantalla era un 80 % de tinta vacía.
     El pase dura menos, «escribinos.» sube al centro y la luz que se filtra bajo la puerta ilumina el piso,
     que es lo que queda entre el título y la puerta de WhatsApp cuando se suelta el sticky. */
  @media (max-width: 699.98px) {
    .js [data-section="contacto"] .ct__stage { height: 165svh; }
    .js [data-section="contacto"] .ct__in { padding-bottom: 36svh; }
    .js [data-section="contacto"] .ct__floor::after {
      height: 36svh;
      background:
        radial-gradient(70% 100% at 50% 100%, rgb(var(--signal-rgb) / 0.26), rgb(var(--signal-rgb) / 0.07) 50%, transparent 78%);
    }
    .js [data-section="contacto"] .ct__main { padding-top: 2.75rem; }
  }
}
/* El canto de la puerta: una franja de luz que se angosta al cerrarse */
[data-section="contacto"] .ct__edge-line {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px; margin-left: -1.5px;
  background: linear-gradient(180deg, rgb(var(--signal-rgb) / 0.3), var(--light) 30%, var(--signal) 62%, rgb(var(--signal-rgb) / 0.5));
}
/* Lo que la rendija proyecta sobre la tinta: un haz que se abre hacia el piso */
[data-section="contacto"] .ct__edge-spill {
  position: absolute; top: 0; bottom: 0; left: 0; width: 34vw;
  background: linear-gradient(90deg, rgb(var(--signal-rgb) / 0.22), rgb(var(--signal-rgb) / 0.06) 40%, transparent 75%);
  clip-path: polygon(0 0, 8% 0, 100% 100%, 0 100%);
  transform-origin: 0 50%;
}

/* =========================================================
   2. Contacto (tinta)
   ========================================================= */
[data-section="contacto"] .ct__dark { background: var(--bg); color: var(--fg); position: relative; }
[data-section="contacto"] .ct__main {
  display: grid; gap: clamp(4.5rem, 3rem + 6vw, 9rem);
  padding-block: clamp(4rem, 3rem + 5vw, 8rem) clamp(5rem, 3rem + 6vw, 9rem);
}
[data-section="contacto"] .ct__ask {
  margin: 0;
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-base);
  letter-spacing: -0.005em; text-transform: none;
  color: var(--fg-muted);
}

/* --- WhatsApp: la puerta de luz --- */
[data-section="contacto"] .ct__lead {
  display: grid; gap: 2rem;
}
[data-section="contacto"] .ct__door {
  --door-w: clamp(5.75rem, 3.5rem + 9vw, 13rem);
  display: grid; grid-template-columns: var(--door-w) minmax(0, 1fr); align-items: end;
  gap: clamp(1rem, 0.5rem + 2vw, 2.75rem);
  color: var(--fg); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
[data-section="contacto"] .ct__door-frame {
  position: relative; display: block;
  aspect-ratio: 1 / 2.05;
  /* el marco: una línea que no es pareja en los cuatro lados (dintel más grueso) */
  border: 1px solid rgb(var(--light-rgb) / 0.32); border-top-width: 3px; border-bottom: 0;
  isolation: isolate;
}
[data-section="contacto"] .ct__door-light {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--light) 0%, var(--signal) 46%, var(--signal) 100%);
}
/* La hoja: entornada a la izquierda; al pasar, se abre más y entra más luz */
[data-section="contacto"] .ct__door-leaf {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, var(--ct-ink-deep), var(--ink-3) 92%, rgb(var(--light-rgb) / 0.55) 100%);
  transform-origin: 0 50%;
  transform: scaleX(0.58);
  transition: transform 0.9s var(--ease-door);
}
[data-section="contacto"] .ct__door-spill {
  position: absolute; left: -1px; top: 100%; width: 190%; height: clamp(3rem, 2rem + 4vw, 6rem);
  background: linear-gradient(180deg, rgb(var(--signal-rgb) / 0.42), rgb(var(--signal-rgb) / 0.08) 70%, transparent);
  clip-path: polygon(0 0, 52.6% 0, 100% 100%, 0 100%);
  transform-origin: 0 0;
  transform: scaleX(0.55);
  opacity: 0.7;
  transition: transform 0.9s var(--ease-door), opacity 0.9s var(--ease-door);
  pointer-events: none;
}
[data-section="contacto"] .ct__door:hover .ct__door-leaf,
[data-section="contacto"] .ct__door:focus-visible .ct__door-leaf { transform: scaleX(0.12); }
[data-section="contacto"] .ct__door:hover .ct__door-spill,
[data-section="contacto"] .ct__door:focus-visible .ct__door-spill { transform: scaleX(1); opacity: 1; }
[data-section="contacto"] .ct__door:active .ct__door-leaf { transform: scaleX(0.03); transition-duration: 0.35s; }
[data-section="contacto"] .ct__door:focus-visible { outline: 2px solid var(--signal); outline-offset: 10px; }

[data-section="contacto"] .ct__door-txt { display: grid; gap: 0.9rem; padding-bottom: 0.2rem; min-width: 0; }
[data-section="contacto"] .ct__door-go {
  font-family: var(--f-display); font-weight: 900; text-transform: none;
  font-size: clamp(2rem, 0.9rem + 5.6vw, 7.5rem);
  line-height: 0.85; letter-spacing: -0.055em;
  margin-left: -0.04em;
}
[data-section="contacto"] .ct__door-via {
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); line-height: 1.45;
  color: var(--fg-muted);
}
/* rótulo de la puerta: el ícono de WhatsApp en la luz, el texto en tinta clara */
[data-section="contacto"] .ct__door-via {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.375rem); color: var(--fg);
}
[data-section="contacto"] .ct__door-ico { width: 1.35em; height: 1.35em; flex: none; color: var(--signal); }

/* --- Botón de WhatsApp: una lámina de luz con canto de puerta --- */
[data-section="contacto"] .ct__wa-box { display: grid; justify-items: start; gap: 0.55rem; margin-top: 0.5rem; }
[data-section="contacto"] .ct__wa {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 0.7rem;
  min-height: 52px; max-width: 100%;
  padding: 0.85rem 1.35rem 0.85rem 1rem;
  font-family: var(--f-display); font-weight: 600; font-size: var(--t-sm); line-height: 1.15;
  letter-spacing: -0.005em; text-decoration: none;
  color: var(--ink); background: var(--signal);
  /* canto vivo del lado de las bisagras, redondeado del lado que abre */
  border-radius: 2px 14px 14px 2px;
  box-shadow: 0 0 0 0 rgb(var(--signal-rgb) / 0), 0 18px 34px -18px rgb(var(--signal-rgb) / 0.55);
  transition: box-shadow 0.5s var(--ease-out), transform 0.35s var(--ease-out);
}
/* la luz de lámpara que entra al pasar: se abre desde la bisagra */
[data-section="contacto"] .ct__wa::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--light), rgb(var(--light-rgb) / 0.7));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-door);
}
[data-section="contacto"] .ct__wa-ico { width: 1.5rem; height: 1.5rem; flex: none; transition: transform 0.5s var(--ease-door); }
[data-section="contacto"] .ct__wa-txt { min-width: 0; }
[data-section="contacto"] .ct__wa:hover::before,
[data-section="contacto"] .ct__wa:focus-visible::before { transform: scaleX(1); }
[data-section="contacto"] .ct__wa:hover .ct__wa-ico,
[data-section="contacto"] .ct__wa:focus-visible .ct__wa-ico { transform: rotate(-12deg); }
[data-section="contacto"] .ct__wa:hover,
[data-section="contacto"] .ct__wa:focus-visible {
  box-shadow: 0 0 0 1px rgb(var(--light-rgb) / 0.9), 0 22px 44px -16px rgb(var(--signal-rgb) / 0.75);
}
[data-section="contacto"] .ct__wa:active { transform: translateY(1px); }
[data-section="contacto"] .ct__wa:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; }
[data-section="contacto"] .ct__wa-num {
  font-weight: 500; font-size: var(--t-xs); line-height: 1.3; letter-spacing: 0.01em;
  color: var(--fg-muted); white-space: nowrap; padding-left: 0.15rem;
}
/* variante del footer: misma forma, sin la luz encendida hasta que la pedís */
[data-section="contacto"] .ct__wa--quiet {
  min-height: 44px; padding: 0.6rem 1.1rem 0.6rem 0.85rem;
  color: var(--fg); background: transparent;
  box-shadow: inset 0 0 0 1px rgb(var(--signal-rgb) / 0.55);
}
[data-section="contacto"] .ct__wa--quiet .ct__wa-ico { width: 1.25rem; height: 1.25rem; color: var(--signal); transition: transform 0.5s var(--ease-door), color 0.3s; }
[data-section="contacto"] .ct__wa--quiet::before { background: var(--signal); }
[data-section="contacto"] .ct__wa--quiet:hover,
[data-section="contacto"] .ct__wa--quiet:focus-visible { color: var(--ink); box-shadow: inset 0 0 0 1px var(--signal); }
[data-section="contacto"] .ct__wa--quiet:hover .ct__wa-ico,
[data-section="contacto"] .ct__wa--quiet:focus-visible .ct__wa-ico { color: var(--ink); }
[data-section="contacto"] .ct__wa-box--foot { margin-top: 0; grid-auto-flow: column; align-items: center; justify-content: start; gap: 0.9rem; }
[data-section="contacto"] .ct__foot-reach { display: grid; gap: 0.9rem; justify-items: start; }

[data-section="contacto"] .ct__lead-note {
  display: grid; gap: 1rem; align-content: end;
  max-width: 30rem;
  font-family: var(--f-serif); font-size: var(--t-base); line-height: 1.6;
  color: var(--fg-muted);
}
[data-section="contacto"] .ct__lead-note p { margin: 0; text-wrap: pretty; }
[data-section="contacto"] .ct__marca { color: var(--fg); }
[data-section="contacto"] .ct__marca[hidden] { display: none; }
[data-section="contacto"] .ct__marca q { quotes: "«" "»"; font-style: italic; }

/* --- Mail: la dirección como tipografía --- */
[data-section="contacto"] .ct__mail { display: grid; gap: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
[data-section="contacto"] .ct__addr {
  position: relative; display: block; justify-self: start; max-width: 100%;
  min-height: 44px; padding-block: 0.375rem;
  font-family: var(--f-display); text-transform: none; text-decoration: none; color: var(--fg);
  font-size: clamp(1.45rem, 0.2rem + 6.25vw, 6.6rem);
  line-height: 1.02; letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}
[data-section="contacto"] .ct__addr-ema { font-weight: 900; }
[data-section="contacto"] .ct__addr-dig { font-weight: 300; font-style: italic; padding-right: 0.03em; }
[data-section="contacto"] .ct__addr-rest { font-weight: 300; }
[data-section="contacto"] .ct__addr-txt { display: block; }
/* Subrayado al pasar: la línea de la tinta, no la de la luz */
[data-section="contacto"] .ct__addr-txt::after {
  content: ""; display: block; height: 2px; margin-top: 0.08em;
  background: currentColor; opacity: 0.85;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.6s var(--ease-out);
}
[data-section="contacto"] .ct__addr:hover .ct__addr-txt::after,
[data-section="contacto"] .ct__addr:focus-visible .ct__addr-txt::after { transform: scaleX(1); }
[data-section="contacto"] .ct__addr:focus-visible { outline: 2px solid var(--signal); outline-offset: 8px; }
/* Copiar = seleccionar: la dirección se marca como una selección de texto, en luz */
[data-section="contacto"] .ct__addr-sel {
  position: absolute; inset: 0 auto auto 0; width: 100%;
  color: var(--ink); pointer-events: none;
  clip-path: inset(-0.1em 100% -0.1em 0);
  transition: clip-path 0.55s var(--ease-in-out), opacity 0.4s;
}
[data-section="contacto"] .ct__addr-sel > span {
  background: var(--signal);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
[data-section="contacto"] .ct__mail.is-copied .ct__addr-sel { clip-path: inset(-0.1em 0 -0.1em 0); }
[data-section="contacto"] .ct__mail.is-fading .ct__addr-sel { opacity: 0; }

[data-section="contacto"] .ct__mail-row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem 2.5rem;
}
/* botón del sistema sobre tinta: señal + texto tinta */
[data-section="contacto"] .ct__copy {
  display: inline-flex; align-items: center; justify-content: center;
  font: 600 1rem/1 var(--f-display);
  color: var(--ink); background: var(--signal);
  border: 0; border-radius: 2px;
  padding: 1rem 1.5rem; min-height: 48px; cursor: pointer;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
[data-section="contacto"] .ct__copy:hover { background: var(--light); }
[data-section="contacto"] .ct__copy:active { transform: translateY(1px); }
[data-section="contacto"] .ct__copy.is-done { background: var(--light); color: var(--ink); }
[data-section="contacto"] .ct__copy:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* Instagram: una línea de lectura, no una card */
[data-section="contacto"] .ct__ig {
  margin: 0; max-width: 32rem;
  font-family: var(--f-serif); font-size: var(--t-base); line-height: 1.55; font-style: italic;
  color: var(--fg-muted);
}
[data-section="contacto"] .ct__ig a {
  font-family: var(--f-display); font-style: normal; font-weight: 500; color: var(--fg);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  text-decoration-color: rgb(var(--light-rgb) / 0.45);
  transition: text-decoration-color var(--dur-fast);
}
[data-section="contacto"] .ct__ig a:hover { text-decoration-color: var(--signal); }

/* --- Formulario: una hoja de papel --- */
[data-section="contacto"] .ct__formwrap { display: grid; gap: 2rem; }
[data-section="contacto"] .ct__form-intro { display: grid; gap: 0.75rem; align-content: start; max-width: 24rem; }
[data-section="contacto"] .ct__form-lead {
  margin: 0;
  font-family: var(--f-serif); font-size: var(--t-lg); line-height: 1.4;
  text-wrap: balance;
}
[data-section="contacto"] .ct__form {
  /* papel: los tokens vuelven a los de la hoja */
  --bg: var(--paper); --fg: var(--ink);
  --fg-muted: color-mix(in srgb, var(--ink) 74%, var(--paper));
  --line: rgb(var(--ink-rgb) / 0.14);
  --line-strong: rgb(var(--ink-rgb) / 0.56);
  position: relative;
  display: grid; gap: 1.6rem 2rem;
  background: var(--bg); color: var(--fg);
  padding: clamp(1.4rem, 1rem + 2.5vw, 3.25rem);
  border-radius: 2px;
  box-shadow: var(--ct-shadow-sheet);
}
[data-section="contacto"] .ct__field { position: relative; display: grid; gap: 0.45rem; min-width: 0; }
[data-section="contacto"] .ct__label {
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm); line-height: 1.3;
  color: var(--fg);
}
[data-section="contacto"] .ct__opt { font-weight: 400; color: var(--fg-muted); }
[data-section="contacto"] .ct__input {
  width: 100%; min-width: 0;
  font-family: var(--f-serif); font-size: var(--t-base); line-height: 1.5; color: var(--fg);
  font-variation-settings: "opsz" 18;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0;
  min-height: 44px; padding: 0.5rem 0.1rem 0.55rem;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
[data-section="contacto"] .ct__input::placeholder { color: var(--fg-muted); font-style: italic; opacity: 1; }
[data-section="contacto"] .ct__input:hover { border-bottom-color: var(--fg); }
[data-section="contacto"] .ct__input:focus { outline: none; }
[data-section="contacto"] .ct__input:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px;
  background: rgb(var(--ink-rgb) / 0.06); border-bottom-color: var(--fg);
}
[data-section="contacto"] .ct__textarea { resize: vertical; min-height: 8.5rem; }
[data-section="contacto"] .ct__input[aria-invalid="true"] { border-bottom: 2px solid var(--signal-deep); }
[data-section="contacto"] .ct__err {
  margin: 0; min-height: 0;
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-xs); line-height: 1.4;
  color: var(--signal-deep);
}
[data-section="contacto"] .ct__err:empty { display: none; }
[data-section="contacto"] .ct__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[data-section="contacto"] .ct__actions { display: flex; align-items: center; gap: 1rem; padding-top: 0.25rem; }
[data-section="contacto"] .ct__submit,
[data-section="contacto"] .ct__fb {
  /* botón del sistema sobre papel: tinta + texto papel */
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  font: 600 1rem/1 var(--f-display); text-decoration: none;
  padding: 1rem 1.5rem;
  background: var(--ink); color: var(--paper);
  border: 0; border-radius: 2px;
  box-shadow: var(--shadow-ink-2);
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
[data-section="contacto"] .ct__submit { min-height: 52px; }
[data-section="contacto"] .ct__submit:hover,
[data-section="contacto"] .ct__fb:hover { background: var(--ink-3); }
[data-section="contacto"] .ct__submit:active,
[data-section="contacto"] .ct__fb:active { transform: translateY(1px); }
[data-section="contacto"] .ct__submit:disabled { cursor: progress; opacity: 0.7; }
[data-section="contacto"] .ct__submit:focus-visible,
[data-section="contacto"] .ct__fb:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

[data-section="contacto"] .ct__status {
  font-family: var(--f-serif); font-size: var(--t-base); line-height: 1.5;
}
[data-section="contacto"] .ct__status:empty { display: none; }
[data-section="contacto"] .ct__status-box { display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
[data-section="contacto"] .ct__status-box p { margin: 0; text-wrap: pretty; }
[data-section="contacto"] .ct__status-box--ok { grid-template-columns: auto 1fr; align-items: center; }
[data-section="contacto"] .ct__status-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Confirmación: un tilde trazado a mano que se dibuja una vez */
[data-section="contacto"] .ct__done { display: block; width: 2.75rem; color: var(--ink); }
[data-section="contacto"] .ct__done svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-section="contacto"] .ct__done-check { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[data-section="contacto"] .ct__done-light { fill: var(--signal); }
@media (prefers-reduced-motion: no-preference) {
  [data-section="contacto"] .ct__done-light { transform-origin: 50% 50%; animation: ct-light-in 0.6s var(--ease-out) both; }
  [data-section="contacto"] .ct__done-check { clip-path: inset(0 100% 0 0); animation: ct-draw 0.55s 0.2s var(--ease-in-out) forwards; }
}
@keyframes ct-light-in { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ct-draw { to { clip-path: inset(0 0 0 0); } }

/* =========================================================
   3. Footer
   ========================================================= */
[data-section="contacto"] .ct__foot { position: relative; border-top: 1px solid var(--line); }
[data-section="contacto"] .ct__foot-grid {
  display: grid; gap: 1.25rem;
  padding-block: 1.75rem 1rem;
}
[data-section="contacto"] .ct__time {
  margin: 0;
  font-family: var(--f-serif); font-size: var(--t-base); font-style: italic; color: var(--fg-muted);
}
[data-section="contacto"] .ct__time time { font-style: normal; font-weight: 500; color: var(--fg); }
[data-section="contacto"] .ct__foot-nav {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem;
  font-family: var(--f-display); font-weight: 500; font-size: var(--t-sm);
}
[data-section="contacto"] .ct__foot-nav a {
  display: inline-block; padding-block: 0.65rem; color: var(--fg); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 0.5rem) / 100% 1px no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out);
}
[data-section="contacto"] .ct__foot-nav a:hover,
[data-section="contacto"] .ct__foot-nav a:focus-visible { background-size: 100% 1px; }
[data-section="contacto"] .ct__legal {
  margin: 0;
  font-family: var(--f-display); font-weight: 400; font-size: var(--t-xs); line-height: 1.5;
  color: var(--fg-muted);
}

/* Wordmark a todo el ancho. JS ajusta el tamaño para que ocupe la línea. */
[data-section="contacto"] .ct__mark {
  padding: 0 var(--gutter) 0.06em;
  overflow: clip;
}
[data-section="contacto"] .ct__mark-in {
  display: block; width: max-content;
  font-family: var(--f-display); text-transform: none;
  font-size: 22vw; line-height: 0.8; letter-spacing: -0.06em;
  padding-bottom: 0.3em; /* el descendente de la g, con aire antes del borde */
  margin-left: -0.04em;
  white-space: nowrap;
}
[data-section="contacto"] .ct__mark-ema,
[data-section="contacto"] .ct__mark-dig { display: inline-block; }
[data-section="contacto"] .ct__mark-ema { font-weight: 900; }
/* la caja de digital baja hasta el descendente de la g: si no, el clip-path la corta */
[data-section="contacto"] .ct__mark-dig { font-weight: 300; font-style: italic; padding: 0 0.06em 0.24em 0; margin-bottom: -0.24em; color: var(--fg-muted); }

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width: 700px) {
  [data-section="contacto"] .ct__no-a { white-space: nowrap; }
  [data-section="contacto"] .ct__form { grid-template-columns: 1fr 1fr; }
  [data-section="contacto"] .ct__field--full,
  [data-section="contacto"] .ct__field:nth-of-type(3) { grid-column: 1 / -1; }
  [data-section="contacto"] .ct__foot-grid { grid-template-columns: 1fr auto; align-items: baseline; }
  [data-section="contacto"] .ct__legal { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  [data-section="contacto"] .ct__pos-foot { margin-left: calc(100% / 12 * 5); }
  /* Grilla de 12: la puerta corrida a la columna 2, la nota cae al pie, fuera de eje */
  [data-section="contacto"] .ct__lead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: end; }
  [data-section="contacto"] .ct__door { grid-column: 2 / span 7; }
  [data-section="contacto"] .ct__lead-note { grid-column: 10 / span 3; padding-bottom: 0.4rem; }
  [data-section="contacto"] .ct__formwrap { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); align-items: start; }
  [data-section="contacto"] .ct__form-intro { grid-column: 1 / span 4; position: sticky; top: 6rem; }
  [data-section="contacto"] .ct__form { grid-column: 6 / -1; margin-right: calc(var(--gutter) * -1); }
  [data-section="contacto"] .ct__foot-grid { grid-template-columns: 1fr auto 1fr; align-items: end; }
  [data-section="contacto"] .ct__legal { grid-column: auto; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  [data-section="contacto"] .ct__door-leaf,
  [data-section="contacto"] .ct__door-spill,
  [data-section="contacto"] .ct__addr-txt::after,
  [data-section="contacto"] .ct__addr-sel,
  [data-section="contacto"] .ct__foot-nav a,
  [data-section="contacto"] .ct__wa,
  [data-section="contacto"] .ct__wa::before,
  [data-section="contacto"] .ct__wa-ico { transition: none; }
  [data-section="contacto"] .ct__wa:hover .ct__wa-ico,
  [data-section="contacto"] .ct__wa:focus-visible .ct__wa-ico { transform: none; }
}