/* v7 (2026-11-13): portafolio al final, evaluación en vidrio claro (un solo bloque negro), cola de la página más compacta,
   bloque negro también sin JS. Se carga DESPUÉS de v6.css. */
/* ---- Sin JS: el bloque negro existe igual (el tono lo pone fx.js con JS) ---- */
html:not(.js) [data-tone=night]{
  --bg:#111113; --panel:rgba(255,255,255,.06); --solid:#1B1B1E; --ink:#F4F2EC; --muted:#A5A39C;
  --line:rgba(255,255,255,.14); --chip:rgba(255,255,255,.08); --dot:#F4F2EC; --hi:inset 0 1px 0 rgba(255,255,255,.12);
  --sel:#F4F2EC; --sel-ink:#111113;
  background:#111113; color:#F4F2EC}
/* ---- Cola clara: menos aire muerto entre bloques cortos ---- */
#services,#start,#about,#faq,#work{padding:clamp(64px,8vw,120px) 0}
/* ---- Evaluación: vidrio claro con el naranja solo en el botón ---- */
.eval{--panel:rgba(255,255,255,.72); --solid:#FFFEFC; --ink:#111113; --muted:#6B6A66; --line:rgba(17,17,19,.12); --chip:rgba(17,17,19,.06);
  --hi:inset 0 1px 0 rgba(255,255,255,.7);
  background:color-mix(in srgb,#FFFEFC 78%,transparent);color:#111113;border:1px solid rgba(17,17,19,.1);border-radius:var(--r-xl);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:var(--hi),0 1px 2px rgba(17,17,19,.05),0 18px 40px -18px rgba(17,17,19,.18),0 50px 90px -50px rgba(17,17,19,.22);
  max-width:1080px;margin:0 auto}
.eval::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(217,119,87,.06),transparent 62%)}
.eval h2{font-size:clamp(2.1rem,4.6vw,3.6rem);margin-bottom:clamp(14px,2vw,24px)}
.eval .price{font-size:clamp(3.2rem,8vw,5.6rem)}
.refund{background:rgba(17,17,19,.06);color:#111113;font-weight:600}
.eval :focus-visible{outline-color:#111113}
@media (min-width:720px){.eval{padding:clamp(36px,4.4vw,56px)}}
/* ---- Sobre mí: columna de texto con más presencia ---- */
#about .cols p{font-size:clamp(1.06rem,1.4vw,1.2rem);max-width:58ch}
@media (min-width:880px){#about .cols{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start}}
/* ---- Portafolio: índice editorial, una fila por proyecto ---- */
.pf{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);counter-reset:none}
.pf-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:clamp(28px,4vw,48px)}
.pf-end p{margin:0;font-size:clamp(1.25rem,2.4vw,1.75rem);font-weight:600;letter-spacing:-.025em;line-height:1.2}
/* Entrada escalonada (solo con JS; respeta pausa y reduced-motion) */
.js .pf.reveal{opacity:1;transform:none}
.js .pf.reveal:not(.in)>li{opacity:0}
.js .pf.reveal.in>li{animation:rise6 .6s var(--e-out) backwards;animation-delay:calc(var(--k,0) * 70ms)}
html.nm.js .pf.reveal>li{opacity:1!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.js .pf.reveal>li{opacity:1!important;animation:none!important}}
/* v8 (2026-11-13): profundidad y movimiento con causa.
   Ventana de ejemplo en 3D (CSS, sin WebGL), bloque negro como panel que se expande con el scroll,
   mini escenas en "AI or automation", juego de orden en "Move the pieces", recorrido de pasos en "How we work",
   ilustraciones por servicio, teléfono con lecciones, evaluación reordenada.
   Regla: solo transform y opacity en lo que se mueve; todo se apaga con prefers-reduced-motion o "Pause animations".
   Se carga DESPUÉS de v7.css. */
:root{--travel:cubic-bezier(.45,0,.1,1);--e-io:cubic-bezier(.77,0,.175,1)}
/* ---------- Texto: sin viudas ni huérfanas ---------- */
h1,h2,h3,.head p,.sub,.verdict p{text-wrap:balance}
p,li,summary{text-wrap:pretty}
.head p.muted{max-width:44ch}
/* ---------- Héroe ---------- */
.hero .sub{max-width:30ch;font-size:clamp(1.12rem,1.6vw,1.375rem);line-height:1.45;color:color-mix(in srgb,var(--ink) 72%,var(--bg))}
.hero .ask{margin-top:clamp(28px,3.2vw,40px)}
@keyframes lift8{from{transform:translateY(4px);opacity:.4}}
.ask input.typing{caret-color:transparent}
.hero .actions{margin-top:clamp(20px,2.6vw,32px)}
@media (min-width:960px){.hero{min-height:calc(100svh - 96px)}}
@media (max-width:379px){.hero .ask{padding-left:14px}
.ask input{font-size:.94rem}}
/* ---------- #demo: ventana en 3D ---------- */
#demo .wrap{perspective:1500px;perspective-origin:50% 0}
.d3{position:relative;transform-style:preserve-3d;will-change:transform}
@supports (animation-timeline:view()){#demo{view-timeline-name:--demo}}
/* Respaldo JS (js/scroll-fx.js, html.sdf): el transform lo maneja el scroll, no la transición del .reveal */
@keyframes deskIn{from{transform:rotateX(26deg) translateY(-40px)}to{transform:none}}
@keyframes cardIn{from{transform:translateZ(calc(var(--z0,40) * 1px))}to{transform:translateZ(calc(var(--z1,14) * 1px))}}
@media (max-width:719px){@keyframes deskIn{from{transform:rotateX(14deg) translateY(-16px)}to{transform:none}}}
.fgrid h2{text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;color:var(--muted)}
/* ---------- Bloque negro: un panel propio que se abre al entrar ---------- */
.night{position:relative;isolation:isolate;
  --bg:#111113;--panel:rgba(255,255,255,.06);--solid:#1B1B1E;--ink:#F4F2EC;--muted:#A5A39C;
  --line:rgba(255,255,255,.14);--chip:rgba(255,255,255,.08);--dot:#F4F2EC;--hi:inset 0 1px 0 rgba(255,255,255,.12);
  --sel:#F4F2EC;--sel-ink:#111113;
  --shadow:0 1px 1px rgba(0,0,0,.35),0 10px 22px -8px rgba(0,0,0,.5),0 34px 70px -26px rgba(0,0,0,.65);
  --shadow-up:0 1px 1px rgba(0,0,0,.35),0 16px 30px -8px rgba(0,0,0,.55),0 48px 90px -30px rgba(0,0,0,.75);
  color:var(--ink)}
.night::before{content:"";position:absolute;inset:0;z-index:-1;background:#111113;border-radius:clamp(22px,3.4vw,44px)}
.night ::selection{background:#F4F2EC;color:#111113}
html:not(.js) [data-tone=night]{background:transparent}
@supports (animation-timeline:view()){.motion .night::before{animation:panel linear both;animation-timeline:view()}}
@keyframes panel{
  entry 0%{transform:scale(.9,1)}
  entry 55%{transform:none}
  exit 45%{transform:none}
  exit 100%{transform:scale(.9,1)}
}
/* Escala: marcas de cada tarea sobre la barra */
.verdict h3,.verdict p{will-change:auto}
/* ---------- Move the pieces: juego ---------- */
/* ---------- How we work: recorrido ---------- */
/* ---------- What I do: una ilustración por servicio ---------- */
.sv-sw{flex:none;position:relative;width:36px;height:22px;border-radius:11px;background:var(--chip)}
.sv-sw::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--btn,#D97757)}
.sv-sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#FFFEFC;box-shadow:0 1px 2px rgba(0,0,0,.2);transform:translateX(14px)}
.sv-cur{position:absolute;left:0;top:0;width:18px;height:22px;fill:#111113;stroke:#FFFEFC;stroke-width:1.4;stroke-linejoin:round;opacity:0;pointer-events:none}
/* inicio con movimiento */
@keyframes swbg{to{opacity:1}}
@keyframes swk{to{transform:translateX(14px)}}
@keyframes evIn{from{opacity:0;transform:translateY(-10px)}}
@keyframes cur{
  0%{opacity:0;transform:translate(var(--cx0),var(--cy0))}
  10%{opacity:1}
  38%{transform:translate(var(--cx1),var(--cy1))}
  42%{transform:translate(var(--cx1),var(--cy1)) scale(.86)}
  47%{transform:translate(var(--cx1),var(--cy1))}
  80%{opacity:1;transform:translate(var(--cx2),var(--cy2))}
  100%{opacity:0;transform:translate(var(--cx2),var(--cy2))}
}
@keyframes tagIn{from{opacity:0;transform:translateX(28px) scale(.96)}}
@keyframes blk{from{opacity:0;transform:translateY(8px)}}
@keyframes ph{from{opacity:0;transform:translateY(24px)}}
/* ---------- Evaluación ---------- */
.eval{display:grid;gap:clamp(28px,4vw,56px);padding:clamp(24px,4vw,56px)}
@media (min-width:880px){.eval{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}}
.eval h2{margin-bottom:clamp(18px,2.4vw,28px)}
.price{display:flex;align-items:flex-start;gap:10px;font-size:clamp(4rem,12vw,7rem);font-weight:700;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.p-cur{font-size:.26em;letter-spacing:0;font-weight:600;margin-top:.5em;color:var(--muted)}
.p-num{display:inline-block;min-width:3ch}
.refund{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 16px;border-radius:14px;background:rgba(17,17,19,.05);
  color:#111113;font-weight:600;font-size:.98rem;line-height:1.4;max-width:42ch}
.refund svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ev-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(17,17,19,.18);font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.15rem;background:#FFFEFC}
/* ---------- Portafolio: microinteracción de fila ---------- */
/* ---------- Animaciones heredadas pasadas a transform/opacity ---------- */
.live{animation:none;position:relative;box-shadow:none}
.live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:live8 2s ease-out infinite}
@keyframes live8{0%{opacity:.6;transform:scale(1)}70%,100%{opacity:0;transform:scale(2.6)}}
html.nm .live::after{animation:none;opacity:0}
/* ---------- Movimiento reducido y pausa: versión estática bonita ---------- */
html.nm .d3{animation:none!important;transform:none!important}
html.nm .night::before{animation:none!important;transform:none!important}
@media (prefers-reduced-motion:reduce){.live::after{animation:none!important;opacity:0}
.d3,.night::before{animation:none!important;transform:none!important}}
/* ---------- Sin JS: el flujo se muestra ordenado y quieto ---------- */
/* v9 (2026-11-13): panel de veredicto con información real, tareas 01–04 de izquierda a derecha,
   ilustraciones propias (SVG a mano: línea fina, formas planas, hueso y tinta).
   Regla: lo que se mueve usa solo transform y opacity, una vez, y se apaga con reduced-motion o "Pause animations".
   Se carga DESPUÉS de v8.css. */
/* ---------- AI or automation: panel negro ---------- */
.verdict{position:relative}
.verdict::before{display:none}
.verdict .vh{display:flex;justify-content:space-between;font-size:.95rem;font-weight:600;color:#F4F2EC;margin-bottom:18px}
.v-body{position:relative;margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:28px;align-content:start}
.v-head{display:grid;gap:10px;max-width:68ch}
.v-task{display:flex;align-items:baseline;gap:12px;color:#A5A39C;font-size:.98rem;font-weight:500;line-height:1.35}
.v-n{font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1;color:#F4F2EC;font-variant-numeric:tabular-nums;flex:none}
.verdict h3{margin:0;font-size:clamp(2rem,5vw,3.2rem);line-height:1.02;letter-spacing:-.04em}
.verdict .v-head p#v-text{margin:0;color:#D6D3CB;font-size:clamp(1.02rem,1.3vw,1.14rem);line-height:1.5;max-width:60ch}
.v-k{font-size:.82rem;font-weight:600;color:#A5A39C}
@media (max-width:599px){.verdict{padding:26px 20px 26px}
.v-body{margin-top:20px;padding-top:20px;gap:22px}
.verdict .v-head p#v-text{font-size:1rem}}
/* "What you control" es un <details>: abierto en escritorio (y sin JS); en móvil arranca cerrado para acortar el panel */
/* las marcas 01–04 quedan parejas; el número activo se lee claro */
/* ---------- Ilustraciones: sistema común ---------- */
/* ---------- Héroe: de la pila al orden ---------- */
@keyframes ill-in{from{opacity:0;transform:translateY(10px)}}
@keyframes ill-slide{from{opacity:0;transform:translateX(-22px)}}
@keyframes ill-pop{from{opacity:0;transform:scale(.88)}}
/* ---------- What I do: una lámina por servicio ---------- */
/* ---------- Portafolio: miniatura por proyecto ---------- */
/* ---------- Estado final quieto ---------- */
/* Foco visible en la caja de pregunta (el input no lleva outline propio) */
.ask:focus-within{outline:3px solid var(--btn);outline-offset:3px}
/* v10 (2026-11-13): más compacta, más interactiva, materiales con profundidad.
   Solo se animan transform y opacity. Un naranja por sección. */
@font-face{font-family:"Public Sans";src:url("../fonts/public-sans-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--e-out:cubic-bezier(.23,1,.32,1)}
/* ---------- Ritmo: secciones más cortas ---------- */
section{padding:clamp(64px,8vw,112px) 0}
.head{margin-bottom:clamp(24px,3.4vw,44px)}
h2{font-size:clamp(2.1rem,6vw,4.1rem)}
.hero{padding-bottom:clamp(40px,6vw,72px)}
@media (min-width:960px){.hero{min-height:calc(100svh - 140px)}}
/* ---------- Héroe: sugerencias ---------- */
.ask{position:relative}
@keyframes sugin{from{opacity:0;transform:translateY(-4px) scale(.98)}}
/* ---------- Héroe: mini resultado ---------- */
.ans.res{display:block;padding:clamp(16px,2.4vw,22px);border-radius:20px;text-align:left;
  background:color-mix(in srgb,var(--solid) 78%,transparent);border:1px solid var(--line);
  box-shadow:var(--hi),0 1px 2px rgba(17,17,19,.05),0 14px 34px -18px rgba(17,17,19,.22)}
.ans.res.in{animation:none}
.ar{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.45}
@media (max-width:479px){.ar{grid-template-columns:1fr;gap:4px}}
/* ---------- Move the pieces: niveles, encaje y jugadas ---------- */
.flow-top{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.flv{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 14px 4px 5px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);font:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:transform .16s var(--e-out),background-color .2s ease,color .2s ease}
.flv:active{transform:scale(.97)}
.flv-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.07);font-variant-numeric:tabular-nums;font-size:.82rem}
.flv svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:none}
.flv.done svg{display:block}
.flv[aria-pressed=true]{background:rgba(255,255,255,.08);color:var(--ink);border-color:rgba(255,255,255,.22)}
.flv[aria-pressed=true] .flv-n{background:var(--ink);color:#111113}
@media (hover:hover) and (pointer:fine){.flv:hover{color:var(--ink)}}
html:not(.js) .flow-top{display:none}
/* ---------- Héroe: copia a la izquierda, panel de ejemplo a la derecha ---------- */
@media (min-width:1100px){.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);justify-items:stretch;align-items:center;text-align:left;column-gap:clamp(40px,5vw,80px);
    padding-top:clamp(92px,9vw,120px);min-height:calc(100svh - 40px)}
.hero>.hero-copy{align-items:flex-start}
.hero h1{font-size:clamp(3rem,4.7vw,4.9rem)}
.hero .sub{margin-left:0}
.hero .ans.idle{text-align:left}
.hero .actions{justify-content:flex-start}}
/* ---------- Panel de ejemplo: claro, tinta sobre hueso ---------- */
@keyframes live10{50%{opacity:.3}}
.fx{position:absolute;left:-22px;top:50%;margin-top:-8px;width:16px;height:16px;pointer-events:none;opacity:0}
.fx svg{width:16px;height:16px;fill:none;stroke:#111113;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* ---------- Selected work (work/): título a la izquierda, lista a la derecha ---------- */
@media (min-width:960px){.pf-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(32px,5vw,80px);align-items:start}
.pf-grid .head{margin:0;position:sticky;top:110px}}
/* ---------- Selected work: una fila por proyecto, compacta ---------- */
.pf10{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.pfr{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:64px;padding:10px 4px;border-bottom:1px solid var(--line)}
.pfr-n{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pfr-t{min-width:0;display:grid}
.pfr-t b{font-weight:600;font-size:1.05rem;letter-spacing:-.01em;line-height:1.3}
.pfr-t span{font-size:.92rem;color:var(--muted);line-height:1.4}
.pfr-s{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;color:var(--muted);white-space:nowrap}
.pfr-s svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pfr-here{color:var(--ink);font-weight:500}
.pfr-here i{width:7px;height:7px;border-radius:50%;background:var(--ink)}
.pfr-l{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid rgba(17,17,19,.3);font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;transition:transform .16s var(--e-out),background-color .18s ease}
.pfr-l svg{width:15px;height:15px;fill:currentColor}
.pfr-l:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.pfr-l:hover{background:var(--chip)}}
@media (max-width:479px){.pfr{grid-template-columns:22px minmax(0,1fr);row-gap:6px;column-gap:10px}
.pfr>.pfr-s,.pfr>.pfr-l{grid-column:2;justify-self:start}}
.pf-end{margin-top:clamp(24px,3vw,36px)}
/* ---------- Movimiento reducido y pausa ---------- */
@media (min-width:960px){.pf-grid .pf10,.pf-grid .pf-end{grid-column:2}}
/* ---------- Héroe: botón que abre la vista del panel ---------- */
/* ---------- AI or automation: panel de resultado claro (ya no es negro) ---------- */
.verdict{--ink:#111113;--muted:#5F5E5A;--line:rgba(17,17,19,.14);background:#EDEBE6;color:#111113;border:1.5px solid #111113;border-radius:22px;
  box-shadow:0 1px 2px rgba(60,50,30,.06),0 18px 40px -24px rgba(60,50,30,.22);-webkit-backdrop-filter:none;backdrop-filter:none}
.verdict::before{display:none}
.verdict .vh{color:#111113}
.verdict h3,.verdict h3 em{color:#111113}
.track{background:rgba(17,17,19,.12)}
.track::before{background:#D97757}
.track i{background:#111113;box-shadow:0 0 0 5px #FAF9F6,0 0 0 6.5px rgba(17,17,19,.25),0 4px 10px rgba(60,50,30,.25)}
.track i:focus-visible{outline:2px solid #111113;outline-offset:6px}
.v-body{border-top-color:rgba(17,17,19,.14)}
.v-task{color:#5F5E5A}
.v-n{color:#111113}
.verdict .v-head p#v-text{color:#2A2A2C}
.v-k{color:#5F5E5A}
/* "How it works": escena corta. Entra el papel, la línea se llena (reglas, IA o las dos) y aterriza el resultado */
/* ---------- Evaluación: precio, reembolso y tres pasos, en claro ---------- */
.ev10{position:relative;display:grid;gap:clamp(24px,3.4vw,40px);padding:clamp(24px,4vw,52px);border-radius:24px;background:#EDEBE6;border:1px solid rgba(17,17,19,.12)}
.ev-deal{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.ev10 .price{margin:0;font-size:clamp(3.2rem,8vw,5.4rem);line-height:.9;color:#111113}
.ev10 .p-cur{color:#5F5E5A}
.ev-ref{display:inline-flex;align-items:center;gap:10px;margin:0;padding:10px 14px;border-radius:12px;background:#FAF9F6;border:1.5px solid #111113;font-weight:700;font-size:1.02rem;line-height:1.3;max-width:34ch}
.ev-ref svg{flex:none;width:20px;height:20px;fill:none;stroke:#111113;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ev-path{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:none}
.ev-st{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:8px;align-content:start;padding:16px;border-radius:16px;background:#FAF9F6;border:1px solid rgba(17,17,19,.12);
  transition:border-color .3s ease,box-shadow .3s ease,transform .35s var(--e-out)}
.ev-n{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(17,17,19,.25);background:#FFFEFC;font-family:var(--serif);font-style:italic;font-size:1.25rem;color:#111113;
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.ev-t{align-self:center;font-weight:600;font-size:1.05rem;line-height:1.35}
.ev-m{grid-column:2;justify-self:start;padding:3px 10px;border-radius:8px;background:#EDEBE6;font-size:.84rem;font-weight:600;color:#111113}
.ev10.ev-js .ev-st.on{border-color:#111113;box-shadow:0 10px 24px -16px rgba(60,50,30,.35)}
.ev10.ev-js .ev-st.on .ev-n{background:#111113;border-color:#111113;color:#FAF9F6}
.ev-pick{grid-column:2;display:grid;gap:10px}
.ev-q{margin:0;font-size:.95rem;color:#5F5E5A}
.ev-btns{display:flex;flex-wrap:wrap;gap:8px}
html:not(.js) .ev-btns,html:not(.js) .ev-q{display:none}
.ev-opt{font:inherit;font-size:.95rem;font-weight:600;min-height:44px;min-width:64px;padding:0 16px;border-radius:12px;border:1.5px solid #111113;background:transparent;color:#111113;cursor:pointer;transition:transform .16s var(--e-out),background-color .18s ease,color .18s ease}
.ev-opt:active{transform:scale(.96)}
.ev-opt[aria-pressed=true]{background:#111113;color:#FAF9F6}
@media (hover:hover) and (pointer:fine){.ev-opt:not([aria-pressed=true]):hover{background:rgba(17,17,19,.06)}}
.ev-o{margin:0;font-size:.98rem;line-height:1.45;font-weight:500}
.ev-o[data-o=n]{font-weight:700}
.ev-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.ev-cta .note{margin:0}
@media (min-width:900px){.ev10{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:start;column-gap:clamp(32px,4vw,64px)}
.ev-cta{grid-column:1;grid-row:2;align-self:end}
.ev-path{grid-column:2;grid-row:1/3}}
@media (prefers-reduced-motion:reduce){.ev-st,.ev-n{transition:none}}
/* Mascota Quivo (2026-11-14): una sola vez, junto al botón "Contact me" del héroe.
   SVG inline decorativo (aria-hidden). Solo anima transform/opacity. Con reduced-motion o html.nm
   las reglas globales de site.css apagan animaciones y transiciones: queda la pose estática
   (cabeza inclinada, brazo izquierdo señalando el botón, ojos mirando al botón). */
.hero .actions{flex-wrap:nowrap;align-items:flex-end}
.qv{position:relative;flex:0 1 168px;min-width:72px;aspect-ratio:1/1;display:flex;align-items:flex-end;line-height:0;pointer-events:none;margin-bottom:-6px;user-select:none}
.qv-svg{display:block;width:100%;height:auto;overflow:visible}
.qv-3d{display:none;width:100%;height:100%}
.qv3 .qv-svg{display:none}.qv3 .qv-3d{display:block}
.hero .actions .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:959px){.qv{flex-basis:128px;min-width:0}
.hero .actions{gap:8px}}
@media (max-width:339px){.qv{display:none}}
.qv g,.qv ellipse{transform-box:fill-box}
.qv-sombra{opacity:.2;transform-origin:50% 50%;animation:qv-sombra 3.2s ease-in-out infinite}
.qv-salto{transform-origin:50% 100%}
.qv-resp{transform-origin:50% 100%;transform:rotate(-5.7deg);animation:qv-resp 3.2s ease-in-out infinite}
.qv-glow{opacity:.5;animation:qv-glow 2.4s ease-in-out infinite alternate}
.qv-ojo{transform-origin:50% 50%;animation:qv-blink 4s infinite}
.qv-mira{transform:translate(-2.6px,.8px);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.qv-brazo-izq{transform-origin:65% 27%;transform:rotate(68deg);transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.qv-brazo-der{transform-origin:35% 27%;transform:rotate(-8deg)}
.qv-cejas{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.qv-sonrisa,.qv-abierta{transition:opacity .15s}
.qv-abierta{opacity:0}
/* Fuera de pantalla los bucles (respiración, sombra, brillo, parpadeo) quedan en pausa: js/mascota.js pone .off */
.qv.off *{animation-play-state:paused}
/* Saludo al entrar en pantalla (una vez) */
.qv.wave .qv-brazo-der{animation:qv-wave 1.6s ease-in-out}
/* Hover/focus en el botón: se emociona */
.qv.hey .qv-salto{animation:qv-hop .5s cubic-bezier(.3,1.5,.5,1)}
.qv.hey .qv-cejas{transform:translateY(-2.6px)}
.qv.hey .qv-sonrisa{opacity:0}
.qv.hey .qv-abierta{opacity:1}
.qv.hey .qv-brazo-izq{animation:qv-poke .55s ease-in-out infinite alternate}
/* Al presionar: guiño y salto */
.qv.wink .qv-salto{animation:qv-hop .42s cubic-bezier(.3,1.5,.5,1)}
.qv.wink .qv-ojo-der{animation:qv-wink .42s ease}
@keyframes qv-resp{0%,100%{transform:rotate(-5.7deg)}50%{transform:rotate(-3.8deg) translateY(-1.2px) scale(.985,1.025)}}
@keyframes qv-sombra{0%,100%{transform:none}50%{transform:scaleX(.94);opacity:.15}}
@keyframes qv-glow{to{opacity:.85}}
@keyframes qv-blink{0%,92%,100%{transform:none}95%{transform:scaleY(.1)}}
@keyframes qv-wink{0%,100%{transform:none}30%,70%{transform:scaleY(.1)}}
@keyframes qv-wave{0%,100%{transform:rotate(-8deg)}20%,50%,80%{transform:rotate(-148deg)}35%,65%{transform:rotate(-118deg)}}
@keyframes qv-hop{0%,100%{transform:none}40%{transform:translateY(-8px)}75%{transform:translateY(1px) scale(1.03,.97)}}
@keyframes qv-poke{from{transform:rotate(72deg)}to{transform:rotate(86deg)}}
/* v12 (2026-11-14): pendientes de la web. Héroe para oficinas, precio a la vista, demo "Client desk" interactiva,
   cajas de #which con su porqué, seguridad, About con marcador de foto. "Move the pieces" sigue siendo el de v8/v10.
   Paleta: hueso + tinta + un solo naranja (#D97757). Verde apagado (#2F5A45) solo para "hecho" dentro de la demo.
   Movimiento: solo transform/opacity, 150 a 300 ms, curva var(--e-out); html.nm y reduced-motion lo apagan (site.css). */
/* ---------- Héroe ---------- */
/* Garantías: texto simple con un ícono de línea, 2 por fila, debajo de la demo. Sin filetes ni cajas. */
.assure{list-style:none;width:100%;margin:clamp(18px,2.4vw,26px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(14px,2vw,28px);text-align:left;font-size:.88rem;line-height:1.35;font-weight:500}
.assure li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;text-wrap:balance}
.assure svg{width:18px;height:18px;margin-top:1px;fill:none;stroke:#111113;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* el héroe termina más corto y pasa directo a "AI or automation?" */
.hero{padding-bottom:clamp(20px,3vw,36px)}
#which{padding-top:clamp(40px,5vw,72px)}
/* Chips del héroe: 6 en grilla pareja (3 × 2 en escritorio, 2 × 3 en celular), mismo ancho y alto */
/* Respuesta de la caja de pregunta: rótulo "Example" */
/* la tarjeta no cambia de alto al pasar de un chip a otro: v10.js mide la más larga y reserva ese alto (--res-h) */
.ans.res{min-height:var(--res-h,0px);box-sizing:border-box}
/* botón más largo: en pantallas chicas se achica el relleno para que la mascota siga entrando a su lado */
@media (max-width:479px){.hero .actions .btn{padding:0 18px;font-size:1rem}}
@media (max-width:349px){.qv{display:none}}
/* las 4 tareas: misma altura y como máximo dos líneas cada una */
.tasks{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.task{flex:none;min-height:78px;padding:14px 16px 14px 54px;font-size:1rem;line-height:1.3;text-wrap:balance}
.task::before{left:16px}
@media (min-width:600px){.tasks{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media (min-width:1280px){.tasks{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---------- #which compacto (pedido de Martin): título, las dos cajas y las 4 tareas entran juntos en 1440×900 ---------- */
#which .head{margin-bottom:clamp(16px,2vw,24px)}
.try{margin:2px 0 10px;font-size:.95rem}
.verdict{margin-top:14px;padding:16px 18px 18px;border-radius:18px}
.verdict .vh{margin-bottom:10px;font-size:.88rem}
.v-body{margin-top:14px;padding-top:14px;gap:12px}
.v-head{gap:4px}
.verdict .v-task{color:#4A4945}
.verdict h3{font-size:clamp(1.5rem,2.4vw,2rem)}
.verdict .v-head p#v-text{font-size:.98rem;line-height:1.4}
@media (min-width:960px){.verdict{padding:18px 24px 20px}}
/* ---------- #which: panel visual (entra → modo → sale), tres modos para tocar y fichas cortas ---------- */
.vz{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.vz-c{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;row-gap:1px;align-content:start;min-height:4.4em;padding:9px 12px;border-radius:12px;background:#FFFEFC;border:1px solid rgba(17,17,19,.14);font-size:.95rem;font-weight:500;line-height:1.35}
.vz-c>span{grid-column:2}
.vz-i{width:30px;height:30px;padding:5px;border-radius:8px;background:#EDEBE6;fill:none;stroke:#111113;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;box-sizing:border-box}
.vz-c .vz-i{grid-row:1/4}
.vz-out{background:#FAF9F6;border:1.5px solid #111113;min-height:6.2em}
.vz-mark{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:2px 9px;border-radius:7px;background:#111113;color:#FAF9F6;font-size:.78rem;font-weight:600;line-height:1.5}
.vz[data-s="1"] .vz-mark{background:#F7DED3;color:#111113}
.vz[data-s="1"] .vz-mark::before{content:"";width:6px;height:6px;border-radius:1px;background:#B8400F;transform:rotate(45deg)}
.vz-eng{justify-self:center;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px 4px 6px;border-radius:12px;border:1.5px dashed rgba(17,17,19,.45);font-size:.92rem;font-weight:600}
.vz-eng .vz-i{background:#111113;stroke:#FAF9F6}
.vz[data-m="0"] .e-a,.vz[data-m="2"] .e-r{display:none}
.vz-tok{position:absolute;left:0;top:0;z-index:2;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#D97757;opacity:0;pointer-events:none}
.vm{display:grid;gap:6px}
.verdict .vm-l{margin:0;font-size:.82rem;font-weight:600;color:#4A4945}
.vm-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.vm-b button{display:grid;align-content:center;justify-items:center;gap:2px;min-height:52px;padding:4px 6px;border-radius:12px;border:1.5px solid rgba(17,17,19,.3);background:transparent;color:#111113;font:inherit;font-size:.86rem;font-weight:600;line-height:1.2;text-align:center;cursor:pointer;touch-action:manipulation;transition:transform .15s var(--e-out),background-color .18s ease}
.vm-b button[aria-checked=true]{background:#111113;border-color:#111113;color:#FAF9F6}
.vm-b button.rec{border-color:#D97757}
.vm-b button:active{transform:scale(.97)}
.vm-b button:focus-visible{outline:2px solid #111113;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.vm-b button:not([aria-checked=true]):hover{background:rgba(17,17,19,.06)}}
.vm-rec{display:none;padding:1px 6px;border-radius:5px;background:#D97757;color:#111113;font-size:.68rem;font-weight:700;font-style:normal;line-height:1.4}
.vm-b .rec .vm-rec{display:block}
.vf{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.vf>div{display:grid;grid-template-columns:minmax(0,1fr);gap:1px;align-content:start;min-height:4.5em;padding:7px 10px;border-radius:10px;background:#FFFEFC;border:1px solid rgba(17,17,19,.1)}
.vf dt{font-size:.78rem;font-weight:600;color:#5F5E5A}
.vf dd{margin:0;font-size:.9rem;font-weight:500;line-height:1.3}
@media (min-width:760px){.vf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:379px){.vz-c{padding:10px 12px;font-size:.9rem}
.vm-b{gap:4px}
.vm-b button{min-width:0;padding:6px 2px;font-size:.76rem}
.vm-rec{padding:1px 3px;font-size:.58rem}}
@media (min-width:1100px){.v-body{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);column-gap:clamp(28px,3.4vw,52px);align-items:start}
.v-body>.v-head,.v-body>.vm{grid-column:1}
.v-body>.vz{grid-column:2;grid-row:1/3;align-self:center}
.vz{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px}
.vz-c,.vz-out{min-height:6.4em}
.v-body>.vf{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}}
/* ---------- Move the pieces: editor de workflows de ejemplo, estilo n8n (js/flow.js).
   Tinta, hueso y un solo naranja (acción, IA y datos en movimiento); verde apagado solo para "hecho". ---------- */
.nw{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.nw .flow-top{margin:0}
.nw-frame{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#17171A}
.nw-stage{position:relative;overflow:hidden;min-height:200px;touch-action:pan-y;
  background-image:radial-gradient(rgba(244,242,236,.13) 1px,transparent 1.2px);background-size:22px 22px}
.nw-scroll .nw-stage{overflow-x:auto;overflow-y:hidden;touch-action:pan-x pan-y;scrollbar-width:thin;scrollbar-color:rgba(244,242,236,.3) transparent}
.nw-size{position:relative}
.nw-layer{position:absolute;left:0;top:0;transform-origin:0 0}
.nw-layer>svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.nw-e{fill:none;stroke:#8A8880;stroke-width:1.8;stroke-linecap:round}
.nw-e.lit{stroke:#F4F2EC}
.nw-ah,.nw-po,.nw-pi,.nw-dm{fill:#8A8880}
.nw-yn{fill:#A5A39C;font:500 11px var(--sans)}
.nw-cnt{fill:#F4F2EC;font:600 11px var(--sans);paint-order:stroke;stroke:#17171A;stroke-width:4px;stroke-linejoin:round}
.nw-bolt{fill:#D97757}
.nw-plus rect{fill:#17171A;stroke:#8A8880;stroke-width:1.4}
.nw-plus path{fill:none;stroke:#8A8880;stroke-width:1.6;stroke-linecap:round}
.nw-sd{fill:none;stroke:#8A8880;stroke-width:1.4;stroke-dasharray:3 4}
.nw-sc{fill:#17171A;stroke:#8A8880;stroke-width:1.5}
.nw-st{fill:#F4F2EC;font:600 11.5px var(--sans)}
.nw-ss{fill:#A5A39C;font:500 10.5px var(--sans)}
.nw-dot{position:absolute;left:0;top:0;z-index:3;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#D97757;opacity:0;pointer-events:none}
/* nodo = mosaico cuadrado con el ícono grande; debajo, el nombre (hasta dos líneas) y un subtítulo de una línea */
.nd{position:absolute;left:0;top:0;z-index:2;display:grid;justify-items:center;align-content:start;gap:1px;padding:0;text-align:center;color:#F4F2EC;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.nd-tile{position:relative;display:grid;place-items:center;box-sizing:border-box;width:88px;height:88px;margin-bottom:6px;border-radius:16px;background:#F4F2EC;border:1.5px solid #C9C6BE}
.nd[data-k=t] .nd-tile{border-radius:40px 16px 16px 40px}
.nd-tile::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid #F4F2EC;opacity:0;pointer-events:none;transition:opacity .18s ease}
.nd.sel .nd-tile::after,.nd.over .nd-tile::after,.nd.grab .nd-tile::after,.nd[data-s=run] .nd-tile::after,.nd[data-s=wait] .nd-tile::after{opacity:1}
.nd[data-s=run] .nd-tile::after,.nd[data-s=wait] .nd-tile::after{border-color:#D97757}
.nd.grab{z-index:5;cursor:grabbing}
.nd:focus-visible{outline:none}
.nd:focus-visible .nd-tile{outline:2px solid #F4F2EC;outline-offset:8px}
.nd-i{width:40px;height:40px;fill:none;stroke:#111113;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.nd[data-k=a] .nd-i{stroke:#C5552E}
.nd-s{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;opacity:0}
.nd[data-s=run] .nd-s{opacity:1;background:#D97757}
.nd[data-s=wait] .nd-s{opacity:1;background:#D97757;border-radius:4px}
.nd[data-s=ok] .nd-s{opacity:1;background:#2F5A45}
.nd[data-s=ok] .nd-s::after{content:"";position:absolute;left:5px;top:5px;width:7px;height:4px;border-left:1.8px solid #F4F2EC;border-bottom:1.8px solid #F4F2EC;transform:rotate(-45deg)}
.nd-t{max-width:100%;font-size:.8rem;font-weight:600;line-height:1.22;letter-spacing:-.01em}
.nd-d{max-width:100%;font-size:.7rem;font-weight:500;line-height:1.3;color:#A5A39C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd[data-s=wait] .nd-d{color:#F0A283}
.nw-zoom{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:4px}
.nw-tb{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:10px;border:1px solid rgba(244,242,236,.2);background:#1F1F23;color:#F4F2EC;cursor:pointer;touch-action:manipulation;transition:transform .15s var(--e-out),background-color .18s ease}
.nw-tb svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nw-execw{position:absolute;left:0;right:0;bottom:12px;z-index:4;display:flex;justify-content:center;pointer-events:none}
.nw-exec{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:12px;border:0;background:#D97757;color:#111113;font:inherit;font-size:.94rem;font-weight:700;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:transform .15s var(--e-out)}
.nw-exec svg{width:12px;height:12px;fill:currentColor}
.nw-tb:active,.nw-exec:active,.nw-approve:active,.nw-px:active{transform:scale(.97)}
.nw :focus-visible{outline:2px solid #F4F2EC;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.nw-tb:hover{background:#2A2A2E}}
/* ficha del nodo: debajo del lienzo, con alto reservado (no tapa nodos ni mueve la página) */
.nw-canvas{position:relative}
.nw-panel{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:8px 24px;align-content:start;height:116px;padding:10px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.04);color:#F4F2EC;overflow:hidden}
.nw-panel[hidden]{display:grid;visibility:hidden}
.nw-panel .nw-pb{grid-column:1;grid-row:2}
.nw-panel .nw-pl{grid-column:2;grid-row:1/3;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px}
.nw-ph{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.nw-ph>div{display:grid;min-width:0}
.nw-ph b{font-size:.95rem;font-weight:600;line-height:1.25}
.nw-ph small{font-size:.76rem;color:#A5A39C}
.nw-px{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-6px -8px 0 0;border:0;border-radius:8px;background:none;color:#F4F2EC;cursor:pointer}
.nw-px svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.nw-pb{justify-self:start;padding:1px 8px;border-radius:6px;font-size:.72rem;font-weight:700;background:#F4F2EC;color:#111113}
.nw-pb[data-b=ai],.nw-pb[data-b=you]{background:#D97757}
.nw-pl{display:grid;gap:8px;margin:0}
.nw-pl dt{font-size:.7rem;font-weight:600;color:#A5A39C}
.nw-pl dd{margin:1px 0 0;font-size:.86rem;line-height:1.35}
.nw-scroll .nw-panel{grid-template-columns:minmax(0,1fr);height:290px}
.nw-scroll .nw-panel .nw-pb{grid-column:1;grid-row:auto}
.nw-scroll .nw-panel .nw-pl{grid-column:1;grid-row:auto;grid-template-columns:minmax(0,1fr)}
.nw-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.nw-msg{flex:1 1 280px;margin:0;min-height:2.9em;max-width:none;font-size:.92rem;line-height:1.45;color:var(--muted)}
.nw-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.nw-approve{min-height:44px;padding:0 18px;border-radius:999px;border:0;background:#D97757;color:#111113;font:inherit;font-weight:700;cursor:pointer;touch-action:manipulation;transition:transform .15s var(--e-out)}
.nw-next{background:#F4F2EC!important;border-color:#F4F2EC!important;color:#111113!important}
.nw-list{margin:0;padding:16px 16px 16px 36px;display:grid;gap:8px;color:#F4F2EC}
.nw-list span{color:#A5A39C}
.nw:not(.nw-js) .nw-zoom,.nw:not(.nw-js) .nw-execw,.nw:not(.nw-js) .nw-bar{display:none}
.nw:not(.nw-js) .nw-layer{position:static}
.nw-scroll .nw-execw{left:auto;right:12px}
.nw-scroll .nw-tb{width:36px}
@media (max-width:479px){
.nw-exec{padding:0 14px;font-size:.88rem}
.nw-msg{min-height:5.8em}}
/* Grano estático también dentro del bloque negro (misma textura que el fondo claro) */
.night::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;border-radius:clamp(22px,3.4vw,44px);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .96 0 0 0 0 .95 0 0 0 0 .92 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0/200px 200px repeat}
/* las cuatro tarjetas de pasos, parejas en altura */
/* ---------- What I do: etiquetas largas ---------- */
/* ---------- Evaluación: qué viene después ---------- */
/* ---------- About: marcador de la foto (se reemplaza por <img class="ab-photo">) ---------- */
.ab-l{display:grid;gap:20px;align-content:start;justify-items:start}
.ab-photo{display:block;width:168px;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;background:#D9D6CF}
.ab-t p+p{margin-top:14px}
@media (min-width:880px){.ab-photo{width:min(100%,280px)}}
@media (prefers-reduced-motion:reduce){.vm-b button,.nd-tile::after,.nw-tb,.nw-exec{transition:none}}
/* v13 (2026-11-14/15): la página como un recorrido de decisión, con un solo sistema de layout.
   Orden (v14): héroe → What I do → evaluación → Try it → ¿IA o automatización? → [bloque oscuro: How we work + editor de flujos]
   → ejemplo Client desk → About → cierre → pie. El héroe, What I do, la línea de How we work y las sombras viven en v14.css. FAQ y Selected work viven en faq/ y work/.
   Cada sección: .wrap > .head (título + una línea) > UN elemento principal. Mismo ancho, mismo ritmo vertical.
   Naranja solo en la acción principal y en lo pendiente o recomendado. Solo se anima transform y opacity. */
/* ---------- Ritmo vertical: un solo relleno para todas las secciones ---------- */
#services,#start,#try,#which,#flow,#process,#about,#contact{padding-block:clamp(56px,7vw,96px)}
.head{max-width:760px;margin-bottom:clamp(24px,3vw,40px)}
.head h2{margin:0}
.head p.muted{margin-top:12px}
.eyebrow{margin:0 0 14px;font-size:.92rem;font-weight:600;letter-spacing:.005em;color:var(--muted)}
/* el pie: menos aire entre los enlaces y la línea de abajo */
.fbase{margin-top:32px}
/* ---------- Un solo "Contact me" a la vista: si uno del contenido se ve, se esconden el de la barra y el flotante (js/v13.js) ---------- */
#bar .btn[data-book],#fab{transition:opacity .2s ease,visibility .2s}
html.cta-in #bar .btn[data-book],html.cta-in #fab{opacity:0;visibility:hidden;pointer-events:none}
/* ---------- Evaluación: sigue a What I do con el mismo ancho; sin caja propia ---------- */
.ev10{padding:0;border:0;border-radius:0;background:none}
/* escritorio: precio y botón en una fila, los 3 pasos debajo en 3 columnas (sin huecos en una columna) */
@media (min-width:900px){.ev10{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center}
.ev-deal{grid-column:1;grid-row:1}
.ev-cta{grid-column:2;grid-row:1;align-self:center;justify-self:end}
.ev-path{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}}
/* ---------- Try it: caja, chips en una grilla pareja y la tarjeta a todo el ancho debajo ---------- */
/* tarjeta de respuesta: dos columnas internas (pregunta a la izquierda, reparto y acciones a la derecha) */
/* ---------- ¿IA o automatización?: un solo nivel de tarjeta; adentro, sin cajas ---------- */
#which .head{margin-bottom:clamp(24px,3vw,40px)}
.verdict .vz-c{background:transparent;border-color:transparent;box-shadow:none;padding-left:0}
.vf{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vf>div{min-height:0;padding:10px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
/* ---------- Ejemplo Client desk: enmarcado como ejemplo, mismo ancho que el resto ---------- */
/* ---------- About: título arriba, foto y texto debajo ---------- */
#about .cols{margin:0}
/* ---------- Cierre: una sola llamada final, con la segunda mascota ---------- */
#contact .actions{display:flex;flex-wrap:nowrap;align-items:flex-end;gap:12px;margin:0}
#contact .actions .btn{flex:0 0 auto;white-space:nowrap}
#contact .qv{flex:0 1 110px}
/* ---------- Páginas aparte (faq/, work/): mismo sistema; el título es h1 con el tamaño de un h2 ---------- */
.page{padding-block:clamp(112px,12vw,150px) clamp(56px,7vw,96px)}
.page h1{font-size:clamp(2.1rem,6vw,4.1rem);line-height:1.02;letter-spacing:-.04em;margin:0}
.page .back{margin:0 0 clamp(20px,3vw,32px);font-size:.95rem}
.page .back a{color:var(--muted);text-decoration:none}
.page .back a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.page .faq{margin-top:0}
.page .pf-end{margin-top:clamp(32px,4vw,48px)}
.flinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.flinks a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
/* ---------- Editor de flujos: el mosaico del nodo acepta un logo SVG de marca (campo lg en js/flow.js) ---------- */
.nd-logo{display:block;max-width:none;pointer-events:none;user-select:none;-webkit-user-drag:none}
/* Aviso de marcas, al final del pie (home, faq/ y work/) */
.ftm{margin:16px 0 0;max-width:none;font-size:.75rem;line-height:1.5;color:#5F5E5A}
/* v14 (2026-11-15): correcciones de Martin tras ver la página. Manda sobre lo que choque de v13 para abajo.
   - Héroe centrado sobre negro esmeralda con una luz naranja detrás del título; abajo se funde con el crema de la página.
   - What I do: 3 tarjetas-mosaico iguales; "AI consulting" en negro como destacada.
   - How we work: línea de progreso que se llena con el scroll (scaleX / scaleY), puntos que se encienden y una ficha que viaja.
   - Sombras en capas, teñidas del fondo (nunca negro duro); en el bloque oscuro, borde interior de luz en vez de sombra.
   Solo se anima transform y opacity. Con reduced-motion o "Pause animations" (html.nm) se ve el estado final. */
/* ---------- Sombras: una cercana y una lejana, blur grande, offset chico, 6 a 12 % de opacidad, en marrón cálido ---------- */
:root,:root[data-theme]{
  --sh-c:74,60,36;                                                  /* el crema de la página, oscurecido */
  --sh-tile:0 1px 2px rgba(var(--sh-c),.08),0 8px 22px -6px rgba(var(--sh-c),.10);
  --sh-card:0 1px 2px rgba(var(--sh-c),.07),0 3px 8px rgba(var(--sh-c),.06),0 22px 56px -14px rgba(var(--sh-c),.12);
  --sh-lift:0 1px 2px rgba(var(--sh-c),.08),0 6px 14px rgba(var(--sh-c),.08),0 32px 72px -16px rgba(var(--sh-c),.12);
  --shadow:var(--sh-card);--shadow-up:var(--sh-lift);--glass-sh:var(--sh-card);
  --rim:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.14);   /* luz en el borde, para lo oscuro */
}
.night{--shadow:var(--rim);--shadow-up:var(--rim);--glass-sh:var(--rim)}
/* Botones: el naranja proyecta su propia sombra, suave */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(120,52,24,.12),0 8px 20px -6px rgba(170,76,40,.12),0 22px 44px -18px rgba(170,76,40,.12)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 1px 2px rgba(120,52,24,.12),0 12px 26px -6px rgba(170,76,40,.12),0 30px 56px -18px rgba(170,76,40,.12)}
.btn.sm{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(120,52,24,.10),0 8px 18px -8px rgba(170,76,40,.12)}
.btn.ghost{box-shadow:var(--hi),var(--sh-tile)}
/* Tarjetas, mosaicos y chips activos (parte clara) */
.ask{box-shadow:var(--hi),var(--sh-card)}
.task[aria-pressed=true]{box-shadow:var(--sh-tile)}
.task{box-shadow:0 1px 2px rgba(var(--sh-c),.06),0 10px 24px -12px rgba(var(--sh-c),.10)}
.verdict{box-shadow:var(--sh-card)}
.ev-ref{box-shadow:var(--sh-tile)}
.ev-st{box-shadow:0 1px 2px rgba(var(--sh-c),.06),0 12px 28px -14px rgba(var(--sh-c),.10)}
.ev10.ev-js .ev-st.on{box-shadow:var(--sh-card)}
.ab-photo{box-shadow:var(--sh-card)}
.faq details{box-shadow:0 1px 2px rgba(var(--sh-c),.05)}
.faq details[open]{box-shadow:var(--hi),var(--sh-card)}
.track i{box-shadow:0 0 0 5px #FAF9F6,0 0 0 6.5px rgba(17,17,19,.25),0 4px 12px rgba(var(--sh-c),.12)}
.bar{box-shadow:inset 0 1px 0 var(--bhi),0 1px 2px rgba(var(--sh-c),.08),0 10px 30px -10px rgba(var(--sh-c),.12),0 28px 56px -28px rgba(var(--sh-c),.12)}
.bar.dark{box-shadow:inset 0 1px 0 var(--bhi),inset 0 0 0 1px rgba(255,255,255,.05)}
/* Bloque oscuro: luz en el borde */
.nw-frame{box-shadow:var(--rim)}
.nw-exec{box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px -8px rgba(217,119,87,.35)}
.nd-tile{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(17,17,19,.06)}
.night .flv[aria-pressed=true]{box-shadow:var(--rim)}
/* ---------- Anclas: el título no queda debajo de la barra flotante ---------- */
main section[id],#night{scroll-margin-top:88px}
#top{scroll-margin-top:0}
/* ---------- Héroe ---------- */
.hero{position:relative;isolation:isolate;display:block;justify-items:normal;min-height:0;padding:0;text-align:center;color:#F4F2EC;
  --ink:#F4F2EC;--muted:#D5D3CB;--bg:#0A1A14;--line:rgba(244,242,236,.18);
  background:
    radial-gradient(ellipse 58% 44% at 50% 42%,rgba(217,119,87,.34) 0%,rgba(217,119,87,.13) 45%,rgba(217,119,87,0) 74%),
    radial-gradient(ellipse 30% 24% at 50% 46%,rgba(217,119,87,.18) 0%,rgba(217,119,87,0) 72%),
    linear-gradient(180deg,#07140F 0%,#0B1C16 100%)}
/* la franja de abajo: del negro esmeralda al crema, pasando por el naranja (como un amanecer); sin corte duro */
.hero::after{content:"";display:block;height:clamp(120px,10.5vw,170px);pointer-events:none;
  background:linear-gradient(180deg,rgba(217,119,87,0) 0%,rgba(217,119,87,.14) 16%,rgba(222,120,80,.38) 36%,rgba(236,158,120,.68) 56%,rgba(246,208,186,.9) 74%,rgba(250,240,232,.97) 88%,#FAF9F6 100%)}
.hero>.hero-copy{position:relative;align-items:center;padding-top:clamp(104px,12.5vh,140px);padding-bottom:clamp(24px,3vw,32px)}
.hero .eyebrow{margin:0 0 18px;color:#D5D3CB}
.hero h1{max-width:100%;margin-inline:auto;font-size:clamp(2.25rem,6.4vw,4.2rem);line-height:1.02;letter-spacing:-.04em;color:#F4F2EC}
.hero .sub{max-width:34ch;margin:clamp(18px,2.2vw,26px) auto 0;color:#E4E2DA}
.hero .actions{justify-content:center;margin-top:clamp(24px,2.8vw,34px)}
.hero .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.28),0 10px 28px -8px rgba(217,119,87,.42),0 26px 60px -22px rgba(217,119,87,.34)}
.hero .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 1px 2px rgba(0,0,0,.28),0 14px 34px -8px rgba(217,119,87,.5),0 32px 70px -22px rgba(217,119,87,.4)}
.hero :focus-visible{outline-color:#F4F2EC}
/* la mascota, con un resplandor cálido detrás (gradiente, sin blur) */
.hero .qv{position:relative}
.hero .qv::before{content:"";position:absolute;inset:-22% -16% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(217,119,87,.3),rgba(217,119,87,.1) 55%,rgba(217,119,87,0))}
.hero .assure{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;width:auto;max-width:none;margin:24px auto 0;padding:0;list-style:none;
  font-size:.86rem;font-weight:500;line-height:1.4;color:#D5D3CB}
.hero .assure li{display:flex;align-items:center;gap:8px}
.hero .assure li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:#D97757}
/* Entrada, una sola vez: etiqueta → título por palabras → subtítulo → botón → mascota → garantías (50 ms entre cada uno) */
.js .hero .rise.go{transition:opacity .6s var(--e-out),transform .7s var(--e-out);transition-delay:calc(330ms + var(--k,0) * 50ms)}
.js .hero .eyebrow.rise.go{transition-delay:0ms}
.js .hero h1.go .w{transition-delay:calc(50ms + var(--i) * 50ms)}
.js .hero .qv{opacity:0;transform:translateY(12px)}
.js .hero .actions.go .qv{opacity:1;transform:none;transition:opacity .6s var(--e-out) 480ms,transform .7s var(--e-out) 480ms}
html.nm.js .hero .qv{opacity:1!important;transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.js .hero .qv{opacity:1!important;transform:none!important;transition:none!important}}
@media (max-width:599px){.hero .assure{flex-direction:column;align-items:center;gap:6px}
.hero .sub{max-width:28ch}}
/* ---------- What I do: 3 tarjetas-mosaico iguales; la del medio, en negro ---------- */
.pils{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:clamp(14px,1.6vw,22px)}
@media (min-width:820px){.pils{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pil{display:flex;flex-direction:column;padding:clamp(22px,2.2vw,30px);border-radius:26px;background:#F4F2EC;border:1px solid rgba(17,17,19,.08);
  color:#111113;box-shadow:var(--hi),var(--sh-card)}
.pil-ic{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:20px;background:#FFFEFC;border:1.5px solid rgba(17,17,19,.14);box-shadow:var(--sh-tile)}
.svi{display:block;width:34px;height:34px;fill:none;stroke:#111113;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.pil h3{margin:22px 0 8px;font-size:clamp(1.2rem,1.7vw,1.4rem);letter-spacing:-.015em;line-height:1.22}
.pil p{margin:0;max-width:none;font-size:1rem;line-height:1.5;color:#3A3A3C}
.pil .pil-k{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:20px;font-size:.8rem;line-height:1.3;color:#4A4946}
.tg{display:inline-flex;align-items:center;min-height:26px;padding:2px 10px;border-radius:999px;border:1px solid rgba(17,17,19,.16);background:rgba(255,254,252,.7);font-weight:500;white-space:nowrap}
/* entrada escalonada, una vez (misma técnica que los títulos: animación con relleno backwards) */
.js .pils.reveal{opacity:1;transform:none}
.js .pils.reveal:not(.in)>.pil{opacity:0}
.js .pils.reveal.in>.pil{animation:rise6 .7s var(--e-out) backwards;animation-delay:calc(var(--k,0) * 90ms)}
html.nm.js .pils.reveal>.pil{opacity:1!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.js .pils.reveal>.pil{opacity:1!important;animation:none!important}}
/* ---------- How we work: línea de progreso con 4 pasos ----------
   Por defecto (sin JS, reduced-motion, pausa) se ve el final: línea llena, 4 puntos naranjas, sin ficha.
   html.tl-vt (animation-timeline: view()): el scroll por la sección mueve todo. html.tl-io (sin soporte): js/v14.js pone
   .tl-go al entrar en pantalla y las mismas animaciones corren una vez por tiempo. */
.tl{position:relative;--g:clamp(14px,1.6vw,22px);--d:16px;view-timeline-name:--tl;view-timeline-axis:block;view-timeline-inset:0px}
.tl-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:1fr;gap:var(--g)}
.tl-s{position:relative;display:grid;padding:0 0 0 36px}
.tl-c{box-sizing:border-box;height:100%;padding:18px 18px 20px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03) 60%);box-shadow:var(--rim)}
.tl-i{display:block;width:24px;height:24px;margin-bottom:12px;fill:none;stroke:#F4F2EC;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tl-c h3{margin:0 0 6px;font-size:1.15rem;letter-spacing:-.015em;color:#F4F2EC}
.tl-c p{margin:0;max-width:none;font-size:.95rem;line-height:1.5;color:#B9B7B0}
/* puntos: aro gris; el relleno naranja (::after) es lo que se enciende */
.tl-dot{position:absolute;left:0;top:20px;z-index:2;box-sizing:border-box;width:var(--d);height:var(--d);border-radius:50%;background:#111113;border:2px solid rgba(244,242,236,.3)}
.tl-dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;background:#D97757}
/* riel: celular = vertical por la izquierda; escritorio = horizontal por arriba. Va del centro del primer punto al del último */
.tl-rail{position:absolute;z-index:1;left:7px;top:28px;bottom:calc((100% - 3 * var(--g)) / 4 - 28px);width:2px;border-radius:2px;background:rgba(244,242,236,.16);pointer-events:none}
.tl-fill{position:absolute;inset:0;border-radius:inherit;background:#D97757;transform-origin:50% 0}
.tl-run{position:absolute;left:0;width:100%;bottom:100%;height:100%}
/* una copia del riel, justo antes: al correrse 100 % la ficha llega al final */
.tl-tok{position:absolute;left:-6px;bottom:-7px;width:14px;height:14px;border-radius:50%;background:#D97757;box-shadow:0 0 0 5px rgba(217,119,87,.24);opacity:0}
@media (min-width:900px){.tl-steps{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto}
.tl-s{padding:36px 0 0}
.tl-dot{top:0}
.tl-rail{left:8px;right:calc((100% - 3 * var(--g)) / 4 - 8px);top:7px;bottom:auto;width:auto;height:2px}
.tl-fill{transform-origin:0 50%}
.tl-run{left:auto;right:100%;bottom:auto;top:0;width:100%;height:100%}
.tl-tok{left:auto;right:-7px;bottom:auto;top:-6px}}
@keyframes tl-fy{from{transform:scaleY(0)}to{transform:none}}
@keyframes tl-fx{from{transform:scaleX(0)}to{transform:none}}
@keyframes tl-ry{from{transform:none}to{transform:translateY(100%)}}
@keyframes tl-rx{from{transform:none}to{transform:translateX(100%)}}
@keyframes tl-tk{0%,95%{opacity:1}100%{opacity:0}}
@keyframes tl-d0{0%{opacity:0;transform:scale(.4)}4%,100%{opacity:1;transform:none}}
@keyframes tl-d1{0%,29%{opacity:0;transform:scale(.4)}35%,100%{opacity:1;transform:none}}
@keyframes tl-d2{0%,62%{opacity:0;transform:scale(.4)}68%,100%{opacity:1;transform:none}}
@keyframes tl-d3{0%,94%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:none}}
.motion.tl-vt .tl-fill,.motion.tl-io .tl-fill{animation:tl-fy 2.2s linear both}
.motion.tl-vt .tl-run,.motion.tl-io .tl-run{animation:tl-ry 2.2s linear both}
.motion.tl-vt .tl-tok,.motion.tl-io .tl-tok{animation:tl-tk 2.2s linear both}
.motion.tl-vt .tl-d0::after,.motion.tl-io .tl-d0::after{animation:tl-d0 2.2s linear both}
.motion.tl-vt .tl-d1::after,.motion.tl-io .tl-d1::after{animation:tl-d1 2.2s linear both}
.motion.tl-vt .tl-d2::after,.motion.tl-io .tl-d2::after{animation:tl-d2 2.2s linear both}
.motion.tl-vt .tl-d3::after,.motion.tl-io .tl-d3::after{animation:tl-d3 2.2s linear both}
@media (min-width:900px){.motion.tl-vt .tl-fill,.motion.tl-io .tl-fill{animation-name:tl-fx}
.motion.tl-vt .tl-run,.motion.tl-io .tl-run{animation-name:tl-rx}}
/* con soporte: el tiempo es el scroll (empieza con la línea a 20 % del borde de abajo y termina con su final a 60 % del alto) */
.motion.tl-vt .tl-fill,.motion.tl-vt .tl-run,.motion.tl-vt .tl-tok,.motion.tl-vt .tl-dot::after{animation-timeline:--tl;animation-range:cover 20vh cover calc(100% - 60vh)}
/* sin soporte: en pausa en el inicio hasta que la línea entra en pantalla */
.motion.tl-io .tl:not(.tl-go) .tl-fill,.motion.tl-io .tl:not(.tl-go) .tl-run,.motion.tl-io .tl:not(.tl-go) .tl-tok,.motion.tl-io .tl:not(.tl-go) .tl-dot::after{animation-play-state:paused}
/* v15: título del héroe en una sola línea; tarjetas sin relleno destacado (solo un acento de color propio); IA o automatización más simple */
.hero h1 em.one{display:inline-block;white-space:nowrap;font-size:min(1em,8.4vw)}
.pil{--ac:#D97757}
.pil:nth-child(2){--ac:#2F7D68}
.pil:nth-child(3){--ac:#5B6FB0}
.pil{border-top:3px solid var(--ac)}
.pil-ic{background:color-mix(in srgb,var(--ac) 14%,#FFFEFC);border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.svi{stroke:color-mix(in srgb,var(--ac) 80%,#111113)}
.tg{border-color:color-mix(in srgb,var(--ac) 38%,transparent)}
#which .vm,#which .vf{display:none}
/* línea de proceso (escritorio): el riel cruza todo el ancho, los 4 puntos van al centro de cada tarjeta y se encienden cuando la línea pasa por ellos */
.faq-home{margin-top:0}
.faq-more{margin:22px 0 0}
.faq-more a{font-weight:600;text-decoration:underline;text-underline-offset:4px}
@keyframes tl-e0{0%,10%{opacity:0;transform:scale(.4)}14%,100%{opacity:1;transform:none}}
@keyframes tl-e1{0%,35%{opacity:0;transform:scale(.4)}39%,100%{opacity:1;transform:none}}
@keyframes tl-e2{0%,60%{opacity:0;transform:scale(.4)}64%,100%{opacity:1;transform:none}}
@keyframes tl-e3{0%,85%{opacity:0;transform:scale(.4)}89%,100%{opacity:1;transform:none}}
@media (min-width:900px){.tl-dot{left:calc(50% - 8px)}
.tl-rail{left:0;right:0}
.motion.tl-vt .tl-d0::after,.motion.tl-io .tl-d0::after{animation-name:tl-e0}
.motion.tl-vt .tl-d1::after,.motion.tl-io .tl-d1::after{animation-name:tl-e1}
.motion.tl-vt .tl-d2::after,.motion.tl-io .tl-d2::after{animation-name:tl-e2}
.motion.tl-vt .tl-d3::after,.motion.tl-io .tl-d3::after{animation-name:tl-e3}}
/* v15: ritmo de color (negro · blanco · negro · blanco · cierre negro · preguntas en blanco), texto más legible, acentos naranja */
:root{--muted:#4A505C}
main section h2 em{color:#D97757}
.pil-ic{width:76px;height:76px;border-radius:22px}
.svi{width:40px;height:40px}
#contact{position:relative;isolation:isolate;margin-inline:clamp(10px,2vw,28px);border-radius:clamp(22px,3.4vw,44px);color:#F4F2EC;overflow:hidden;
  background:radial-gradient(60% 90% at 78% 110%,rgba(217,119,87,.34),rgba(217,119,87,0) 70%),linear-gradient(180deg,#0B1C16 0%,#07140F 100%)}
#contact h2{color:#F4F2EC}
#contact .muted{color:#D5D3CB}
#contact :focus-visible{outline-color:#F4F2EC}
#faq-home{padding-top:clamp(56px,7vw,96px)}
/* v17: contraste AA del naranja en títulos grandes sobre fondo claro (#D97757 daba 2.97:1; #C4623F da 3.9:1). En bloques oscuros se mantiene #D97757 (6:1) */
main section h2 em{color:#C4623F}
.night h2 em,#contact h2 em{color:#D97757}
#about .cols p{max-width:62ch}
/* v19: sin WebGL se usa el render 3D fijo (img/quivo-3d.webp) con un vaivén suave */
.qv-img{object-fit:contain;animation:qv-bob 3.4s ease-in-out infinite}
@keyframes qv-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-4%) rotate(1deg)}}
.qv.off .qv-img{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.qv-img{animation:none}}
html.nm .qv-img{animation:none}

/* ---------- v21: texto bajo los títulos en serif (Instrument Serif) y más grande; héroe con el botón separado de Quivo; garantías en columnas ---------- */
.hero .sub,.head p.muted{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-style:normal;letter-spacing:-.005em}
.hero .sub{max-width:26ch;font-size:clamp(1.55rem,2.5vw,2.1rem);line-height:1.22;color:#EDEBE4}
.head p.muted{max-width:34ch;font-size:clamp(1.4rem,2vw,1.75rem);line-height:1.25;color:color-mix(in srgb,var(--ink) 80%,var(--bg))}
#contact .muted{color:#E4E2DA}
.hero .actions{flex-direction:column;align-items:center;gap:clamp(22px,3vw,34px)}
.hero .actions .qv{flex:none;width:clamp(120px,12vw,150px);min-width:0;margin:0}
.hero .assure{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;max-width:1040px;margin:clamp(28px,3.4vw,44px) auto 0;font-size:1rem;line-height:1.35;color:#E4E2DA;text-align:center}
.hero .assure li{justify-content:center;align-items:flex-start;padding:4px clamp(14px,2vw,28px);text-wrap:balance}
.hero .assure li+li{border-left:1px solid rgba(244,242,236,.16)}
.hero .assure li::before{margin-top:.55em;width:5px;height:5px}
@media (max-width:899px){.hero .assure{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;max-width:560px}
.hero .assure li:nth-child(odd){border-left:0}}
@media (max-width:599px){.hero .assure{grid-template-columns:minmax(0,1fr);max-width:340px}
.hero .assure li+li{border-left:0}.hero .sub{max-width:20ch}}

/* ---------- v24/v26: About solo texto: foto con pie a la izquierda, dos párrafos a la derecha ---------- */
.ab-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center}
@media (min-width:900px){.ab-wrap{grid-template-columns:minmax(0,320px) minmax(0,1fr)}}
#about .ab-l{display:grid;gap:14px;align-content:start;justify-items:start}
#about .ab-photo{width:min(100%,320px);border-radius:20px}
.ab-cap{display:grid;gap:2px;margin:0;font-size:.95rem;line-height:1.35;color:#3A3A3C}
.ab-cap b{font-size:1.15rem;letter-spacing:-.01em;color:#111113}
#about .ab-t p{max-width:60ch;margin:0 0 1.1em;font-size:clamp(1.1rem,1.45vw,1.25rem);line-height:1.6}
#about .ab-t p:last-child{margin-bottom:0}

/* ---------- v25: héroe más compacto: subtítulo en una línea, Quivo al lado del botón (con aire), garantías sin punto suelto ---------- */
.hero .sub{max-width:none;white-space:normal}
@media (min-width:600px){
.hero .actions{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(28px,3.4vw,48px);width:100%;max-width:760px;margin-inline:auto}
.hero .actions .btn{grid-column:2}
.hero .actions .qv{grid-column:3;justify-self:start;width:clamp(110px,11vw,140px)}}
.hero .assure li{display:block;text-align:center}
.hero .assure li::before{display:inline-block;vertical-align:middle;margin:-.15em .6em 0 0}

/* ---------- v27: sin etiqueta sobre el título; más aire entre título, subtítulo, botón y garantías ---------- */
.hero>.hero-copy{padding-top:clamp(120px,15vh,168px)}
.hero .sub{margin-top:clamp(28px,3.2vw,42px)}
.hero .actions{margin-top:clamp(40px,4.6vw,60px)}
.hero .assure{margin-top:clamp(52px,6vw,80px)}

/* ---------- v29: botón y Quivo como un solo grupo, centrado en la página ---------- */
@media (min-width:600px){
.hero .actions{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:clamp(20px,2.6vw,32px);width:auto;max-width:none}
.hero .actions .btn{grid-column:auto}
.hero .actions .qv{grid-column:auto;justify-self:auto;flex:none;width:clamp(104px,10vw,128px);margin:0}}

/* ---------- v29: áreas táctiles de 44 px en el celular ---------- */
@media (pointer:coarse),(max-width:899px){
.faq-more a,.back a,main p a[href*="instagram"]{display:inline-flex;align-items:center;min-height:44px}
.flv{min-height:44px}
.nw-tb,.nw-scroll .nw-tb{width:44px;height:44px}
.brand{min-height:44px}}