/* ============ TOKENS ============
   Mismos valores reales que :root en index.html (la app) — no se inventan colores
   nuevos para la web pública, se hereda la paleta exacta ya verificada en producción,
   así que la transición de la web a la app (tras "Crear cuenta") no da ningún salto
   visual. Ver auditoría en CLAUDE.md / conversación — DESIGN_SYSTEM.md usa otros
   nombres de variable pero los mismos hexadecimales.
   Compartido por las 5 páginas de web/ — un solo sitio de cambio para tokens/header/
   footer/botones, en vez de duplicar ~270 líneas por página. */
:root{
  --bg: #0B0912;
  --bg-2: #12101B;
  --panel: rgba(255,255,255,0.05);
  --panel-2: rgba(255,255,255,0.08);
  --line: rgba(255,255,255,0.13);
  --text: #ffffff;
  --muted: rgba(255,255,255,0.68);
  --muted-2: rgba(255,255,255,0.5);
  --amber: #E3C989;
  --teal: #9B82ED;
  --red: #EC7188;
  --focus: #6FA8DC;
  --success: #6FD98B;
  --warning: #FF9F43;
  --slate: #8B93A6;
  --radius: 14px;
  --radius-sm: 9px;
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --wrap: 1180px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  background-image:radial-gradient(circle at 18% -10%, rgba(155,130,237,0.16), transparent 45%),
                    radial-gradient(circle at 100% 0%, rgba(227,201,137,0.10), transparent 40%);
  background-attachment:fixed;
  min-height:100vh;
}
a{color:inherit;}
img,svg{display:block;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.02em;}
p{margin:0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--amber);
  background:rgba(227,201,137,0.1); border:1px solid rgba(227,201,137,0.25);
  padding:6px 14px; border-radius:999px;
}
.lede{font-size:18px; color:var(--muted); line-height:1.65; max-width:640px;}
.wordmark{
  font-family:'Archivo Black', sans-serif; font-weight:400; letter-spacing:0.02em;
  text-transform:uppercase;
}

/* ============ BOTONES ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-sans); font-size:15px; font-weight:600; text-decoration:none;
  padding:13px 24px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease, background 120ms ease, border-color 120ms ease;
}
.btn.primary{background:var(--amber); color:#181209;}
.btn.primary:hover{filter:brightness(1.08); transform:translateY(-1px);}
.btn.ghost{background:transparent; border-color:var(--line); color:var(--text);}
.btn.ghost:hover{border-color:rgba(255,255,255,0.35); background:rgba(255,255,255,0.04);}
.btn.lg{padding:16px 30px; font-size:16px;}
.btn.block{width:100%;}

/* ============ HEADER ============ */
header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(16px);
  background:rgba(11,9,18,0.72); border-bottom:1px solid var(--line);
}
.nav-row{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-brand{font-size:19px; display:flex; align-items:center; gap:2px; text-decoration:none;}
.nav-links{display:flex; align-items:center; gap:32px; font-size:14.5px; font-weight:500; color:var(--muted);}
.nav-links a{text-decoration:none; transition:color 120ms ease;}
.nav-links a:hover{color:var(--text);}
.nav-actions{display:flex; align-items:center; gap:10px;}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:9px; width:40px; height:40px; align-items:center; justify-content:center; color:var(--text); cursor:pointer;}
.nav-toggle svg{width:20px; height:20px; stroke:var(--text);}

/* ============ HERO ============ */
.hero{padding:88px 0 0; overflow:hidden; position:relative;}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
.hero h1{font-size:52px; line-height:1.06; margin:20px 0 20px;}
.hero h1 .accent{color:var(--amber);}
.hero-cta{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-trust{margin-top:22px; font-size:13.5px; color:var(--muted-2);}
.hero-visual{position:relative;}

/* Mockup de la app — bloques CSS, no una captura real (todavía no hay assets de marca
   propios más allá del icono pequeño de la PWA, ver auditoría) — evoca la app real sin
   fingir ser una captura literal. */
.app-mock{
  background:var(--panel); border:1px solid var(--line); border-radius:20px;
  padding:20px; box-shadow:0 30px 80px rgba(0,0,0,0.45); backdrop-filter:blur(6px);
}
.app-mock-top{display:flex; align-items:center; gap:8px; margin-bottom:18px;}
.app-mock-dot{width:9px; height:9px; border-radius:50%; background:var(--line);}
.app-mock-title{margin-left:8px; font-size:12px; color:var(--muted-2); font-family:var(--font-mono);}
.app-mock-row{
  display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:11px;
  background:rgba(255,255,255,0.035); border:1px solid rgba(255,255,255,0.06); margin-bottom:10px;
}
.app-mock-row .bar{height:9px; border-radius:5px; background:rgba(255,255,255,0.14); flex:1;}
.app-mock-row.done .bar{background:rgba(111,217,139,0.35);}
.app-mock-check{width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line); flex-shrink:0;}
.app-mock-check.on{background:var(--success); border-color:var(--success);}
.app-mock-pill{font-size:10.5px; font-family:var(--font-mono); padding:3px 8px; border-radius:6px; flex-shrink:0;}
.app-mock-vivian{
  margin-top:16px; display:flex; gap:10px; align-items:flex-start; padding:14px;
  background:rgba(227,201,137,0.07); border:1px solid rgba(227,201,137,0.2); border-radius:12px;
}
.app-mock-vivian .av{
  width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--amber),var(--teal));
  flex-shrink:0;
}
.app-mock-vivian p{font-size:12.5px; color:var(--muted); line-height:1.5;}
.app-mock-vivian b{color:var(--text);}

/* ============ LOGOS / PARA QUIÉN ============ */
.for-who{padding:64px 0 0;}
.for-who-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px;}
.for-who-card{padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);}
.for-who-card h3{font-size:16.5px; margin-bottom:8px;}
.for-who-card p{font-size:14px; color:var(--muted); line-height:1.55;}

/* ============ SECCIONES GENERALES ============ */
.page-head{padding:64px 0 0;}
.section-head{max-width:620px; margin-bottom:52px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center p{margin-left:auto; margin-right:auto;}
.section-head h2{font-size:36px; margin:16px 0 14px;}
.section-head p{color:var(--muted); font-size:16px; line-height:1.6;}

/* ============ FUNCIONES ============ */
.feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.feat-card{
  padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);
  transition:transform 140ms ease, border-color 140ms ease, background 140ms ease;
}
.feat-card:hover{transform:translateY(-3px); border-color:rgba(255,255,255,0.24); background:var(--panel-2);}
.feat-icon{
  width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.feat-icon svg{width:21px; height:21px; stroke:#0d0a15;}
.feat-card h3{font-size:16.5px; margin-bottom:8px; font-weight:700;}
.feat-card p{font-size:14px; color:var(--muted); line-height:1.55;}
.feat-card.vivian{
  grid-column:span 3; display:flex; align-items:center; gap:28px;
  background:linear-gradient(120deg, rgba(227,201,137,0.09), rgba(155,130,237,0.08));
  border-color:rgba(227,201,137,0.28);
}
.feat-card.vivian .feat-icon{width:52px; height:52px; flex-shrink:0; margin-bottom:0;}
.feat-card.vivian .feat-icon svg{width:26px; height:26px;}
.feat-card.vivian h3{font-size:19px;}
.feat-card.vivian p{font-size:14.5px; max-width:560px;}

/* ============ CÓMO FUNCIONA ============ */
.how{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.how-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.how-step{padding:0 22px 0 0; position:relative;}
.how-step:not(:last-child)::after{
  content:''; position:absolute; top:22px; right:-4px; width:calc(100% - 44px); height:1px;
  background:linear-gradient(90deg, var(--line), transparent);
}
.how-num{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--amber); color:var(--amber);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono);
  font-size:15px; font-weight:600; margin-bottom:20px;
}
.how-step h3{font-size:16px; margin-bottom:8px;}
.how-step p{font-size:13.5px; color:var(--muted); line-height:1.55;}

/* ============ PRECIOS ============ */
.pricing-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; max-width:760px; margin:0 auto;}
.price-card{
  padding:32px; border:1px solid var(--line); border-radius:20px; background:var(--panel);
  position:relative;
}
.price-card.featured{border-color:var(--amber); background:linear-gradient(160deg, rgba(227,201,137,0.09), rgba(227,201,137,0.02));}
.price-badge{
  position:absolute; top:-13px; right:28px; background:var(--amber); color:#181209;
  font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:999px; letter-spacing:0.02em;
}
.price-plan{font-size:14px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.06em;}
.price-amount{font-family:var(--font-mono); font-size:44px; font-weight:600; margin:14px 0 4px;}
.price-amount span{font-size:16px; color:var(--muted); font-weight:500;}
.price-note{font-size:13.5px; color:var(--muted-2); margin-bottom:24px;}
.price-list{list-style:none; margin:0 0 28px; padding:0; display:flex; flex-direction:column; gap:11px;}
.price-list li{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted);}
.price-list svg{width:16px; height:16px; stroke:var(--success); flex-shrink:0;}
.pricing-foot{text-align:center; margin-top:28px; font-size:13.5px; color:var(--muted-2);}

/* ============ INSTALACIÓN ============ */
.install-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.install-card{padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel);}
.install-card .plat{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.install-card .plat svg{width:22px; height:22px; stroke:var(--text);}
.install-card h3{font-size:15.5px;}
.install-card ol{margin:0; padding-left:19px; display:flex; flex-direction:column; gap:8px;}
.install-card li{font-size:13.5px; color:var(--muted); line-height:1.5;}

/* ============ FAQ ============ */
.faq-list{max-width:760px; display:flex; flex-direction:column; gap:10px;}
.faq-item{border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden;}
.faq-item summary{
  padding:18px 22px; cursor:pointer; font-size:15px; font-weight:600; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:'+'; font-size:20px; color:var(--muted-2); font-weight:400; flex-shrink:0;
  transition:transform 160ms ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item .faq-body{padding:0 22px 20px; font-size:14px; color:var(--muted); line-height:1.6;}
.faq-item .faq-body a{color:var(--amber); text-decoration:underline; text-underline-offset:2px;}

/* ============ CTA FINAL ============ */
.cta-final{
  text-align:center; border:1px solid rgba(227,201,137,0.28); border-radius:24px;
  padding:64px 40px; background:linear-gradient(160deg, rgba(227,201,137,0.1), rgba(155,130,237,0.06));
}
.cta-final h2{font-size:32px; margin-bottom:14px;}
.cta-final p{color:var(--muted); font-size:16px; margin-bottom:30px;}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line); padding:56px 0 32px;}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:44px;}
.foot-brand p{font-size:13.5px; color:var(--muted-2); margin-top:14px; max-width:260px; line-height:1.6;}
.foot-col h4{font-size:12.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted-2); margin-bottom:16px; font-weight:600;}
.foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.foot-col a{font-size:14px; color:var(--muted); text-decoration:none;}
.foot-col a:hover{color:var(--text);}
.foot-bottom{
  display:flex; justify-content:space-between; align-items:center; padding-top:28px;
  border-top:1px solid var(--line); font-size:13px; color:var(--muted-2); flex-wrap:wrap; gap:12px;
}

/* ============ LEGAL (privacidad/términos/cookies) ============ */
.legal-layout{display:grid; grid-template-columns:240px 1fr; gap:56px; align-items:flex-start;}
.legal-toc{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px;}
.legal-toc a{
  font-size:13.5px; color:var(--muted); text-decoration:none; padding:9px 12px; border-radius:8px;
  border-left:2px solid transparent; transition:color 120ms ease, background 120ms ease, border-color 120ms ease;
}
.legal-toc a:hover{color:var(--text); background:var(--panel);}
.legal-updated{font-size:13px; color:var(--muted-2); margin-bottom:40px;}
.legal-body h2{font-size:22px; margin:0 0 14px; scroll-margin-top:96px;}
.legal-body section{padding:0 0 44px; border:none;}
.legal-body p, .legal-body li{font-size:14.5px; color:var(--muted); line-height:1.75;}
.legal-body p + p{margin-top:12px;}
.legal-body ul{padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:12px 0 0;}
.legal-body strong{color:var(--text);}

/* ============ REDIRECT (registro / login) ============ */
.redirect-wrap{min-height:calc(100vh - 73px); display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.redirect-card{
  max-width:420px; width:100%; text-align:center; border:1px solid var(--line); border-radius:20px;
  background:var(--panel); padding:44px 32px;
}
.redirect-spinner{
  width:34px; height:34px; margin:0 auto 24px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--amber);
  animation:redirect-spin 0.8s linear infinite;
}
@keyframes redirect-spin{to{transform:rotate(360deg);}}
.redirect-card h1{font-size:20px; margin-bottom:10px;}
.redirect-card p{font-size:14px; color:var(--muted); line-height:1.6;}
.redirect-card .btn{margin-top:22px;}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero h1{font-size:40px;}
  .hero-grid{grid-template-columns:1fr; gap:44px;}
  .for-who-grid, .feat-grid{grid-template-columns:repeat(2,1fr);}
  .feat-card.vivian{grid-column:span 2; flex-direction:column; align-items:flex-start; gap:16px;}
  .how-grid{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .how-step:nth-child(2)::after{display:none;}
  .install-grid{grid-template-columns:1fr; gap:14px;}
  .foot-grid{grid-template-columns:1fr 1fr; row-gap:32px;}
  .legal-layout{grid-template-columns:1fr; gap:28px;}
  .legal-toc{position:static; flex-direction:row; flex-wrap:wrap; gap:8px;}
  .legal-toc a{border-left:none; border:1px solid var(--line); border-radius:999px;}
}
@media (max-width:720px){
  section{padding:64px 0;}
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .nav-actions .btn.ghost{display:none;}
  .hero{padding-top:56px;}
  .hero h1{font-size:32px;}
  .lede{font-size:16px;}
  .section-head h2{font-size:27px;}
  .for-who-grid, .feat-grid, .pricing-grid{grid-template-columns:1fr;}
  .feat-card.vivian{grid-column:span 1;}
  .how-grid{grid-template-columns:1fr; row-gap:28px;}
  .how-step::after{display:none;}
  .foot-grid{grid-template-columns:1fr; row-gap:28px;}
  .foot-bottom{flex-direction:column; align-items:flex-start;}
  .cta-final{padding:44px 22px;}
  .cta-final h2{font-size:25px;}
}