/* Paleta muestreada del icono (icono.png), pixel a pixel. Cambiar aquí y en
   mobile/src/theme.ts a la vez: son la misma marca en dos sitios. */
:root {
  color-scheme: dark;
  --bg: #050211;
  --surface: #100A22;
  --text: #F4F1FA;
  --muted: #9A93AD;
  --lede: #C0B8D2;
  --hairline: rgba(244,241,250,0.10);
  --amarillo: #FDD201;
  --naranja: #FC890A;
  --rojo: #FB3242;
  --rosa: #FD309C;
  --magenta: #C802E3;
  --violeta: #6902F6;
  --sobre-acento: #0B0616;
  --rampa: linear-gradient(100deg, #FDD201 0%, #FC890A 26%, #FB3242 55%, #FD309C 100%);
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: Archivo, system-ui, -apple-system, sans-serif;
}

body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 var(--sans); }
main { max-width:720px; margin:0 auto; padding:56px 24px 80px; }
h1 { font-size:30px; line-height:1.15; margin:0 0 6px; }
h2 { font-size:19px; margin:36px 0 10px; color:var(--rosa); }
p, li { color:rgba(244,241,250,0.82); }
li { margin-bottom:6px; }
.fecha { color:var(--muted); font-size:14px; margin:0 0 8px; }
.marca { color:var(--amarillo); font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; margin:0 0 22px; }
a { color:var(--rosa); }
a:hover { color:#FF63B4; }
table { width:100%; border-collapse:collapse; margin:12px 0; font-size:14.5px; }
th, td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--hairline); vertical-align:top; }
th { color:var(--text); }
td { color:rgba(244,241,250,0.78); }
.aviso { background:var(--surface); border:1px solid rgba(253,48,156,0.25); border-radius:12px; padding:16px 18px; margin:20px 0; }
form { display:flex; flex-direction:column; gap:12px; max-width:420px; margin-top:18px; }
input { height:48px; padding:0 15px; border-radius:12px; border:1px solid rgba(244,241,250,0.18); background:var(--surface); color:var(--text); font-size:15px; }
button { height:48px; border:0; border-radius:12px; background:var(--rampa); color:var(--sobre-acento); font-size:15px; font-weight:700; cursor:pointer; }

/* ---------- portada ---------- */
.home { overflow-x:hidden; }
.home main { max-width:1180px; padding:0 28px; }
.home nav { height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--hairline); }
.marca-logo { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.marca-logo img { width:40px; height:40px; border-radius:11px; display:block; }
.wordmark { color:var(--text); font:30px/1 var(--serif); letter-spacing:-.04em; text-decoration:none; }
.nav-menu { display:flex; align-items:center; gap:32px; }
.nav-link { color:var(--muted); font-size:14px; text-decoration:none; }
.nav-link:hover { color:var(--text); }
.nav-cta { display:inline-flex; align-items:center; gap:10px; padding:12px 20px; border-radius:999px; border:1px solid rgba(253,48,156,0.45); color:var(--rosa); font-size:14px; font-weight:600; text-decoration:none; }
.nav-cta:hover { background:rgba(253,48,156,0.10); color:var(--rosa); }

.hero { position:relative; padding:96px 0 110px; display:grid; grid-template-columns:1.08fr .72fr; align-items:center; gap:80px; }
.hero::before { content:""; position:absolute; width:660px; height:660px; right:-180px; top:40px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(253,48,156,.22), rgba(105,2,246,.14) 42%, rgba(105,2,246,0) 70%); }
.hero-copy { position:relative; }
.eyebrow { color:var(--amarillo); font-size:11px; font-weight:700; letter-spacing:.16em; margin:0 0 20px; }
.hero h1 { font:clamp(57px,8vw,104px)/.88 var(--serif); letter-spacing:-.035em; margin:0; color:var(--text); text-wrap:balance; }
.hero h1 em, .promise em { color:var(--rosa); font-style:italic; }
.lede { font-size:18px; max-width:500px; margin:32px 0 0; color:var(--lede); text-wrap:pretty; }
.actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:38px; }
.download { display:inline-flex; align-items:center; gap:14px; padding:17px 26px; border-radius:999px; background:var(--rampa); color:var(--sobre-acento); text-decoration:none; font-weight:700; font-size:16px; }
.download:hover { color:var(--sobre-acento); filter:brightness(1.07); }
.download svg { stroke:var(--sobre-acento); }
.note { color:var(--muted); font-size:13px; margin:0; line-height:1.5; }


.phone-wrap { position:relative; justify-self:center; }
.phone { position:relative; width:min(318px,100%); aspect-ratio:390/867; border:7px solid #221A33; border-radius:44px; background:var(--sobre-acento); overflow:hidden;
  box-shadow:0 26px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(244,241,250,.18); }
.phone img { width:100%; height:100%; object-fit:cover; display:block; }

.gesto { position:absolute; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; white-space:nowrap; }
.gesto svg { stroke:var(--rosa); }
.gesto-abajo { left:-104px; top:236px; }
.gesto-lado { right:-118px; top:300px; }

.catalogo { border-top:1px solid var(--hairline); padding:84px 0; }
.catalogo-cabecera { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:34px; }
.catalogo h2, .trust h2 { font:46px/1 var(--serif); letter-spacing:-.035em; color:var(--text); margin:0; }
.catalogo-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
.catalogo-grid figure { margin:0; display:grid; gap:12px; }
.catalogo-grid img { width:100%; aspect-ratio:2/3; object-fit:cover; border-radius:8px; display:block; }
.catalogo-grid figcaption { display:grid; gap:2px; }
.catalogo-grid figcaption b { color:var(--text); font-size:13px; font-weight:600; line-height:1.3; }
.catalogo-grid figcaption span { color:var(--muted); font-size:12px; }
.text-link { color:var(--rosa); text-decoration:none; font-weight:700; white-space:nowrap; }

.principles { border-top:1px solid var(--hairline); padding:104px 0; }
.principle-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.principle-grid article { padding:0 40px; border-left:1px solid var(--hairline); }
.principle-grid article:first-child { border-left:0; padding-left:0; }
.principle-grid article:last-child { padding-right:0; }
.principle-grid span { color:var(--amarillo); font:24px var(--serif); }
.principle-grid h3 { font:32px/1 var(--serif); font-weight:400; letter-spacing:-.035em; color:var(--text); margin:20px 0 12px; }
.principle-grid p { margin:0; color:var(--muted); text-wrap:pretty; }

.promise { padding:118px 0; border-top:1px solid var(--hairline); display:flex; justify-content:space-between; align-items:end; gap:40px; }
.promise p { color:var(--text); margin:0; font:clamp(38px,5vw,66px)/.98 var(--serif); letter-spacing:-.045em; }

.trust { border-top:1px solid var(--hairline); padding:100px 0; display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.trust h2 { margin:0 0 24px; }
.trust > div > p { color:var(--muted); max-width:420px; margin:0; text-wrap:pretty; }
.monedas { display:flex; gap:10px; flex-wrap:wrap; margin-top:30px; }
.captura { width:100%; max-width:420px; margin-top:30px; border-radius:16px; border:1px solid var(--hairline); display:block; }
.monedas span { padding:10px 16px; border-radius:14px; background:var(--surface); border:1px solid var(--hairline); font-size:13px; color:var(--lede); }
.monedas b { color:var(--rosa); }
.trust ul { margin:0; padding:0; list-style:none; }
.trust li { padding:22px 0; border-bottom:1px solid var(--hairline); display:grid; gap:6px; }
.trust li:last-child { border-bottom:0; }
.trust b { color:var(--text); font-weight:600; }
.trust li span { color:var(--muted); }

.download-band { margin:0 0 80px; border-radius:28px; padding:70px; background:var(--rampa); color:var(--sobre-acento);
  display:flex; justify-content:space-between; align-items:end; gap:40px; }
.download-band .eyebrow { color:#4A0A28; }
.download-band h2 { font:clamp(38px,5vw,63px)/.95 var(--serif); letter-spacing:-.045em; margin:0; color:var(--sobre-acento); }
.download-band .download { background:var(--sobre-acento); color:var(--text); }
.download-band .download svg { stroke:var(--text); }

body.home footer { max-width:1180px; margin:auto; padding:30px 28px 48px; border-top:1px solid var(--hairline);
  display:flex; justify-content:space-between; align-items:center; gap:22px; color:var(--muted); font-size:13px; }
body.home footer .marca-logo img { width:28px; height:28px; border-radius:8px; }
body.home footer .wordmark { font-size:22px; }
body.home footer div { display:flex; gap:18px; }
body.home footer a { color:var(--muted); text-decoration:none; }
body.home footer a:hover { color:var(--text); }

@media (max-width:720px) {
  .home main { padding:0 20px; }
  .home nav { height:72px; }
  .marca-logo img { width:32px; height:32px; border-radius:9px; }
  .wordmark { font-size:26px; }
  .nav-menu .nav-link { display:none; }
  .hero { grid-template-columns:1fr; gap:44px; padding:54px 0 64px; }
  .hero::before { width:420px; height:420px; right:-170px; top:10px; }
  .hero h1 { font-size:58px; }
  .lede { font-size:16px; }
  .actions { display:grid; gap:14px; margin-top:30px; }
  .actions .download { justify-content:center; }
  .note { text-align:center; }
      .phone { width:270px; margin:0 auto; }
  .gesto { position:static; justify-content:center; }
  .gestos-movil { display:flex; justify-content:center; gap:26px; margin-top:22px; }
  .catalogo, .principles, .trust { padding:56px 0; }
  .catalogo-cabecera { display:block; }
  .catalogo h2, .trust h2 { font-size:34px; line-height:1.02; }
  .catalogo-cabecera .text-link { display:inline-block; margin-top:16px; }
  .catalogo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  .catalogo-grid figcaption { display:none; }
  .principle-grid { grid-template-columns:1fr; gap:30px; }
  .principle-grid article, .principle-grid article:first-child { border:0; border-top:1px solid var(--hairline); padding:24px 0 0; }
  .principle-grid article:first-child { border-top:0; padding-top:0; }
  .principle-grid h3 { font-size:28px; }
  .promise { padding:62px 0; display:block; }
  .promise .text-link { display:inline-block; margin-top:24px; }
  .trust { grid-template-columns:1fr; gap:34px; }
  .download-band { margin-bottom:45px; padding:40px 26px; display:block; }
  .download-band h2 { margin-bottom:26px; }
  body.home footer { flex-direction:column; align-items:flex-start; padding:26px 20px 38px; }
  body.home footer div { flex-wrap:wrap; }
}

/* El teléfono del hero no se ve en pantallas muy estrechas sin recortar el alto */
@media (max-width:400px) {
  .phone { width:100%; }
}