:root{
  --bg:#070B14;
  --panel:#0F172A;
  --panel-2:#0B1220;
  --txt:#E6ECFF;
  --muted:#9FB0D9;
  --brand-1:#7C5CFF;
  --brand-2:#00D1FF;
  --accent:#22D3EE;
  --success:#10B981;
  --danger:#EF4444;
  --ring:#2B3B68;
  --border:#1E2A4A;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#05070D);
  color:var(--txt); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; display:block}
a{color:#BBD4FF; text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92%); margin-inline:auto}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#111827; border-radius:.5rem;
}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background:linear-gradient(180deg,rgba(7,11,20,.9),rgba(7,11,20,.6)); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:1rem; padding:.75rem 0}
.brand{display:inline-flex; align-items:center}
.nav-desktop{margin-left:auto}
.nav-list{display:flex; gap:1.25rem; list-style:none; padding:0; margin:0}
.nav-list a{font-weight:600}
.header-cta{display:flex; gap:.5rem; margin-left:1rem}
.btn{background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); color:#031225; font-weight:800; padding:.62rem 1rem; border-radius:.75rem; border:0; box-shadow:var(--shadow); display:inline-flex; align-items:center; justify-content:center}
.btn:hover{filter:brightness(1.1); text-decoration:none}
.btn-ghost{background:transparent; border:1px solid var(--ring); color:var(--txt)}
.btn-lg{padding:.9rem 1.15rem; font-size:1.05rem}
.block{display:block; width:100%}

.hamburger{display:none; margin-left:.5rem; background:transparent; border:0; padding:.25rem; width:44px; height:40px}
.hamburger span{display:block; height:2px; background:#C8D6FF; margin:7px 4px; border-radius:2px}

/* Mobile nav */
.nav-mobile{display:none; border-top:1px solid var(--border); background:#0B1220}
.nav-mobile.open{display:block}
.nav-mobile ul{list-style:none; margin:0; padding:1rem}
.nav-mobile li{margin:.35rem 0}
.nav-mobile .divider{border-top:1px solid var(--border); margin:.75rem 0}

/* Hero */
.section{padding:64px 0}
.hero{padding:88px 0}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center}
.eyebrow{letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:.25rem 0 1rem}
h1{font-size: clamp(2rem, 4vw + .5rem, 3.25rem); line-height:1.1; margin:.25rem 0 1rem}
.gradient{background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.subhead{color:var(--muted); max-width:52ch}
.cta-row{display:flex; gap:.75rem; margin:1rem 0 1.25rem}
.trust{font-size:.95rem; color:#B6C8F7}
.trust-badge{background:#0E1A33; border:1px solid var(--ring); padding:.1rem .4rem; border-radius:.4rem; margin-right:.4rem}
.hero-art{display:flex; justify-content:center}
.hero-svg{width:min(520px,100%); height:auto; border:1px solid var(--border); border-radius:1.25rem; box-shadow:var(--shadow)}

/* Features */
.section-title{font-size: clamp(1.5rem, 1.2rem + 2vw, 2rem); margin:0 0 .25rem}
.section-sub{color:var(--muted); margin:.25rem 0 1.5rem}
.features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.feature-card{background:linear-gradient(180deg,#0B1220,#0A1220); border:1px solid var(--border); border-radius:1rem; padding:1rem}
.feature-card h3{margin:.5rem 0 .25rem}

/* Feature Panels (6 cards) */
.feature-panels { background: radial-gradient(1100px 420px at 50% -30%, rgba(34,211,238,.08), transparent); }
.panel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
.panel-card{
  position:relative;
  background:linear-gradient(180deg,#0B1220,#0B1421);
  border:1px solid var(--border);
  border-radius:1.1rem;
  padding:1.25rem 1.25rem 1.4rem;
  min-height:200px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:inset 0 0 0 1px rgba(30,42,74,.15);
}
.panel-card::after{
  content:"";
  position:absolute; inset:auto 12px 12px 12px; height:1px;
  background:linear-gradient(90deg, rgba(124,92,255,.35), rgba(0,209,255,.35));
  border-radius:999px; opacity:.6;
}
.panel-card:hover{ transform:translateY(-2px); border-color:#223056; box-shadow:var(--shadow); }
.panel-icon{ margin-bottom:.75rem }
.panel-title{ color:var(--success); margin:.25rem 0 .4rem; font-weight:800; }
.panel-copy{ color:#C2D3FB; margin:0; }

/* Responsive tweaks for the 6-up grid */
@media (max-width: 980px){
  .panel-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 640px){
  .panel-grid{ grid-template-columns:1fr; }
}


.pricing{background:radial-gradient(1200px 400px at 50% -40%, rgba(124,92,255,.18), transparent)}
.billing-toggle{display:flex; gap:.5rem; justify-content:center; margin:0 0 1rem}
.toggle-btn{border:1px solid var(--ring); background:#0E1530; color:var(--txt); padding:.5rem .75rem; border-radius:999px; font-weight:700}
.toggle-btn.active{background:linear-gradient(90deg,var(--brand-1),var(--brand-2)); color:#081324}
.toggle-btn .pill{margin-left:.5rem; background:#09122A; border:1px solid var(--ring); padding:.15rem .45rem; border-radius:999px; font-size:.8em}
.pricing-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem}
.price-card{background:linear-gradient(180deg,#0B1220,#0B1422); border:1px solid var(--border); border-radius:1rem; padding:1.25rem; position:relative}
.price-card.highlight{outline:2px solid rgba(0,209,255,.25)}
.plan-badge{position:absolute; top:12px; right:12px; font-size:.75rem; background:#0E1A33; border:1px solid var(--ring); padding:.15rem .45rem; border-radius:.4rem}
.muted{color:var(--muted)}
.price{font-weight:900; font-size:2rem; margin:.25rem 0}
.price .currency{opacity:.9}
.price .per{font-weight:600; color:var(--muted); font-size:1rem}
.savings{color:#B6F2CF; font-weight:700; margin:-.25rem 0 .5rem}
.features-list{padding-left:1.1rem}
.features-list li{margin:.35rem 0}

/* CTA banner */
.cta-banner{background:linear-gradient(180deg,#0B1220,#0C162B); border-block:1px solid var(--border)}
.cta-inner{display:flex; gap:1rem; align-items:center; justify-content:space-between}
.inline-form{display:flex; gap:.5rem; flex-wrap:wrap}
.inline-form input{flex:1 1 260px; padding:.7rem .9rem; border-radius:.65rem; border:1px solid var(--ring); background:#0C1430; color:var(--txt)}
.inline-form .form-msg{margin:0 .5rem}

/* FAQs */
.faq-list{display:grid; gap:.5rem}
.faq-item{background:#0B1220; border:1px solid var(--border); border-radius:.75rem}
.faq-q{width:100%; text-align:left; background:transparent; color:var(--txt); border:0; padding:.9rem 1rem; font-weight:700; display:flex; justify-content:space-between; align-items:center}
.faq-a{padding:0 1rem 1rem; color:#C9D6F6; border-top:1px dashed var(--border)}
.faq-icon{font-weight:900}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.contact-form input, .contact-form textarea{width:100%; padding:.65rem .75rem; border-radius:.5rem; border:1px solid var(--ring); background:#0C1430; color:var(--txt)}
.contact-form label{display:block; margin:.5rem 0 .25rem}

/* Footer */
.site-footer{border-top:1px solid var(--border); padding:40px 0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:1rem}
.footer-title{margin:.25rem 0 .5rem}
.fine{color:#8CA3D4; font-size:.9rem}
.cookie-row{margin-top:10px}

/* Cookie Modal */
.cookie-modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(1,3,8,.65); padding:1rem}
.cookie-card{width:min(560px, 96vw); background:#0B1220; border:1px solid var(--border); border-radius:1rem; padding:1rem; box-shadow:var(--shadow)}
.cookie-option{display:flex; gap:.5rem; align-items:center; margin:.35rem 0}
.cookie-actions{display:flex; gap:.5rem; justify-content:flex-end; margin-top:.5rem}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(0,0,0,.7); display:grid; place-items:center; padding:2rem}
.lightbox-inner{width:min(960px, 96vw); background:#000; border-radius:.75rem; position:relative}
.lightbox-media{aspect-ratio:16/9}
.lightbox-media iframe{width:100%; height:100%; border:0; display:block}
.lightbox-close{position:absolute; top:.25rem; right:.35rem; background:transparent; border:0; color:#fff; font-size:2rem; line-height:1; padding:.25rem .5rem; cursor:pointer}

/* Utilities */
.center-cta{display:flex; justify-content:center; margin:1.25rem 0 0}
.sr-only{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav-desktop{display:none}
  .hamburger{display:inline-flex}
  .cta-inner{flex-direction:column; align-items:flex-start}
  .features-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

#features-pro {
  scroll-margin-top: 80px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr; /* texto 1 parte, imagen 1.3 partes */
  gap: 2rem;
  align-items: center;
}

/* Demo / Feature Split with GIF */
.demo-split { background: linear-gradient(180deg, #090f1c, #0a1220); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.split-grid {
  display:grid;
  grid-template-columns: 1.05fr 0.95fr; /* text | media */
  gap:2rem;
  align-items:center;
}

.split-copy .section-title { margin-top:0; }
.check-list { list-style:none; padding:0; margin:1rem 0 0; display:grid; gap:.5rem; }
.check-list li {
  position:relative; padding-left:1.6rem; color:#CFE2FF; font-weight:600;
}
.check-list li::before {
  content:"✓"; position:absolute; left:0; top:0; line-height:1;
  background:#0E1A33; border:1px solid var(--ring); border-radius:.5rem;
  width:1.2rem; height:1.2rem; display:grid; place-items:center; font-size:.8rem; color:#62D9FF;
}

.split-media {
  border-radius:14px; background:#0B1220; border:1px solid #1b2746;
  box-shadow: 0 12px 28px rgba(0,0,0,.45), inset 0 0 0 1px rgba(124,92,255,.08);
  padding:.6rem;  /* small bezel around the GIF */
}

.gif-media {
  display:block; width:100%; height:auto; border-radius:10px;
}

/* Responsive */
@media (max-width: 980px){
  .split-grid { grid-template-columns:1fr; }
  .split-media { order:-1; } /* show GIF first on small screens */
}

/* =========================
   MOBILE FIX PATCH (Header + Hero)
   ========================= */

/* Layout del header más flexible */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:nowrap;
}

/* Logo: controla el alto (no fijes width en el HTML) */
.site-header .brand img{
  height:55px;      /* desktop cómodo */
  width:auto;
  display:block;
}

/* Nav centrado y con menos separación */

.nav-desktop{ flex:1 1 auto; display:flex; justify-content:center; }
.nav-list{ display:flex; gap:1rem; flex-wrap:nowrap; }
.nav-list a{ white-space:nowrap; }

/* Botones del header más compactos */
.header-cta{ flex:0 0 auto; display:flex; gap:.5rem; white-space:nowrap; }
.header-cta .btn{ padding:.55rem .9rem; font-size:.95rem; }

/* --- Breakpoints --- */
@media (max-width: 1024px){
  .site-header .brand img{ height:38px; }
  .nav-list{ gap:.75rem; }
  .header-cta .btn{ padding:.5rem .8rem; font-size:.9rem; }
}

@media (max-width: 768px){
  /* En móvil: logo legible pero sin romper el header */
  .site-header .brand img{ height:32px; }

  /* Oculta el nav de escritorio si ya usas hamburguesa */
  .nav-desktop{ display:none; }

  /* Botones header más chicos */
  .header-cta .btn{ padding:.45rem .7rem; font-size:.85rem; }

  /* Hero: una sola columna, centro y mejor respiración */
  .hero-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1.25rem;
    align-items:start;
  }
  .hero-copy{
    text-align:center;
    padding:0 1rem;
    max-width:36rem;
    margin:0 auto;
  }
  .hero-copy .eyebrow{ letter-spacing:.18em; }
  .hero-copy h1{ font-size:1.95rem; line-height:1.25; }
  .hero-copy .subhead{ font-size:1rem; }

  /* Hero image/GIF siempre dentro y sin recorte */
  .hero-art{ order:1; display:flex; justify-content:center; }
  .hero-art img, .hero-art svg{
    max-width:100%;
    height:auto;
    object-fit:contain;
    margin:0 auto;
  }

  /* CTA buttons del hero en dos columnas si cabe */
  .cta-row{ display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center; }
  .btn.btn-lg{ padding:.8rem 1rem; font-size:1rem; }
}

/* Ajuste extra para pantallas muy pequeñas (≤360px) */
@media (max-width: 360px){
  .site-header .brand img{ height:28px; }
  .header-cta .btn{ padding:.4rem .6rem; font-size:.8rem; }
  .btn.btn-lg{ width:100%; }
}

/* Imagen del demo/gif (si la usas) responsiva siempre */
.split-media, .video-thumb, .gif-media{
  max-width:100%;
}
.gif-media{ width:100%; height:auto; display:block; }

/* ===== Fix: hamburger visible on mobile ===== */
.hamburger{
  display:none;                 /* visible solo en móvil */
  width:44px; height:40px;      /* target táctil recomendado */
  justify-content:center; align-items:center;
  border:1px solid var(--ring);
  background:rgba(12,20,48,.55);
  border-radius:10px;
  position:relative;
  z-index:1002;                 /* por encima de botones/gradientes */
  cursor:pointer;
}

/* Las 3 barras */
.hamburger span{
  position:absolute;
  left:10px; right:10px;
  height:2px; border-radius:2px;
  background:#E6EEFF;           /* alto contraste */
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
  transition:transform .2s ease, opacity .2s ease;
}
.hamburger span:nth-child(1){ top:11px; }
.hamburger span:nth-child(2){ top:18px; }
.hamburger span:nth-child(3){ top:25px; }

/* Estado abierto opcional (si tu JS añade .open al botón) */
.hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mostrar y despejar espacio en móvil */
@media (max-width: 768px){
  .nav-desktop{ display:none; }
  .header-cta{ display:none; }          /* oculta CTAs para que el botón no quede tapado */
  .hamburger{ display:inline-flex; margin-left:auto; }
  .site-header .brand img{ height:32px; }  /* opcional, para equilibrio visual */
}

/* Por si el menú móvil se queda detrás de algo */
.nav-mobile{ z-index: 1001; }