/* ============================================================
   GESTIÓN INTELIGENTE — base + componentes
   Depende de tokens.css (cargalo antes). Layout base sin media queries:
   las @media solo agregan aire en pantallas grandes (min-width).
   ============================================================ */

/* ================= BASE ================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  font-size:var(--step-0);line-height:1.5;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
  padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media(min-width:860px){body{padding-bottom:0}}
img,svg{display:block;max-width:100%}
/* El atributo hidden NO se defiende solo. La regla [hidden]{display:none} vive
   en la hoja del navegador, y CUALQUIER regla nuestra que ponga display le gana
   por origen de cascada, sin importar la especificidad. Sin esta linea:
     - #q-rubro-otro (.diag-form .q -> display:grid) se veia SIEMPRE, aunque no
       hubieras elegido "otro" en el rubro;
     - el formulario (.diag-form -> grid) seguia abajo del informe;
     - la tarjeta del mail (.inf-pdf -> grid) no se iba al mostrar el gracias.
   Va con !important a proposito: es lo unico que gana contra un display puesto
   en una clase, y "hidden" no admite matices. */
[hidden]{display:none!important}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.02;letter-spacing:-.04em;font-weight:800}
p{margin:0}ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%)}
.bg-glow{position:fixed;z-index:0;pointer-events:none;top:-32vh;left:50%;
  transform:translateX(-50%);width:min(1200px,120vw);height:78vh;filter:blur(28px);opacity:.55;
  background:
    radial-gradient(38% 46% at 22% 30%,rgba(61,90,241,.30),transparent 70%),
    radial-gradient(36% 44% at 78% 24%,rgba(214,49,138,.24),transparent 70%),
    radial-gradient(44% 50% at 50% 68%,rgba(46,217,176,.18),transparent 72%)}
@media(prefers-reduced-motion:no-preference){
  .bg-glow{animation:glowdrift 24s var(--ease) infinite alternate}
}
@keyframes glowdrift{to{transform:translateX(-50%) translateY(4vh) scale(1.08)}}
main,header,footer{position:relative;z-index:1}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--sp-5)}
@media(min-width:860px){.wrap{padding-inline:var(--sp-8)}}
section{padding-block:var(--sp-16)}
@media(min-width:860px){section{padding-block:var(--sp-24)}}
.strip{border-block:1px solid var(--border);background:var(--surface)}

.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--step--2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-mut)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--gradient-iris)}
.eyebrow span{font-family:"IBM Plex Mono",monospace;font-size:var(--step--2);
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.h-xl{font-size:var(--step-3);letter-spacing:-.05em;text-wrap:balance}
.h-lg{font-size:var(--step-2);text-wrap:balance}
.lead{font-size:var(--step-1);font-weight:200;color:var(--text-mut);line-height:1.3;text-wrap:pretty}
.mut{color:var(--text-mut)}
.mark{background:var(--accent);color:var(--accent-ink);padding:0 .16em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:52px;padding:0 var(--sp-6);border-radius:var(--r-pill);font-weight:700;
  font-size:var(--step-0);letter-spacing:-.01em;text-decoration:none;border:1px solid transparent;
  transition:transform .16s var(--ease),background-color .16s var(--ease),border-color .16s var(--ease)}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--outline)}
.btn-ghost:hover{border-color:var(--text);background:var(--surface)}
.btn-block{width:100%}

/* ================= HEADER ================= */
header{position:sticky;top:0;z-index:50;background:var(--header-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
header.scrolled{border-bottom-color:var(--border)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:var(--sp-4)}
.nav-actions{display:flex;align-items:center;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none;font-weight:800;
  letter-spacing:-.035em;font-size:1.02rem;line-height:1.05}
.brand-mark{width:30px;height:30px;flex:0 0 30px;border-radius:8px;background:var(--gradient-iris-deep);
  display:grid;place-items:center;color:#fff;font-weight:800;font-size:.85rem;
  text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
/* Cuando la marca es la imagen real del logo y no el monograma "GI": el archivo
   es cuadrado igual que la caja, asi que cover no recorta nada. A 30px el emblema
   se lee como escudo de color, no como monograma; es el precio de usar el logo
   real en un espacio chico. El degrade de arriba queda de fondo por si no carga. */
img.brand-mark{display:block;object-fit:cover;text-shadow:none}
.brand small{display:block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.2em;color:var(--text-mut);font-weight:400;text-transform:uppercase}
.nav-links{display:none;gap:var(--sp-6)}
.nav-links a{text-decoration:none;color:var(--text-mut);font-size:var(--step--1)}
.nav-links a:hover{color:var(--text)}
.nav .btn{min-height:42px;padding:0 var(--sp-4);font-size:var(--step--1);display:none}
@media(min-width:860px){.nav-links{display:flex}.nav .btn{display:inline-flex}}

/* ================= HERO ================= */
.hero{padding-top:var(--sp-8);padding-bottom:var(--sp-10)}
@media(min-width:980px){.hero{padding-top:var(--sp-16)}
  .hero-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:var(--sp-12);align-items:center}}
.hero h1{margin-bottom:var(--sp-4)}
.hero .lead{max-width:28ch;margin-bottom:var(--sp-6)}
.hero-cta{display:flex;flex-direction:column;gap:var(--sp-3)}
@media(min-width:520px){.hero-cta{flex-direction:row}}

/* --- conmutador de demos --- */
.tabs{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-4);overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:44px;
  padding:0 var(--sp-4);border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);color:var(--text-mut);font-size:var(--step--1);font-weight:600;
  transition:all .2s var(--ease)}
.tab i{width:7px;height:7px;border-radius:50%;background:var(--border-strong);display:block;flex:0 0 7px}
.tab[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tab[aria-selected="true"] i{background:var(--accent-ink)}
.stage{position:relative;margin-top:var(--sp-8)}
@media(min-width:980px){.stage{margin-top:0}}
.panel{display:none}
.panel.on{display:block;animation:fade .35s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.device{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
.device-bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border);background:var(--scrim)}
.avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;background:var(--gradient-iris-deep);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.8rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.device-bar b{font-size:var(--step--1);display:block;letter-spacing:-.02em}
.clock{margin-left:auto;text-align:right}
.clock b{color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:var(--step--1)}
.device-foot{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  border-top:1px solid var(--border);background:var(--scrim)}
.device-foot .mono{font-size:.62rem;letter-spacing:.1em}
.pulse{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:var(--wa);
  box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* chat */
.chat{padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);
  height:clamp(340px,50vh,412px);overflow:hidden;justify-content:flex-end}
.msg{max-width:86%;padding:var(--sp-3) var(--sp-4);border-radius:16px;font-size:var(--step--1);
  line-height:1.4;opacity:0;transform:translateY(10px) scale(.98);animation:pop .38s var(--ease) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.msg.them{align-self:flex-start;background:var(--surface-2);border:1px solid var(--border);border-bottom-left-radius:5px}
.msg.bot{align-self:flex-end;background:var(--bot-bg);border:1px solid var(--bot-border);border-bottom-right-radius:5px}
.msg .time{display:block;margin-top:4px;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  color:var(--text-mut);letter-spacing:.08em}
.typing{display:flex;gap:4px;align-self:flex-end;padding:var(--sp-3) var(--sp-4);background:var(--bot-bg);
  border:1px solid var(--bot-border);border-radius:16px;border-bottom-right-radius:5px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--bot-dot);display:block;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

/* navegador */
.mock-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--border);
  background:var(--scrim)}
.mock-bar i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);display:block}
.mock-url{margin-left:8px;flex:1;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  color:var(--text-mut);background:var(--bg);border-radius:var(--r-pill);padding:4px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewport{height:clamp(340px,50vh,412px);overflow:hidden;background:var(--bg);position:relative}
.scroller{animation:autoscroll 16s var(--ease) infinite alternate}
@keyframes autoscroll{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-42%)}}
.site-hero{position:relative;padding:var(--sp-6) var(--sp-5);border-bottom:1px solid var(--border)}
.site-hero h4{margin:0 0 6px;font-size:1.25rem;letter-spacing:-.04em}
.site-hero p{font-size:.72rem;color:var(--text-mut)}
.site-tag{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.14em;color:var(--accent);margin-bottom:8px}
.site-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:var(--sp-4) var(--sp-5)}
.prod{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--surface)}
.prod .ph{height:62px}
.prod div.t{padding:7px 9px;font-size:.66rem;line-height:1.3}
.prod b{color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:.62rem;display:block;margin-top:3px}
.site-cta{margin:var(--sp-3) var(--sp-5) var(--sp-6);height:38px;border-radius:var(--r-pill);
  background:var(--wa);color:#04240F;display:grid;place-items:center;font-size:.7rem;font-weight:800;
  letter-spacing:.04em}

/* mapa google */
.map{position:relative;height:clamp(340px,50vh,412px);background:#0E120F;overflow:hidden}
.map svg{position:absolute;inset:0;width:100%;height:100%}
.gcard{position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);
  padding:var(--sp-4);display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:center}
.gcard .shot{width:52px;height:52px;border-radius:10px;flex:0 0 52px}
.gcard .stars,.gcard .gopen{display:block;margin-top:3px}
.gcard b{display:block;font-size:var(--step--1);letter-spacing:-.02em}
.stars{color:var(--warn);font-size:.7rem;letter-spacing:.1em}
.gopen{color:var(--wa);font-size:.66rem;font-family:"IBM Plex Mono",monospace}
.pin{transform-origin:center;animation:drop .6s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 2.4s ease-out infinite}
@keyframes ring{0%{r:6;opacity:.9}100%{r:26;opacity:0}}

/* ================= MARCADORES DE FOTO ================= */
/* Si la foto no existe todavía, se ve esto y nada se rompe */
.ph{background:
   repeating-linear-gradient(45deg,rgba(180,230,60,.05) 0 8px,transparent 8px 16px),
   var(--surface-2);
  border:1px dashed var(--border-strong);display:grid;place-items:center;
  color:var(--border-strong);font-family:"IBM Plex Mono",monospace;font-size:.55rem;
  letter-spacing:.12em;text-align:center;padding:4px}
figure.shot{margin:0;position:relative;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--border);background:var(--surface)}
figure.shot img{width:100%;height:100%;object-fit:cover;display:block}
figure.shot.empty img{display:none}
figure.shot .ph{position:absolute;inset:0;border:0}
figure.shot:not(.empty) .ph{display:none}
figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-4);
  background:linear-gradient(to top,rgba(6,7,6,.94),transparent);
  font-size:var(--step--1);font-weight:700;letter-spacing:-.02em}
figcaption span{display:block;font-family:"IBM Plex Mono",monospace;font-size:.6rem;
  font-weight:400;letter-spacing:.12em;color:var(--accent);margin-top:3px;text-transform:uppercase}

/* ================= MÉTRICAS ================= */
.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);
  border-block:1px solid var(--border)}
@media(min-width:760px){.metrics{grid-template-columns:repeat(4,1fr)}}
.metric{background:var(--bg);padding:var(--sp-6) var(--sp-5);text-align:center}
.metric b{display:block;font-size:var(--step-2);letter-spacing:-.05em;line-height:1;color:var(--accent)}
.metric span{display:block;margin-top:var(--sp-2);font-size:var(--step--2);color:var(--text-mut)}

/* ================= CALCULADORA ================= */
.calc{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:
  radial-gradient(90% 130% at 0% 0%,rgba(180,230,60,.07),transparent 55%),var(--surface);
  padding:var(--sp-6);margin-top:var(--sp-8)}
@media(min-width:860px){.calc{padding:var(--sp-10);display:grid;grid-template-columns:1fr 1fr;
  gap:var(--sp-10);align-items:center}}
.calc-val{display:flex;align-items:baseline;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.calc-val b{font-size:var(--step-3);line-height:.9;letter-spacing:-.06em;
  font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;
  background:linear-gradient(90deg,var(--accent) var(--pct,30%),var(--border) var(--pct,30%))}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:var(--border)}
input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;
  border-radius:50%;background:var(--accent);border:4px solid var(--bg);margin-top:-12px;
  box-shadow:0 0 0 1px var(--accent-dim)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);
  border:4px solid var(--bg)}
.calc-out{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-md);overflow:hidden;margin-top:var(--sp-6)}
@media(min-width:860px){.calc-out{margin-top:0}}
.out{background:var(--surface-2);padding:var(--sp-4) var(--sp-5);display:flex;
  align-items:baseline;justify-content:space-between;gap:var(--sp-4)}
.out span{font-size:var(--step--1);color:var(--text-mut)}
.out b{font-size:var(--step-1);letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.out.hot b{color:var(--accent)}

/* ================= BENTO ================= */
.bento{display:grid;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(min-width:900px){.bento{grid-template-columns:repeat(6,1fr)}
  .b-1{grid-column:span 4}.b-2{grid-column:span 2}.b-3{grid-column:span 6}}
.tile{position:relative;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--sp-6);overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.tile:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.tile h3{font-size:var(--step-1);margin-bottom:var(--sp-4);max-width:18ch}
.tile-num{position:absolute;top:var(--sp-5);right:var(--sp-6);font-family:"IBM Plex Mono",monospace;
  font-size:var(--step--2);color:var(--border-strong);letter-spacing:.15em}
.tile ul{display:grid;gap:var(--sp-2)}
.tile li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);font-size:var(--step--1)}
.tick{color:var(--accent);font-weight:800}
@media(min-width:900px){.b-3{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-8);
  align-items:center;padding:var(--sp-8)}}

/* comparador antes/después */
.compare{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border);
  margin-top:var(--sp-5);touch-action:pan-y}
@media(min-width:900px){.compare{margin-top:0}}
.compare .layer{grid-area:1/1;min-width:0}
.compare-inner{display:grid}
.cmp-after{clip-path:inset(0 0 0 var(--x,55%))}
.cmp-line{position:absolute;top:0;bottom:0;left:var(--x,55%);width:2px;background:var(--accent);
  pointer-events:none;transform:translateX(-1px)}
.cmp-line::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:grid;place-items:center;font-size:.9rem;font-weight:700}
.compare input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  cursor:ew-resize;touch-action:pan-y}
.cmp-tag{position:absolute;top:10px;font-family:"IBM Plex Mono",monospace;font-size:.56rem;
  letter-spacing:.14em;padding:4px 9px;border-radius:var(--r-pill);pointer-events:none}
.cmp-tag.a{left:10px;background:rgba(0,0,0,.6);color:var(--text-mut);border:1px solid var(--border)}
.cmp-tag.b{right:10px;background:var(--accent);color:var(--accent-ink)}
.list{padding:var(--sp-5);display:grid;gap:7px;background:var(--bg);min-height:230px}
.row{display:grid;grid-template-columns:30px 1fr auto;gap:var(--sp-3);align-items:center;
  padding:9px var(--sp-3);border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:var(--step--1);background:var(--surface);white-space:nowrap;overflow:hidden}
.row .p{font-family:"IBM Plex Mono",monospace;font-size:.68rem;color:var(--text-mut)}
.row.you{border-color:var(--accent);background:rgba(180,230,60,.08)}
.row.you .p{color:var(--accent)}
.row.dim{opacity:.45}

/* ================= GALERÍA ================= */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:var(--sp-4);
  overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-8) var(--sp-5) var(--sp-4);
  scrollbar-width:none;-ms-overflow-style:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:center;aspect-ratio:4/5}
@media(min-width:700px){.rail{grid-auto-columns:34%;padding-inline:var(--sp-8)}}
@media(min-width:1240px){.rail{padding-inline:calc((100vw - var(--maxw))/2 + var(--sp-8))}}
.dots{display:flex;gap:6px;justify-content:center;margin-top:var(--sp-4)}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--border-strong);transition:all .25s var(--ease)}
.dots i.on{background:var(--accent);width:20px;border-radius:99px}

/* ================= PASOS ================= */
.steps{display:grid;gap:1px;background:var(--border);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;margin-top:var(--sp-8)}
@media(min-width:760px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--surface);padding:var(--sp-6) var(--sp-5)}
.step svg{width:30px;height:30px;stroke:var(--accent);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:var(--sp-4)}
.step b{display:block;font-size:var(--step-0);letter-spacing:-.03em}
.step span{font-size:var(--step--2);color:var(--text-mut)}

/* ================= PRECIOS ================= */
.plans{display:grid;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-lg);
  background:var(--surface);padding:var(--sp-6)}
.plan.feat{border-color:var(--accent);position:relative;
  background:radial-gradient(80% 100% at 50% 0%,rgba(180,230,60,.08),transparent 65%),var(--surface)}
/* El rótulo dice por dónde se empieza, no cuál se vende más: no tenemos ese dato. */
.plan.feat::after{content:"Por acá se empieza";position:absolute;top:-11px;left:var(--sp-6);
  background:var(--accent);color:var(--accent-ink);font-family:"IBM Plex Mono",monospace;
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)}
.plan h3{font-size:var(--step-1)}
/* --step-1, no --step-2: dos de los tres tramos dicen texto ("se cotiza",
   "según alcance") en vez de un número, y a tamaño de cifra quedan enormes. */
.plan-precio{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--step-1);
  letter-spacing:-.04em;line-height:1.1;color:var(--accent);margin:var(--sp-4) 0 0;text-wrap:balance}
.plan-precio small{display:block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mut);margin-top:var(--sp-2)}
.plan-for{font-size:var(--step--1);color:var(--text-mut);margin:var(--sp-4) 0 var(--sp-5)}
.plan.feat .plan-for{color:var(--accent)}
.plan ul{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-6)}
.plan li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);font-size:var(--step--1)}
.plan .btn{margin-top:auto}

/* ================= TESTIMONIOS ================= */
.quotes{display:grid;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(min-width:860px){.quotes{grid-template-columns:repeat(3,1fr)}}
.quote{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-5)}
.quote p{font-size:var(--step-0);line-height:1.4;text-wrap:pretty}
.quote footer{display:flex;align-items:center;gap:var(--sp-3);margin-top:auto}
.quote .shot{width:44px;height:44px;flex:0 0 44px;border-radius:50%}
.quote cite{font-style:normal;font-weight:700;font-size:var(--step--1);display:block;letter-spacing:-.02em}

/* ================= FAQ + FORM ================= */
.faq{margin-top:var(--sp-8);border-top:1px solid var(--border)}
details{border-bottom:1px solid var(--border)}
summary{list-style:none;cursor:pointer;padding:var(--sp-5) var(--sp-10) var(--sp-5) 0;position:relative;
  font-size:var(--step-0);font-weight:700;letter-spacing:-.03em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:var(--sp-2);top:50%;transform:translateY(-50%);
  color:var(--accent);font-weight:400;font-size:1.4rem;line-height:1}
details[open] summary::after{content:"–"}
details p{padding:0 var(--sp-8) var(--sp-6) 0;color:var(--text-mut);font-size:var(--step--1);max-width:66ch}

.form-card{border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-6);margin-top:var(--sp-6)}
@media(min-width:860px){.form-card{padding:var(--sp-8);max-width:620px}}
.field{margin-bottom:var(--sp-4)}
.field label,.field .lbl{display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-mut);margin-bottom:var(--sp-2)}
.field input,.field select{width:100%;min-height:50px;padding:var(--sp-3) var(--sp-4);background:var(--bg);
  border:1px solid var(--outline);border-radius:var(--r-sm);color:var(--text);font-family:inherit;font-size:16px}
.field input:focus,.field select:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}
.field .err{display:none;color:var(--warn);font-size:var(--step--2);margin-top:6px}
.field.invalid input{border-color:var(--warn)}
.field.invalid .err{display:block}
.chips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--sp-4);
  border:1px solid var(--outline);border-radius:var(--r-pill);font-size:var(--step--1);
  cursor:pointer;transition:all .16s var(--ease);user-select:none}
.chip input:checked + span{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
.chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.form-foot{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-4);
  font-size:var(--step--2);color:var(--text-mut)}

/* ================= DOCK + FOOTER ================= */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:var(--sp-3) var(--sp-4) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:var(--dock-bg);backdrop-filter:blur(14px);border-top:1px solid var(--border);display:flex}
.dock .btn{flex:1}
@media(min-width:860px){.dock{display:none}}
footer.site{border-top:1px solid var(--border);padding-block:var(--sp-12);background:var(--surface)}
.foot-grid{display:grid;gap:var(--sp-8)}
@media(min-width:860px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot-grid h4{font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-mut);font-weight:400;margin:0 0 var(--sp-4)}
.foot-grid a{display:block;text-decoration:none;color:var(--text-mut);font-size:var(--step--1);padding:5px 0}
.foot-grid a:hover{color:var(--accent)}
.legal{margin-top:var(--sp-10);padding-top:var(--sp-5);border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:space-between;
  font-size:var(--step--2);color:var(--text-mut)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease);
  transition-delay:var(--d,0ms)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
  .scroller{animation:none}
}

/* ===== CASOS TIPOGRÁFICOS Y PRUEBA SOCIAL (sin fotos) ===== */
.gi-nota{font-size:var(--step--1);color:var(--text-mut);max-width:48ch;margin:var(--sp-2) 0 var(--sp-6)}
/* 2×2 en escritorio, no 4 en fila: con cuatro tarjetas de párrafo, cuatro
   columnas dejan ~30 caracteres por línea y el texto se lee como un diario. */
.gi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
@media(min-width:1100px){.gi-grid{grid-template-columns:repeat(2,1fr)}}
.gi-caso{background:var(--surface);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2)}
.gi-hora{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--step--2);
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent-dim)}
.gi-caso h3{font-size:var(--step-0);line-height:1.25;margin:0;text-wrap:balance}
.gi-caso p{font-size:var(--step--1);line-height:1.6;color:var(--text-mut);margin:0}
.gi-honesto{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);max-width:56ch;display:flex;flex-direction:column;
  gap:var(--sp-4);align-items:flex-start}
.gi-honesto h2{margin:0}
.gi-honesto p{margin:0;color:var(--text-mut);font-size:var(--step--1);line-height:1.65}

/* ================= CASO REAL =================
   Vitrina con vista previa en vivo: el visitante ve el sitio del cliente
   cargando de verdad, recorriéndose solo dentro de un marco de navegador,
   antes de decidir si lo abre.

   Cómo se recorre un iframe de otro dominio, que no se puede scrollear por
   JavaScript: el iframe se declara ancho de escritorio (1440) y muy alto, se
   lo achica con transform:scale hasta el ancho del marco, el marco recorta con
   overflow:hidden, y lo que se anima es el translate del iframe entero. El
   contenido nunca se toca.

   Sin colores propios: acento, superficies, bordes y tipografías salen de los
   tokens. La barra del navegador reusa el mismo tratamiento que los mocks del
   hero (--scrim y IBM Plex Mono), para que se lea como parte del mismo sitio. */
.caso{display:grid;gap:1px;margin-top:var(--sp-8);background:var(--border);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
@media(min-width:900px){.caso{grid-template-columns:1.1fr .9fr}}

/* ——— el visor ——— */
.caso-visor{background:var(--surface);display:flex;flex-direction:column}
.caso-barra{display:flex;align-items:center;gap:6px;padding:var(--sp-3) var(--sp-4);
  background:var(--scrim);border-bottom:1px solid var(--border)}
.caso-barra i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:0 0 9px}
.caso-url{margin-left:var(--sp-3);flex:1;min-width:0;padding:5px var(--sp-3);border-radius:var(--r-pill);
  background:var(--bg);border:1px solid var(--border);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.62rem;color:var(--text-mut);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* El poster va de fondo del marco, no como <img>: si el sitio del cliente
   bloqueara el framing, o el iframe tardara, igual se ve el sitio y no un
   rectángulo vacío. En celular es lo único que se carga.
   Cada caso trae el suyo en --poster (inline, en el HTML): si esa variable
   no está, no hay imagen y queda el color de superficie, sin romper nada. */
.caso-marco{position:relative;overflow:hidden;aspect-ratio:16/11;
  background:var(--surface-2) center top/cover no-repeat;
  background-image:linear-gradient(rgba(11,13,20,.06),rgba(11,13,20,.06)),var(--poster,none)}
.caso-marco iframe{position:absolute;top:0;left:0;width:1440px;height:3400px;border:0;
  transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.caso-marco.viva iframe{opacity:1;
  animation:caso-recorrer var(--dur,34s) ease-in-out infinite alternate}
.caso-marco:hover iframe{animation-play-state:paused}
@keyframes caso-recorrer{from{translate:0 0} to{translate:0 var(--fin,-1000px)}}

.caso-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;color:var(--text-mut)}
/* El cartel "Sitio en vivo" aparece SOLO cuando el iframe cargó de verdad
   (app.js le pone .viva al marco). En celular el iframe no se monta nunca, y
   si el cliente bloqueara el framing tampoco: en los dos casos el cartel no
   sale, en vez de quedar afirmando algo que no está pasando. */
.caso-vivo{display:none;align-items:center;gap:var(--sp-2);color:var(--accent)}
.caso-marco.viva~.caso-pie .caso-vivo{display:inline-flex}
.caso-ayuda{text-align:right;margin-left:auto}
.caso-esc{display:none}
@media(min-width:900px){.caso-esc{display:inline}.caso-cel{display:none}}

/* ——— el contenido ——— */
.caso-info{background:var(--surface);padding:var(--sp-8) var(--sp-6);
  display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start}
.caso-rubro{margin:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.caso-info h3{margin:0;font-size:var(--step-1);letter-spacing:-.03em}
.caso-desc{margin:0;color:var(--text-mut);font-size:var(--step--1);line-height:1.65}

.caso-cifras{display:grid;grid-template-columns:1fr 1fr;gap:1px;width:100%;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.caso-cifra{background:var(--surface-2);padding:var(--sp-4)}
.caso-cifra b{display:block;font-size:var(--step-1);letter-spacing:-.03em;color:var(--accent);font-weight:800}
.caso-cifra span{display:block;margin-top:var(--sp-2);font-size:var(--step--2);
  color:var(--text-mut);line-height:1.4}

.caso-acciones{display:flex;flex-wrap:wrap;gap:var(--sp-3);width:100%}
/* Desplegable por max-height, no por grid-template-rows 0fr→1fr.
   Esa técnica necesita que el hijo aporte su tamaño mínimo, y acá el dl lleva
   overflow:hidden —que es lo que recorta— con lo cual su contribución mínima
   es 0 y la fila resuelve a 0px hasta con 1fr: el panel abría a cero de alto.
   El valor de max-height es un techo holgado, no la altura real; con transición
   sobre una altura mayor que el contenido, el cierre arranca un instante más
   tarde y no se nota. El contenido queda SIEMPRE en el DOM: lo leen los
   buscadores aunque nadie despliegue nada. */
.caso-enfoque{width:100%;overflow:hidden;max-height:0;
  transition:max-height .45s var(--ease)}
.caso-enfoque.abierta{max-height:60rem}
.caso-enfoque dl{margin:0;display:grid;gap:var(--sp-4)}
.caso-enfoque dl>div{padding-top:var(--sp-4);border-top:1px solid var(--border)}
.caso-enfoque dt{font-size:var(--step--1);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--sp-1)}
.caso-enfoque dd{margin:0;font-size:var(--step--1);color:var(--text-mut);line-height:1.6}

@media(prefers-reduced-motion:reduce){
  .caso-marco iframe{animation:none}
  .caso-enfoque{transition:none}
}
/* ================= CIERRE =================
   Centrado y angosto a propósito: es la única sección de la página sin nada
   para leer al costado. Después del caso no hay más argumento que dar, así
   que no se agrega una tarjeta más — se pide la acción y se recuerdan las
   tres condiciones que sacan el miedo, justo donde está el botón. */
.cierre{max-width:60ch;margin-inline:auto;text-align:center}
.cierre .lead{margin-top:var(--sp-4)}
.cierre .btn{margin-top:var(--sp-8)}
/* Las tres frases son largas: en fila no entran ni en escritorio, así que van
   siempre en columna. El bloque se centra, pero el texto queda alineado a la
   izquierda y los ✓ en la misma vertical: centrar cada línea por separado
   dejaba los tildes en escalera. */
.cierre-riesgo{list-style:none;margin:var(--sp-6) auto 0;padding:0;width:fit-content;
  display:grid;gap:var(--sp-3);
  font-size:var(--step--1);color:var(--text-mut);text-align:left}
.cierre-riesgo li{position:relative;padding-left:var(--sp-6)}
.cierre-riesgo li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--accent);font-weight:700}

/* ============================================================
   HOME v2 (reposicionamiento B2B) — ajustes sobre lo existente
   ============================================================ */

/* franja de afirmaciones: reusa .metrics/.metric pero el <b> es texto, no número */
.metrics.claims .metric b{font-size:var(--step-1);letter-spacing:-.03em;color:var(--accent);
  font-weight:800;text-wrap:balance}
.metrics.claims .metric span{margin-top:var(--sp-3)}

/* franja de diagnóstico: un solo CTA, arriba de todo. No compite con el hero. */
.diag-band{display:flex;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-lg);text-decoration:none;color:var(--text);
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-iris) border-box;
  transition:transform .16s var(--ease),background-color .16s var(--ease)}
.diag-band:hover{transform:translateY(-1px)}
.diag-band:active{transform:scale(.99)}
@media(min-width:860px){.diag-band{margin-top:var(--sp-6);padding:var(--sp-5) var(--sp-8);border-radius:var(--r-pill)}}
.diag-band-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.diag-band-txt b{font-size:var(--step-0);letter-spacing:-.02em}
.diag-band-txt span{font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-mut)}
.diag-band-go{flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:1.1rem;font-weight:700;
  background:var(--gradient-iris-deep);color:#fff}

/* dos puertas */
.puertas{display:grid;gap:var(--sp-4);margin-top:var(--sp-8)}
@media(min-width:820px){.puertas{grid-template-columns:1fr 1fr}}
.puerta{position:relative;display:flex;flex-direction:column;gap:var(--sp-4);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-8) var(--sp-6);overflow:hidden;
  transition:border-color .25s var(--ease),transform .25s var(--ease)}
.puerta:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.puerta .tile-num{position:static;color:var(--accent);font-size:var(--step--2)}
.puerta h3{font-size:var(--step-1);max-width:20ch}
.puerta p{color:var(--text-mut);font-size:var(--step--1);line-height:1.55;flex:1}
.puerta .btn{margin-top:var(--sp-2)}

/* bento de 3 columnas iguales (sin spans b-1/b-2/b-3) */
.bento.tri{grid-template-columns:1fr}
@media(min-width:900px){.bento.tri{grid-template-columns:repeat(3,1fr)}}

/* panel de seguimiento / integración: la lista dentro del navegador simulado */
.viewport .list{min-height:0;height:100%;padding:var(--sp-4);align-content:start;gap:var(--sp-2)}
.viewport .row{grid-template-columns:auto minmax(0,1fr) auto}
.viewport .row>span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.viewport .row .mono{letter-spacing:.08em;font-size:.58rem;white-space:nowrap;color:var(--text-mut)}
.viewport .row.you .mono{color:var(--accent)}
.viewport .row.dim{opacity:.4}

/* sello de marca en el footer — el logo, con un halo degradé detrás */
.foot-sello{position:relative;display:flex;justify-content:center;
  padding:var(--sp-10) 0 var(--sp-6);margin-top:var(--sp-4)}
.foot-sello::before{content:"";position:absolute;top:46%;left:50%;
  width:min(320px,80vw);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--gradient-iris);filter:blur(64px);opacity:.16;pointer-events:none}
.foot-sello img{position:relative;width:clamp(140px,42vw,200px);height:auto;
  border-radius:var(--r-lg)}
@media(prefers-reduced-motion:no-preference){
  .foot-sello img{animation:selloIn .6s var(--ease) both}
}
@keyframes selloIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}

/* ============================================================
   PALETA — degradé de marca repartido por la UI (pedido del usuario)
   Bloque de override, al final a propósito: se puede quitar entero.
   Todo usa los degradés tema-aware de tokens.css, así funciona en claro
   y oscuro. Texto chico va en --accent sólido (el degradé no llega a
   4.5:1 en 11px). El foco de teclado queda en color plano (a11y).
   ============================================================ */

/* fondo: auroras de color (intensidad por --glow-op, baja en claro) */
.bg-glow{opacity:var(--glow-op)}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:var(--glow-op);
  background:
    radial-gradient(50% 32% at 85% 88%,rgba(139,63,224,.16),transparent 70%),
    radial-gradient(46% 30% at 12% 82%,rgba(46,217,176,.12),transparent 72%)}
.bg-grid::after{content:"";position:absolute;inset:0;background:var(--gradient-iris);opacity:.05;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%);
  mask-image:radial-gradient(120% 80% at 50% 0%,#000 10%,transparent 75%)}

/* titulares con degradé (solo texto grande) */
.h-xl,.h-lg{background:var(--gradient-iris);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.h-xl{background-size:130% 100%}
.mark{-webkit-text-fill-color:#fff;color:#fff;padding:0 .16em;border-radius:4px;background:var(--gradient-iris-deep)}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .h-xl,.h-lg{color:var(--accent);-webkit-text-fill-color:currentColor}
}

/* botón primario con degradé — texto blanco en ambos temas, hover aclara */
.btn-primary{background:var(--gradient-iris-deep);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.btn-primary:hover{background:var(--gradient-iris-deep);filter:brightness(1.12)}

/* tarjetas: borde degradé (padding-box + border-box) */
.tile,.puerta,.plan,.form-card,.gi-honesto{border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--gradient-iris) border-box}
.device{border-color:transparent;
  background:linear-gradient(180deg,var(--surface-2),var(--surface)) padding-box,var(--gradient-iris) border-box}
.tile:hover,.puerta:hover{border-color:transparent;
  background:linear-gradient(var(--surface-2),var(--surface-2)) padding-box,var(--gradient-iris) border-box}
/* El destacado usa --accent-soft (tema-aware); el verde crudo del bloque de arriba
   no sirve en tema claro, donde el acento pasa a violeta. */
.plan.feat{border-color:transparent;
  background:linear-gradient(180deg,var(--accent-soft),transparent 55%) padding-box,
             linear-gradient(var(--surface),var(--surface)) padding-box,
             var(--gradient-iris) border-box}

/* franjas y divisores con degradé */
.strip{background:linear-gradient(180deg,var(--surface),var(--bg)),var(--gradient-iris-soft)}
.metrics,.steps,.gi-grid,.caso{background:var(--gradient-iris-line)}
.metrics .metric{background:var(--bg)}
.steps .step,.gi-grid .gi-caso{background:var(--surface)}

/* franja de frases: cada una toma un tramo distinto del mismo degradé */
.metrics.claims .metric b{background:var(--gradient-iris-line);background-size:340% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.metrics.claims .metric:nth-child(1) b{background-position:0% 50%}
.metrics.claims .metric:nth-child(2) b{background-position:33% 50%}
.metrics.claims .metric:nth-child(3) b{background-position:66% 50%}
.metrics.claims .metric:nth-child(4) b{background-position:100% 50%}

/* hairlines de degradé */
header.scrolled{border-bottom-color:transparent}
header.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:var(--gradient-iris-line);opacity:.55}
.dock{border-top-color:transparent}
.dock::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--gradient-iris-line);opacity:.6}

/* estados destacados */
.row.you{border-color:transparent;
  background:linear-gradient(var(--accent-soft),var(--accent-soft)) padding-box,var(--gradient-iris-line) border-box}
.faq details[open]{background:var(--gradient-iris-soft)}

/* rótulos chicos y links: acento sólido (tema-aware, siempre legible) */
.eyebrow span,.tile-num,.gi-hora{color:var(--accent)}
.nav-links a:hover,.foot-grid a:hover{color:var(--accent)}

/* el foco de teclado NO va en degradé: color plano de alto contraste */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================
   SWITCH DE TEMA
   ============================================================ */
.theme-toggle{display:inline-grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
  border-radius:var(--r-pill);border:1px solid var(--outline);background:transparent;color:var(--text);
  transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.theme-toggle:hover{border-color:var(--text);background:var(--surface)}
.theme-toggle svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}
:root[data-theme="light"] .theme-toggle .i-sun{display:block}
:root[data-theme="light"] .theme-toggle .i-moon{display:none}

/* ============================================================
   RESCATE DE PROYECTOS — #rescate
   Bloque de una sola columna, con un borde de degradé para que se lea como
   una oferta aparte y no como una sección más del scroll.
   ============================================================ */
.rescate{position:relative;border-radius:var(--r-lg);background:var(--surface);
  padding:var(--sp-10) var(--sp-6);overflow:hidden}
.rescate::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--gradient-iris-line);
  -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,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none}
.rescate::after{content:"";position:absolute;top:-40%;right:-10%;width:min(420px,70%);aspect-ratio:1;
  border-radius:50%;background:var(--gradient-iris);filter:blur(90px);opacity:.13;pointer-events:none}
.rescate-txt{position:relative;max-width:62ch}
.rescate h2{margin-top:var(--sp-2)}
.rescate .lead{margin-top:var(--sp-4)}
.rescate-lista{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.rescate-lista li{display:flex;gap:var(--sp-3);align-items:flex-start;
  font-size:var(--step--1);color:var(--text-mut);line-height:1.55}
.rescate-cta{margin-top:var(--sp-8)}
.rescate-pie{margin-top:var(--sp-3);font-size:var(--step--2);color:var(--text-mut)}
@media(min-width:820px){.rescate{padding:var(--sp-12) var(--sp-10)}}

/* ============================================================
   ZONA / REUNIÓN PRESENCIAL — aviso arriba del formulario
   ============================================================ */
.zona{display:flex;gap:var(--sp-4);align-items:flex-start;margin-top:var(--sp-6);
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  padding:var(--sp-5)}
.zona svg{flex:0 0 22px;width:22px;height:22px;margin-top:2px;
  stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zona p{margin:0;font-size:var(--step--1);color:var(--text-mut);line-height:1.6;text-wrap:pretty}
.zona b{color:var(--text);font-weight:600}

/* sello del footer en SVG (reemplaza a la imagen que no existía) */
.foot-sello .sello{position:relative;width:clamp(140px,42vw,190px);height:auto;
  border-radius:var(--r-lg)}
@media(prefers-reduced-motion:no-preference){
  .foot-sello .sello{animation:selloIn .6s var(--ease) both}
}
.foot-zona{display:block;margin-top:var(--sp-4);font-size:var(--step--2);
  color:var(--text-mut);line-height:1.5;max-width:30ch}

/* ============================================================
   AJUSTES FINOS DEL TEMA CLARO
   ============================================================ */
:root[data-theme="light"] .brand-mark,
:root[data-theme="light"] .avatar{text-shadow:0 1px 1px rgba(0,0,0,.25)}
:root[data-theme="light"] .device{box-shadow:0 30px 60px -30px rgba(20,22,31,.25)}
:root[data-theme="light"] .bg-grid::after{opacity:.07}
:root[data-theme="light"] .btn-primary{text-shadow:0 1px 1px rgba(0,0,0,.25)}