/* ClickaCierre — estilos compartidos de todas las landings (plantilla #7, desde el pilar SEO v21).
   El HTML de cada landing lo arma scripts/landing/render.mjs a partir de 04-content/landings/<página>.mjs.
   Motivo propio: la ficha de un resultado de búsqueda (URL con «›», título, fragmento) y las soluciones como un
   tablero de conexiones. Todo el texto está en el HTML; el JS solo anima, conecta y revela. */

@font-face{font-family:Archivo;src:url('fonts/archivo-guia.woff2') format('woff2');font-weight:300 750;font-display:swap}
@font-face{font-family:General;src:url('fonts/generalsans-guia.woff2') format('woff2');font-weight:200 700;font-display:swap}

:root{
  color-scheme:dark;
  --ink:#0b1220;
  --ink-2:#0f1723;
  --ink-3:#152033;
  --ink-rgb:11,18,32;
  --ink2-rgb:15,23,35;
  --paper:#f1f3e9;
  --paper-rgb:241,243,233;
  --soft:#c2ccd8;
  --muted:#9ba9ba;
  --dim:#8d9d91;
  --acc:#b8f34a;
  --acc-rgb:184,243,74;
  --acc-hi-rgb:208,255,126;
  --leak:#ff7a6b;
  --leak-rgb:255,122,107;
  --lime-wash:rgba(var(--acc-rgb),.07);
  --lime-edge:rgba(var(--acc-rgb),.34);
  --leak-wash:rgba(var(--leak-rgb),.08);
  --leak-edge:rgba(var(--leak-rgb),.36);
  --line:rgba(198,208,226,.16);
  --hair:rgba(198,208,226,.32);
  --grid:rgba(155,169,196,.07);
  --dots:rgba(155,169,196,.13);
  --shadow:rgba(2,5,10,.55);
  --lime:#b8f34a;
  --lime-hi:#d0ff7e;
  --night:#0b1220;
  --night-fg:#f1f3e9;
  --on-lime:#0b1220;
  --on-lime-soft:rgba(11,18,32,.72);
  --on-lime-line:rgba(11,18,32,.2);
  --display:Archivo,'Arial Narrow',Arial,sans-serif;
  --body:General,'Helvetica Neue',Arial,sans-serif;
  --mono:'Courier Prime','Courier New',ui-monospace,monospace;
  --gutter:max(16px,4vw);
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* modo claro: el mismo juego de nombres, con la paleta clara del inicio */
:root[data-mode="light"]{
  color-scheme:light;
  --ink:#eff1e8;
  --ink-2:#e6e9dc;
  --ink-3:#dce0d0;
  --ink-rgb:239,241,232;
  --ink2-rgb:230,233,220;
  --paper:#101a2b;
  --paper-rgb:16,26,43;
  --soft:#31404e;
  --muted:#4f5c68;
  --dim:#5a6672;
  --acc:#b8f34a;
  --acc-rgb:184,243,74;
  --acc-hi-rgb:208,255,126;
  --leak:#c2362b;
  --leak-rgb:194,54,43;
  --lime-wash:rgba(var(--acc-rgb),.3);
  --lime-edge:rgba(16,26,43,.28);
  --leak-wash:rgba(var(--leak-rgb),.07);
  --leak-edge:rgba(var(--leak-rgb),.34);
  --line:rgba(16,26,43,.15);
  --hair:rgba(16,26,43,.3);
  --grid:rgba(16,26,43,.06);
  --dots:rgba(16,26,43,.12);
  --shadow:rgba(16,26,43,.16);
}
/* islas: piezas que se quedan oscuras en los dos modos (la sonda, la esfera) */
.island{
  color-scheme:dark;
  --ink:#0b1220;
  --ink-2:#0f1723;
  --ink-3:#152033;
  --ink-rgb:11,18,32;
  --ink2-rgb:15,23,35;
  --paper:#f1f3e9;
  --paper-rgb:241,243,233;
  --soft:#c2ccd8;
  --muted:#9ba9ba;
  --dim:#8d9d91;
  --acc:#b8f34a;
  --acc-rgb:184,243,74;
  --acc-hi-rgb:208,255,126;
  --leak:#ff7a6b;
  --leak-rgb:255,122,107;
  --lime-wash:rgba(var(--acc-rgb),.07);
  --lime-edge:rgba(var(--acc-rgb),.34);
  --leak-wash:rgba(var(--leak-rgb),.08);
  --leak-edge:rgba(var(--leak-rgb),.36);
  --line:rgba(198,208,226,.16);
  --hair:rgba(198,208,226,.32);
  --grid:rgba(155,169,196,.07);
  --dots:rgba(155,169,196,.13);
  --shadow:rgba(2,5,10,.55);
  color:var(--paper);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:28px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{overflow-x:clip}
img,svg{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;text-wrap:balance}
::selection{color:var(--on-lime);background:var(--lime)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em}
.skip{position:absolute;left:16px;top:8px;z-index:90;padding:12px 14px;background:var(--lime);color:var(--on-lime);transform:translateY(-180%)}
.skip:focus{transform:none}
.wrap{width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.label{font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.muted{color:var(--muted);font-size:15px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);flex:none}
.dot.is-leak{background:var(--leak)}

/* ------------------------------------------------ progreso y cabecera */

.progress{position:fixed;inset:0 0 auto;z-index:70;height:2px;pointer-events:none}
.progress i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--p,0))}

.header{display:flex;align-items:center;gap:28px;height:78px;width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;font:750 26px/1 var(--display);letter-spacing:-1.5px;color:var(--paper);text-decoration:none}
.brand-a{display:inline-grid;place-items:center;width:20px;height:20px;margin:5px 2px 0;border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:19px;font-weight:550;letter-spacing:-1px;transform:rotate(-14deg)}
.header-nav{display:flex;gap:26px;margin-left:auto;font-size:14px}
.header-nav a{color:var(--soft);text-decoration:none}
.header-nav a:hover{color:var(--acc)}
.header-cta{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--lime-edge);border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.header-cta .i{color:var(--acc);transition:color .2s}
.header-cta:hover{background:var(--lime);color:var(--on-lime)}
.header-cta:hover .i{color:var(--on-lime)}

/* ------------------------------------------------ hero */

.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,76px) clamp(48px,6vw,80px)}
.hero:before{content:'';position:absolute;right:-8%;top:4%;width:62%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc-rgb),.1),transparent 64%);pointer-events:none;z-index:-1}

.serp{display:flex;align-items:center;gap:12px}
.serp-fav{display:grid;place-items:center;width:30px;height:30px;padding-bottom:3px;border-radius:50%;background:var(--lime);color:var(--on-lime);font:550 21px/1 var(--display);transform:rotate(-14deg)}
.serp-lines{display:flex;flex-direction:column;line-height:1.3}
.serp-site{font-size:14px;font-weight:500;color:var(--paper)}
.serp-url{display:flex;flex-wrap:wrap;font:400 13px/1.4 var(--mono);color:var(--muted)}
.serp-url li+li:before{content:'›';margin:0 .5em;color:var(--dim)}
.serp-url a{text-decoration:none}
.serp-url a:hover{color:var(--acc);text-decoration:underline}
.serp-url [aria-current]{color:var(--soft)}

.hero h1{margin:.14em 0 .2em;font:700 clamp(72px,11.6vw,178px)/.84 var(--display);letter-spacing:-.058em}
.h1-key{position:relative;color:var(--acc);white-space:nowrap}
.h1-key:after{content:'';position:absolute;left:.03em;right:.04em;bottom:-.04em;height:.04em;background:var(--acc);transform-origin:0 50%;animation:underline 1.1s .35s var(--ease) both}
@keyframes underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.thesis{text-wrap:balance;margin-top:.5em;font:600 clamp(24px,2.5vw,34px)/1.15 var(--display);letter-spacing:-.025em}
.lead{max-width:56ch;margin-top:18px;font-size:18px;line-height:1.6;color:var(--soft)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.btn{display:inline-flex;align-items:center;gap:12px;padding:16px 22px;border-radius:12px;background:var(--lime);color:var(--on-lime);font-size:16px;font-weight:600;text-decoration:none;transition:background .2s,box-shadow .2s,translate .2s}
.btn:hover{background:var(--lime-hi);box-shadow:0 14px 34px rgba(var(--acc-rgb),.2);translate:0 -2px}
.text-link{padding-bottom:3px;border-bottom:1px solid var(--hair);font-size:15px;text-decoration:none}
.text-link:hover{color:var(--acc);border-color:var(--acc)}
.geo{margin-top:30px}

/* la sonda: el mismo síntoma baja por las capas hasta donde se atasca */
.probe{position:relative;padding:22px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(21,32,51,.9),rgba(15,23,35,.96));box-shadow:0 40px 90px -40px var(--shadow)}
.probe-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.probe-head .label:first-child{color:var(--soft)}
.probe-search{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 18px;border:1px solid var(--hair);border-radius:999px;background:var(--ink);font-size:16px}
.probe-search .i{width:18px;height:18px;color:var(--muted)}
.probe-q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.caret{display:inline-block;width:2px;height:20px;margin-left:-8px;background:var(--acc);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.probe-sym{display:flex;align-items:center;gap:9px;margin:14px 4px 16px;font-size:14px;color:var(--soft)}
.layers{display:flex;flex-direction:column;gap:6px}
.layers li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:14px;padding:9px 12px 9px 8px;border-radius:14px;transition:background .35s,opacity .35s}
.layers li:not(:last-child):after{content:'';position:absolute;left:27px;top:calc(50% + 20px);height:calc(100% - 34px);width:2px;background:var(--line);transition:background .35s}
.layers li.is-ok:not(:last-child):after{background:var(--lime-edge)}
.layer-ic{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--line);border-radius:50%;background:var(--ink);color:var(--muted);transition:border-color .35s,color .35s,background .35s}
.layer-ic .i{width:18px;height:18px}
.layer-txt{display:flex;flex-direction:column;line-height:1.3}
.layer-txt b{font-size:15px;font-weight:600}
.layer-txt span{font-size:13.5px;color:var(--muted)}
.layer-state{font:400 12px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);text-align:right}
.layers li.is-ok .layer-ic{border-color:var(--lime-edge);color:var(--acc);background:var(--lime-wash)}
.layers li.is-ok .layer-state{color:var(--acc)}
.layers li.is-stuck{background:var(--leak-wash)}
.layers li.is-stuck .layer-ic{border-color:var(--leak);color:var(--leak);background:var(--leak-wash);animation:stuck 1.6s ease-out infinite}
.layers li.is-stuck .layer-state{color:var(--leak);font-weight:700}
.layers li.is-dim{opacity:.36}
.layers li.is-pending .layer-state{visibility:hidden}
@keyframes stuck{0%{box-shadow:0 0 0 0 rgba(var(--leak-rgb),.45)}100%{box-shadow:0 0 0 12px rgba(var(--leak-rgb),0)}}
.probe-out{min-height:84px;margin-top:14px;padding:14px 16px;border-top:1px dashed var(--line);transition:opacity .3s}
.probe-out.is-hidden{opacity:0}
.probe-note{font-size:14.5px;color:var(--soft)}
.probe-route{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:8px}
.probe-route a{display:inline-flex;align-items:center;gap:8px;color:var(--acc);font:600 19px/1.2 var(--display);letter-spacing:-.01em;text-decoration:none}
.probe-route a:hover{text-decoration:underline;text-underline-offset:4px}
.probe-pager{display:flex;gap:6px;justify-content:center;margin-top:10px}
.probe-pager button{width:22px;height:22px;padding:0;border:0;background:none;display:grid;place-items:center}
.probe-pager button:before{content:'';width:8px;height:8px;border-radius:99px;background:var(--hair);transition:width .3s,background .3s}
.probe-pager button[aria-pressed=true]:before{width:20px;background:var(--acc)}

/* ------------------------------------------------ cifras */


/* ------------------------------------------------ secciones */

.section{padding-block:clamp(64px,11vw,150px) 0}
.eyebrow{font:400 13px/1.4 var(--mono);color:var(--acc)}
.eyebrow span{color:var(--dim)}
.section h2{max-width:17ch;margin:.3em 0 .55em;font:650 clamp(38px,5.6vw,82px)/.96 var(--display);letter-spacing:-.047em}
.section h2.h2-sm{max-width:22ch;font-size:clamp(32px,3.8vw,56px);line-height:1}
h3{font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.022em}
h4{font:600 17px/1.35 var(--body)}
.section-lead{max-width:62ch;font-size:19px;line-height:1.6;color:var(--soft)}

/* qué resuelve */

.signal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;margin-top:20px}
.signal{padding-top:18px;border-top:1px solid var(--hair)}
.signal p{font-size:15.5px;color:var(--soft)}
.glyph{display:block;width:132px;height:64px;margin-bottom:14px}

/* encaje */
.fit{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,6vw,80px);align-items:start}
.fit h3{margin-bottom:14px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.tags li{padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--ink-2);font:400 13px/1.3 var(--mono);color:var(--soft)}
.fit-no{padding:clamp(22px,3vw,32px);border:1px solid var(--line);border-radius:22px;background:var(--ink-2)}
.nolist li{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.nolist .i{flex:none;width:22px;height:22px;padding:4px;margin-top:2px;border-radius:50%;border:1px solid var(--hair);color:var(--soft)}
.related{margin-top:20px;font-size:15px;color:var(--soft)}
.related a,.demo a{color:var(--acc);text-underline-offset:3px}

/* rutas: el tablero */
.section-map{margin-top:clamp(80px,11vw,150px);padding-block:clamp(72px,9vw,120px);border-block:1px solid var(--line);background-color:var(--ink-2);background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:26px 26px}
.map-h3{margin-top:clamp(44px,5vw,64px)}
.map-intro{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px;margin:12px 0 30px}
.map-intro h4{color:var(--acc)}
.map-intro p{max-width:62ch;font-size:15px;color:var(--soft)}

.board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(96px,10vw,156px) minmax(0,.6fr) minmax(0,1.1fr);align-items:start}
.board-q{display:flex;flex-direction:column;gap:6px}
.board-q button{position:relative;z-index:2;display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px 12px 18px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--ink-rgb),.72);color:var(--soft);font-size:15px;line-height:1.38;text-align:left;touch-action:pan-y;transition:background .2s,border-color .2s,color .2s}
.q-txt{flex:1;min-width:0}
.board-q button:hover{border-color:var(--hair);color:var(--paper)}
.board-q button.is-focus{border-color:var(--lime);background:var(--lime);color:var(--on-lime);font-weight:500}
@keyframes pulse{from{stroke-dashoffset:108}to{stroke-dashoffset:0}}
.board-st{display:flex;flex-direction:column;padding-top:2px}
.st-grp{padding:16px 0 5px 22px;font:400 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.st-grp:first-child{padding-top:0}
.st{position:relative;z-index:2;padding:7px 8px 7px 22px;font-size:15px;color:var(--soft);cursor:pointer;transition:color .2s}
.st:before{content:'';position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border:1.5px solid var(--hair);border-radius:50%;background:var(--ink-2);transition:background .2s,border-color .2s,box-shadow .2s}
.st:hover{color:var(--paper)}
.st.is-active{color:var(--acc);font-weight:600}
.st.is-active:before{border-color:var(--acc);background:var(--acc);box-shadow:0 0 0 5px rgba(var(--acc-rgb),.16)}
.board-panels{position:sticky;top:96px;margin-left:clamp(20px,3vw,44px);display:flex;flex-direction:column;gap:16px}
.board.is-live .panel:not(.is-active){display:none}
.panel{padding:26px;border:1px solid var(--hair);border-radius:22px;background:var(--ink);box-shadow:0 30px 70px -40px var(--shadow)}
.board.is-live .panel.is-active{animation:panel-in .38s var(--ease) both}
@keyframes panel-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.panel-name{margin-top:4px;font:650 clamp(28px,2.6vw,38px)/1.05 var(--display);letter-spacing:-.035em;color:var(--acc)}
.panel-note{margin-top:10px;font-size:15.5px;color:var(--soft)}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:20px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.panel-grid>div{padding:13px 15px;background:var(--ink)}
.panel-grid>div:first-child,.panel-grid>div:nth-child(4):last-child{grid-column:1/-1}
.panel-grid dt{font:400 12px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.panel-grid dd{margin-top:4px;font-size:15px;line-height:1.45}
.panel-grid .is-ok dt{color:var(--acc)}
.panel-grid .is-bad dt{color:var(--muted)}
.panel-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:var(--acc);font-weight:600;text-decoration:none;border-bottom:1px solid var(--lime-edge);padding-bottom:2px}
.panel-link:hover{border-color:var(--acc)}

.matrix{margin-top:44px}
.matrix summary{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid var(--hair);border-radius:999px;font-size:15px;cursor:pointer;list-style:none;transition:border-color .2s}
.matrix summary::-webkit-details-marker{display:none}
.matrix summary:hover{border-color:var(--acc)}
.matrix summary .i{transition:rotate .25s}
.matrix[open] summary .i{rotate:180deg}
.matrix-scroll{margin-top:20px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--ink)}
.matrix table{width:100%;min-width:1040px;border-collapse:collapse;font-size:14.5px;line-height:1.45}
.matrix th,.matrix td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.matrix thead th{font:400 12px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.matrix tbody th{font-weight:600}
.matrix td{color:var(--soft)}
.matrix tbody tr:last-child>*{border-bottom:0}
.matrix a{color:var(--acc);text-underline-offset:3px}

/* alcance */
.scope{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,80px);align-items:start}
.tree{padding:26px 28px;border:1px solid var(--line);border-radius:22px;background:var(--ink-2)}
.tree-root{font:700 16px/1 var(--mono);color:var(--acc)}
.tree>ul{margin:10px 0 0 8px}
.tree>ul>li{position:relative;display:grid;grid-template-columns:minmax(128px,.55fr) minmax(0,1fr);gap:4px 16px;align-items:baseline;padding:10px 0 10px 30px}
.tree>ul>li:before{content:'';position:absolute;left:0;top:0;bottom:0;border-left:1px solid var(--hair)}
.tree>ul>li:last-child:before{bottom:50%}
.tree>ul>li:after{content:'';position:absolute;left:0;top:50%;width:20px;border-top:1px solid var(--hair)}
.tree code{font:400 14px/1.3 var(--mono);color:var(--paper)}
.tree>ul>li span{font-size:15px;color:var(--soft)}
.tree>ul>li.is-cond code{color:var(--dim)}
.tree>ul>li.is-cond span{color:var(--muted)}
.tree>ul>li.is-cond:after{border-top-style:dashed}
.tree.rv-armed>ul>li{opacity:0;translate:-8px 0}
.tree.is-in>ul>li{opacity:1;translate:0 0;transition:opacity .45s,translate .45s var(--ease)}
.tree.is-in>ul>li:nth-child(2){transition-delay:.08s}.tree.is-in>ul>li:nth-child(3){transition-delay:.16s}.tree.is-in>ul>li:nth-child(4){transition-delay:.24s}.tree.is-in>ul>li:nth-child(5){transition-delay:.32s}.tree.is-in>ul>li:nth-child(6){transition-delay:.4s}.tree.is-in>ul>li:nth-child(7){transition-delay:.48s}


.checks{margin:10px 0 18px}
.checks li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px}
.checks .i{margin-top:5px;color:var(--acc)}

.track b{display:block;margin-bottom:6px;font:600 20px/1.2 var(--display);letter-spacing:-.01em}
.track p{font-size:15.5px;line-height:1.55;color:var(--soft)}
.track .track-get{display:flex;gap:9px;margin-top:8px;color:var(--paper);font-weight:500}
.track-get:before{content:'';flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--acc)}

.inline-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;margin-top:clamp(64px,8vw,96px);padding:26px 30px;border:1px solid var(--lime-edge);border-radius:20px;background:var(--lime-wash)}
.inline-cta p{max-width:52ch;font-size:18px;line-height:1.5}

/* proceso */

.ladder{padding:26px;border:1px solid var(--line);border-radius:22px;background:var(--ink)}
.ladder figcaption{display:flex;flex-direction:column;gap:4px;margin-bottom:22px;font-size:16px;color:var(--soft)}
.ladder figcaption .label{color:var(--acc)}
/* v9: un embudo, de más a menos. El nombre de cada paso a la izquierda; a la derecha su banda, centrada y más
   angosta en cada paso (el ancho sale de --h). Los puntos, las paredes y quienes bajan los dibuja el canvas */
.steps{display:flex;flex-direction:column;gap:12px}
.steps li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto auto;align-items:center;column-gap:16px}
.steps span{grid-column:1;grid-row:1;font-size:15px;font-weight:500;line-height:1.3}
.steps i{grid-column:2;grid-row:1/3;justify-self:center;display:block;width:calc(var(--h) * 100%);height:34px;border:1px solid rgba(var(--acc-rgb),.3);border-radius:9px}
.steps li.is-cond i{border:1.5px dashed var(--lime-edge)}
.steps em{grid-column:1;grid-row:2;margin-top:3px;font:400 11.5px/1.35 var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}



/* evidencia */
.demo{padding:clamp(22px,4vw,44px);border:1px solid var(--line);border-radius:26px;background:var(--ink-2)}
.demo-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);margin-top:26px;align-items:start}
.demo-facts>div{padding:12px 0;border-bottom:1px solid var(--line)}
.demo-facts dt{font:400 12px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.demo-facts dd{margin-top:4px;font-size:16px}
/* v9: dónde aparece hoy la tienda del ejemplo, búsqueda por búsqueda */
.serp-check{padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--ink)}
.serp-check ol{margin-top:8px}
.serp-check li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line)}
.serp-check li:last-child{border-bottom:0}
.sc-q{display:flex;align-items:center;gap:9px;min-width:0;font-size:14.5px;line-height:1.35;color:var(--soft)}
.sc-q .i{width:14px;height:14px;color:var(--muted)}
.serp-check b{flex:none;padding:4px 9px;border-radius:999px;font:700 11.5px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.serp-check b.is-top{background:var(--lime);color:var(--on-lime)}
.serp-check b.is-miss{border:1px dashed rgba(var(--leak-rgb),.65);color:var(--leak)}
.serp-check b.is-far{border:1px solid var(--hair);color:var(--soft)}
.sc-why{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--soft)}
.timeline{margin-top:30px}
.tl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto minmax(0,1.1fr);grid-template-rows:auto auto;gap:10px 6px;margin-top:12px}
.tl li{display:flex;align-items:center;padding:13px 14px;border:1px solid var(--lime-edge);border-radius:10px;background:var(--lime-wash);font-size:14.5px;font-weight:500;line-height:1.3}
.tl .tl-span{grid-column:1/4;grid-row:1;padding:0 0 8px;border:0;border-bottom:1.5px solid var(--hair);border-radius:0;background:none;font:400 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tl li:not(.tl-span){grid-row:2}
.tl .tl-launch{gap:8px;padding:13px 12px;border:0;border-left:2px solid var(--acc);border-radius:0;background:none;color:var(--acc);font:700 12.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.tl .tl-after{border-style:dashed;background:linear-gradient(90deg,var(--lime-wash),transparent)}
.demo-measure{display:flex;align-items:flex-start;gap:12px;margin-top:22px;padding:14px 16px;border:1px solid var(--lime-edge);border-radius:14px;background:var(--lime-wash);font-size:15.5px;line-height:1.5}
.demo-measure:before{content:'';flex:none;width:8px;height:8px;margin-top:.6em;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.18)}


/* inversión */
.invest{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,80px);align-items:start}
.vars h3{margin-bottom:12px}
.vars>p{max-width:52ch;color:var(--soft);font-size:16px}
.var-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.var-grid button{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1px solid var(--hair);border-radius:999px;background:transparent;color:var(--soft);font-size:15px;transition:background .2s,color .2s,border-color .2s}
.var-grid button:before{content:'';width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;transition:background .2s}
.var-grid button:hover{border-color:var(--acc);color:var(--paper)}
.var-grid button[aria-pressed=true]{border-color:var(--lime);background:var(--lime);color:var(--on-lime);font-weight:500}
.var-grid button[aria-pressed=true]:before{background:var(--on-lime);border-color:var(--on-lime)}
.var-bar{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;width:min(240px,100%)}
.var-bar i{height:10px;border-radius:3px;background:var(--line);transition:background .25s}
.var-bar i.on{background:var(--acc)}

/* preguntas */
.faq-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,6vw,80px);align-items:start}
.faq-side{position:sticky;top:96px}
.faq-side .muted{max-width:30ch;font-size:16px}
.faq-layout .chat{margin-top:0}

/* ------------------------------------------------ siguiente paso */

.next{margin-top:clamp(96px,12vw,160px);padding-block:clamp(72px,9vw,120px);background:var(--lime);color:var(--on-lime);position:relative;overflow:hidden}
.next-in{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(32px,6vw,80px);align-items:center}
.next h2{display:flex;align-items:center;gap:10px;font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.next h2 i{width:8px;height:8px;border-radius:50%;background:var(--on-lime)}
.next-title{max-width:16ch;margin:.35em 0 .4em;font:700 clamp(40px,5.4vw,80px)/.97 var(--display);letter-spacing:-.048em}
.next-lead{max-width:54ch;font-size:18px;line-height:1.55}
.btn-dark{display:inline-flex;align-items:center;gap:14px;margin-top:28px;padding:18px 26px;border-radius:12px;background:var(--night);color:var(--night-fg);font-size:17px;font-weight:600;text-decoration:none;transition:translate .2s,box-shadow .2s}
.btn-dark .i{color:var(--lime)}
.btn-dark:hover{translate:0 -2px;box-shadow:0 16px 34px -12px rgba(11,18,32,.6)}
.next-support{margin-top:14px;font:700 13px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}
.next-more{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,64px);align-items:start;margin-top:clamp(40px,5vw,56px)}
.next-cols{display:flex;flex-direction:column;gap:26px}
.next-case{max-width:52ch;margin-top:16px;padding:12px 16px;border-radius:12px;background:rgba(11,18,32,.08);font-size:15px;line-height:1.5}
.next-case b{font-weight:700}
.next-cols h4{margin-bottom:10px;font-weight:700}
.next-cols p{font-size:15px;line-height:1.55}
.after{counter-reset:a;display:flex;flex-direction:column;gap:10px}
.after li{position:relative;padding-left:34px;font-size:15px;line-height:1.5;counter-increment:a}
.after li:before{content:counter(a);position:absolute;left:0;top:0;display:grid;place-items:center;width:23px;height:23px;border:1.5px solid var(--on-lime);border-radius:50%;font:700 12px/1 var(--mono)}
.next-bound{font-size:14.5px;color:var(--on-lime-soft)}
.next-bound a{color:var(--on-lime);text-underline-offset:3px}

.dial-track{fill:none;stroke:rgba(241,243,233,.14);stroke-width:12}
.dial-arc{fill:none;stroke:var(--acc);stroke-width:12;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:120px 120px;transition:stroke-dashoffset 2.4s var(--ease)}
.dial-wrap.rv-armed .dial-arc{stroke-dashoffset:100}
.dial-ticks line{stroke:var(--paper);stroke-width:1.5;stroke-linecap:round}
.dial-ticks line.is-major{stroke-width:3}
.dial-num{fill:var(--paper);font:700 76px var(--display);letter-spacing:0}
.dial-unit{fill:var(--muted);font:700 12px var(--mono);letter-spacing:2px;text-transform:uppercase}
.dial-legend{display:flex;flex-direction:column;gap:8px}
.dial-legend li{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--paper)}
.dial-legend li:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc)}

/* ------------------------------------------------ pie: ver «v8, firma de marca» al final */

/* ------------------------------------------------ dock */

.dock{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;align-items:center;gap:16px;max-width:calc(100% - 24px);padding:7px 7px 7px 18px;border:1px solid var(--hair);border-radius:999px;background:rgba(var(--ink2-rgb),.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 50px -18px var(--shadow);transform:translate(-50%,160%);opacity:0;transition:transform .45s var(--ease),opacity .3s}
.dock.is-shown{transform:translate(-50%,0);opacity:1}
.dock-sec{display:flex;align-items:center;gap:12px;min-width:0;font-size:14px;color:var(--soft)}
.dock-sec>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-bar{flex:none;width:38px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.dock-bar i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.dock-cta{display:inline-flex;align-items:center;gap:8px;flex:none;padding:10px 16px;border-radius:999px;background:var(--lime);color:var(--on-lime);font-size:14px;font-weight:600;text-decoration:none}


/* ------------------------------------------------ v2: prosa, foto, ficha, metas, tablero ordenado */

.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:center}
.story-copy{display:flex;flex-direction:column;gap:16px;max-width:60ch}
.story-copy p{color:var(--soft)}
.story-copy .story-lead{font:500 clamp(21px,2vw,26px)/1.4 var(--display);letter-spacing:-.012em;color:var(--paper)}


.goal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:28px}
.goal{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--ink-2)}
.goal b{font:650 clamp(26px,2.6vw,34px)/1.05 var(--display);letter-spacing:-.035em;color:var(--acc)}
.goal>span{margin-top:8px;font-size:15.5px;color:var(--soft)}

/* tablero: conectores y cables ordenados, uno por carril */
.board-chan{align-self:stretch}
.board-wires{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}
.board.is-dragging .board-wires{z-index:4}
.board-wires .cable{fill:none;stroke:var(--hair);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s,stroke-width .3s}
.board-wires .cable.is-active{stroke:var(--acc);stroke-width:2.4;filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.35))}
.board-wires .cable.is-preview{stroke:var(--lime-edge);stroke-dasharray:3 6}
.board-wires .cable.is-draw{transition:stroke-dashoffset .7s var(--ease)}
.board-wires .cable.is-live{stroke:var(--acc);stroke-width:2.4;stroke-dasharray:none}
.board-wires .pulse{fill:none;stroke:rgb(var(--acc-hi-rgb));stroke-width:3.4;stroke-linecap:round;stroke-dasharray:6 102;animation:pulse 1.8s linear infinite}
.board-wires .head{fill:var(--acc);stroke:var(--ink);stroke-width:2}
.plug{position:relative;flex:none;display:grid;place-items:center;width:18px;height:28px;margin-right:-26px;border:1.5px solid var(--hair);border-radius:6px;background:var(--ink-2);cursor:grab;transition:border-color .2s,background .2s}
.plug i{width:6px;height:10px;border-left:1.5px solid var(--muted);border-right:1.5px solid var(--muted)}
.board-q button:hover .plug{border-color:var(--acc)}
.board-q button[aria-pressed=true] .plug{border-color:var(--acc);background:var(--ink)}
.board-q button[aria-pressed=true] .plug i{border-color:var(--acc)}
.board.is-dragging,.board.is-dragging *{cursor:grabbing !important;user-select:none}
.st.is-linked:before{border-color:var(--soft);background:var(--soft)}
.st.is-target:before{border-color:var(--acc);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.22);animation:target 1s ease-in-out infinite alternate}
.st.is-target{color:var(--paper)}
@keyframes target{to{box-shadow:0 0 0 11px rgba(var(--acc-rgb),.06)}}
.board-tools{display:flex;align-items:center;gap:18px;margin-top:18px}
.board-hint{color:var(--muted)}
.board-clear{padding:7px 13px;border:1px solid var(--hair);border-radius:999px;background:none;color:var(--soft);font-size:13.5px}
.board-clear:hover{border-color:var(--acc);color:var(--paper)}

/* línea de validación que fluye */
.track-wrap{position:relative;margin-top:14px}
.track-flow{position:absolute;top:-30px;left:-10px;width:calc(100% + 20px);height:calc(100% + 40px);pointer-events:none}
.track{position:relative;display:grid;grid-template-columns:1fr;gap:30px;padding-left:50px}
.track>li{position:relative}
.track-n{position:absolute;left:-50px;top:-3px;z-index:1;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--acc);border-radius:50%;background:var(--ink);color:var(--acc);font:700 13px/1 var(--mono)}

/* escalera con columnas de puntos */
.steps-wrap{position:relative}
.ladder-dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* foto ancha */

/* CTA: foto humana con la esfera encima */
.next-visual{position:relative;justify-self:end;width:100%;max-width:420px}
.dial-card{position:absolute;left:-40px;bottom:-34px;display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:20px;background:var(--ink);box-shadow:0 24px 50px -20px rgba(11,18,32,.7)}
.dial-card .dial{width:104px;height:104px;overflow:visible}
.dial-card .dial-num{font-size:92px}
.dial-card.rv-armed{opacity:1;translate:none}
.dial-card.rv-armed .dial-arc{stroke-dashoffset:100}
.dial-legend{display:flex;flex-direction:column;gap:6px}
.dial-stamp{position:absolute;top:18px;right:18px;padding:8px 13px;border-radius:8px;background:var(--night);color:var(--lime);font:700 12.5px/1.2 var(--mono);letter-spacing:.06em;text-transform:uppercase}


/* ------------------------------------------------ v3: interruptor, tablero arriba, diagnóstico */

.mode{display:inline-flex;align-items:center;gap:8px;margin-left:8px;padding:9px 13px;border:1px solid var(--hair);border-radius:999px;background:none;color:var(--soft);font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,color .2s}
.mode:hover{border-color:var(--acc);color:var(--paper)}
.mode .i{width:15px;height:15px}
:root:not([data-mode="light"]) .mode .is-moon,:root[data-mode="light"] .mode .is-sun{display:none}
.probe{border-color:rgba(198,208,226,.16)}
:root[data-mode="light"] .probe{box-shadow:0 40px 80px -40px rgba(16,26,43,.45)}
.probe-cta{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;padding:11px 14px;border-radius:12px;background:var(--lime-wash);color:var(--acc);font-size:14px;font-weight:500;text-decoration:none;transition:background .2s}
.probe-cta:hover{background:rgba(var(--acc-rgb),.14)}
.section-map.is-first{margin-top:clamp(12px,2vw,24px)}
.map-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;margin-bottom:34px}
.map-top .section-lead{font-size:18px}
.map-intro{display:flex;flex-direction:column;gap:6px;margin:0}
.map-h3{margin:0;font-size:clamp(20px,1.9vw,24px)}
.map-intro h4{color:var(--acc)}
#metas .section-lead{margin-bottom:6px}

.scan{padding:24px 26px;border-radius:20px;background:var(--night);color:var(--night-fg)}
.scan h4{font:600 19px/1.3 var(--display);color:var(--night-fg)}
.scan-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 28px;margin-top:16px}
.scan-part{margin-bottom:6px;font:400 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.scan-list li{position:relative;display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(241,243,233,.1);font-size:14.5px;color:#c2ccd8}
.scan-list li:before{content:'';flex:none;width:14px;height:14px;border:1.5px solid rgba(241,243,233,.3);border-radius:50%;transition:background .3s,border-color .3s,box-shadow .3s}
.scan-list li.is-done{color:var(--night-fg)}
.scan-list li.is-done:before{border-color:var(--lime);background:radial-gradient(circle,var(--lime) 0 3px,transparent 3.5px)}
.scan-list li.is-now:before{border-color:var(--lime);box-shadow:0 0 0 5px rgba(184,243,74,.18)}
.scan-list li.is-now{color:var(--night-fg)}
.scan-end{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px;font-weight:600;color:var(--night-fg)}
.scan-end i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 5px rgba(184,243,74,.16)}

/* ------------------------------------------------ revelado al hacer scroll */

.rv-armed{opacity:0;translate:0 18px}
.is-in{opacity:1;translate:0 0;transition:opacity .7s,translate .7s var(--ease)}

/* ------------------------------------------------ responsive */

@media (max-width:1180px){
  .board{grid-template-columns:minmax(0,1fr) clamp(80px,10vw,130px) minmax(0,.72fr)}
  .board-panels{grid-column:1/-1;position:static;margin:28px 0 0}
}
@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero:before{width:120%;right:-10%;top:45%}
  .header-nav{display:none}
  .header-cta{margin-left:auto}
  .story,.fit,.scope,.invest,.faq-layout,.demo-body,.next-in,.next-more,.map-top{grid-template-columns:1fr}
  .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .next-visual{max-width:440px;margin-top:24px}
  .faq-side{position:static}
}
@media (max-width:760px){
  body{font-size:16px}
  .scan-cols{grid-template-columns:1fr}
  .mode span{display:none}
  .header{gap:10px}
  .brand{font-size:23px}
  .header-cta{padding:9px 12px;font-size:13px;gap:6px}
  .header-cta .i{display:none}
  .mode{padding:9px}
  .scan{padding:20px}
  .dial-card{left:12px;right:12px;bottom:-40px}
  .tl{grid-template-columns:1fr}
  .tl .tl-span,.tl li:not(.tl-span){grid-column:auto;grid-row:auto}
  .layers li{grid-template-columns:36px minmax(0,1fr);gap:12px}
  .layers li:not(:last-child):after{left:25px}
  .layer-ic{width:36px;height:36px}
  .layer-state{grid-column:2;text-align:left;margin-top:-4px}
  .layers li.is-dim .layer-state,.layers li.is-pending .layer-state{display:none}
  .probe{padding:16px;border-radius:20px}
  .tree{padding:20px}
  .tree>ul>li{grid-template-columns:1fr;gap:2px}
  .dock{left:12px;right:12px;max-width:none;transform:translateY(160%)}
  .dock.is-shown{transform:none}
  .dock-sec{flex:1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation:none !important;transition:none !important}
  .rv-armed{opacity:1;translate:none}
}


/* ------------------------------------------------ v4: móvil primero, cómo trabajamos, tu caso */

/* banda de cómo trabajamos: el mismo fondo punteado del tablero, para cortar el ritmo */
.section.section-band{margin-top:clamp(64px,11vw,150px);padding-block:clamp(56px,9vw,120px);border-block:1px solid var(--line);background-color:var(--ink-2);background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:26px 26px}
.work{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,80px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.work .ladder{position:sticky;top:96px}
@media (max-width:980px){.work{grid-template-columns:1fr}.work .ladder{position:static}}

.tree-tags{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.tree-tags .tags{margin-bottom:0}
.needs h3{margin-bottom:6px}
.needs .muted{margin-top:4px}

/* tu caso: lo que se marca viaja al diagnóstico */
.case{padding:24px;border:1px solid var(--lime-edge);border-radius:22px;background:var(--ink-2)}
.case-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.case-head .label{color:var(--acc)}
.case-head .var-bar{width:min(160px,50%)}
.case-empty{margin-top:14px;font-size:15.5px;color:var(--soft)}
.case-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.case-list:empty{display:none}
.case-list li{padding:7px 12px;border:1px solid var(--lime-edge);border-radius:999px;background:var(--lime-wash);font-size:14.5px;font-weight:500;animation:chip-in .35s var(--ease) both}
@keyframes chip-in{from{opacity:0;scale:.9}}
.case-cta{margin-top:20px}

.hint-touch{display:none}

@media (max-width:760px){
  .section-map{padding-block:56px}
  .map-top{margin-bottom:22px}
  .hint-desk{display:none}
  .hint-touch{display:inline}
  .panel{padding:18px}
  .panel-grid>div{padding:11px 12px}
  .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .goal{padding:16px 14px}
  .goal .glyph,.signal .glyph{width:100%;height:46px;margin-bottom:10px}
  .goal b{font-size:23px}
  .goal>span{font-size:14px;line-height:1.45}
  .signal-grid{gap:18px 16px}
  .signal{padding-top:14px}
  .signal p{font-size:14.5px;line-height:1.5}
  .story-copy .story-lead{font-size:20px}
  .fit-no{padding:20px}
  .track{gap:24px;padding-left:44px}
  .track-n{left:-44px}
  .ladder{padding:20px}
  .inline-cta{padding:20px}
  .inline-cta p{font-size:17px}
  .demo{padding:18px}
  .tl li{padding:10px 12px}
  .case{padding:20px}
  .var-grid{gap:8px}
  .var-grid button{padding:8px 13px;font-size:14px}
  .next-title{margin-top:.3em}
  .next-more{margin-top:24px}
}


/* ------------------------------------------------ v5: lima en los dos modos, tablero en el celular, cursor */

/* modo claro: la lima es relleno y resaltador; el texto se queda en tinta */
:root[data-mode="light"] :focus-visible{outline-color:var(--paper)}
:root[data-mode="light"] .eyebrow{display:inline-block;padding:4px 9px;border-radius:7px;background:var(--lime);color:var(--on-lime)}
:root[data-mode="light"] .eyebrow span{color:rgba(11,18,32,.58)}
.h1-key{isolation:isolate}
:root[data-mode="light"] .h1-key{color:var(--paper)}
:root[data-mode="light"] .h1-key:after{bottom:.06em;height:.3em;z-index:-1;background:var(--lime)}
:root[data-mode="light"] .header-cta{border-color:var(--lime);background:var(--lime);color:var(--on-lime)}
:root[data-mode="light"] .header-cta .i{color:var(--on-lime)}
:root[data-mode="light"] .header-nav a:hover,:root[data-mode="light"] .serp-url a:hover,:root[data-mode="light"] .text-link:hover{color:var(--paper)}
:root[data-mode="light"] .related a,:root[data-mode="light"] .bites a,:root[data-mode="light"] .answer a{color:var(--paper);text-decoration-color:var(--lime);text-decoration-thickness:3px}
:root[data-mode="light"] .var-grid button:hover,:root[data-mode="light"] .mode:hover{border-color:var(--paper)}
:root[data-mode="light"] .progress i{height:3px}

/* islas nuevas: las que llevan puntos o cables se quedan oscuras para que la lima se lea */
.goal{background:var(--ink-2);border-color:var(--line)}
.tree.island,.case.island{background:var(--ink-2)}
.dock.island{background:rgba(var(--ink2-rgb),.92)}
.glyph-tile{display:inline-grid;place-items:center;margin-bottom:12px;padding:6px 8px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2);transition:border-color .3s,box-shadow .3s}
.glyph-tile .glyph{margin:0}
.signal:hover .glyph-tile{border-color:var(--lime-edge);box-shadow:0 0 0 5px rgba(var(--acc-rgb),.1)}

/* los ✓ son círculos lima con tinta: se leen en los dos modos */
.checks .i{width:20px;height:20px;margin-top:3px;padding:3px;border-radius:50%;background:var(--lime);color:var(--on-lime);stroke-width:2.2;transition:scale .25s var(--ease)}
.checks li{transition:translate .25s var(--ease),color .2s}
.checks li:hover{translate:4px 0;color:var(--paper)}
.checks li:hover .i{scale:1.15}
.nolist li{transition:color .2s}
.nolist .i{transition:translate .25s var(--ease),background .2s,border-color .2s,color .2s}
.nolist li:hover{color:var(--paper)}
.nolist li:hover .i{translate:3px 0;border-color:var(--lime);background:var(--lime);color:var(--on-lime)}

/* foco que sigue al cursor: brillo adentro y borde encendido donde apunta */
.spot{position:relative;isolation:isolate}
.spot:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.09),transparent 60%);opacity:0;transition:opacity .35s}
.spot:after{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;padding:1px;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.9),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s}
@media (hover:hover){.spot:hover:before,.spot:hover:after{opacity:1}}
.goal{transition:transform .35s var(--ease),border-color .3s}
@media (hover:hover){.goal:hover{transform:translateY(-4px)}}

/* botones: magnéticos, con un brillo que cruza y la flecha que empuja hacia su lado */
.btn,.btn-dark,.dock-cta,.header-cta,.probe-cta{position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--gx,0px),var(--gy,0px));transition:background .2s,box-shadow .25s,translate .25s var(--ease),transform .3s var(--ease),color .2s,border-color .2s}
.btn:after,.btn-dark:after,.dock-cta:after,.header-cta:after,.probe-cta:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);translate:-115% 0;transition:translate .8s var(--ease)}
.btn-dark:after{background:linear-gradient(105deg,transparent 30%,rgba(184,243,74,.28) 50%,transparent 70%)}
:is(.btn,.btn-dark,.dock-cta,.header-cta,.probe-cta):hover:after{translate:115% 0}
:is(.btn,.btn-dark,.dock-cta,.header-cta,.probe-cta,.text-link,.panel-link,.matrix summary) .i{transition:transform .3s var(--ease),rotate .25s}
:is(.btn,.btn-dark,.dock-cta,.header-cta,.probe-cta,.text-link,.panel-link):hover .i:has(use[href="#i-down"]){transform:translateY(3px)}
:is(.btn,.btn-dark,.dock-cta,.header-cta,.probe-cta,.text-link,.panel-link):hover .i:has(use[href="#i-ne"]){transform:translate(2px,-2px)}
.btn-dark:hover{translate:0 -2px;box-shadow:0 18px 38px -14px rgba(11,18,32,.7)}
.dock-cta:hover{background:var(--lime-hi)}
.header-cta:hover{box-shadow:0 10px 26px -12px rgba(var(--acc-rgb),.7)}
.btn:active,.btn-dark:active,.dock-cta:active{scale:.97}
.text-link{border-bottom-color:var(--hair);background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease),color .2s}
.text-link:hover{background-size:100% 2px}
.header-nav a{background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 2px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease),color .2s}
.header-nav a:hover{background-size:100% 2px}
.panel-link{transition:border-color .2s,gap .25s var(--ease)}
.panel-link:hover{gap:12px}
.matrix summary{transition:border-color .2s,background .2s,translate .25s var(--ease)}
.matrix summary:hover{translate:0 -2px;background:var(--lime-wash)}
.board-clear,.mode{transition:border-color .2s,color .2s,translate .25s var(--ease),background .2s}
.board-clear:hover,.mode:hover{translate:0 -2px}

/* pastillas: suben, brillan y señalan */
.tags li{position:relative;cursor:default;outline:0;transition:border-color .2s,color .2s,background .2s,translate .25s var(--ease),box-shadow .25s,opacity .25s}
.tags li:hover,.tags li:focus-visible,.tags li.is-lit{translate:0 -2px;border-color:var(--lime-edge);background:var(--lime-wash);color:var(--paper);box-shadow:0 10px 24px -14px rgba(var(--acc-rgb),.8)}
.tree>ul>li{transition:opacity .25s,background .25s}
.tree>ul>li:before,.tree>ul>li:after{transition:border-color .25s}
.tree.is-pointing>ul>li:not(.is-lit),.tree.is-pointing .tags li:not(.is-lit){opacity:.42}
.tree>ul>li.is-lit{border-radius:10px;background:var(--lime-wash)}
.tree>ul>li.is-lit code{color:var(--acc)}
.tree>ul>li.is-lit:after{border-top-color:var(--acc);border-top-width:2px}
.tree>ul>li[data-row]{cursor:default}
.var-grid button{transition:background .2s,color .2s,border-color .2s,transform .25s var(--ease),box-shadow .25s}
.var-grid button:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(var(--acc-rgb),.7)}
.var-grid button[aria-pressed=true]{animation:pop .35s var(--ease)}
@keyframes pop{45%{scale:1.07}}
.case-list li{padding:0;border:0;background:none}
.case-list button{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--lime-edge);border-radius:999px;background:var(--lime-wash);color:var(--paper);font-size:14.5px;font-weight:500;transition:background .2s,color .2s,translate .25s var(--ease)}
.case-list button:after{content:'×';font-size:17px;line-height:1;opacity:.55;transition:opacity .2s,rotate .25s var(--ease)}
.case-list button:hover{translate:0 -2px;background:var(--lime);color:var(--on-lime)}
.case-list button:hover:after{opacity:1;rotate:90deg}

/* filas y pasos que responden al cursor */
.track>li{transition:translate .25s var(--ease)}
.track-n{transition:background .25s,color .25s,scale .25s var(--ease)}
.track>li:hover .track-n{background:var(--lime);color:var(--on-lime);scale:1.12}
.track>li:hover b{color:var(--acc)}
.serp-check li{transition:background .2s,translate .25s var(--ease)}
.serp-check li:hover{translate:3px 0;background:rgba(var(--paper-rgb),.04)}
.sc-q .i{transition:color .2s,scale .25s var(--ease)}
.serp-check li:hover .sc-q .i{color:var(--acc);scale:1.2}
.scan-list li{transition:color .2s,translate .25s var(--ease)}
.scan-list li:hover{color:var(--night-fg);translate:3px 0}
.scan-list li:hover:before{border-color:var(--lime)}
.steps li{cursor:default}
.steps li:hover span{color:var(--acc)}
.st{transition:color .2s}
.st:before{transition:background .2s,border-color .2s,box-shadow .2s,scale .2s}
.st:hover:before,.st.is-hint:before{border-color:var(--acc);scale:1.25}
.st.is-hint{color:var(--paper)}
.board-q button:not(.is-focus):hover,.board-q button.is-hint:not(.is-focus){border-color:var(--lime-edge);background:rgba(var(--acc-rgb),.07);color:var(--paper)}
.dial-card{transition:translate .35s var(--ease)}
.next-visual:hover .dial-card{translate:0 -6px}

/* el tablero en el celular: tarjetas que se deslizan, cable al plan por el canal del medio */
.board-q button{position:relative}
@media (max-width:760px){
  .board{display:block}
  .board-chan{display:none}
  .board-q{position:relative;flex-direction:row;gap:10px;margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 30px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .board-q::-webkit-scrollbar{display:none}
  .board-q button{flex:0 0 min(78%,300px);flex-direction:column;align-items:flex-start;justify-content:center;min-height:96px;padding:14px 16px 20px;scroll-snap-align:center;font-size:15px}
  .plug{position:absolute;left:50%;bottom:-15px;margin:0;translate:-50% 0;rotate:90deg;touch-action:none}
  .plug:before{content:'';position:absolute;inset:-12px}
  .board-st{display:grid;grid-template-columns:1fr 1fr;gap:8px 36px;margin-top:40px;padding:0}
  .st-grp{display:none}
  .st{padding:8px 10px 8px 25px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--ink-rgb),.55);font-size:13.5px;line-height:1.25}
  .st:before{left:9px}
  .st[data-side=l]{padding:8px 25px 8px 10px;text-align:right}
  .st[data-side=l]:before{left:auto;right:9px}
  .st.is-active{border-color:rgba(var(--acc-rgb),.45);background:rgba(var(--acc-rgb),.08)}
  .board-panels{margin:24px 0 0}
  .board-tools{flex-wrap:wrap;gap:10px 14px}
}
.story>*{min-width:0}


/* ------------------------------------------------ v6: sin fotos de stock, gráficos de código */

/* así ves el avance */
.pchart{margin-top:clamp(40px,5vw,64px);padding:22px 22px 18px;border:1px solid var(--line);border-radius:24px;background:var(--ink)}
.pc-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px}
.pc-head .label{color:var(--acc)}
.pc-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--soft)}
.pc-legend li{display:flex;align-items:center;gap:8px}
.pc-legend li:before{content:'';width:10px;height:10px;border-radius:50%}
.pc-legend .is-clicks:before{background:var(--acc);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.15)}
.pc-legend .is-leads:before{background:var(--paper)}
.pc-plot{position:relative;height:clamp(250px,26vw,330px);margin-top:14px;touch-action:pan-y;cursor:crosshair}
.pc-canvas{position:absolute;inset:0;width:100%;height:100%}
.pc-marks{position:absolute;left:6px;right:6px;bottom:0;height:30px}
.pc-marks li{position:absolute;left:calc(var(--x) * 100%);bottom:0;display:flex;align-items:center;gap:8px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);transition:color .2s}
.pc-marks i{display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--acc);border-radius:50%;background:var(--ink);color:var(--acc);font:700 11.5px/1 var(--mono);font-style:normal;transition:background .2s,color .2s,scale .25s var(--ease)}
.pc-marks li.is-on{color:var(--paper)}
.pc-marks li.is-on i{background:var(--lime);color:var(--on-lime);scale:1.14}
.pc-tip{position:absolute;top:0;left:clamp(118px,calc(var(--x,.5) * 100%),calc(100% - 118px));translate:-50% 0;width:max-content;max-width:236px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(var(--ink2-rgb),.95);font-size:13.5px;line-height:1.4;color:var(--soft);opacity:0;pointer-events:none;transition:opacity .2s}
.pc-tip b{display:block;margin-bottom:2px;color:var(--acc);font:600 14.5px/1.3 var(--display)}
.pchart.is-hover .pc-tip{opacity:1}
.pc-foot{margin-top:12px;font:400 12.5px/1.5 var(--mono);color:var(--muted)}

@media (max-width:760px){
  .pchart{padding:16px}
  .pc-plot{height:250px}
  .pc-marks span{display:none}
  .pc-legend{font-size:13px}
  .dial-stamp{display:none}
}


/* ------------------------------------------------ v7: fotos con su búsqueda y coreografía de scroll
   Tres técnicas, cada una con su regla:
   - Entrada al cargar (solo el hero): tiempo, CSS.
   - Revelado al entrar en pantalla (títulos por línea, bloques, listas en cascada): JS agrega
     .rv-armed solo a lo que está debajo del pliegue y lo suelta con .is-in; sin JS todo se ve.
   - Ligado al scroll (parallax, cartas que se reparten, banda que se abre, lectura, pila de fotos):
     scroll-driven animations con @supports; donde no hay soporte queda el estado final.
   Todo se apaga con prefers-reduced-motion (la clase .js-motion no se pone). */

@property --rd{syntax:'<number>';inherits:true;initial-value:1}
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-soft:cubic-bezier(.22,.9,.26,1)}

/* desplazamiento suave con rueda (Lenis, solo escritorio con mouse) */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- de la búsqueda a la consulta: tres fotos que se apilan al bajar */
.story{align-items:start}
.finds{margin:0}
.finds-cap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px;margin-bottom:14px}
.finds-cap .label:first-child{color:var(--soft)}
.finds-stack{display:flex;flex-direction:column;gap:clamp(64px,13vh,150px)}
.find{--stack-top:clamp(16px,6vh,88px);position:sticky;top:calc(var(--stack-top) + var(--i) * 16px);overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--ink-2);box-shadow:0 30px 70px -34px rgba(2,5,10,.75);transform-origin:50% 0;scale:calc(1 - var(--depth,0) * .045)}
.find:after{content:'';position:absolute;inset:0;border-radius:inherit;background:#070c16;opacity:calc(min(var(--depth,0),1.6) * .3);pointer-events:none}
.find-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:radial-gradient(circle at 30% 20%,#1d2b44,#0f1723 70%)}
.find-media img{display:block;width:100%;height:100%;object-fit:cover;scale:1.15;translate:0 calc(var(--pv,0) * 1px);transition:scale .9s var(--m-ease)}
.find-media:after{content:'';position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(transparent,rgba(7,12,22,.62));pointer-events:none}
.find-q{position:absolute;left:14px;bottom:14px;z-index:1;display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);min-height:44px;margin:0;padding:10px 16px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(9,15,27,.68);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);color:#f1f3e9;font-size:15px;line-height:1.2;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 30px -14px rgba(0,0,0,.7)}
.find-q .i{width:16px;height:16px;flex:none;color:#b8f34a}
.find-qt,.find-type{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.find-type:after{content:'';display:inline-block;width:2px;height:1.05em;margin-left:2px;vertical-align:-.16em;background:#b8f34a;animation:blink 1s steps(1) infinite}
.find.is-found .find-type:after{opacity:0;animation:none}
.find-body{position:relative;display:grid;gap:12px;padding:16px 16px 18px}
.find-hit{display:flex;align-items:center;gap:12px;margin:0;padding:10px 12px;border:1px solid rgba(var(--acc-rgb),.42);border-radius:14px;background:rgba(var(--acc-rgb),.08)}
.find-fav{display:grid;place-items:center;flex:none;width:30px;height:30px;padding-bottom:2px;border-radius:50%;background:var(--lime);color:var(--on-lime);font:700 15px/1 var(--display)}
.find-who{display:flex;flex:1;flex-direction:column;min-width:0;line-height:1.25}
.find-who b{font:600 16px/1.2 var(--display);letter-spacing:-.01em}
.find-who small{font-size:13px;color:var(--muted)}
.find-up{flex:none;padding:5px 9px;border-radius:999px;background:var(--lime);color:var(--on-lime);font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.find-msg{margin:0;padding:12px 15px;border:1px solid var(--line);border-radius:16px 16px 16px 5px;background:var(--ink);font-size:15px;line-height:1.45}
.find-tag{display:block;margin-bottom:5px;font:400 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
@media (hover:hover){.find:hover .find-media img{scale:1.2}}
/* con JS: cada tarjeta se escribe, aparece y recibe el mensaje cuando llega a su lugar */
.finds.is-armed .find-hit{opacity:0;translate:0 14px;transition:opacity .45s,translate .7s var(--m-ease)}
.finds.is-armed .find-up{opacity:0;scale:.6;transition:opacity .3s .2s,scale .5s var(--m-ease) .2s}
.finds.is-armed .find-msg{opacity:0;translate:0 16px;scale:.96;transform-origin:0 100%;transition:opacity .45s,translate .7s var(--m-ease),scale .7s var(--m-ease)}
.finds.is-armed .find.is-found .find-hit{opacity:1;translate:0 0}
.finds.is-armed .find.is-found .find-up{opacity:1;scale:1}
.finds.is-armed .find.is-chat .find-msg{opacity:1;translate:0 0;scale:1}
@media (min-width:981px){
  .story{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .story-copy{position:sticky;top:clamp(40px,14vh,150px)}
}
@media (max-width:760px){
  .find-media{aspect-ratio:4/3}
  .find-q{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:9px 13px;font-size:14px}
  .find-body{padding:14px 14px 16px}
  .find-msg{font-size:14.5px}
}

/* la foto del ejemplo */
.demo-photo{position:relative;margin:0;aspect-ratio:21/9;overflow:hidden;border-radius:18px;background:radial-gradient(circle at 30% 20%,#1d2b44,#0f1723 70%)}
.demo-photo img{display:block;width:100%;height:100%;object-fit:cover}
.demo-photo:after{content:'';position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(transparent,rgba(7,12,22,.6));pointer-events:none}
@media (min-width:761px){.demo-photo{aspect-ratio:3/1}.demo-photo img{object-position:50% 56%}}
@media (max-width:760px){.demo-photo{aspect-ratio:16/10}}

/* ---------- bandas punteadas: los puntos viven en una capa propia para moverse aparte */
.section-map,.section.section-band{position:relative;isolation:isolate;overflow:clip;background-image:none}
.section-map:before,.section.section-band:before{content:'';position:absolute;inset:-90px 0;z-index:-1;background-image:radial-gradient(var(--dots) 1px,transparent 1.2px);background-size:26px 26px;pointer-events:none}

/* ---------- entrada del hero (tiempo) */
.js-motion .hero h1:not(.is-split){opacity:0;animation:m-safety 0s 2s forwards}
@keyframes m-safety{to{opacity:1}}
.js-motion .hero h1 .w{display:inline-block;vertical-align:top;overflow:clip;padding:.08em .04em .16em;margin:-.08em -.04em -.16em}
.js-motion .hero h1 .wi{display:inline-block;white-space:nowrap}
.js-motion .hero h1 .ch{display:inline-block;transform-origin:0 100%;animation:ch-up 1.15s var(--m-ease) calc(120ms + var(--ci,0) * 42ms) both}
@keyframes ch-up{from{transform:translateY(115%) rotate(10deg)}}
.js-motion .h1-key:after{animation-delay:.95s}
.js-motion .serp{animation:m-down .9s var(--m-ease) both}
.js-motion .thesis{animation:m-up 1s var(--m-ease) .5s both}
.js-motion .lead{animation:m-up 1s var(--m-ease) .62s both}
.js-motion .hero-actions{animation:m-up 1s var(--m-ease) .74s both}
.js-motion .geo{animation:m-up 1s var(--m-ease) .86s both}
.js-motion .probe{animation:probe-in 1.4s var(--m-ease) .28s both}
.js-motion .layers li{animation:m-left .8s var(--m-ease) both}
.js-motion .layers li:nth-child(1){animation-delay:.8s}.js-motion .layers li:nth-child(2){animation-delay:.88s}.js-motion .layers li:nth-child(3){animation-delay:.96s}.js-motion .layers li:nth-child(4){animation-delay:1.04s}.js-motion .layers li:nth-child(5){animation-delay:1.12s}
@keyframes m-up{from{opacity:0;transform:translateY(26px)}}
@keyframes m-down{from{opacity:0;transform:translateY(-12px)}}
@keyframes m-left{from{opacity:0;transform:translateX(-18px)}}
@keyframes probe-in{from{opacity:0;transform:perspective(1400px) rotateX(24deg) translateY(80px) scale(.93)}}

/* ---------- revelado al entrar en pantalla */
.js-motion .rv-armed{opacity:0;translate:0 30px}
.js-motion .is-in{opacity:1;translate:0 0;transition:opacity .8s var(--m-soft) calc(var(--i,0) * 70ms),translate 1.1s var(--m-ease) calc(var(--i,0) * 70ms)}
/* títulos: cada palabra sube detrás de su máscara, línea por línea */
.js-motion [data-split=lines] .w{display:inline-block;vertical-align:top;overflow:clip;padding:.1em .04em .18em;margin:-.1em -.04em -.18em}
.js-motion [data-split=lines] .wi{display:inline-block;transform-origin:0 100%}
.js-motion [data-split=lines].rv-armed{opacity:1;translate:none}
.js-motion [data-split=lines].rv-armed .wi{transform:translateY(118%) rotate(6deg)}
.js-motion [data-split=lines].is-in .wi{transform:none;transition:transform 1.05s var(--m-ease) calc(var(--li,0) * 90ms)}
/* listas y grupos: los hijos entran en cascada cuando entra el grupo */
.js-motion .rv-group.rv-armed{opacity:1;translate:none}
.js-motion .rv-group.rv-armed>*{opacity:0;translate:0 26px}
.js-motion .rv-group.is-in>*{opacity:1;translate:0 0;transition:opacity .7s var(--m-soft) calc(var(--i,0) * 75ms),translate 1s var(--m-ease) calc(var(--i,0) * 75ms)}
.js-motion .serp-check ol.is-in>li b{animation:stamp .55s var(--m-ease) calc(.35s + var(--i,0) * 75ms) both}
@keyframes stamp{from{opacity:0;scale:1.9;rotate:-14deg}}
/* tablero: situaciones desde la izquierda, planes desde la derecha, ficha desde abajo */
.js-motion .board.rv-armed{opacity:1;translate:none}
.js-motion .board.rv-armed>.board-q{opacity:0;translate:-36px 0}
.js-motion .board.rv-armed>.board-st{opacity:0;translate:36px 0}
.js-motion .board.rv-armed>.board-panels{opacity:0;translate:0 34px}
.js-motion .board.is-in>*{transition:opacity .7s var(--m-soft),translate 1.05s var(--m-ease)}
.js-motion .board.is-in>.board-st{transition-delay:.12s}
.js-motion .board.is-in>.board-panels{transition-delay:.22s}
/* árbol: las pastillas vuelan a su lugar */
.js-motion .tree.rv-armed .tags li{opacity:0;transform:translate(var(--sx,0),var(--sy,0)) rotate(var(--sr,0deg))}
.js-motion .tree.is-in .tags li{transition:opacity .5s calc(.3s + var(--i,0) * 60ms),transform 1s var(--m-ease) calc(.3s + var(--i,0) * 60ms),border-color .2s,color .2s,background .2s,translate .25s var(--ease),box-shadow .25s}
/* preguntas: las burbujas llegan una por una */
.js-motion .chat.rv-armed{opacity:1;translate:none}
.js-motion .chat.rv-armed .chat-pool>.pair,.js-motion .chat.rv-armed .chat-log>*{opacity:0;transform:translateY(24px) scale(.95)}
.js-motion .chat.is-in .chat-pool>.pair,.js-motion .chat.is-in .chat-log>*{transition:opacity .55s calc(var(--i,0) * 90ms),transform .85s var(--m-ease) calc(var(--i,0) * 90ms)}
/* cómo trabajamos: cada paso se enciende cuando la línea lo alcanza */
.js-motion .track.is-armed>li{opacity:.42;transition:opacity .5s,translate .25s var(--ease)}
.js-motion .track.is-armed>li.is-reached{opacity:1}
.js-motion .track.is-armed .track-n{transition:background .35s,color .35s,scale .35s var(--m-ease),box-shadow .35s}
.js-motion .track.is-armed>li.is-reached .track-n{background:var(--lime);color:var(--on-lime);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.14)}

/* ---------- ligado al scroll (donde el navegador lo soporta) */
@supports (animation-timeline:view()){
  /* el hero se aleja con profundidad al bajar */
  .js-motion .hero-copy{animation:hero-copy-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes hero-copy-out{55%{opacity:1}to{opacity:0;transform:translateY(-9vh)}}
  .js-motion .hero-visual{transform-origin:50% 0;animation:hero-visual-out linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes hero-visual-out{to{opacity:.15;transform:perspective(1200px) rotateX(16deg) translateY(-5vh) scale(.9)}}
  /* los puntos de las bandas corren a otra velocidad que el contenido */
  .section-map,.section.section-band{view-timeline:--band block}
  .js-motion .section-map:before,.js-motion .section.section-band:before{animation:dots-drift linear both;animation-timeline:--band;animation-range:cover}
  @keyframes dots-drift{from{transform:translateY(-70px)}to{transform:translateY(70px)}}
  /* metas: las cuatro tarjetas salen de un mazo y se reparten a su lugar */
  .goal-grid{view-timeline:--goals block}
  .js-motion .goal{animation:deal linear both;animation-timeline:--goals;animation-range:entry 0% cover 42%}
  @keyframes deal{from{translate:var(--sx,0) var(--sy,0);rotate:var(--sr,0deg);scale:.8}}
  /* la primera frase se lee palabra por palabra */
  .js-motion [data-split=read]{--rd:0;animation:read-on linear both;animation-timeline:view();animation-range:cover 10% cover 42%}
  @keyframes read-on{to{--rd:1}}
  .js-motion [data-split=read] .w{opacity:clamp(.16,calc((var(--rd) * (var(--wn,20) + 8) - var(--wi,0)) / 8),1)}
  /* la foto del ejemplo se acomoda al entrar */
  .js-motion .demo-photo img{animation:zoom-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
  @keyframes zoom-settle{from{scale:1.3}to{scale:1.02}}
  /* variables del precio: sueltas, se juntan en su lugar */
  .var-grid{view-timeline:--vars block}
  .js-motion .var-grid button{animation:gather linear both;animation-timeline:--vars;animation-range:entry 10% cover 42%}
  @keyframes gather{from{translate:var(--sx,0) var(--sy,0);rotate:var(--sr,0deg);opacity:0}}
  /* la banda lima se abre de tarjeta a pantalla completa */
  .js-motion .next{animation:band-open linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
  @keyframes band-open{from{clip-path:inset(0 clamp(12px,5vw,80px) round 44px)}to{clip-path:inset(0 0 round 0)}}
}
@media (prefers-reduced-motion:reduce){
  .find{scale:none}
  .find:after{opacity:0}
}


/* ------------------------------------------------ v8: metas y señales claras, tablero como juego, banda lima con
   textura y la búsqueda del cliente (reemplaza al radar), firma de marca y pie con el logotipo gigante */

/* ---------- metas y señales: en modo claro son tarjetas claras; los puntos van en tinta con resaltador lima (JS) */
:root[data-mode="light"] .goal,
:root[data-mode="light"] .glyph-tile{background:#fafbf5;border-color:rgba(16,26,43,.12);box-shadow:inset 0 1px 0 #fff,0 22px 44px -30px rgba(16,26,43,.38)}
:root[data-mode="light"] .goal b{align-self:flex-start;color:var(--paper);text-decoration:underline var(--lime);text-decoration-thickness:.38em;text-underline-offset:-.2em;text-decoration-skip-ink:none}
:root[data-mode="light"] .goal.spot:before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.34),transparent 60%)}
:root[data-mode="light"] .signal:hover .glyph-tile{border-color:rgba(16,26,43,.3);box-shadow:0 0 0 5px rgba(var(--acc-rgb),.6)}

/* ---------- tablero: cada situación es un interruptor, el cable se arrastra hasta su plan */
.st-b{all:unset;display:block;cursor:pointer}
.st-b:focus-visible{outline:2px solid var(--acc);outline-offset:4px;border-radius:4px}
.board-q button{transition:background .2s,border-color .2s,color .2s,translate .35s var(--m-ease),box-shadow .35s}
.board-q button[aria-pressed=true]:not(.is-focus){border-color:rgba(var(--acc-rgb),.75);background:rgba(var(--acc-rgb),.1);color:var(--paper)}
.board-q button.is-lift{translate:0 -3px;box-shadow:0 18px 38px -18px rgba(var(--acc-rgb),.6)}
.board-q button.is-pop{animation:q-pop .5s var(--m-ease)}
@keyframes q-pop{35%{scale:1.04}}
.board-q button.is-drop{animation:q-drop .42s var(--ease)}
@keyframes q-drop{20%{translate:-5px 0}45%{translate:4px 0}70%{translate:-2px 0}}
/* el conector de una situación conectada muestra la ×: tocar otra vez desconecta */
.plug:after{content:'×';position:absolute;inset:0;display:grid;place-items:center;padding-bottom:2px;font:600 17px/1 var(--body);color:#ff8a7c;opacity:0;transition:opacity .2s}
.plug i{transition:opacity .2s}
@media (hover:hover){
  .board-q button[aria-pressed=true]:hover .plug:after{opacity:1}
  .board-q button[aria-pressed=true]:hover .plug i{opacity:0}
}
/* mientras nadie toca el tablero, un conector se mueve para invitar */
.plug.is-nudge{animation:nudge 1s var(--ease)}
@keyframes nudge{18%{transform:rotate(-16deg) scale(1.2)}42%{transform:rotate(12deg) scale(1.1)}66%{transform:rotate(-6deg)}}
/* planes: aceptan, rechazan, se sugieren y celebran */
.st.is-accept{color:var(--acc)}
.st.is-accept:before{border-color:var(--acc);background:var(--acc);box-shadow:0 0 0 9px rgba(var(--acc-rgb),.28);scale:1.5}
.st.is-reject{color:var(--leak)}
.st.is-reject:before{border-color:var(--leak);border-style:dashed;background:transparent;box-shadow:0 0 0 7px rgba(var(--leak-rgb),.18)}
.st.is-nope{animation:nope .5s var(--ease)}
@keyframes nope{18%{translate:-7px 0}38%{translate:6px 0}58%{translate:-4px 0}78%{translate:2px 0}}
.st.is-suggest{color:var(--paper)}
.st.is-suggest:before{border-color:var(--acc);box-shadow:0 0 0 6px rgba(var(--acc-rgb),.22);animation:target 1s ease-in-out infinite alternate}
.st.is-snap:before{animation:snap .75s var(--m-ease)}
@keyframes snap{0%{scale:2;box-shadow:0 0 0 0 rgba(var(--acc-rgb),.75)}100%{scale:1;box-shadow:0 0 0 20px rgba(var(--acc-rgb),0)}}
.board-wires .cable.is-leaving{stroke:var(--muted);stroke-width:2}
.board-wires .cable.is-live.is-hot{stroke:rgb(var(--acc-hi-rgb));stroke-width:3;filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.55))}
.board-wires .cable.is-live.is-bad{stroke:var(--leak);stroke-dasharray:6 6}
.board-wires .head.is-bad{fill:var(--leak)}
/* herramientas: un led por situación, el mensaje y los atajos */
.board-tools{flex-wrap:wrap;gap:10px 16px}
.board-meter{display:inline-grid;grid-template-columns:repeat(11,7px);gap:4px;flex:none}
.board-meter i{height:7px;border-radius:50%;background:var(--line);transition:background .25s,scale .35s var(--m-ease),box-shadow .25s}
.board-meter i.on{background:var(--acc);scale:1.18;box-shadow:0 0 0 3px rgba(var(--acc-rgb),.16)}
.board-hint{flex:1 1 260px;min-width:0;font-size:14.5px;line-height:1.45;color:var(--soft)}
.board-hint b{color:var(--paper);font-weight:600}
.board-hint.is-no b{color:var(--leak)}
.board-suggest{padding:8px 14px;border:1px solid var(--lime);border-radius:999px;background:var(--lime);color:var(--on-lime);font-size:13.5px;font-weight:600;transition:translate .25s var(--ease),box-shadow .25s}
.board-suggest:hover{translate:0 -2px;box-shadow:0 10px 24px -12px rgba(var(--acc-rgb),.8)}
/* tu selección: cada plan conectado, para verlo o quitarlo */
.board-sel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.board-sel .label{flex-basis:100%}
.sel-list{display:flex;flex-wrap:wrap;gap:8px}
.sel-list li{display:inline-flex;align-items:stretch;overflow:hidden;border:1px solid var(--lime-edge);border-radius:999px;background:rgba(var(--acc-rgb),.07);animation:chip-in .35s var(--m-ease) both;transition:translate .25s var(--ease),background .2s,border-color .2s}
.sel-list li:hover{translate:0 -2px}
.sel-go{padding:7px 4px 7px 13px;border:0;background:none;color:var(--paper);font-size:14px;font-weight:500}
.sel-x{display:grid;place-items:center;width:32px;border:0;background:none;color:var(--muted);font-size:17px;line-height:1;transition:color .2s,background .2s}
.sel-x:hover{background:var(--leak);color:#fff}
.sel-list li.is-on{border-color:var(--lime);background:var(--lime)}
.sel-list li.is-on .sel-go,.sel-list li.is-on .sel-x{color:var(--on-lime)}
.sel-list li.is-on .sel-x:hover{color:#fff}
.panel-empty{border-style:dashed}
.panel-empty .panel-name{color:var(--muted)}
@media (max-width:760px){
  .st.is-accept{border-color:var(--acc);background:rgba(var(--acc-rgb),.16)}
  .st.is-reject{border-color:rgba(var(--leak-rgb),.7)}
  .board-hint{flex-basis:100%;order:3}
}

/* ---------- banda lima: textura de medio tono y un brillo que vuelve al botón */
.next-tex{position:absolute;left:0;top:-80px;width:100%;height:calc(100% + 160px);pointer-events:none}
@supports (animation-timeline:view()){
  .next{view-timeline:--next block}
  .js-motion .next-tex{animation:dots-drift linear both;animation-timeline:--next;animation-range:cover}
}
.btn-dark.is-shine{animation:cta-nudge .8s var(--m-ease)}
.btn-dark.is-shine:after{animation:cta-shine 1.2s var(--m-ease)}
@keyframes cta-nudge{30%{scale:1.05}}
@keyframes cta-shine{from{translate:-115% 0}to{translate:115% 0}}

/* ---------- lo que ve tu cliente: la búsqueda en un celular y lo que encuentra el diagnóstico */
.next-visual{max-width:440px}
.dx{position:relative;margin:0}
.dx-phone{position:relative;width:min(100%,322px);margin-left:auto;padding:26px 12px 42px;border-radius:40px;background:#0f1723;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 0 8px #070b13,0 0 0 9px rgba(255,255,255,.16),0 46px 80px -34px rgba(11,18,32,.75)}
.dx-phone:before{content:'';position:absolute;left:50%;top:9px;width:74px;height:8px;border-radius:99px;background:#070b13;translate:-50% 0}
.dx-phone:after{content:'';position:absolute;left:50%;bottom:15px;width:96px;height:4px;border-radius:99px;background:rgba(255,255,255,.28);translate:-50% 0}
.dx-cap{display:flex;justify-content:space-between;gap:10px;margin:0 4px 10px;font:400 10.5px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.dx-search{display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid var(--hair);border-radius:999px;background:var(--ink);font-size:14.5px}
.dx-search .i{width:15px;height:15px;color:var(--acc)}
.dx-q{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx.is-typing .dx-search:after{content:'';flex:none;width:2px;height:18px;margin-left:-8px;background:var(--acc);animation:blink 1s steps(1) infinite}
.dx-zones{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.dx-zone{position:relative;display:flex;flex-direction:column;gap:3px;overflow:hidden;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);transition:border-color .35s,background .35s,box-shadow .35s}
.dx-zone:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 0 72%,rgba(var(--acc-rgb),.18) 95%,var(--lime) 97.5%,transparent 100%);transform:translateY(-100%);opacity:0;pointer-events:none}
.dx-zone.is-scan{border-color:var(--lime);background:rgba(var(--acc-rgb),.07);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.14)}
.dx-zone.is-scan:after{animation:dx-scan 1.15s var(--m-soft) both}
@keyframes dx-scan{0%{transform:translateY(-100%);opacity:1}88%{opacity:1}100%{transform:translateY(0);opacity:0}}
.dx-kind{font:400 10.5px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--dim);transition:color .3s}
.dx-zone.is-scan .dx-kind{color:var(--acc)}
.dx-name{display:flex;align-items:center;gap:8px;font:600 14.5px/1.25 var(--display);letter-spacing:-.005em}
.dx-name .find-fav{width:22px;height:22px;font-size:12px}
.dx-line{font-size:12.5px;line-height:1.4;color:var(--muted)}
.dx-line b{color:var(--soft);font-weight:600}
.dx-zone.is-you{border-style:dashed}
.dx-map{position:relative;display:block;height:62px;margin:4px 0 3px;overflow:hidden;border-radius:10px;background:linear-gradient(90deg,transparent 47%,rgba(255,255,255,.07) 47% 53%,transparent 53%) 0 0/44px 100%,linear-gradient(transparent 44%,rgba(255,255,255,.07) 44% 56%,transparent 56%) 0 0/100% 30px,linear-gradient(160deg,#18253d,#101a2b)}
.dx-map i{position:absolute;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper);color:#0b1220;font:700 10.5px/1 var(--mono);font-style:normal;box-shadow:0 4px 10px rgba(0,0,0,.45)}
.dx-map i:nth-child(1){left:20%;top:18%;background:var(--lime)}
.dx-map i:nth-child(2){left:56%;top:48%}
.dx-map i:nth-child(3){left:79%;top:14%}
.dx-zone.is-scan .dx-map i{animation:pin-hop .6s var(--m-ease) both}
.dx-zone.is-scan .dx-map i:nth-child(2){animation-delay:.1s}
.dx-zone.is-scan .dx-map i:nth-child(3){animation-delay:.2s}
@keyframes pin-hop{40%{transform:translateY(-6px) scale(1.12)}}
.dx-places li{display:flex;justify-content:space-between;gap:10px;padding:2px 0;font-size:12.5px;color:var(--soft)}
.dx-places b{font-weight:500}
.dx-places span{color:var(--acc);font:400 12px/1.4 var(--mono);white-space:nowrap}
/* hallazgos: sin movimiento son una lista; con movimiento salen del celular junto a su zona */
.dx-notes{display:grid;gap:8px;margin-top:16px}
.dx-notes li{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:13px;background:var(--night);color:var(--night-fg);font-size:13.5px;font-weight:500;line-height:1.35;box-shadow:0 18px 34px -16px rgba(11,18,32,.7)}
.dx-notes li:before{content:'';flex:none;width:9px;height:9px;margin-top:.3em;border-radius:50%;background:var(--lime);box-shadow:0 0 0 4px rgba(184,243,74,.22)}
.js-motion .dx.is-armed .dx-notes{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.js-motion .dx.is-armed .dx-notes li{position:absolute;top:var(--y,0px);right:calc(min(100%,322px) + 2px);width:max-content;max-width:224px;translate:0 -50%;opacity:0;scale:.5;transform-origin:100% 50%;transition:opacity .22s,scale .55s cubic-bezier(.34,1.56,.64,1)}
.js-motion .dx.is-armed .dx-notes li:after{content:'';position:absolute;right:-5px;top:50%;width:11px;height:11px;border-radius:2px;background:var(--night);translate:0 -50%;rotate:45deg}
.js-motion .dx.is-armed .dx-notes li.is-pop{opacity:1;scale:1}
.next-visual .dial-card{position:relative;left:auto;right:auto;bottom:auto;width:max-content;max-width:100%;margin:-38px 0 0 -14px}
.next-visual .dial-stamp{top:-14px;right:-10px;z-index:2}
/* hasta 1180 px no hay lugar al costado del celular: los hallazgos salen adentro, colgando de su zona */
@media (max-width:1180px){
  .js-motion .dx.is-armed .dx-notes li{right:auto;left:calc(100% - min(100%,322px) + 18px);max-width:min(72%,240px);translate:0 0;transform-origin:22px 0}
  .js-motion .dx.is-armed .dx-notes li:after{right:auto;left:18px;top:-5px;translate:0 0}
}
@media (max-width:980px){
  .dx-phone{margin-inline:auto}
  .js-motion .dx.is-armed .dx-notes li{left:calc((100% - min(100%,322px)) / 2 + 18px)}
  .next-visual{margin-inline:auto}
  .next-visual .dial-card{margin:-34px auto 0}
}

/* ---------- firma de marca: la frase entra letra por letra y cruza la pantalla con el scroll */
/* v9: tres líneas que llenan el bloque (el JS ajusta el tamaño para que la más larga ocupe el ancho) */
.signoff{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,128px) clamp(40px,6vw,96px)}
.signoff-line{margin:0;font:700 clamp(58px,15.5vw,250px)/.9 var(--display);letter-spacing:-.055em;color:var(--paper)}
.signoff-vis{display:block;width:min(1240px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.so-l{display:block;width:max-content;max-width:none;white-space:nowrap}
/* cuando sobra ancho, las líneas bajan en escalera: del clic (arriba a la izquierda) al cierre (abajo a la derecha) */
@media (min-width:761px){
  .so-l:nth-child(2){margin-inline:auto}
  .so-l:nth-child(3){margin-left:auto}
}
.signoff em{font-style:normal;color:var(--acc)}
/* modo claro: la lima sin borde de tinta; un canto de lima más oscura le da cuerpo sobre el papel */
:root[data-mode="light"] .signoff em{color:var(--lime);text-shadow:0 .05em 0 #95cf2e}
.js-motion .signoff.is-armed .so-l{will-change:transform}
.js-motion .signoff.is-armed .ch{display:inline-block;transform-origin:50% 85%}

/* ---------- pie: tarjeta que sube y el logotipo que entra desde abajo, con la «a» que rueda */
.footer{padding:0 clamp(8px,1.2vw,16px) clamp(8px,1.2vw,16px)}
.foot{position:relative;overflow:hidden;padding:clamp(28px,4vw,56px) clamp(20px,3.4vw,52px) clamp(16px,2vw,24px);border-radius:clamp(20px,2.4vw,32px);background:#0b1220}
:root:not([data-mode="light"]) .foot{background:#131c2d;box-shadow:inset 0 0 0 1px rgba(198,208,226,.12)}
.foot-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:32px clamp(32px,5vw,80px);align-items:start}
.foot-tag{max-width:14ch;font:650 clamp(26px,2.6vw,38px)/1.08 var(--display);letter-spacing:-.03em}
.foot-cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;padding:11px 16px;border-radius:999px;background:var(--lime);color:var(--on-lime);font-size:14.5px;font-weight:600;text-decoration:none;transition:translate .25s var(--ease),box-shadow .25s,background .2s}
.foot-cta:hover{translate:0 -2px;background:var(--lime-hi);box-shadow:0 12px 28px -14px rgba(var(--acc-rgb),.8)}
.foot-cta .i{transition:transform .3s var(--ease)}
.foot-cta:hover .i{transform:translate(2px,-2px)}
.foot-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-nav .label{margin-bottom:10px}
.foot-nav li+li{margin-top:7px}
.foot-nav a{padding-bottom:2px;background:linear-gradient(var(--acc),var(--acc)) 0 100%/0 2px no-repeat;color:var(--soft);font-size:15px;text-decoration:none;transition:background-size .3s var(--ease),color .2s}
.foot-nav a:hover{background-size:100% 2px;color:var(--paper)}
.foot-nav a[aria-current]{color:var(--acc)}
.foot-mark{display:block;margin-top:clamp(40px,7vw,110px);overflow:hidden;color:var(--paper);text-decoration:none}
.foot-mark:focus-visible{outline-offset:-4px}
.fm{display:inline-flex;align-items:center;white-space:nowrap;font:750 clamp(56px,17vw,290px)/.84 var(--display);letter-spacing:-.06em;padding-bottom:.05em}
.fm-a{display:inline-grid;place-items:center;flex:none;width:1.06em;height:1.06em;margin:.2em .04em 0;padding-bottom:.05em;border-radius:50%;background:var(--lime);color:var(--on-lime);font-size:.73em;font-weight:550;letter-spacing:0;transform:rotate(-14deg)}
.fl{display:inline-block}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin-top:clamp(12px,1.6vw,20px);padding-top:14px;border-top:1px solid var(--line);font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
@supports (animation-timeline:view()){
  .js-motion .foot{animation:foot-rise linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  @keyframes foot-rise{from{transform:translateY(90px) scale(.95)}}
}
@media (max-width:760px){
  .foot-top{grid-template-columns:1fr}
  .foot-nav{grid-template-columns:1fr 1fr;gap:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  .btn-dark.is-shine,.btn-dark.is-shine:after{animation:none}
}


/* ------------------------------------------------ v9: banda lima con la foto del negocio y el texto sobre lima limpia */

/* la textura queda alrededor del texto: una nube de lima lisa detrás de cada bloque (en v8 los puntos pasaban por
   debajo de las letras y costaba leer) */
.next-copy,.next-cols{position:relative;isolation:isolate}
.next-copy:before,.next-cols:before{content:'';position:absolute;inset:-30px -36px;z-index:-1;border-radius:44px;background:var(--lime);filter:blur(20px);pointer-events:none}

/* la foto del negocio y, encima, el celular de quien lo busca */
.next-photo{position:relative;overflow:hidden;height:clamp(240px,24vw,300px);border-radius:28px;background:#0f1723;box-shadow:0 30px 60px -30px rgba(11,18,32,.55)}
.next-photo img{display:block;width:100%;height:100%;object-fit:cover}
.next-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,22,0) 35%,rgba(7,12,22,.5));pointer-events:none}
.next-photo-tag{position:absolute;left:14px;top:14px;z-index:1;display:flex;align-items:center;gap:9px;padding:6px 13px 6px 6px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(9,15,27,.68);-webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);color:#f1f3e9;font-size:14px;font-weight:600;line-height:1.2}
.next-photo-tag .find-fav{width:24px;height:24px;font-size:13px}
.next-photo + .dx{margin-top:-90px}
@media (min-width:981px){
  .next-photo{height:270px}
  .next-photo + .dx{margin-top:-64px}
}
@supports (animation-timeline:view()){
  /* la foto se acomoda al entrar, como la del ejemplo */
  .js-motion .next-photo img{animation:zoom-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}

/* mientras se baja, nada se enciende por pasar bajo un cursor quieto (el hover vuelve al parar: ver JS) */
html.is-scrolling main,html.is-scrolling .footer{pointer-events:none}


/* ------------------------------------------------ v10: foto de metas, texto que avanza con la pila, banda lima más
   ceñida con textura pareja, abanico de negocios detrás del celular y firma que se queda mientras se arma */

/* metas: la foto del camino (búsqueda, mensaje, compra y boleta) con cada meta marcada sobre su objeto */
.goals{display:grid;gap:16px;margin-top:28px}
.goals .goal-grid{margin-top:0}
/* v11: las tarjetas dicen lo mismo que los pines («Te encuentran»…), con títulos más largos que caben en una línea */
.goals .goal b{font-size:clamp(20px,1.75vw,26px);line-height:1.1}
.goal-photo{position:relative;margin:0;overflow:hidden;aspect-ratio:3/2;border-radius:24px;background:#0f1723;box-shadow:0 30px 60px -34px rgba(2,5,10,.7)}
.goal-photo img{display:block;width:100%;height:100%;object-fit:cover}
.goal-pins{position:absolute;inset:0;pointer-events:none}
.goal-pins li{position:absolute;left:var(--x);top:var(--y);display:flex;align-items:center;gap:7px;padding:6px 11px 6px 8px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(9,15,27,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f1f3e9;font-size:13px;font-weight:600;line-height:1.1;white-space:nowrap;translate:-50% -100%;transition:background .25s,color .25s,scale .35s var(--ease),opacity .45s,translate .6s var(--m-ease)}
.goal-pins li:before{content:'';width:8px;height:8px;border-radius:50%;background:#b8f34a;box-shadow:0 0 0 4px rgba(184,243,74,.25)}
.goal-pins li.is-lit{background:#b8f34a;color:#0b1220;scale:1.08}
.goal-pins li.is-lit:before{background:#0b1220;box-shadow:none}
.js-motion .goal-photo.is-armed .goal-pins li{opacity:0;translate:-50% -60%}
.js-motion .goal-photo.is-armed.is-in .goal-pins li{opacity:1;translate:-50% -100%}
.js-motion .goal-photo.is-armed.is-in .goal-pins li:nth-child(2){transition-delay:0s,0s,0s,.25s,.25s}
.js-motion .goal-photo.is-armed.is-in .goal-pins li:nth-child(3){transition-delay:0s,0s,0s,.5s,.5s}
.js-motion .goal-photo.is-armed.is-in .goal-pins li:nth-child(4){transition-delay:0s,0s,0s,.75s,.75s}
@media (min-width:981px){
  .goals{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:20px;align-items:stretch}
  .goal-photo{aspect-ratio:auto;min-height:340px}
  .goal-photo img{position:absolute;inset:0}
  .goals .goal-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:760px){
  .goal-pins li{padding:4px 9px 4px 6px;font-size:11px;gap:5px}
  .goal-pins li:before{width:6px;height:6px;box-shadow:0 0 0 3px rgba(184,243,74,.25)}
  .goals .goal b{font-size:19px}
}
@supports (animation-timeline:view()){
  .js-motion .goal-photo img{animation:zoom-settle linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}

/* qué es el SEO: menos recorrido entre tarjetas y, en escritorio, el párrafo de la tarjeta de arriba se enciende */
.finds-stack{gap:clamp(40px,8vh,96px)}
@media (min-width:981px){
  .story-copy.is-synced p{position:relative;padding-left:20px;opacity:.4;transition:opacity .5s var(--ease)}
  .story-copy.is-synced p:before{content:'';position:absolute;left:0;top:.35em;bottom:.35em;width:3px;border-radius:3px;background:var(--line);transition:background .5s var(--ease)}
  .story-copy.is-synced p.is-now{opacity:1}
  .story-copy.is-synced p.is-now:before{background:var(--lime)}
}

/* banda lima: textura en toda la banda (sin nubes que la corten) y menos aire */
.next-copy:before,.next-cols:before{content:none}
.next{padding-block:clamp(56px,6.5vw,92px)}
.next-in{gap:clamp(28px,4.5vw,64px)}
.next-title{margin:.3em 0 .35em}
.next-more{margin-top:clamp(24px,3.2vw,40px)}
.next-cols{gap:20px}

/* el abanico: fotos de negocios distintos detrás del celular; la del negocio que se busca se levanta */
@property --sp{syntax:'<number>';inherits:true;initial-value:1}
.next-fan{position:relative;height:clamp(200px,19vw,236px);margin:0}
.next-fan li{--k:0;--r:0deg;--ky:0px;position:absolute;left:50%;top:0;z-index:1;width:34%;aspect-ratio:3/4;overflow:hidden;border:4px solid #fbfcf7;border-radius:18px;background:#0f1723;box-shadow:0 22px 40px -22px rgba(11,18,32,.7);transform:translateX(calc(-50% + var(--k) * 50% * var(--sp))) translateY(calc(var(--ky) * var(--sp))) rotate(calc(var(--r) * var(--sp)));transition:transform .6s var(--m-ease),filter .5s,box-shadow .5s}
.next-fan li:nth-child(1){--k:-2;--r:-11deg;--ky:26px;z-index:1}
.next-fan li:nth-child(2){--k:-1;--r:-5deg;--ky:8px;z-index:2}
.next-fan li:nth-child(3){--k:0;--r:0deg;--ky:0px;z-index:3}
.next-fan li:nth-child(4){--k:1;--r:5deg;--ky:8px;z-index:2}
.next-fan li:nth-child(5){--k:2;--r:11deg;--ky:26px;z-index:1}
.next-fan img{display:block;width:100%;height:100%;object-fit:cover}
.next-fan li:not(.is-on){filter:saturate(.8) brightness(.86)}
.next-fan li.is-on{z-index:5;filter:none;box-shadow:0 30px 50px -22px rgba(11,18,32,.8);transform:translateX(calc(-50% + var(--k) * 50% * var(--sp))) translateY(calc(var(--ky) * var(--sp) - 18px)) rotate(calc(var(--r) * var(--sp) * .5)) scale(1.06)}
.fan-tag{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;gap:7px;padding:4px 9px 4px 4px;border-radius:999px;background:rgba(9,15,27,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#f1f3e9;font-size:12px;font-weight:600;line-height:1.15;opacity:0;translate:0 -6px;transition:opacity .35s,translate .45s var(--m-ease)}
.fan-tag .find-fav{width:20px;height:20px;font-size:11px}
.next-fan li.is-on .fan-tag{opacity:1;translate:0 0}
@media (hover:hover){.next-fan li:hover{filter:none;z-index:6}}
.next-fan + .dx{position:relative;z-index:7;margin-top:-72px}
@media (min-width:981px){.next-fan + .dx{margin-top:-60px}}
@supports (animation-timeline:view()){
  .next-fan{view-timeline:--fan block}
  .js-motion .next-fan li{animation:fan-open linear both;animation-timeline:--fan;animation-range:entry 10% cover 50%}
  @keyframes fan-open{from{--sp:0}}
}

/* firma: la sección es más alta que la pantalla y la frase se queda fija mientras cada línea entra */
.signoff{overflow:clip}
.js-motion .signoff.is-armed{min-height:calc(var(--so-h,40vh) + 150vh)}
.js-motion .signoff.is-armed .signoff-line{position:sticky;top:max(24px,calc(50vh - var(--so-h,40vh) / 2))}
@media (max-width:760px){.js-motion .signoff.is-armed{min-height:calc(var(--so-h,30vh) + 110vh)}}
/* la esfera sigue encima del celular y el sello baja para no tapar el abanico */
.next-visual .dial-card{z-index:8}
.next-visual .dial-stamp{top:auto;bottom:18px;right:-10px;z-index:9}

/* ------------------------------------------------ v11: el hero abre con el problema (lo que ve tu cliente, en lugar
   de la sonda) y el ejemplo del estudio de interiores termina con su desenlace */

/* hero: la búsqueda de un cliente en el celular. Llegan el anuncio, la IA, el mapa y los resultados, y tu estudio no */
.hx{position:relative;display:flex;flex-direction:column;align-items:center;margin:0}
.hx .dx-phone{width:min(100%,340px);margin-inline:auto}
.hx.is-typing .dx-search:after{content:'';flex:none;width:2px;height:18px;margin-left:-8px;background:var(--acc);animation:blink 1s steps(1) infinite}
.hx-miss{position:relative;z-index:2;display:flex;align-items:center;gap:11px;width:min(calc(100% - 24px),300px);margin:-30px auto 0;padding:12px 15px;border-radius:14px;background:var(--night);color:var(--night-fg);font-size:13.5px;line-height:1.35;box-shadow:0 22px 40px -18px rgba(11,18,32,.75)}
.hx-miss b{display:block;margin-bottom:1px;color:#ff8a7a;font:600 15px/1.25 var(--display)}
.hx-miss .find-fav{width:28px;height:28px;font-size:13px;background:transparent;border:1.5px dashed rgba(241,243,233,.4);color:rgba(241,243,233,.55)}
/* fuera de la isla oscura el enlace va en tinta: la lima como texto no se lee sobre papel (regla §9) */
.hx-cta{width:min(100%,340px);margin-top:14px;border:1px solid var(--lime-edge);color:var(--paper)}
.hx-cta .i{color:var(--paper)}
.js-motion .hx{animation:probe-in 1.4s var(--m-ease) .28s both}
.js-motion .hx.is-armed .dx-zone{opacity:0;translate:0 10px;transition:opacity .45s,translate .6s var(--m-ease)}
.js-motion .hx.is-armed .dx-zone.is-in{opacity:1;translate:0 0}
.js-motion .hx.is-armed .hx-miss{opacity:0;translate:0 12px;scale:.94;transition:opacity .35s,translate .6s var(--m-ease),scale .6s cubic-bezier(.34,1.56,.64,1)}
.js-motion .hx.is-armed.is-miss .hx-miss{opacity:1;translate:0 0;scale:1}

/* ejemplo: en la primera revisión las mismas búsquedas cambian de estado y llega la primera consulta */
.demo-after{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(18px,3vw,36px);align-items:center;margin-top:24px}
.serp-check.is-after{border-color:var(--lime-edge)}
.sc-flip{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:6px 9px}
.sc-flip s{font:400 11px/1.2 var(--mono);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--dim);text-decoration:line-through 1.5px rgba(var(--leak-rgb),.85)}
.demo-msg{max-width:380px;box-shadow:0 24px 44px -24px rgba(0,0,0,.65)}
.js-motion .demo-after ol.is-in s{animation:was-strike .5s ease calc(.45s + var(--i,0) * 170ms) both}
.js-motion .demo-after ol.is-in>li b{animation-delay:calc(.8s + var(--i,0) * 170ms)}
@keyframes was-strike{from{color:var(--soft);text-decoration-color:transparent}}
@media (max-width:980px){.demo-after{grid-template-columns:1fr}}
@media (max-width:760px){.demo-after .serp-check li{flex-wrap:wrap}.sc-flip{justify-content:flex-start}}

/* ------------------------------------------------ v13: visuales. La foto de metas pasa a un mostrador real con luz
   de día, la banda queda ceñida (titular, texto, botón, celular y esfera) y en el celular el abanico se vuelve una
   sola foto grande que cambia con cada negocio */

/* metas: la foto es clara, así que la sombra baja */
.goal-photo{background:#e9e4da;box-shadow:0 30px 60px -38px rgba(16,26,43,.45)}

/* lo que revisamos sale de la banda y queda en una sección propia, clara, justo después */
.next-detail{padding-top:clamp(48px,6vw,80px)}
.next-detail .next-more{margin-top:0;align-items:center}
.next-detail .next-cols h4{font:600 clamp(20px,2vw,24px)/1.25 var(--display);letter-spacing:-.01em}
.next-detail .next-cols p{max-width:44ch;font-size:16.5px;color:var(--soft)}

/* banda en el celular: una sola foto grande detrás del teléfono, que se cambia con cada vuelta del diagnóstico */
@media (max-width:760px){
  .next-fan{height:auto;aspect-ratio:5/4;margin-inline:-4px}
  .next-fan li,.next-fan li.is-on{left:0;top:0;width:100%;height:100%;aspect-ratio:auto;border-width:0;border-radius:24px;transform:none;opacity:0;filter:none;transition:opacity .7s ease}
  .next-fan li.is-on{opacity:1}
  .js-motion .next-fan li{animation:none}
  .next-fan img{object-position:50% 40%}
  .fan-tag{left:12px;right:auto;top:12px;padding:6px 12px 6px 6px;font-size:13.5px}
  .fan-tag .find-fav{width:24px;height:24px;font-size:12px}
  .next-fan + .dx{margin-top:-118px}
}

/* ------------------------------------------------ v14: la página es solo clara (2026-09-29: el sitio va casi todo
   claro y lo oscuro queda para bandas de acento). Sin interruptor, con el mismo polvo de tinta que el inicio. El
   tablero, el árbol, el ejemplo y «Qué revisamos» pasan a papel. Quedan oscuros «Cómo trabajamos» y el pie (bandas
   de acento), y los celulares, las tarjetas de la pila, la esfera y el dock, que son pantallas o aparatos */

/* polvo del inicio (campo-particulas.js, compartido): el lienzo fijo va debajo del contenido y lo tapa todo lo que
   tiene fondo propio. Así la banda lima, «Cómo trabajamos» y el pie quedan limpios sin recortar el campo */
#campo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity .9s ease}
#campo.is-live{opacity:1}
.header,main,.footer{position:relative;z-index:1}

/* piezas en papel: la lima es relleno y resaltador, y lo que antes era texto o línea lima pasa a tinta (regla §9) */
#planes,.tree,.demo,.next-detail .scan{--acc:#101a2b;--acc-rgb:16,26,43;--lime-wash:rgba(184,243,74,.34);--lime-edge:rgba(16,26,43,.22)}
.tree,.demo,.next-detail .scan,#planes .panel{border:1px solid rgba(16,26,43,.12);background:#fafbf5;box-shadow:inset 0 1px 0 #fff,0 30px 60px -40px rgba(16,26,43,.4)}

/* tablero: sobre el papel con polvo, sin banda ni rejilla propia */
#planes.section-map{border-block:0;background:none}
#planes.section-map:before{content:none}
#planes .board-q button{background:rgba(250,251,245,.86);color:var(--soft)}
#planes .board-q button.is-focus{border-color:var(--lime);background:var(--lime);color:var(--on-lime)}
#planes .board-q button[aria-pressed=true]:not(.is-focus){border-color:var(--paper);background:var(--lime-wash);color:var(--paper)}
#planes .board-q button.is-lift{box-shadow:0 18px 38px -18px rgba(16,26,43,.35)}
#planes .plug{background:#fafbf5}
#planes .board-q button[aria-pressed=true] .plug{background:var(--lime)}
#planes .board-wires .cable.is-active,#planes .board-wires .cable.is-live{stroke:var(--paper);filter:drop-shadow(0 0 4px rgba(184,243,74,.95))}
#planes .board-wires .cable.is-live.is-hot{stroke:var(--paper);filter:drop-shadow(0 0 7px rgba(184,243,74,1))}
#planes .board-wires .cable.is-preview{stroke:rgba(16,26,43,.4)}
#planes .board-wires .head{fill:var(--lime);stroke:var(--paper);stroke-width:1.6}
#planes .st.is-active:before{background:var(--lime);border-color:var(--paper);box-shadow:0 0 0 5px rgba(184,243,74,.45)}
#planes .st:before{background:#fafbf5}
#planes .panel-grid,#planes .panel-grid>div{background:#fafbf5}
#planes .panel-grid{background:rgba(16,26,43,.12)}
#planes .panel-name{text-decoration:underline var(--lime);text-decoration-thickness:.32em;text-underline-offset:-.16em;text-decoration-skip-ink:none}
#planes .panel-link{border-bottom:3px solid var(--lime)}
#planes .matrix-scroll{background:#fafbf5}
#planes .matrix a{text-decoration-color:var(--lime);text-decoration-thickness:3px}

/* árbol */
.tree .tree-root{display:inline-block;padding:3px 8px;border-radius:6px;background:var(--lime)}

/* ejemplo: la foto conserva su pastilla oscura; los enlaces y la marca de la revisión van en tinta */
.demo a{text-decoration-color:var(--lime);text-decoration-thickness:3px}
.demo .tl .tl-launch{border-left-color:var(--lime);border-left-width:3px}
.demo .find-tag{color:var(--dim)}
.demo .serp-check,.demo .find-msg{background:#fff}

/* qué revisamos: tarjeta clara */
.next-detail .scan,.next-detail .scan h4,.next-detail .scan-end,.next-detail .scan-list li.is-done,.next-detail .scan-list li.is-now{color:var(--paper)}
.next-detail .scan-part{color:var(--dim)}
.next-detail .scan-list li{border-bottom-color:rgba(16,26,43,.1);color:var(--muted)}
.next-detail .scan-list li:before{border-color:rgba(16,26,43,.3)}
.next-detail .scan-list li.is-done:before{border-color:var(--paper);background:radial-gradient(circle,var(--lime) 0 4px,transparent 4.5px)}
.next-detail .scan-list li.is-now:before{border-color:var(--paper);box-shadow:0 0 0 5px rgba(184,243,74,.5)}
.next-detail .scan-end i{box-shadow:0 0 0 5px rgba(184,243,74,.4)}

/* ------------------------------------------------ v15: el celular como una búsqueda de verdad, el cursor que se nota
   en las piezas de papel y una firma más corta */

/* celular: pantalla clara como la de cualquier teléfono, con barra de estado, buscador, pestañas y los resultados de
   siempre (anuncio, resumen con IA, lugares con estrellas y resultados). Sin logotipos: la competencia es genérica */
.dx-phone{background:#fff;color:#202124;font-family:Roboto,Arial,sans-serif;padding:14px 12px 34px}
.dx-phone:after{background:rgba(32,33,36,.3)}
.dx-phone .dx-cap{display:flex;justify-content:space-between;align-items:center;margin:0 12px 10px;font:600 12px/1 Arial,sans-serif;letter-spacing:0;text-transform:none;color:#202124}
.dx-bars{display:flex;align-items:flex-end;gap:2px}
.dx-bars i{width:3px;border-radius:1px;background:#202124}
.dx-bars i:nth-child(1){height:5px}.dx-bars i:nth-child(2){height:7px}.dx-bars i:nth-child(3){height:9px}
.dx-phone .dx-search{min-height:40px;border:0;background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.28);color:#202124;font-size:14px}
.dx-phone .dx-search .i{color:#5f6368}
.dx-phone.dx-phone .dx-search:after{background:#1a73e8}
.dx-tabs{display:flex;gap:16px;margin:10px 2px 0;padding:0 6px;border-bottom:1px solid #ebebeb;font:13px/1 Arial,sans-serif;color:#5f6368;white-space:nowrap;overflow:hidden}
.dx-tabs>*{padding-bottom:8px}
.dx-tabs b{border-bottom:3px solid #1a73e8;color:#1a73e8;font-weight:600}
.dx-phone .dx-zones{gap:0;margin-top:2px}
.dx-phone .dx-zone{gap:2px;padding:10px 8px;border:0;border-bottom:1px solid #ebebeb;border-radius:10px;background:#fff}
.dx-phone .dx-zone:last-child{border-bottom:0}
.dx-phone .dx-zone.is-you{border-style:solid}
.dx-phone .dx-kind{font:700 12px/1.3 Arial,sans-serif;letter-spacing:0;text-transform:none;color:#202124}
.dx-site{display:flex;align-items:center;gap:8px;margin-top:3px;min-width:0}
.dx-site>span{min-width:0}
.dx-fav{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1px solid #dadce0;border-radius:50%;background:#f1f3f4;color:#5f6368;font:700 10.5px/1 Arial,sans-serif;font-style:normal}
.dx-site b{display:block;font:400 12.5px/1.25 Arial,sans-serif;color:#202124}
.dx-site small{display:block;overflow:hidden;font:11px/1.3 Arial,sans-serif;color:#4d5156;white-space:nowrap;text-overflow:ellipsis}
.dx-title{display:block;margin-top:3px;font:400 15px/1.28 Arial,sans-serif;color:#1a0dab}
.dx-phone .dx-line{font:12.5px/1.42 Arial,sans-serif;color:#4d5156}
.dx-phone .dx-line b{color:#202124;font-weight:700}
.dx-phone .dx-ai{margin:6px 0;padding:11px 12px;border-bottom:0;border-radius:14px;background:linear-gradient(135deg,#edf2fc,#f5f0fb)}
.dx-spark{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;background:linear-gradient(135deg,#4285f4,#9b72cb 55%,#d96570);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.dx-phone .dx-map{height:76px;margin:6px 0 2px;border-radius:12px;background:linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/64px 100%,linear-gradient(transparent 42%,#fff 42% 48%,transparent 48%) 0 0/100% 36px,radial-gradient(circle at 80% 72%,#cde9c6 0 18px,transparent 19px),radial-gradient(circle at 14% 20%,#cde9c6 0 12px,transparent 13px),#e8eaed}
.dx-phone .dx-map i,.dx-phone .dx-map i:nth-child(1){background:#ea4335;color:#fff;box-shadow:0 0 0 2px #fff,0 3px 6px rgba(0,0,0,.25)}
.dx-phone .dx-places li{display:block;padding:6px 2px;border-top:1px solid #ebebeb;font-size:inherit}
.dx-phone .dx-places li:first-child{border-top:0}
.dx-phone .dx-places b{display:block;font:500 13.5px/1.3 Arial,sans-serif;color:#202124}
.dx-phone .dx-places .dx-rate{display:block;overflow:hidden;font:12px/1.35 Arial,sans-serif;color:#4d5156;white-space:nowrap;text-overflow:ellipsis}
.dx-rate em{margin-right:3px;font-style:normal}
.dx-phone .dx-rate span{font:inherit;color:inherit;white-space:nowrap}
.dx-phone .dx-rate .dx-stars{margin-right:3px;color:#fbbc04;letter-spacing:-1px}
.dx-phone .dx-zone.is-you .dx-fav{border-color:#0b1220;background:var(--lime);color:#0b1220}
/* la revisión del diagnóstico sobre la pantalla clara: un borde lima y la línea que barre */
.dx-phone .dx-zone.is-scan{background:rgba(184,243,74,.16);box-shadow:0 0 0 2px #b8f34a}
.dx-phone .dx-zone.is-scan .dx-kind{color:#202124}
/* con el cursor, la zona se ofrece: el diagnóstico la revisa (banda) */
#dx .dx-zone{cursor:crosshair;transition:background .25s,box-shadow .25s}
/* en el hero la pantalla muestra solo lo que cabe, como una captura: los últimos resultados quedan cortados */
.hx .dx-phone{width:min(100%,348px);height:min(620px,calc(100svh - 190px));min-height:520px;overflow:hidden}
.hx-miss{margin-top:-26px}

/* piezas de papel: el foco que sigue al cursor vuelve a ser lima (con --acc en tinta quedaba invisible) */
:is(.tree,.demo,.next-detail .scan).spot:before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(184,243,74,.42),transparent 60%)}
/* pastillas del árbol: al pasar el cursor se encienden en lima y su carpeta también */
.tree .tags li{cursor:pointer}
.tree .tags li:hover,.tree .tags li:focus-visible,.tree .tags li.is-lit{translate:0 -3px;border-color:var(--paper);background:var(--lime);color:var(--on-lime);box-shadow:0 12px 22px -12px rgba(16,26,43,.5)}
.tree>ul>li{transition:background .25s,translate .3s var(--ease),opacity .25s}
.tree>ul>li.is-lit{background:rgba(184,243,74,.42);translate:6px 0}
/* las demoras de la entrada en cascada no deben frenar la respuesta al cursor */
.tree.is-in>ul>li.is-lit,.tree.is-in>ul>li:hover{transition:background .25s,translate .3s var(--ease),opacity .25s;transition-delay:0s}
.tree>ul>li:hover{background:rgba(184,243,74,.22)}
/* qué revisamos: cada fila se marca al pasar el cursor (antes el texto se volvía claro sobre la tarjeta clara) */
.next-detail .scan-list li{transition:color .2s,translate .25s var(--ease)}
.next-detail .scan-list li:hover{color:var(--paper);translate:5px 0}
.next-detail .scan-list li:hover:before{border-color:var(--paper);background:radial-gradient(circle,var(--lime) 0 4px,transparent 4.5px);box-shadow:0 0 0 4px rgba(184,243,74,.45)}

/* firma: en v14 la sección medía la frase más 150 % de pantalla y se hacía eterna; ahora la mitad */
.js-motion .signoff.is-armed{min-height:calc(var(--so-h,40vh) + 75vh)}
@media (max-width:760px){.js-motion .signoff.is-armed{min-height:calc(var(--so-h,30vh) + 60vh)}}

/* ============================================================ v16: el cierre que convence (2026-09-29: sin el celular
   ni la lista larga, «people will not read that», y que el CTA sea potente y «POP»). Sin el celular, el abanico, la
   esfera ni «Qué revisamos». Titular grande, cuatro puntos cortos y la hoja del diagnóstico de un negocio que pierde
   clientes, como el cierre del inicio. Móvil primero: titular, puntos, hoja y formulario */
.cta{padding-block:clamp(64px,8vw,124px)}
.cta-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "gets" "visual" "form";gap:26px;align-items:start}
.cta-head{grid-area:head}
.cta-gets{grid-area:gets}
.cta-visual{grid-area:visual}
.cta-form{grid-area:form}
@media (min-width:981px){
  .cta-in{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);grid-template-areas:"head visual" "gets visual" "form visual";column-gap:clamp(44px,6vw,100px);row-gap:28px;align-items:center}
}
.cta .next-title{max-width:12.5ch;margin:.28em 0 .34em;font-size:clamp(46px,6.3vw,98px);line-height:.93;letter-spacing:-.052em;text-wrap:balance}
/* v16b: en el celular el titular llena el ancho (2026-09-29: «es potente pero en el celular es muy chico»; eran 46 px) */
@media (max-width:560px){.cta .next-title{max-width:none;font-size:clamp(56px,18vw,84px);line-height:.9}}
/* «a otro»: tinta con letra lima, como un resaltador que se pasa al terminar de entrar el título */
.cta-mark{display:inline-block;padding:0 .14em .04em;margin:0 -.02em;border-radius:.14em;color:var(--lime);background:linear-gradient(var(--night),var(--night)) no-repeat 0 0/100% 100%;rotate:-2deg;white-space:nowrap;transition:background-size .8s var(--m-ease) .5s,color .3s .75s,rotate .6s var(--m-ease) .9s}
.js-motion .next-title.rv-armed .cta-mark{background-size:0% 100%;color:var(--on-lime);rotate:0deg}
.cta .next-lead{max-width:44ch;font-size:clamp(17px,1.3vw,19px)}

/* los cuatro puntos: cada uno enciende su hallazgo en la hoja (y al revés) */
.cta-gets{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0}
.cta-gets li{display:flex;align-items:flex-start;gap:11px;padding:13px 14px;border:1.5px solid rgba(11,18,32,.16);border-radius:16px;background:rgba(251,252,247,.3);font-size:15.5px;line-height:1.38;cursor:default;transition:background .3s,color .3s,border-color .3s,translate .4s var(--m-ease),box-shadow .4s}
.cta-gets b{font-weight:700;transition:color .3s}
.cg-n{flex:none;display:grid;place-items:center;width:27px;height:27px;margin-top:-2px;border-radius:50%;background:var(--night);color:var(--lime);font:700 11px/1 var(--mono);transition:background .3s,color .3s,scale .4s var(--m-ease)}
.cta-gets li.is-on{border-color:var(--night);background:var(--night);color:#c9d2dc;translate:0 -3px;box-shadow:0 18px 30px -18px rgba(11,18,32,.75)}
.cta-gets li.is-on b{color:var(--lime)}
.cta-gets li.is-on .cg-n{background:var(--lime);color:var(--night);scale:1.12}
.js-motion .cta-gets.is-in>li.is-on{transition:background .3s,color .3s,border-color .3s,translate .4s var(--m-ease),box-shadow .4s}
@media (max-width:560px){.cta-gets{grid-template-columns:1fr;gap:8px}.cta-gets li{padding:11px 13px;font-size:15px}}

/* formulario: dos campos y el botón a todo lo ancho */
.cta-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cta-form label{display:flex;flex-direction:column;gap:7px;font:700 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.cta-form input{min-height:54px;padding:14px 16px;border:1.5px solid rgba(11,18,32,.26);border-radius:12px;background:rgba(251,252,247,.62);color:var(--night);font:500 16px/1.2 var(--body);letter-spacing:0;text-transform:none;transition:border-color .2s,background .2s,box-shadow .25s,translate .3s var(--m-ease)}
.cta-form input::placeholder{color:rgba(11,18,32,.46)}
.cta-form input:hover{border-color:rgba(11,18,32,.55);background:rgba(251,252,247,.85)}
.cta-form input:focus{outline:none;border-color:var(--night);background:#fbfcf7;box-shadow:0 0 0 4px rgba(11,18,32,.13);translate:0 -2px}
.cta-form input[aria-invalid=true]{border-color:#8f1d12;background:#fff3f0}
.cta-form .btn-dark{grid-column:1/-1;justify-content:space-between;margin-top:4px;padding:21px 26px;border:0;font:600 clamp(17px,1.3vw,19px)/1.2 var(--body);cursor:pointer}
.cta-form .btn-dark .i{font-size:22px}
.cta-form .btn-dark.is-nope{animation:nope .45s var(--m-ease)}
@keyframes nope{20%{translate:-7px 0}45%{translate:6px 0}70%{translate:-3px 0}}
.cta-status{grid-column:1/-1;margin:0;font-size:14.5px;color:var(--on-lime-soft)}
.cta-status.is-error{color:#8f1d12;font-weight:600}
.cta-status.is-ok{color:var(--on-lime);font-weight:600}
@media (max-width:560px){.cta-form{grid-template-columns:1fr}.cta-form .btn-dark{padding:19px 22px}}

/* la hoja: una pantalla oscura inclinada que sigue al cursor */
.cta-visual{position:relative;perspective:1600px;margin-top:34px}
@media (min-width:981px){.cta-visual{margin-top:0}}
.rep{position:relative;margin:0;padding:16px;border-radius:24px;background:#0b1220;box-shadow:0 60px 90px -40px rgba(11,18,32,.75),0 0 0 1px rgba(241,243,233,.07) inset;transform:rotateX(var(--tx,4deg)) rotateY(var(--ty,-7deg)) rotateZ(.6deg);transition:transform .7s var(--m-ease),opacity .6s}
@media (max-width:980px){.rep{transform:rotateX(var(--tx,3deg)) rotateY(var(--ty,0deg)) rotateZ(-.8deg)}}
.js-motion .rep.is-armed:not(.is-up){opacity:0;transform:rotateX(18deg) rotateY(-20deg) rotateZ(4deg) translateY(70px) scale(.92)}
.js-motion .rep.is-armed.is-up{transition:transform 1.3s var(--m-ease),opacity .7s}
.rep-bar{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:2px 2px 12px;border-bottom:1px solid rgba(241,243,233,.1);font-size:13.5px;color:var(--soft)}
.rep-dots{display:flex;gap:5px}
.rep-dots i{width:9px;height:9px;border-radius:50%;background:rgba(241,243,233,.16)}
.rep-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rep-dom{padding:1px 3px;border-radius:4px;color:var(--paper);font-weight:600;transition:background .5s,color .5s}
.rep-dom.is-typed{background:var(--lime);color:#0b1220;transition:none}
.rep-live{display:flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(241,243,233,.08);color:var(--soft);font:700 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:background .4s,color .4s}
.rep-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:rep-blink .9s steps(2) infinite}
.rep.is-done .rep-live{background:var(--lime);color:#0b1220}
.rep.is-done .rep-live i{background:#0b1220;animation:none}
@keyframes rep-blink{50%{opacity:.15}}

/* quién se queda con tus clientes: el flujo de puntos */
.rep-leak{padding:13px 14px 12px;border:1px solid rgba(241,243,233,.08);border-radius:16px;background:rgba(241,243,233,.035)}
.rep-k{margin:0;font:700 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rep-flow{position:relative;height:clamp(124px,10.5vw,142px);margin:4px 0 2px;cursor:crosshair}
.rep-flow canvas{position:absolute;inset:0;width:100%;height:100%}
.flow-src,.flow-sink{position:absolute;z-index:1;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.15;white-space:nowrap}
.flow-src{left:0;top:50%;padding:7px 11px;border-radius:12px;background:#fbfcf7;color:#0b1220;translate:0 -50%;box-shadow:0 10px 22px -12px rgba(0,0,0,.8)}
@media (max-width:560px){
  .rep-flow{height:150px}
  .flow-src,.flow-sink{padding:5px 9px;font-size:12px}
  .flow-src{max-width:6.4em;white-space:normal;line-height:1.2}
}
.flow-src .i{font-size:15px}
.flow-sink{right:0}
.flow-sink.is-them{top:6%;border:1px solid rgba(var(--leak-rgb),.55);background:rgba(var(--leak-rgb),.14);color:var(--leak)}
.flow-sink.is-you{bottom:6%;background:var(--lime);color:#0b1220}
.rep-sum{margin:2px 0 0;font-size:15px;line-height:1.4;color:var(--soft)}
.rep-sum b{color:var(--paper);font-weight:650}

/* los cuatro hallazgos */
.rep-grid{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0;padding:0}
.rep-tile{position:relative;overflow:hidden;padding:13px 14px 14px;border:1px solid rgba(241,243,233,.1);border-radius:16px;background:rgba(241,243,233,.045);transition:border-color .35s,background .35s,translate .4s var(--m-ease),box-shadow .4s}
.rt-k{display:block;font:700 10.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--lime)}
.rt-n{display:block;margin:8px 0 3px;font:700 clamp(28px,2.3vw,34px)/1 var(--display);letter-spacing:-.04em;color:var(--paper);transition:color .35s}
.rep-tile small{display:block;min-height:2.7em;font-size:12.5px;line-height:1.35;color:var(--muted)}
.rep-tile.is-on{border-color:rgba(var(--leak-rgb),.62);background:rgba(var(--leak-rgb),.09);translate:0 -3px;box-shadow:0 20px 34px -20px rgba(0,0,0,.9)}
.rep-tile.is-on .rt-n{color:var(--leak)}
/* la línea lima que revisa cada hallazgo */
.rt-scan{position:absolute;left:8px;right:8px;top:0;height:2px;border-radius:2px;background:var(--lime);box-shadow:0 0 16px 3px rgba(var(--acc-rgb),.5);opacity:0;pointer-events:none}
.rep-tile.is-scan .rt-scan{animation:tile-scan .8s var(--m-soft) both}
@keyframes tile-scan{0%{opacity:0;top:4%}15%,80%{opacity:1}100%{opacity:0;top:96%}}
.rt-viz{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:9px}
.rt-viz>i{font-style:normal;transition:transform .6s var(--m-ease),opacity .4s,width .8s var(--m-ease)}
.rt-bars>i{flex:1;height:calc(var(--h) * 100%);border-radius:3px;background:rgba(var(--leak-rgb),.78);transform-origin:50% 100%}
.rt-race{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
.rt-race>i{height:4px;width:calc(var(--w) * 100%);border-radius:3px;background:rgba(241,243,233,.42)}
.rt-race>i.is-you{background:var(--leak);box-shadow:0 0 0 3px rgba(var(--leak-rgb),.2)}
.rt-ia{align-items:center;gap:5px}
.rt-ia>i{display:grid;place-items:center;width:23px;height:23px;border-radius:50% 50% 50% 5px;background:rgba(241,243,233,.1);color:var(--muted);font:700 10px/1 var(--mono)}
.rt-pips{align-items:center;gap:6px}
.rt-pips>i{width:12px;height:12px;border-radius:50%;background:var(--lime)}
.rt-pips>i.is-bad{background:var(--leak)}
/* antes de revisarse, cada dibujo está plegado; al revisarse entra en cascada */
.js-motion .rep.is-armed .rep-tile:not(.is-hit) .rt-bars>i{transform:scaleY(.06)}
.js-motion .rep.is-armed .rep-tile:not(.is-hit) .rt-race>i{width:4px}
.js-motion .rep.is-armed .rep-tile:not(.is-hit) :is(.rt-ia,.rt-pips)>i{transform:scale(0);opacity:0}
.rep-tile.is-hit .rt-viz>i:nth-child(2){transition-delay:.05s}.rep-tile.is-hit .rt-viz>i:nth-child(3){transition-delay:.1s}.rep-tile.is-hit .rt-viz>i:nth-child(4){transition-delay:.15s}.rep-tile.is-hit .rt-viz>i:nth-child(5){transition-delay:.2s}.rep-tile.is-hit .rt-viz>i:nth-child(6){transition-delay:.25s}.rep-tile.is-hit .rt-viz>i:nth-child(7){transition-delay:.3s}.rep-tile.is-hit .rt-viz>i:nth-child(8){transition-delay:.35s}
/* el hallazgo encendido sigue vivo: las barras respiran, «tú» parpadea y la IA sigue nombrando a otros */
.rep-tile.is-on .rt-bars>i{animation:bar-breathe 1.1s ease-in-out infinite alternate}
.rep-tile.is-on .rt-bars>i:nth-child(odd){animation-delay:-.55s}
@keyframes bar-breathe{to{transform:scaleY(.62)}}
.rep-tile.is-on .rt-race>i.is-you{animation:rep-blink .8s steps(2) infinite}
.rep-tile.is-on .rt-ia>i{animation:ia-say 2s var(--m-ease) infinite;animation-delay:calc(var(--n,0) * .22s)}
.rt-ia>i:nth-child(2){--n:1}.rt-ia>i:nth-child(3){--n:2}.rt-ia>i:nth-child(4){--n:3}.rt-ia>i:nth-child(5){--n:4}
@keyframes ia-say{0%,40%,100%{translate:0 0;background:rgba(241,243,233,.1)}18%{translate:0 -4px;background:rgba(var(--leak-rgb),.35);color:var(--paper)}}
.rep-tile.is-on .rt-pips>i.is-bad{animation:pip-pop 1s var(--m-ease) infinite alternate}
@keyframes pip-pop{to{scale:1.3;box-shadow:0 0 0 4px rgba(var(--leak-rgb),.2)}}

/* por dónde empezar: llega como un sello cuando termina la revisión */
.rep-next{display:flex;flex-direction:column;gap:5px;margin:0;padding:13px 15px 14px;border-radius:16px;background:var(--lime);color:#0b1220;transition:opacity .35s,transform .75s cubic-bezier(.34,1.56,.64,1)}
.rep-next span{font:700 10.5px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase}
.rep-next b{font-size:15.5px;line-height:1.35;font-weight:650}
.js-motion .rep.is-armed:not(.is-done) .rep-next{opacity:0;transform:translateY(16px) scale(.94) rotate(-2deg)}

/* el sello que gira: gratis, 15 minutos, sin compromiso */
.cta-seal{position:absolute;left:-66px;top:-66px;z-index:3;display:grid;place-items:center;width:clamp(104px,9.2vw,126px);aspect-ratio:1;border-radius:50%;background:#fbfcf7;color:#0b1220;box-shadow:0 20px 36px -16px rgba(11,18,32,.6);transition:scale .45s var(--m-ease),rotate .45s var(--m-ease)}
.cta-seal svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:seal-spin 18s linear infinite}
.cta-seal text{font:700 9.6px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:#0b1220}
.cta-seal b{display:grid;place-content:center;width:50%;aspect-ratio:1;border-radius:50%;background:var(--lime);font:700 clamp(25px,2.2vw,31px)/.86 var(--display);letter-spacing:-.04em;text-align:center}
.cta-seal small{display:block;margin-top:2px;font:700 9.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase}
@media (hover:hover){.cta-visual:hover .cta-seal{scale:1.08;rotate:-8deg}}
/* el sello llega con la hoja, no antes */
.js-motion .rep.is-armed:not(.is-up)+.cta-seal{opacity:0;scale:.3;rotate:-120deg}
.js-motion .rep.is-armed+.cta-seal{transition:opacity .4s .5s,scale .9s cubic-bezier(.34,1.56,.64,1) .5s,rotate .9s var(--m-ease) .5s}
.js-motion .rep.is-armed.is-done+.cta-seal{transition:scale .45s var(--m-ease),rotate .45s var(--m-ease)}
@keyframes seal-spin{to{rotate:360deg}}
@media (max-width:980px){
  .cta-visual{margin-top:64px}
  .cta-seal{left:auto;right:8px;top:-78px;width:92px}
  .cta-seal b{font-size:24px}
  .cta-seal small{font-size:8.5px}
}
@media (prefers-reduced-motion:reduce){
  .cta-seal svg,.rep-live i,.rep-tile.is-on :is(.rt-bars,.rt-race,.rt-ia,.rt-pips)>i{animation:none}
  .rep{transition:none}
}

/* ============================================================ v18 (2026-09-29): el celular del hero marca los cuatro
   lugares donde el dueño no está, «Cuándo te conviene» con foto y tarjetas como las metas, la hoja del CTA en tres
   tarjetas y una firma que ya no se queda fija */

/* hero: anuncio, IA, primer resultado orgánico y Maps, en ese orden. Al revisarse, cada zona recibe una etiqueta lima
   sobre su borde («1 Anuncio pagado · No estás»). La pantalla es un poco más alta para que entren las cuatro */
.hx .dx-phone{height:min(690px,calc(100svh - 140px));min-height:560px}
/* en escritorio crece menos, para que el texto del hero y su botón no bajen del pliegue */
@media (min-width:981px){.hx .dx-phone{height:min(650px,calc(100svh - 170px));min-height:540px}}
.hx .dx-zones{margin-top:6px}
.hx .dx-zone{overflow:visible;margin-top:9px;padding-top:15px}
.hx .dx-zone.dx-ai{margin-top:13px;padding-top:15px}
/* la línea que barre la zona se mueve dentro de su propio fondo: la zona ya no recorta (la etiqueta sobresale) */
.hx .dx-zone:after{transform:none;opacity:0;border-radius:inherit;background:linear-gradient(180deg,transparent 0 36%,rgba(184,243,74,.2) 47.5%,#b8f34a 48.8%,transparent 50%) no-repeat 0 100%/100% 200%}
.hx .dx-zone.is-scan:after{animation:hx-sweep .8s var(--m-soft) both}
@keyframes hx-sweep{0%{opacity:1;background-position:0 100%}85%{opacity:1}100%{opacity:0;background-position:0 0}}
.hx-tag{position:absolute;left:6px;top:0;z-index:2;display:flex;align-items:center;gap:6px;max-width:calc(100% - 12px);padding:3px 9px 3px 3px;border-radius:999px;background:#b8f34a;color:#0b1220;font:700 11.5px/1.2 Arial,sans-serif;white-space:nowrap;translate:0 -50%;box-shadow:0 0 0 2px #fff,0 6px 14px -6px rgba(11,18,32,.45)}
.hx-tag i{display:grid;place-items:center;flex:none;width:17px;height:17px;border-radius:50%;background:#0b1220;color:#b8f34a;font:700 10px/1 var(--mono);font-style:normal}
.hx-tag em{display:flex;align-items:center;gap:4px;margin-left:2px;padding-left:7px;border-left:1px solid rgba(11,18,32,.25);font-style:normal;font-weight:700;color:#8f1d12}
.hx-tag em:before{content:'✕';font-size:10px}
.js-motion .hx.is-armed .hx-tag{opacity:0;scale:.4;transform-origin:14px 50%;transition:opacity .2s,scale .55s cubic-bezier(.34,1.56,.64,1)}
.js-motion .hx.is-armed .dx-zone.is-tagged .hx-tag{opacity:1;scale:1}
@media (max-width:380px){.hx-tag{font-size:10.5px;gap:5px}}

/* «Cuándo te conviene»: el mismo esquema que las metas (foto con pines y cuatro tarjetas que dicen lo mismo). En el
   papel las tarjetas llevan el dibujo de puntos arriba y el título subrayado en lima */
.fit-goals .goal span{font-size:15px;line-height:1.45;color:var(--soft)}
/* otra solución: una nota corta y en tono neutro, sin tarjeta grande */
.fit-other{display:grid;gap:10px 28px;margin-top:22px;padding:18px 20px;border:1px dashed rgba(16,26,43,.22);border-radius:18px}
.fit-other h3{margin:0;font:650 17px/1.25 var(--display);letter-spacing:-.01em;color:var(--paper)}
.fit-other ul{display:grid;gap:6px 24px;margin:0;padding:0;list-style:none}
.fit-other li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.45;color:var(--soft)}
.fit-other li:before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:currentColor;opacity:.55}
.fit-other-link{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--paper);text-decoration:underline var(--lime) 3px;text-underline-offset:4px;transition:gap .25s var(--ease)}
.fit-other-link .i{width:14px;height:14px;transition:translate .25s var(--ease)}
.fit-other-link:hover{gap:9px}
.fit-other-link:hover .i{translate:2px 0}
@media (min-width:981px){
  .fit-other{grid-template-columns:minmax(0,210px) minmax(0,1fr) auto;align-items:center;padding:18px 24px}
  .fit-other ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* la hoja del CTA en tres tarjetas (2026-09-29: «tres cards… quién se queda con tus clientes, otra ancha con 0 de 5
   respuestas de IA, seis negocios salen antes que tú»; «8 búsquedas» no se entendía). En el celular van una debajo
   de otra; desde 561 px el flujo va arriba a todo lo ancho y las otras dos debajo */
.rep-cards{list-style:none;display:grid;gap:10px;margin:0 0 10px;padding:0}
@media (min-width:561px){
  .rep-cards{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .rep-cards .rep-leak{grid-column:1/-1}
}
.rep-cards .rep-k{color:var(--lime)}
.rep-cards .rep-leak .rep-k{color:var(--muted)}
.rep-cards .rep-leak.is-on .rep-k{color:var(--leak)}
.rt-fig{display:flex;align-items:center;gap:12px;margin:9px 0 0}
.rt-fig .rt-n{flex:none;margin:0;font-size:clamp(30px,2.5vw,38px)}
.rep-tile .rt-fig small{min-height:0;font-size:13.5px;line-height:1.3;color:var(--soft)}
.rep-cards .rt-viz{height:30px;margin-top:12px}
.rep-cards .rt-ia{gap:6px}
.rep-cards .rt-ia>i{width:30px;height:30px;background:rgba(241,243,233,.15);color:var(--paper);font-size:12px}
.rt-ia>i.is-you,.rt-rank>i.is-you{width:auto;padding:0 9px;border-radius:999px;font:700 11.5px/1 var(--body)}
.rt-ia>i.is-you{border:1.5px dashed rgba(241,243,233,.4);background:transparent;color:rgba(241,243,233,.55);text-decoration:line-through 1.5px var(--leak)}
.rt-rank{align-items:center;gap:4px}
.rt-rank>i{display:grid;place-items:center;height:24px;width:22px;border-radius:7px;background:rgba(241,243,233,.13);color:var(--soft);font:700 10.5px/1 var(--mono)}
.rt-rank>i.is-you{height:26px;background:var(--leak);color:#0b1220}
.js-motion .rep.is-armed .rep-tile:not(.is-hit) .rt-rank>i{transform:scale(0);opacity:0}
.rep-tile.is-on .rt-rank>i.is-you{animation:rep-blink .8s steps(2) infinite}
.rep-tile.is-on .rt-ia>i.is-you{animation:none}
.rep-cards .rep-tile.is-on{translate:0 -2px}
/* en dos columnas el número va arriba, grande, y la frase debajo */
@media (min-width:561px){
  .rep-ia .rt-fig,.rep-race .rt-fig{flex-direction:column;align-items:flex-start;gap:5px}
  .rep-ia .rt-n,.rep-race .rt-n{font-size:clamp(38px,3.3vw,48px)}
}
@media (max-width:560px){
  .rep-cards .rt-fig .rt-n{font-size:38px}
}
@media (prefers-reduced-motion:reduce){.rep-tile.is-on .rt-rank>i{animation:none}}

/* firma: sin la parte fija. La sección mide la frase y poco más, así después del FAQ llega la frase y enseguida el pie */
.signoff{padding-block:clamp(40px,5vw,72px) clamp(28px,4vw,56px)}
.js-motion .signoff.is-armed{min-height:0}
.js-motion .signoff.is-armed .signoff-line{position:relative;top:auto}
@media (max-width:760px){.js-motion .signoff.is-armed{min-height:0}}

/* ============================================================ v20 (2026-09-29): tablero informativo, «Por qué
   necesitas el SEO» con otras soluciones enlazadas, ejemplo más corto y la hoja del CTA que llega antes */

/* tablero: ya no se desconecta, así que el conector de la situación elegida no muestra la ✕ con el cursor */
#planes .board-q button[aria-pressed=true]:hover .plug:after{opacity:0}
#planes .board-q button[aria-pressed=true]:hover .plug i{opacity:1}

/* otra solución: cada caso lleva a su solución */
.fit-other ul{gap:0}
.fit-other li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 0;border-top:1px dashed rgba(16,26,43,.16)}
.fit-other li:first-child{border-top:0;padding-top:4px}
.fit-other li:before{content:none}
.fit-other li a{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid rgba(16,26,43,.2);border-radius:999px;background:#fafbf5;color:var(--paper);font-size:13.5px;font-weight:600;text-decoration:none;transition:background .2s,border-color .2s,gap .25s var(--ease),translate .25s var(--ease)}
.fit-other li a .i{width:13px;height:13px;transition:translate .25s var(--ease)}
.fit-other li a:hover,.fit-other li a:focus-visible{border-color:var(--paper);background:var(--lime);translate:0 -2px}
.fit-other li a:hover .i{translate:2px 0}
@media (min-width:981px){
  .fit-other{grid-template-columns:minmax(0,190px) minmax(0,1fr);align-items:start}
  .fit-other ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 26px}
  .fit-other li,.fit-other li:first-child{height:100%;justify-content:space-between;padding:0 0 0 18px;border-top:0;border-left:1px dashed rgba(16,26,43,.16)}
}

/* ejemplo: los datos del caso a la izquierda y, al lado, las búsquedas de hoy a la primera revisión y el mensaje */
.demo-body .demo-after{grid-template-columns:1fr;gap:16px;margin-top:0;align-items:start}
.demo-body .demo-after .sc-why{margin-top:10px}

/* ============================================================ biblioteca (plantilla #7, pilar Google Ads): el celular
   «anuncio» (#hxa). La búsqueda con los anuncios arriba; el cliente toca el tuyo y el clic se cobra; su web entra
   desde la derecha, tarda en cargar y el diagnóstico marca lo que falla; vuelve y toca el anuncio de otro. Usa las
   clases del celular del hero (.hx, .dx-*) y solo agrega lo propio. Sin movimiento queda la búsqueda con «Pagaste
   este clic» y el final; la web (un dibujo, aria-hidden) no se muestra */
.hx-ads .ha-ad{position:relative;overflow:hidden}
.hx-ads .ha-ad.is-you{box-shadow:inset 0 0 0 1.5px rgba(11,18,32,.14)}
.ha-tap{position:absolute;left:62%;top:52%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(32,33,36,.2);opacity:0;scale:.2;pointer-events:none}
.ha-ad.is-tap{background:#f1f3f4}
.ha-ad.is-tap .ha-tap{animation:ha-tap .7s ease-out both}
@keyframes ha-tap{0%{opacity:.9;scale:.2}100%{opacity:0;scale:2.4}}
.ha-paid{position:absolute;right:8px;top:9px;display:flex;align-items:center;gap:6px;padding:4px 9px 4px 6px;border-radius:999px;background:#0b1220;color:#f1f3e9;font:700 11px/1.1 Arial,sans-serif;white-space:nowrap;box-shadow:0 6px 14px -6px rgba(11,18,32,.5)}
.ha-paid i{width:13px;height:13px;border-radius:50%;background:#b8f34a;box-shadow:inset 0 0 0 2.5px #95cf2e}
.js-motion .hx-ads.is-armed .ha-paid{opacity:0;scale:.5;translate:0 -4px;transform-origin:100% 50%;transition:opacity .2s,scale .5s cubic-bezier(.34,1.56,.64,1),translate .5s var(--m-ease)}
.js-motion .hx-ads.is-armed .ha-ad.is-paid .ha-paid{opacity:1;scale:1;translate:0 0}
.hx-ads .ha-ad.is-pick{background:#e8f0fe}
.ha-serp{transition:translate .6s var(--m-ease),opacity .6s}
.hx-ads.is-web .ha-serp{translate:-28% 0;opacity:.35}

/* la web del negocio: entra desde la derecha como una página nueva */
.ha-web{display:none}
.js-motion .hx-ads.is-armed .ha-web{position:absolute;left:0;right:0;top:36px;bottom:0;z-index:4;display:flex;flex-direction:column;gap:12px;padding:6px 12px 34px;background:#fff;box-shadow:-18px 0 30px -18px rgba(11,18,32,.35);translate:104% 0;transition:translate .6s var(--m-ease)}
.js-motion .hx-ads.is-armed.is-web .ha-web{translate:0 0}
.ha-bar{display:flex;align-items:center;gap:8px;height:34px;margin:0;padding:0 14px;border-radius:999px;background:#f1f3f4;font:13px/1 Arial,sans-serif;color:#202124}
.ha-bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ha-lock{position:relative;flex:none;width:9px;height:7px;margin-top:4px;border-radius:2px;background:#5f6368}
.ha-lock:before{content:'';position:absolute;left:1.5px;bottom:5px;width:6px;height:6px;border:1.6px solid #5f6368;border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box}
.ha-load{display:block;height:3px;margin:6px 10px 0;border-radius:3px;background:#1a73e8;transform-origin:0 50%;scale:0 1}
.hx-ads.is-loading .ha-load{animation:ha-load 2s cubic-bezier(.25,.7,.3,1) both}
.hx-ads.is-loaded .ha-load{animation:none;scale:1 1;opacity:0;transition:opacity .4s}
@keyframes ha-load{0%{scale:0 1}35%{scale:.3 1}70%{scale:.46 1}92%{scale:.62 1}100%{scale:1 1}}
.ha-page{display:flex;flex-direction:column;gap:12px;opacity:0;transition:opacity .35s}
.hx-ads.is-loaded .ha-page{opacity:1}
.ha-nav{display:flex;align-items:center;justify-content:space-between;margin:0;padding:4px 4px 8px;border-bottom:1px solid #ebebeb;font:700 15px/1.2 Arial,sans-serif;color:#202124}
.ha-burger{position:relative;width:18px;height:2px;border-radius:2px;background:#5f6368;box-shadow:0 -6px 0 #5f6368,0 6px 0 #5f6368}
.ha-part{position:relative;border-radius:12px;transition:box-shadow .3s,background .3s}
.ha-hero{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:150px;padding:16px 14px 26px;background:linear-gradient(160deg,#9aa4b5,#5d6b82 60%,#3f4a5c);color:#fff;font-family:Arial,sans-serif}
.ha-hero>b{font:700 26px/1.1 Arial,sans-serif;letter-spacing:-.01em}
.ha-hero>span:not(.hx-tag){font-size:13px;opacity:.85}
.ha-dots{position:absolute;left:50%;bottom:10px;display:flex;gap:5px;translate:-50% 0}
.ha-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5)}
.ha-dots i:first-child{background:#fff}
.ha-rest{display:flex;flex-direction:column;gap:8px;padding:20px 4px 10px;font:700 14px/1.2 Arial,sans-serif;color:#202124}
.ha-lines{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.ha-lines i{height:7px;border-radius:4px;background:#e8eaed}
.ha-lines i:nth-child(2){width:88%}
.ha-lines i:nth-child(3){width:64%}
.ha-tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ha-tiles i{height:46px;border-radius:9px;background:#eef0f2}
.ha-part.is-scan{background-color:rgba(184,243,74,.16);box-shadow:0 0 0 2px #b8f34a}
.ha-hero.is-scan{box-shadow:0 0 0 2px #b8f34a,0 0 0 6px rgba(184,243,74,.35)}
.ha-web .hx-tag{left:8px;top:0}
.ha-top .hx-tag{top:auto;bottom:-2px;translate:0 50%}
.ha-web .hx-tag:after{content:'✕';margin-left:1px;color:#8f1d12;font-size:10px}
.js-motion .hx-ads.is-armed .ha-part .hx-tag{opacity:0;scale:.4;transform-origin:14px 50%;transition:opacity .2s,scale .55s cubic-bezier(.34,1.56,.64,1)}
.js-motion .hx-ads.is-armed .ha-part.is-tagged .hx-tag{opacity:1;scale:1}
.ha-top{padding-bottom:6px}
@media (max-width:380px){.ha-hero>b{font-size:22px}.ha-paid{font-size:10px}}


/* ------------------------------------------------ portada (2026-09-30): bloques nuevos de la biblioteca. Solo suman
   clases nuevas; las demás landings no las usan */

/* ---------- «Cómo trabajamos» sin el embudo de «Lo que medimos» (la portada ya lo tiene en el hero): en escritorio los
   cinco pasos van en fila y la línea que fluye los recorre de izquierda a derecha */
@media (min-width:981px){
  .work.is-solo{grid-template-columns:1fr}
  .work.is-solo .track{grid-template-columns:repeat(5,minmax(0,1fr));gap:34px;padding-left:0;padding-top:52px}
  .work.is-solo .track-n{left:0;top:0;translate:0 -52px}
}

/* ---------- industrias: la búsqueda de su cliente, el rubro, lo que diría el dueño y el enlace; toda la tarjeta lleva a
   su página. En el celular se deslizan de lado */
.ind-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(28px,4vw,44px)}
.ind{position:relative;display:flex;flex-direction:column;gap:10px;padding:20px 22px 22px;border:1px solid rgba(16,26,43,.12);border-radius:20px;background:#fafbf5;box-shadow:inset 0 1px 0 #fff,0 22px 44px -30px rgba(16,26,43,.38);transition:translate .25s var(--ease),border-color .25s}
.ind.spot:before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(var(--acc-rgb),.34),transparent 60%)}
.ind-q{display:flex;align-items:center;gap:9px;align-self:flex-start;max-width:100%;padding:8px 13px;border:1px solid rgba(16,26,43,.14);border-radius:999px;background:#fff;box-shadow:0 8px 18px -12px rgba(16,26,43,.45);font-size:13.5px;line-height:1.2;color:#101a2b}
.ind-q .i{flex:none;width:14px;height:14px;color:var(--muted)}
.ind-q span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ind-name{margin-top:8px;font:650 clamp(24px,2.3vw,30px)/1.04 var(--display);letter-spacing:-.028em}
.ind-say{flex:1;font-size:15.5px;line-height:1.5;color:var(--soft)}
.ind-say:before{content:'«'}
.ind-say:after{content:'»'}
.ind-link{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:4px;font-size:15px;font-weight:600;color:var(--paper);text-decoration:underline var(--lime) 3px;text-underline-offset:5px}
.ind-link .i{transition:translate .25s var(--ease)}
.ind-link:after{content:'';position:absolute;inset:0;border-radius:20px}
.ind-all{justify-content:flex-end;border-color:var(--lime);background:var(--lime);box-shadow:none}
.ind-all .ind-say{flex:0 0 auto;color:var(--on-lime-soft)}
.ind-all .ind-say:before,.ind-all .ind-say:after{content:none}
.ind-all .ind-link{font:650 clamp(22px,2vw,27px)/1.1 var(--display);letter-spacing:-.02em;color:var(--on-lime);text-decoration-color:var(--on-lime)}
@media (hover:hover){
  .ind:hover{translate:0 -4px;border-color:rgba(16,26,43,.32)}
  .ind:hover .ind-link .i{translate:3px -3px}
}
/* la lista entra entera (en el celular es un carrusel y las tarjetas de la derecha nunca cruzan la pantalla) y sus
   tarjetas llegan en cascada */
.js-motion .ind-grid.rv-armed{opacity:1;translate:none}
.js-motion .ind-grid.rv-armed>li{opacity:0;translate:0 26px}
.js-motion .ind-grid.is-in>li{opacity:1;translate:0 0;transition:opacity .7s var(--m-soft),translate 1s var(--m-ease),border-color .25s}
.js-motion .ind-grid.is-in>li:nth-child(2){transition-delay:75ms}
.js-motion .ind-grid.is-in>li:nth-child(3){transition-delay:150ms}
.js-motion .ind-grid.is-in>li:nth-child(4){transition-delay:225ms}
.js-motion .ind-grid.is-in>li:nth-child(5){transition-delay:300ms}
.js-motion .ind-grid.is-in>li:nth-child(6){transition-delay:375ms}
.ind-link:focus-visible{outline:none}
.ind:has(.ind-link:focus-visible){outline:2px solid var(--paper);outline-offset:3px}
@media (max-width:980px){.ind-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .ind-grid{display:flex;gap:12px;margin-inline:calc(-1 * var(--gutter));padding:4px var(--gutter) 18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .ind-grid::-webkit-scrollbar{display:none}
  .ind{flex:0 0 82%;scroll-snap-align:start;padding:18px}
  .ind-all{flex-basis:64%}
}