/* ============================================================
   Zeus Mobile by Fenix — Rediseño landing (paleta navy + durazno)
   ============================================================ */
:root{
  --navy-900:#0E2A47; --navy-800:#14385C; --navy-700:#1F4E79; --navy-500:#2A6DB0;
  --accent:#FFC080; --accent-600:#F0A860; --accent-700:#E8963F;
  --ink:#12263A; --muted:#5B6B7B; --soft:#F4F8FC; --line:#E6EDF5; --white:#fff;
  --radius:12px; --maxw:1140px;
  --shadow-card:0 16px 38px rgba(14,42,71,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:#fff;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%}
section{scroll-margin-top:80px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;
  padding:14px 26px;border-radius:10px;border:1.6px solid transparent;cursor:pointer;
  transition:transform .15s,background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn i{font-size:17px}
.btn-primary{background:var(--accent);color:var(--navy-900)}
.btn-primary:hover{background:var(--accent-600)}
.btn-navy{background:var(--navy-700);color:#fff}
.btn-navy:hover{background:var(--navy-900)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn-sm{padding:10px 20px;font-size:14px}

/* ---------- Navbar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .25s,box-shadow .25s,padding .25s}
.nav .inner{max-width:var(--maxw);margin:0 auto;padding:18px 28px;display:flex;align-items:center;justify-content:space-between}
.nav.scrolled{background:rgba(14,42,71,.94);backdrop-filter:blur(10px);box-shadow:0 6px 24px rgba(0,0,0,.20)}
.nav.scrolled .inner{padding:12px 28px}
.brand{color:#fff;font-weight:800;font-size:20px;letter-spacing:.2px}
.brand b{color:var(--accent)}
.brand span{font-weight:400;opacity:.82;font-size:16px}
.navlinks{display:flex;gap:26px;align-items:center;list-style:none}
.navlinks a:not(.btn){color:#e7eef7;font-weight:500;font-size:15px;letter-spacing:.2px}
.navlinks a:not(.btn):hover{color:var(--accent)}
.navtoggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;line-height:1}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(1100px 520px at 82% -12%,rgba(42,109,176,.55),transparent 60%),
             linear-gradient(140deg,#0E2A47 0%,#1F4E79 62%,#2A6DB0 100%)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.6px);background-size:28px 28px;opacity:.5}
.hero .inner{max-width:var(--maxw);margin:0 auto;padding:150px 28px 96px;position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.kicker{display:inline-block;color:var(--accent);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  font-size:13px;padding:7px 15px;border:1px solid rgba(255,192,128,.4);border-radius:999px;margin-bottom:18px}
.hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.1;font-weight:800;letter-spacing:-.6px;margin-bottom:18px}
.hero h1 em{color:var(--accent);font-style:normal}
.hero .lead{font-size:18px;color:#cfdcec;max-width:540px;margin-bottom:30px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}

/* ---------- Secciones ---------- */
.section{padding:82px 0}
.section.soft{background:var(--soft)}
.section-head{text-align:center;max-width:700px;margin:0 auto 48px}
.section-head .tag{color:var(--navy-500);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.section-head h2{font-size:clamp(27px,3.6vw,36px);color:var(--navy-900);font-weight:800;letter-spacing:-.5px;margin:10px 0 10px}
.section-head p{color:var(--muted);font-size:17px}

/* ---------- Grids / Cards ---------- */
.grid{display:grid;gap:22px}
.cols3{grid-template-columns:repeat(3,1fr)}
.cols2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  transition:transform .18s,box-shadow .18s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.card .tile{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;background:linear-gradient(135deg,var(--navy-700),var(--navy-500))}
.card .tile i{font-size:26px;color:var(--accent);line-height:1}
.card h3{font-size:19px;color:var(--navy-900);font-weight:700;margin-bottom:8px}
.card p{color:var(--muted);font-size:15px}

/* Funciones: teléfono + tarjetas */
.funcs{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}

/* Manuales */
.card--doc{text-align:center;display:flex;flex-direction:column;align-items:center}
.card--doc .tile{margin:0 auto 16px}
.card--doc .btn{margin-top:18px}

/* ---------- Download band ---------- */
.dlband{background:var(--soft);text-align:center;padding:60px 0}
.dlband h2{font-size:clamp(24px,3vw,32px);color:var(--navy-900);font-weight:800;margin-bottom:10px}
.dlband p{color:var(--muted);margin-bottom:26px}
.dlband .badge-link img{height:62px;margin:0 auto}

/* ---------- Integración (navy) ---------- */
.section.navy{background:linear-gradient(140deg,#0E2A47,#1F4E79);color:#fff;position:relative;overflow:hidden}
.section.navy::after{content:"";position:absolute;right:-140px;top:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(255,192,128,.28),transparent 70%);border-radius:50%}
.integ{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center;position:relative;z-index:1}
.integ .tag{color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:13px}
.integ h2{font-size:clamp(26px,3.4vw,34px);font-weight:800;letter-spacing:-.4px;margin:10px 0 12px}
.integ .lead{color:#cfdcec;font-size:17px;margin-bottom:20px}
.shots{display:flex;flex-direction:column;gap:24px}
.shot-cap{font-size:12.5px;color:#9fb2c9;text-align:center;margin-top:9px}
.browser{border-radius:14px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.40);background:#0b1320;border:1px solid rgba(255,255,255,.12)}
.maximize-btn{margin-left:auto;background:none;border:none;cursor:pointer;color:#5b6b7b;
  display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border-radius:7px;font-family:inherit}
.maximize-btn:hover{color:var(--navy-700);background:rgba(0,0,0,.06)}
.maximize-btn i{font-size:14px}
.maximize-btn span{font-size:12px;font-weight:600}
.browser img{cursor:zoom-in}
/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(6,16,28,.93);
  display:none;align-items:center;justify-content:center;padding:24px}
.lightbox.open{display:flex}
.lightbox img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6);cursor:zoom-out}
.lightbox-close{position:fixed;top:18px;right:22px;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.14);border:none;color:#fff;font-size:20px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.lightbox-close:hover{background:var(--accent);color:var(--navy-900)}
.browser .bar{background:#e9eef4;padding:11px 14px;display:flex;align-items:center;gap:7px}
.browser .bar span{width:11px;height:11px;border-radius:50%;background:#c7ccd4}
.browser .bar span:nth-child(1){background:#ff5f57}.browser .bar span:nth-child(2){background:#febc2e}.browser .bar span:nth-child(3){background:#28c840}
.checklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin:0 0 24px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#e7eef7}
.checklist li i{color:var(--accent);font-size:17px;margin-top:2px;flex:0 0 auto}
.dltool{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}
.dltool img{height:56px}

/* ---------- CTA band (durazno) ---------- */
.ctaband{background:linear-gradient(135deg,var(--accent),var(--accent-600));color:var(--navy-900);text-align:center;padding:74px 0}
.ctaband h2{font-size:clamp(28px,3.6vw,38px);font-weight:800;letter-spacing:-.5px;margin-bottom:22px;line-height:1.15}

/* ---------- Footer + contacto (navy) ---------- */
.footer{background:var(--navy-900);color:#c9d6e6}
.footer .top{padding:64px 0 46px;text-align:center}
.footer .top h2{font-size:clamp(22px,3vw,30px);color:#fff;font-weight:800;margin-bottom:22px}
.footer .top h2 i{color:var(--accent)}
.social{display:flex;gap:16px;justify-content:center;list-style:none}
.social a{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;
  align-items:center;justify-content:center;font-size:22px;color:#e7eef7;transition:background .18s,transform .18s,color .18s}
.social a:hover{background:var(--accent);color:var(--navy-900);transform:translateY(-3px)}
.footer .bottom{border-top:1px solid rgba(255,255,255,.09);padding:22px 0;text-align:center;font-size:13px;color:#8ba0bb}
.footer .bottom b{color:#cdd8e6;font-weight:600}

/* ---------- Teléfono (devices.css scaler) ---------- */
.phone-mockup{position:relative;width:323px;height:690px;margin:0 auto}
.phone-mockup .device{position:absolute;top:0;left:0;transform:scale(.8);transform-origin:top left}

/* ---------- Animaciones al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero .inner{grid-template-columns:1fr;text-align:center;padding:130px 28px 80px}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .btns{justify-content:center}
  .hero-art{order:-1;margin-bottom:6px}
  .funcs,.integ{grid-template-columns:1fr;gap:34px}
  .cols3{grid-template-columns:repeat(2,1fr)}
  .checklist{grid-template-columns:1fr}
}
@media(max-width:768px){
  .navtoggle{display:block}
  .navlinks{position:absolute;top:100%;right:16px;left:16px;flex-direction:column;align-items:stretch;gap:6px;
    background:rgba(14,42,71,.98);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
    border-radius:14px;padding:14px;box-shadow:0 20px 40px rgba(0,0,0,.35);
    opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s}
  .navlinks.open{opacity:1;visibility:visible;transform:none}
  .navlinks a{padding:10px 12px;border-radius:8px}
  .navlinks a:hover{background:rgba(255,255,255,.08)}
  .navlinks .btn{justify-content:center;margin-top:4px}
  .nav .inner{padding:14px 20px}
}
@media(max-width:560px){
  .cols3,.cols2{grid-template-columns:1fr}
  .phone-mockup{width:283px;height:604px}
  .phone-mockup .device{transform:scale(.7)}
  .section{padding:60px 0}
}