:root{
  --bg:#090909;
  --bg-card:#121212;
  --bg-card-line: rgba(255,255,255,0.08);
  --white:#F5F5F5;
  --muted: rgba(245,245,245,0.6);
  --green-2:#30D68A;
  --slate:#35435A;
  --font-display:"Sora", -apple-system, sans-serif;
  --font-body:"Inter", -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html {
  scroll-behavior: smooth; 
  scroll-padding-top: 64px;
  overflow-x: hidden;
  width: 100%;
}
body {
  background: var(--bg); 
  color: var(--white); 
  font-family: var(--font-body); 
  line-height: 1.55; 
  overflow-x: hidden; 
  padding-top: 70px;
  width: 100%;
}
a{text-decoration:none; color:inherit;}

/* Fixed Navigation */
header.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 16px 0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

header.nav.scrolled{
  background:rgba(9,9,9,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--bg-card-line);
}
.brand{font-family:var(--font-display); font-weight:800; font-size:25px; letter-spacing:0.5px;}
.brand .dot{color:var(--green-2);}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-links a.link{
  font-size:14px; font-weight:600; color:var(--muted); padding:10px 16px; border-radius:8px; position:relative;
}
.nav-links a.link:hover{color:var(--white);}
.nav-links a.link.active{color:var(--white);}
.nav-links a.link.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:2px; height:2px; background:var(--green-2);
}

.nav-actions{display:flex; align-items:center; gap:10px;}
.btn-nav{
  padding:11px 20px; border-radius:8px; font-weight:700; font-size:13.5px; border:1px solid var(--bg-card-line); cursor:pointer;
}
.btn-nav.ghost{background:var(--slate); color:var(--white); border-color:var(--slate);}
.btn-nav.solid{background:var(--green-2); color:#062012; border-color:var(--green-2);}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  z-index: 220;
  width: 36px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0;}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-menu{
  display:none; position:fixed; left:0; right:0; top:0; z-index:190;
  background:rgba(9,9,9,0.98); backdrop-filter:blur(10px);
  flex-direction:column;
  padding:88px 28px 32px;
  border-bottom:1px solid var(--bg-card-line);
  max-height:100vh; overflow-y:auto;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
  font-size:16px; font-family:var(--font-body); font-weight:600; color:var(--white);
  padding:16px 4px; border-bottom:1px solid var(--bg-card-line);
}
.mobile-menu a:last-child{border-bottom:none; color:var(--green-2); margin-top:8px;}

/* Hero */
.hero {
  scroll-margin-top: 0; 
  position: relative; 
  min-height: auto;
  display: flex; 
  flex-direction: column; 
  justify-content: center;
  padding: 110px 48px 80px; 
  max-width: 1280px; 
  margin: 0 auto;
}
.glow {
  position: absolute; 
  top: -40px; 
  right: -20px; 
  width: 460px; 
  height: 460px; 
  border-radius: 50%;
  background: radial-gradient(circle, rgba(48,214,138,0.22) 0%, rgba(48,214,138,0.05) 50%, transparent 100%);
  filter: blur(40px); 
  pointer-events: none;
}
.eyebrow{font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--green-2); font-weight:700; margin-bottom:22px;}
.hero h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(2.4rem,6vw,4.6rem); line-height:1.18; letter-spacing:-1.5px; max-width:820px;
}
.hero h1 .hl{color:var(--green-2);}
.slogan{margin-top:24px; font-size:clamp(15px,2vw,19px); color:var(--muted); max-width:520px;}
.cta-row{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
.btn{padding:16px 30px; border-radius:10px; font-weight:700; font-size:15px; border:1px solid transparent; cursor:pointer;}
.btn-primary{background:var(--green-2); color:#062012;}
.btn-secondary{background:var(--slate); color:var(--white); border-color:var(--slate);}

/* Steps section */
section.steps{padding:40px 48px 200px; max-width:1180px; margin:0 auto; scroll-margin-top:72px;}
.section-title{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.8rem,3.6vw,2.6rem);
  text-align:center; margin-bottom:16px; letter-spacing:-0.5px;
}
.section-sub{
  display:flex; align-items:center; justify-content:center; gap:14px;
  color:var(--muted); font-size:14px; font-weight:600; text-align:center; margin-bottom:56px;
}
.section-sub .l{width:40px; height:1px; background:rgba(245,245,245,0.25); flex-shrink:0;}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card{
  background:var(--bg-card); border:1px solid var(--bg-card-line); border-radius:16px; padding:34px;
  transition:border-color .2s, transform .2s;
}
.card:hover{border-color:rgba(48,214,138,0.4); transform:translateY(-3px);}
.card .step-num{
  font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--green-2);
  letter-spacing:1px; margin-bottom:16px; display:block;
}
.card h3{font-family:var(--font-display); font-weight:700; font-size:19px; margin-bottom:10px;}
.card p{font-size:14px; color:var(--muted);}

footer{
  text-align:center; padding:50px 24px 40px; font-size:13px; color:var(--muted);
  border-top:1px solid var(--bg-card-line);
}
footer a{color:var(--green-2); font-weight:600;}

/* Planes section */
section.planes{padding:30px 48px 350px; max-width:1180px; margin:0 auto; scroll-margin-top:72px;}
.plan-features{list-style:none; margin:26px 0 32px; padding:0;}
.plan-features li{
  display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--muted);
  padding:9px 0; border-bottom:1px solid var(--bg-card-line);
}
.plan-features li:last-child{border-bottom:none;}
.plan-features li .tick{color:var(--green-2); font-weight:700; flex-shrink:0;}
.plan-price{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--muted); margin-top:4px;}
.btn-plan{
  width:100%; padding:15px 24px; border-radius:10px; font-weight:700; font-size:14.5px;
  border:1px solid transparent; cursor:pointer; margin-top:auto;
}
.btn-plan.free{background:var(--slate); color:var(--white); border-color:var(--slate);}
.btn-plan.pro{background:var(--green-2); color:#062012;}

.plans-grid-a{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch;}
.plan-card-a{
  background:var(--bg-card); border:1px solid var(--bg-card-line); border-radius:18px;
  padding:36px 34px; display:flex; flex-direction:column; position:relative;
}
.plan-card-a.pro{
  border-color:rgba(48,214,138,0.55);
  box-shadow:0 0 0 1px rgba(48,214,138,0.15), 0 30px 60px -20px rgba(48,214,138,0.25);
  background:linear-gradient(180deg, rgba(48,214,138,0.06), var(--bg-card) 40%);
}
.badge-reco{
  position:absolute; top:-13px; right:32px; background:var(--green-2); color:#062012;
  font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:0.5px;
  padding:6px 14px; border-radius:999px;
}
.plan-name-a{font-family:var(--font-display); font-weight:800; font-size:22px;}
.plan-tag-a{font-size:13px; color:var(--muted); margin-top:6px;}

/* Toggle Mensual / Anual */
.billing-toggle{
  display:flex; align-items:center; justify-content:center; gap:4px;
  width:max-content; margin:0 auto 44px; padding:5px;
  background:var(--bg-card); border:1px solid var(--bg-card-line); border-radius:999px;
}
.billing-toggle button{
  border:none; background:transparent; cursor:pointer; font-family:var(--font-body);
  font-weight:700; font-size:13.5px; color:var(--muted); padding:10px 20px; border-radius:999px;
  transition:background .2s, color .2s;
}
.billing-toggle button.active{background:var(--green-2); color:#062012;}
.billing-toggle button .off{font-size:11px; font-weight:700; margin-left:5px; opacity:.75;}
.billing-toggle button.active .off{opacity:1;}

.plan-price-row{display:flex; align-items:baseline; gap:6px; margin-top:16px;}
.plan-price-row .amount{font-family:var(--font-display); font-weight:800; font-size:34px;}
.plan-price-row .amount.free-amount{font-size:34px;}
.plan-price-row .period{font-size:13px; color:var(--muted);}
.plan-price-note{font-size:12px; color:var(--muted); margin-top:2px; min-height:16px;}

/* Contacto */
section.contacto{padding:10px 48px 130px; max-width:1180px; margin:0 auto; scroll-margin-top:72px;}
.contacto-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:24px; align-items:start;}
.contacto-form{background:var(--bg-card); border:1px solid var(--bg-card-line); border-radius:18px; padding:36px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block; font-size:13px; font-weight:600; color:var(--muted); margin-bottom:8px;}
.form-field input, .form-field textarea{
  width:100%; background:var(--bg); border:1px solid var(--bg-card-line); border-radius:10px;
  padding:13px 14px; color:var(--white); font-family:var(--font-body); font-size:14.5px; resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{outline:none; border-color:rgba(48,214,138,0.6);}
.form-field textarea{min-height:96px;}
.btn-form{
  width:100%; padding:15px 24px; border-radius:10px; font-weight:700; font-size:14.5px;
  border:none; background:var(--green-2); color:#062012; cursor:pointer; margin-top:4px;
}
.form-hint{font-size:12.5px; color:var(--muted); margin-top:12px; text-align:center;}

.contacto-direct{display:flex; flex-direction:column; gap:14px;}
.contacto-row{
  display:flex; align-items:center; gap:14px; background:var(--bg-card); border:1px solid var(--bg-card-line);
  border-radius:14px; padding:18px 20px; transition:border-color .2s, transform .2s;
}
.contacto-row:hover{border-color:rgba(48,214,138,0.4); transform:translateY(-2px);}
.contacto-row .icon{
  width:38px; height:38px; border-radius:10px; background:rgba(48,214,138,0.12); color:var(--green-2);
  display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0;
}
.contacto-row .label{font-size:12px; color:var(--muted); font-weight:600;}
.contacto-row .value{font-size:14.5px; font-weight:700; margin-top:2px;}



/* Auth (login / registro / recuperar / reset password) */
.auth-wrap{
  max-width:520px; margin:0 auto; padding:80px 24px 100px;
}
.auth-card{
  background:var(--bg-card); border:1px solid var(--bg-card-line); border-radius:18px; padding:36px;
}
.auth-title{font-family:var(--font-display); font-weight:800; font-size:26px; margin-bottom:8px;}
.auth-subtitle{font-size:13.5px; color:var(--muted); margin-bottom:26px;}
.field-error{font-size:12.5px; color:#ff6b6b; margin-top:6px;}
.slug-preview{font-size:12.5px; color:var(--muted); margin-top:6px;}
.auth-footer-link{font-size:13.5px; color:var(--muted); text-align:center; margin-top:20px;}
.auth-footer-link a{color:var(--green-2); font-weight:600;}
.field-link{display:block; text-align:right; font-size:12.5px; color:var(--muted); margin-top:8px;}
.field-link a{color:var(--green-2); font-weight:600;}



.flash-messages{max-width:520px; margin:0 auto; padding:24px 24px 0;}
.flash-message{
  padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:12px; border:1px solid;
}
.flash-message.danger{background:rgba(255,107,107,0.12); color:#ff6b6b; border-color:rgba(255,107,107,0.35);}
.flash-message.success{background:rgba(48,214,138,0.12); color:var(--green-2); border-color:rgba(48,214,138,0.35);}
.flash-message.warning{background:rgba(250,204,21,0.12); color:#facc15; border-color:rgba(250,204,21,0.35);}
.flash-message.info{background:rgba(148,163,184,0.12); color:var(--muted); border-color:var(--bg-card-line);}


/* Adaptaciones responsive (Ordenadas por prioridad) */
@media (min-height:1050px){
  section.planes{
    min-height:calc(100svh - 90px);
    display:flex; flex-direction:column; justify-content:center;
  }
}

@media (max-width:860px){
  .grid3, .contacto-grid{grid-template-columns:1fr;}
}

@media (max-width:820px){
  .plans-grid-a{grid-template-columns:1fr;}
}

/* REGLA CRÍTICA DE NAVEGACIÓN MÓVIL AL FINAL */
@media (max-width: 1024px) {
  .nav-inner {
    padding: 0 24px;
  }
  .nav-links,
  .nav-actions {
    display: none !important;
  }
  .burger {
    display: flex !important;
  }
}

@media (max-width:640px){
  .hero{padding:60px 24px 50px;}
  section.steps{padding:20px 24px 80px;}
  .section-sub{padding:0 12px;}
  section.planes{padding:10px 24px 90px;}
  section.contacto{padding:10px 24px 90px;}
}