:root{
  --bg:#f7f8fb;
  --panel:#ffffff;
  --panel2:#f2f4f8;
  --text:#0b0d12;
  --muted:#404654;
  --line:rgba(11,13,18,.10);

  --neonY:#ffe800;
  --neonG:#39ff14;
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,232,0,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 15%, rgba(57,255,20,.18), transparent 60%),
    var(--bg);
}
a{color:inherit;text-decoration:none}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* =======================
   TOPBAR / NAV
   ======================= */
.topbar{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(247,248,251,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);

  /* iPhone notch safe-area */
  padding-top: env(safe-area-inset-top);
}
@supports (-webkit-touch-callout: none){
  .topbar{ padding-top: env(safe-area-inset-top); }
}

.topbar__inner{
  position:relative; /* el dropdown se posiciona respecto al header */
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
  gap:16px;
}

.logo{font-weight:900;letter-spacing:.2px;font-size:20px;line-height:1}
.logo span{
  background:linear-gradient(90deg,var(--neonY),var(--neonG));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Nav desktop */
.nav{
  display:flex;
  gap:16px;
  align-items:center;
  margin-left:auto;
}
.nav a{color:var(--muted);font-weight:800}
.nav a:hover{color:var(--text)}

/* =======================
   BUTTONS
   ======================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px;border-radius:999px;
  border:1px solid rgba(11,13,18,.14);
  background:linear-gradient(90deg, rgba(255,232,0,.85), rgba(57,255,20,.75));
  color:var(--text);
  font-weight:900;
  cursor:pointer;
  box-shadow: 0 10px 24px rgba(11,13,18,.08);
  transition: transform .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{
  background:transparent;
  border:1px solid rgba(11,13,18,.18);
  color:var(--text);
  box-shadow:none;
}
.btn--small{padding:11px 14px;font-size:14px}

/* =======================
   HERO
   ======================= */
.hero{padding:76px 0 28px}
.hero__grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:start;
}

.pill{
  display:inline-flex;
  border:1px solid rgba(11,13,18,.14);
  padding:9px 12px;border-radius:999px;
  color:var(--muted);
  background:rgba(255,255,255,.7);
  margin:0 0 16px;
  font-weight:800;
}

h1{
  font-size:56px;
  line-height:1.02;
  margin:0 0 14px;
  letter-spacing:-.8px;
}
.lead{
  font-size:20px;
  color:var(--muted);
  margin:0 0 18px;
  max-width:60ch;
}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.trust{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.trust div{
  padding:14px;
  border:1px solid rgba(11,13,18,.10);
  border-radius:var(--radius);
  background:rgba(255,255,255,.75);
}
.trust strong{display:block;font-weight:1000}
.trust span{color:var(--muted);font-size:13px;font-weight:700}

/* hero card */
.hero__card{
  border:1px solid rgba(11,13,18,.10);
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  padding:18px;
  box-shadow: 0 14px 34px rgba(11,13,18,.08);
}
.hero__card h3{margin:0 0 10px;font-size:20px}
.hero__card ul{margin:10px 0 14px;padding-left:18px;color:var(--muted);font-weight:700}
.hero__card li{margin:6px 0}

/* =======================
   SECTIONS
   ======================= */
.section{padding:62px 0}
.section--alt{
  background:var(--panel2);
  border-top:1px solid rgba(11,13,18,.06);
  border-bottom:1px solid rgba(11,13,18,.06);
}
h2{font-size:34px;margin:0 0 14px;letter-spacing:-.4px}
.muted{color:var(--muted);font-weight:700}

/* cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:16px;
}
.card{
  border:1px solid rgba(11,13,18,.10);
  border-radius:var(--radius);
  background:var(--panel);
  padding:18px;
  box-shadow: 0 12px 28px rgba(11,13,18,.06);
}
.card h3{margin:0 0 6px;font-size:20px}
.card p{color:var(--muted);margin:6px 0 0;font-weight:700}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
.step{
  border:1px solid rgba(11,13,18,.10);
  border-radius:var(--radius);
  padding:18px;
  background:var(--panel);
  box-shadow: 0 12px 28px rgba(11,13,18,.06);
}
.step span{
  display:inline-flex;width:30px;height:30px;border-radius:12px;
  align-items:center;justify-content:center;
  background:linear-gradient(90deg, rgba(255,232,0,.85), rgba(57,255,20,.75));
  border:1px solid rgba(11,13,18,.12);
  margin-bottom:10px;
  font-weight:1000;
}
.step p{color:var(--muted);margin:6px 0 0;font-weight:700}

/* =======================
   QUIZ
   ======================= */
.quiz{
  margin-top:16px;
  border:1px solid rgba(11,13,18,.10);
  border-radius:var(--radius);
  background:var(--panel);
  padding:18px;
  box-shadow: 0 14px 34px rgba(11,13,18,.07);

  max-width: 920px;
  margin-left:auto;
  margin-right:auto;
}
.quiz__top{display:flex;align-items:center;gap:12px;margin-bottom:14px}

.progress{
  flex:1;height:10px;border-radius:999px;
  background:rgba(11,13,18,.06);
  overflow:hidden;border:1px solid rgba(11,13,18,.10);
}
.progress__bar{height:100%;width:0%}
.progress__text{color:var(--muted);font-size:14px;min-width:72px;text-align:right;font-weight:900}

.qstep{display:none;animation:fade .18s ease}
.qstep.is-active{display:block}
@keyframes fade{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

.qstep h3{ text-align:center; margin-top:6px; }

.options{
  display:grid;
  gap:10px;
  margin:14px auto 0;
  max-width:760px;
}
.opt{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  padding:16px 14px;
  border:1px solid rgba(11,13,18,.12);
  border-radius:14px;
  background:rgba(247,248,251,.7);
  cursor:pointer;
  font-weight:900;
  line-height:1.2;
  text-align:left;
}
.opt:hover{
  border-color:rgba(11,13,18,.28);
  box-shadow: 0 10px 18px rgba(11,13,18,.06);
}
.opt input{
  accent-color: var(--neonG);
  flex:0 0 auto;
  margin:0;
}

.field{margin-top:14px}
label{display:block;color:var(--muted);font-size:14px;margin-bottom:6px;font-weight:900}

input:not([type="radio"]):not([type="checkbox"]),
textarea{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(11,13,18,.14);
  background:#fff;
  color:var(--text);
  font-weight:800;
}
input[type="radio"],
input[type="checkbox"]{ width:auto; padding:0; }
textarea{resize:vertical}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}

.check{
  display:flex;gap:10px;align-items:flex-start;
  margin-top:12px;
  color:var(--muted);
  font-weight:900;
}
.check input{margin-top:3px;accent-color: var(--neonY)}

.quiz__nav{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin:18px auto 0;
  max-width:760px;
}
.quiz__nav .btn{flex:0 1 260px}
#submitBtn{display:none}

/* =======================
   FAQ
   ======================= */
.faq details{
  border:1px solid rgba(11,13,18,.10);
  border-radius:14px;
  padding:14px 14px;
  background:var(--panel);
  margin-top:10px;
  box-shadow: 0 10px 22px rgba(11,13,18,.05);
}
.faq summary{cursor:pointer;font-weight:1000;font-size:16px}
.faq p{color:var(--muted);margin:10px 0 0;font-weight:800}

/* =======================
   FOOTER
   ======================= */
.footer{padding:30px 0;border-top:1px solid rgba(11,13,18,.10)}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}
.footer__links{
  display:flex;
  gap:14px;
  color:var(--muted);
  font-weight:900;
  flex-wrap:wrap;
  margin-left:auto;
  justify-content:flex-end;
  row-gap:10px;
}

/* =======================
   RESPONSIVE (tablet)
   ======================= */
@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  h1{font-size:44px}
  .trust{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
}

/* =========================================================
   HAMBURGUESA (MÓVIL) — CSS ÚNICO (SIN DUPLICADOS)
   ========================================================= */

/* Oculto en desktop */
.navToggle{
  display:none;
  width:46px;height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:#000;
  cursor:pointer;
  padding:12px 11px;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 12px 26px rgba(0,0,0,.22);
  -webkit-tap-highlight-color: transparent;
}
.navToggle span{
  display:block;
  width:22px;height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--neonY),var(--neonG));
  transition:transform .18s ease, opacity .18s ease;
}
.navToggle.is-open span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.navToggle.is-open span:nth-child(2){ opacity:0; }
.navToggle.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

@media (max-width: 720px){

  .container{ padding: 0 16px; }

  h1{ font-size: 40px; line-height: 1.05; }
  h2{ font-size: 28px; }
  .lead{ font-size: 18px; }

  .hero{ padding: 56px 0 18px; }
  .section{ padding: 46px 0; }

  /* Header en una línea */
  .topbar__inner{
    height:auto;
    padding:12px 0;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }

  .logo{ font-size:75px; }

  /* Mostrar hamburguesa */
  .navToggle{ display:inline-flex; margin-left:auto; }

  /* Menú desplegable */
  .nav{
    display:none;
    position:absolute;
    left:16px;
    right:16px;

    /* Ajustado por JS con altura real del header */
    top: var(--navTop, 72px);

    margin-left:0;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:18px;

    background:#000;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 22px 50px rgba(0,0,0,.35);
    z-index:9999;

    max-height:min(70vh, 520px);
    overflow:auto;
    -webkit-overflow-scrolling: touch;

    opacity:0;
    transform:translateY(-10px) scale(.98);
    transition:opacity .18s ease, transform .18s ease;
  }

  .nav.is-open{
    display:flex;
    opacity:1;
    transform:translateY(0) scale(1);
  }

  .nav a:not(.btn){
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 14px;
    border-radius:999px;
    font-weight:900;

    color:#fff;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.10);
  }

  /* CTA dentro del menú */
  .nav a.btn{
    width:100%;
    justify-content:center;
    background:linear-gradient(90deg,var(--neonY),var(--neonG));
    color:#0b0d12;
    border:1px solid rgba(0,0,0,.35);
    box-shadow:
      0 0 0 1px rgba(255,255,255,.10),
      0 14px 34px rgba(0,0,0,.35),
      0 0 22px rgba(255,232,0,.30),
      0 0 28px rgba(57,255,20,.22);
  }
  .nav a.btn:active{ transform:scale(.99); }

  /* Footer móvil */
  .footer__inner{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .footer__links{
    width:100%;
    margin-left:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    justify-content:stretch;
  }
  .footer__links a{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px 12px;
    border-radius:999px;
    font-weight:900;
    background:rgba(255,255,255,.78);
    border:1px solid rgba(11,13,18,.10);
    color:var(--text);
    text-align:center;
  }
}
/* =========================
   FIX: logo + hamburguesa alineados (móvil)
   + "Hacer el quiz" corporativo dentro del menú
   (PEGAR AL FINAL)
   ========================= */

@media (max-width: 720px){

  /* Asegura que logo y botón queden centrados en la misma línea */
  .topbar__inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:12px 0 !important;
  }

  .logo{
    display:flex !important;
    align-items:center !important;
    line-height:1 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .navToggle{
    flex:0 0 auto !important;
    align-self:center !important;
  }

  /* --- CTA dentro del menú: texto corporativo (gradiente) --- */
  .nav a.btn.btn--ghost{
    width:100%;
    justify-content:center;

    /* fondo negro del menú, pero texto corporativo */
    background:transparent !important;
    border:1px solid rgba(255,255,255,.18) !important;
    box-shadow:none !important;

    color:transparent !important;
    background-image: linear-gradient(90deg, var(--neonY), var(--neonG)) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
  }

  /* toque "tap" en móvil */
  .nav a.btn.btn--ghost:active{
    transform:scale(.99);
  }
}
/* =====================================
   FIX CENTRADO HEADER EN MÓVIL
   logo + hamburguesa más hacia dentro
   ===================================== */

@media (max-width: 720px){

  /* Más aire lateral real */
  .topbar .container{
    padding-left:22px !important;
    padding-right:22px !important;
  }

  /* Ajuste fino de alineación vertical */
  .topbar__inner{
    min-height:64px;
    align-items:center !important;
  }

  .logo{
    display:flex;
    align-items:center;
    line-height:1;
  }

  .navToggle{
    margin-left:auto;
    margin-right:0;
  }

  /* Dropdown también con el mismo margen lateral */
  .nav{
    left:22px !important;
    right:22px !important;
  }
}
.logo img{
  display:block;
  height:100px;
  width:auto;
}
/* =====================================
   SECCIÓN EJEMPLOS — fondo corporativo
   ===================================== */

#portfolio{
  background: linear-gradient(135deg, var(--neonY), var(--neonG));
  color:#000000;
}

/* títulos y textos en negro */
#portfolio h2,
#portfolio h3,
#portfolio p{
  color:#000000 !important;
}

/* texto muted en negro suavizado */
#portfolio .muted{
  color:rgba(0,0,0,.75) !important;
}

/* tarjetas dentro de ejemplos — fondo claro para contraste */
#portfolio .card{
  background: rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* párrafos dentro de cards */
#portfolio .card p{
  color:#000000;
}
/* =====================================
   SECCIÓN ZONAS — fondo corporativo
   ===================================== */

#zonas{
  background: linear-gradient(135deg, var(--neonY), var(--neonG));
  color:#000;
}

/* títulos y texto negro */
#zonas h2,
#zonas h3,
#zonas p{
  color:#000 !important;
}

/* muted en negro suave */
#zonas .muted{
  color:rgba(0,0,0,.75) !important;
}

/* cards con fondo claro para contraste */
#zonas .card{
  background: rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.15);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

/* botones dentro — asegurar contraste */
#zonas .btn--small{
  color:#000;
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}
/* ===== COOKIE BAR ===== */

.cookiebar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.cookiebar__inner{
  max-width: 1000px;
  margin: auto;
  background: #111827;
  color: #fff;
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}

.cookiebar__text p{
  margin: 6px 0 0 0;
  font-size: 14px;
  opacity: .9;
}

.cookiebar__text a{
  color: #fff;
  text-decoration: underline;
}

.cookiebar__actions{
  display: flex;
  gap: 10px;
}
/* Fix botón Rechazar (ghost) dentro de cookiebar */
.cookiebar .btn--ghost{
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  opacity: 1 !important;
}

.cookiebar .btn--ghost:hover{
  border-color: rgba(255,255,255,.6) !important;
  background: rgba(255,255,255,.08) !important;
}