/* ========== THEME ==========
  Paleta principal: 
  --primary: #23394D (reemplaza #0E4381)
  --accent:  #FFD600 (se mantiene)
*/
:root{
  --primary:#23394D;
  --primary-2:#1B2D3B;
  --ink:#0F1820;
  --surface:#F7F8FA;
  --surface-2:#ECF0F3;
  --glass: rgba(255,255,255,.26);
  --stroke: rgba(0,0,0,.06);
  --text:#2B3340;
  --muted:#6C7582;
  --accent:#FFD600;
  --accent-ink:#1F1F1F;
}
:root[data-theme="dark"]{
  --primary:#23394D;
  --primary-2:#0E1C27;
  --ink:#EAF0F6;
  --surface:#0F1720;
  --surface-2:#121B26;
  --glass: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.06);
  --text:#E7EEF5;
  --muted:#A8B3C0;
  --accent:#FFD600;
  --accent-ink:#0F1215;
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 90% -20%, rgba(255,214,0,.10), transparent 60%),
    radial-gradient(800px 600px at -10% 110%, rgba(35,57,77,.25), transparent 60%),
    var(--surface);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3{font-family:Montserrat, Inter, system-ui, sans-serif}
img{max-width:100%;display:block}

/* ========== HEADER ========== */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:16px; justify-content:space-between;
  padding:12px 18px;
  background:linear-gradient(90deg, var(--primary) 78%, rgba(35,57,77,.85) 100%);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  border-bottom:1px solid var(--stroke);
  backdrop-filter:saturate(140%) blur(8px);
}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand__logo{width:36px;height:36px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.1)}
.brand__logo--sm{width:28px;height:28px}
.brand__name{font-weight:800;letter-spacing:.3px}
.nav{position:relative}
.nav__toggle{
  display:none; flex-direction:column; gap:4px;
  background:transparent; border:0; cursor:pointer
}
.nav__toggle span{width:20px;height:2px;background:#fff;display:block;border-radius:2px}
.nav__list{display:flex;gap:18px;list-style:none;margin:0;padding:0}
.nav__list a{color:#fff;text-decoration:none;opacity:.9;transition:opacity .2s}
.nav__list a:hover{opacity:1}
.theme-toggle{
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1);
  color:#fff; border-radius:999px;
  padding:6px 10px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  backdrop-filter:blur(6px);
}
.theme-toggle .sun{filter:drop-shadow(0 2px 8px rgba(255,214,0,.45))}
.theme-toggle .moon{opacity:.9}

/* ========== HERO ========== */
.hero{
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:24px;
  padding:72px 22px 34px;
}
.blob{
  position:absolute; filter:blur(36px); opacity:.55; pointer-events:none;
  animation:float 14s ease-in-out infinite;
}
.blob--one{
  width:440px;height:440px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,214,0,.55), rgba(255,214,0,.05) 60%);
  top:-140px; left:-80px; animation-delay:0s;
}
.blob--two{
  width:520px;height:520px;border-radius:50%;
  background: radial-gradient(circle at 70% 70%, rgba(35,57,77,.55), rgba(35,57,77,.05) 60%);
  bottom:-220px; right:-140px; animation-delay:.8s;
}
@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-16px)}
}
.glass{
  background:var(--glass);
  border:1px solid var(--stroke);
  box-shadow:0 20px 60px rgba(0,0,0,.08);
  backdrop-filter: blur(12px) saturate(130%);
  border-radius:20px;
}
.hero__content{
  padding:28px 26px;
}
.hero h1{
  font-size: clamp(32px, 5vw, 56px);
  line-height:1.05;
  margin:0 0 10px;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.3);
}
.highlight{
  display:block;
  color:var(--accent);
  text-shadow:0 4px 24px rgba(255,214,0,.45);
}
.subtitle{
  color:#ECF2F8;
  font-size:clamp(16px,1.7vw,18px);
  margin:8px 0 18px;
}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  --ring:0 8px 26px rgba(255,214,0,.35);
  appearance:none; border:0; cursor:pointer;
  padding:12px 18px; border-radius:14px;
  font-weight:700; letter-spacing:.3px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  transform:translateZ(0);
  transition:transform .15s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.btn--primary{
  background:linear-gradient(180deg, var(--accent), #E6C300);
  color:var(--accent-ink);
  box-shadow:var(--ring);
}
.btn--primary:hover{transform:translateY(-2px) scale(1.02); box-shadow:0 14px 40px rgba(255,214,0,.45)}
.btn--ghost{
  background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45)
}
.btn--ghost:hover{background:rgba(255,255,255,.12)}
.btn--lg{font-size:18px; padding:14px 22px; border-radius:16px}

.device{justify-self:center;text-align:center;color:var(--muted)}
.device__frame{
  width:min(360px, 78vw); aspect-ratio:9/19.5;
  border-radius:34px; padding:14px; position:relative;
  background:linear-gradient(145deg,#0B1520,#273A4C);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.06),
    0 18px 50px rgba(0,0,0,.35),
    0 2px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.device__frame img{width:100%;height:100%;object-fit:cover;border-radius:24px}
.device__shine{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 60% at 80% -10%, rgba(255,255,255,.35), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,.05), transparent 30%);
  mix-blend-mode:screen;
}

/* ========== SECTIONS ========== */
.section{padding:64px 22px; max-width:1180px; margin:0 auto}
.section--alt{background:linear-gradient(180deg, transparent, rgba(255,255,255,.06))}
.section--cta{display:grid; place-items:center; padding:88px 22px}
.section__title{font-size:clamp(26px,3.6vw,38px); margin:0 0 6px; color:var(--ink)}
.section__lead{color:var(--muted); margin:6px 0 24px}

/* ========== GRID FEATURES ========== */
.grid{display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.6));
  border:1px solid var(--stroke);
  border-radius:16px; padding:18px 16px;
  box-shadow:0 16px 42px rgba(35,57,77,.10);
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  backdrop-filter: blur(10px);
}
.card:hover{transform:translateY(-6px); box-shadow:0 26px 60px rgba(35,57,77,.18); border-color:rgba(255,214,0,.45)}
.card__icon{width:40px;height:40px;color:var(--primary); display:grid;place-items:center;margin-bottom:8px}
.card__icon svg{width:28px;height:28px;stroke-width:2.2}

/* ========== COMPARE ========== */
.compare{
  position:relative; max-width:980px; margin:18px auto 0; border-radius:18px; overflow:hidden;
  box-shadow: 0 18px 46px rgba(0,0,0,.15);
}
.compare__img{position:relative}
.compare__img img{width:100%;height:auto;display:block}
.compare__img--before{
  position:absolute; inset:0; width:var(--clip, 50%); overflow:hidden; border-right:2px dashed rgba(255,214,0,.75)
}
.compare__slider{
  -webkit-appearance:none; appearance:none; width:100%; height:0; position:absolute; inset:0;
  background:transparent; outline:none;
}
.compare__slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px;height:26px;border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #E9E9E9);
  border:2px solid var(--accent); box-shadow:0 8px 22px rgba(0,0,0,.18);
  cursor:ew-resize; margin-top:-13px
}
.compare__slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:2px solid var(--accent);background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18);cursor:ew-resize}

/* ========== MASONRY GALLERY ========== */
.masonry{
  columns: 3 260px; column-gap:14px;
}
.masonry img{
  width:100%; margin:0 0 14px; border-radius:14px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .25s ease;
}
.masonry img:hover{transform:translateY(-4px); box-shadow:0 22px 46px rgba(0,0,0,.20)}

/* ========== CTA CARD ========== */
.cta-card{
  text-align:center; padding:34px 24px; max-width:760px;
  border-radius:22px;
}
.small-note{color:var(--muted); margin-top:10px}

/* ========== FORM ========== */
.form{max-width:540px;margin:12px auto 0; display:grid; gap:14px}
.form__row{display:grid; gap:6px}
.form label{font-weight:600; color:var(--ink)}
.form input, .form textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:#fff; color:var(--text);
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
:root[data-theme="dark"] .form input, 
:root[data-theme="dark"] .form textarea{background:rgba(255,255,255,.06); color:var(--text)}
.form input:focus, .form textarea:focus{border-color:rgba(255,214,0,.7); box-shadow:0 8px 24px rgba(255,214,0,.15)}
.form textarea{min-height:120px}
.form button{justify-self:start}

/* ========== FOOTER ========== */
.site-footer{
  margin-top:56px; padding:26px 22px;
  background: linear-gradient(90deg, var(--primary) 60%, var(--primary-2) 100%);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-footer__grid{
  display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:18px; align-items:start;
}
.site-footer nav a{display:block; color:#fff; opacity:.85; text-decoration:none; margin-bottom:8px}
.site-footer nav a:hover{opacity:1; text-decoration:underline}
.contact a{color:#fff; text-decoration:underline}

/* ========== RESPONSIVE ========== */
@media (max-width: 980px){
  .hero{grid-template-columns:1fr; padding-top:56px}
  .device{order:2}
  .hero__content{order:1}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
  .nav__toggle{display:flex}
  .nav__list{
    position:absolute; right:0; top:44px; background:rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    border-radius:12px; padding:10px; display:none; flex-direction:column; gap:8px;
  }
  .nav__list.is-open{display:flex}
  .section{padding:48px 18px}
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .blob{display:none}
}