/* ─────────────────────────────────────────────
   Propioo · propioo.app — hoja de estilos pública
   Construida sobre los tokens del sistema de diseño
   de la app (propioo-front/src/app/globals.css).
   ───────────────────────────────────────────── */
/* ─────────────────────────────────────────────
   TOKENS — leídos del sistema (globals.css)
   ───────────────────────────────────────────── */
:root{
  --background:#f7f8fc;
  --card:#ffffff;
  --foreground:#151827;
  --muted-foreground:#6b7280;
  --muted:#f5f6fa;
  --primary:#5b3df5;
  --brand:#5b3df5;
  --teal:#2ed8d3;
  --border:#e7e8f0;
  --positive:#22c55e;
  --warning:#f59e0b;
  --negative:#ef4444;
  --placeholder:#6b7280;            /* §9: sube de #9ca3af para cumplir AA */

  /* tintas accesibles para texto sobre claro (§9) */
  --positive-ink:#15803d;
  --warning-ink:#b45309;
  --negative-ink:#dc2626;
  --teal-ink:#0f766e;

  --gradient-brand:linear-gradient(135deg,#5b3df5 0%,#6d4cff 30%,#4c7dff 65%,#2ed8d3 100%);
  --gradient-safe:linear-gradient(135deg,#5b3df5 0%,#6d4cff 55%,#4c7dff 100%); /* §3: cortado antes del teal */

  --shadow-soft:0 6px 18px rgba(20,20,40,.06);
  --shadow-lift:0 16px 40px rgba(20,20,40,.10);
  --ring:1px solid rgb(21 24 39 / .05);

  --radius-sm:8px; --radius-md:16px; --radius-lg:18px; --radius-xl:20px;
  --radius-2xl:24px; --radius-3xl:28px; --radius-4xl:32px;

  --text-display-xl:clamp(2.5rem,1.5rem + 5vw,4rem);
  --text-display-l:clamp(2rem,1.4rem + 3vw,3rem);

  /* movimiento */
  --dot:var(--muted);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:200ms; --dur-mid:420ms; --dur-slow:760ms;
}
:root[data-theme="dark"]{
  --background:#0b0b14;
  --card:#14141f;
  --foreground:#f5f6fa;
  --muted-foreground:#9ca3af;
  --muted:#1b1b29;
  --primary:#7c6aff;
  --brand:#7c6aff;
  --border:rgba(255,255,255,.1);
  --positive:#4ade80;
  --warning:#fbbf24;
  --negative:#f87171;
  --placeholder:#6b7280;
  --positive-ink:#4ade80;
  --warning-ink:#fbbf24;
  --negative-ink:#f87171;
  --teal-ink:#2ed8d3;
  --shadow-soft:0 6px 18px rgba(0,0,0,.24);
  --dot:#242438;
  --shadow-lift:0 18px 44px rgba(0,0,0,.42);
  --ring:1px solid rgb(255 255 255 / .08);
}

/* ───────────── base ───────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--background);color:var(--foreground);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;
  transition:background 300ms var(--ease-out),color 300ms var(--ease-out);
  overflow-x:hidden;
}
h1,h2,h3{margin:0;letter-spacing:-.025em;font-weight:700}
.display-xl{font-size:var(--text-display-xl);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.display-l{font-size:var(--text-display-l);line-height:1.1;letter-spacing:-.03em;font-weight:700}
h1{font-size:32px;line-height:1.2}
h2{font-size:24px;line-height:1.25}
h3{font-size:20px;line-height:1.3;font-weight:600}
p{margin:0}
a{color:inherit}
.sec{font-size:14px;line-height:1.5;font-weight:500;color:var(--muted-foreground)}
.caption{font-size:12px;line-height:1.66;font-weight:500;color:var(--muted-foreground)}
.mono{font-family:"Geist Mono",ui-monospace,monospace}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.prose{max-width:720px}
@media(min-width:900px){.wrap{padding:0 40px}}
:focus-visible{outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 50%,transparent);border-radius:var(--radius-sm)}
section{scroll-margin-top:88px}

/* ───────────── superficies ───────────── */
.card{position:relative;background:var(--card);border-radius:var(--radius-xl);padding:24px;
  box-shadow:var(--shadow-soft);outline:var(--ring)}
.surface{background:var(--card);border-radius:var(--radius-4xl);
  box-shadow:var(--shadow-soft);outline:var(--ring)}

/* tarjeta interactiva: elevación + foco de luz que sigue al cursor */
.card-i{isolation:isolate;
  transition:transform var(--dur-mid) var(--ease-out),box-shadow var(--dur-mid) var(--ease-out)}
.card-i::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  opacity:0;transition:opacity var(--dur-mid) var(--ease-out);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%),
    color-mix(in srgb,var(--primary) 13%,transparent),transparent 68%)}
.card-i:hover,.card-i:focus-within{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.card-i:hover::before,.card-i:focus-within::before{opacity:1}

.badge{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:500;line-height:1.66}
.badge-active{background:var(--primary);color:#fff}
.badge-tint{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary)}
.badge-success{background:color-mix(in srgb,var(--positive) 12%,transparent);color:var(--positive-ink)}
.badge-live{display:inline-flex;align-items:center;gap:8px}
.pulse{width:7px;height:7px;border-radius:999px;background:var(--primary);position:relative;flex:none}
.pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;
  animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}

/* ───────────── botones ───────────── */
.btn{position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border:0;border-radius:var(--radius-lg);
  font-family:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer;
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--s,1));
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast),
             background var(--dur-fast),box-shadow var(--dur-fast),color var(--dur-fast)}
.btn:hover{--s:1.02}
.btn:active{--s:.98}
.btn-lg{height:54px;padding:0 26px;font-size:16px}
.btn-primary{background:var(--gradient-brand);background-size:200% 200%;color:#fff;box-shadow:var(--shadow-soft);
  transition:transform var(--dur-fast) var(--ease-out),filter var(--dur-fast),
             background-position 600ms var(--ease-out),box-shadow var(--dur-fast)}
.btn-primary:hover{filter:brightness(1.05);background-position:100% 0;box-shadow:0 10px 26px color-mix(in srgb,var(--primary) 30%,transparent)}
.btn-outline{background:var(--card);color:var(--foreground);outline:1px solid var(--border)}
.btn-outline:hover{outline-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.btn-secondary{background:#fff;color:#151827}
.btn-ghost{background:transparent;color:var(--primary)}
.btn-ghost:hover{background:color-mix(in srgb,var(--primary) 5%,transparent)}
.btn:disabled{opacity:.6;pointer-events:none}
.btn > svg{width:19px;height:19px;flex:none}   /* el glifo trae viewBox pero no tamaño */
.btn .arrow{transition:transform var(--dur-mid) var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:currentColor;opacity:.25;animation:ripple 620ms var(--ease-out) forwards}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}

.icon-btn{position:relative;width:44px;height:44px;border-radius:999px;border:0;background:var(--muted);color:var(--foreground);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.icon-btn:hover{transform:scale(1.06);background:color-mix(in srgb,var(--primary) 10%,var(--muted))}
.icon-btn:active{transform:scale(.94)}
#theme-icon{transition:transform 500ms var(--ease-spring)}
.icon-btn:hover #theme-icon{transform:rotate(35deg)}

/* ───────────── enlaces sociales ───────────── */
.social-btn{text-decoration:none}
.social-btn svg{width:19px;height:19px}
/* .foot-links a y .mobile-nav a ganan en especificidad: hay que igualarla */
.social-row,.foot-links .social-row{display:inline-flex;align-items:center;gap:8px}
.mobile-nav .social-row{display:flex;align-items:center;gap:10px}
.social-row svg{width:16px;height:16px;flex:none;
  transition:transform var(--dur-mid) var(--ease-spring)}
.social-row:hover svg{transform:scale(1.15) rotate(-6deg)}
.mobile-nav .social-row svg{width:19px;height:19px}

/* ───────────── nav ───────────── */
.scroll-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  background:var(--gradient-brand);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform}
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--background) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-mid),box-shadow var(--dur-mid),background var(--dur-mid)}
.nav.scrolled{border-bottom-color:var(--border);box-shadow:0 4px 20px rgba(20,20,40,.05)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px;transition:height var(--dur-mid) var(--ease-out)}
.nav.scrolled .wrap{height:60px}
.brand{display:inline-flex;align-items:center;text-decoration:none}
.brand img{height:54px;width:auto;display:block;transition:transform 500ms var(--ease-spring)}
.brand:hover img{transform:translateY(-2px)}
footer .brand img{height:62px}
/* el PNG lleva «propioo» en azul marino: sobre fondo oscuro desaparece.
   Sin export en claro, lo pasamos a silueta blanca. */
:root[data-theme="dark"] .brand img{filter:brightness(0) invert(1)}
@media(max-width:600px){.brand img{height:44px}}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500}
.nav-links a{position:relative;text-decoration:none;color:var(--muted-foreground);
  transition:color var(--dur-fast);padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--gradient-safe);transform:scaleX(0);transform-origin:0 50%;
  transition:transform 380ms var(--ease-out)}
.nav-links a:hover{color:var(--foreground)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--foreground)}
.nav-toggle{display:none;margin-left:auto}
.nav-toggle svg line{transition:transform 320ms var(--ease-out),opacity 200ms}
.nav-toggle[aria-expanded="true"] svg line:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] svg line:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] svg line:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.nav-toggle svg{overflow:visible}
.nav-toggle svg line{transform-box:fill-box;transform-origin:center}

.mobile-nav{position:fixed;top:68px;left:0;right:0;bottom:auto;
  z-index:49;background:var(--card);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow-soft);
  padding:12px 24px 24px;
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:opacity 260ms var(--ease-out),transform 320ms var(--ease-out),
             top var(--dur-mid) var(--ease-out),visibility 0s 320ms}
.mobile-nav.open{opacity:1;transform:none;visibility:visible;transition-delay:0s}
.nav.scrolled ~ .mobile-nav{top:60px}
.mobile-nav a{opacity:0;transform:translateY(8px);
  transition:opacity 300ms var(--ease-out) var(--d,0ms),transform 300ms var(--ease-out) var(--d,0ms)}
.mobile-nav a:not(.btn){display:block;padding:14px 0;text-decoration:none;font-size:18px;font-weight:600;
  letter-spacing:-.02em;border-bottom:1px solid var(--border)}
.mobile-nav.open a{opacity:1;transform:none}
.mobile-nav .btn{width:100%;margin-top:20px}
@media(max-width:900px){
  .nav-links{display:none}
  .nav .social-btn{display:none}
  .nav .wrap{gap:12px}
  .nav-toggle{display:inline-flex}
  .nav .btn-primary{display:none}
}
@media(min-width:901px){.mobile-nav{display:none}}

/* volver arriba */
.to-top{position:fixed;right:20px;bottom:20px;z-index:45;width:46px;height:46px;border-radius:999px;
  border:0;cursor:pointer;background:var(--card);color:var(--foreground);outline:var(--ring);
  box-shadow:var(--shadow-lift);display:inline-flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity 320ms var(--ease-out),transform 420ms var(--ease-spring),background var(--dur-fast)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:color-mix(in srgb,var(--primary) 10%,var(--card))}

/* ───────────── hero ───────────── */
.hero{position:relative;padding:72px 0 48px;overflow:hidden}
.glow{position:absolute;width:620px;height:620px;border-radius:50%;background:var(--gradient-brand);
  opacity:.2;filter:blur(64px);top:-260px;left:-160px;pointer-events:none;z-index:0;
  animation:drift 22s ease-in-out infinite alternate;will-change:transform}
.glow.g2{width:460px;height:460px;top:120px;left:auto;right:-220px;opacity:.13;
  background:linear-gradient(135deg,#4c7dff 0%,#2ed8d3 100%);animation-duration:28s;animation-direction:alternate-reverse}
@keyframes drift{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(60px,40px,0) scale(1.08)}
  100%{transform:translate3d(-40px,70px,0) scale(.96)}
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:56px;align-items:center}
.hero-grid.top{align-items:start}
.sim-wrap{max-width:520px;margin:0 auto}
.lede{font-size:16px;line-height:1.75;color:var(--muted-foreground);max-width:52ch;margin-top:20px}
.hero-cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
@media(max-width:960px){.hero{padding:40px 0 24px}.hero-grid{grid-template-columns:1fr;gap:36px}.glow{width:420px;height:420px;top:-200px}.glow.g2{display:none}}

/* entrada del titular, palabra a palabra */
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em}
.hero-title .w{display:inline-block;transform:translateY(115%);opacity:0;
  transition:transform 820ms var(--ease-out) var(--d,0ms),opacity 620ms ease var(--d,0ms)}
.hero-title.in .w{transform:none;opacity:1}
.fade-up{opacity:0;transform:translateY(14px);
  transition:opacity 620ms var(--ease-out) var(--d,0ms),transform 720ms var(--ease-out) var(--d,0ms)}
.fade-up.in{opacity:1;transform:none}

/* ───────────── tarjeta demo ───────────── */
.tilt-wrap{perspective:1300px}
.tilt{transform-style:preserve-3d;transition:transform 500ms var(--ease-out),box-shadow var(--dur-mid)}
.demo-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.progress{height:6px;border-radius:999px;background:var(--muted);overflow:hidden;margin:2px 0 6px;position:relative}
.progress span{display:block;height:100%;border-radius:999px;background:var(--gradient-brand);
  transition:width 620ms var(--ease-out)}
.progress::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:sheen 3.6s var(--ease-out) 1.2s infinite}
@keyframes sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(220%)}}

.field{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin:18px 0 12px;
  clip-path:inset(0 100% 0 0);transition:clip-path 1100ms var(--ease-out) 200ms}
.field.in{clip-path:inset(0 0 0 0)}
.dot{aspect-ratio:1;border-radius:4px;background:var(--dot);
  transition:background 260ms var(--ease-out),transform 260ms var(--ease-out)}
.dot.sold{background:color-mix(in srgb,var(--muted-foreground) 42%,transparent)}
.dot.mine{background:var(--brand)}
.dot.pop{animation:pop 420ms var(--ease-spring) both}
/* pico contenido: con 1,9 los cuadros contiguos se solapan y, al llenar
   muchos de golpe, el mosaico se ve como una mancha sólida. */
@keyframes pop{0%{transform:scale(.35);opacity:.25}55%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.key{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle}
.slider-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.slider-row label{font-size:14px;font-weight:500}
#count{font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums;
  display:inline-block;transition:transform 320ms var(--ease-spring)}
#count.bump{transform:scale(1.22)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;height:24px;margin:8px 0 12px;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--primary) var(--pct,4%),var(--muted) var(--pct,4%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--card);border:2px solid var(--primary);margin-top:-8px;cursor:pointer;box-shadow:var(--shadow-soft);
  transition:transform 200ms var(--ease-spring),box-shadow 200ms}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.24);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--primary) 16%,transparent)}
input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:var(--muted)}
input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--primary)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--card);border:2px solid var(--primary);cursor:pointer}

.presets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chip{height:32px;padding:0 14px;border-radius:999px;border:0;outline:1px solid var(--border);
  background:var(--card);color:var(--muted-foreground);font-family:inherit;font-size:13px;font-weight:500;
  cursor:pointer;transition:all var(--dur-fast) var(--ease-out)}
.chip:hover{transform:scale(1.04);color:var(--foreground);outline-color:color-mix(in srgb,var(--primary) 40%,var(--border))}
.chip:active{transform:scale(.96)}
.chip.on{background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);
  outline-color:color-mix(in srgb,var(--primary) 28%,transparent)}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:color-mix(in srgb,var(--muted) 50%,transparent);
  border-radius:var(--radius-2xl);padding:16px}
.cell .v{font-size:20px;font-weight:600;letter-spacing:-.025em;margin-top:2px;
  font-variant-numeric:tabular-nums}
.cell .v.pos{color:var(--positive-ink)}

/* ───────────── ticker ───────────── */
.ticker{position:relative;overflow:hidden;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  padding:14px 0;background:color-mix(in srgb,var(--card) 60%,transparent)}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--background),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--background),transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:marquee 38s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;align-items:center;gap:14px;padding:0 22px;white-space:nowrap;
  font-size:14px;font-weight:500;color:var(--muted-foreground)}
.ticker-item::after{content:"";width:5px;height:5px;border-radius:999px;background:var(--primary);opacity:.5}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ───────────── secciones ───────────── */
section{padding:80px 0}
.sec-head{max-width:720px;margin-bottom:40px}
.sec-head h2{margin:10px 0 14px}
.eyebrow{font-size:14px;font-weight:600;color:var(--primary)}

.steps-wrap{position:relative}
.rail{position:absolute;top:38px;left:8%;right:8%;height:2px;border-radius:2px;
  background:var(--border);overflow:hidden;z-index:0}
.rail span{display:block;height:100%;width:0;background:var(--gradient-brand);
  transition:width 900ms var(--ease-out)}
@media(max-width:960px){.rail{display:none}}
.steps{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step .n{width:28px;height:28px;border-radius:999px;background:var(--gradient-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  transition:transform 420ms var(--ease-spring),box-shadow 420ms var(--ease-out)}
.step:hover .n,.step:focus-within .n{transform:scale(1.18);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 14%,transparent)}
.step h3{margin:16px 0 8px}
@media(max-width:960px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}

.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feats ul{margin:16px 0 0;padding:0;list-style:none}
.feats li{position:relative;padding:10px 0 10px 0;border-top:1px solid var(--border);
  font-size:14px;line-height:1.5;font-weight:500;
  transition:padding-left 300ms var(--ease-out),color 300ms}
.feats li::before{content:"";position:absolute;left:0;top:50%;width:0;height:2px;border-radius:2px;
  background:var(--primary);transform:translateY(-50%);opacity:0;
  transition:width 300ms var(--ease-out),opacity 300ms}
.feats .card:hover li{padding-left:16px}
.feats .card:hover li::before{width:8px;opacity:1}
@media(max-width:960px){.feats{grid-template-columns:1fr}}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:32px}
.stat .v{font-size:24px;font-weight:700;letter-spacing:-.025em;line-height:1.25;font-variant-numeric:tabular-nums}
@media(max-width:760px){.stats{grid-template-columns:1fr 1fr}}

/* estado del proyecto */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}
.phase .head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.phase h3{font-size:18px}
.phase .step-n{font-size:12px;font-weight:600;color:var(--muted-foreground);
  letter-spacing:.04em;text-transform:uppercase;margin-bottom:6px}
.tick{width:26px;height:26px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--positive) 14%,transparent);color:var(--positive-ink)}
.tick svg{width:15px;height:15px}
.tick path{stroke-dasharray:24;stroke-dashoffset:24;
  transition:stroke-dashoffset 620ms var(--ease-out) 320ms}
.phase.done.in .tick path{stroke-dashoffset:0}
.tick.now{background:color-mix(in srgb,var(--primary) 14%,transparent)}
.phase.done{--bar:var(--positive)}
.phase::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;
  background:var(--bar,var(--primary));transform:scaleX(0);transform-origin:0 50%;
  transition:transform 700ms var(--ease-out) 220ms}
.phase.in::after{transform:scaleX(1)}
.phase.now::after{background:var(--gradient-safe)}
@media(max-width:900px){.phases{grid-template-columns:1fr}}

.honest{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.honest ul{margin:16px 0 0;padding:0;list-style:none}
.honest li{padding:12px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.5;font-weight:500;display:flex;gap:10px;
  opacity:0;transform:translateX(-10px);
  transition:opacity 520ms var(--ease-out) var(--d,0ms),transform 520ms var(--ease-out) var(--d,0ms)}
.honest .in li,.honest li.in{opacity:1;transform:none}
.honest li::before{content:"";flex:none;width:6px;height:6px;border-radius:999px;background:var(--primary);margin-top:8px;
  transition:transform 300ms var(--ease-spring)}
.honest li:hover::before{transform:scale(1.9)}
@media(max-width:760px){.honest{grid-template-columns:1fr}}

/* ───────────── línea de tiempo (cómo funciona) ───────────── */
.hero-narrow{max-width:760px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.trio{grid-template-columns:1fr}}

.timeline{position:relative;display:grid;gap:20px}
.tl-rail{position:absolute;left:19px;top:34px;bottom:34px;width:2px;border-radius:2px;
  background:var(--border);overflow:hidden;z-index:0}
.tl-rail span{display:block;width:100%;height:0;background:var(--gradient-brand)}
.tl-item{position:relative;z-index:1;display:grid;grid-template-columns:40px 1fr;gap:20px;align-items:start}
.tl-n{width:40px;height:40px;border-radius:999px;flex:none;margin-top:14px;
  background:var(--card);outline:var(--ring);box-shadow:var(--shadow-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;color:var(--muted-foreground);
  transition:background 520ms var(--ease-out),color 520ms var(--ease-out),
             transform 520ms var(--ease-spring),box-shadow 520ms var(--ease-out)}
.tl-item.in .tl-n{background:var(--gradient-brand);color:#fff;transform:scale(1.06);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 12%,transparent)}
/* ojo: .tl-item .body gana a .card{padding:24px}. No fijar aquí el padding. */
.tl-item h3{margin-bottom:8px}
.tl-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:700px){
  .tl-item{grid-template-columns:34px 1fr;gap:14px}
  .tl-n{width:34px;height:34px;font-size:13px;margin-top:20px}
  .tl-rail{left:16px;top:37px;bottom:37px}
}

/* aviso destacado — usa ::after: ::before ya lo ocupa .card-i (opacity:0) */
.note{position:relative;overflow:hidden}
.note::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gradient-safe);pointer-events:none}

/* ───────────── CTA ───────────── */
.cta{position:relative;overflow:hidden;background:var(--gradient-safe);border-radius:var(--radius-4xl);
  padding:56px 32px;text-align:center;color:#fff}
.cta::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;pointer-events:none;
  top:-260px;right:-160px;background:radial-gradient(circle,rgba(46,216,211,.5),transparent 65%);
  animation:drift 24s ease-in-out infinite alternate}
.cta > *{position:relative;z-index:1}
.cta p{color:rgba(255,255,255,.88);max-width:52ch;margin:16px auto 0}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.cta-fine{color:rgba(255,255,255,.72);margin-top:16px}
.badge-on-brand{background:rgba(255,255,255,.16);color:#fff}
.badge-on-brand .pulse{background:#fff}
@media(max-width:600px){.cta-actions .btn{width:100%}}

/* ───────────── footer ───────────── */
footer{padding:56px 0 48px;border-top:1px solid var(--border);margin-top:80px}
.foot-top{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--muted-foreground)}
.foot-links a{text-decoration:none;transition:color var(--dur-fast),transform var(--dur-fast) var(--ease-out);display:inline-block}
.foot-links a:hover{color:var(--foreground);transform:translateY(-2px)}
.disclaimer{margin-top:32px;font-size:12px;line-height:1.66;color:var(--muted-foreground);max-width:78ch}

/* ───────────── revelado al hacer scroll ───────────── */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity 700ms var(--ease-out) var(--d,0ms),transform 800ms var(--ease-out) var(--d,0ms)}
.reveal[data-anim="scale"]{transform:translateY(20px) scale(.97)}
.reveal[data-anim="left"]{transform:translateX(-26px)}
.reveal[data-anim="right"]{transform:translateX(26px)}
.reveal.in{opacity:1;transform:none}

/* ───────────── movimiento reducido ───────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:1ms!important;transition-delay:0ms!important}
  .reveal,.fade-up,.honest li,.hero-title .w{opacity:1!important;transform:none!important}
  .field{clip-path:none!important}
  .ticker-track{animation:none!important}
}

/* transición de tema */
::view-transition-old(root),::view-transition-new(root){animation-duration:420ms}