/* Landing de Genau Finanzas. Tokens de la marca vigente
   (docs/brand/MARCA-GENAU-PARA-CLAUDE-CODE.md): neutros fríos, ultramar y coral.
   Las imágenes de img/ se regeneran con docs/brand/generar-marca.py. */
:root{
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#f0f2f8;
  --border:#d9dee8; --text:#11192a; --text-2:#505764; --text-3:#828892;
  --accent:#284ab2; --accent-hover:#1b3793; --accent-2:#ee7862; --negative:#b0304a;
  --radius:14px; --maxw:980px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

.nav{display:flex; align-items:center; justify-content:space-between; padding-top:20px; padding-bottom:20px}
/* El wordmark es un SVG con la tinta y el punto coral ya pintados (manual §5). */
.brand{display:flex; align-items:baseline; gap:7px; font-weight:700; font-size:20px; letter-spacing:-.01em; color:var(--accent)}
.brand img{display:block; height:26px; width:auto; transform:translateY(4px)}
.brand span{color:var(--text-2); font-weight:600}

.hero{padding:48px 0 40px; text-align:center}
.hero h1{font-size:clamp(30px,6vw,52px); line-height:1.06; letter-spacing:-.02em; margin:0 0 14px}
.hero .sub{font-size:clamp(17px,2.6vw,21px); color:var(--text-2); max-width:30ch; margin:0 auto}
.hero .pitch{color:var(--text-3); max-width:48ch; margin:14px auto 28px}

.form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.form input{
  flex:1 1 220px; min-width:0; padding:14px 16px; font-size:16px;
  border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text);
}
.form input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent)}
.btn{
  padding:14px 22px; font-size:16px; font-weight:600; border:0; border-radius:12px;
  background:var(--accent); color:#fff; cursor:pointer; white-space:nowrap;
}
.btn:hover{background:var(--accent-hover)}
.btn:disabled{opacity:.6; cursor:default}
.msg{min-height:22px; margin:14px auto 0; font-size:15px; max-width:440px}
.msg.ok{color:var(--accent)}
.msg.err{color:var(--negative)}

.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; padding:24px 0 48px}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px}
.card h3{margin:0 0 6px; font-size:17px}
.card p{margin:0; color:var(--text-2); font-size:15px}

.foot{border-top:1px solid var(--border); padding-top:28px; padding-bottom:48px; color:var(--text-3); font-size:14px; display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between; align-items:center}
.foot a{color:var(--text-2)}

.legal{max-width:760px; margin:0 auto; padding:24px 20px 64px}
.legal h1{font-size:28px; letter-spacing:-.01em}
.legal h2{font-size:19px; margin-top:28px}
.legal p,.legal li{color:var(--text-2)}
.legal .back{display:inline-block; margin:8px 0 24px; font-size:15px}

/* ── Install + proof sections (added when the PWA made the app usable today) ── */

.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 10px}
.btn-ghost{
  padding:14px 22px; font-size:16px; font-weight:600; border-radius:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  cursor:pointer; white-space:nowrap;
}
.btn-ghost:hover{text-decoration:none; border-color:var(--accent); color:var(--accent)}
.cta-note{color:var(--text-3); font-size:14px; margin:0 0 30px}

.section{padding:28px 0}
.section h2{font-size:clamp(22px,3.4vw,30px); letter-spacing:-.015em; margin:0 0 6px; text-align:center}
.section .lede{color:var(--text-3); text-align:center; max-width:52ch; margin:0 auto 26px}

.steps{
  counter-reset:step; display:grid; gap:14px; max-width:620px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
}
.steps li{
  counter-increment:step; list-style:none; display:flex; gap:14px; align-items:flex-start;
  color:var(--text-2); font-size:15.5px;
}
.steps li::before{
  content:counter(step); flex:0 0 auto; width:28px; height:28px; border-radius:999px;
  background:var(--accent); color:#fff; font-size:14px; font-weight:700;
  display:grid; place-items:center; margin-top:1px;
}
.steps b{color:var(--text)}

.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; padding:8px 0 8px}
.shots figure{margin:0; text-align:center}
.shots img{
  width:100%; max-width:260px; height:auto; border-radius:22px;
  border:1px solid var(--border); box-shadow:0 18px 40px -22px rgba(17,25,42,.45);
}
.shots figcaption{color:var(--text-3); font-size:14px; margin-top:10px}

.waitlist{
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 24px; text-align:center; margin:12px 0 40px;
}
.waitlist h2{margin:0 0 6px; font-size:22px}
.waitlist p{color:var(--text-3); margin:0 auto 20px; max-width:44ch}

/* Botón "Entrar" del encabezado: el mismo botón fantasma, más compacto. */
.nav-cta{padding:9px 18px; font-size:15px}