/* =====================================================================
   BRELANTA — sistema de diseño compartido (index.html + opticas.html)
   Generado con ui-ux-pro-max: SaaS B2B, marca teal + CTA ámbar,
   Plus Jakarta Sans / DM Sans, hero oscuro, vidrio sutil, movimiento moderado.
   ===================================================================== */
:root{
  color-scheme: light;
  --bg:#FFFFFF; --bg-alt:#F1F9F8; --surface:#FFFFFF; --surface-2:#F6FBFA;
  --ink:#0A2523; --body:#42605C; --muted:#587471;
  --line:#DBEBE8; --line-2:#E9F4F2;
  --brand:#109E93; --brand-d:#0C817A; --brand-x:#0A6560; --brand-text:#0A6560;
  --tint:#E3F6F3; --tint-2:#C9EEE8;
  --accent:#FFB020; --accent-h:#FFC24D; --on-accent:#1B1300;
  --deep:#052624; --deep-2:#083734;
  --ok:#0F9D6B; --bad:#C0552F; --bad-bg:#FDF3EF;
  --sh-xs:0 1px 2px rgba(5,48,46,.06);
  --sh-sm:0 2px 8px rgba(5,48,46,.07),0 1px 2px rgba(5,48,46,.05);
  --sh-md:0 12px 30px rgba(5,48,46,.10),0 2px 6px rgba(5,48,46,.05);
  --sh-lg:0 30px 70px rgba(5,48,46,.20),0 6px 16px rgba(5,48,46,.08);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --wrap:1180px;
  --display:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --text:"DM Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.7,.3,1);
  --header-bg:rgba(255,255,255,.82);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#071413; --bg-alt:#0B1C1A; --surface:#10221F; --surface-2:#0D1B19;
    --ink:#EAF6F4; --body:#A9C5C1; --muted:#88A6A2;
    --line:#1F3835; --line-2:#182D2B;
    --brand-text:#5ED3C0; --tint:#123531; --tint-2:#1A4A44;
    --bad:#F0917A; --bad-bg:#2A1613;
    --sh-xs:0 1px 2px rgba(0,0,0,.45); --sh-sm:0 2px 8px rgba(0,0,0,.5);
    --sh-md:0 12px 30px rgba(0,0,0,.55); --sh-lg:0 30px 70px rgba(0,0,0,.65);
    --header-bg:rgba(7,20,19,.82);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#071413; --bg-alt:#0B1C1A; --surface:#10221F; --surface-2:#0D1B19;
  --ink:#EAF6F4; --body:#A9C5C1; --muted:#88A6A2;
  --line:#1F3835; --line-2:#182D2B;
  --brand-text:#5ED3C0; --tint:#123531; --tint-2:#1A4A44;
  --bad:#F0917A; --bad-bg:#2A1613;
  --sh-xs:0 1px 2px rgba(0,0,0,.45); --sh-sm:0 2px 8px rgba(0,0,0,.5);
  --sh-md:0 12px 30px rgba(0,0,0,.55); --sh-lg:0 30px 70px rgba(0,0,0,.65);
  --header-bg:rgba(7,20,19,.82);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:var(--text); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg,picture{ max-width:100%; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); margin:0; font-weight:800; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
p{ margin:0; } ul{ margin:0; padding:0; list-style:none; } a{ color:inherit; }
button{ font:inherit; }
.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
:focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
section[id],main[id]{ scroll-margin-top:84px; }

.ico{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ico.fill{ stroke:none; fill:currentColor; }

/* ---------- textos ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.6em; font-family:var(--mono); font-size:.75rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand-text);
  background:var(--tint); border:1px solid var(--tint-2); padding:.5em 1em; border-radius:100px;
}
.kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--brand); }
.kicker .dot.pulse{ animation:pulse 2.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(16,158,147,.55); } 50%{ box-shadow:0 0 0 7px rgba(16,158,147,0); } }
.lead{ font-size:1.1875rem; max-width:60ch; }
.hi{ color:var(--brand-text); font-weight:700; }
.grad{ background:linear-gradient(100deg,#7BE9D8 0%,#FFD27A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grad-teal{ background:linear-gradient(100deg,var(--brand) 0%,#2FBBAC 60%,#0C817A 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em; white-space:nowrap; cursor:pointer;
  font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:-.005em;
  padding:1em 1.7em; min-height:48px; border-radius:100px; border:1.5px solid transparent; text-decoration:none;
  transition:transform .2s var(--ease),box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn .ico{ width:18px; height:18px; }
.btn-cta{ background:var(--accent); color:var(--on-accent); box-shadow:0 10px 26px rgba(255,176,32,.32); }
.btn-cta:hover{ background:var(--accent-h); transform:translateY(-2px); box-shadow:0 16px 34px rgba(255,176,32,.42); }
.btn-cta .ico{ transition:transform .2s var(--ease); } .btn-cta:hover .ico{ transform:translateX(3px); }
.btn-teal{ background:linear-gradient(135deg,#1FB5A7,var(--brand-x)); color:#fff; box-shadow:0 10px 24px rgba(12,129,122,.3); }
.btn-teal:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(12,129,122,.4); }
.btn-ghost{ background:var(--surface); color:var(--brand-text); border-color:var(--tint-2); }
.btn-ghost:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--sh-sm); }
.btn-glass{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(8px); }
.btn-glass:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.6); transform:translateY(-2px); }
.btn-sm{ padding:.62em 1.25em; min-height:42px; font-size:.9rem; }
.btn-block{ width:100%; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--header-bg);
  backdrop-filter:blur(16px) saturate(1.6); -webkit-backdrop-filter:blur(16px) saturate(1.6);
  border-bottom:1px solid var(--line); transition:box-shadow .25s ease;
}
.site-header.scrolled{ box-shadow:0 8px 26px rgba(5,48,46,.10); }
.header-in{ display:flex; align-items:center; gap:clamp(14px,3vw,40px); padding-block:12px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto; }
.logo-mark{ width:36px; height:36px; }
.logo-text{ display:flex; flex-direction:column; line-height:1; }
.logo-text b{ font-family:var(--display); font-weight:800; font-size:1.18rem; color:var(--ink); letter-spacing:-.035em; }
.logo-text span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:4px; }
.main-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }
.main-nav a:not(.btn){
  font-family:var(--display); font-weight:600; font-size:.9375rem; color:var(--body); text-decoration:none;
  padding:.55em .95em; border-radius:100px; transition:background .16s ease,color .16s ease;
}
.main-nav a:not(.btn):hover{ color:var(--ink); background:var(--bg-alt); }
.main-nav a.active{ color:var(--brand-text); background:var(--tint); }
.nav-cta{ margin-left:8px; }
.icon-btn{
  width:42px; height:42px; border-radius:50%; display:none; place-items:center; cursor:pointer; padding:0; margin-left:6px;
  background:var(--surface); color:var(--ink); border:1.5px solid var(--line); transition:border-color .2s ease,transform .25s var(--ease);
}
.icon-btn:hover{ border-color:var(--brand); }
.theme-btn{ display:grid; color:var(--brand-text); }
.theme-btn:hover{ transform:rotate(-18deg) scale(1.06); }
.theme-btn .ico{ width:19px; height:19px; } .theme-btn .ico-sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .ico-sun{ display:block; }
  :root:not([data-theme="light"]) .theme-btn .ico-moon{ display:none; }
}
:root[data-theme="dark"] .theme-btn .ico-sun{ display:block; }
:root[data-theme="dark"] .theme-btn .ico-moon{ display:none; }
.nav-toggle .ico{ width:20px; height:20px; } .nav-toggle .ico-close{ display:none; }
.nav-toggle[aria-expanded="true"] .ico-close{ display:block; } .nav-toggle[aria-expanded="true"] .ico-menu{ display:none; }
.nav-panel{ display:none; }
@media (max-width:940px){
  .main-nav > a:not(.btn){ display:none; }
  .nav-toggle{ display:grid; }
  .nav-panel{
    display:block; position:absolute; left:0; right:0; top:100%; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--sh-md); padding:6px clamp(20px,5vw,48px) 16px;
    opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden; transition:opacity .2s ease,transform .2s ease,visibility .2s;
  }
  .nav-panel.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .nav-panel a:not(.btn){ display:block; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); text-decoration:none; padding:15px 4px; border-bottom:1px solid var(--line-2); }
  .nav-panel .btn{ margin-top:14px; width:100%; }
}
@media (max-width:620px){ .nav-cta{ display:none; } .logo-text span{ display:none; } }

/* ---------- HERO (siempre oscuro) ---------- */
.hero{
  position:relative; overflow:hidden; color:#CFE7E3; isolation:isolate;
  background:
    radial-gradient(900px 560px at 88% -8%, rgba(47,187,172,.38), transparent 62%),
    radial-gradient(700px 500px at -5% 105%, rgba(255,176,32,.16), transparent 60%),
    linear-gradient(160deg,#052624 0%,#073B37 55%,#052624 100%);
  padding-block:clamp(44px,6vw,84px) clamp(64px,8vw,120px);
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:56px 56px; mask-image:radial-gradient(720px 460px at 70% 30%,#000,transparent 75%); -webkit-mask-image:radial-gradient(720px 460px at 70% 30%,#000,transparent 75%);
}
.hero .kicker{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#9BEBDD; }
.hero h1{ color:#fff; font-size:clamp(2.35rem,5.2vw,4rem); margin-block:22px 20px; letter-spacing:-.04em; }
.hero .lead{ color:#BFD9D5; font-size:clamp(1.05rem,1.6vw,1.25rem); }
.hero .lead b{ color:#fff; }
.hero-in{ display:grid; grid-template-columns:1fr 1.02fr; gap:clamp(30px,4.5vw,64px); align-items:center; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:28px; }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:.9375rem; color:#A9CBC6; }
.hero-trust .ico{ width:17px; height:17px; stroke-width:2.6; color:#5ED3C0; }
.crumb{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.8125rem; color:#8FB5B0; margin-bottom:22px; }
.crumb a{ color:#8FB5B0; text-decoration:none; } .crumb a:hover{ color:#fff; } .crumb svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

/* marco de producto */
.hero-art{ position:relative; padding:0 0 28px 0; }
.frame{
  position:relative; border-radius:18px; background:#0B2B29; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04) inset; overflow:hidden;
  transform:perspective(1600px) rotateY(-6deg) rotateX(2deg); transition:transform .6s var(--ease);
}
.hero-art:hover .frame{ transform:perspective(1600px) rotateY(-2deg) rotateX(1deg); }
.frame-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.08); }
.frame-bar i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.22); }
.frame-bar span{ margin-left:10px; flex:1; max-width:260px; font-family:var(--mono); font-size:.68rem; color:#8FB5B0; background:rgba(255,255,255,.06); padding:.3em .9em; border-radius:100px; }
.frame img{ display:block; width:100%; height:auto; }
.frame.light{ background:var(--surface); border-color:var(--line); box-shadow:var(--sh-lg); transform:none; }
.frame.light .frame-bar{ background:var(--surface-2); border-bottom-color:var(--line); }
.frame.light .frame-bar i{ background:var(--line); } .frame.light .frame-bar span{ background:var(--bg-alt); color:var(--muted); }
.float{
  position:absolute; z-index:3; background:rgba(255,255,255,.96); color:#0A2523; border-radius:16px;
  box-shadow:0 20px 44px rgba(0,0,0,.35); padding:12px 16px; display:flex; align-items:center; gap:12px;
  font-family:var(--display); animation:floaty 7s ease-in-out infinite;
}
.float .fi{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:#E3F6F3; color:#0A6560; flex:0 0 auto; }
.float .fi.warn{ background:#FFF1D1; color:#8A5A00; }
.float small{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:#587471; }
.float b{ font-size:1rem; letter-spacing:-.02em; }
.float.f1{ left:-4%; bottom:4%; } .float.f2{ right:-2%; top:9%; animation-delay:-3s; } .float.f3{ right:6%; bottom:-2%; animation-delay:-5s; }
.float-panel{ position:absolute; z-index:2; width:38%; right:-3%; bottom:-6%; border-radius:14px; overflow:hidden; box-shadow:0 26px 60px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.18); animation:floaty 9s ease-in-out -2s infinite; }
.float-panel img{ display:block; width:100%; height:auto; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; }
  .hero-art{ max-width:640px; margin-inline:auto; width:100%; }
  .frame{ transform:none; } .float.f1{ left:2%; } .float.f2{ right:2%; }
}
@media (max-width:560px){ .float.f3,.float-panel{ display:none; } .float{ padding:9px 12px; } .float .fi{ width:32px; height:32px; } .hero-btns .btn{ flex:1 1 100%; } }
.hero-wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(28px,4vw,56px); color:var(--bg); display:block; }

/* ---------- franja de datos ---------- */
.stats{ position:relative; z-index:2; margin-top:calc(-1 * clamp(28px,4vw,44px)); }
.stats-in{
  display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--sh-md); overflow:hidden;
}
.stat{ padding:22px 24px; border-right:1px solid var(--line); }
.stat:last-child{ border-right:none; }
.stat b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(1.5rem,2.6vw,2rem); color:var(--ink); letter-spacing:-.04em; line-height:1.1; }
.stat span{ font-size:.875rem; color:var(--muted); }
@media (max-width:860px){ .stats-in{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(2){ border-right:none; } .stat:nth-child(-n+2){ border-bottom:1px solid var(--line); } }

/* ---------- secciones ---------- */
.section{ padding-block:clamp(60px,8vw,108px); }
.section.alt{ background:var(--bg-alt); border-block:1px solid var(--line); }
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,60px); }
.sec-head.center{ text-align:center; margin-inline:auto; }
.sec-head.center .lead{ margin-inline:auto; }
.sec-head h2{ font-size:clamp(1.9rem,3.8vw,2.8rem); margin-block:18px 14px; }

/* ---------- problema → solución ---------- */
.pains{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.pain{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-xs); display:flex; flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease; }
.pain:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--tint-2); }
.pain-before{ padding:22px 22px 18px; background:var(--bad-bg); border-bottom:1px dashed var(--line); flex:1; }
.pain-k{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--bad); display:flex; align-items:center; gap:.6em; }
.pain-k::before{ content:"✕"; display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--bad); color:#fff; font-size:.62rem; }
.pain h3{ font-size:1.15rem; margin-block:12px 6px; }
.pain-before p{ font-size:.9375rem; }
.pain-after{ padding:18px 22px 22px; }
.pain-after .k{ font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ok); display:flex; align-items:center; gap:.6em; margin-bottom:8px; }
.pain-after .k .ico{ width:20px; height:20px; padding:4px; border-radius:50%; background:var(--ok); color:#fff; stroke-width:3; }
.pain-after p{ font-size:.9375rem; color:var(--ink); font-weight:500; }
@media (max-width:1020px){ .pains{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .pains{ grid-template-columns:1fr; } }

/* ---------- tour del producto (tabs) ---------- */
.tour{ display:grid; grid-template-columns:.8fr 1.5fr; gap:clamp(24px,4vw,56px); align-items:start; }
.tabs{ display:grid; gap:10px; }
.tab{
  text-align:left; cursor:pointer; background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; gap:14px; align-items:flex-start; color:var(--body);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s var(--ease),background .2s ease;
}
.tab:hover{ border-color:var(--brand); transform:translateX(4px); }
.tab[aria-selected="true"]{ border-color:var(--brand); box-shadow:var(--sh-md); background:var(--surface); }
.tab .ti{ width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--tint); color:var(--brand-text); flex:0 0 auto; transition:background .2s ease,color .2s ease; }
.tab[aria-selected="true"] .ti{ background:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; }
.tab b{ display:block; font-family:var(--display); font-size:1.02rem; color:var(--ink); letter-spacing:-.02em; }
.tab span{ font-size:.875rem; line-height:1.45; display:block; margin-top:2px; }
.tour-stage{ position:sticky; top:96px; }
.tour-panel[hidden]{ display:none; }
.tour-panel .frame{ animation:panelIn .45s var(--ease); }
@keyframes panelIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
.tour-cap{ margin-top:14px; font-family:var(--mono); font-size:.75rem; color:var(--muted); text-align:center; letter-spacing:.04em; }
@media (max-width:920px){
  .tour{ grid-template-columns:1fr; }
  .tabs{ display:flex; overflow-x:auto; gap:10px; scroll-snap-type:x mandatory; padding-bottom:6px; margin-inline:-20px; padding-inline:20px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; scroll-snap-align:start; padding:12px 16px; align-items:center; }
  .tab span{ display:none; } .tab .ti{ width:36px; height:36px; border-radius:10px; } .tab:hover{ transform:none; }
  .tour-stage{ position:static; }
}

/* ---------- bento: 3 momentos ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.bento-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(22px,2.6vw,32px); box-shadow:var(--sh-sm); display:flex; flex-direction:column; gap:14px; overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s ease; }
.bento-card:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.bento-card.b1{ grid-column:span 3; } .bento-card.b2{ grid-column:span 3; } .bento-card.b3{ grid-column:span 6; display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,48px); align-items:center; }
.bento-card.dark{ background:linear-gradient(155deg,#073B37,#052624); border-color:rgba(255,255,255,.1); color:#BFD9D5; }
.bento-card.dark h3{ color:#fff; } .bento-card.dark .hi{ color:#7BE9D8; } .bento-card.dark .kicker{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#9BEBDD; }
.bento-card h3{ font-size:clamp(1.25rem,2vw,1.6rem); } .bento-card > p, .bento-txt > p{ font-size:.9688rem; }
.bento-list{ display:grid; gap:8px; margin-top:4px; }
.bento-list li{ display:flex; gap:10px; font-size:.9375rem; align-items:flex-start; }
.bento-list .ico{ width:17px; height:17px; stroke-width:2.6; color:var(--brand); margin-top:.3em; }
.dark .bento-list .ico{ color:#7BE9D8; }
.chat{ display:grid; gap:10px; margin-top:auto; background:var(--bg-alt); border-radius:var(--r); padding:16px; border:1px solid var(--line); }
.chat-bubble{ max-width:88%; padding:11px 15px; border-radius:16px 16px 16px 5px; background:#DCF8C6; color:#10281F; font-size:.9rem; line-height:1.45; box-shadow:var(--sh-xs); }
.chat-bubble b{ display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.04em; margin-bottom:3px; opacity:.7; }
.chat-bubble.out{ justify-self:end; background:#fff; border-radius:16px 16px 5px 16px; }
.chat-time{ display:block; text-align:right; font-family:var(--mono); font-size:.62rem; opacity:.55; margin-top:4px; }
.fig-lab{ font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.dark .fig-lab{ color:#8FB5B0; }
.ledger{ display:grid; gap:0; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r); overflow:hidden; }
.led{ display:flex; justify-content:space-between; gap:12px; padding:15px 18px; font-family:var(--mono); font-size:.9rem; color:#CFE7E3; border-bottom:1px solid rgba(255,255,255,.08); }
.led.neg span:last-child{ color:#FFA58A; }
.led.tot{ background:rgba(94,211,192,.14); color:#fff; font-weight:600; font-size:1.05rem; border-bottom:none; }
.led.tot span:last-child{ color:#7BE9D8; }
.led-note{ display:flex; gap:10px; align-items:center; margin-top:14px; font-size:.875rem; color:#9BC5BF; }
.led-note .ico{ width:18px; height:18px; color:#7BE9D8; }
@media (max-width:860px){ .bento-card.b1,.bento-card.b2{ grid-column:span 6; } .bento-card.b3{ grid-template-columns:1fr; } }

/* ---------- funciones ---------- */
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; transition:transform .22s var(--ease),box-shadow .22s ease,border-color .22s ease; }
.feat:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); border-color:var(--tint-2); }
.feat h3{ font-size:1.12rem; margin-block:16px 6px; } .feat p{ font-size:.9375rem; }
.ico-badge{ width:50px; height:50px; border-radius:15px; display:grid; place-items:center; flex:0 0 auto; background:var(--tint); color:var(--brand-text); border:1px solid var(--tint-2); }
.ico-badge.solid{ background:linear-gradient(150deg,#1FB5A7,var(--brand-x)); color:#fff; border-color:transparent; box-shadow:0 10px 22px rgba(12,129,122,.26); }
@media (max-width:900px){ .feat-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .feat-grid{ grid-template-columns:1fr; } }

/* ---------- ROI ---------- */
.roi{
  position:relative; overflow:hidden; border-radius:var(--r-xl); color:#CFE7E3; padding:clamp(28px,5vw,56px);
  background:radial-gradient(600px 300px at 100% 0%,rgba(255,176,32,.22),transparent 60%),linear-gradient(150deg,#083734,#052624);
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px,4vw,56px); align-items:center; box-shadow:var(--sh-lg);
}
.roi h2{ color:#fff; font-size:clamp(1.7rem,3.3vw,2.5rem); margin-bottom:14px; } .roi p{ color:#BFD9D5; } .roi .hi{ color:#FFD27A; }
.roi-eq{ display:grid; gap:12px; }
.roi-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:16px 20px; backdrop-filter:blur(8px); }
.roi-row span{ font-size:.95rem; color:#CFE7E3; } .roi-row b{ font-family:var(--display); font-size:1.4rem; color:#fff; letter-spacing:-.03em; white-space:nowrap; }
.roi-row.win{ background:var(--accent); border-color:transparent; } .roi-row.win span,.roi-row.win b{ color:var(--on-accent); }
.roi-fine{ font-size:.78rem; color:#8FB5B0 !important; margin-top:4px; }
@media (max-width:860px){ .roi{ grid-template-columns:1fr; } }

/* ---------- precio ---------- */
.price-card{ display:grid; grid-template-columns:1fr 1fr; max-width:980px; margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-lg); }
.price-main{ padding:clamp(26px,3.6vw,44px); background:linear-gradient(165deg,#083734,#052624); color:#CFE7E3; position:relative; }
.price-main::before{ content:""; position:absolute; inset:0; background:radial-gradient(420px 220px at 100% 0%,rgba(47,187,172,.3),transparent 70%); pointer-events:none; }
.price-main > *{ position:relative; }
.price-plan{ font-family:var(--mono); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#7BE9D8; }
.price-ribbon{ display:flex; gap:10px; align-items:center; margin-top:14px; background:rgba(255,176,32,.14); border:1px solid rgba(255,176,32,.4); color:#FFD27A; border-radius:12px; padding:10px 14px; font-size:.875rem; font-weight:600; }
.price-ribbon .ico{ width:18px; height:18px; stroke-width:2.6; }
.price-step{ padding-block:22px; border-bottom:1px dashed rgba(255,255,255,.18); }
.price-when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8FB5B0; }
.price-amount{ display:flex; align-items:baseline; gap:10px; margin-block:8px; }
.price-amount b{ font-family:var(--display); font-weight:800; font-size:clamp(2.4rem,5.4vw,3.3rem); color:#fff; letter-spacing:-.05em; line-height:1; }
.price-per{ font-family:var(--mono); font-size:.8rem; color:#9BEBDD; }
.price-step p{ font-size:.9375rem; color:#BFD9D5; } .price-step .hi{ color:#FFD27A; }
.price-plus{ display:none; }
.price-main .btn{ margin-top:26px; }
.price-note{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:#8FB5B0; text-align:center; margin-top:12px; }
.price-side{ padding:clamp(26px,3.6vw,44px); }
.price-side h3{ font-size:1.2rem; margin-bottom:18px; }
.price-list{ display:grid; gap:12px; }
.price-list li{ display:flex; gap:11px; font-size:.9688rem; align-items:flex-start; }
.price-list .ico{ width:20px; height:20px; padding:4px; border-radius:50%; background:var(--tint); color:var(--brand-text); stroke-width:3; margin-top:.15em; }
@media (max-width:840px){ .price-card{ grid-template-columns:1fr; } }

/* ---------- pasos ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; counter-reset:s; }
.step{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; box-shadow:var(--sh-xs); overflow:hidden; }
.step-n{ font-family:var(--display); font-weight:800; font-size:3.4rem; line-height:1; letter-spacing:-.06em; color:var(--tint-2); position:absolute; right:14px; top:8px; }
.step h3{ font-size:1.1rem; margin-bottom:6px; position:relative; margin-top:34px; } .step p{ font-size:.9375rem; position:relative; }
.step::after{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--brand),transparent); opacity:.7; }
@media (max-width:900px){ .steps{ grid-template-columns:repeat(2,1fr); } } @media (max-width:520px){ .steps{ grid-template-columns:1fr; } }

/* ---------- sistemas (index) ---------- */
.sys-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.sys-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:0 26px 26px; box-shadow:var(--sh-sm); overflow:hidden; display:flex; flex-direction:column; transition:transform .25s var(--ease),box-shadow .25s ease,border-color .25s ease; }
.sys-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); border-color:var(--tint-2); }
.sys-card.featured{ border-color:var(--brand); box-shadow:var(--sh-md); }
.sys-photo{ display:block; width:calc(100% + 52px); max-width:none; height:170px; object-fit:cover; margin:0 -26px 20px; background:var(--tint); transition:transform .9s var(--ease),filter .3s ease; }
.sys-card:hover .sys-photo{ transform:scale(1.05); }
.sys-card.dev .sys-photo{ filter:saturate(.8); } .sys-card.soon .sys-photo{ filter:grayscale(.75) saturate(.6); }
.sys-card:hover.dev .sys-photo,.sys-card:hover.soon .sys-photo{ filter:none; }
.sys-card.soon{ background:var(--surface-2); }
.sys-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:16px; }
.tag{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:.5em .9em; border-radius:100px; white-space:nowrap; }
.tag-live{ background:var(--accent); color:var(--on-accent); } .tag-dev{ background:var(--tint); color:var(--brand-text); } .tag-soon{ background:var(--line-2); color:var(--muted); }
.sys-card h3{ font-size:1.35rem; margin-bottom:4px; }
.sys-sub{ font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-text); margin-bottom:12px; }
.sys-card > p{ font-size:.9688rem; }
.sys-list{ margin-block:16px 4px; display:grid; gap:8px; }
.sys-list li{ display:flex; gap:9px; font-size:.9188rem; align-items:flex-start; }
.sys-list .ico{ width:16px; height:16px; stroke-width:2.6; color:var(--brand); margin-top:.35em; }
.sys-card .btn{ margin-top:auto; width:100%; } .sys-card .sys-list{ margin-bottom:22px; }
@media (max-width:900px){ .sys-grid{ grid-template-columns:1fr; } }
.ask-strip{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; background:var(--surface); border:1.5px dashed var(--brand); border-radius:var(--r); padding:18px 22px; }
.ask-strip p{ flex:1 1 260px; font-size:.9688rem; }

/* ---------- por qué (index) ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.why{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px; transition:transform .22s var(--ease),box-shadow .22s ease; }
.why:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); }
.why h3{ font-size:1.08rem; margin-block:16px 8px; } .why p{ font-size:.9375rem; }
@media (max-width:940px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; display:grid; gap:12px; }
.faq details{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s ease,box-shadow .2s ease; }
.faq details[open]{ border-color:var(--brand); box-shadow:var(--sh-sm); }
.faq summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); letter-spacing:-.015em; min-height:56px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--brand-text); display:grid; place-items:center; flex:0 0 auto; transition:transform .3s var(--ease),background .2s ease; }
.faq summary .pm .ico{ width:15px; height:15px; stroke-width:2.6; }
.faq details[open] summary .pm{ transform:rotate(45deg); background:var(--brand); color:#fff; }
.faq .ans{ padding:0 22px 20px; font-size:.9875rem; max-width:68ch; }

/* ---------- CTA final ---------- */
.cta-band{
  position:relative; overflow:hidden; color:#fff; text-align:center; padding-block:clamp(56px,8vw,104px);
  background:radial-gradient(700px 380px at 15% 0%,rgba(47,187,172,.4),transparent 60%),radial-gradient(600px 360px at 90% 100%,rgba(255,176,32,.22),transparent 60%),linear-gradient(160deg,#052624,#073B37);
}
.cta-band::before{ content:""; position:absolute; inset:0; opacity:.5; background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px); background-size:26px 26px; mask-image:radial-gradient(640px 300px at 50% 0%,#000,transparent 75%); -webkit-mask-image:radial-gradient(640px 300px at 50% 0%,#000,transparent 75%); }
.cta-in{ position:relative; }
.cta-in h2{ color:#fff; font-size:clamp(2rem,4.4vw,3.2rem); margin-bottom:16px; }
.cta-in p{ color:#BFD9D5; font-size:1.125rem; max-width:52ch; margin-inline:auto; }
.cta-btns{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.cta-fine{ margin-top:18px; font-family:var(--mono); font-size:.75rem; letter-spacing:.06em; color:#8FB5B0 !important; }
@media (max-width:620px){ .cta-btns .btn{ flex:1 1 100%; } }

/* ---------- contacto ---------- */
.contact-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(28px,4.5vw,64px); align-items:start; }
.contact-grid h2{ font-size:clamp(1.8rem,3.6vw,2.6rem); margin-block:18px 14px; }
.reach{ display:grid; gap:12px; margin-top:28px; }
.reach a{ display:flex; align-items:center; gap:16px; text-decoration:none; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; transition:transform .2s var(--ease),box-shadow .2s ease,border-color .2s ease; }
.reach a:hover{ transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:var(--brand); }
.reach-txt{ display:flex; flex-direction:column; min-width:0; } .reach-txt b{ font-family:var(--display); font-size:1.05rem; color:var(--ink); overflow-wrap:anywhere; } .reach-txt span{ font-size:.875rem; color:var(--muted); }
.reach .ico-badge{ width:46px; height:46px; }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); padding:clamp(24px,3.6vw,40px); box-shadow:var(--sh-lg); position:relative; }
.form-card::before{ content:""; position:absolute; left:32px; right:32px; top:0; height:4px; border-radius:0 0 6px 6px; background:linear-gradient(90deg,var(--accent),var(--brand)); }
.form-card h3{ font-size:1.4rem; margin-bottom:6px; } .form-card > p{ font-size:.9688rem; margin-bottom:24px; }
.f-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:7px; margin-bottom:16px; min-width:0; }
label{ font-family:var(--mono); font-size:.75rem; font-weight:600; letter-spacing:.02em; color:var(--ink); }
input,select,textarea{ font-family:var(--text); font-size:1rem; color:var(--ink); background:var(--surface-2); border:1.5px solid var(--line); border-radius:12px; padding:.85em .95em; min-height:48px; width:100%; transition:border-color .16s ease,background .16s ease,box-shadow .16s ease; }
input::placeholder,textarea::placeholder{ color:var(--muted); opacity:.75; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brand); background:var(--surface); box-shadow:0 0 0 4px var(--tint); }
textarea{ resize:vertical; min-height:92px; line-height:1.55; }
.field.bad input,.field.bad select{ border-color:var(--bad); background:var(--bad-bg); }
.err{ font-family:var(--display); font-size:.8125rem; font-weight:600; color:var(--bad); display:none; } .field.bad .err{ display:block; }
.f-note{ font-size:.8438rem; color:var(--muted); margin-top:14px; text-align:center; }
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } } @media (max-width:560px){ .f-row{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.site-footer{ background:#041B1A; color:rgba(255,255,255,.72); padding-block:52px 32px; }
.footer-in{ display:flex; flex-wrap:wrap; gap:30px 48px; justify-content:space-between; }
.site-footer .logo-text b{ color:#fff; } .site-footer .logo-text span{ color:rgba(255,255,255,.5); }
.site-footer p{ font-size:.9375rem; max-width:36ch; color:rgba(255,255,255,.62); margin-top:14px; }
.footer-nav{ display:flex; flex-wrap:wrap; gap:10px 26px; align-content:flex-start; }
.footer-nav a{ font-family:var(--display); font-weight:600; font-size:.9375rem; color:rgba(255,255,255,.78); text-decoration:none; } .footer-nav a:hover{ color:#fff; }
.footer-bottom{ margin-top:36px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); font-family:var(--mono); font-size:.8125rem; color:rgba(255,255,255,.5); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; }

/* ---------- whatsapp flotante + barra móvil ---------- */
.wa-float{ position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:70; display:inline-flex; align-items:center; gap:10px; background:#25D366; color:#062b14; text-decoration:none; font-family:var(--display); font-weight:700; font-size:.9375rem; padding:.85em 1.3em; min-height:48px; border-radius:100px; box-shadow:0 8px 26px rgba(37,211,102,.45); transition:transform .2s var(--ease),box-shadow .2s ease; }
.wa-float:hover{ transform:translateY(-3px) scale(1.03); }
.wa-float svg{ width:22px; height:22px; fill:currentColor; }
.mobile-bar{ display:none; }
@media (max-width:620px){
  .wa-float{ bottom:84px; padding:.9em; } .wa-float span{ display:none; }
  .mobile-bar{ display:flex; gap:10px; position:fixed; left:0; right:0; bottom:0; z-index:65; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--header-bg); backdrop-filter:blur(14px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .3s var(--ease); }
  .mobile-bar.show{ transform:none; } .mobile-bar .btn{ flex:1; }
  body{ padding-bottom:0; } .site-footer{ padding-bottom:96px; }
}

/* ---------- aparición al hacer scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:calc(var(--d,0)*80ms); }
.reveal.is-in{ opacity:1; transform:none; }
.anim{ animation:fadeUp .8s var(--ease) both; } .d1{ animation-delay:.05s } .d2{ animation-delay:.14s } .d3{ animation-delay:.23s } .d4{ animation-delay:.34s }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@media (max-width:760px){ .site-header{ backdrop-filter:none; background:var(--bg); } .reveal{ transform:translateY(14px); transition-duration:.5s; } }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; } .anim,.float,.float-panel,.kicker .dot.pulse,.tour-panel .frame{ animation:none; }
  html{ scroll-behavior:auto; } .btn:hover,.pain:hover,.feat:hover,.why:hover,.sys-card:hover,.bento-card:hover,.reach a:hover,.tab:hover{ transform:none; }
  .frame{ transform:none; transition:none; }
}