/* Nitia Advisory — web institucional
 * Tokens: manifiesto_hero_nitia_v2.json + Sistema Nitia · logo 08 (óxido del manual, decisión D1).
 * Hero en unidades del lienzo de referencia 1672 × 941 (--u = 1 px del lienzo) desde 1100 px de ancho. */

:root {
  --papel: #F3EFE7; --papel-banda: #F7F3E9; --papel-lupa: #F9F2E5;
  --tinta: #1C2426; --tinta-titular: #0E1011; --tinta-2: #4A5356; --tinta-3: #6E7679;
  --oxido: #96382A; --arena: #CEC6B8; --petroleo: #2F5E66; --agua: #8FB5AE;
  --mostaza: #C9A35A; --acero: #8C969A; --bronce: #A98B63;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  /* V7 · un solo sistema de movimiento: una curva y tres duraciones. Nada usa otra. */
  --curva: cubic-bezier(.2, .8, .2, 1);
  --t-micro: 180ms; --t-normal: 420ms; --t-lento: 900ms;
  --u: calc(100vw / 1672);
  --gutter: clamp(16px, 4.84vw, 81px);
  --maxw: 1440px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; font-weight: 400;
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; text-wrap: pretty; }   /* V7: sin palabras huérfanas */
h1, h2, h3 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--tinta); color: var(--papel); padding: 10px 14px; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.anchor { position: absolute; top: 0; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .75em; text-decoration: none; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--tinta); background: transparent; line-height: 1;
  transition: background var(--t-micro) var(--curva), color var(--t-micro) var(--curva), border-color var(--t-micro) var(--curva);
}
.btn--solid { background: var(--tinta); border-color: var(--tinta); color: var(--papel); padding: 15px 26px; font-size: 17px; }   /* V7: en tinta; el óxido marca el hallazgo */
.btn--solid:hover { background: var(--tinta-titular); border-color: var(--tinta-titular); }
.btn--ghost { padding: 12px 20px; font-size: 15px; }
.btn--ghost:hover { background: var(--tinta); color: var(--papel); }
.arrow { position: relative; display: inline-block; width: 22px; height: 1px; background: currentColor; transition: transform var(--t-micro) var(--curva); }
.arrow::after { content: ''; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
.btn:hover .arrow, .choice:hover .arrow, .link-btn:hover .arrow { transform: translateX(4px); }
.link-btn { display: inline-flex; align-items: center; gap: .6em; background: none; border: 0; border-bottom: 1px solid var(--arena); padding: 4px 0; cursor: pointer; font-size: 15px; }
.link-btn:hover { border-color: var(--tinta); }

/* ---------- rótulos de sección ---------- */
.eyebrow { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 22px; }
.eyebrow__num { color: var(--tinta); }
.eyebrow__num::after { content: ''; display: inline-block; width: 44px; height: 1px; background: currentColor; vertical-align: middle; margin-left: 14px; opacity: .5; }
.eyebrow--dark, .eyebrow--dark .eyebrow__num { color: rgba(243,239,231,.78); }
.section-title { font-family: var(--serif); font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; letter-spacing: -.01em; color: var(--tinta-titular); max-width: 18em; text-wrap: balance; }
.section-lead { margin-top: 22px; max-width: 38em; font-size: clamp(16px, 1.25vw, 19px); color: var(--tinta-2); text-wrap: pretty; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  height: 72px; padding-inline: var(--gutter);
  transition: background var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva);
}
.nav.is-scrolled { background: rgba(243,239,231,.94); box-shadow: 0 1px 0 rgba(28,36,38,.12); backdrop-filter: saturate(1.1) blur(6px); }
.nav__logo img { height: 30px; width: auto; }
.nav__toggle { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; position: relative; }
.nav__burger, .nav__burger::before, .nav__burger::after { position: absolute; left: 11px; width: 22px; height: 1.5px; background: var(--tinta); transition: transform var(--t-micro) var(--curva), opacity var(--t-micro) var(--curva); }
.nav__burger { top: 21px; }
.nav__burger::before, .nav__burger::after { content: ''; left: 0; }
.nav__burger::before { top: -7px; } .nav__burger::after { top: 7px; }
.nav.is-open .nav__burger { background: transparent; }
.nav.is-open .nav__burger::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger::after { transform: translateY(-7px) rotate(-45deg); }
.nav__menu { display: flex; align-items: center; gap: 40px; }
.nav__menu ul { display: flex; gap: 32px; }
.nav__menu ul a { text-decoration: none; font-size: 15px; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-micro) var(--curva); }
.nav__menu ul a:hover { background-size: 100% 1px; }

/* =========================================================
   HERO (manifiesto v2)
   ========================================================= */
.hero { position: relative; }
.hero__top { position: relative; }
.hero__rule { display: block; width: 44px; height: 1px; background: var(--tinta); margin-bottom: 22px; }
.hero__claim { font-family: var(--serif); font-weight: 400; color: var(--tinta-titular); letter-spacing: -.035em; font-size: clamp(46px, 11.5vw, 72px); line-height: .97; }
.hero__claim span, .hero__claim em { display: block; }
.hero__claim em { font-style: normal; color: var(--oxido); }
.hero__lead { margin-top: 26px; font-size: clamp(19px, 2.6vw, 22px); line-height: 1.4; color: var(--tinta); }
.hero__support { margin-top: 18px; font-size: 16.5px; line-height: 1.47; color: var(--tinta-2); max-width: 30em; }
.hero__cta { margin-top: 30px; }

/* =========================================================
   ESCENA V7: imagen A + ventana de claridad + grano + etiquetas (todo lo que se mueve con el parallax va en
   .escena__mueve, con el mismo transform); la ventana, la lupa, la marca y el cursor no se mueven.
   --s: sangrado de 12 px por lado para que el parallax (10 × 6 px) no descubra los bordes.
   ========================================================= */
.escena { position: relative; aspect-ratio: 1137 / 792; --r: 110px; --s: 1.022; touch-action: pan-y; cursor: grab; outline: none; }
.escena.is-arrastrando { cursor: grabbing; }
.escena__marco { position: absolute; inset: 0; overflow: hidden; }
.escena__mueve { position: absolute; inset: 0; transform: scale(var(--s)); will-change: transform; transition: transform var(--t-normal) var(--curva); }   /* parallax: lupa.js fija translate() + scale(); corre en el compositor */   /* capa propia: el remuestreo de A no cambia al componer la claridad encima (silueta = 0) */
.escena__a { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.escena__ventana { position: absolute; inset: 0; pointer-events: none; clip-path: circle(calc(var(--r) - .5px) at var(--lx) var(--ly)); }
.claridad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.escena__grano { position: absolute; inset: 0; pointer-events: none; opacity: .06;   /* el grano no sigue al parallax: es de la superficie, no del fondo */

  /* grano: ruido SVG (feTurbulence .9, 2 octavas) al 6 %, efecto multiply: el ruido va como negro con alfa = 1 − gris,
     que da lo mismo que multiplicar (base × (0,94 + 0,06·gris)) sin el costo de mix-blend-mode; mosaico de 256 px */
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1 0 0 0 1'/></filter><rect width='256' height='256' filter='url(%23g)'/></svg>") 0 0 / 256px 256px repeat; }
.escena__etiquetas { pointer-events: none; }

/* lupa: objeto fino. Aro = 1 px tinta 45 % + 2,5 px papel + 1 px bronce exterior; vidrio con sombra interior y reflejo */
.lupa { position: absolute; z-index: 3; left: calc(var(--lx) - var(--r)); top: calc(var(--ly) - var(--r));
  width: calc(var(--r) * 2); height: calc(var(--r) * 2); pointer-events: none; }
.lupa__aro { position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(28,36,38,.45), 0 0 0 3.5px #F9F2E5, 0 0 0 4.5px var(--bronce), 0 30px 60px -24px rgba(14,16,17,.55); }
.escena:focus-visible .lupa__aro { box-shadow: 0 0 0 1px rgba(28,36,38,.45), 0 0 0 3.5px #F9F2E5, 0 0 0 4.5px var(--bronce), 0 0 0 7px var(--petroleo), 0 30px 60px -24px rgba(14,16,17,.55); }
.lupa__vidrio { position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 8px 24px rgba(14,16,17,.14);
  background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.22), rgba(255,255,255,0) 46%); }
/* encaje: cuatro marcas de 10 px sobre el aro (aparecen en micro mientras la lupa está posada) */
.lupa__marca { position: absolute; background: var(--bronce); opacity: 0; transition: opacity var(--t-micro) var(--curva); }
.lupa__marca--n, .lupa__marca--s { left: 50%; width: 1px; height: 10px; margin-left: -.5px; }
.lupa__marca--e, .lupa__marca--o { top: 50%; width: 10px; height: 1px; margin-top: -.5px; }
.lupa__marca--n { top: -7px; } .lupa__marca--s { bottom: -7px; } .lupa__marca--e { right: -7px; } .lupa__marca--o { left: -7px; }
.lupa.is-posada .lupa__marca { opacity: 1; }

.escena__marca {
  position: absolute; right: 2.2%; bottom: 3.2%; margin: 0; padding: 3px 7px; background: rgba(249,242,229,.94); z-index: 4;
  font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-2); pointer-events: none;
}
/* cursor: anillo de 14 px (1,5 px tinta, punto central); al arrastrar, 8 px */
.escena__cursor { position: absolute; left: 0; top: 0; z-index: 6; width: 14px; height: 14px; margin: -7px 0 0 -7px; box-shadow: inset 0 0 0 1.5px var(--tinta); border-radius: 50%;   /* 1,5 px exactos (un borde se redondea a 1 px) */
  pointer-events: none; opacity: 0; transition: opacity var(--t-micro) var(--curva), width var(--t-micro) var(--curva), height var(--t-micro) var(--curva), margin var(--t-micro) var(--curva); }
.escena__cursor::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .escena.con-cursor { cursor: none; }
  .escena.con-cursor .escena__cursor { opacity: 1; }
  .escena.is-arrastrando .escena__cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
}

/* etiquetas sin chip: mono 9,5 px, tracking .2em, tinta 70 %, raya de 9 px a la izquierda; dentro del margen de papel de la tarjeta.
   La activa (la lupa viaja hacia ella): tinta 100 % y una línea óxido de 1 px que se dibuja bajo el texto.
   La de la tarjeta donde está posada la lupa se funde (micro). */
.escena__etiqueta { position: absolute; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; line-height: 1;
  letter-spacing: .2em; color: rgba(28,36,38,.7); white-space: nowrap; transition: color var(--t-micro) var(--curva), opacity var(--t-micro) var(--curva); }
.escena__etiqueta i { width: 9px; height: 1px; background: currentColor; flex: none; }
.escena__etiqueta span { position: relative; padding-bottom: 3px; margin-bottom: -3px; }
.escena__etiqueta span::after { content: ""; position: absolute; left: 0; right: .2em; bottom: 0; height: 1px; background: var(--oxido); transform: scaleX(0); transform-origin: left; transition: transform var(--t-normal) var(--curva); }
.escena__etiqueta.is-activa { color: var(--tinta); }
.escena__etiqueta.is-activa span::after { transform: scaleX(1); }
.escena__etiqueta.is-posada { opacity: 0; }
.escena__etiqueta[data-lado="ia"] { transform: translate(22px, 6px); }   /* a la derecha del cuadrito rojo de la tarjeta */
.escena__etiqueta[data-lado="da"] { transform: translate(calc(-100% - 12px), 6px); }
.escena__etiqueta[data-lado="ib"] { transform: translate(22px, calc(-100% - 6px)); }
.escena__etiqueta[data-lado="db"] { transform: translate(calc(-100% - 12px), calc(-100% - 6px)); }
.escena--compacta .escena__etiqueta { display: none; }

/* índice bajo la escena: cinco rayas de 22 px (tinta 25 %; la activa en óxido) y la ayuda */
.indice { display: flex; align-items: center; gap: 18px; padding: 16px 0 4px; }
.indice__rayas { display: flex; gap: 6px; }
.indice__raya { position: relative; width: 22px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.indice__raya i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(28,36,38,.25); transform-origin: left;
  transition: background-color var(--t-micro) var(--curva), transform var(--t-normal) var(--curva); }
.indice__raya:hover i { background: rgba(28,36,38,.6); }
.indice__raya.is-activa i { background: var(--oxido); }
.indice__ayuda { margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--tinta-2); }

/* capa de claridad (SVG, unidades de la escena 1137 × 792) */
.c-papel { fill: #F9F2E5; }
.c-reticula line { stroke: rgba(206,198,184,.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.c-medidor { visibility: hidden; }
/* V7 · hoja: sin píldoras, cajas ni fondos (unidades locales = px a 1672). Gris pequeño #646C6F: tinta-3 con contraste AA */
.h-ambito { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; font-weight: 500; fill: #646C6F; }
.h-producto__txt { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; font-weight: 500; fill: var(--oxido); }
.h-raya { stroke: var(--oxido); stroke-width: 1; vector-effect: non-scaling-stroke; }
.h-mensaje { font-family: var(--serif); font-size: 20px; fill: var(--tinta); letter-spacing: -.005em; }
.h-pie { font-family: var(--mono); font-size: 9px; letter-spacing: .06em; fill: #646C6F; }
.h-rotulo { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; fill: #646C6F; }
.h-dato { font-family: var(--sans); font-size: 11px; fill: var(--tinta-2); }
.h-dato--valor { font-family: var(--mono); fill: var(--tinta); }
.h-fila { font-family: var(--sans); font-size: 12px; fill: var(--tinta); }
.h-barra-fondo { fill: rgba(110,118,121,.28); }
.h-barra-valor { fill: var(--tinta-2); }
.h-cubrir { fill: #F9F2E5; }
.h-recuadro { fill: #F9F2E5; stroke: rgba(110,118,121,.55); stroke-width: 1; vector-effect: non-scaling-stroke; }
.h-num-txt { font-family: var(--mono); font-size: 9px; fill: var(--tinta-2); }
/* móvil: el texto va dentro de la lupa (tamaños fijos en px, ver hojaMovil en lupa.js) */
.h-halo-m { paint-order: stroke; stroke: #F9F2E5; stroke-linejoin: round; }

/* lectura activa (pantallas estrechas): el producto en óxido, sin píldora */
/* tarjeta de lectura (bajo la escena, < 1100): papel, borde fino de tinta, sombra suave; misma jerarquía que la hoja */
.lectura { position: relative; margin: 6px 0 4px; padding: 18px 18px 20px; background: #F9F2E5; border: 1px solid var(--tinta); box-shadow: 0 14px 28px -20px rgba(14,16,17,.45); }
.lectura__hoja { transition: opacity var(--t-micro) var(--curva); }
.lectura__hoja.is-fuera { opacity: 0; }
.lectura__ambito { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; font-weight: 500; color: #646C6F; }
.lectura__producto { margin-top: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; font-weight: 500; color: var(--oxido); }
.lectura__producto::after { content: ""; display: block; width: 28px; height: 1px; margin-top: 5px; background: var(--oxido); }
.lectura__mensaje { margin-top: 12px; font-family: var(--serif); font-size: 20px; line-height: 25px; color: var(--tinta-titular); }
.lectura__datos { margin: 14px 0 0; padding: 0; }
.lectura__datos li { display: grid; grid-template-columns: 1fr 70px 26px; align-items: center; gap: 10px; padding: 5px 0; font-size: 16px; color: var(--tinta-2); }
.lectura__datos i { position: relative; height: 4px; background: rgba(110,118,121,.28); }
.lectura__datos i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); background: var(--tinta-2); }
.lectura__datos b { font-family: var(--mono); font-weight: 400; font-size: 13px; color: var(--tinta); text-align: right; }
.lectura__rotulo { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #646C6F; }
.lectura__pasos { margin: 8px 0 0; padding: 0; }
.lectura__pasos li { display: flex; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 16px; color: var(--tinta); }
.lectura__pasos i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--tinta-2); }
.lectura__pie { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: #646C6F; }

/* ---------- hero móvil / tablet (< 1100) ---------- */
@media (max-width: 1099.98px) {
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: flex-start; gap: 22px;
    background: var(--papel); padding: 24px var(--gutter) 32px; border-bottom: 1px solid rgba(28,36,38,.15);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--t-micro) var(--curva), transform var(--t-micro) var(--curva), visibility var(--t-micro) var(--curva);
  }
  .nav.is-open { background: var(--papel); }
  .nav.is-open .nav__menu { transform: none; opacity: 1; visibility: visible; transition: opacity var(--t-micro) var(--curva), transform var(--t-micro) var(--curva); }
  .nav__menu ul { flex-direction: column; gap: 4px; }
  .nav__menu ul a { font-size: 19px; display: inline-block; padding: 8px 0; }
  .hero__top { padding: 108px var(--gutter) 0; }
  .hero__copy { max-width: 640px; margin-bottom: 36px; }
  .escena { margin-inline: calc(var(--gutter) * -1); }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .hero__copy { margin-bottom: 44px; }

}

/* ---------- hero escritorio (≥ 1100): composición del maestro, en unidades del lienzo ---------- */
@media (min-width: 1100px) {
  .nav { height: calc(130 * var(--u)); padding-inline: calc(81 * var(--u)); align-items: flex-start; padding-top: calc(42 * var(--u)); }
  .nav.is-scrolled { height: 76px; padding-top: 16px; }
  .nav__logo img { height: calc(40 * var(--u)); margin-top: calc(4 * var(--u)); }
  .nav.is-scrolled .nav__logo img { height: 32px; margin-top: 6px; }
  .nav__menu { flex: 1; justify-content: space-between; margin-left: calc((572 - 81 - 129) * var(--u)); }
  .nav__menu ul { gap: calc(44.5 * var(--u)); margin-top: calc(9 * var(--u)); }
  .nav__menu ul a { font-size: max(13.5px, calc(14.6 * var(--u))); }
  .nav.is-scrolled .nav__menu ul { margin-top: 10px; }
  .nav__cta { font-size: max(13.5px, calc(14.6 * var(--u))); padding: calc(12 * var(--u)) calc(22 * var(--u)); height: calc(44 * var(--u)); min-height: 38px; }

  .hero__top { height: calc(792 * var(--u)); }
  .hero__copy { position: absolute; left: calc(81 * var(--u)); top: 0; width: calc(470 * var(--u)); height: 100%; z-index: 3; }
  .hero__rule { position: absolute; top: calc(177 * var(--u)); width: calc(44 * var(--u)); margin: 0; }
  .hero__claim { position: absolute; top: calc(203 * var(--u)); left: calc(-3 * var(--u)); font-size: calc(90.6 * var(--u)); line-height: calc(71.2 * var(--u)); font-weight: 500; letter-spacing: -.045em; white-space: nowrap; }
  .hero__lead { position: absolute; top: calc(434 * var(--u)); left: calc(4 * var(--u)); width: calc(440 * var(--u)); margin: 0; font-size: calc(24.5 * var(--u)); line-height: calc(31 * var(--u)); }
  /* V6: la bajada nueva ocupa tres líneas; el apoyo baja una línea (516 → 547) */
  .hero__support { position: absolute; top: calc(547 * var(--u)); left: calc(4 * var(--u)); margin: 0; width: calc(440 * var(--u)); max-width: none; font-size: calc(18.6 * var(--u)); line-height: calc(24.3 * var(--u)); }
  .hero__cta { position: absolute; top: calc(661 * var(--u)); left: calc(4 * var(--u)); margin: 0; height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)) 0 calc(22 * var(--u)); font-size: calc(18 * var(--u)); gap: calc(24 * var(--u)); }
  .hero__cta .arrow { width: calc(24 * var(--u)); }

  .escena { position: absolute; left: calc(535 * var(--u)); top: 0; width: calc(1137 * var(--u)); height: calc(792 * var(--u)); aspect-ratio: auto; z-index: 1; }
  .lectura { display: none; }
  .hero { padding-bottom: calc(64 * var(--u)); }
  .indice { position: absolute; left: calc(559 * var(--u)); top: calc(792 * var(--u)); height: calc(64 * var(--u)); padding: 0; }
}

/* (V6: las secciones antiguas bajo el hero —video, servicios, experiencia, metodología, nosotros, orientador y pie— se retiraron; ver HOME V6 al final) */


/* =========================================================
   HOME V6 · bajo el hero (maqueta aprobada: referencias/lamina.html, 1440 px)
   ≥ 1200: la maqueta escalada (--q = 1 px de la maqueta; 1440 → 1 px, 1672 → 1,16 px).
   900–1199: tríptico a ancho completo, etiquetas serif 14 px, servicios en tres columnas.
   < 900: tríptico en tres imágenes apiladas, una columna.
   --p = 1 px de la plancha de la maqueta (1256 × 420). Gris pequeño en #646C6F (tinta-3 da 4,0:1, bajo AA).
   ========================================================= */
.v6 { container-type: inline-size; }
.v6, .footer6 { --t3a: #646C6F; --rosa: #E2A598; --gris-osc: #9AA3A6; --q: 1px; }
.v6, .footer6 { line-height: normal; }   /* la maqueta usa el interlineado por omisión */
.v6 .mono { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; }

/* 1 · banda de premisa */
.v6-banda { position: relative; background: var(--tinta); color: var(--papel-lupa); padding: 56px var(--gutter) 52px; overflow: hidden; }
.v6-banda .k { position: absolute; left: var(--gutter); top: 22px; font-size: 10px; color: var(--gris-osc); }
.v6-banda h2 { position: relative; z-index: 1; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 7.2vw, 56px); line-height: 1.07; letter-spacing: -.015em; max-width: 1100px; }
.v6-banda h2 em { font-style: normal; color: var(--rosa); }

/* 2 · lámina */
.lam { position: relative; padding: 64px 0 0; }
.lam .rail { display: none; }
.lam .head { padding: 0 var(--gutter); display: grid; gap: 24px; margin-bottom: 40px; }
.lam__titulo { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 11vw, 96px); line-height: .96; letter-spacing: -.025em; color: var(--tinta-titular); }
.lam__titulo b { font-weight: 600; }
.lam__titulo em { font-style: italic; font-weight: 400; color: var(--oxido); }
.lam .intro { font-size: 16px; line-height: 25px; color: var(--tinta-2); }
.lam .intro .mono { display: block; font-size: 10px; color: var(--t3a); margin-bottom: 14px; }
.regla { display: none; position: relative; height: 22px; border-bottom: 1px solid var(--tinta); }
.regla i { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--tinta); }
.regla i.l { height: 12px; }
.regla s { position: absolute; bottom: 9px; font-family: var(--mono); font-size: 8px; letter-spacing: .1em; color: var(--t3a); text-decoration: none; transform: translateX(-50%); }
.regla .abc { position: absolute; bottom: 14px; font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--tinta); transform: translateX(-50%); }
.plate { display: none; position: relative; overflow: hidden; border-bottom: 1px solid var(--tinta);
  background: url(../assets/home/triptico.webp) center 62% / calc(1256 * var(--p)) auto no-repeat; height: calc(420 * var(--p)); }
.plate .sep { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(28,36,38,.22); }
.v6 .ghost { position: absolute; top: calc(-30 * var(--p)); font-family: var(--serif); font-weight: 600; font-size: calc(300 * var(--p)); line-height: 1; color: var(--tinta); opacity: .04; pointer-events: none; user-select: none; }
.tercios { display: grid; gap: 20px; margin: 0 var(--gutter); --p: calc((100cqw - 2 * var(--gutter)) / 418.67); }
.tercio { position: relative; aspect-ratio: 418.67 / 420; background: center / cover no-repeat; border-bottom: 1px solid var(--tinta); }
.tercio .ghost { left: calc(12 * var(--p)); }
.tercio .c .lb { padding: 4px 7px 5px; translate: var(--dx, 0px) 0; }
.tercio .c { top: calc(var(--y) * 1%); }   /* encuadre completo (768–899); en móvil se recorta a 4:3 */
/* anotaciones: punto + línea + etiqueta (posiciones de la maqueta) */
.v6 .c { position: absolute; width: 0; height: 0; }
.v6 .c .dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta); box-shadow: 0 0 0 3px rgba(28,36,38,.14); }
.v6 .c .ln { position: absolute; left: -1px; bottom: 0; width: 2px; pointer-events: none; height: calc(var(--h) * var(--p)); overflow: visible; }
.v6 .c .ln line { stroke: var(--tinta); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
/* V7: el óxido solo en el punto y la línea de «Criterio Nitia» */
.v6 .c.clave .dot { background: var(--oxido); box-shadow: 0 0 0 3px rgba(150,56,42,.18); }
.v6 .c.clave .ln line { stroke: var(--oxido); opacity: 1; }
.v6 .c .lb { position: absolute; left: 0; bottom: calc(var(--b) * var(--p)); white-space: nowrap; transform: translateX(-50%); background: rgba(249,242,229,.95); border: 1px solid rgba(28,36,38,.16); padding: 5px 9px 6px; box-shadow: 0 6px 14px -8px rgba(14,16,17,.35); transition: opacity var(--t-micro) var(--curva), background-color var(--t-micro) var(--curva), border-color var(--t-micro) var(--curva); outline: none; }
.v6 .c .lb:focus-visible { box-shadow: 0 0 0 2px var(--petroleo); }
.v6 .c.dk .lb { background: rgba(28,36,38,.93); border-color: rgba(249,242,229,.18); }
.v6 .c .lb .m { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3a); display: block; transition: color var(--t-micro) var(--curva); }
.v6 .c .lb .s { font-family: var(--serif); font-size: 14px; line-height: 16px; color: var(--tinta-titular); display: block; transition: color var(--t-micro) var(--curva); }
.v6 .c.ox .lb .m { color: var(--t3a); }
.v6 .c.ox .dot { width: 12px; height: 12px; left: -6px; top: -6px; }
.v6 .c.ox .lb .s { font-weight: 600; font-size: 15.5px; color: var(--tinta-titular); }
.v6 .c.dk .lb .m { color: var(--gris-osc); } .v6 .c.dk .lb .s { color: var(--papel-lupa); }
.v6 .c.dk .ln line { stroke: #DDE2E3; } .v6 .c.dk .dot { background: #DDE2E3; box-shadow: 0 0 0 3px rgba(221,226,227,.18); }
.v6 .c.dk.ox .lb .s { color: var(--papel-lupa); }
.v6 .c.lf .lb { transform: none; left: 8px; }
.v6 .c.rt .lb { transform: translateX(-100%); left: -8px; }
/* interacción: la etiqueta señalada pasa a óxido; las demás bajan a 55 % */
.v6 .c .dot, .v6 .c .lb { cursor: default; }
.v6 .is-foco .c .lb { opacity: .55; }
.v6 .is-foco .c.is-foco .lb { opacity: 1; background: var(--tinta); border-color: var(--tinta); }
.v6 .is-foco .c.dk.is-foco .lb { border-color: rgba(249,242,229,.6); }
.v6 .c.is-foco .lb .m, .v6 .c.is-foco .lb .s { color: var(--papel-lupa) !important; }
/* dibujo de líneas al entrar en pantalla (solo con movimiento; ver main.js) */
.v6-anim .dibujable path, .v6-anim .dibujable line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.v6-anim .dibujable.is-dibujado path, .v6-anim .dibujable.is-dibujado line { stroke-dashoffset: 0; transition: stroke-dashoffset var(--t-lento) var(--curva); }

/* servicios */
.pie6 { margin: 0 var(--gutter); display: grid; }
.pie6 > div { position: relative; padding: 26px 0 40px; }
.pie6 > div + div { border-top: 1px solid rgba(28,36,38,.18); }
.pie6 .ab { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--tinta); }
.pie6 .ab span { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--t3a); margin-left: 10px; }
.pie6 h3 { font-family: var(--serif); font-weight: 600; font-size: 28px; line-height: 32px; color: var(--tinta-titular); margin: 10px 0; letter-spacing: -.01em; }
.pie6 p { font-size: 15px; line-height: 23px; color: var(--tinta-2); max-width: 360px; }
.prods { margin-top: 20px; border-top: 1px solid var(--arena); }
.pr { display: grid; grid-template-columns: 34px 1fr; gap: 0 8px; padding: 11px 0 10px; border-bottom: 1px solid var(--arena); align-items: baseline; }
.pr i { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--t3a); }
.pr b { font-family: var(--serif); font-weight: 600; font-size: 16.5px; color: var(--tinta-titular); }
.pr small { grid-column: 2; font-size: 12.5px; line-height: 17px; color: var(--t3a); margin-top: 2px; }
.pie6 a { display: inline-block; margin-top: 16px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--tinta); padding-bottom: 3px; }
.pie6 a .arrow { width: 16px; margin-left: 8px; vertical-align: middle; }
.pie6 a:hover .arrow { transform: translateX(4px); }
.pie6 > div::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 0; background: var(--tinta); transition: width var(--t-micro) var(--curva); }
.pie6 > div.on::before { width: 56px; }
.nota { margin: 0 var(--gutter) 64px; padding-top: 18px; border-top: 1px solid var(--arena); display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3a); }

/* 3 · video */
.video6 { padding: 0 var(--gutter) 64px; display: grid; gap: 24px; align-items: end; }
.video6 .k, .contacto .k { display: block; font-size: 10px; color: var(--t3a); margin-bottom: 14px; }
.video6 h2, .contacto h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 9vw, 56px); line-height: 1.04; letter-spacing: -.02em; color: var(--tinta-titular); }
.contacto h2 em { font-style: italic; color: var(--oxido); }
.contacto h2 { text-wrap: balance; }
.vf { position: relative; aspect-ratio: 16 / 9; background: var(--tinta); border: 1px solid var(--tinta); overflow: hidden; }
.vf__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf video { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; background: var(--tinta); }
.vf video:focus-visible { outline: 2px solid var(--petroleo); outline-offset: -2px; }
.vf.is-reproduciendo .play, .vf.is-reproduciendo .vt { visibility: hidden; }
.vf .play { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; padding: 0; background: rgba(28,36,38,.86); border: 1.5px solid var(--papel-lupa); border-radius: 50%; transform: translate(-50%, -50%); cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(14,16,17,.5); transition: background-color var(--t-micro) var(--curva), transform var(--t-normal) var(--curva); }
.vf .play:not([aria-disabled="true"]):hover { background: var(--tinta); transform: translate(-50%, -50%) scale(1.04); }
.vf .play[aria-disabled="true"] { cursor: default; }
.vf .play::after { content: ""; position: absolute; left: 34px; top: 28px; border-left: 22px solid var(--papel-lupa); border-top: 14px solid transparent; border-bottom: 14px solid transparent; }
.vf .play:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; }
.vf .vt { position: absolute; z-index: 2; left: 22px; bottom: 18px; font-size: 10px; color: var(--papel-lupa); background: rgba(28,36,38,.86); padding: 5px 9px 4px; }   /* #9AA3A6 de la maqueta queda bajo AA sobre el video (2,6:1 medido) */

/* 4 · contacto (formulario actual: valida y, en modo demostración, no envía ni guarda nada) */
.contacto { background: var(--papel-banda); border-top: 1px solid var(--tinta); padding: 64px var(--gutter); display: grid; gap: 40px; }
.contacto .ct p { margin-top: 22px; font-size: 16px; line-height: 25px; color: var(--tinta-2); max-width: 420px; }

/* 5 · pie */
.footer6 { padding: 24px var(--gutter); display: flex; flex-direction: column; gap: 8px; background: var(--tinta); font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-osc); }

/* ---------- 640–899: formulario en dos columnas ---------- */
@media (min-width: 640px) and (max-width: 899.98px) {
}

/* ---------- 1024: tríptico a ancho completo, etiquetas serif 14 px, servicios en tres columnas ---------- */
@media (min-width: 900px) {
  .v6-banda { padding: 60px 40px 56px; }
  .v6-banda .k { left: 40px; top: 24px; }
  .lam .head { padding: 0 40px; grid-template-columns: 1fr 320px; gap: 40px; align-items: end; margin-bottom: 48px; }
  .lam__titulo { font-size: 72px; line-height: 70px; }
  .regla { display: block; }
  .plate { display: block; --p: calc(100cqw / 1256); }
  .v6 .plate .c .lb { padding: 4px 7px 5px; }
  .v6 .plate .c .lb .m { font-size: 8px; }
  .v6 .plate .c .lb .s { line-height: 15px; }
  .v6 .plate .c.ox .lb .s { font-size: 14px; }   /* serif 14 px en todas las etiquetas a este ancho */
  .tercios { display: none; }
  .pie6 { margin: 0 40px; grid-template-columns: repeat(3, 1fr); }
  .pie6 > div { padding: 24px 20px 48px 0; }
  .pie6 > div + div { padding-left: 20px; border-top: 0; border-left: 1px solid rgba(28,36,38,.18); }
  .pie6 > div + div::before { left: 20px; }
  .pie6 h3 { font-size: 24px; line-height: 28px; }
  .pie6 p { min-height: 69px; }
  .nota { margin: 0 40px 80px; flex-direction: row; justify-content: space-between; }
  .video6 { padding: 0 40px 80px; grid-template-columns: 280px 1fr; gap: 40px; }
  .contacto { padding: 80px 40px; grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer6 { flex-direction: row; justify-content: space-between; gap: 24px; padding: 28px 40px; }
}

@media (min-width: 900px) and (max-width: 1199.98px) { .regla s:first-of-type { transform: none; } }   /* a ancho completo, «0000» no se corta en el borde */

/* ---------- ≥ 1200: la maqueta, escalada con el ancho (1440 = 1:1) ---------- */
@media (min-width: 1200px) {
  .v6, .footer6 { --q: max(.9px, calc(100cqw / 1440)); }   /* en .footer6, sin contenedor, cqw = ancho de la ventana */
  /* V7 · retícula: la banda alinea su texto con la columna del hero (81 del lienzo), no con 72 de la maqueta */
  .v6-banda { padding: calc(64 * var(--q)) calc(72 * var(--q)) calc(60 * var(--q)) calc(81 * var(--u)); }
  .v6-banda .k { left: calc(81 * var(--u)); top: calc(26 * var(--q)); font-size: calc(10 * var(--q)); }
  .v6-banda h2 { font-size: calc(56 * var(--q)); line-height: calc(60 * var(--q)); max-width: calc(1100 * var(--q)); }

  .lam { padding: calc(96 * var(--q)) 0 0; }
  .lam .rail { display: block; position: absolute; left: calc(24 * var(--q)); top: calc(110 * var(--q)); writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(10 * var(--q)); color: var(--t3a); }
  .lam .head { padding: 0 calc(72 * var(--q)) 0 calc(112 * var(--q)); grid-template-columns: 1fr calc(380 * var(--q)); gap: calc(48 * var(--q)); margin-bottom: calc(56 * var(--q)); }
  .lam__titulo { font-size: calc(96 * var(--q)); line-height: calc(92 * var(--q)); }
  .lam .intro { font-size: calc(17 * var(--q)); line-height: calc(27 * var(--q)); }
  .lam .intro .mono { font-size: calc(10 * var(--q)); margin-bottom: calc(14 * var(--q)); }
  .regla { height: calc(22 * var(--q)); margin: 0 calc(72 * var(--q)) 0 calc(112 * var(--q)); }
  .regla i { height: calc(6 * var(--q)); } .regla i.l { height: calc(12 * var(--q)); }
  .regla s { bottom: calc(9 * var(--q)); font-size: calc(8 * var(--q)); }
  .regla .abc { bottom: calc(14 * var(--q)); font-size: calc(13 * var(--q)); }
  .plate { margin: 0 calc(72 * var(--q)) 0 calc(112 * var(--q)); --p: calc((100cqw - 184 * var(--q)) / 1256); }
  .v6 .plate .c .dot { left: calc(-4 * var(--q)); top: calc(-4 * var(--q)); width: calc(8 * var(--q)); height: calc(8 * var(--q)); }
  .v6 .plate .c.ox .dot { left: calc(-6 * var(--q)); top: calc(-6 * var(--q)); width: calc(12 * var(--q)); height: calc(12 * var(--q)); }
  .v6 .plate .c .lb { padding: calc(5 * var(--q)) calc(9 * var(--q)) calc(6 * var(--q)); }
  .v6 .plate .c .lb .m { font-size: calc(9.5 * var(--q)); }
  .v6 .plate .c .lb .s { font-size: calc(16 * var(--q)); line-height: calc(18 * var(--q)); }
  .v6 .plate .c.ox .lb .s { font-size: calc(18 * var(--q)); }
  .v6 .plate .c.lf .lb { left: calc(8 * var(--q)); } .v6 .plate .c.rt .lb { left: calc(-8 * var(--q)); }

  .pie6 { margin: 0 calc(72 * var(--q)) 0 calc(112 * var(--q)); }
  .pie6 > div { padding: calc(26 * var(--q)) calc(28 * var(--q)) calc(56 * var(--q)) 0; }
  .pie6 > div + div { padding-left: calc(28 * var(--q)); }
  .pie6 > div + div::before { left: calc(28 * var(--q)); }
  .pie6 > div::before { height: calc(2 * var(--q)); }
  .pie6 > div.on::before { width: calc(56 * var(--q)); }
  .pie6 .ab { font-size: calc(13 * var(--q)); }
  .pie6 .ab span { font-size: calc(10 * var(--q)); margin-left: calc(10 * var(--q)); }
  .pie6 h3 { font-size: calc(30 * var(--q)); line-height: calc(34 * var(--q)); margin: calc(10 * var(--q)) 0; }
  .pie6 p { font-size: calc(15 * var(--q)); line-height: calc(23 * var(--q)); max-width: calc(360 * var(--q)); min-height: calc(46 * var(--q)); }
  .prods { margin-top: calc(20 * var(--q)); }
  .pr { grid-template-columns: calc(34 * var(--q)) 1fr; gap: 0 calc(8 * var(--q)); padding: calc(11 * var(--q)) 0 calc(10 * var(--q)); }
  .pr i { font-size: calc(10 * var(--q)); }
  .pr b { font-size: calc(16.5 * var(--q)); }
  .pr small { font-size: calc(12.5 * var(--q)); line-height: calc(17 * var(--q)); margin-top: calc(2 * var(--q)); }
  .pie6 a { margin-top: calc(16 * var(--q)); font-size: calc(10.5 * var(--q)); padding-bottom: calc(3 * var(--q)); }
  .nota { margin: 0 calc(72 * var(--q)) calc(96 * var(--q)) calc(112 * var(--q)); padding-top: calc(18 * var(--q)); font-size: calc(9.5 * var(--q)); }

  .video6 { padding: 0 calc(72 * var(--q)) calc(96 * var(--q)) calc(112 * var(--q)); grid-template-columns: calc(380 * var(--q)) 1fr; gap: calc(48 * var(--q)); }
  .video6 .k, .contacto .k { font-size: calc(10 * var(--q)); margin-bottom: calc(14 * var(--q)); }
  .video6 h2, .contacto h2 { font-size: calc(56 * var(--q)); line-height: calc(58 * var(--q)); }
  .vf .play { width: calc(84 * var(--q)); height: calc(84 * var(--q)); }
  .vf .play::after { left: calc(34 * var(--q)); top: calc(28 * var(--q)); border-left-width: calc(22 * var(--q)); border-top-width: calc(14 * var(--q)); border-bottom-width: calc(14 * var(--q)); }
  .vf .vt { left: calc(22 * var(--q)); bottom: calc(18 * var(--q)); font-size: calc(10 * var(--q)); }

  .contacto { padding: calc(96 * var(--q)) calc(72 * var(--q)) calc(96 * var(--q)) calc(112 * var(--q)); gap: calc(72 * var(--q)); }
  .contacto .ct p { margin-top: calc(22 * var(--q)); font-size: calc(16 * var(--q)); line-height: calc(25 * var(--q)); max-width: calc(420 * var(--q)); }
  .footer6 { padding: calc(28 * var(--q)) calc(72 * var(--q)) calc(28 * var(--q)) calc(112 * var(--q)); gap: calc(24 * var(--q)); font-size: calc(9.5 * var(--q)); }
}

/* diálogo del video (cuando exista el archivo) */

/* =========================================================
   V7 · ENTRADA DE LA PÁGINA (una vez; ver main.js)
   0 ms papel con logo · 120 ms el claim, una línea cada 90 ms · 400 ms la escena (lento, de 92 % a 100 %) ·
   900 ms la lupa entra desde la derecha (lupa.js) · 1300 ms bajada, apoyo, botón, menú y rayas (normal).
   ========================================================= */
html.ent .hero__claim > *, html.ent .hero__lead, html.ent .hero__support, html.ent .hero__cta,
html.ent .nav__menu, html.ent .indice__ayuda, html.ent .lectura { opacity: 0; transform: translateY(8px); }
html.ent .v6-banda { opacity: 0; }   /* a 0 ms solo papel y logo */
html.ent .escena { opacity: 0; transform: scale(.92); }
html.ent .lupa, html.ent .escena__ventana { opacity: 0; }   /* la ventana de claridad llega con la lupa */
html.ent .indice__raya i { transform: scaleX(0); }
html.ent.ent-1 .hero__claim > * { opacity: 1; transform: none; transition: opacity var(--t-normal) var(--curva), transform var(--t-normal) var(--curva); }
html.ent.ent-1 .hero__claim > :nth-child(2) { transition-delay: 90ms; }
html.ent.ent-1 .hero__claim > :nth-child(3) { transition-delay: 180ms; }
html.ent.ent-2 .escena { opacity: 1; transform: none; transition: opacity var(--t-lento) var(--curva), transform var(--t-lento) var(--curva); }
html.ent.ent-3 .lupa, html.ent.ent-3 .escena__ventana { opacity: 1; transition: opacity var(--t-micro) var(--curva); }
html.ent.ent-4 .hero__lead, html.ent.ent-4 .hero__support, html.ent.ent-4 .hero__cta, html.ent.ent-4 .nav__menu,
html.ent.ent-4 .indice__ayuda, html.ent.ent-4 .lectura, html.ent.ent-4 .v6-banda { opacity: 1; transform: none; transition: opacity var(--t-normal) var(--curva), transform var(--t-normal) var(--curva); }
html.ent.ent-4 .indice__raya i { transform: none; transition: transform var(--t-normal) var(--curva); }
html.ent.ent-4 .indice__raya:nth-child(2) i { transition-delay: 60ms; }
html.ent.ent-4 .indice__raya:nth-child(3) i { transition-delay: 120ms; }
html.ent.ent-4 .indice__raya:nth-child(4) i { transition-delay: 180ms; }
html.ent.ent-4 .indice__raya:nth-child(5) i { transition-delay: 240ms; }
/* el visitante movió el mouse: la secuencia termina de inmediato, con fundidos micro y sin saltos */
html.ent.ent-rapida *, html.ent.ent-rapida *::before, html.ent.ent-rapida *::after { transition-duration: var(--t-micro) !important; transition-delay: 0s !important; }

/* aparición al entrar en pantalla: fundido + 8 px (normal), 60 ms entre hermanos, una vez */
.rv { opacity: 0; transform: translateY(8px); transition: opacity var(--t-normal) var(--curva), transform var(--t-normal) var(--curva); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.is-in { opacity: 1; transform: none; }

/* prefers-reduced-motion: todo pasa a fundidos de 150 ms, sin desplazamientos */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 150ms !important; transition-delay: 0s !important; animation-duration: 150ms !important; animation-delay: 0s !important; }
  html.ent .hero__claim > *, html.ent .hero__lead, html.ent .hero__support, html.ent .hero__cta, html.ent .nav__menu,
  html.ent .indice__ayuda, html.ent .lectura, html.ent .escena, .rv { transform: none !important; }
  html.ent .indice__raya i { transform: none; }
}

/* =========================================================
   MÓVIL (< 768): lupa guiada, tarjeta de lectura y servicios intercalados con sus dibujos
   ========================================================= */
.solo-movil { display: none; }
@media (min-width: 768px) { .escena-vista { display: contents; } }
@media (max-width: 767.98px) {
  .solo-escritorio { display: none; }
  .solo-movil { display: inline; }
  /* encuadre casi cuadrado (x 110–905, alto completo): los cinco documentos y la mujer a la vista; misma imagen y anclas */
  .escena-vista { position: relative; margin-inline: calc(var(--gutter) * -1); aspect-ratio: 795 / 792; overflow: hidden; }
  .escena-vista > .escena { position: absolute; top: 0; left: calc(-110 / 795 * 100%); width: calc(1137 / 795 * 100%); margin: 0; touch-action: pan-y; cursor: default; }
  .escena__marca { right: calc((1137 - 905) / 1137 * 100% + 8px); }
  /* cinco guiones entre la escena y la tarjeta, con área táctil de 44 px */
  .indice { gap: 0 6px; padding: 6px 0 8px; margin-left: -11px; flex-wrap: wrap; }
  .indice__rayas { gap: 0; }
  .indice__raya { width: 44px; height: 44px; }
  .indice__raya i { left: 11px; right: 11px; }
  .indice__ayuda { font-size: 11px; letter-spacing: .08em; white-space: nowrap; padding-left: 11px; }
  /* el texto va dentro de la lupa: sin tarjeta bajo la escena; reflejo más tenue para que el dibujo se vea claro */
  .lectura { display: none; }
  .lupa__vidrio { box-shadow: inset 0 6px 18px rgba(14,16,17,.10); background: radial-gradient(circle at 30% 22%, rgba(255,255,255,.10), rgba(255,255,255,0) 38%); }

  /* servicios: dibujo A → bloque A → dibujo B → bloque B → dibujo C → bloque C */
  .lam { display: flex; flex-direction: column; }
  .lam .head { order: 0; }
  .tercios, .pie6 { display: contents; }
  .tercios > .tercio:nth-child(1) { order: 1; } .pie6 > div:nth-child(1) { order: 2; }
  .tercios > .tercio:nth-child(2) { order: 3; } .pie6 > div:nth-child(2) { order: 4; }
  .tercios > .tercio:nth-child(3) { order: 5; } .pie6 > div:nth-child(3) { order: 6; }
  .lam .nota { order: 7; }
  /* cada dibujo recortado a 4:3 (--oy: % de la imagen que queda arriba, fuera del encuadre) */
  .tercio { margin: 8px var(--gutter) 0; aspect-ratio: 4 / 3; overflow: hidden; background-size: calc(418.67 * var(--p)) auto !important; background-position: 0 calc(var(--oy) * -4.2 * var(--p)) !important; }
  .tercio .c { top: calc((var(--y) - var(--oy)) * 1% / .75); }
  .tercio .ghost { top: calc(-30 * var(--p) - var(--oy) * 4.2 * var(--p)); }
  .v6 .tercio .c .lb .s { font-size: 15px; line-height: 17px; }
  .v6 .tercio .c .lb .m { font-size: 10px; }
  .v6 .tercio .c.ox .lb .s { font-size: 15px; }
  .pie6 > div { margin: 0 var(--gutter); padding: 22px 0 40px; }
  .pie6 > div + div { border-top: 0; }
  /* revisión móvil: párrafos de 16 px, enlaces y botones de 44 px de alto */
  .pie6 p { font-size: 16px; line-height: 24px; }
  .pr small { font-size: 14px; line-height: 19px; }
  .pie6 a { display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px; padding: 0; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; }
}

/* video en móvil: a todo el ancho de la pantalla (sin márgenes laterales ni borde) */
@media (max-width: 767.98px) {
  .video6 .vf { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; }
  .vf .play { width: 68px; height: 68px; }
  .vf .play::after { left: 27px; top: 22px; border-left-width: 18px; border-top-width: 12px; border-bottom-width: 12px; }
}
/* Banda premisa con la gráfica de fuentes (aprobada 2026-10-19; SVG en index.html, animación en js/premisa.js).
 * Sobre la banda de tinta: fichas de papel, hilos de papel al 42 %, nodo de papel, un solo punto óxido en la salida. */
.premisa-graf { position: relative; z-index: 1; margin-top: 36px; }
.premisa-graf .pg { display: block; width: 100%; height: auto; overflow: visible; }
.premisa-graf .pg--h { max-width: 600px; }
.premisa-graf .pg--v { display: none; max-width: 340px; }
.pg-ficha { fill: #F9F2E5; }
.pg-ficha--salida { fill: #F9F2E5; }
.pg-rotulo { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; fill: var(--tinta); }
.pg-icono { fill: none; stroke: var(--tinta); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.pg-hilo { fill: none; stroke: rgba(249,242,229,.42); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pg-hilo--salida { stroke: rgba(249,242,229,.7); }
.pg-nodo__aro { fill: var(--tinta); stroke: #F9F2E5; stroke-width: 1.2; }
.pg-nodo__centro { fill: #F9F2E5; }
.pg-nodo__txt { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; fill: rgba(249,242,229,.78); }
.pg-salida__txt { font-family: var(--serif); font-size: 16px; fill: var(--tinta); }
.pg-punto { fill: var(--oxido); }
@media (min-width: 1100px) {
  .v6-banda { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(64 * var(--q)); }
  .v6-banda h2 { max-width: none; }
  .premisa-graf { margin-top: 0; width: calc(600 * var(--q)); }
  .premisa-graf .pg--h { max-width: none; }
}
@media (max-width: 639.98px) {
  .premisa-graf { margin-top: 32px; }
  .premisa-graf .pg--h { display: none; }
  .premisa-graf .pg--v { display: block; margin: 0 auto; }
}

/* ---------- contacto: copia de referencias/formulario_ficha_v1/ficha.html (medidas, colores, tipografías, sombra dura, letra fantasma,
 * verbos en mono, casilla de tinta, pie con resumen, campos de línea inferior, cierre con timbre). Óxido solo en el botón y el timbre.
 * Gris de textos chicos: #646C6F (t3a del sitio, AA 4,5:1) en vez del #6E7679 del mockup (4,0:1). Sin mix-blend-mode en las miniaturas (son PNG transparentes; el modo de mezcla cuesta cuadros a la lupa). ---------- */
.contacto { background: var(--papel); }
.contacto .ct .k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3a); margin-bottom: 18px; }
.contacto .ct h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 10vw, 52px); line-height: 1.08; letter-spacing: -.01em; color: var(--tinta-titular); }
.contacto .ct h2 em { font-style: italic; color: var(--oxido); }
.contacto .ct h2 { text-wrap: wrap; }
.contacto .ct p { margin-top: 22px; font-size: 17px; line-height: 26px; color: var(--tinta-2); max-width: 380px; }
.ct__dato { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--arena); font-size: 12px; line-height: 22px; color: var(--t3a); max-width: 380px; }
.ct__dato b { display: block; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--tinta); margin-bottom: 4px; }
.ct__dato a { color: inherit; text-decoration: none; }
.ct__dato a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }

.ficha { position: relative; align-self: start; background: var(--papel-lupa); border: 1px solid var(--tinta); padding: 30px 36px 32px; box-shadow: 10px 10px 0 var(--arena); }
.ficha::before { content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px; background: var(--tinta); }
.ficha .k { margin-bottom: 0; display: inline; }
.ficha__cab { display: flex; justify-content: space-between; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--arena); }
.ficha__cab .k { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3a); }
.ficha__pasos { display: flex; align-items: center; gap: 8px; }
.ficha__pasos i { display: block; width: 26px; height: 2px; background: var(--arena); transition: background-color var(--t-normal) var(--curva); }
.ficha__pasos i.on { background: var(--tinta); }
.ficha__pasos span { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--tinta); margin-left: 8px; }
.ficha.is-cerrada .ficha__cab { display: none; }
.ff fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.trampa { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; }   /* campo trampa (antispam) */
.rama { display: none; }
.rama.activa { display: block; }
.fp__q:focus { outline: none; }
.ff .fp[hidden] { display: none; }

.preg { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 26px 0 22px; }
.fp__q { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.15; letter-spacing: -.01em; color: var(--tinta-titular); }
.preg small, .rama small { font-size: 14px; color: var(--t3a); white-space: nowrap; }
.preg small b, .rama small b { font-weight: 500; color: var(--tinta); }
.preg--3 { margin-bottom: 4px; }
.preg--3 .fp__q, .rama .fp__q { font-size: 30px; }
.rama legend.fp__q { display: block; float: left; width: 100%; margin: 22px 0 6px; }
.rama legend + small { display: block; clear: both; margin-bottom: 4px; }
.rama .ops, .rama .ff__escribir { clear: both; }

/* tarjetas */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.card { position: relative; min-height: 236px; background: var(--papel); border: 1px solid var(--arena); padding: 20px 22px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column;
  transition: transform var(--t-micro) var(--curva), box-shadow var(--t-micro) var(--curva), border-color var(--t-micro) var(--curva); }
.card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.card .ghost { position: absolute; right: -10px; bottom: -40px; font-family: var(--serif); font-weight: 600; font-size: 170px; line-height: 1; color: var(--arena); opacity: .38; pointer-events: none; }
.card .top { display: flex; justify-content: space-between; align-items: flex-start; height: 112px; }
.card .let { white-space: nowrap; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--t3a); padding-top: 2px; }
.card .let b { font-weight: 500; color: var(--tinta); }
.card img { width: 170px; height: 112px; object-fit: contain; object-position: right top; margin: -4px -6px 0 0; }
.card .tit { position: relative; font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--tinta-titular); margin-top: auto; padding-right: 40px; }
.card .lin { position: relative; font-size: 14.5px; line-height: 20px; color: var(--tinta-2); margin-top: 6px; padding-right: 40px; }
.card .chk { position: absolute; right: 18px; bottom: 20px; width: 22px; height: 22px; border: 1.5px solid var(--arena); background: var(--papel-lupa); }
.card.on { border: 2px solid var(--tinta); background: var(--papel-lupa); padding: 19px 21px; }
.card.on .ghost { opacity: .7; }
.card.on .chk { border-color: var(--tinta); background: var(--tinta); right: 17px; bottom: 19px; }
.card.on .chk::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--papel-lupa); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.card.is-foco { outline: 2px solid var(--petroleo); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(28,36,38,.55); border-color: var(--tinta); }
}

/* pie con resumen y botón */
.pie { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--arena); }
.pie .k { font-family: var(--mono); font-size: 11px; line-height: 18px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3a); }
.pie .k b { color: var(--tinta); font-weight: 500; }
.pie--2 { margin-top: 30px; padding-top: 0; border-top: 0; }
.pie--2 .k { font-size: 10.5px; }
.btn.ff__btn { display: inline-flex; flex: none; align-items: center; gap: 14px; background: var(--oxido); color: var(--papel-lupa); border: 1px solid var(--oxido); border-radius: 999px; padding: 15px 27px;
  font: 500 16px var(--sans); cursor: pointer; transition: background-color var(--t-micro) var(--curva), color var(--t-micro) var(--curva), border-color var(--t-micro) var(--curva), opacity var(--t-micro) var(--curva); }
.ff__btn .btn__f { font-family: var(--serif); font-size: 20px; line-height: 1; transition: transform var(--t-micro) var(--curva); }
.ff__btn:hover .btn__f { transform: translateX(3px); }
.btn.ff__btn.off { background: transparent; color: var(--t3a); border-color: var(--arena); cursor: not-allowed; }
.btn.ff__btn.off:hover .btn__f { transform: none; }
.ff__btn:disabled { opacity: .6; cursor: progress; }
.ff__btn:focus-visible, .ff__atras:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }
.ff__atras { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px; padding: 0; background: none; border: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta); cursor: pointer; }
.ff__atras:hover { text-decoration: underline; text-underline-offset: 4px; }

/* paso 2: opciones con casilla de tinta; área de escritura de línea inferior que crece */
.ops { display: grid; }
.op { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--arena); cursor: pointer; font-size: 16px; line-height: 22px; color: var(--tinta); }
.op:first-child { border-top: 1px solid var(--arena); }
.op input, .cons input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--tinta); border-radius: 0; background: var(--papel-lupa); cursor: pointer; }
.op input[type="radio"] { border-radius: 50%; }
.op input:checked, .cons input:checked { background: var(--tinta); }
.op input[type="checkbox"]:checked::after, .cons input:checked::after { content: ""; position: absolute; left: 4.5px; top: 1px; width: 4px; height: 9px; border: solid var(--papel-lupa); border-width: 0 2px 2px 0; transform: rotate(42deg); }
.op input[type="radio"]:checked { box-shadow: inset 0 0 0 3px var(--papel-lupa); }
.op input:focus-visible, .cons input:focus-visible { outline: 2px solid var(--petroleo); outline-offset: 3px; }
.ff__escribir { display: block; width: 100%; min-height: 40px; resize: none; overflow: hidden; border: 0; border-bottom: 1px solid var(--arena); border-radius: 0; background: transparent; margin-top: 8px;
  font: 400 19px/28px var(--serif); color: var(--tinta-titular); padding: 0 0 9px; -webkit-appearance: none; appearance: none; }

/* paso 3: campos de línea inferior */
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.campo { position: relative; margin-top: 26px; }
.campo label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3a); margin-bottom: 8px; }
.campo input { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--arena); border-radius: 0; background: transparent; font: 400 19px/26px var(--serif); color: var(--tinta-titular);
  padding: 0 0 9px; -webkit-appearance: none; appearance: none; }
.campo input::placeholder, .ff__escribir::placeholder { color: var(--arena); opacity: 1; }
.campo input:focus, .ff__escribir:focus { outline: none; border-bottom: 2px solid var(--tinta); padding-bottom: 8px; }
.ff [aria-invalid="true"]:not([type="checkbox"]) { border-bottom: 2px solid var(--tinta); padding-bottom: 8px; }
.cons input[aria-invalid="true"] { box-shadow: 0 0 0 1px var(--tinta); }
.campo__error, .ff__error { margin: 6px 0 0; font-size: 13px; line-height: 18px; color: var(--tinta); }
.campo__error:empty, .ff__error:empty { display: none; }
.campo__error--cons { margin-left: 30px; }
.ff__error { margin-top: 14px; }
.cons { display: flex; gap: 12px; align-items: flex-start; margin-top: 28px; font-size: 13.5px; line-height: 20px; color: var(--tinta-2); cursor: pointer; }
.cons input { margin-top: 1px; }

/* cierre */
.fp--cierre { min-height: 470px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fp--cierre:focus { outline: none; }
.sello { display: inline-block; position: relative; border: 3px solid var(--oxido); color: var(--oxido); font-family: var(--mono); font-size: 26px; letter-spacing: .3em; text-transform: uppercase;
  padding: 12px 26px 10px; transform: rotate(-6deg); opacity: .92; }
.sello::after { content: ""; position: absolute; inset: 4px; border: 1px solid var(--oxido); opacity: .7; }
.fp--cierre h4 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.35; color: var(--tinta-titular); margin: 44px 0 0; }
.fp--cierre h4 em { font-style: italic; color: var(--oxido); }
.fp--cierre .nobr { white-space: nowrap; }
.fp--cierre p { margin-top: 14px; font-size: 15.5px; line-height: 24px; color: var(--tinta-2); max-width: 400px; overflow-wrap: anywhere; }
.fp--cierre .res { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--arena); width: 100%; text-align: left; font-family: var(--mono); font-size: 12px; line-height: 20px; letter-spacing: .08em; color: var(--t3a); }
.fp--cierre .res b { color: var(--tinta); font-weight: 500; }
.fp--cierre .res[hidden] { display: none; }

/* disposición: escritorio 380 px + ficha de 648 px (como el mockup); tableta en una columna; móvil a ancho completo */
@media (min-width: 1100px) {
  .contacto { grid-template-columns: 380px minmax(0, 648px); gap: 72px; justify-content: start; }
}
@media (min-width: 900px) and (max-width: 1099.98px) {
  .contacto { grid-template-columns: 1fr; }
  .ficha { max-width: 720px; }
}
@media (max-width: 639.98px) {
  .ficha { margin: 0 calc(-1 * var(--gutter)); border-left: 0; border-right: 0; padding: 26px var(--gutter) 28px; box-shadow: 0 10px 0 var(--arena); }
  .fp__q { font-size: 30px; }
  .preg { flex-wrap: wrap; row-gap: 6px; }
  .preg--3 .fp__q, .rama .fp__q { font-size: 26px; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { min-height: 150px; padding: 15px 16px 14px; }
  .card.on { padding: 14px 15px 13px; }
  .card .top { height: auto; }
  .card img { position: absolute; right: 8px; top: 12px; width: 104px; height: 76px; margin: 0; }
  .card .tit { font-size: 19px; line-height: 1.12; padding-right: 0; margin-top: auto; max-width: calc(100% - 112px); }
  .card .lin { font-size: 14px; line-height: 19px; padding-right: 0; max-width: calc(100% - 112px); margin-top: 4px; }
  .card .ghost { font-size: 130px; bottom: -30px; }
  .card .chk { bottom: 16px; right: 14px; }
  .card.on .chk { bottom: 15px; right: 13px; }
  .pie { flex-wrap: wrap; }
  .pie .ff__btn { margin-left: auto; }
  .dos { grid-template-columns: 1fr; gap: 0; }
  .fp--cierre { min-height: 380px; }
  .fp--cierre h4 { font-size: 28px; margin-top: 36px; }
  .sello { font-size: 22px; }
}

/* «Servicios»: rótulo visible sobre el título de la lámina (mono en tinta con raya, a todo el ancho de la cabecera) */
.lam__k { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.lam__k::before { content: ""; width: 28px; height: 2px; background: var(--tinta); }

/* ===================== TIPOGRAFÍA · VARIANTE 3 (2026-10-19) =====================
 * Source Serif 4 600 SOLO en: claim del hero, frase de la banda premisa, título de la lámina («De la información a la decisión»),
 * título de contacto, mensaje de la lupa y preguntas de la ficha. Interletrado −0,04em en títulos grandes y −0,025em en medianos;
 * tamaños un 10 % menores que antes. La itálica óxido del giro se mantiene.
 * Plus Jakarta Sans (400–700) en todo lo demás (reemplaza a IBM Plex Sans vía --sans). IBM Plex Mono sigue en rótulos chicos. Logo intacto. */
.hero__claim { font-weight: 600; letter-spacing: -.04em; font-size: clamp(41.4px, 10.35vw, 64.8px); }
.v6-banda h2 { font-weight: 600; letter-spacing: -.04em; font-size: clamp(27px, 6.48vw, 50.4px); }
.lam__titulo, .lam__titulo b, .lam__titulo em { font-weight: 600; }
.lam__titulo { letter-spacing: -.04em; font-size: clamp(39.6px, 9.9vw, 86.4px); }
.contacto .ct h2 { font-weight: 600; letter-spacing: -.04em; font-size: clamp(36px, 9vw, 46.8px); }
.contacto .ct h2 em, .lam__titulo em { font-style: italic; font-weight: 600; }
.h-mensaje, .lectura__mensaje { font-weight: 600; letter-spacing: -.025em; }
.lectura__mensaje { font-size: 18px; line-height: 22.5px; }
.fp__q { font-weight: 600; letter-spacing: -.025em; font-size: 32.4px; }
.preg--3 .fp__q, .rama .fp__q { font-size: 27px; }
/* lo que antes iba en serif y ahora va en Jakarta */
.section-title, .regla .abc, .v6 .ghost, .v6 .c .lb .s, .pie6 .ab, .pie6 h3, .pr b, .video6 h2, .pg-salida__txt, .card .ghost, .card .tit,
.ff__btn .btn__f, .ff__escribir, .campo input, .fp--cierre h4 { font-family: var(--sans); }
.regla .abc, .pie6 .ab { font-weight: 700; }
.v6 .ghost, .card .ghost { font-weight: 700; letter-spacing: -.04em; }
.v6 .c .lb .s { font-weight: 500; font-size: 13.5px; letter-spacing: -.01em; }
.pie6 h3 { font-weight: 600; font-size: 25px; line-height: 30px; letter-spacing: -.02em; }
.pr b { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.video6 h2 { font-weight: 600; letter-spacing: -.035em; font-size: clamp(34px, 8vw, 50px); }
.pg-salida__txt { font-weight: 600; font-size: 14.5px; letter-spacing: -.01em; }
.card .tit { font-weight: 600; font-size: 19px; line-height: 1.2; letter-spacing: -.015em; }
.ff__escribir { font-size: 17px; line-height: 26px; }
.campo input { font-size: 17px; line-height: 24px; }
.fp--cierre h4 { font-weight: 600; font-size: 28px; letter-spacing: -.025em; }
.footer6__credito { font-size: 9px; }
@media (min-width: 900px) and (max-width: 1199.98px) {
  .lam__titulo { font-size: 64.8px; line-height: 63px; }
}
@media (min-width: 1100px) {
  .hero__claim { font-size: calc(81.54 * var(--u)); line-height: calc(64.08 * var(--u)); letter-spacing: -.04em; }
}
@media (min-width: 1200px) {
  .v6-banda h2 { font-size: calc(50.4 * var(--q)); line-height: calc(54 * var(--q)); }
  .lam__titulo { font-size: calc(86.4 * var(--q)); line-height: calc(82.8 * var(--q)); }
  .video6 h2 { font-size: calc(50.4 * var(--q)); line-height: calc(52 * var(--q)); }
  .pie6 h3 { font-size: calc(25 * var(--q)); line-height: calc(30 * var(--q)); }
  .footer6__credito { font-size: calc(9 * var(--q)); }
}
@media (max-width: 639.98px) {
  .fp__q { font-size: 27px; }
  .preg--3 .fp__q, .rama .fp__q { font-size: 23.4px; }
  .card .tit { font-size: 17.5px; }
  .fp--cierre h4 { font-size: 25px; }
}

/* paso 2 · «Otros»: espacio para escribir bajo la opción */
.op-otro { padding: 4px 0 10px 30px; border-bottom: 1px solid var(--arena); }
.op-otro[hidden] { display: none; }
.op-otro .ff__escribir { margin-top: 4px; }
.pie--2 .k:empty { display: none; }
.pie--2 { justify-content: flex-end; }