/* =========================================================
   CODESPOT — estilos globales (tema claro)
   Base: blanco / gris claro / azul marino · Acento: teal de marca
   Tipografía: Montserrat (títulos) + Open Sans (texto)
   ========================================================= */
:root{
  /* Acento de marca — cambia estos 4 valores para otro color */
  --c1:#009B93;          /* principal (botones, enlaces) */
  --c1-dark:#007A74;     /* hover */
  --c1-on-dark:#4FD8CC;  /* acento sobre fondos oscuros */
  --soft:#E3F4F2;        /* fondo suave de iconos y etiquetas */

  --navy:#1E293B; --navy-2:#162032;
  --bg:#FFFFFF; --bg2:#F1F5F9;
  --card:#FFFFFF; --line:#E2E8F0; --line2:#CBD5E1;
  --text:#1E293B; --muted:#64748B; --wa:#25D366;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -12px rgba(15,23,42,.12);
  --shadow-lg:0 2px 4px rgba(15,23,42,.04),0 20px 44px -18px rgba(15,23,42,.22);
  --r:16px; --r-lg:22px;
  --ff-h:"Montserrat",system-ui,sans-serif;
  --ff-b:"Open Sans",system-ui,sans-serif;
  --ff-m:"Open Sans",system-ui,sans-serif;
  --ff-logo:"Michroma","Montserrat",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:var(--ff-b);background:var(--bg);color:var(--text);line-height:1.65;font-size:16px;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--soft);color:var(--c1-dark)}
.container{width:min(1160px,100% - 32px);margin-inline:auto}
.narrow{width:min(820px,100% - 32px);margin-inline:auto}
section{padding:90px 0;position:relative}
.sec-alt{background:var(--bg2)}
.teal,.grad-text{color:var(--c1)}
.mono{font-family:var(--ff-m)}

/* ---------- Títulos de sección ---------- */
.eyebrow{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c1);margin-bottom:12px}
h1,h2,h3,h4{font-family:var(--ff-h);letter-spacing:-.01em;line-height:1.2;color:var(--text);font-weight:700}
.h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:14px}
.lead{color:var(--muted);font-size:1.04rem;max-width:640px}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center}
.sec-head.center .h2,.sec-head.center .lead{margin-inline:auto;max-width:680px}
.sec-head.split{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.sec-head.split .h2{max-width:640px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:999px;font-family:var(--ff-h);font-weight:600;font-size:.92rem;border:1.5px solid transparent;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s;white-space:nowrap}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--c1);color:#fff}
.btn-primary:hover{background:var(--c1-dark);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--text);background:#fff}
.btn-ghost:hover{border-color:var(--c1);color:var(--c1)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1EBE59;transform:translateY(-1px)}
.btn-sm{padding:10px 18px;font-size:.86rem}
.link-arrow{display:inline-flex;align-items:center;gap:6px;color:var(--c1);font-weight:600;font-size:.9rem}
.link-arrow span{transition:transform .2s}
.link-arrow:hover span{transform:translateX(3px)}

/* Botones sobre fondo oscuro */
.hero .btn-ghost,.page-hero .btn-ghost,.band-box .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover,.band-box .btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff}

/* ---------- Barra superior ---------- */
.topbar{background:var(--navy-2);font-size:.8rem;color:#CBD5E1}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:36px;gap:20px}
.topbar a:hover{color:#fff}
.topbar .tb-left{display:flex;gap:22px}
.topbar .tb-left span{display:inline-flex;align-items:center;gap:7px}
.topbar .dot{width:7px;height:7px;border-radius:50%;background:var(--c1-on-dark)}

/* ---------- Header / Nav ---------- */
.header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.header.scrolled{box-shadow:0 6px 20px -12px rgba(15,23,42,.18)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:11px;flex:none}
.brand img{width:42px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,155,147,.25))}
.brand-word{font-family:var(--ff-logo);font-size:.95rem;letter-spacing:.26em;line-height:1;color:var(--navy)}
.brand-word b{font-weight:400;color:var(--c1)}
.brand-word small{display:block;font-family:var(--ff-b);font-weight:600;font-size:.58rem;letter-spacing:.18em;color:var(--muted);margin-top:6px}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu > li{position:relative}
.menu > li > a{display:flex;align-items:center;gap:5px;padding:10px 12px;border-radius:8px;color:var(--text);font-weight:500;font-size:.92rem;transition:color .2s;white-space:nowrap}
.menu > li > a:hover,.menu > li > a.active{color:var(--c1)}
.menu > li > a.active{font-weight:600}
.menu .chev{width:10px;height:10px;transition:transform .25s}
.has-mega:hover .chev{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,8px);background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;opacity:0;visibility:hidden;transition:.22s;box-shadow:var(--shadow-lg);display:grid;gap:18px}
.mega::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px}
.has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mega.w2{grid-template-columns:1fr 1fr;width:700px}
.mega.w1{grid-template-columns:1fr 1fr;width:540px}
.mega h6{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 10px}
.mega a{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;transition:background .2s}
.mega a:hover{background:var(--bg2)}
.mega a .mi{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--c1)}
.mega a .mi svg{width:17px;height:17px}
.mega a b{display:block;font-family:var(--ff-h);font-weight:600;font-size:.88rem}
.mega a small{display:block;color:var(--muted);font-size:.78rem;line-height:1.4}
.menu .m-cta{display:none}
.nav-cta{display:flex;align-items:center;gap:10px}
.burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--text);align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:.3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.nav-open .burger span{background:transparent}
.nav-open .burger span::before{top:0;transform:rotate(45deg)}
.nav-open .burger span::after{top:0;transform:rotate(-45deg)}

/* ---------- Portada (fondo azul marino) ---------- */
.hero{background:var(--navy);color:#fff;padding:80px 0 90px;overflow:hidden}
.hero h1,.hero h2,.hero h3,.page-hero h1,.page-hero h2,.page-hero h3{color:#fff}
.hero .teal,.hero .grad-text,.page-hero .teal,.page-hero .grad-text{color:var(--c1-on-dark)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;color:var(--c1-dark);font-size:.8rem;font-weight:600;margin-bottom:24px}
.badge b{background:var(--soft);color:var(--c1-dark);padding:3px 10px;border-radius:999px;font-size:.7rem;letter-spacing:.06em}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.3rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:20px}
.hero h1 .line{display:block}
.hero .sub{color:#E2E8F0;font-size:1.05rem;max-width:540px;margin-bottom:32px}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}
.hero-price{display:flex;gap:24px;flex-wrap:wrap;color:#CBD5E1;font-size:.88rem}
.hero-price div{display:flex;align-items:center;gap:8px}
.hero-price b{color:#fff;font-family:var(--ff-h);font-size:1.15rem}
.hero-price .sep{width:1px;height:30px;background:rgba(255,255,255,.2)}

.hero-visual{position:relative;height:440px}
.browser{position:absolute;left:0;top:10px;width:88%;border-radius:14px;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.55);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:#F1F5F9;border-bottom:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#CBD5E1}
.browser-bar i:nth-child(1){background:#FF5F57}.browser-bar i:nth-child(2){background:#FEBC2E}.browser-bar i:nth-child(3){background:#28C840}
.browser-bar span{margin-left:10px;flex:1;font-size:.72rem;color:var(--muted);background:#fff;padding:4px 10px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone{position:absolute;right:0;bottom:0;width:170px;border-radius:26px;padding:7px;background:#0F172A;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.phone img{border-radius:20px}

/* ---------- Franja de cifras ---------- */
.stats{background:var(--navy);padding:0;border-top:1px solid rgba(255,255,255,.08)}
.stats-box{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 20px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.stat .ic{grid-row:span 2;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(79,216,204,.12);color:var(--c1-on-dark)}
.stat .ic svg{width:22px;height:22px}
.stat b{font-family:var(--ff-h);font-size:1.45rem;color:#fff;line-height:1.1}
.stat b.grad-text{color:#fff}
.stat span:not(.ic){color:#CBD5E1;font-size:.85rem}
/* Cifras sobre fondo claro (páginas interiores) */
section:not(.stats) .stats-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
section:not(.stats) .stat{display:block;text-align:center;padding:30px 20px}
section:not(.stats) .stat + .stat{border-left:1px solid var(--line)}
section:not(.stats) .stat b,section:not(.stats) .stat b.grad-text{color:var(--c1);font-size:2rem;display:block}
section:not(.stats) .stat span{color:var(--muted)}

/* ---------- Logos de clientes ---------- */
.logos{padding:56px 0;background:#fff;border-bottom:1px solid var(--line)}
.logos p{text-align:center;color:var(--muted);font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:26px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee-track{display:flex;gap:64px;width:max-content;animation:marquee 45s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track img{height:44px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.3s;border-radius:6px}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Dos pilares ---------- */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pillar{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.pillar:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.pillar .ph{aspect-ratio:16/8;overflow:hidden}
.pillar .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.pillar:hover .ph img{transform:scale(1.03)}
.pillar .pb{padding:28px 30px 30px;flex:1;display:flex;flex-direction:column}
.pillar .tag{margin-bottom:12px}
.pillar h3{font-size:1.35rem;margin-bottom:8px}
.pillar p{color:var(--muted);margin-bottom:18px}
.pillar ul{list-style:none;display:grid;gap:9px;margin-bottom:22px}
.pillar .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.88rem}

.checks{list-style:none;display:grid;gap:10px}
.checks li{display:flex;gap:11px;align-items:flex-start;color:#334155;font-size:.95rem}
.checks li::before{content:"";flex:none;margin-top:3px;width:18px;height:18px;border-radius:50%;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23009B93' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/11px no-repeat}
.checks.x li::before{background:#FEE2E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DC2626' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/10px no-repeat}
.checks li.off{color:var(--muted);text-decoration:line-through;opacity:.8}
.checks li.off::before{background:var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/10px no-repeat}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--soft);color:var(--c1-dark);width:max-content}
.tag.gray{background:var(--bg2);color:var(--muted)}

/* ---------- Tarjetas ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{position:relative;border-radius:var(--r);background:#fff;border:1px solid var(--line);padding:26px;transition:box-shadow .3s,transform .3s,border-color .3s}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c1);margin-bottom:18px}
.card .ic svg{width:22px;height:22px}
.card h3{font-size:1.08rem;margin-bottom:8px}
.card p{color:var(--muted);font-size:.93rem}
.card .link-arrow{margin-top:16px}

.icard{display:flex;flex-direction:column;border-radius:var(--r);background:#fff;border:1px solid var(--line);overflow:hidden;transition:box-shadow .3s,transform .3s}
.icard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.icard .im{aspect-ratio:16/10;overflow:hidden;position:relative;background:var(--bg2)}
.icard .im img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.icard:hover .im img{transform:scale(1.04)}
.icard .im .tag{position:absolute;left:14px;top:14px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.12)}
.icard .bd{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1}
.icard h3{font-size:1.08rem;margin-bottom:6px}
.icard p{color:var(--muted);font-size:.92rem;margin-bottom:14px}
.icard .meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.icard .price{font-family:var(--ff-h);font-weight:700;font-size:.95rem}
.icard .price small{color:var(--muted);font-weight:400;font-family:var(--ff-b);font-size:.76rem}

/* ---------- Torre de Control ---------- */
.spot{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
.steps-v{display:grid;gap:6px;margin:24px 0 30px}
.step-v{display:flex;gap:16px;padding:16px;border-radius:14px;border:1px solid transparent;transition:.3s}
.step-v:hover,.step-v.on{border-color:var(--line);background:#fff;box-shadow:var(--shadow)}
.step-v .n{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-h);font-weight:700;font-size:.8rem;color:var(--c1);border:1.5px solid var(--c1);background:#fff}
.step-v h4{font-size:1rem;margin-bottom:3px}
.step-v p{color:var(--muted);font-size:.92rem}
.spot-visual{position:relative}
.spot-visual .browser{position:relative;top:0;width:100%;box-shadow:var(--shadow-lg);border-color:var(--line)}
.spot-visual .phone{right:-16px;bottom:-34px;width:160px}

/* ---------- Valores ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.value{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff;display:grid;grid-template-columns:auto 1fr;column-gap:16px;transition:box-shadow .3s}
.value:hover{box-shadow:var(--shadow)}
.value .ic{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c1)}
.value .ic svg{width:21px;height:21px}
.value h4{font-size:1rem;margin-bottom:4px}
.value p{color:var(--muted);font-size:.9rem}

/* ---------- Rubros ---------- */
.rubro-card{border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:26px;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.rubro-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.rubro-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c1);margin-bottom:16px}
.rubro-card .ic svg{width:21px;height:21px}
.rubro-card h3{font-size:1.1rem;margin-bottom:4px}
.rubro-card .sub{color:var(--c1);font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.rubro-card blockquote{color:var(--muted);font-style:italic;font-size:.9rem;border-left:2px solid var(--line2);padding-left:12px;margin:8px 0 16px}
.rubro-card .link-arrow{margin-top:auto}

/* ---------- Proceso ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.process::before{content:"";position:absolute;top:24px;left:12%;right:12%;height:1px;background:var(--line2)}
.pstep{position:relative;text-align:center;padding:0 8px}
.pstep .n{width:50px;height:50px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-family:var(--ff-h);font-weight:700;font-size:.9rem;color:var(--c1);background:#fff;border:1.5px solid var(--c1);position:relative;z-index:1}
.pstep h4{font-size:1.02rem;margin-bottom:6px}
.pstep p{color:var(--muted);font-size:.9rem}
.pstep .tag{margin:12px auto 0}

/* ---------- Tecnologías ---------- */
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stack .card h4{font-size:.95rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chips span{font-size:.8rem;padding:6px 11px;border-radius:8px;background:var(--bg2);color:#334155;border:1px solid var(--line)}

/* ---------- Planes ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.plan{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:32px 28px;display:flex;flex-direction:column;transition:box-shadow .3s}
.plan:hover{box-shadow:var(--shadow-lg)}
.plan.pop{border:2px solid var(--c1);box-shadow:var(--shadow-lg)}
.plan .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--c1);color:#fff;font-size:.68rem;letter-spacing:.08em;padding:5px 14px;border-radius:999px;font-weight:700;white-space:nowrap}
.plan .pn{font-size:.72rem;font-weight:600;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}
.plan h3{font-size:1.5rem;margin:4px 0 8px}
.plan .desc{color:var(--muted);font-size:.92rem;min-height:66px}
.plan .amount{display:flex;align-items:baseline;gap:6px;margin:20px 0 4px}
.plan .amount b{font-family:var(--ff-h);font-size:2.6rem;line-height:1;color:var(--text)}
.plan .amount span{color:var(--muted)}
.plan .inst{color:var(--muted);font-size:.86rem;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.plan .inst b{color:var(--text)}
.plan .checks{margin-bottom:26px;font-size:.92rem}
.plan .btn{margin-top:auto;width:100%}
.plan-note{text-align:center;color:var(--muted);font-size:.86rem;margin-top:26px}

/* ---------- Comparativa ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cmp{border-radius:var(--r-lg);border:1px solid var(--line);padding:30px;background:#fff}
.cmp.good{border:2px solid var(--c1)}
.cmp h3{font-size:1.2rem;margin:10px 0 16px}
.cmp .row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);color:#334155;font-size:.95rem}
.cmp .row b{font-family:var(--ff-h);white-space:nowrap}
.cmp .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px}
.cmp .total b{font-family:var(--ff-h);font-size:1.9rem}
.cmp.bad .total b{color:#DC2626}
.cmp.good .total b{color:var(--c1)}
.cmp p{color:var(--muted);font-size:.88rem;margin-top:12px}

/* ---------- Casos ---------- */
.case-card{display:grid;grid-template-columns:1.1fr 1fr;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:#fff;transition:box-shadow .3s}
.case-card:hover{box-shadow:var(--shadow-lg)}
.case-card .cimg{position:relative;overflow:hidden;min-height:320px;background:var(--bg2)}
.case-card .cimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s}
.case-card:hover .cimg img{transform:scale(1.03)}
.case-card .cb{padding:34px;display:flex;flex-direction:column}
.case-card h3{font-size:1.45rem;margin:10px 0 10px}
.case-card p{color:var(--muted);margin-bottom:16px;font-size:.95rem}
.case-card blockquote{border-left:3px solid var(--c1);padding-left:14px;font-style:italic;color:#334155;margin-bottom:20px;font-size:.95rem}
.case-card .btns{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.case-list{display:grid;gap:22px}

.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.filters button{padding:9px 18px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:#334155;font-weight:600;font-size:.88rem;transition:.2s}
.filters button:hover{border-color:var(--c1);color:var(--c1)}
.filters button.on{background:var(--c1);color:#fff;border-color:var(--c1)}
.work{cursor:zoom-in}
.work.hide{display:none}

/* ---------- Testimonios ---------- */
.tcard{border-radius:var(--r);border:1px solid var(--line);background:#fff;padding:28px;display:flex;flex-direction:column;gap:16px;transition:box-shadow .3s}
.tcard:hover{box-shadow:var(--shadow)}
.tcard .stars{color:#F59E0B;letter-spacing:2px;font-size:.95rem}
.tcard q{color:#334155;font-size:.97rem;quotes:"“" "”"}
.tcard .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.tcard .av{width:42px;height:42px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-family:var(--ff-h);font-weight:700;font-size:.85rem;color:var(--c1-dark)}
.tcard .who b{display:block;font-family:var(--ff-h);font-size:.92rem}
.tcard .who small{color:var(--muted);font-size:.82rem}

/* ---------- Preguntas ---------- */
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--ff-h);font-weight:600;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg2);position:relative;transition:.3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--c1);transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:.3s}
.faq details[open] summary i{background:var(--soft)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .ans{padding:0 22px 20px;color:var(--muted);font-size:.95rem}

/* ---------- Banda de llamada a la acción ---------- */
.band{padding:0 0 90px}
.band-box{border-radius:var(--r-lg);padding:52px 56px;display:grid;grid-template-columns:1.4fr auto;gap:36px;align-items:center;background:var(--navy);color:#fff}
.band-box h2{font-size:clamp(1.5rem,2.8vw,2rem);color:#fff}
.band-box .teal{color:var(--c1-on-dark)}
.band-box .tag{background:rgba(79,216,204,.14);color:var(--c1-on-dark)}
.band-box p{color:#CBD5E1;margin-top:10px;max-width:560px}
.band-box .btns{display:flex;flex-direction:column;gap:10px}

/* ---------- Contacto ---------- */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.cinfo{display:grid;gap:12px;margin-top:26px}
.cinfo > *{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:.92rem;color:#334155;transition:box-shadow .3s}
.cinfo a:hover{box-shadow:var(--shadow)}
.cinfo .ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c1)}
.cinfo .ic svg{width:19px;height:19px}
.cinfo small{display:block;color:var(--muted);font-size:.78rem}
.cinfo b{font-family:var(--ff-h);color:var(--text)}
.form{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:16px;box-shadow:var(--shadow-lg)}
.form h3{grid-column:1/-1;font-size:1.3rem}
.field{display:grid;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.84rem;font-weight:600;color:#334155}
.field input,.field select,.field textarea{font:inherit;font-size:.94rem;color:var(--text);background:#fff;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c1);box-shadow:0 0 0 3px var(--soft)}
.field textarea{min-height:110px;resize:vertical}
.form .btn{grid-column:1/-1}
.form .fine{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.8rem}

/* ---------- Test de planes ---------- */
.quiz{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}
.qbox{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;padding:30px}
.qgroup + .qgroup{margin-top:24px}
.qgroup h4{font-size:1rem;margin-bottom:12px}
.qopts{display:flex;flex-wrap:wrap;gap:8px}
.qopts button{padding:9px 14px;border-radius:10px;border:1px solid var(--line2);background:#fff;color:#334155;font-weight:500;font-size:.88rem;transition:.2s}
.qopts button:hover{border-color:var(--c1)}
.qopts button.on{border-color:var(--c1);background:var(--soft);color:var(--c1-dark);font-weight:600}
.qres{position:sticky;top:100px;border-radius:var(--r-lg);border:2px solid var(--c1);background:#fff;padding:30px;box-shadow:var(--shadow-lg)}
.qres h3{font-size:1.4rem;margin:10px 0 6px}
.qres .big{font-family:var(--ff-h);font-size:2rem;font-weight:700;color:var(--c1)}
.qres p{color:var(--muted);margin:10px 0 20px;font-size:.93rem}
.qres .btn{width:100%}

/* ---------- Encabezado de páginas interiores ---------- */
.page-hero{background:var(--navy);color:#fff;padding:64px 0 70px;overflow:hidden}
.crumbs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.82rem;color:#94A3B8;margin-bottom:20px}
.crumbs a:hover{color:#fff}
.crumbs b{color:#E2E8F0;font-weight:600}
.crumbs span{opacity:.6}
.page-hero .eyebrow{color:var(--c1-on-dark)}
.page-hero .tag{background:rgba(79,216,204,.14);color:var(--c1-on-dark)}
.page-hero h1{font-size:clamp(2rem,4vw,2.9rem);line-height:1.15;letter-spacing:-.02em;margin-bottom:16px;max-width:820px}
.page-hero .sub{color:#E2E8F0;font-size:1.04rem;max-width:680px}
.page-hero .chips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#E2E8F0}
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.ph-img{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--bg2)}
.page-hero .ph-img{border-color:rgba(255,255,255,.1);box-shadow:0 30px 60px -20px rgba(0,0,0,.55)}
.ph-img img{width:100%;height:100%;object-fit:cover}
.ph-img.contain img{object-fit:contain;object-position:top;background:#fff}
.price-box{display:inline-flex;flex-wrap:wrap;gap:20px;align-items:center;margin:24px 0 28px;padding:16px 20px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.price-box b{font-family:var(--ff-h);font-size:1.3rem;color:#fff}
.price-box span{color:#CBD5E1!important}
.price-box small{display:block;color:#94A3B8;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.price-box .sep{width:1px;align-self:stretch;background:rgba(255,255,255,.14)}
section:not(.page-hero) .price-box{background:var(--soft);border-color:transparent}
section:not(.page-hero) .price-box b{color:var(--text)}
section:not(.page-hero) .price-box small{color:var(--muted)}

.subnav{position:sticky;top:74px;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.subnav .container{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .container::-webkit-scrollbar{display:none}
.subnav a{padding:14px 14px;font-weight:600;font-size:.86rem;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;transition:.2s}
.subnav a:hover{color:var(--text)}
.subnav a.on{color:var(--c1);border-bottom-color:var(--c1)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split.rev > :first-child{order:2}
.prose p{color:var(--muted);margin-bottom:14px;font-size:1rem}
.prose p b{color:var(--text)}

.feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.feature{display:flex;gap:14px;padding:20px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:box-shadow .3s}
.feature:hover{box-shadow:var(--shadow)}
.feature .ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--soft);color:var(--c1)}
.feature .ic svg{width:19px;height:19px}
.feature h4{font-size:.97rem;margin-bottom:3px}
.feature p{color:var(--muted);font-size:.9rem}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.gallery figure{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff;cursor:zoom-in;transition:box-shadow .3s,transform .3s}
.gallery figure:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.gallery figure .gi{aspect-ratio:4/3;overflow:hidden;background:var(--bg2)}
.gallery img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{padding:14px 16px;font-size:.86rem;color:var(--muted)}
.gallery figcaption b{display:block;color:var(--text);font-family:var(--ff-h);font-size:.93rem;margin-bottom:2px}

.story{display:grid;gap:64px}
.story-step{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.story-step:nth-child(even) .ss-img{order:2}
.ss-img{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff;cursor:zoom-in}
.ss-img img{width:100%}
.ss-n{font-size:.74rem;font-weight:600;letter-spacing:.12em;color:var(--c1);margin-bottom:10px}
.story-step h3{font-size:1.6rem;margin-bottom:12px}
.story-step p{color:var(--muted);font-size:1rem}
.result{border-radius:var(--r-lg);padding:32px;background:var(--soft);display:flex;gap:20px;align-items:flex-start}
.result .ic{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--c1);color:#fff}
.result .ic svg{width:24px;height:24px}
.result h3{font-size:1.2rem;margin-bottom:6px}
.result p{color:#334155}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.duo .card h3{display:flex;align-items:center;gap:10px;font-size:1.15rem}

.founder{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.founder .fimg{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:#fff}
.founder blockquote{font-family:var(--ff-h);font-weight:500;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.5;color:var(--text);margin:8px 0 20px}
.founder blockquote::before{content:"“";display:block;font-size:4rem;line-height:.6;color:var(--c1);margin-bottom:6px}
.founder .who b{display:block;font-family:var(--ff-h);font-size:1.05rem}
.founder .who small{color:var(--muted)}

.related .icard .im{aspect-ratio:16/9}

/* ---------- Visor de imágenes ---------- */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.88);display:grid;place-items:center;padding:30px;opacity:0;visibility:hidden;transition:.25s}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{max-width:min(1200px,100%);max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#E2E8F0;font-size:.9rem}
.lightbox button{position:absolute;top:18px;right:18px;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:var(--text);font-size:1.4rem}

/* ---------- Pie de página ---------- */
.footer{background:var(--navy);color:#CBD5E1;padding:70px 0 0}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:50px}
.fgrid h5{font-family:var(--ff-h);font-size:.95rem;font-weight:600;color:#fff;margin-bottom:18px}
.fgrid ul{list-style:none;display:grid;gap:10px}
.fgrid ul a{color:#CBD5E1;transition:color .2s;font-size:.9rem}
.fgrid ul a:hover{color:#fff}
.fgrid p{color:#94A3B8;font-size:.9rem;margin-top:16px;max-width:330px}
.footer .brand img{filter:none}
.footer .brand-word{color:#fff}
.footer .brand-word b{color:var(--c1-on-dark)}
.footer .brand-word small{color:#94A3B8}
.fcontact li{display:flex;gap:10px;align-items:flex-start;color:#CBD5E1;font-size:.9rem}
.fcontact svg{flex:none;width:17px;height:17px;color:var(--c1-on-dark);margin-top:3px}
.aero{margin-top:22px;padding:16px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.aero b{font-family:var(--ff-logo);font-size:.74rem;letter-spacing:.16em;color:#fff}
.aero p{margin-top:6px;font-size:.84rem}
.fbottom{border-top:1px solid rgba(255,255,255,.1);padding:22px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#94A3B8;font-size:.84rem}

/* ---------- WhatsApp flotante, subir y progreso ---------- */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:120;width:56px;height:56px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 24px rgba(37,211,102,.35);transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:28px;height:28px;fill:#fff}
.wa-float .tip{position:absolute;right:68px;background:#fff;color:var(--text);font-weight:600;font-size:.84rem;padding:8px 13px;border-radius:10px;white-space:nowrap;box-shadow:var(--shadow);opacity:0;transform:translateX(6px);transition:.25s;pointer-events:none}
.wa-float:hover .tip{opacity:1;transform:none}
.to-top{position:fixed;right:28px;bottom:90px;z-index:110;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--c1);display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.3s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top svg{width:18px;height:18px}
.progress{position:fixed;left:0;top:0;height:3px;width:0;z-index:400;background:var(--c1)}

/* ---------- Aparición suave al hacer scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.rv.l,.rv.r,.rv.z{transform:translateY(24px)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .nav-cta .btn-ghost{display:none}
  .brand-word small{display:none}
  .menu > li > a{padding:10px 9px}
  .g4,.stack{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  section{padding:70px 0}
  .band{padding-bottom:70px}
  .topbar .tb-left span:nth-child(2){display:none}
  .burger{display:flex}
  .nav-cta .btn{display:none}
  .menu{position:fixed;top:110px;left:0;right:0;bottom:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:12px 16px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .3s ease}
  .nav-open .menu{transform:none}
  .menu > li{border-bottom:1px solid var(--line)}
  .menu > li > a{padding:16px 4px;font-size:1rem;justify-content:space-between}
  .mega{position:static;transform:none;opacity:1;visibility:visible;display:none;width:auto!important;grid-template-columns:1fr!important;padding:0 0 12px;border:0;box-shadow:none}
  .has-mega.open .mega{display:grid}
  .has-mega:hover .mega{transform:none}
  .has-mega.open .chev{transform:rotate(180deg)}
  .menu .m-cta{display:grid;border:0;padding-top:18px;gap:10px}
  .menu .m-cta .btn{display:flex}
  .menu .m-cta .btn-ghost{background:#fff;color:var(--text);border-color:var(--line2)}
  .hero{padding:56px 0 64px}
  .hero-grid,.spot,.contact,.ph-grid,.split,.founder,.quiz,.story-step{grid-template-columns:1fr}
  .hero-grid > *,.ph-grid > *,.split > *,.spot > *,.contact > *,.founder > *,.quiz > *,.story-step > *,.case-card > *{min-width:0}
  .story-step:nth-child(even) .ss-img{order:0}
  .split.rev > :first-child{order:0}
  .hero-visual{height:360px}
  .stats-box{grid-template-columns:1fr 1fr}
  section:not(.stats) .stat:nth-child(3){border-left:0}
  section:not(.stats) .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .pillars,.g3,.plans,.compare,.duo,.g2,.gallery,.feature-list,.values{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr;row-gap:36px}
  .process::before{display:none}
  .case-card{grid-template-columns:1fr}
  .case-card .cimg{min-height:240px}
  .case-card .cb{padding:26px}
  .band-box{grid-template-columns:1fr;padding:36px 26px}
  .spot-visual .phone{right:0;width:120px}
  .qres{position:static}
  .result{flex-direction:column;padding:26px}
  .hero-ctas .btn{flex:1 1 100%}
  .btn{white-space:normal;text-align:center}
}
@media (max-width:600px){
  .topbar{display:none}
  .menu{top:74px}
  .g4,.stack,.process,.fgrid{grid-template-columns:1fr}
  .stat{padding:18px 12px;column-gap:10px}
  .stat .ic{width:38px;height:38px}
  .stat b{font-size:1.2rem}
  .hero-visual{height:270px}
  .browser{width:100%}
  .phone{width:105px;border-radius:18px;padding:5px}
  .phone img{border-radius:14px}
  .form{grid-template-columns:1fr;padding:22px}
  .cmp,.plan,.qbox,.qres{padding:24px 20px}
  .brand-word{font-size:.82rem;letter-spacing:.2em}
  .price-box .sep,.hero-price .sep{display:none}
}

/* ---------- Productos: tarjetas con foto ---------- */
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 44px)/3);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:4px 2px 8px}
.car-track::-webkit-scrollbar{display:none}
.car-track > *{scroll-snap-align:start}
.car-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}
.car-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--c1);display:grid;place-items:center;box-shadow:var(--shadow);transition:.2s}
.car-nav button:hover{border-color:var(--c1)}
.car-nav button:disabled{opacity:.4;cursor:default}
.car-nav button svg{width:16px;height:16px}
.car-dots{display:flex;gap:6px}
.car-dots i{width:8px;height:8px;border-radius:999px;background:var(--line2);transition:.3s;cursor:pointer}
.car-dots i.on{width:22px;background:var(--c1)}

.sol-card{position:relative;display:block;min-height:370px;border-radius:var(--r-lg);overflow:hidden;color:#fff;isolation:isolate}
.sol-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s}
.sol-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(30,41,59,.82) 0%,rgba(30,41,59,.62) 45%,rgba(30,41,59,.9) 100%)}
.sol-card:hover img{transform:scale(1.05)}
.sol-body{height:100%;min-height:370px;padding:24px;display:flex;flex-direction:column}
.sol-top{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sol-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2)}
.sol-ic svg{width:18px;height:18px}
.sol-k{font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#E2E8F0}
.sol-card h3{color:#fff;font-size:1.25rem;margin-bottom:8px}
.sol-card p{color:#E2E8F0;font-size:.92rem}
.sol-more{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-weight:600;font-size:.9rem;display:flex;gap:6px}
.sol-more span{transition:transform .2s}
.sol-card:hover .sol-more span{transform:translateX(3px)}
.sol-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

/* ---------- Equipos punto de venta ---------- */
.hw-card{border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s}
.hw-card:hover{box-shadow:var(--shadow-lg)}
.hw-img{background:var(--bg2);padding:16px}
.hw-frame{background:#fff;border-radius:12px;aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:8px;color:#94A3B8}
.hw-frame svg{width:44%;color:var(--navy)}
.hw-frame small{font-size:.72rem;color:#94A3B8}
.hw-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.hw-body h3{font-size:1.05rem;margin-bottom:6px}
.hw-body p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.hw-body .link-arrow{margin-top:auto}
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

@media (max-width:960px){
  .car-track{grid-auto-columns:calc((100% - 22px)/2)}
  .sol-grid,.hw-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .car-track{grid-auto-columns:86%}
  .sol-grid,.hw-grid{grid-template-columns:1fr}
}
.link-arrow{white-space:nowrap}.icard .meta{flex-wrap:wrap}

/* ---------- Logo en bloque oscuro (el logo está diseñado para fondo oscuro) ---------- */
.brand{background:linear-gradient(135deg,#0B1A22 0%,#10313A 100%);padding:7px 18px 7px 8px;border-radius:14px;box-shadow:0 6px 18px -8px rgba(11,26,34,.55),inset 0 0 0 1px rgba(79,216,204,.18)}
.brand img{width:40px;height:40px;filter:drop-shadow(0 0 8px rgba(0,230,210,.35))}
.brand-word{color:#fff}
.brand-word b{color:var(--c1-on-dark)}
.brand-word small{color:#9FB3C1}
.footer .brand{box-shadow:inset 0 0 0 1px rgba(79,216,204,.18)}

/* ---------- Portada y encabezados en claro ---------- */
.hero,.page-hero{background:linear-gradient(180deg,#F4FAFA 0%,#EEF3F7 100%);color:var(--text);border-bottom:1px solid var(--line)}
.hero h1,.hero h2,.hero h3,.page-hero h1,.page-hero h2,.page-hero h3{color:var(--text)}
.hero .teal,.hero .grad-text,.page-hero .teal,.page-hero .grad-text{color:var(--c1)}
.hero .sub,.page-hero .sub{color:#475569}
.badge{background:#fff;box-shadow:var(--shadow)}
.hero-price{color:var(--muted)}
.hero-price b{color:var(--text)}
.hero-price .sep{background:var(--line2)}
.hero .btn-ghost,.page-hero .btn-ghost{background:#fff;border-color:var(--line2);color:var(--text)}
.hero .btn-ghost:hover,.page-hero .btn-ghost:hover{border-color:var(--c1);color:var(--c1);background:#fff}
.browser{border-color:var(--line);box-shadow:var(--shadow-lg)}
.phone{box-shadow:0 24px 50px -20px rgba(15,23,42,.45)}
.crumbs{color:var(--muted)}
.crumbs a:hover{color:var(--c1)}
.crumbs b{color:var(--text)}
.page-hero .eyebrow{color:var(--c1)}
.page-hero .tag{background:var(--soft);color:var(--c1-dark)}
.page-hero .chips span{background:#fff;border-color:var(--line);color:#334155}
.page-hero .ph-img{border-color:var(--line);box-shadow:var(--shadow-lg)}
.price-box{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.price-box b{color:var(--text)}
.price-box span{color:var(--muted)!important}
.price-box small{color:var(--muted)}
.price-box .sep{background:var(--line)}
.page-hero blockquote{color:#334155!important}
.ph-img.contain{aspect-ratio:auto}.ph-img.contain img{height:auto}
.brand-word small{font-size:.66rem;letter-spacing:.08em;font-weight:500;margin-top:5px}

/* ---------- Codi, la mascota ---------- */
.codi-help{position:fixed;right:18px;bottom:88px;z-index:125;display:flex;align-items:flex-end;gap:6px;animation:codiIn .5s ease both}
.codi-help[hidden]{display:none}
.codi-help img{width:86px;height:auto;filter:drop-shadow(0 8px 14px rgba(15,23,42,.18))}
.codi-bubble{position:relative;max-width:220px;background:#fff;border:1px solid var(--line);border-radius:16px 16px 4px 16px;padding:12px 14px;font-size:.86rem;line-height:1.45;color:#334155;box-shadow:var(--shadow-lg);margin-bottom:46px}
.codi-bubble b{color:var(--c1)}
.codi-bubble:hover{border-color:var(--c1)}
.codi-close{position:absolute;top:-10px;right:78px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--muted);font-size:.95rem;line-height:1;box-shadow:var(--shadow);z-index:1}
@keyframes codiIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.to-top{bottom:24px;right:90px}
.band-box{grid-template-columns:auto 1.4fr auto}
.band-codi{width:120px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
@media (max-width:960px){
  .band-box{grid-template-columns:1fr}
  .band-codi{width:92px}
}
@media (max-width:600px){
  .codi-help img{width:64px}
  .codi-bubble{max-width:180px;font-size:.8rem;margin-bottom:34px}
  .codi-close{right:56px}
}
.qres .big{font-size:1.5rem}
.hero h1{font-size:clamp(2.1rem,3.9vw,3rem)}.hero-price{gap:10px 22px}.hero-price .sep{display:none}.hero-price b.teal{color:var(--c1);font-size:1rem}

/* ---------- Franja del menú: oscura con degradado neón CODESPOT ---------- */
.topbar{background:#070A0E;border-bottom:1px solid rgba(0,230,210,.10)}
.header{background:linear-gradient(90deg,#0B0F14 0%,#0B1A22 40%,#0C2A2F 72%,#0B3B37 100%);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid rgba(0,230,210,.35);box-shadow:0 1px 0 rgba(0,230,210,.08),0 6px 24px -8px rgba(0,230,210,.22)}
.header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#00E6D2 30%,#00E6D2 70%,transparent);opacity:.75;pointer-events:none}
.header.scrolled{box-shadow:0 8px 28px -10px rgba(0,230,210,.3)}
.brand{background:none;box-shadow:none;padding:0;border-radius:0}
.brand img{filter:drop-shadow(0 0 10px rgba(0,230,210,.45))}
.brand-word{color:#fff}
.brand-word b{color:#00E6D2;text-shadow:0 0 12px rgba(0,230,210,.45)}
.brand-word small{color:#8FB3B8}
.header .menu > li > a{color:#DCE7EC}
.header .menu > li > a:hover,.header .menu > li > a.active{color:#00E6D2;text-shadow:0 0 10px rgba(0,230,210,.5)}
.header .nav-cta .btn-primary{background:linear-gradient(135deg,#00E6D2,#009B93);color:#04211F;box-shadow:0 0 0 1px rgba(0,230,210,.4),0 6px 20px -6px rgba(0,230,210,.6)}
.header .nav-cta .btn-primary:hover{box-shadow:0 0 0 1px rgba(0,230,210,.6),0 8px 26px -6px rgba(0,230,210,.8)}
.header .burger{background:transparent;border-color:rgba(0,230,210,.35);color:#fff}
@media (max-width:960px){
  .header .menu > li > a{color:var(--text);text-shadow:none}
  .header .menu > li > a:hover,.header .menu > li > a.active{color:var(--c1);text-shadow:none}
}

/* ---------- Portada en blanco ---------- */
.hero{background:#fff;border-bottom:1px solid var(--line)}
.page-hero{background:#fff;border-bottom:1px solid var(--line)}

/* ---------- Chat con Codi ---------- */
.codi-help .codi-bubble{font:inherit;text-align:left;cursor:pointer}
.codi-avatar{background:none;border:0;padding:0;cursor:pointer}
.codi-chat{position:fixed;right:22px;bottom:92px;z-index:130;width:min(380px,calc(100vw - 24px));height:min(560px,calc(100vh - 130px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px -20px rgba(15,23,42,.35);overflow:hidden;animation:codiIn .3s ease both}
.codi-chat[hidden]{display:none}
.codi-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(90deg,#0B0F14,#0C2A2F 70%,#0B3B37);border-bottom:1px solid rgba(0,230,210,.35);color:#fff}
.codi-head img{width:40px;height:auto;background:#fff;border-radius:12px;padding:3px}
.codi-head b{display:block;font-family:var(--ff-h);font-size:1rem}
.codi-head small{display:flex;align-items:center;gap:6px;font-size:.74rem;color:#9FC9C6}
.codi-head small i{width:7px;height:7px;border-radius:50%;background:#00E6D2;box-shadow:0 0 8px #00E6D2}
.codi-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:transparent;color:#fff;font-size:1.2rem;line-height:1}
.codi-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--bg2)}
.codi-m{max-width:85%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.5;white-space:pre-wrap;word-wrap:break-word}
.codi-m.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);color:#334155;border-bottom-left-radius:4px}
.codi-m.user{align-self:flex-end;background:var(--c1);color:#fff;border-bottom-right-radius:4px}
.codi-m.err{align-self:flex-start;background:#FEF2F2;border:1px solid #FECACA;color:#991B1B}
.codi-m .btn{margin-top:10px;padding:9px 16px;font-size:.84rem}
.codi-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:14px}
.codi-typing i{width:7px;height:7px;border-radius:50%;background:var(--c1);animation:codiDot 1s infinite}
.codi-typing i:nth-child(2){animation-delay:.15s}.codi-typing i:nth-child(3){animation-delay:.3s}
@keyframes codiDot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.codi-chips{display:flex;gap:6px;overflow-x:auto;padding:10px 12px 0;background:#fff;scrollbar-width:none}
.codi-chips::-webkit-scrollbar{display:none}
.codi-chips button{flex:none;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:#fff;color:#334155;font-size:.8rem;font-weight:600;transition:.2s}
.codi-chips button:hover{border-color:var(--c1);color:var(--c1)}
.codi-chips[hidden]{display:none}
.codi-form{display:flex;gap:8px;padding:10px 12px;background:#fff}
.codi-form input{flex:1;font:inherit;font-size:.92rem;padding:11px 14px;border:1px solid var(--line2);border-radius:12px;outline:none}
.codi-form input:focus{border-color:var(--c1);box-shadow:0 0 0 3px var(--soft)}
.codi-form button{width:44px;border-radius:12px;border:0;background:var(--c1);color:#fff;display:grid;place-items:center}
.codi-form button:disabled{opacity:.5}
.codi-form button svg{width:18px;height:18px}
.codi-foot{padding:0 14px 10px;background:#fff;font-size:.72rem;color:var(--muted);text-align:center}
.codi-foot a{color:var(--c1);font-weight:600}
@media (max-width:600px){
  .codi-chat{right:12px;bottom:84px;height:calc(100vh - 110px)}
}
.logo-panel{border-radius:var(--r-lg);overflow:hidden;box-shadow:0 30px 60px -24px rgba(11,26,34,.55);border:1px solid rgba(0,230,210,.25);max-width:520px;margin-inline:auto}.logo-panel img{width:100%}
.pais{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--soft);color:var(--c1-dark);font-family:var(--ff-h);font-weight:700;font-size:.9rem;letter-spacing:.04em;margin-bottom:12px}

/* Áreas, planes por grupo y menú de 3 columnas */
.mega.w3{grid-template-columns:repeat(3,1fr);width:820px;left:-160px;transform:translate(0,8px)}
.has-mega:hover .mega.w3,.has-mega:focus-within .mega.w3{transform:translate(0,0)}
.plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:840px;margin-inline:auto}
.plans + .plans-title{margin-top:56px}
.plans-title{text-align:center;font-size:1.3rem;margin:0 0 30px}
.plan .inst s{color:var(--muted);margin-left:4px}
@media (max-width:960px){
  .mega.w3{transform:none}
  .plans{grid-template-columns:1fr}
}

/* Título de portada: líneas que suben al cargar y palabra que cambia */
.hero h1 .line{overflow:hidden;padding-bottom:.08em}
.hero h1 .line>span{display:inline-block;animation:lineUp .9s cubic-bezier(.22,1,.36,1) both}
.hero h1 .line:nth-child(2)>span{animation-delay:.12s}
.hero h1 .line:nth-child(3)>span{animation-delay:.24s}
@keyframes lineUp{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:none}}
.rotator{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.rotator>span{display:inline-block}
.rotator>span.in{animation:wordIn .5s cubic-bezier(.22,1,.36,1) both}
.rotator>span.out{animation:wordOut .38s ease forwards}
@keyframes wordIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
@keyframes wordOut{to{opacity:0;transform:translateY(-90%)}}

/* ---------- Portada: vitrina animada ---------- */
.hero{position:relative}
.hero .container{position:relative;z-index:1}
.hero-glow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero-glow i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;animation:glow 14s ease-in-out infinite alternate}
.hero-glow i:nth-child(1){width:460px;height:460px;background:#7EE3D8;top:-140px;right:8%}
.hero-glow i:nth-child(2){width:380px;height:380px;background:#BFDBFE;bottom:-160px;left:-80px;animation-delay:-7s}
@keyframes glow{to{transform:translate(-60px,50px) scale(1.15)}}

.showcase .shots{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg2)}
.showcase .shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.06);transition:opacity .9s ease,transform 6s ease}
.showcase .shots img.on{opacity:1;transform:scale(1)}
.browser-bar span[data-show-name]{transition:opacity .3s}

.phone-scroll{border-radius:20px;overflow:hidden;aspect-ratio:9/17}
.phone-scroll img{border-radius:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;animation:phoneScroll 16s ease-in-out infinite}
@keyframes phoneScroll{0%,12%{object-position:50% 0}50%,62%{object-position:50% 100%}100%{object-position:50% 0}}

.toast{position:absolute;left:-18px;bottom:46px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 16px 10px 10px;box-shadow:var(--shadow-lg);animation:toast 7s ease-in-out infinite}
.toast-ic{width:34px;height:34px;border-radius:10px;background:#25D366;display:grid;place-items:center}
.toast-ic svg{width:20px;height:20px;fill:#fff}
.toast b{display:block;font-size:.85rem;color:var(--text)}
.toast small{color:var(--muted);font-size:.74rem}
@keyframes toast{0%,8%{opacity:0;transform:translateY(14px) scale(.96)}16%,78%{opacity:1;transform:none}88%,100%{opacity:0;transform:translateY(-8px)}}

/* ---------- Casos: pantallas que se amplían ---------- */
.case-card .cimg{cursor:zoom-in}
.case-result{color:var(--text)!important}
.case-shots{display:flex;gap:8px;margin:0 0 22px}
.case-shots button{flex:1;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg2);cursor:zoom-in;aspect-ratio:16/10;transition:transform .25s,border-color .25s}
.case-shots button:hover{transform:translateY(-3px);border-color:var(--c1)}
.case-shots img{width:100%;height:100%;object-fit:cover;object-position:top}

/* ---------- Franja de diseños ---------- */
.shots-marquee .marquee-track{gap:22px;animation-duration:70s;align-items:stretch}
.shots-marquee figure{width:300px;margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}
.shots-marquee img{height:190px!important;width:100%!important;object-fit:cover;object-position:top;filter:none!important;opacity:1!important;border-radius:0!important}
.shots-marquee figcaption{padding:10px 14px;font-size:.8rem;color:var(--muted)}
.shots-marquee figcaption b{color:var(--text)}

@media (max-width:960px){
  .toast{left:0;bottom:20px}
}
@media (max-width:600px){
  .codi-bubble,.codi-close{display:none}
  .toast{display:none}
  .shots-marquee figure{width:230px}
  .shots-marquee img{height:150px!important}
  .case-shots{gap:6px}
}

/* El hero entra en secuencia al cargar, sin esperar al scroll */
.hero .rv{opacity:1;transform:none;transition:none;animation:heroIn .8s cubic-bezier(.22,1,.36,1) both}
.hero .badge.rv{animation-delay:.05s}
.hero .sub.rv{animation-delay:.45s}
.hero .hero-ctas.rv{animation-delay:.6s}
.hero .hero-price.rv{animation-delay:.75s}
.hero .hero-visual.rv{animation-delay:.3s;animation-duration:1.1s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.case-card .cimg img{object-position:left top}

/* ---------- Efectos de acabado ---------- */
/* Vitrina del hero con inclinación 3D */
.hero-visual{perspective:1400px}
.hero-visual .browser,.hero-visual .phone{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.hero-visual .browser{transform:rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.hero-visual .phone{transform:translateZ(60px) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}

/* Luz que sigue al cursor */
.card-spot{position:relative;isolation:isolate}
.card-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;transition:opacity .35s;background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(0,155,147,.10),transparent 60%)}
.card-spot:hover::after{opacity:1}

/* Brillo que cruza los botones */
.btn-primary,.btn-wa{position:relative;overflow:hidden}
.btn-primary::before,.btn-wa::before{content:"";position:absolute;top:0;bottom:0;left:-75%;width:50%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.btn-primary:hover::before,.btn-wa:hover::before{left:130%}

/* Subrayado que se dibuja bajo la palabra resaltada */
.h2 .grad-text{background-image:linear-gradient(90deg,var(--c1),#7EE3D8);background-repeat:no-repeat;background-size:0% 3px;background-position:0 100%;transition:background-size .9s cubic-bezier(.22,1,.36,1) .35s;padding-bottom:2px}
.h2.in .grad-text{background-size:100% 3px}

/* Imágenes de los casos: aparecen con cortina */
.case-card .cimg img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1) .15s,transform .8s}
.case-card.in .cimg img{clip-path:inset(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  .case-card .cimg img{clip-path:none}
  .h2 .grad-text{background-size:100% 3px}
}

/* ---------- Líneas en movimiento (fondo) ---------- */
canvas.waves{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero > canvas.waves{opacity:.9}

/* ---------- Sección oscura: Desarrollo de SaaS ---------- */
.saas{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% 0%,rgba(0,155,147,.22),transparent 70%),#0B1220;color:#CBD5E1}
.saas .container{position:relative;z-index:1}
.saas .h2,.saas h3,.saas h4{color:#fff}
.saas .eyebrow{color:var(--c1-on-dark)}
.saas .grad-text{color:var(--c1-on-dark)}
.saas .lead{color:#CBD5E1}
.saas .lead b{color:#fff}
.saas .btn-ghost{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.saas .btn-ghost:hover{background:#fff;color:var(--navy)}
.saas-top{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;margin-bottom:80px}
.saas-visual{position:relative;padding:0 40px 40px 0}
.saas-visual .browser{position:relative;top:0;width:100%;border-color:rgba(255,255,255,.12)}
.saas-visual .phone{right:0;bottom:0;width:180px;transform:none}
.phone-app{border-radius:20px;overflow:hidden;background:#EEF2F7}
.phone-app img{border-radius:0;display:block}
.saas-h{text-align:center;font-size:1.35rem;margin-bottom:30px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.flow::before{content:"";position:absolute;left:8%;right:8%;top:42px;height:2px;background:linear-gradient(90deg,transparent,rgba(79,216,204,.55),transparent)}
.flow-step{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px 22px;backdrop-filter:blur(6px)}
.flow-step .flow-n{position:absolute;top:18px;right:20px;font-family:var(--ff-h);font-size:.8rem;color:rgba(255,255,255,.35)}
.flow-step .ic,.flow-base .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(79,216,204,.14);color:var(--c1-on-dark);margin-bottom:16px}
.flow-step .ic svg,.flow-base .ic svg{width:22px;height:22px}
.flow-step h4{font-size:1.02rem;margin-bottom:8px}
.flow-step p{font-size:.88rem;line-height:1.55;color:#94A3B8}
.flow-base{display:flex;gap:16px;align-items:center;margin-top:18px;padding:20px 24px;border-radius:18px;border:1px dashed rgba(79,216,204,.4);background:rgba(79,216,204,.05)}
.flow-base .ic{margin:0;flex:none}
.flow-base b{display:block;color:#fff;margin-bottom:2px}
.flow-base span{font-size:.9rem;color:#94A3B8}
.saas .card-spot::after{background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(79,216,204,.12),transparent 60%)}

/* 5 áreas en una fila */
.grid.areas{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}

@media (max-width:960px){
  .saas-top{grid-template-columns:1fr;gap:40px;margin-bottom:56px}
  .saas-top > *{min-width:0}
  .flow{grid-template-columns:1fr 1fr}
  .flow::before{display:none}
}
@media (max-width:600px){
  .flow{grid-template-columns:1fr}
  .saas-visual{padding:0 24px 30px 0}
  .saas-visual .phone{width:120px}
}
.saas .lead{margin-bottom:28px}

/* ---------- Ganchos: hoy → con Codespot ---------- */
.hooks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hook{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;transition:transform .3s,box-shadow .3s,border-color .3s}
.hook:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(0,155,147,.4)}
.hook-k{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--bg2);color:var(--muted);margin-bottom:10px}
.hook-k.on{background:rgba(0,155,147,.12);color:var(--c1)}
.hook-hoy p{color:var(--muted);font-size:.93rem;line-height:1.5;margin:0}
.hook-hoy s{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 55%/0% 1.5px;transition:background-size .9s cubic-bezier(.22,1,.36,1) .5s}
.hook.in .hook-hoy s{background-size:100% 1.5px}
.hook-arrow{position:relative;height:56px;display:grid;place-items:center;margin:8px 0}
.hook-arrow::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.hook-arrow span{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--c1);color:#fff;box-shadow:0 0 0 6px rgba(0,155,147,.12),0 8px 24px rgba(0,155,147,.35);transform:scale(.6);opacity:0;transition:transform .6s cubic-bezier(.34,1.56,.64,1) .8s,opacity .4s .8s}
.hook.in .hook-arrow span{transform:none;opacity:1}
.hook-arrow svg{width:20px;height:20px}
.hook-luego p{color:var(--text);font-weight:600;font-size:1rem;line-height:1.5;margin:0;opacity:0;transform:translateY(10px);transition:opacity .6s 1s,transform .6s 1s}
.hook.in .hook-luego p{opacity:1;transform:none}
.hook-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:18px;border-top:1px solid var(--line);margin-top:20px}
.hook-foot small{color:var(--muted);font-size:.8rem}

/* ---------- Celular: sistema de cartera ---------- */
.phone-ui{font-size:9px;border-radius:20px;overflow:hidden;background:#F4F7F6;aspect-ratio:9/18;display:flex;flex-direction:column;gap:.7em;padding:1.1em .9em;color:#1F2D27;font-family:var(--ff-b)}
.pu-top{display:flex;align-items:center;gap:.7em}
.pu-dot{width:1.8em;height:1.8em;border-radius:.5em;background:#1F5C46;flex:none}
.pu-top b{display:block;font-size:1.15em;line-height:1.2}
.pu-top small{font-size:.8em;color:#6B7C74}
.pu-kpis{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.pu-kpis div{background:#fff;border-radius:.7em;padding:.6em .65em;border-top:.25em solid #1F5C46;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.pu-kpis small,.pu-card small,.pu-bars small{display:block;font-size:.78em;color:#6B7C74;line-height:1.2}
.pu-kpis b{font-size:1.15em;color:#1F2D27}
.pu-kpis .warn b{color:#A15C14}
.pu-card{background:#fff;border-radius:.8em;padding:.8em;border:1px solid #E1E8E4}
.pu-card b{display:block;font-size:1.5em;color:#1F5C46;margin:.15em 0}
.pu-card span{font-size:.78em;color:#2F8A63}
.pu-bars{background:#fff;border-radius:.8em;padding:.8em;display:grid;gap:.45em}
.pu-bars div{display:grid;grid-template-columns:4.6em 1fr;align-items:center;gap:.5em;font-size:.82em;color:#4A5A53}
.pu-bars i{display:block;height:.6em;border-radius:1em;background:linear-gradient(90deg,#1F5C46 0 80%,#86D3AE 80%);width:0;animation:barGrow 1.4s cubic-bezier(.22,1,.36,1) 1s forwards}
@keyframes barGrow{to{width:var(--w)}}
.pu-btn{margin-top:auto;background:#1F5C46;color:#fff;text-align:center;border-radius:.7em;padding:.75em;font-weight:700;font-size:.95em}
.hero-visual .phone{width:190px}
@media (max-width:960px){.hero-visual .phone{width:150px}.phone-ui{font-size:7px}}
@media (max-width:600px){.hero-visual .phone{width:118px}.phone-ui{font-size:5.6px;padding:.9em .7em}}

/* ---------- C luminosa en la sección oscura ---------- */
.glow-c{position:absolute;z-index:0;width:min(560px,60vw);right:-110px;top:-90px;opacity:.22;pointer-events:none;filter:brightness(1.6) saturate(1.3) drop-shadow(0 0 30px rgba(79,216,204,.9)) drop-shadow(0 0 80px rgba(79,216,204,.5));animation:glowC 7s ease-in-out infinite;mix-blend-mode:screen}
@keyframes glowC{0%,100%{opacity:.16;transform:rotate(0) scale(1)}50%{opacity:.34;transform:rotate(-6deg) scale(1.04)}}
.saas-h small{display:block;font-size:.8rem;font-weight:500;color:#94A3B8;margin-top:6px}

/* ---------- Caso compacto (México) ---------- */
.mini-case{display:grid;grid-template-columns:300px 1fr;gap:28px;align-items:center;margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:20px;background:#fff;color:inherit;transition:box-shadow .3s,border-color .3s}
.mini-case:hover{box-shadow:var(--shadow-lg);border-color:rgba(0,155,147,.4)}
.mini-case .mc-img{border-radius:12px;overflow:hidden;aspect-ratio:16/10;background:#120a24}
.mini-case img{width:100%;height:100%;object-fit:cover;object-position:left top}
.mini-case h3{font-size:1.2rem;margin:8px 0 6px}
.mini-case p{color:var(--muted);font-size:.92rem;margin-bottom:10px}

@media (max-width:960px){.hooks{grid-template-columns:1fr 1fr}}
@media (max-width:600px){
  .hooks{grid-template-columns:1fr}
  .mini-case{grid-template-columns:1fr}
  .glow-c{right:-140px;top:-60px;width:380px}
}
@media (prefers-reduced-motion:reduce){
  .hook-arrow span,.hook-luego p{opacity:1;transform:none}
  .pu-bars i{width:var(--w)}
}
/* C luminosa: luz detrás del diagrama */
.glow-c{right:auto;left:50%;top:auto;bottom:90px;width:min(460px,70vw);animation-name:glowC2}
@keyframes glowC2{0%,100%{opacity:.14;transform:translateX(-50%) scale(1)}50%{opacity:.3;transform:translateX(-50%) scale(1.05)}}
.saas-visual{padding:0 0 30px}
.saas-chips{position:absolute;left:-18px;right:-18px;bottom:0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.saas-chips span{background:rgba(11,18,32,.85);border:1px solid rgba(79,216,204,.45);color:#E2F7F4;font-size:.82rem;font-weight:600;padding:8px 14px;border-radius:999px;box-shadow:0 0 18px rgba(79,216,204,.25);backdrop-filter:blur(6px);animation:chipFloat 5s ease-in-out infinite}
.saas-chips span:nth-child(2){animation-delay:-1.6s}.saas-chips span:nth-child(3){animation-delay:-3.2s}
@keyframes chipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:600px){.glow-c{width:300px;bottom:auto;top:40%}.saas-chips{position:static;margin-top:14px}}
/* Barra superior: bandera del Perú junto al número */
.tb-phone{display:inline-flex;align-items:center;gap:8px}
.tb-phone .flag{width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.25)}

/* ---------- Quiénes somos: C luminosa ---------- */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:center}
.about .h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.about-logo{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin-inline:auto;border-radius:32px;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(79,216,204,.28),transparent 60%),#0B1220;box-shadow:0 30px 60px -25px rgba(11,18,32,.6)}
.about-logo img{width:58%;position:relative;z-index:1;filter:brightness(1.5) saturate(1.3) drop-shadow(0 0 22px rgba(79,216,204,.95)) drop-shadow(0 0 60px rgba(79,216,204,.55));animation:aboutGlow 5s ease-in-out infinite}
@keyframes aboutGlow{0%,100%{filter:brightness(1.3) saturate(1.2) drop-shadow(0 0 14px rgba(79,216,204,.7)) drop-shadow(0 0 40px rgba(79,216,204,.35))}50%{filter:brightness(1.7) saturate(1.4) drop-shadow(0 0 28px rgba(79,216,204,1)) drop-shadow(0 0 80px rgba(79,216,204,.65))}}
.about-ring{position:absolute;inset:14%;border-radius:50%;border:1px solid rgba(79,216,204,.35);animation:ring 9s linear infinite}
.about-ring::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#4FD8CC;box-shadow:0 0 14px #4FD8CC}
@keyframes ring{to{transform:rotate(360deg)}}

/* ---------- Tecnología ---------- */
.tech{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tech-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .3s,box-shadow .3s,border-color .3s}
.tech-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(0,155,147,.4)}
.tech-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(0,155,147,.1);color:var(--c1);margin-bottom:14px}
.tech-card .ic svg{width:22px;height:22px}
.tech-card h4{margin-bottom:6px}
.tech-card p{color:var(--muted);font-size:.9rem;margin-bottom:14px}
.tech-card .chips span{font-size:.78rem}
@media (max-width:960px){.about{grid-template-columns:1fr}.about > *{min-width:0}.tech{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.tech{grid-template-columns:1fr}.about-logo{max-width:260px}}
.tb-mail{display:inline-flex;align-items:center;gap:6px;margin-right:22px;opacity:.9}
.topbar .container > a.tb-mail:hover{opacity:1}
.fcontact small{color:#94A3B8;font-size:.78rem}
@media (max-width:760px){.tb-mail{display:none}}
.tb-right{display:flex;align-items:center}

/* Titular: el resultado completo va rotando en su propia línea */
.h1-rot .line-rot{white-space:nowrap}
.h1-rot .line-rot .rotator{display:inline-block;vertical-align:top}
.h1-rot .line-sub{font-size:.52em;letter-spacing:-.01em;margin-top:.35em;color:var(--muted)}
.h1-rot .line-sub > span{font-weight:600}
.badge.solo{padding:7px 16px}
@media (max-width:600px){.h1-rot .line-rot{font-size:.88em}}

/* ---------- Sistemas que ya construimos (pestañas) ---------- */
.st-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 auto 34px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%}
.st-nav button{border:0;background:transparent;font:600 .92rem var(--ff-b);color:var(--muted);padding:10px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.st-nav button[aria-selected="true"]{background:var(--c1);color:#fff;box-shadow:0 6px 18px rgba(0,155,147,.3)}
.st-panel{display:none;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.st-panel.on{display:grid;animation:stIn .5s cubic-bezier(.22,1,.36,1)}
@keyframes stIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.st-text h3{font-size:1.6rem;margin-bottom:10px}
.st-text p{color:var(--muted);margin-bottom:18px}
.st-pin{font-size:.85rem;margin-top:14px!important;padding:10px 14px;border-radius:12px;background:rgba(0,155,147,.08);color:var(--text)!important}
.st-visual{position:relative;padding-bottom:40px}
.st-visual .browser{position:relative;top:0;width:100%;box-shadow:var(--shadow-lg);border-color:var(--line)}
.st-visual .browser img{display:block;width:100%}
.st-float{position:absolute;right:-18px;bottom:0;width:44%;border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 24px 50px -18px rgba(15,23,42,.45);background:#fff;cursor:zoom-in;transform:rotate(1.5deg)}
.st-float img{display:block;width:100%}
.st-live{position:relative;aspect-ratio:1366/800;background:#03392B}
.st-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .4s}
.st-live.cargado iframe{opacity:1}
.st-live img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s}
.st-live.cargado img{opacity:0;pointer-events:none}
.st-phone{display:grid;place-items:center;padding:10px 0}
.st-phone .phone{position:relative;right:auto;bottom:auto;width:260px}
.st-phone .phone-ui{font-size:12px}
/* Planes de apps: 3 columnas */
.plans.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px}
.plan-extra{text-align:center;color:var(--muted);margin-top:18px}
/* Caso compacto: que nunca se desborde */
.mini-case > *{min-width:0}
@media (max-width:1100px){.plans.n3{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  .st-panel{grid-template-columns:1fr;gap:28px}
  .st-panel > *{min-width:0}
  .st-float{right:0}
  .mini-case{grid-template-columns:220px 1fr}
}
@media (max-width:640px){
  .plans.n3{grid-template-columns:1fr}
  .mini-case{grid-template-columns:1fr}
  .st-nav{border-radius:18px;width:100%}
  .st-nav button{flex:1 1 45%;padding:9px 10px;font-size:.85rem}
  .st-live{aspect-ratio:4/5}
  .st-phone .phone{width:220px}
  .st-phone .phone-ui{font-size:10px}
}
/* Demo en vivo: se dibuja a 1100 px de ancho y se escala al recuadro, como una pantalla de escritorio */
.st-live{overflow:hidden}
.st-live iframe{width:1100px;height:644px;inset:auto;top:0;left:0;transform-origin:0 0;transform:scale(var(--k,.58))}
.st-phone .pu-bars i{animation-delay:.2s}
@media (max-width:640px){.st-live iframe{width:100%;height:100%;transform:none}}