/* ==========================================================================
   IoTgrow.tech - Home
   Sistema visual alineado a las fichas tecnicas y manuales de /landing
   Inter + JetBrains Mono - verde #15803d - slate
   ========================================================================== */

:root{
  --g900:#14532d; --g800:#166534; --g700:#15803d; --g600:#16a34a; --g500:#22c55e;
  --g50:#f0fdf4; --g100:#dcfce7; --g200:#bbf7d0;
  --lime:#65a30d; --lime50:#f7fee7;
  --s900:#0f172a; --s800:#1e293b; --s700:#334155; --s600:#475569; --s500:#64748b;
  --s300:#cbd5e1; --s200:#e2e8f0; --s100:#f1f5f9; --s50:#f8fafc;
  --white:#fff;
  --r:16px; --r-sm:10px; --r-lg:22px;
  --sh-sm:0 1px 2px 0 rgb(15 23 42/.05);
  --sh-md:0 4px 12px -2px rgb(15 23 42/.06), 0 2px 6px -1px rgb(15 23 42/.04);
  --sh-lg:0 24px 55px -24px rgb(15 23 42/.22);
  --max:1180px;
  --nav-h:74px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--white); color:var(--s700);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
h1,h2,h3,h4{margin:0; color:var(--s900); line-height:1.15; letter-spacing:-.025em}
p{margin:0}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--g500); outline-offset:2px; border-radius:4px}
::selection{background:var(--g200); color:var(--g900)}

.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
.icon{width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
section[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
.anchor{display:block; height:0; overflow:hidden; scroll-margin-top:calc(var(--nav-h) + 14px)}

.skip{position:absolute; left:-9999px; top:0; z-index:100; background:#fff; color:var(--g800); padding:10px 16px; border-radius:0 0 8px 0; font-weight:600}
.skip:focus{left:0}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 22px; border-radius:10px; border:1px solid transparent;
  font-size:15px; font-weight:600; line-height:1.2; text-align:center;
  text-decoration:none; cursor:pointer;
  transition:background .18s, border-color .18s, color .18s, transform .18s, box-shadow .18s;
}
.btn:active{transform:translateY(1px)}
.btn .icon{width:17px; height:17px; transition:transform .2s ease}
.btn:hover .icon{transform:translateX(2px)}
.btn-primary{background:var(--g700); color:#fff; box-shadow:0 1px 2px rgb(20 83 45/.25)}
.btn-primary:hover{background:var(--g800); box-shadow:0 8px 18px -10px rgb(20 83 45/.55)}
.btn-ghost{background:#fff; border-color:var(--s200); color:var(--s900); box-shadow:var(--sh-sm)}
.btn-ghost:hover{background:var(--s50); border-color:var(--s300)}
.btn-white{background:#fff; color:var(--g800)}
.btn-white:hover{background:var(--g50)}
.btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,.42)}
.btn-outline:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:10px 16px; font-size:14px}
.btn-block{width:100%}

/* ---------- Etiquetas ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--g700);
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--g500); box-shadow:0 0 0 3px rgb(34 197 94/.16); flex:none; align-self:flex-start; margin-top:4px}
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px;
  background:var(--g50); color:var(--g800); border:1px solid var(--g100);
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.badge-dark{background:rgba(255,255,255,.07); color:#d9f99d; border-color:rgba(255,255,255,.16)}
.icon-tile{
  width:44px; height:44px; border-radius:12px; background:var(--g50); border:1px solid var(--g100);
  display:grid; place-items:center; color:var(--g700); flex:none;
}
.icon-tile .icon{width:21px; height:21px}

/* ---------- Header ---------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(244,242,233,.9);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:background .25s, border-color .25s, box-shadow .25s;
}
.nav.is-scrolled{background:rgba(255,255,255,.95); border-bottom-color:var(--s200); box-shadow:0 8px 24px -22px rgb(15 23 42/.55)}
.nav-inner{transition:min-height .25s ease}
.nav.is-scrolled .nav-inner{min-height:64px}
.nav-inner{display:flex; align-items:center; gap:26px; min-height:var(--nav-h)}
.brand{
  display:inline-flex; align-items:center; gap:9px; margin-right:auto;
  font-weight:800; font-size:18px; letter-spacing:-.03em; color:var(--s900); white-space:nowrap;
}
.brand-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(135deg,var(--g700),var(--g800));
  display:grid; place-items:center; box-shadow:0 4px 10px -3px rgb(21 128 61/.4);
  transition:width .25s ease, height .25s ease, border-radius .25s ease;
}
.brand-mark img{height:26px; width:auto; display:block}
.nav.is-scrolled .brand-mark{width:34px; height:34px; border-radius:10px}
.brand em{font-style:normal; color:var(--g700)}
.brand--light{color:#fff}
.brand--light em{color:#86efac}

.nav-links{display:flex; align-items:center; gap:25px; font-size:14.5px; font-weight:500; color:var(--s600)}
.nav-links a{position:relative; padding:6px 0; transition:color .15s}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--g600); transform:scaleX(0); transform-origin:left; transition:transform .2s;
}
.nav-links a:hover{color:var(--g800)}
.nav-links a.is-active{color:var(--g800)}
.nav-links a.is-active::after{transform:scaleX(1)}

.nav-actions{display:flex; align-items:center; gap:14px}
.nav-login{font-size:14.5px; font-weight:600; color:var(--s700); transition:color .15s}
.nav-login:hover{color:var(--g700)}

.nav-toggle{
  display:none; width:44px; height:44px; padding:0; border:1px solid var(--s200); border-radius:10px;
  background:#fff; color:var(--s800); place-items:center;
}
.nav-toggle .icon{width:22px; height:22px}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}

.menu-movil{
  position:absolute; left:0; right:0; top:100%; z-index:49;
  display:flex; flex-direction:column;
  height:calc(100vh - var(--nav-h));
  height:calc(100dvh - var(--nav-h));
  background:linear-gradient(180deg,#fff 0%, #fbfefc 100%);
  border-bottom:1px solid var(--s200);
  box-shadow:0 26px 40px -30px rgb(15 23 42/.5);
  padding:14px 24px 26px;
  overflow:auto;
}
.menu-movil[hidden]{display:none}
.menu-movil nav{display:flex; flex-direction:column}
.menu-movil nav a{padding:13px 2px; border-bottom:1px solid var(--s100); font-size:16.5px; font-weight:600; color:var(--s800)}
.menu-movil nav a:hover{color:var(--g700)}
.menu-movil-actions{display:grid; gap:10px; margin-top:18px}
.menu-movil-actions .btn{width:100%}
.menu-movil-foot{margin-top:auto; padding-top:18px; font-size:13px; color:var(--s500)}
.menu-movil-foot a{color:var(--g700); font-weight:600}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:58px 0 72px;
  background:#f4f2e9;
  border-bottom:1px solid #e6e1d3;
}
.hero-grid{position:relative; display:grid; grid-template-columns:.94fr 1.06fr; gap:62px; align-items:center}
.hero-copy{position:relative; z-index:1; max-width:560px}
.hero-kicker{
  display:flex; align-items:center; gap:11px; margin:0;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.15em; text-transform:uppercase; color:#7a7566;
}
.hero-kicker span{color:var(--g700); font-weight:600}
.hero-kicker-line{display:block; width:36px; height:1px; background:var(--g700); transform-origin:left center}
.hero-copy h1{
  margin:20px 0 22px;
  font-size:clamp(42px,4.8vw,68px); font-weight:800; line-height:.99;
  letter-spacing:-.048em; color:#121a12;
}
.hero-copy h1 em{
  display:block; margin-top:2px;
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  font-size:1.07em; line-height:1.02; letter-spacing:-.025em; color:var(--g800);
}
.hero-copy .lead{max-width:43ch; font-size:17px; line-height:1.65; color:#575c52}
.hero-actions{display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; margin-top:30px}
.hero-link{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 0 3px; font-size:14.5px; font-weight:600; color:#22291f;
  border-bottom:1px solid #c9c4b2; transition:color .2s, border-color .2s;
}
.hero-link .icon{width:15px; height:15px; transition:transform .2s}
.hero-link:hover{color:var(--g700); border-color:var(--g600)}
.hero-link:hover .icon{transform:translate(2px,-2px)}

.hero-note{
  display:flex; align-items:flex-start; gap:8px;
  max-width:44ch; margin:28px 0 0; padding-top:18px;
  border-top:1px solid #d8d3c4;
  font-size:12px; line-height:1.5; color:#7a7566;
}
.hero-note .icon{width:15px; height:15px; color:var(--g700); margin-top:2px}

.hero-visual{position:relative; z-index:1; margin:0; transition:transform .5s cubic-bezier(.16,1,.3,1); will-change:transform}
.hero-dash{
  overflow:hidden; background:#fff; border:1px solid #e2ddce; border-radius:14px;
  box-shadow:0 34px 60px -46px rgb(30 35 20/.55);
}
.hd-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 14px; background:#fbfaf5; border-bottom:1px solid #ece7da}
.hd-id{display:flex; align-items:center; gap:7px; white-space:nowrap; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.07em; text-transform:uppercase; color:#6b6f62}
.hd-sep{color:#b3ad9d}
.hd-dot{width:6px; height:6px; border-radius:50%; background:var(--g500); box-shadow:0 0 0 3px rgb(34 197 94/.15); flex:none}
.hd-demo{flex:none; padding:3px 7px; border-radius:4px; border:1px solid var(--g100); background:var(--g50); color:var(--g800); font-family:'JetBrains Mono',monospace; font-size:8px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}

.hd-grid{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:13px 13px 0}
.hd-card{
  --accent:#15803d; --tint:#f0fdf4; --line:#dcfce7;
  display:flex; flex-direction:column; gap:7px; min-width:0;
  padding:12px; border:1px solid #e8e4d8; border-radius:10px; background:#fbfcf8;
}
.hd-card--ph{--accent:#15803d; --tint:#f0fdf4; --line:#d7efdd}
.hd-card--ec{--accent:#65a30d; --tint:#f7fee7; --line:#e3efc2}
.hd-card--temp{--accent:#d97706; --tint:#fffbeb; --line:#f3e3c6}
.hd-card--wifi{--accent:#0284c7; --tint:#f0f9ff; --line:#d6eaf4}
.hd-card-head{display:flex; align-items:center; gap:8px; min-width:0; font-size:10px; font-weight:600; letter-spacing:.02em; color:#7a7566}
.hd-icon{width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px; background:var(--tint); border:1px solid var(--line); color:var(--accent)}
.hd-icon .icon{width:16px; height:16px}
.hd-card strong{display:flex; align-items:baseline; gap:3px; font-family:'JetBrains Mono',monospace; font-size:24px; font-weight:600; line-height:1; letter-spacing:-.02em; color:#162016; font-variant-numeric:tabular-nums}
.hd-card strong small{font-size:9px; font-weight:500; color:#8a8474; letter-spacing:0}
.hd-status{font-size:9px; line-height:1.3; color:#8a8474}
.hd-status--ok{color:var(--g700); font-weight:600}
.hd-status--wifi{color:#0284c7; font-weight:600}
.hd-bars{display:flex; align-items:flex-end; gap:2px; height:13px; margin-left:auto}
.hd-bars i{width:3px; border-radius:1px; background:#d8d4c5}
.hd-bars i:nth-child(1){height:4px}
.hd-bars i:nth-child(2){height:6px}
.hd-bars i:nth-child(3){height:9px}
.hd-bars i:nth-child(4){height:13px}
.hd-bars i.on{background:var(--accent)}

.hd-chart{margin:10px 13px 0; padding:10px 11px 7px; border:1px solid #e8e4d8; border-radius:10px; background:#fbfcf8}
.hd-chart-head{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:9.5px; color:#7a7566}
.hd-legend{display:flex; align-items:center; gap:8px; font-size:8.5px; color:#8a8474}
.hd-legend span{display:inline-flex; align-items:center; gap:3px}
.hd-legend i{width:6px; height:6px; border-radius:2px}
.lg-ph{background:#15803d}
.lg-ce{background:#a3e635}
.lg-temp{background:#d97706}
.hd-chart svg{display:block; width:100%; height:auto; margin-top:4px}
.hd-x{display:flex; justify-content:space-between; margin-top:1px; font-family:'JetBrains Mono',monospace; font-size:8px; color:#a6a08f}
.hd-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 14px 11px; font-size:8.5px; color:#8a8474}
.hd-foot span{display:inline-flex; align-items:center; gap:5px}
.hd-foot-dot{width:4px; height:4px; border-radius:50%; background:var(--g500); flex:none}

.hero-visual figcaption{
  display:flex; align-items:flex-start; gap:12px;
  padding-top:12px; border-top:1px solid #d8d3c4;
  font-family:'JetBrains Mono',monospace; font-size:9px; line-height:1.65;
  letter-spacing:.05em; text-transform:uppercase; color:#7a7566;
}
.hero-visual figcaption span{color:var(--g700); font-weight:600; white-space:nowrap}

/* entrada del hero */
.hero-kicker-line{animation:lineGrow .9s .15s cubic-bezier(.16,1,.3,1) both}
.hero-dash{animation:heroUp .9s .12s cubic-bezier(.16,1,.3,1) both}
.hd-card{animation:statUp .55s cubic-bezier(.16,1,.3,1) both}
.hd-card:nth-child(1){animation-delay:.38s}
.hd-card:nth-child(2){animation-delay:.46s}
.hd-card:nth-child(3){animation-delay:.54s}
.hd-card:nth-child(4){animation-delay:.62s}
@media (prefers-reduced-motion:no-preference){
  .hd-line{stroke-dasharray:900; stroke-dashoffset:900; animation:drawLine 1.5s 1s cubic-bezier(.16,1,.3,1) forwards}
  .hd-line-ce{animation-delay:1.14s}
  .hd-line-temp{animation-delay:1.28s}
  .hd-area{opacity:0; animation:areaIn .9s 1.1s ease forwards}
}
.hero-copy > .hero-kicker,
.hero-copy > h1,
.hero-copy > .lead,
.hero-copy > .hero-actions,
.hero-copy > .hero-note{animation:heroUp .85s cubic-bezier(.16,1,.3,1) both}
.hero-copy > .hero-kicker{animation-delay:.05s}
.hero-copy > h1{animation-delay:.12s}
.hero-copy > .lead{animation-delay:.2s}
.hero-copy > .hero-actions{animation-delay:.28s}
.hero-copy > .hero-note{animation-delay:.36s}

/* ---------- Trust ---------- */
.trust-wrap{padding:0 0 4px}
.trust{
  display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border:1px solid var(--s200); border-radius:16px;
  box-shadow:0 14px 34px -30px rgb(15 23 42/.5);
  transform:translateY(-26px);
}
.trust-item{display:flex; align-items:flex-start; gap:12px; padding:20px 22px; border-left:1px solid var(--s200); animation:heroUp .7s cubic-bezier(.16,1,.3,1) both}
.trust-item:nth-child(1){animation-delay:.5s}
.trust-item:nth-child(2){animation-delay:.58s}
.trust-item:nth-child(3){animation-delay:.66s}
.trust-item:nth-child(4){animation-delay:.74s}
.trust-item:first-child{border-left:0}
.trust-item .icon-tile{width:38px; height:38px; border-radius:10px}
.trust-item .icon-tile .icon{width:18px; height:18px}
.trust-item h3{font-size:14px; font-weight:700; margin:1px 0 3px; letter-spacing:-.01em}
.trust-item p{font-size:12.5px; line-height:1.45; color:var(--s500)}

/* ---------- Secciones ---------- */
.section{padding:84px 0}
.section--tight{padding:68px 0}
.section--alt{background:var(--s50); border-top:1px solid var(--s200); border-bottom:1px solid var(--s200)}
.section-head{max-width:690px; margin-bottom:44px}
.section-head--center{margin-left:auto; margin-right:auto; text-align:center}
.section-head h2{font-size:clamp(28px,3.3vw,39px); font-weight:800; line-height:1.08; letter-spacing:-.032em; margin:12px 0 14px}
.section-head p{font-size:16.5px; line-height:1.65; color:var(--s600); max-width:62ch}
.section-head--center p{margin-left:auto; margin-right:auto}

/* ---------- Productos ---------- */
.products{display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:24px}
.product-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--s200);
  border-radius:18px; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.product-card:hover{transform:translateY(-4px); box-shadow:0 26px 48px -32px rgb(15 23 42/.45); border-color:var(--s300)}
.product-media{position:relative; aspect-ratio:4/3; background:#eef1ea; overflow:hidden}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.product-card:hover .product-media img{transform:scale(1.025)}
.product-tag{
  position:absolute; top:13px; left:13px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid var(--s200); border-radius:999px; padding:5px 11px;
  font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--g800);
}
.product-body{display:flex; flex-direction:column; flex:1; padding:21px 22px 23px}
.product-body h3{font-size:20px; font-weight:750; letter-spacing:-.025em}
.product-desc{margin-top:8px; font-size:14px; line-height:1.6; color:var(--s600)}
.spec-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:15px}
.spec-chips li{
  padding:5px 9px; border-radius:999px; background:var(--s100); border:1px solid var(--s200);
  font-size:11px; font-weight:600; color:var(--s700); white-space:nowrap;
}
.product-actions{margin-top:auto; padding-top:18px; border-top:1px solid var(--s100)}
.product-actions .btn{margin-top:14px}
.link-arrow{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:11px;
  font-size:13.5px; font-weight:650; color:var(--g700);
}
.link-arrow .icon{width:15px; height:15px; transition:transform .18s}
.link-arrow:hover{color:var(--g800)}
.link-arrow:hover .icon{transform:translateX(3px)}

.products-note{
  display:flex; align-items:center; justify-content:center; gap:8px; margin-top:28px;
  font-size:13.5px; color:var(--s500); text-align:center;
}
.products-note .icon{width:16px; height:16px; color:var(--lime)}
.products-note a{color:var(--g700); font-weight:600; text-decoration:underline; text-underline-offset:2px}

/* ---------- Plataforma ---------- */
.platform{
  position:relative; overflow:hidden; padding:88px 0;
  background:
    radial-gradient(760px 420px at 92% 0%, rgba(101,163,13,.22) 0%, rgba(101,163,13,0) 62%),
    radial-gradient(620px 380px at 0% 100%, rgba(34,197,94,.12) 0%, rgba(34,197,94,0) 60%),
    linear-gradient(140deg,#082114 0%, #0d2f1d 46%, #124a2c 100%);
  color:#fff;
}
.platform-grid{display:grid; grid-template-columns:.96fr 1.04fr; gap:58px; align-items:center}
.platform h2{color:#fff; font-size:clamp(29px,3.4vw,41px); font-weight:800; line-height:1.08; letter-spacing:-.032em; margin:14px 0 16px}
.platform-copy > p{color:#b7d2c1; font-size:16px; line-height:1.65; max-width:46ch}
.platform-list{display:grid; gap:11px; margin-top:24px}
.platform-list li{display:flex; align-items:flex-start; gap:10px; font-size:14.5px; line-height:1.5; color:#d9e8df}
.platform-list .icon{width:17px; height:17px; color:#a3e635; margin-top:2px}
.platform-actions{display:flex; flex-wrap:wrap; gap:11px; margin-top:28px}
.platform-note{margin-top:16px; font-size:11.5px; color:#8fb3a0}

/* El panel de la plataforma reutiliza el mismo mockup del hero */
.platform-visual .hero-dash{box-shadow:0 40px 70px -34px rgb(0 0 0/.65)}

/* Panel demo */
.dash{background:#fff; border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden; box-shadow:0 40px 70px -34px rgb(0 0 0/.65); color:var(--s700)}
.dash-bar{display:flex; align-items:center; gap:10px; padding:9px 12px; background:var(--s50); border-bottom:1px solid var(--s200)}
.dash-dots{display:inline-flex; gap:5px}
.dash-dots i{width:8px; height:8px; border-radius:50%; background:#fca5a5}
.dash-dots i:nth-child(2){background:#fcd34d}
.dash-dots i:nth-child(3){background:#86efac}
.dash-url{flex:1; text-align:center; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--s500); background:#eef2f6; border-radius:6px; padding:4px 10px}
.dash-demo{font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--g800); background:var(--g100); border-radius:4px; padding:3px 6px}
.dash-body{padding:16px}
.dash-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.dash-head h3{font-size:14.5px; font-weight:700; letter-spacing:-.015em}
.dash-head p{margin-top:2px; font-size:10.5px; color:var(--s500)}
.dash-online{display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:600; color:var(--g700); background:var(--g50); border:1px solid var(--g100); border-radius:999px; padding:4px 8px; white-space:nowrap}
.dash-online i{width:5px; height:5px; border-radius:50%; background:var(--g500); box-shadow:0 0 0 2px rgb(34 197 94/.18)}
.dash-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px}
.dash-metric{background:var(--s50); border:1px solid var(--s200); border-radius:10px; padding:10px 11px}
.dash-label{display:block; font-size:9.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--s500)}
.dash-metric strong{display:flex; align-items:baseline; gap:2px; margin-top:3px; font-family:'JetBrains Mono',monospace; font-size:19px; font-weight:600; color:var(--s900); font-variant-numeric:tabular-nums; line-height:1.2}
.dash-metric small{font-size:9px; font-weight:500; color:var(--s500)}
.dash-ok{display:block; margin-top:2px; font-size:9px; font-weight:600; color:var(--g700)}
.dash-muted{display:block; margin-top:2px; font-size:9px; color:var(--s500)}
.dash-chart{margin-top:11px; border:1px solid var(--s200); border-radius:10px; padding:10px 11px 7px}
.dash-chart-head{display:flex; align-items:center; justify-content:space-between; font-size:9.5px; font-weight:600; color:var(--s600)}
.dash-legend{display:inline-flex; align-items:center; gap:5px; font-size:9px; color:var(--s500)}
.dash-legend i{width:7px; height:7px; border-radius:2px; display:inline-block; margin-left:5px}
.lg-ph{background:var(--g700)}
.lg-ce{background:#a3e635}
.dash-chart svg{width:100%; height:auto; display:block; margin-top:4px}
.dash-x{display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--s400,#94a3b8); margin-top:1px}
.dash-foot{display:flex; justify-content:space-between; gap:10px; margin-top:10px; padding-top:9px; border-top:1px solid var(--s100); font-size:9.5px; color:var(--s500)}
.dash-foot span{display:inline-flex; align-items:center; gap:5px}
.dash-dot{width:5px; height:5px; border-radius:50%; background:var(--g500)}

/* ---------- Como funciona ---------- */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px}
.step{
  position:relative; overflow:hidden; background:#fff; border:1px solid var(--s200);
  border-radius:16px; padding:26px 24px 28px;
}
.step-num{
  position:absolute; top:6px; right:18px;
  font-size:64px; font-weight:800; letter-spacing:-.06em; line-height:1;
  color:#eef8f1; pointer-events:none;
}
.step-icon{position:relative; display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--g50); border:1px solid var(--g100); color:var(--g700)}
.step-icon .icon{width:22px; height:22px}
.step h3{position:relative; margin-top:18px; font-size:18px; font-weight:700}
.step p{position:relative; margin-top:8px; font-size:14px; line-height:1.6; color:var(--s600)}

/* ---------- Documentacion ---------- */
.docs{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:24px}
.doc-card{background:#fff; border:1px solid var(--s200); border-radius:16px; padding:24px 24px 10px}
.doc-head{display:flex; align-items:center; justify-content:space-between; gap:10px}
.doc-head .icon-tile{width:40px; height:40px}
.doc-card h3{margin-top:16px; font-size:18px; font-weight:750}
.doc-card > p{margin-top:7px; font-size:13.5px; line-height:1.6; color:var(--s600); min-height:44px}
.doc-links{margin-top:14px; border-top:1px solid var(--s100)}
.doc-links li + li{border-top:1px solid var(--s100)}
.doc-links a{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; font-size:13.5px; font-weight:600; color:var(--s800); transition:color .15s}
.doc-links a .icon{width:15px; height:15px; color:var(--g700); transition:transform .18s}
.doc-links a:hover{color:var(--g700)}
.doc-links a:hover .icon{transform:translateX(3px)}

.docs-banner{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:28px; padding:24px 28px; border-radius:16px;
  background:linear-gradient(135deg,#f0fdf4,#f7fee7); border:1px solid var(--g100);
}
.docs-banner h3{font-size:18px; font-weight:750}
.docs-banner p{margin-top:4px; font-size:13.5px; color:var(--s600)}
.docs-banner-actions{display:flex; flex-wrap:wrap; gap:10px; flex:none}

/* ---------- Fundador ---------- */
.founder{display:grid; grid-template-columns:340px 1fr; gap:64px; align-items:center}
.founder-media{position:relative; width:min(340px,100%); aspect-ratio:1; margin:0 auto; isolation:isolate}
.founder-media::before{
  content:""; position:absolute; inset:-14px; z-index:-1;
  border:1px solid var(--g200); border-radius:50%;
}
.founder-media::after{
  content:""; position:absolute; inset:-14px; z-index:-1;
  border:1px solid transparent; border-top-color:var(--lime); border-right-color:var(--lime);
  border-radius:50%; opacity:.9;
}
.founder-photo{
  position:relative; z-index:1; width:100%; height:100%;
  object-fit:cover; object-position:50% 22%;
  border-radius:50%; border:6px solid #fff;
  box-shadow:0 30px 55px -30px rgb(15 23 42/.45);
  animation:portraitIn 1s .15s cubic-bezier(.16,1,.3,1) both;
}
.founder-stamp{
  position:absolute; z-index:2; left:0; right:0; bottom:2px; margin:0 auto;
  width:max-content; max-width:calc(100% - 8px); padding:6px 10px;
  background:#fff; border:1px solid var(--s200); border-radius:999px;
  font-size:10.5px; line-height:1.3; font-weight:600; color:var(--s800);
  text-align:center; box-shadow:var(--sh-sm);
}
.founder-copy h2{font-size:clamp(28px,3.3vw,38px); font-weight:800; letter-spacing:-.032em; margin:12px 0 14px}
.founder-copy > p{font-size:15.5px; line-height:1.65; color:var(--s600)}
.founder-copy blockquote{
  margin:22px 0; padding:2px 0 2px 18px; border-left:3px solid var(--lime);
  font-size:16.5px; line-height:1.55; color:var(--s800);
}
.founder-copy blockquote em{color:var(--g800); font-style:italic}
.founder-points{display:grid; gap:9px; margin-bottom:24px}
.founder-points li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--s700)}
.founder-points .icon{width:16px; height:16px; color:var(--g700)}
.founder-copy > .founder-sign{
  margin:-10px 0 20px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase; color:var(--s500);
}

/* ---------- FAQ ---------- */
.faq{max-width:840px; margin:0 auto}
.faq details{background:#fff; border:1px solid var(--s200); border-radius:12px; margin-bottom:10px; transition:border-color .18s, box-shadow .18s}
.faq details:hover{border-color:var(--s300)}
.faq details[open]{border-color:var(--g200); box-shadow:0 14px 30px -28px rgb(15 23 42/.4)}
.faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:17px 20px; font-size:15px; font-weight:600; color:var(--s900);
  cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq-icon{position:relative; width:18px; height:18px; flex:none; color:var(--g700)}
.faq-icon::before,.faq-icon::after{content:""; position:absolute; background:currentColor; border-radius:2px}
.faq-icon::before{left:0; right:0; top:8px; height:2px}
.faq-icon::after{top:0; bottom:0; left:8px; width:2px; transition:transform .2s, opacity .2s}
.faq details[open] .faq-icon::after{transform:rotate(90deg); opacity:0}
.faq-answer{padding:0 20px 18px; font-size:14px; line-height:1.65; color:var(--s600); max-width:72ch}

/* ---------- Contacto ---------- */
.contact{
  position:relative; overflow:hidden; padding:86px 0; color:#fff;
  background:
    radial-gradient(700px 360px at 8% 0%, rgba(101,163,13,.18) 0%, rgba(101,163,13,0) 60%),
    linear-gradient(135deg,#082114 0%, #0d2f1d 52%, #11462a 100%);
}
.contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center}
.contact-info h2{color:#fff; font-size:clamp(29px,3.4vw,40px); font-weight:800; line-height:1.08; letter-spacing:-.032em; margin:14px 0 14px}
.contact-info > p{color:#b7d2c1; font-size:15.5px; line-height:1.65; max-width:46ch}
.contact-list{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; margin-top:28px}
.contact-list li{display:flex; align-items:flex-start; gap:12px}
.contact-icon{
  width:42px; height:42px; border-radius:11px; flex:none;
  background:#123d27; border:1px solid rgba(163,230,53,.45);
  display:grid; place-items:center; color:#bef264;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.contact-icon .icon{width:20px; height:20px; stroke-width:1.9}
.contact-list li > div > span{display:block; font-size:10.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:#8fb3a0; margin-bottom:2px}
.contact-list a,.contact-list strong{font-size:14px; font-weight:600; color:#fff}
.contact-list a:hover{color:#d9f99d}
.contact-trust{display:flex; align-items:flex-start; gap:8px; margin-top:26px; font-size:12px; color:#8fb3a0}
.contact-trust .icon{width:15px; height:15px; color:#a3e635; margin-top:2px}

.contact-card{background:#fff; border-radius:18px; padding:28px; box-shadow:0 40px 70px -44px rgb(0 0 0/.6); color:var(--s700)}
.contact-card h3{font-size:22px; font-weight:800; letter-spacing:-.025em}
.form-hint{margin-top:4px; font-size:12.5px; color:var(--s500)}
#cotizacion{margin-top:16px}
.field{margin-top:12px}
.field label{display:block; margin-bottom:5px; font-size:12px; font-weight:600; color:var(--s700)}
.field input,.field select,.field textarea{
  width:100%; padding:11px 13px; border:1px solid var(--s200); border-radius:10px;
  background:#fff; font-size:14px; color:var(--s900);
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder,.field textarea::placeholder{color:#94a3b8}
.field textarea{resize:vertical; min-height:92px}
.field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--g600); box-shadow:0 0 0 3px rgb(34 197 94/.16)}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field-error{display:none; margin-top:4px; font-size:11.5px; color:#dc2626}
.field-error.is-visible{display:block}
.check.invalid{color:#b91c1c}
.check.invalid input{outline:2px solid #fca5a5; outline-offset:1px}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#fca5a5; background:#fff7f7}
.field.invalid .field-error{display:block}
.check{display:flex; align-items:flex-start; gap:8px; margin-top:14px; font-size:12px; line-height:1.45; color:var(--s600)}
.check input{width:16px; height:16px; margin-top:2px; accent-color:var(--g700); flex:none}
.check a{color:var(--g700); font-weight:600; text-decoration:underline; text-underline-offset:2px}
#cotizacion button[type="submit"]{margin-top:16px; padding:13px 18px}
.form-legal{margin-top:9px; font-size:11px; line-height:1.45; color:var(--s500); text-align:center}
.form-success{margin-top:10px; padding:11px 12px; border-radius:8px; background:var(--g50); border:1px solid var(--g100); color:var(--g800); font-size:12.5px; line-height:1.45}
.form-success[hidden]{display:none}
.form-success p{margin:0 0 8px}
.form-success-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
.form-success-link{
  display:inline-flex; align-items:center; padding:7px 11px;
  border:1px solid var(--g200); border-radius:7px;
  background:#fff; color:var(--g800); font-size:12px; font-weight:700;
  text-decoration:none;
}
.form-success-link:hover{background:var(--g100)}
.form-success-mail{font-size:11px; color:var(--s500); text-decoration:underline; text-underline-offset:2px}
.form-success-mail:hover{color:var(--g800)}

/* ---------- Footer ---------- */
.footer{background:#0b1220; color:#94a3b8; padding:58px 0 22px; font-size:13.5px}
.footer-grid{display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px}
.footer-brand p{margin-top:14px; max-width:34ch; font-size:13px; line-height:1.6; color:#94a3b8}
.footer h3{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#cbd5e1; margin-bottom:13px}
.footer ul{display:grid; gap:8px}
.footer ul a,.footer ul span{font-size:13px; color:#94a3b8; line-height:1.5}
.footer ul a:hover{color:#fff}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:42px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font-size:11.5px; color:#64748b}
.footer-bottom a:hover{color:#cbd5e1}

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:#25d366; color:#fff; box-shadow:0 14px 30px -10px rgb(37 211 102/.7);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
}
.wa-float .icon{width:27px; height:27px; stroke-width:1.7}
.wa-float.is-visible{opacity:1; visibility:visible; transform:none}
.wa-float:hover{background:#1eb85a; transform:translateY(-2px)}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay:var(--d,0ms)}
.js .reveal.is-in{opacity:1; transform:none}


/* ---------- Animaciones ---------- */
@keyframes heroUp{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes heroReveal{from{clip-path:inset(0 0 100% 0)} to{clip-path:inset(0)}}
@keyframes heroZoom{from{transform:scale(1.07)} to{transform:scale(1)}}
@keyframes lineGrow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes areaIn{to{opacity:1}}
@keyframes statUp{from{opacity:0; transform:translateY(9px)} to{opacity:1; transform:none}}
@keyframes faqIn{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
@keyframes portraitIn{from{opacity:0; filter:blur(7px)} to{opacity:1; filter:blur(0)}}
@keyframes floatSoft{0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)}}

.js .dash-chart .chart-line{stroke-dasharray:1100; stroke-dashoffset:1100}
.platform-visual.is-in .chart-line-ph{animation:drawLine 1.5s .15s cubic-bezier(.16,1,.3,1) forwards}
.platform-visual.is-in .chart-line-ce{animation:drawLine 1.7s .32s cubic-bezier(.16,1,.3,1) forwards}
.js .platform-visual .dash-metric{opacity:0; transform:translateY(9px)}
.js .platform-visual.is-in .dash-metric{animation:statUp .6s cubic-bezier(.16,1,.3,1) both}
.js .platform-visual.is-in .dash-metric:nth-child(1){animation-delay:.15s}
.js .platform-visual.is-in .dash-metric:nth-child(2){animation-delay:.23s}
.js .platform-visual.is-in .dash-metric:nth-child(3){animation-delay:.31s}

.faq details[open] .faq-answer{animation:faqIn .28s ease both}
.step:hover .step-icon{animation:floatSoft 1.8s ease-in-out infinite}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav-links{gap:18px; font-size:14px}
  .hero-grid{gap:38px}
  .platform-grid,.contact-grid{gap:40px}
}

@media (max-width:1020px){
  .nav-links,.nav-actions{display:none}
  .nav-toggle{display:grid}
}

@media (max-width:920px){
  .hero{padding:46px 0 62px}
  .hero-grid{grid-template-columns:1fr; gap:36px}
  .hero-copy{max-width:640px}
  .hero-copy h1{max-width:14ch}
  .hero-visual{max-width:620px; width:100%; margin:0 auto}
  .trust{grid-template-columns:1fr 1fr}
  .trust-item:nth-child(3){border-left:0}
  .trust-item:nth-child(n+3){border-top:1px solid var(--s200)}
  .platform-grid{grid-template-columns:1fr}
  .platform-copy{max-width:620px}
  .founder{grid-template-columns:1fr; gap:38px}
  .founder-media{max-width:280px}
  .contact-grid{grid-template-columns:1fr; gap:34px}
  .contact-info{max-width:620px}
  .contact-card{max-width:620px}
}

@media (max-width:760px){
  .wrap{padding:0 18px}
  .section{padding:66px 0}
  .section--tight{padding:56px 0}
  .platform,.contact{padding:68px 0}
  .section-head{margin-bottom:34px}
  .products,.docs,.steps{grid-template-columns:1fr; gap:18px}
  .product-media{aspect-ratio:16/10}
  .doc-card > p{min-height:0}
  .docs-banner{flex-direction:column; align-items:flex-start; padding:22px}
  .docs-banner-actions{width:100%}
  .docs-banner-actions .btn{flex:1}
  .footer-grid{grid-template-columns:1fr 1fr; gap:28px}
  .footer-brand{grid-column:1 / -1}
  .contact-list{grid-template-columns:1fr}
  .dash-metrics{gap:6px}
  .dash-metric{padding:9px}
  .dash-metric strong{font-size:17px}
}

@media (max-width:560px){
  .brand{font-size:16.5px}
  .eyebrow{font-size:10.5px; letter-spacing:.1em}
  .brand-mark{width:34px; height:34px; border-radius:10px}
  .hero{padding:34px 0 52px}
  .hero-copy h1{font-size:clamp(36px,9.8vw,46px)}
  .hero-copy .lead{font-size:16px}
  .hero-actions{flex-direction:column; align-items:stretch}
  .hero-actions .btn{width:100%}
  .hero-link{align-self:flex-start}
  .hero-note{font-size:11.5px; margin-top:22px}
  .hd-top{padding:9px 11px}
  .hd-id{font-size:8.5px; gap:5px}
  .hd-grid{gap:8px; padding:11px 11px 0}
  .hd-card{padding:10px; gap:6px}
  .hd-card-head{font-size:9.5px; gap:6px}
  .hd-icon{width:24px; height:24px}
  .hd-icon .icon{width:15px; height:15px}
  .hd-card strong{font-size:20px}
  .hd-status{font-size:8.5px}
  .hd-chart{margin:9px 11px 0; padding:9px 10px 6px}
  .hd-legend{gap:6px; font-size:7.5px}
  .hd-foot{padding:8px 11px 10px; font-size:7.5px}
  .hd-bars{height:12px}
  .trust{grid-template-columns:1fr; transform:translateY(-18px)}
  .trust-item{border-left:0; border-top:1px solid var(--s200); padding:16px 18px}
  .trust-item:first-child{border-top:0}
  .section-head h2{font-size:clamp(25px,7.6vw,31px)}
  .section-head p{font-size:15px}
  .field-row{grid-template-columns:1fr}
  .contact-card{padding:22px 18px}
  .docs-banner-actions{flex-direction:column}
  .docs-banner-actions .btn{width:100%; flex:none}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start; gap:8px}
  .wa-float{right:14px; bottom:14px; width:50px; height:50px}
  .platform-actions .btn{width:100%}
  .dash-chart{padding:9px 8px 6px}
  .dash-foot{flex-direction:column; gap:4px}
}

@media (max-width:380px){
  .hero-copy h1{font-size:34px}
  .hero-note{font-size:11px}
  .hd-id{font-size:7.5px}
  .hd-demo{font-size:7px; padding:2px 5px}
  .hd-grid{gap:6px; padding:9px 9px 0}
  .hd-card{padding:8px; gap:4px}
  .hd-card-head{font-size:8.5px; gap:5px}
  .hd-icon{width:22px; height:22px}
  .hd-icon .icon{width:13px; height:13px}
  .hd-card strong{font-size:18px}
  .hd-chart{margin:7px 9px 0; padding:8px 8px 5px}
  .hd-chart-head{font-size:8px}
  .hd-legend{font-size:7px; gap:5px}
  .hd-foot{font-size:7px; padding:7px 9px 8px}
  .hero-visual figcaption{font-size:8px; gap:8px}
  .founder-media{max-width:240px}
  .dash-metric strong{font-size:15px}
  .dash-metrics{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
  .js .reveal{opacity:1; transform:none}
  .product-card:hover{transform:none}
  .founder-photo{transform:none}
  .dash-chart .chart-line{stroke-dasharray:none; stroke-dashoffset:0}
  .js .platform-visual .dash-metric{opacity:1; transform:none}
  .wa-float:hover{transform:none}
}

@media print{
  .nav,.menu-movil,.wa-float,.contact-card,.hero-actions,.footer{display:none !important}
  .js .dash-chart .chart-line{stroke-dasharray:none !important; stroke-dashoffset:0 !important}
  body{background:#fff}
  .hero,.platform,.contact{background:#fff !important; color:#000 !important; padding:16px 0}
  .platform h2,.contact-info h2{color:#000}
  .platform-copy > p,.contact-info > p,.platform-list li{color:#333}
  .section{padding:18px 0}
  .js .reveal{opacity:1; transform:none}
}

/* Tablets: una sola columna para evitar tarjetas huerfanas */
@media (max-width:999px){
  .products{grid-template-columns:1fr}
  .product-media{aspect-ratio:16/9}
}
@media (max-width:960px){
  .steps,.docs{grid-template-columns:1fr}
}

/* Tablet: productos 2 + destacado, footer y banner mas comodos */
@media (min-width:761px) and (max-width:999px){
  .products{grid-template-columns:1fr 1fr}
  .products .product-card:last-child{grid-column:1/-1; display:grid; grid-template-columns:1.05fr .95fr}
  .products .product-card:last-child .product-media{aspect-ratio:auto; height:100%; min-height:330px}
  .products .product-card:last-child .product-body{justify-content:center}
}
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:900px){
  .docs-banner{flex-direction:column; align-items:flex-start}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
}