/* ==========================================================
   PIXANAI · hoja única · paleta N3 · modo claro
   Ningún valor de color se escribe fuera del bloque :root.
   Tipografía: Chivo Black (display) + Literata (texto) + JetBrains Mono (datos)
   ========================================================== */
:root{
  color-scheme:light;
  --bg:#F4F6F7; --surface:#FFFFFF; --surface-2:#EAEEF0;
  --ink:#0B0D0F; --muted:#5B6367; --line:#DFE4E6; --line-strong:#C6CFD3;
  --anil:#0E5E85; --anil-soft:#E2EEF4;
  --grana:#B02338; --grana-soft:#F7E4E7;
  --jade:#10784F; --jade-soft:#E1F0EA;
  --on-pigment:#FFFFFF;
  --inv-bg:#0A0C0D; --inv-surface:#14171A; --inv-ink:#F1F3F4; --inv-muted:#939A9E;
  --inv-line:#232729; --inv-anil:#57B0D6; --inv-grana:#F0687D; --inv-jade:#3FC08E;
  --on-inv-pigment:#0A0C0D;
  --display:"Chivo","Arial Black",sans-serif;
  --body:"Literata",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --ease:cubic-bezier(.20,.70,.30,1);
  --ease-pop:cubic-bezier(.34,1.35,.64,1);
  --pad:clamp(1.1rem,4vw,3rem);
  --maxw:1180px;
  --nav-h:0px;

  /* ---- elevación (capas) ----
     Profundidad por composición, no por color: sombra con offset+blur teñida
     al tono frío del canvas, luz de borde de 1px, hairline enmascarado,
     superficie translúcida en los cromos y grano solo en suelos oscuros.
     Estos literales son el respaldo; el bloque @supports de abajo los
     deriva de los tokens con color-mix() y los sobrescribe. Alfas a la
     mitad de una referencia oscura: en canvas claro la sombra dura ensucia. */
  --shade-1:rgb(11 13 15 / .05);
  --shade-2:rgb(11 13 15 / .08);
  --shade-3:rgb(11 13 15 / .13);
  --e1:0 1px 2px var(--shade-1);
  --e2:0 4px 12px -2px var(--shade-2),0 1px 2px var(--shade-1);
  --e3:0 18px 44px -10px var(--shade-3),0 2px 6px -1px var(--shade-2);
  --inv-shade:rgb(11 13 15 / .35);
  --inv-e:0 8px 32px -4px var(--inv-shade);
  --edge:rgb(255 255 255 / .8);
  --inv-edge:rgb(241 243 244 / .10);
  --inv-edge-top:rgb(241 243 244 / .14);
  --glass:rgb(255 255 255 / .88);
  --inv-glass:rgb(20 23 26 / .85);
  --glass-blur:24px;
  --hair:var(--line);
  --inv-hair:rgb(241 243 244 / .18);
  --hair-mask:linear-gradient(90deg,transparent,#000 50%,transparent);
  --grain-a:.045;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --straddle:clamp(1.5rem,6vw,5rem);

  /* ---- sistema de tarjeta único (Fase 2, plan de reconstrucción) ----
     Toda superficie tipo tarjeta del sitio deriva de aquí: la agenda de
     Kiin es la referencia canónica y ya usa estos cuatro tokens. --radius
     es el redondeo de superficie; --r-ctl es el de controles/chips
     pequeños (botones, inputs, badges), que se queda aparte a propósito
     porque una pastilla de 12px de radio se ve como una cápsula. */
  --radius:12px;
  --r-ctl:2px;
  --card-bg:var(--surface);
  --card-border:1px solid var(--line);
  --card-shadow:var(--e2);
  --card-pad:clamp(1.1rem,3vw,1.6rem);

  /* ---- espaciado de sección: valor base, subido de .blk a :root para que
     no viva solo local — .tight/.hush/.peak lo siguen sobrescribiendo ---- */
  --blk-pad:clamp(3rem,8vw,7rem);
}
@supports (color:color-mix(in srgb,red,blue)){
  :root{
    --shade-hue:color-mix(in srgb,var(--ink) 80%,var(--anil));
    --shade-1:color-mix(in srgb,var(--shade-hue) 5%,transparent);
    --shade-2:color-mix(in srgb,var(--shade-hue) 8%,transparent);
    --shade-3:color-mix(in srgb,var(--shade-hue) 13%,transparent);
    --inv-shade:color-mix(in srgb,var(--ink) 35%,transparent);
    --edge:color-mix(in srgb,var(--surface) 80%,transparent);
    --inv-edge:color-mix(in srgb,var(--inv-ink) 10%,transparent);
    --inv-edge-top:color-mix(in srgb,var(--inv-ink) 14%,transparent);
    --glass:color-mix(in srgb,var(--surface) 88%,transparent);
    --inv-glass:color-mix(in srgb,var(--inv-surface) 85%,transparent);
    --inv-hair:color-mix(in srgb,var(--inv-ink) 18%,transparent);
  }
}
@media (max-width:820px){:root{--glass-blur:12px}}
@media (max-width:620px){:root{--straddle:1.25rem}}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;margin:0}
a{color:inherit}
::selection{background:var(--anil-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--anil);outline-offset:2px}
p{margin:0 0 .9rem;max-width:66ch}
img{max-width:100%;height:auto;display:block}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:.7rem 1.1rem;z-index:100;font-family:var(--display);font-weight:700;font-size:.8rem}
.skip:focus{left:.6rem;top:.6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- rejilla editorial con sangrado ---------- */
.eg{display:grid;grid-template-columns:[full-start] minmax(var(--pad),1fr) [main-start] minmax(0,var(--maxw)) [main-end] minmax(var(--pad),1fr) [full-end]}
.eg > *{grid-column:main}
.eg > .full{grid-column:full}

/* ---------- textura de retícula ----------
   Antes era una capa fija sobre TODO el documento y se pintaba encima del
   texto de cualquier sección no posicionada. Ahora es fondo de la sección que
   la pide: `isolation:isolate` crea contexto de apilamiento propio, así el
   ::before con z-index -1 queda encima del color de fondo y DEBAJO del texto. */
.tex{position:relative;isolation:isolate}
.tex::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(to right,var(--line) 0 1px,transparent 1px 48px),
                   repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 48px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 92%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 30%,transparent 92%)}
@media (prefers-reduced-motion:no-preference){.tex::before{opacity:1}}

/* ---------- secciones y suelos ---------- */
/* el padding de sección es un token por elemento: cero style="" de espaciado
   en el HTML. tight/hush/peak lo reasignan; flush-t/flush-b lo anulan por lado. */
.blk{padding:var(--blk-pad) 0;position:relative}
.blk.tight{--blk-pad:clamp(1.8rem,4vw,3rem)}
.blk.flush-t{padding-top:0}
.blk.flush-b{padding-bottom:0}
.g-bg{background:var(--bg)}
.g-white{background:var(--surface)}
.g-grey{background:var(--surface-2)}
.g-inv{background:var(--inv-bg);color:var(--inv-ink)}
/* grano solo en suelos oscuros: un plano de color liso banda en pantalla real;
   al 4.5% se lee como cuarto iluminado. Textura fija, nunca animada, nunca
   background-attachment:fixed, y NUNCA en el mismo nodo que un backdrop-filter. */
.g-inv,footer.site{position:relative;isolation:isolate}
.g-inv::after,footer.site::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);background-size:160px 160px;opacity:var(--grain-a)}
.g-inv .lead,.g-inv .mut{color:var(--inv-muted)}
.g-inv .eb{color:var(--inv-anil)}
.g-inv h2.sec,.g-inv h3.card-t{color:var(--inv-ink)}
.g-inv a{color:var(--inv-ink)}

/* numeral colgante — anclado por su borde derecho al filo de la columna */
.rail{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.1em;margin:0 0 .8rem;display:block}
.g-inv .rail{color:var(--inv-muted)}
@media (min-width:1500px){
  .rail{position:absolute;top:clamp(3rem,8vw,7rem);margin:0;
        right:calc(50% + var(--maxw)/2 + 1.5rem);
        text-align:right;white-space:nowrap;max-width:8.5rem;overflow:hidden}
}

/* ---------- tipos ---------- */
.eb{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--anil);margin:0 0 1rem}
h1.hero{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,7.6vw,5.2rem);line-height:.98;letter-spacing:-.032em;margin:0 0 1.2rem;text-wrap:balance;color:var(--ink)}
h1.hero.sm{font-size:clamp(2.2rem,5.6vw,3.7rem)}
/* palabra destacada del hero · grana, caja alta, 1.00em */
h1.hero .out{position:relative;display:inline-block;line-height:.95;color:var(--grana);font-size:1.00em;letter-spacing:-.004em;text-transform:uppercase}
h2.sec{font-family:var(--display);font-weight:900;font-size:clamp(1.75rem,4.4vw,2.9rem);line-height:1.04;letter-spacing:-.024em;margin:0 0 .85rem;max-width:19ch;text-wrap:balance;color:var(--ink)}
h2.sec.wide{max-width:26ch}
h2.sec.md{font-size:clamp(1.4rem,2.8vw,1.9rem)}
/* páginas de servicio (gracias, 404): el bloque ocupa media pantalla y centra */
.blk.mid{min-height:60vh;align-content:center}
/* heroes de sección (brief 2, niveles 2 y 3): nunca 100vh — quien llega a una
   página interior ya quiere el contenido. Nivel 2 (objeto): clínicas, web,
   desarrollo. Nivel 3 (tipográfico, sin objeto): precios, nosotros. El
   parallax de tres capas queda exclusivo del home. */
.blk.hero-2{min-height:max(520px,68vh);align-content:center}
.blk.hero-3{min-height:max(420px,52vh);align-content:center}
h3.card-t{font-family:var(--display);font-weight:900;font-size:1.16rem;letter-spacing:-.012em;margin:0 0 .4rem;color:var(--ink)}
h4.sub{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--anil);margin:2.6rem 0 .9rem}
.lead{font-size:1.08rem;color:var(--muted);max-width:54ch;margin:0 0 1.8rem}
.lead.wide{max-width:62ch}
.mut{color:var(--muted)}
.legal{max-width:70ch}
.legal h3{font-family:var(--display);font-weight:900;font-size:1.16rem;letter-spacing:-.012em;margin:2.2rem 0 .5rem;color:var(--ink)}
.legal p,.legal li{font-size:.97rem;color:var(--muted)}
.legal ul{padding-left:1.15rem}
.legal li{margin-bottom:.4rem}
.legal strong{color:var(--ink);font-weight:600}

/* ---------- botones ---------- */
.btn{font-family:var(--display);font-weight:700;font-size:.92rem;padding:.74rem 1.5rem;border-radius:var(--r-ctl);border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;position:relative;overflow:hidden;isolation:isolate;transition:color 240ms var(--ease),border-color 180ms var(--ease)}
.btn.btn-1{background:var(--anil);color:var(--on-pigment)}
.btn.btn-1::before{content:"";position:absolute;inset:0;background:var(--ink);transform:translateY(101%);transition:transform 340ms var(--ease);z-index:-1}
.btn.btn-1:hover::before{transform:translateY(0)}
.btn.btn-2{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.btn-2:hover{border-color:var(--ink)}
.btn.btn-sm{font-size:.76rem;padding:.44rem .95rem}
.g-inv .btn.btn-1{background:var(--inv-anil);color:var(--on-inv-pigment)}
.g-inv .btn.btn-1::before{background:var(--inv-ink)}
.g-inv .btn.btn-2{color:var(--inv-ink);border-color:var(--inv-line)}
.g-inv .btn.btn-2:hover{border-color:var(--inv-ink)}
.btnrow{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
/* la promesa de respuesta, pegada al CTA primario: es lo que resuelve la duda
   de «¿y quién me contesta?» justo cuando se decide, no en una página aparte */
.ctanote{font-size:.85rem;color:var(--muted);margin:.75rem 0 0}
.g-inv .ctanote{color:var(--inv-muted)}
/* CTA fijo en móvil: lo inyecta pixanai.js copiando el botón primario de la
   página, así que no puede desincronizarse ni vive en 22 archivos. Se esconde
   mientras hay un CTA real en pantalla (ver stickyCta). Nunca por opacidad:
   aparece y desaparece con [hidden] + transform. */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:.65rem var(--pad) calc(.65rem + env(safe-area-inset-bottom));
  background:var(--glass);backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:var(--e2);
  transform:translateY(100%);transition:transform 240ms var(--ease)}
.mcta.is-on{transform:none}
/* .btn es inline-block, así que se centra con text-align, no con justify-content */
.mcta .btn{display:block;width:100%;text-align:center;padding-top:.85rem;padding-bottom:.85rem}
@media (min-width:768px){.mcta{display:none}}
@media (prefers-reduced-motion:reduce){.mcta{transition:none}}
.go{font-family:var(--display);font-weight:700;font-size:.83rem;color:var(--anil);text-decoration:none;background-image:linear-gradient(var(--anil),var(--anil));background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size 240ms var(--ease)}
.go:hover{background-size:100% 1px}

/* ---------- frase-bisagra ---------- */
.pull{padding:clamp(4rem,11vw,9rem) 0}
.pull p{font-family:var(--display);font-weight:900;font-size:clamp(1.65rem,4.8vw,3.4rem);line-height:1.09;letter-spacing:-.03em;max-width:19ch;margin:0;text-wrap:balance}
.pull .w{color:var(--line-strong);transition:color 420ms var(--ease)}
.pull .w.lit{color:var(--ink)}
.pull .w.acc.lit{color:var(--grana)}
.g-inv .pull .w{color:var(--inv-line)}
.g-inv .pull .w.lit{color:var(--inv-ink)}
.g-inv .pull .w.acc.lit{color:var(--inv-grana)}
.pull .sig{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:1.6rem 0 0;display:block}
.g-inv .pull .sig{color:var(--inv-muted)}

/* ---------- navegación ---------- */
/* cromo translúcido: superficie al 88% + blur, y en vez de borde un hairline
   de 1px enmascarado que se desvanece en los extremos. Sigue sticky, no
   fixed: --nav-h y .subchrome dependen de su altura en flujo. */
.sitenav{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.15);backdrop-filter:blur(var(--glass-blur)) saturate(1.15);padding:.9rem 0;position:sticky;top:0;z-index:30}
.sitenav::after,.subchrome::after,.subnav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);opacity:.75;-webkit-mask-image:var(--hair-mask);mask-image:var(--hair-mask);pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sitenav,.subchrome,.subnav{background:var(--surface)}
}
.prog{position:absolute;left:0;bottom:0;height:2px;background:var(--anil);width:0;max-width:100%;z-index:1}
.sitenav .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
/* ---------- logotipo: isotipo oficial + la palabra ----------
   El isotipo es el archivo oficial (P con la espiral en negativo) recortado en
   alfa. Se aplica como MASCARA y el color lo pone `background` con un token, no
   el PNG: asi un solo archivo sirve en claro y en oscuro, y la paleta sigue
   siendo la unica fuente de color. Es el mismo principio que el `fill:currentColor`
   de los logos de terceros (ver assets/img/LEEME.txt), por mascara porque no hay
   vectorizador con el que trazar la espiral sin perder fidelidad.
   La «AI» va en anil directo: antes lo hacia el JS con data-hw y se veia el salto. */
.logo{font-family:var(--display);font-weight:900;font-size:1.22rem;letter-spacing:-.024em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.42rem}
.logo i{font-style:normal;color:var(--anil)}
.logo__mark{width:1.15em;height:1.15em;flex:none;background:var(--anil);-webkit-mask:url(../img/logo-pixanai-128.png) center/contain no-repeat;mask:url(../img/logo-pixanai-128.png) center/contain no-repeat}
.g-inv .logo__mark,footer.site .logo__mark{background:var(--inv-anil)}
/* sin soporte de mascara no se pinta un cuadro solido: se retira y queda la palabra */
@supports not ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){.logo__mark{display:none}}
.sitenav ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
/* acotado a la lista: si se escribe sobre `.sitenav a` pisa al botón */
.sitenav ul a{font-family:var(--display);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding-bottom:2px;border-bottom:2px solid transparent;transition:color 140ms var(--ease),border-color 140ms var(--ease)}
.sitenav ul a:hover{color:var(--ink)}
.sitenav ul a[aria-current]{color:var(--ink);border-bottom-color:var(--grana)}
.sitenav .cta{margin-left:auto}
.sitenav .lang{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-decoration:none;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--r-ctl);padding:.34rem .5rem;line-height:1;transition:color 140ms var(--ease),border-color 140ms var(--ease)}
.sitenav .lang:hover{color:var(--ink);border-color:var(--ink)}
/* áreas táctiles: en pantallas de dedo ningún enlace baja de 40 px de alto */
@media (max-width:820px){
  .sitenav ul a{display:flex;align-items:center;min-height:40px;padding-bottom:0;border-bottom:0;position:relative}
  .sitenav ul a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--grana)}
  .subnav a{display:flex;align-items:center;min-height:40px;padding-bottom:0;border-bottom:0;position:relative}
  .subnav a.act::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--anil)}
  /* un solo blur en teléfono: el del menú. La franja secundaria va opaca. */
  .subchrome{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  footer.site li a{display:inline-block;padding:.3rem 0}
  .go{display:inline-block;padding:.35rem 0}
  .faq summary{padding:1.1rem 1.3rem}
  .logo{min-height:44px}
}
footer.site li{overflow-wrap:anywhere}

/* en teléfono el menú se vuelve dos filas: [logo · botón] y la lista deslizable
   debajo. Sin esto la lista se parte en tres renglones y se come media pantalla */
@media (max-width:720px){
  .sitenav .in{gap:.7rem 1rem}
  .sitenav .cta{order:2;margin-left:auto}
  .sitenav .lang{order:2;display:inline-flex;align-items:center;min-height:34px}
  .sitenav ul{order:3;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:1.15rem;padding-bottom:.15rem;scrollbar-width:none}
  .sitenav ul::-webkit-scrollbar{display:none}
}
/* .subnav es el marcado anterior (desarrollo, precios, /en/) y se sustituye
   por .subchrome página a página; mientras tanto comparten reglas. */
.subnav{position:sticky;top:var(--nav-h,0px);z-index:20;background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.subnav .in{max-width:var(--maxw);margin:0 auto;padding:.6rem var(--pad);display:flex;gap:1.4rem;overflow-x:auto}
.subnav a{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent;transition:color 140ms var(--ease),border-color 140ms var(--ease)}
.subnav a:hover{color:var(--ink)}
.subnav a.act{color:var(--anil);border-bottom-color:var(--anil)}

/* ---------- franja secundaria por gramática (.subchrome) ----------
   Un componente, cuatro variantes: --tabs (clínicas), --index (desarrollo),
   --divisor (precios), --folio (nosotros), --taller (web). Va DEBAJO del
   menú completo, nunca en su lugar. Estado activo por color y un ::after de
   2px, nunca por opacidad. Ningún enlace baja de 40px de alto.
   Brief 2 §1.3 retiró el rótulo metafórico de la derecha (data-out) en las
   cinco páginas — cinco metáforas distintas no construían un sistema — y la
   Fase 6 borró los 74 data-chrome que lo alimentaban. Queda solo el índice de
   secciones, siempre alineado a la izquierda. */
.subchrome{position:sticky;top:var(--nav-h,0px);z-index:20;background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.subchrome .in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);display:flex;align-items:center;gap:1.2rem;min-height:44px;overflow-x:auto;scrollbar-width:none}
.subchrome .in::-webkit-scrollbar{display:none}
.subchrome ul{display:contents;list-style:none;margin:0;padding:0}
.subchrome ul a{display:inline-flex;align-items:center;min-height:40px;position:relative;white-space:nowrap;text-decoration:none;font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color 140ms var(--ease)}
.subchrome ul a:hover{color:var(--ink)}
.subchrome ul a.act{color:var(--anil)}
.subchrome ul a.act::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--anil)}
.subchrome--index ul a::before{content:attr(data-n);font-family:var(--mono);color:var(--muted);letter-spacing:.06em;margin-right:.45em}

/* ---------- hero asimétrico ---------- */
.heroGrid{display:grid;grid-template-columns:1fr;gap:2.4rem;align-items:end}
@media (min-width:960px){.heroGrid{grid-template-columns:1.15fr .85fr;gap:3.5rem}}
/* clínicas: la proporción se invierte — la tarjeta de Kiin es el objeto del
   hero y necesita más aire que el texto (brief 2: 45/55) */
@media (min-width:960px){.heroGrid--kiin{grid-template-columns:.9fr 1.1fr}}
/* nosotros: hero nivel 3 (brief 2), sin objeto ni retratos a la derecha —
   la duplicación del bloque de equipo se retiró del hero (queda solo en
   Capítulo 02), así que .heroGrid--nosotros ya no reparte dos columnas */
.heroGrid--nosotros{grid-template-columns:1fr;max-width:56rem}
/* clínicas: la tarjeta de Kiin, en perspectiva. Fase 2: se retiró la elipse
   de contacto propia de este envoltorio — la tarjeta ya comparte
   --card-shadow con el resto del sistema, no necesita una sombra aparte. */
.kiin-tilt{position:relative}
/* .rv.in (revelado) también fija transform y empata en especificidad con un
   descendiente de dos clases — .agenda.rv gana siempre, entre o no en vista */
.kiin-tilt .agenda.rv{transform:perspective(1200px) rotateY(-6deg) rotateX(2deg)}
@media (max-width:959.98px){.kiin-tilt .agenda.rv{transform:none}}

/* ---------- tarjetas ----------
   Nada de auto-fit: con 6 tarjetas dejaba 4+2 y la celda vacía enseñaba el
   fondo gris del contenedor. El número de columnas es explícito por tramo,
   siempre divisor del número de tarjetas que lleva cada rejilla.
   Sin sombra a propósito (.cards, .card, .faq, .steps, .team, .fig, .btn):
   si todo está elevado, nada lo está. La elevación la llevan solo el
   producto (.agenda), las cifras (.stat2), .scard y los cromos. */
.cards{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){
  .cards.c2,.cards.c3,.cards.c4,.cards.c6{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .cards.c3,.cards.c6{grid-template-columns:repeat(3,1fr)}
  .cards.c4{grid-template-columns:repeat(4,1fr)}
}
/* atajo de compatibilidad con el marcado anterior */
.grid2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:820px){.grid2{grid-template-columns:1fr 1fr}}
.grid2.plain{background:transparent;border:0;gap:1.6rem}
/* una celda de grid no encoge por debajo de su contenido (min-width:auto): con
   una tabla de 34rem dentro, la página entera desbordaba en teléfono */
.grid2 > *{min-width:0}
.card{background:var(--surface);padding:1.6rem 1.7rem 1.7rem;position:relative;transition:background 220ms var(--ease)}
.card p{font-size:.95rem;margin:0 0 1rem}
.card p:last-child{margin-bottom:0}
.ic{color:var(--anil);display:block}
.ic .frame,.ic .glyph{transition:transform 420ms var(--ease-pop)}
.card:hover .ic .frame{transform:rotate(45deg);transform-origin:12px 12px}
.card:hover .ic .glyph{transform:scale(1.1);transform-origin:12px 12px}
.card-ic{margin-top:.8rem}

/* ---------- imágenes ---------- */
.fig{margin:0;overflow:hidden;background:var(--surface-2);position:relative}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig.band{aspect-ratio:2.4/1}
.fig.side{aspect-ratio:4/3}
.fig.tall{aspect-ratio:3/4}
.fig.sq{aspect-ratio:1/1}
.fig.bord{border:1px solid var(--line)}
@media (max-width:820px){
  .fig.band{aspect-ratio:16/10}
  .fig.tall{aspect-ratio:4/3}
}
figcaption.cap{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.6rem}
.g-inv figcaption.cap{color:var(--inv-muted)}

/* ---------- registro híbrido: escena realista + protagonista low-poly (.esc) ---------- */
.esc{position:relative;isolation:isolate}
.esc__bg{position:absolute;inset:0;z-index:0}
.esc__bg img{width:100%;height:100%;object-fit:cover;display:block}
.esc__lp{position:absolute;z-index:1;pointer-events:none}
.esc__lp img{width:100%;height:auto;display:block}
.esc--c .esc__lp{left:50%;top:50%;transform:translate(-50%,-50%);width:56%}
.esc--r .esc__lp{right:8%;bottom:6%;width:48%}
.esc--l .esc__lp{left:8%;bottom:6%;width:48%}

/* retrato pendiente: no un recuadro punteado de maqueta, sino un hueco
   compuesto — textura de la misma sesión de imagen y las iniciales */
.pslot{aspect-ratio:1/1;border:1px solid var(--line);display:grid;place-content:center;
  background:var(--surface-2) center/cover no-repeat;text-align:center;gap:.35rem}
.pslot b{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,6vw,3.4rem);
  line-height:1;color:var(--line-strong);letter-spacing:-.03em;display:block}
.pslot span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- agenda ---------- */
/* el widget es el producto — referencia canónica del sistema de tarjeta */
.agenda{border:var(--card-border);border-radius:var(--radius);overflow:hidden;background:var(--card-bg);box-shadow:var(--card-shadow)}
.agenda .top{display:flex;justify-content:space-between;padding:.7rem .95rem;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.agenda .slot{display:flex;align-items:center;gap:.75rem;padding:.65rem .95rem;border-bottom:1px solid var(--line);font-size:.92rem;transition:background 180ms var(--ease)}
.agenda .slot:last-child{border-bottom:0}
.agenda .slot:hover{background:var(--anil-soft)}
.agenda time{font-family:var(--mono);font-size:.75rem;color:var(--muted);width:3.3rem;flex:none;font-variant-numeric:tabular-nums}
.agenda .nm{flex:1;color:var(--ink);transition:opacity 300ms var(--ease)}
.agenda .nm.free{color:var(--muted);font-style:italic}
.agenda .st{transition:opacity 300ms var(--ease)}
/* el viraje a jade del slot de las 09:00 en el hero de clínicas (initKiinHero):
   color y fondo, nunca opacidad. Con reduce el JS pinta el estado final de una */
[data-kiin-hero] .slot .badge{transition:background-color 320ms var(--ease),color 320ms var(--ease)}
@media (prefers-reduced-motion:reduce){[data-kiin-hero] .slot .badge{transition:none}}
.badge{font-family:var(--display);font-weight:700;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:.2rem .5rem;border-radius:var(--r-ctl);display:inline-block;white-space:nowrap}
.b-jade{background:var(--jade-soft);color:var(--jade)}
.b-anil{background:var(--anil-soft);color:var(--anil)}
.b-mute{background:var(--surface-2);color:var(--muted)}
.b-grana{background:var(--grana-soft);color:var(--grana)}

/* ---------- respaldo de dos cifras (index, acto 4) ----------
   Nunca auto-fit: dos tarjetas, dos columnas explícitas, sin celda vacía. */
.stat2{display:grid;grid-template-columns:1fr;gap:1px;background:var(--inv-line);position:relative;box-shadow:var(--inv-e)}
/* borde de 1px al 10% como overlay: hereda el radio y no toca el layout */
.stat2::after{content:"";position:absolute;inset:0;border:1px solid var(--inv-edge);border-radius:inherit;pointer-events:none}
@media (min-width:620px){.stat2{grid-template-columns:repeat(2,1fr)}}
/* celdas al 85%: dejan pasar el grano de la sección; luz de borde superior */
.stat2>div{background:var(--inv-glass);padding:1.6rem 1.4rem 1.7rem;box-shadow:inset 0 1px 0 var(--inv-edge-top)}
.stat2 b{font-family:var(--display);font-weight:900;font-size:clamp(2.1rem,4.6vw,3.1rem);line-height:1;color:var(--inv-grana);font-variant-numeric:tabular-nums;display:block;letter-spacing:-.028em}
.stat2 s{text-decoration:none;font-family:var(--display);font-weight:700;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inv-muted);display:block;margin-top:.55rem}

/* ---------- calculadora ---------- */
.calc{display:grid;grid-template-columns:1fr;gap:1px;background:var(--inv-line);border:1px solid var(--inv-line)}
@media (min-width:800px){.calc{grid-template-columns:1.05fr 1fr}}
.calc .in2{background:var(--inv-surface);padding:1.6rem 1.7rem 1.7rem}
/* contenedor de consulta: la cifra se mide contra esta columna, no contra el
   viewport — a 390px un precio de consulta de $2,500 con 8vw ya sacaba la
   página a scroll horizontal */
.calc .out{background:var(--inv-bg);padding:1.6rem 1.7rem 1.7rem;container-type:inline-size}
.fld{margin-bottom:1.1rem}.fld:last-child{margin-bottom:0}
.fld label{font-family:var(--display);font-weight:700;font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inv-muted);display:block;margin-bottom:.34rem}
.fld input{width:100%;max-width:14rem;font-family:var(--mono);font-size:1rem;padding:.55rem .7rem;border:1px solid var(--inv-line);border-radius:var(--r-ctl);background:var(--inv-bg);color:var(--inv-ink);font-variant-numeric:tabular-nums}
.fld input:focus{outline:2px solid var(--inv-anil);outline-offset:1px}
.rlbl{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-muted);margin:0 0 .6rem}
.calc .out p{font-size:.9rem;color:var(--inv-muted);max-width:34ch;margin:0 0 1.15rem}
/* la cifra es el argumento de la página: tamaño de titular, no de dato
   (plan-reconstruccion.md §2.3 punto 7). Dos cosas que hay que respetar:
   1. va DESPUÉS y con el mismo alcance que `.calc .out p` — `.rbig` sola
      tiene menos especificidad, así que la cifra se venía pintando a .9rem
      en gris: el tamaño y la grana nunca ganaban;
   2. se mide en cqw contra su columna, no en vw. El resultado lo escribe el
      visitante y puede llegar a 11 caracteres ($57,600,000): dividir el ancho
      del contenedor entre esos 11 es lo único que garantiza que la página
      nunca salga a scroll horizontal, en cualquier pantalla. */
.calc .out .rbig{font-family:var(--display);font-weight:900;font-size:clamp(2rem,calc(100cqw / 6.4),6rem);line-height:1;font-variant-numeric:tabular-nums;margin:0 0 .85rem;color:var(--inv-grana);letter-spacing:-.03em;max-width:none}
.cmp{border-top:1px solid var(--inv-line);padding-top:.95rem;font-size:.9rem;color:var(--inv-muted);max-width:36ch}
.cmp b{color:var(--inv-ink);font-weight:600}

/* ---------- pasos, integraciones, equipo, faq, precios ---------- */
.steps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps > div{background:var(--surface);padding:1.35rem 1.45rem 1.45rem}
.steps .n{font-family:var(--display);font-weight:900;font-size:2.2rem;line-height:1;color:var(--anil);display:block;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.steps u{text-decoration:none;display:block;width:2rem;border-top:2px solid var(--ink);margin:.8rem 0 .65rem}
.steps b{font-family:var(--display);font-weight:700;font-size:1.03rem;display:block;margin-bottom:.18rem;color:var(--ink)}
.steps span{font-size:.9rem;color:var(--muted)}
.ints{display:flex;flex-wrap:wrap;gap:.55rem}
.ints span{font-family:var(--display);font-weight:700;font-size:.82rem;padding:.44rem .85rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.ints span::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--jade)}
/* Marcas de terceros: monocromas en tinta, nunca en su color de marca (metería
   treinta hex a una paleta de tres) ni en añil (añil = acción, y un chip no es
   clicable). El glifo hereda --ink del propio chip vía currentColor, así que no
   se escribe un solo color aquí. Los SVG van inline porque ni <img src=".svg">
   ni un sprite externo con <use> heredan currentColor. */
.ints svg{width:.95rem;height:.95rem;flex:none;fill:currentColor}
.ints__set > * + *{margin-top:1.15rem}
.ints__cat{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.team{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:760px){.team{grid-template-columns:1fr 1fr}}
.team > div{background:var(--surface);padding:1.5rem 1.6rem 1.6rem}
.team b{font-family:var(--display);font-weight:900;font-size:1.1rem;display:block;color:var(--ink);margin-top:1rem;letter-spacing:-.012em}
.team em{font-style:normal;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--anil);display:block;margin:.2rem 0 .6rem}
.team p{font-size:.92rem;margin:0}
.faq{border:1px solid var(--line);background:var(--surface)}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{font-family:var(--display);font-weight:700;font-size:1.03rem;padding:1rem 1.3rem;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--anil);font-size:1.3rem;line-height:1;transition:transform 260ms var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.3rem 1.1rem}
.faq .a p{margin:0;max-width:62ch;font-size:.95rem;color:var(--muted)}
.trust{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.trust{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.trust.c3{grid-template-columns:repeat(3,1fr)}}
.trust.c1{grid-template-columns:1fr}
.trust > div{background:var(--surface);padding:1.2rem 1.3rem 1.35rem}
.trust b{font-family:var(--display);font-weight:700;font-size:.97rem;display:block;margin-bottom:.22rem;color:var(--ink)}
.trust span{font-size:.89rem;color:var(--muted)}
.tnote{font-size:.88rem;color:var(--muted);margin:.9rem 0 0}

/* ---------- recorrido del dato: tres zonas, cinco paradas ----------
   Clínicas · Acto 4 (plan-reconstruccion.md §2.3 punto 7). .trust lista
   garantías sueltas; esto dibuja el camino y —lo que ninguna otra pieza
   dice— dónde está la frontera: qué tramo es nuestro y cuál no.
   Deliberadamente NO es otra fila numerada: la página ya tiene .pansteps
   (migración) y .tl (mientras tanto). Lo que la distingue es la zona.
   Columnas explícitas: 1 en móvil, 2/2/1 nodos en tres zonas en escritorio. */
.flow{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
@media (min-width:960px){.flow{grid-template-columns:2fr 2fr 1fr;gap:1.1rem}}
.flow__zone{display:flex;flex-direction:column;gap:.55rem;min-width:0;border-top:2px solid var(--line-strong);padding-top:.7rem}
/* la única zona bajo nuestra custodia se marca con el añil de la acción */
.flow__zone--own{border-top-color:var(--anil)}
.flow__zk{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.flow__zone--own .flow__zk{color:var(--anil)}
.flow__nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1.5rem}
@media (min-width:620px){.flow__zone--pair .flow__nodes{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
.flow__n{position:relative;background:var(--surface);border:1px solid var(--line);padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.flow__zone--own .flow__n{background:var(--anil-soft);border-color:var(--anil-soft)}
.flow__n b{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.flow__n span{font-size:.85rem;color:var(--muted)}
/* la flecha vive en el hueco entre nodos: abajo en columna, al lado en fila */
.flow__n::after{content:"\2193";position:absolute;left:50%;bottom:-1.15rem;transform:translateX(-50%);color:var(--anil);font-size:1.05rem;line-height:1}
@media (min-width:620px){
  .flow__zone--pair .flow__n:first-child::after{content:"\2192";left:auto;right:-.95rem;bottom:auto;top:50%;transform:translateY(-50%)}
}
@media (min-width:960px){
  .flow__zone--pair .flow__n:last-child::after{content:"\2192";left:auto;right:-.95rem;bottom:auto;top:50%;transform:translateY(-50%)}
}
/* la última parada del recorrido no apunta a ningún lado */
.flow__zone:last-child .flow__n:last-child::after{content:none}
.flow__note{font-size:.88rem;color:var(--muted);margin:1.5rem 0 0;max-width:64ch}

/* ---------- formulario ----------
   minmax(0,1fr) y min-width:0 son la misma defensa que en .art__rows: el
   min-content de un <select> es su opción más larga, y como .form es un grid,
   esa medida estiraba TODAS sus filas a 334px — a 320px la página de contacto
   salía a scroll horizontal en español (en inglés las opciones son más cortas
   y por eso no se veía). El texto de la opción se recorta con puntos
   suspensivos al cerrar el desplegable, que es el comportamiento normal. */
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:1.05rem;max-width:34rem}
.form .f{display:grid;grid-template-columns:minmax(0,1fr);gap:.34rem;min-width:0}
.form input,.form select,.form textarea{min-width:0}
/* `.form .f > label`, nunca `.form label`: la regla de decisiones.html sobre no
   estilar una etiqueta desnuda dentro de un contenedor. Como `.form label`, esto
   también le caía a la etiqueta de consentimiento —que es un <label> sin campo—
   y pintaba la frase entera del aviso de privacidad en versalitas del tipo de
   titulares, con tracking: ilegible, y su ancho sacaba la página de contacto a
   scroll horizontal a 320px. */
.form .f > label{font-family:var(--display);font-weight:700;font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{font-family:var(--body);font-size:1rem;padding:.68rem .8rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);width:100%}
.form textarea{min-height:7.5rem;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--anil);outline-offset:1px}
.form .row{display:grid;grid-template-columns:minmax(0,1fr);gap:1.05rem}
@media (min-width:640px){.form .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.form .consent{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--body);font-weight:400;font-size:.88rem;letter-spacing:normal;text-transform:none;line-height:1.5;color:var(--muted);max-width:44ch}
.form .consent input{width:1.4rem;height:1.4rem;flex:none;margin-top:.05rem}
/* la frase va envuelta en un <span> y es UN solo ítem flex: suelta, el <a> y los
   dos trozos de texto se volvían tres ítems flex y la frase se partía en
   columnas angostas en vez de fluir como un párrafo */
.form .consent > span{flex:1;min-width:0}
.form .hp{position:absolute;left:-9999px}
.formnote{font-size:.86rem;color:var(--muted);max-width:44ch;margin:0}

/* ---------- pie ---------- */
footer.site{background:var(--inv-bg);color:var(--inv-ink);padding:3rem 0 3.2rem}
footer.site .fcols{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-bottom:2.2rem}
@media (min-width:820px){footer.site .fcols{grid-template-columns:repeat(4,1fr)}}
footer.site h5{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-anil);margin:0 0 .7rem}
footer.site ul{list-style:none;margin:0;padding:0;font-size:.91rem}
footer.site li{margin-bottom:.34rem;color:var(--inv-muted)}
footer.site li a{color:var(--inv-muted);text-decoration:none;transition:color 140ms var(--ease)}
footer.site li a:hover{color:var(--inv-ink)}
footer.site .firma{border-top:1px solid var(--inv-line);padding-top:1.3rem;font-size:.87rem;color:var(--inv-muted);display:flex;flex-wrap:wrap;gap:.5rem 1.6rem}
footer.site .firma .brand{color:var(--inv-ink);font-family:var(--display);font-weight:700}

/* ---------- revelado ---------- */
.rv{opacity:0;transform:translateY(10px)}
.rv.in{opacity:1;transform:none;transition:opacity 560ms var(--ease),transform 560ms var(--ease)}
.st1{transition-delay:70ms}.st2{transition-delay:140ms}.st3{transition-delay:210ms}.st4{transition-delay:280ms}

/* ==========================================================
   ACTOS — index.html (poster tipográfico) y clinicas.html
   (superficie viva). Nombres de dispositivo propios del
   proyecto: data-fold, data-reveal, data-pan, data-kiin-*.
   Nunca el prefijo data-sc-*, que pertenece al motor externo
   evaluado y descartado (ver commit 8e74035).
   ========================================================== */

/* ---------- ritmo de sección ---------- */
.blk.hush{--blk-pad:clamp(4.5rem,12vw,8rem)}
.blk.peak{--blk-pad:clamp(5rem,14vw,10rem)}

/* ---------- a caballo (straddle) ----------
   El widget es el último hijo de su sección; la sección termina justo en él
   (sin padding inferior) y el widget SOBRESALE --straddle px por margen
   negativo sobre la frontera con la siguiente, que reserva el hueco con
   padding. Un solo número (--straddle) que leen ambos lados. La sección de
   arriba sube en z-index para que la de abajo no la tape. El .rv va en el
   hijo, no aquí. (Con transform quedaba un hueco encima del widget.) */
.blk.has-straddle{z-index:2;padding-bottom:0}
.straddle{position:relative;z-index:2;margin-bottom:calc(var(--straddle) * -1)}
/* Fase 2 del plan de reconstrucción: las dos instancias de .agenda (esta del
   hero y la del acto 3) comparten ahora --card-shadow — antes esta subía a
   --e3 con una elipse propia; la sombra de contacto del token ya alcanza. */
.blk.after-straddle{padding-top:calc(var(--blk-pad) + var(--straddle))}

/* el diorama de tres planos (desarrollo, acto 1) se retiró en el brief 2:
   fuera los dos planos fotográficos (dio-fondo/dio-frente) y el parallax —
   ese mecanismo queda exclusivo del home. El objeto low-poly (lp-dio-sistema)
   sigue en pie, ahora en flujo dentro de .heroGrid como en las demás páginas
   de nivel 2. dio-fondo-*/dio-frente-* quedan sin uso, ver LEEME.txt.
   etiqueta de museo: el mismo esquema de 4 campos que el riel, sin excepciones */
.tag4{display:grid;grid-template-columns:auto 1fr;gap:.15rem .9rem;margin:1.4rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--muted);max-width:34rem}
.tag4 dt{text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;padding-top:.12rem;white-space:nowrap}
.tag4 dd{margin:0;color:var(--ink)}
@media (min-width:620px){.tag4{grid-template-columns:auto 1fr auto 1fr;column-gap:.9rem}.tag4 dt:nth-of-type(odd){grid-column:1}.tag4 dd:nth-of-type(odd){grid-column:2}.tag4 dt:nth-of-type(even){grid-column:3}.tag4 dd:nth-of-type(even){grid-column:4}}

/* ---------- galería (desarrollo): colección, riel, placa ----------
   Gramática Gallery/catalog: cada objeto lleva el mismo esquema de etiqueta
   (.tag4), el riel es la espina dorsal (pan: scroll vertical → viaje lateral)
   y el índice fijo (.subchrome--index) se va llenando con lo ya visto. */
.gal{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.4rem}
@media (min-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}
.obj{background:var(--surface);padding:1.2rem 1.2rem 1.4rem;display:grid;gap:1rem;align-content:start}
.obj .fig{border:1px solid var(--line)}
.obj .fig.art{aspect-ratio:auto;border:0}
.obj .tag4{margin:0;max-width:none;grid-template-columns:auto 1fr}
.obj .tag4 dt,.obj .tag4 dd{grid-column:auto}
.obj .go{justify-self:start}
.g-inv .tag4 dt{color:var(--inv-muted)}
.g-inv .tag4 dd{color:var(--inv-ink)}
.bignum{font-family:var(--display);font-weight:900;font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:-.02em;color:var(--ink);margin:0 0 1.2rem;display:flex;align-items:baseline;gap:.55rem;flex-wrap:wrap}
.bignum b{font-size:clamp(3rem,7vw,4.6rem);line-height:1;color:var(--grana);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* precios, hero (brief 2): el dato es más fuerte que cualquier imagen — mismo
   componente .bignum, apilado (número, luego etiqueta) y a mayor escala. */
.pxbig{display:flex;flex-wrap:wrap;gap:clamp(2rem,6vw,4.5rem);margin-top:1.6rem}
.bignum--hero{display:block;margin:0}
.bignum--hero b{display:block;font-size:clamp(4rem,9vw,7rem)}
.bignum--hero span{display:block;margin-top:.5rem;font-family:var(--body);font-weight:400;font-size:1rem;color:var(--muted)}
/* riel: por defecto es una lista que se desliza a mano (teléfono, reduce);
   en escritorio se fija y el scroll vertical la desplaza en X con transform */
.railwrap{position:relative}
.railhead{display:flex;align-items:end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:1.4rem}
.railhead .sec{margin-bottom:0}
.railbar{position:relative;height:2px;background:var(--line);flex:1 1 12rem;max-width:22rem;margin-bottom:.6rem;overflow:hidden}
.railfill{position:absolute;inset:0;background:var(--anil);transform:scaleX(0);transform-origin:0 center;transition:transform 60ms linear}
.railtrack{list-style:none;margin:0;padding:0 0 .8rem;display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.railitem{flex:0 0 min(28rem,76vw);scroll-snap-align:start;background:var(--surface);border:1px solid var(--line);padding:1rem 1rem 1.2rem;display:grid;gap:.75rem;align-content:start;transition:border-color 220ms var(--ease)}
.railitem .fig{aspect-ratio:3/2;border:1px solid var(--line)}
.railitem .fig.art{aspect-ratio:auto;border:0}
.railitem .n{font-family:var(--mono);font-size:.66rem;color:var(--muted);letter-spacing:.12em}
.railitem b{font-family:var(--display);font-weight:900;font-size:1.08rem;color:var(--ink);letter-spacing:-.012em}
.railitem p{font-size:.92rem;color:var(--muted);margin:0}
.railitem.act{border-color:var(--anil)}
.railitem.act .n{color:var(--anil)}

/* ---------- artefactos: piezas de interfaz reales, no objeto abstracto ----------
   Fase 2 (auditoria-pixanai.md §0/§4): sustituyen la foto esc-mesa repetida.
   Misma tarjeta blanca/borde fino que ya usa Kiin (.agenda es la referencia),
   pero sobre var(--surface-2) para leerse como una capa anidada dentro del
   marco de .railitem. Sin imágenes: todo es HTML real, así que no envejece,
   se traduce y pesa casi nada. */
.art{border:var(--card-border);background:var(--surface-2);min-height:11.5rem;padding:.85rem .9rem 1rem;display:flex;flex-direction:column;gap:.55rem}
.art__bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem .8rem;flex-wrap:wrap}
.art__tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.art__stamp{font-family:var(--mono);font-size:.6rem;color:var(--muted)}

/* panel de operación: dos avatares con permiso distinto + filas de pedidos */
.art__avs{display:flex;gap:.3rem}
.art__av{width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-content:center;font-family:var(--display);font-weight:700;font-size:.6rem;color:var(--on-pigment);flex:none}
.art__av--jade{background:var(--jade)}
.art__av--anil{background:var(--anil)}
/* minmax(0,1fr) + min-width:0 no son decorativos: la pista implícita de un
   grid se dimensiona al min-content de la fila, así que a 320px la fila salía
   308px de ancho dentro de una tarjeta de 239px y sacaba la página a scroll */
.art__rows{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:.3rem}
.art__rows li{display:flex;align-items:center;gap:.5rem;padding:.32rem .45rem;background:var(--surface);border:1px solid var(--line);font-size:.78rem;min-width:0}
.art__id{font-family:var(--mono);color:var(--muted);width:3.2rem;flex:none}
.art__who{flex:1;min-width:0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tarjeta de reporte: gráfica de barras + marca de tiempo */
.art__chart{height:5.2rem;display:flex;align-items:flex-end;gap:.35rem;padding-top:.2rem}
.art__chart span{flex:1;background:var(--anil);height:calc(var(--h) * 1%);min-height:8%}

/* portal de cliente: folio grande + estado */
.art__folio{flex:1;display:grid;place-content:center;justify-items:center;gap:.4rem;text-align:center}
.art__foliolbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.art__folionum{font-family:var(--display);font-weight:900;font-size:1.9rem;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* hilo de whatsapp: burbuja entrante, respuesta, pase a persona */
.art__bubble{max-width:88%;padding:.45rem .65rem;font-size:.8rem;line-height:1.35;border-radius:var(--r-ctl)}
.art__bubble--in{align-self:flex-start;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.art__bubble--out{align-self:flex-end;background:var(--anil-soft);color:var(--ink)}
.art__check{margin-left:.35rem;color:var(--anil);font-size:.7rem}
.art__handoff{font-family:var(--mono);font-size:.62rem;color:var(--muted);align-self:flex-start;margin-top:auto}

/* par de herramientas conectadas */
.art__pair{flex:1;display:flex;align-items:center;justify-content:center;gap:.7rem}
.art__tool{font-family:var(--display);font-weight:700;font-size:.85rem;padding:.5rem .8rem;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--r-ctl);color:var(--ink)}
.art__sync{color:var(--anil);font-size:1.15rem;flex:none}

/* galería (Objeto 02/03): un sistema visto como módulos, un agente visto
   por sus garantías — distintos del riel de abajo, que hace zoom a cada
   módulo uno por uno. Sustituyen esc-mesa + un solo low-poly cada uno. */
.art__modgrid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.art__mod{display:flex;flex-direction:column;gap:.4rem;background:var(--surface);border:1px solid var(--line);padding:.7rem .65rem;font-family:var(--display);font-weight:700;font-size:.78rem;color:var(--ink)}
.art__modicon{width:1.1rem;height:1.1rem;background:var(--anil-soft);border:1px solid var(--anil)}
.art--guardrails .cklist{gap:.6rem}

/* ---------- antes y después: misma información, hoja de cálculo vs. panel ----------
   Desarrollo · La sala (auditoria-pixanai.md §4). El lado «antes» reutiliza
   .badge b-grana (definido, sin uso hasta ahora) para la única celda confusa
   de la fila — es el único acento en grana de esta página. */
.compare__grid{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1.3rem;align-items:center}
@media (min-width:768px){.compare__grid{grid-template-columns:1fr auto 1fr}}
.compare__side{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.compare__lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.compare__arrow{color:var(--anil);font-size:1.3rem;justify-self:center;display:none}
@media (min-width:768px){.compare__arrow{display:block}}
.compare__sheet{border:var(--card-border);background:var(--surface);font-family:var(--mono);font-size:.76rem;overflow:hidden}
.compare__row{display:grid;grid-template-columns:1.3fr .8fr .9fr 1fr;gap:.4rem;padding:.42rem .6rem;border-bottom:1px solid var(--line);align-items:center}
.compare__row > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare__row:last-child{border-bottom:0}
.compare__row--head{color:var(--muted);text-transform:uppercase;font-size:.6rem;letter-spacing:.06em;background:var(--surface-2)}
.compare__strike{text-decoration:line-through;color:var(--muted)}
.compare__note{color:var(--muted);font-style:italic}
.compare__panel{min-height:0}

/* ---------- la entrada de la migración: tres fuentes sueltas, una agenda ----------
   Clínicas · Acto 5 (plan-reconstruccion.md §2.3 punto 7). El acto ya explica
   los cuatro pasos; lo que faltaba era ver el antes y el después del dato.
   Reutiliza .compare__grid/__side/__lbl/__arrow tal cual y .art/.art__rows del
   lado de salida — aquí solo viven las tres fuentes de entrada. */
.mig__stack{display:grid;gap:.6rem}
.mig__src{border:var(--card-border);background:var(--surface);padding:.65rem .75rem .75rem;display:grid;gap:.4rem;min-width:0}
.mig__srck{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mig__rows{display:grid;gap:.22rem;font-family:var(--mono);font-size:.74rem;color:var(--muted)}
.mig__rows span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* la libreta: apuntes reales sobre renglones. La cursiva es la itálica real
   de Literata — nada de simular una manuscrita que el sistema no tiene */
.mig__ruled{display:grid;gap:.28rem}
.mig__ruled i{display:block;border-bottom:1px solid var(--line);padding-bottom:.2rem;font-size:.82rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* el hilo se lee como conversación, no como campo de formulario: burbujas
   angostas y encontradas, no una caja de ancho completo */
.mig__thread{display:flex;flex-direction:column;gap:.3rem}
.mig__thread .art__bubble{max-width:74%}
.mig__out{min-height:0;background:var(--surface)}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .railwrap{height:400vh}
  .railstage{position:sticky;top:calc(var(--nav-h,0px) + 44px);height:calc(100vh - var(--nav-h,0px) - 44px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .railtrack{overflow:visible;scroll-snap-type:none;padding-bottom:0;transition:transform 60ms linear}
  .railitem{flex-basis:28rem}
}
/* placa que se inclina con el puntero (tilt 6°): solo puntero fino, nunca con reduce */
.placa{background:var(--surface);border:1px solid var(--line);padding:1px;transition:transform 160ms var(--ease);transform-style:preserve-3d}
.placa .steps{border:0}
/* ---------- desarrollo, acto 5: duración de cada paso ----------
   Diagrama con datos, no adorno: las semanas salen literalmente del texto
   de las tarjetas (una / dos / de cuatro a seis / continuo). Lo cerrado va
   en añil pleno; la variación del paso 03 y el soporte, en añil suave.
   Cada barra fija su tramo en una clase, nunca en un style="". Bajo 620px
   no se dibuja: la escala de nueve semanas se rompe y el texto de las
   tarjetas ya lleva la información completa (por eso también aria-hidden). */
.dur{display:none}
@media (min-width:620px){
  .dur{display:grid;gap:.4rem;padding:1.2rem 1.45rem .25rem;border-bottom:1px solid var(--line)}
  .dur__scale,.dur__row{display:grid;grid-template-columns:2.8rem repeat(9,1fr) 5rem;align-items:center;gap:0 .25rem}
  .dur__scale b{font-family:var(--mono);font-weight:400;font-size:.62rem;color:var(--muted);text-align:center}
  .dur__scale b:last-child{text-align:left;letter-spacing:.08em}
  .dur__k{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--muted)}
  .dur__b{height:8px;border-radius:var(--r-ctl);background:var(--anil)}
  .dur__b--1{grid-column:2/3}
  .dur__b--2{grid-column:3/5}
  .dur__b--3{grid-column:5/9}
  /* el rango «de cuatro a seis» se dice en añil suave, no se inventa un final */
  .dur__b--3v{grid-column:9/11;background:var(--anil-soft)}
  /* el soporte empieza donde termina la obra y no cierra */
  .dur__b--4{grid-column:11/12;background:var(--anil-soft);position:relative}
  .dur__b--4::after{content:"\2192";position:absolute;right:-.95rem;top:50%;transform:translateY(-50%);color:var(--anil);font-size:.9rem;line-height:1}
}
/* índice de objetos: lo ya visto se queda en tinta plena (la etiqueta que se queda) */
.subchrome ul a.seen{color:var(--ink)}
.subchrome ul a.seen::before{color:var(--ink)}

/* ---------- el taller (web): mundo continuo, escenario fijo, cinco paradas ----------
   Gramática Continuous world, hecha a mano: un solo escenario (la página que se
   construye) queda pegado en su columna mientras las cinco paradas pasan por la
   otra. Movimiento firma «el ensamble»: un wireframe SVG se dibuja con el
   scroll (stroke-dashoffset desde --k1..--k5, una variable por parada) y el
   recorte low-poly lo rellena de abajo hacia arriba (clip en el <img>, nunca en
   lo que observa el IntersectionObserver). El estado BASE es todo dibujado
   (--k*:1): teléfono y reduce lo heredan sin regla extra; solo escritorio sin
   reduce arranca en 0 y deja que el JS escriba el avance. */
.taller{position:relative;display:grid;grid-template-columns:1fr}
.taller__hero{display:grid;align-content:center;padding:clamp(3rem,8vh,5rem) 0 clamp(2rem,6vh,3.5rem)}
.taller__stage{display:grid;place-items:center;padding:1rem 0 2rem}
.taller__obj{position:relative;width:100%;max-width:640px;aspect-ratio:4/3;transform-style:preserve-3d;transition:transform 160ms var(--ease);--tp:1;--k1:1;--k2:1;--k3:1;--k4:1;--k5:1}
/* la retícula es la mesa de dibujo del escenario (el escenario ES el hero de esta página) */
.taller__obj.tex::before{-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 56%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 56%,#000 25%,transparent 100%)}
.taller__wire,.taller__plane{position:absolute;inset:0;width:100%;height:100%;display:block}
.taller__wire path,.taller__wire rect,.taller__wire line{fill:none;stroke:var(--anil);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));transition:stroke-dashoffset 60ms linear}
.taller__wire [data-wp="0"]{--k:1}
/* el marco base (siempre visible, sin scroll) se dibuja una sola vez al
   cargar la página — la única animación del hero de Web, ajena al scroll de
   los cinco pasos de abajo (eso ya viene de --k1..--k5, sin cambios). */
@media (prefers-reduced-motion:no-preference){
  .taller__wire [data-wp="0"] rect{animation:wire-draw-in 900ms var(--ease) both}
  @keyframes wire-draw-in{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
}
.taller__wire [data-wp="1"]{--k:var(--k1)}
.taller__wire [data-wp="2"]{--k:var(--k2)}
.taller__wire [data-wp="3"]{--k:var(--k3)}
.taller__wire [data-wp="4"]{--k:var(--k4)}
.taller__plane img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;clip-path:inset(calc((1 - var(--k5)) * 100%) 0 0 0);transition:clip-path 60ms linear}
/* la barra de direcciones: el dominio se teclea en la parada 4; el punto pasa a jade (estado confirmado) al quedar en línea */
.taller__url{position:absolute;left:3%;top:2%;display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink)}
.taller__url span{display:inline-block;clip-path:inset(0 calc((1 - var(--k4)) * 100%) 0 0);transition:clip-path 60ms linear}
.taller__live{width:.55rem;height:.55rem;border-radius:50%;background:var(--line-strong);transition:background 300ms var(--ease);flex:none}
.taller__stage.live .taller__live{background:var(--jade)}
.taller__steps{display:grid}
.wp{display:grid;align-content:center;gap:.5rem;padding:clamp(2.5rem,7vh,4.5rem) 0}
.wp .sec{margin-bottom:.2rem}
.wp .lead{max-width:34rem}
/* maqueta de página en miniatura, el mismo elemento evolucionando cinco veces
   junto a cada paso — sustituye los cinco low-poly independientes de .wp__prop
   (auditoria-pixanai.md §3). El escenario grande de al lado (.taller__wire)
   ya cuenta la misma historia a escala; esta es su versión de bolsillo. */
.wpmock{display:flex;flex-direction:column;gap:.28rem;width:min(200px,46vw);aspect-ratio:4/3;margin:0 0 .6rem;border:var(--card-border);background:var(--surface);padding:.5rem}
.wpmock__bar{display:flex;align-items:center;gap:.3rem;font-family:var(--mono);font-size:.5rem;color:var(--muted);padding-bottom:.3rem;margin-bottom:.1rem;border-bottom:1px solid var(--line)}
.wpmock__dot{width:.32rem;height:.32rem;border-radius:50%;background:var(--line-strong);flex:none}
.wpmock__dot--live{background:var(--jade)}
.wpmock__row{display:flex;gap:.28rem;flex:1}
.wpmock__row--col{flex-direction:column;gap:.22rem}
.wpmock__b{flex:1;background:var(--surface-2)}
.wpmock__b--hero{flex:0 0 26%}
.wpmock__b--fill{background:var(--anil-soft)}
.wpmock__b--jade{background:var(--jade-soft)}
.wpmock__lines{display:flex;flex-direction:column;gap:.16rem;padding:.18rem}
.wpmock__line{height:2px;background:var(--line-strong)}
.wpmock__line--60{width:60%}
.wpmock__line--80{width:80%}
.wpmock__field{flex:1;background:var(--surface);border:1px solid var(--line-strong)}
.wpmock__btn{align-self:flex-start;padding:.14rem .5rem;background:var(--anil);font-family:var(--display);font-weight:700;font-size:.5rem;color:var(--on-pigment)}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .taller{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto auto;column-gap:clamp(2rem,5vw,5rem)}
  /* brief 2: hero de nivel 2, nunca 100vh — misma fórmula que .blk.hero-2.
     El escenario fijo de al lado conserva su propia altura de sobra (el
     recorrido lo marcan los cinco pasos de abajo, no esta fila). */
  .taller__hero{grid-column:1;grid-row:1;min-height:max(520px,68vh)}
  .taller__stage{grid-column:2;grid-row:1/3;position:sticky;top:calc(var(--nav-h,0px) + 44px);height:calc(100vh - var(--nav-h,0px) - 44px);align-self:start;padding:0}
  .taller__steps{grid-column:1;grid-row:2}
  .wp{min-height:100vh}
  .taller__obj{--tp:0;--k1:0;--k2:0;--k3:0;--k4:0;--k5:0}
}
/* franja de paradas: un punto por parada que se enciende al pasar (distinta del índice numerado) */
.subchrome--taller ul a{gap:.5rem}
.subchrome--taller ul a::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--line-strong);transition:background 200ms var(--ease);flex:none}
.subchrome--taller ul a.seen::before{background:var(--ink)}
.subchrome--taller ul a.act::before{background:var(--anil)}
/* el cierre: el acta de entrega — cuatro líneas que se marcan al entrar y un sello */
.acta{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.55rem;max-width:44ch}
.acta__i{position:relative;padding-left:2rem;font-size:1.02rem;line-height:1.5;color:var(--inv-muted);transition:color 300ms var(--ease)}
.acta__i::before{content:"";position:absolute;left:0;top:.3em;width:1rem;height:1rem;border:1px solid var(--inv-line);transition:background 300ms var(--ease),border-color 300ms var(--ease)}
.acta__i.in{color:var(--inv-ink)}
.acta__i.in::before{background:var(--inv-anil);border-color:var(--inv-anil)}
.stamp{display:inline-grid;gap:.15rem;border:2px solid var(--inv-jade);color:var(--inv-jade);padding:.55rem .85rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 1.8rem;transform-origin:50% 50%}
.stamp.rv{transform:rotate(-5deg) scale(1.35)}
.stamp.rv.in{transform:rotate(-5deg) scale(1);transition:opacity 320ms var(--ease),transform 420ms var(--ease-pop)}
.stamp__d{color:var(--inv-ink);letter-spacing:.06em;text-transform:none}

/* ---------- plano low-poly del hero (.hp) ----------
   Brief 2 (2026-09-03): el registro híbrido foto+low-poly de hero (.hbg, y las
   variantes .hp--precios/.hp--nosotros que se apoyaban en él) queda retirado —
   cero fotografía en los heroes de sección, fondo plano + retícula (.tex) en
   su lugar. .hp sigue en pie para el objeto de desarrollo y el diorama del
   home; el plano de precios y el de nosotros quedaron sin uso (ver LEEME.txt). */
.blk.has-hp{position:relative;overflow:clip}
.blk.has-hp > div:not(.hp){position:relative;z-index:1}
.hp{pointer-events:none;user-select:none}
.hp picture{display:block}
.hp img{display:block;width:100%;height:auto;max-width:none}
.hp--abs{position:absolute;z-index:0;right:max(var(--pad),calc(50% - var(--maxw) / 2));top:50%;transform:translateY(-50%);width:clamp(260px,30vw,460px)}
.hp--abs [data-tilt]{transition:transform 160ms var(--ease);transform-style:preserve-3d}
/* desarrollo: el objeto en flujo dentro de .heroGrid, entero dentro del
   encuadre (antes vivía cortado en la esquina del diorama fotográfico) */
.hp--desarrollo{width:min(100%,420px);justify-self:end;align-self:end}
@media (max-width:959.98px){
  .hp--abs{position:static;transform:none;width:min(60vw,320px);margin:1.6rem 0 0}
  .hp--desarrollo{width:min(60vw,320px);justify-self:start}
}
/* ---------- hero del home: «se arma solo» (2026-09-03, sin foto) ----------
   Único hero sin registro híbrido: tres capas 100% CSS/low-poly, sin ninguna
   foto. La profundidad cuenta la historia (fragmentos sueltos → núcleo
   ensamblado → resultados terminados), no una escena fotográfica. El plano
   `.hbg`/`.hp--abs` de arriba y `lp-index-sistema` quedan sin usar en esta
   página (siguen sirviendo a las demás), ver LEEME.txt.
   z-index: capa 1 (0) → núcleo (10) → texto (20) → tarjetas (30). Las
   distancias de parallax viven en variables (--hh-l1..--hh-l3) para que el
   breakpoint móvil y el bloque de reduced-motion las reescriban sin duplicar
   los @keyframes. */
/* la altura descuenta el menú pegajoso: con `100vh` la sección empezaba debajo
   de un nav de ~71px y por tanto su borde inferior caía SIEMPRE bajo el pliegue,
   así que el recorte de la capa 3 —el criterio 1 del brief, «sin esto el efecto
   no existe»— no se veía nunca. Con svh el borde inferior aterriza en el pliegue
   y el recorte queda a la vista desde que carga la página. */
.hero__stage{position:relative;isolation:isolate;overflow:hidden;contain:paint;
  height:clamp(640px,calc(100svh - var(--nav-h,72px)),900px);
  --hh-l1:25px;--hh-l2:60px;--hh-text:40px;--hh-l3:110px}
.hero__tex{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:repeating-linear-gradient(to right,color-mix(in srgb,var(--anil) 5%,transparent) 0 1px,transparent 1px 32px),
                   repeating-linear-gradient(to bottom,color-mix(in srgb,var(--anil) 5%,transparent) 0 1px,transparent 1px 32px);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%)}
.hero__layer{position:absolute;pointer-events:none;user-select:none;will-change:transform}
/* capa 1 — fragmentos: 1.1x de escala (inset:-5%) para que el desplazamiento nunca descubra un borde */
.hero__layer--1{inset:-5%;z-index:0}
.hero__layer--1 img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;filter:blur(3px) saturate(.4);opacity:.5}
/* capa 2 — el núcleo: misma fórmula de alineación a la derecha que .hp--abs (index, antes de este cambio) */
.hero__layer--2{z-index:10;right:max(var(--pad),calc(50% - var(--maxw) / 2));top:50%;transform:translateY(-50%);width:clamp(280px,34vw,480px)}
.hero__layer--2 picture{display:block;position:relative}
.hero__layer--2 img{display:block;width:100%;height:auto;max-width:none}
.hero__shadow{position:absolute;left:50%;bottom:-4%;width:70%;height:16%;z-index:-1;transform:translateX(-50%);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--anil) 18%,transparent),transparent 70%)}
/* halos del hover de menú → elemento del núcleo. hero-layer-2-core (nube + rack +
   monitor) ya no es una pila vertical de tres bloques iguales, así que cada zona
   tiene su propio rectángulo en vez de una banda horizontal compartida: nube
   (arriba) = clínicas, rack (abajo-izquierda) = desarrollo, monitor (derecha) = web */
.hero__hi{position:absolute;opacity:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse at center,var(--anil-soft),transparent 72%);
  transition:opacity 240ms var(--ease-pop)}
.hero__hi.is-active{opacity:1}
.hero__hi--clinicas{left:6%;right:25%;top:6%;height:38%}
.hero__hi--desarrollo{left:20%;right:57%;top:54%;height:33%}
.hero__hi--web{left:50%;right:4%;top:52%;height:22%}
/* texto — grid-column:main como .dio__copy, no absoluto: se centra solo en la fila fija de .hero__stage */
.hero__text{grid-column:main;position:relative;z-index:20;align-self:center;max-width:min(52%,42rem)}
@media (max-width:959.98px){.hero__text{max-width:none}}
.hero__text .lead{margin-bottom:1.4rem}
/* subtítulo del hero: dice en palabras llanas —las que la gente teclea— lo que
   el H1 dice en poético, y le da a cada página el par H1→H2 que no tenía.
   Deliberadamente por DEBAJO del titular y en cuerpo pequeño: el brief del hero
   prohíbe competir con el H1, que es justo lo que hacía la antigua eyebrow
   encima. No es display: no lleva el peso 900 ni el tracking del titular. */
.subhead{font-family:var(--display);font-weight:700;font-size:clamp(.95rem,1.5vw,1.08rem);
  line-height:1.35;color:var(--muted);margin:.85rem 0 0;max-width:46ch;letter-spacing:0}
.g-inv .subhead{color:var(--inv-muted)}
.subhead + .lead{margin-top:.9rem}
/* capa 3 — tarjetas de resultado: HTML real, recortadas contra el borde inferior */
.hero__layer--3{inset:auto 0 0 0;z-index:30}
.hero__cards{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:space-between;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);transform:translateY(32%)}
/* el brief pedía filter:blur(1px) aquí — se quita: son datos reales (hora, dominio,
   chat) y el desenfoque, aunque sutil, no aporta nada y sí resta legibilidad */
.hero__card{flex:1 1 200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--e1);padding:1rem 1.1rem}
.hero__bar{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;color:var(--ink);margin:0 0 .8rem}
.hero__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--jade);flex:none}
.hero__slot{display:flex;align-items:baseline;gap:.35rem;font-family:var(--mono);font-size:.85rem;color:var(--ink);margin:0 0 .8rem}
.hero__slot time{font-variant-numeric:tabular-nums}
.hero__status{margin:0}
.hero__bubble{font-family:var(--body);font-size:.85rem;padding:.5rem .75rem;border-radius:10px;margin:0 0 .5rem;max-width:90%}
.hero__bubble--in{background:var(--surface-2);color:var(--ink)}
.hero__bubble--out{background:var(--anil-soft);color:var(--ink);margin:0 0 0 auto}
.hero__seen{color:var(--anil);font-size:.7rem}
/* Parallax: el plan original prefería animation-timeline:view() con este bloque
   de @keyframes, con el JS de pixanai.js (initHomeHero) solo como respaldo. Se
   retiró: verificado con scroll real (rueda del mouse, no solo scrollTo sintético)
   que el navegador deja el timeline congelado a medio progreso sin importar cuánto
   se avance — el propio dueño confirmó lo mismo en su navegador. Como la animación
   CSS activa gana siempre sobre el transform inline que escribe el JS, el resultado
   era CERO parallax, no un respaldo silencioso. La ganancia de rendimiento de
   animation-timeline no vale nada si no se mueve: el rAF de siempre (mismo patrón que
   el diorama de desarrollo y el escenario de web) es ahora el único mecanismo, sin
   @supports ni detección de soporte — ver initHomeHero en pixanai.js. */
@media (max-width:767.98px){
  /* fragmentos se quedan de fondo fijo; núcleo y tarjetas pasan a flujo normal (static),
     uno debajo del otro, para que nada se sobreponga sobre texto o tarjetas en una
     pantalla angosta. Solo las tarjetas conservan un recorrido corto (--hh-l3). */
  .hero__stage{--hh-l1:0px;--hh-l2:0px;--hh-text:0px;--hh-l3:40px;height:auto;min-height:640px;padding-bottom:2rem}
  .hero__layer--1,.hero__layer--2,.hero__text{animation:none!important;opacity:1!important}
  /* el núcleo pasa a static: en flujo, DESPUÉS del texto (ver orden en el HTML), en vez
     de sobreponerse a él como en escritorio */
  .hero__layer--2{position:static;z-index:auto;grid-column:main;transform:none!important;
    width:min(55vw,240px);margin:1.5rem auto 2rem}
  /* las tarjetas igual: static, después del núcleo, sin el recorte de escritorio.
     Se queda con grid-column:full (de .full, mayor especificidad) pero el padding
     de .hero__cards ya la mantiene alineada con el resto del contenido */
  .hero__layer--3{position:static;inset:auto;margin-top:1rem}
  .hero__cards{flex-direction:column;gap:.7rem;transform:none;padding:0 var(--pad)}
  .hero__card{flex-basis:auto}
}
/* listas dentro de tarjetas oscuras (manifiesto de IA en nosotros) */
.list{margin:0;padding-left:1.15rem;font-size:.95rem;color:var(--muted)}
.list li{margin-bottom:.45rem}
.list li:last-child{margin-bottom:0}
.g-inv .card{background:var(--inv-surface)}
.g-inv .cards{background:var(--inv-line);border-color:var(--inv-line)}
.g-inv .card .list,.g-inv .card p{color:var(--inv-muted)}

/* ---------- nosotros: dónde sí sirve la IA, dónde todavía no ----------
   auditoria-pixanai.md §6: "tarjeta de comparación [...] con palomas en
   jade y cruces en grana [...] diséñala para que alguien le tome
   captura." El título de cada columna lleva el mismo color que su ícono,
   se reconoce la respuesta antes de leer una palabra. */
.cklist{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.cklist li{display:flex;gap:.65rem;align-items:flex-start;font-size:.95rem;color:var(--muted)}
.g-inv .cklist li{color:var(--inv-muted)}
.cklist__i{flex:none;width:1.3rem;height:1.3rem;border-radius:50%;display:grid;place-content:center;font-size:.7rem;font-weight:700;margin-top:.1rem}
.cklist--yes .cklist__i{background:var(--jade-soft);color:var(--jade)}
.cklist--no .cklist__i{background:var(--grana-soft);color:var(--grana)}
.g-inv .cklist--yes .cklist__i{background:rgb(63 192 142 / .16);color:var(--inv-jade)}
.g-inv .cklist--no .cklist__i{background:rgb(240 104 125 / .16);color:var(--inv-grana)}
.card-t--yes{color:var(--jade)}
.card-t--no{color:var(--grana)}
.g-inv h3.card-t.card-t--yes{color:var(--inv-jade)}
.g-inv h3.card-t.card-t--no{color:var(--inv-grana)}

/* ---------- escenario partido (precios) ----------
   Gramática Split stage: dos columnas en tensión toda la página (precio fijo
   ↔ lo que varía, DENTRO de cada servicio, nunca un servicio contra otro).
   Los tres servicios se apilan (sticky) y pasan por la misma tensión; el
   pico es el colapso: la báscula se inclina solo con condiciones dichas por
   escrito y al final el divisor viaja al borde y lo fijo toma todo el ancho. */
.splithero{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:1.2rem}
@media (min-width:820px){.splithero{grid-template-columns:1fr 1px 1fr;gap:0}.splithero > div:first-child{padding-right:clamp(1rem,3vw,2.6rem)}.splithero > div:last-child{padding-left:clamp(1rem,3vw,2.6rem)}}
.splithero .div{background:var(--line);-webkit-mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}
@media (max-width:819.98px){.splithero .div{height:1px;-webkit-mask-image:var(--hair-mask);mask-image:var(--hair-mask)}}
.side-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .5rem}
.side-h{font-family:var(--display);font-weight:900;font-size:clamp(1.35rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.08;margin:0 0 .6rem;color:var(--ink)}
.bignum{margin-bottom:.6rem}
/* pila de servicios: cada tarjeta es un split fijo|varía */
.stack{display:grid;gap:1.2rem;margin-top:1.6rem}
.scard{display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--line);box-shadow:var(--e1)}
@media (min-width:820px){.scard{grid-template-columns:1fr 1fr}}
.scard > div{padding:1.4rem 1.5rem 1.5rem}
.scard .vary{background:var(--surface-2);border-top:1px solid var(--line);box-shadow:inset 0 1px 0 var(--edge)}
@media (min-width:820px){.scard .vary{border-top:0;border-left:1px solid var(--line)}}
.scard .pn{font-size:1.25rem}
.scard ul:not(.list){margin:0 0 1.2rem;padding-left:1.1rem;font-size:.91rem;color:var(--muted)}
.scard ul:not(.list) li{margin-bottom:.32rem}
.scard .list b{color:var(--ink);font-weight:600}
.scard .tnote{margin-top:1rem}
/* La cifra de la tarjeta de producto. Existía como clase en el HTML sin
   ninguna regla: salía a tamaño de párrafo, más pequeña que el nombre del
   servicio (.scard .pn, 1.25rem), en la página cuyo argumento es el precio.
   En tinta, no en grana: las tarjetas se apilan con sticky y dos pueden
   compartir pantalla; la grana de esta página ya la llevan «cerrado» y las
   dos cifras del hero. Aquí la jerarquía la da el tamaño. */
.pp{font-family:var(--display);font-weight:900;font-size:clamp(2.2rem,5vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;margin:.2rem 0 .15rem}
.pu{font-size:.9rem;color:var(--muted);margin:0}
.pp--txt{font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.1;letter-spacing:-.02em}
/* ---------- segunda moneda ----------
   El mismo precio en la otra moneda. Nunca en grana: la grana es marca y
   énfasis, va una vez por pantalla, y en cada bloque de precio ya la lleva
   la cifra principal. Aquí la jerarquía se marca por tamaño y color apagado,
   nunca por opacidad. Cada idioma encabeza con la moneda de su lector, así
   que esta clase envuelve el USD en español y el MXN en inglés. */
.palt{display:block;font-family:var(--mono);font-size:.82rem;letter-spacing:.01em;color:var(--muted);margin:.35rem 0 0;font-variant-numeric:tabular-nums}
.g-inv .palt{color:var(--inv-muted)}
.stat2 .palt{margin-top:.4rem}
.scard .palt{margin-top:.3rem}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .stack{gap:0}
  .scard{position:sticky;top:calc(var(--nav-h,0px) + 44px + var(--i,0) * 16px);margin-bottom:22vh;box-shadow:var(--e2)}
  .scard:nth-child(2){--i:1}
  .scard:nth-child(3){--i:2}
  .scard:last-child{margin-bottom:0}
}
/* la báscula */
.scalewrap{position:relative}
.scale{--deg:0deg;--nudge:0deg;display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.2rem;transition:grid-template-columns 700ms var(--ease)}
@media (min-width:820px){
  .scale{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}
  .scale.collapsed{grid-template-columns:1fr minmax(0,0fr);gap:0}
  .pan--fijo{grid-row:1;grid-column:1;border-right:3px solid var(--anil)}
  .pan--vary{grid-row:1;grid-column:2}
  .beam{grid-row:2;grid-column:1/-1}
}
/* auditoria-pixanai.md §5: "libro mayor de dos columnas [...] una línea
   divisoria vertical marcada. Sin ilustración: la propia estructura es
   el visual" — el hairline de 1px del grid ya separaba los platos; este
   borde de 2px lo hace una línea deliberada, no un accidente de layout. */
.pan{padding:1.2rem 1.4rem 1.3rem;background:var(--surface);min-width:0;overflow:hidden}
.pan--vary{background:var(--surface-2);box-shadow:inset 0 1px 0 var(--edge)}
.pan-k{font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--anil);margin:0 0 .7rem}
.weighs{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.weigh{font-size:.9rem;color:var(--muted);border-left:2px solid var(--line);padding:.25rem 0 .25rem .8rem;transition:color 260ms var(--ease),border-color 260ms var(--ease)}
.weigh b{font-family:var(--display);font-weight:900;color:var(--muted);display:block;letter-spacing:-.012em;transition:color 260ms var(--ease)}
.weigh.on{color:var(--ink);border-left-color:var(--anil)}
.weigh.on b{color:var(--ink)}
/* la viga: una línea bajo los dos platos que se inclina hacia lo fijo */
.beam{background:var(--surface);padding:.9rem 1.4rem;display:none}
@media (min-width:820px){
  .beam{display:block}
  .beam span{display:block;height:2px;background:var(--ink);transform:rotate(calc(var(--deg) + var(--nudge)));transform-origin:50% 50%;transition:transform 320ms var(--ease)}
}
.resolve{display:none;margin-top:1.3rem;border-top:1px solid var(--line);padding-top:1.2rem}
.resolve-h{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,2.2vw,1.45rem);letter-spacing:-.015em;line-height:1.2;color:var(--ink);max-width:30ch;margin:0 0 1rem}
/* el colapso: el divisor viaja al borde (1fr → 0fr se interpola), lo fijo toma todo el ancho */
.scale.collapsed .resolve{display:block}
.scale.collapsed .pan--vary{padding:0;border:0;visibility:hidden}
.scale.collapsed .beam{display:none}
@media (max-width:819.98px){.scale.collapsed .pan--vary{display:none}}
.scale-narr{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin:1rem 0 0;font-variant-numeric:tabular-nums}
@media (min-width:960px) and (prefers-reduced-motion:no-preference){
  .scalewrap{height:300vh}
  .scalestage{position:sticky;top:calc(var(--nav-h,0px) + 44px);height:calc(100vh - var(--nav-h,0px) - 44px);display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(1.2rem,4vh,2.4rem);overflow:hidden}
  .scalestage .sec{max-width:none;font-size:clamp(1.5rem,3vw,2.1rem)}
}
.g-inv .side-h,.g-inv .pan-k{color:var(--inv-ink)}

/* ---------- editorial por capítulos (nosotros) ----------
   Gramática Chaptered editorial: cada capítulo es un cambio duro de fondo
   con folio; la media va en su columna con pie, nunca bajo el texto; sin
   hero a sangre, sin CTA magnética; el cierre es un colofón en tipo pequeño
   con el CTA como línea de texto corrido. */
.folio{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 1.4rem}
.g-inv .folio{color:var(--inv-muted)}
.folio-k{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.subchrome--folio .st{margin-left:auto}
.chap-cols{align-items:start}
.para{will-change:auto}
.pslot--tex{background-image:url(../img/textura-600.jpg)}
.prose{max-width:62ch}
.prose p{font-size:1.06rem;line-height:1.66;color:var(--ink);margin:0 0 1.1rem;text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose .ctr{font-family:var(--display);font-weight:900;color:var(--grana);font-variant-numeric:tabular-nums}
/* la corrección (pico): «personas» se tacha con un trazo que se dibuja por
   scroll (stroke-dashoffset desde --cp) y «tareas» se compone al lado,
   como una corrección de imprenta. Con reduce: la frase ya corregida. */
.corr{--cp:0;max-width:24ch}
.corr__w{position:relative;display:inline-block}
.corr__word{color:var(--muted);transition:color 300ms var(--ease)}
.corr__strike{position:absolute;left:-2%;top:46%;width:104%;height:.32em;overflow:visible;pointer-events:none;clip-path:inset(-50% calc((1 - min(1,var(--cp) * 1.6)) * 100%) -50% 0);transition:clip-path 60ms linear}
.corr__strike path{fill:none;stroke:var(--grana);stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
.corr__fix{display:inline-block;color:var(--grana);clip-path:inset(0 calc((1 - max(0,(var(--cp) - .55) / .45)) * 100%) 0 0);transition:clip-path 60ms linear}
.corr.done .corr__word{color:var(--muted)}
.pull-in{font-family:var(--display);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.4rem);line-height:1.1;letter-spacing:-.024em;max-width:20ch;margin:0 0 1.2rem;text-wrap:balance}
.pull-in .w{color:var(--line-strong);transition:color 420ms var(--ease)}
.pull-in .w.lit{color:var(--ink)}
.pull-in .w.acc.lit{color:var(--grana)}
/* nosotros, capítulo 5: los límites — icono de salida (recuadro + flecha
   hacia afuera, .ic/.frame/.glyph ya definidos arriba) + nombre + por qué.
   auditoria-pixanai.md §6: "tres tarjetas [...] decir que no también se
   diseña." Ni jade ni grana: no es un logro ni una carencia, es un límite
   declarado a propósito — se queda en --muted. */
.limit-i{margin-bottom:.9rem;color:var(--muted)}
.colofon{max-width:56ch;font-size:.95rem;line-height:1.66;color:var(--inv-muted)}
.colofon p{margin:0 0 .9rem}
.colofon a{color:var(--inv-ink);text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px;text-decoration-color:var(--inv-line);transition:text-decoration-color 160ms var(--ease)}
.colofon a:hover{text-decoration-color:var(--inv-anil)}
.colofon-sig{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin-top:1.4rem}

/* ---------- lo que sigue: hilo narrativo entre páginas ----------
   Una línea de texto corrido al final del cierre, no un botón. En index
   responde al pliegue: body[data-lean] deja solo el lado elegido. */
.next{margin:2.6rem 0 0;font-family:var(--body);font-style:italic;font-size:1.06rem;color:var(--inv-muted);max-width:44ch}
.next a{color:var(--inv-ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--inv-line);transition:text-decoration-color 160ms var(--ease)}
.next a:hover{text-decoration-color:var(--inv-anil)}
body[data-lean="l"] .next .r,body[data-lean="r"] .next .l,body[data-lean] .next .o{display:none}

/* ---------- acto 1 (index): la frase en líneas ---------- */
.hero .ln{display:block}

/* ---------- acto 2 (index): el costo, silencio deliberado ----------
   Sigue siendo Literata: es voz de documento, no titular. La bisagra de
   verdad (.pull) vive más abajo en la misma página y no debe competir.
   El énfasis lo carga la grana, nunca la cursiva. */
.quiet{font-family:var(--body);font-size:clamp(1.35rem,2.8vw,1.9rem);line-height:1.38;letter-spacing:-.008em;color:var(--ink);max-width:30ch;margin:0 auto;text-align:center;text-wrap:balance}
.quiet em{font-style:normal;color:var(--grana)}

/* ---------- acto 3 (index): el pliegue — la bifurcación ----------
   Costura y crecimiento de cada lado se leen por tamaño (calc/clamp)
   y tinta (color), nunca por opacidad. La costura solo se traslada
   con transform:translateX — left se queda fijo en 50%. Sin puntero
   fino, con reduce, o sin JS: ambos lados quedan a igual peso, tinta
   plena y tamaño base — la regla de abajo es el estado por defecto. */
.fold{position:relative;display:grid;grid-template-columns:1fr 1fr;isolation:isolate;margin:1.6rem 0 2.2rem;min-height:40px}
/* la costura es un hairline que se desvanece en los extremos, sin sombra: el pliegue es tipográfico */
.fold__seam{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-strong);-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);transform:translateX(-50%);pointer-events:none;transition:transform 60ms linear}
.fold__side{display:flex;align-items:center;gap:1.1rem;padding:clamp(2.2rem,6vw,4.2rem) 1.4rem;text-decoration:none;font-family:var(--display);font-weight:900;color:var(--ink);font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.05;letter-spacing:-.024em;transition:color 200ms var(--ease)}
.fold__side--l{justify-content:flex-end;text-align:right}
.fold__side--r{justify-content:flex-start;text-align:left}
/* miniatura del destino, tamaño fijo — no hereda el clamp dinámico del
   texto porque mide en rem, no em. auditoria-pixanai.md §1: "que se vea
   a dónde llevan antes de hacer clic". El orden en el DOM decide cuál
   lado queda junto a la costura (ver el HTML: texto+miniatura a la
   izquierda, miniatura+texto a la derecha — flex-end/flex-start empuja
   el grupo entero, así que la miniatura siempre cae del lado de la costura). */
.fold__thumb{display:flex;flex-direction:column;gap:.18rem;flex:none;width:2.8rem;padding:.32rem;border:var(--card-border);background:var(--card-bg)}
.fold__thumb span{display:block;height:.3rem;background:var(--surface-2)}
.fold__thumb--agenda span:last-child{background:var(--jade)}
.fold__thumb--web span:first-child{width:55%;height:.2rem}
.fold__thumb--web span:last-child{flex:1;min-height:.9rem;background:var(--anil-soft)}
.fold[data-hover="l"] .fold__side--r{color:var(--muted)}
.fold[data-hover="r"] .fold__side--l{color:var(--muted)}
.fold[data-hover] .fold__side--l{font-size:clamp(1.7rem,calc(1.7rem + (0.5 - var(--fold-x,.5)) * 3rem),3.1rem)}
.fold[data-hover] .fold__side--r{font-size:clamp(1.7rem,calc(1.7rem + (var(--fold-x,.5) - 0.5) * 3rem),3.1rem)}
.fold[data-hover] .fold__seam{transform:translateX(calc(-50% + (var(--fold-x,.5) - .5) * var(--fold-w,0px)))}
.fold__result{min-height:4.6em;display:grid}
.fold__h2,.fold__default{grid-area:1/1;margin:0;max-width:36ch}
.fold__h2{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,2.3vw,1.45rem);line-height:1.22;letter-spacing:-.01em;color:var(--ink);display:none}
.fold__default{font-family:var(--body);font-size:.98rem;color:var(--muted)}
.fold.picked-left .fold__h2--l{display:block}
.fold.picked-left .fold__default,.fold.picked-right .fold__default{display:none}
.fold.picked-right .fold__h2--r{display:block}
/* la tercera ruta (sistemas) no entra al pliegue: una línea de texto corrido debajo, gemela clara de .next */
.fold__more{margin:1.4rem 0 0;font-family:var(--body);font-style:italic;font-size:.98rem;color:var(--muted);max-width:44ch}
.fold__more a{color:var(--ink);text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong);transition:text-decoration-color 160ms var(--ease)}
.fold__more a:hover{text-decoration-color:var(--anil)}
@media (max-width:820px){
  .fold{grid-template-columns:1fr}
  .fold__seam{position:static;width:100%;height:1px;transform:none!important;left:auto;bottom:auto;-webkit-mask-image:var(--hair-mask);mask-image:var(--hair-mask)}
  .fold__side{min-height:40px;padding:1.3rem 1rem;justify-content:flex-start!important;text-align:left!important}
}

/* ---------- acto 5 (index) / acto 4 (clínicas): reveal de cierre ----------
   Wipe con clip-path, nunca con width/height. El clip va en el <div> hijo,
   NUNCA en el [data-reveal] que IntersectionObserver observa: un elemento
   recortado a 0 de alto dentro de clip-path pasa isIntersecting:false para
   siempre en Chromium (verificado), así que observar el elemento que uno
   mismo recorta es un candado que nunca se abre. La sección (el fondo
   g-inv/g-white) se pinta de inmediato al hacer scroll, sin recorte —
   normal y correcto — y solo el contenido interior hace el wipe. */
[data-reveal] > div{clip-path:inset(0 0 100% 0);transition:clip-path 760ms var(--ease)}
[data-reveal].in > div{clip-path:inset(0 0 0% 0)}
.lead.sm{font-size:.92rem;max-width:46ch}
.g-inv .go{color:var(--inv-anil);background-image:linear-gradient(var(--inv-anil),var(--inv-anil))}

/* ---------- clínicas: barra de título y bandera de demo ---------- */
.titlebar{font-family:var(--display);font-weight:900;font-size:clamp(1.1rem,2.2vw,1.4rem);letter-spacing:-.01em;margin:0 0 .9rem;color:var(--ink)}
.demo-flag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);padding:.32rem .55rem;margin:0 0 .9rem}
.demo-flag::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--anil);flex:none}

/* ---------- clínicas, acto 2: la bitácora — caos a la izquierda, la misma
   hora ya resuelta por Kiin a la derecha. auditoria-pixanai.md §2: "el
   contraste caos/orden se ve sin leer." ---------- */
.tl-compare{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:1.2rem;align-items:start}
@media (min-width:768px){.tl-compare{grid-template-columns:1.1fr .9fr}}
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl__item{display:flex;gap:.9rem;padding:.85rem 0;border-left:2px solid var(--line);padding-left:1rem;position:relative}
.tl__item:first-child{padding-top:0}
.tl__item::before{content:"";position:absolute;left:-5px;top:1.05rem;width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.tl__item:first-child::before{top:.2rem}
.tl__time{font-family:var(--mono);font-size:.85rem;color:var(--muted);flex:none;width:3rem}
.tl__text{color:var(--muted);font-size:.95rem;line-height:1.5}
.tl__afterlbl{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.tl__mini{max-width:22rem}

/* ---------- clínicas: leyenda compacta del mecanismo (junto al acto 3) ---------- */
.legend4{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);margin:1.3rem 0 0}
.legend4>div{background:var(--surface);flex:1 1 11rem;padding:.85rem 1rem}
.legend4 .lg-k{font-family:var(--mono);font-size:.64rem;color:var(--anil);display:block;margin-bottom:.22rem}
.legend4 b{font-family:var(--display);font-weight:700;font-size:.84rem;color:var(--ink);display:block}

/* ---------- clínicas, acto 3: el hueco que se reofrece ---------- */
.kiin-surface{margin-top:.4rem}
.agenda .slot{flex-wrap:wrap;row-gap:.35rem}
/* .kcancel (acto 3) y .kbook (mini-flujo del hero) comparten el mismo botón fantasma */
.kcancel,.kbook{margin-left:auto;font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .6rem;border:1px solid var(--line-strong);border-radius:var(--r-ctl);background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color 160ms var(--ease),background 160ms var(--ease);min-height:32px}
.kcancel:hover,.kbook:hover{border-color:var(--anil);background:var(--anil-soft)}
.kcancel:disabled,.kbook:disabled{cursor:default;border-color:var(--line);color:var(--muted);background:var(--surface-2)}
.kacts{margin-left:auto;display:flex;gap:.4rem;flex-wrap:wrap}
.kacts .kbook{margin-left:0}
@media (max-width:820px){.kcancel,.kbook{min-height:40px}}
@media (max-width:480px){.kcancel,.kacts{flex-basis:100%;margin:.3rem 0 0}}
.waitlist{border-top:1px dashed var(--line);margin-top:1rem;padding-top:.9rem}
.wl-lbl{font-family:var(--mono);font-size:.85rem;color:var(--ink);margin:0 0 .3rem;font-variant-numeric:tabular-nums}
.wl-status{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.kiin-narr{font-size:.92rem;color:var(--muted);margin:.9rem 0 0;font-style:italic;max-width:56ch}

/* ---------- clínicas, acto 5: la migración (pan de progreso) ----------
   El track avanza con una barra de relleno movida por transform:scaleX,
   nunca por width. Bajo reduce, la barra queda llena y la sección deja
   de fijarse. */
.panwrap{position:relative}
@media (min-width:960px){
  .panwrap{height:220vh}
  .panstage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
}
/* El cuadro de la etapa: un artefacto por paso. Se intercambian con
   display (nunca con opacidad, que rompe el contraste) y se apilan en la
   misma celda de grid para que la altura no salte al cambiar. Abajo de
   960px no hay etapa fija: los cuatro se leen como lista. */
.panview{display:grid;gap:1rem;margin:0 auto 1.6rem;width:100%;max-width:46rem}
.panview__f{display:flex}
@media (min-width:960px){
  .panview{gap:0;margin:0 auto 2rem;min-height:clamp(13rem,26vh,20rem)}
  .panview__f{grid-area:1/1;display:none}
  .panview__f.on{display:flex}
}
.panbar{position:relative;height:2px;background:var(--line);margin:0 0 2.4rem}
.panfill{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--anil);transform:scaleX(0);transform-origin:0 center;transition:transform 60ms linear}
.pansteps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:620px){.pansteps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.pansteps{grid-template-columns:repeat(4,1fr)}}
.panstep{background:var(--surface);padding:1.3rem 1.4rem 1.4rem;transition:background 260ms var(--ease)}
.panstep .pn-k{font-family:var(--mono);font-size:.68rem;color:var(--muted);display:block;margin-bottom:.3rem;transition:color 220ms var(--ease)}
.panstep b{font-family:var(--display);font-weight:900;font-size:1.02rem;display:block;margin-bottom:.2rem;color:var(--muted);transition:color 220ms var(--ease)}
.panstep span{font-size:.87rem;color:var(--muted);display:block}
.panstep.act{background:var(--anil-soft)}
.panstep.act .pn-k{color:var(--anil)}
.panstep.act b{color:var(--ink)}

/* ---------- clínicas, acto 6: precio reducido y cierre con campo ---------- */
.price-line{font-size:.98rem;color:var(--inv-muted);margin:1.6rem 0 0}
.price-line b{color:var(--inv-ink);font-weight:600}
.closeform{margin-top:1.3rem;max-width:30rem}
.closeform-lbl{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--inv-muted);display:block;margin-bottom:.4rem}
.closeform-row{display:flex;gap:.6rem;flex-wrap:wrap}
.closeform input{flex:1 1 14rem;font-family:var(--body);font-size:1rem;padding:.68rem .8rem;border:1px solid var(--inv-line);border-radius:var(--r-ctl);background:var(--inv-surface);color:var(--inv-ink);min-height:40px;box-shadow:inset 0 1px 0 var(--inv-edge-top)}
.closeform input:focus{outline:2px solid var(--inv-anil);outline-offset:1px}
.closeform input::placeholder{color:var(--inv-muted)}
.closeform-go{background:none;border:0;padding:0;font-size:.85rem;cursor:pointer;min-height:40px;display:inline-flex;align-items:center}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  [data-reveal] > div{clip-path:none;transition:none}
  .fold__seam{transition:none}
  .panwrap{height:auto}
  .panstage{position:static;height:auto}
  .panfill{transform:scaleX(1)}
  .panview{gap:1rem;min-height:auto}
  .panview__f{grid-area:auto}
  .corr{--cp:1}
  .corr__fix{transition:none}
  .taller__stage{position:static;height:auto}
  .taller__obj{--tp:1;--k1:1;--k2:1;--k3:1;--k4:1;--k5:1}
  .taller__wire path,.taller__wire rect,.taller__wire line,.taller__plane img,.taller__url span{transition:none}
  .stamp.rv,.stamp.rv.in{transform:rotate(-5deg);transition:none}
  .hero__layer,.hero__text{animation:none!important;transform:none!important;opacity:1!important}
  .hero__layer--2{transform:translateY(-50%)!important}
  .hero__hi{transition:none}
}