/* Pagina informativa: estatica, sin JavaScript. Mismo lenguaje de diseno que la app (Inter local, verde azulado, claro y oscuro). */
@font-face { font-family:"Inter"; src:url(inter.woff2) format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  color-scheme: light dark;
  --bg:#eef3f1; --bg2:#e4eeea; --card:#ffffff; --field:#f5f8f7; --ink:#0f1c19; --muted:#5d706a; --line:#dbe5e1;
  --brand:#0d9488; --brand-2:#14b8a6; --on-brand:#ffffff; --tint:rgba(13,148,136,.10); --ring:rgba(13,148,136,.28); --wordmark:#0a7f7a;
  --shadow:0 1px 2px rgba(15,28,25,.05), 0 14px 34px -16px rgba(15,28,25,.22); --wa:#d9fdd3; --wa-ink:#10281e;
  --font:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#08100e; --bg2:#0c1714; --card:#111c19; --field:#0b1512; --ink:#e9f2ef; --muted:#93a8a1; --line:#21322d;
    --brand:#2dd4bf; --brand-2:#5eead4; --on-brand:#04201b; --tint:rgba(45,212,191,.12); --ring:rgba(45,212,191,.30); --wordmark:#2dd4bf;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 16px 38px -18px rgba(0,0,0,.75); --wa:#143c2b; --wa-ink:#d6f2e4;
  }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--ink); font:400 16px/1.6 var(--font); font-feature-settings:"cv11","ss01";
  background:radial-gradient(1200px 560px at 50% -200px, var(--tint), transparent 70%), linear-gradient(var(--bg), var(--bg2)) fixed; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.angosto { max-width:760px; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }
.i { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
a { color:var(--brand); }
code { background:var(--tint); color:var(--brand); padding:2px 7px; border-radius:7px; font:500 .86em ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break:break-word; }

/* barra superior */
.top { position:sticky; top:0; z-index:10; backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  background:color-mix(in srgb, var(--bg) 80%, transparent); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; }
.marca { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-size:1.02rem; }
.simbolo { flex:none; width:36px; height:36px; }
.palabra { display:block; height:20px; width:auto; aspect-ratio:880 / 140; fill:var(--wordmark); }
nav { display:flex; align-items:center; gap:4px; }
nav a { text-decoration:none; color:var(--muted); font-weight:550; font-size:.92rem; padding:8px 12px; border-radius:10px; }
nav a:hover { color:var(--ink); background:var(--tint); }
nav a.btn { color:var(--on-brand); margin-left:6px; }

/* botones */
.btn { display:inline-block; text-align:center; text-decoration:none; font:600 .95rem var(--font); padding:11px 20px; min-height:46px; border:0; border-radius:13px; cursor:pointer;
  color:var(--on-brand); background:linear-gradient(140deg, var(--brand-2), var(--brand)); box-shadow:0 8px 20px -10px var(--ring); transition:transform .12s, filter .15s; }
.btn:hover { filter:brightness(1.06); }
.btn:active { transform:scale(.97); }
.btn:focus-visible, input:focus-visible, summary:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }
.btn.chico { padding:8px 16px; min-height:38px; font-size:.88rem; border-radius:10px; }
.btn.grande { padding:13px 26px; min-height:52px; font-size:1rem; }
.btn.secundario { background:transparent; color:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand); }
.btn.secundario:hover { background:var(--tint); }

/* portada */
.hero { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:72px 20px 56px; }
.etiqueta { display:inline-block; margin:0 0 16px; padding:5px 14px; border-radius:99px; font-size:.8rem; font-weight:600; letter-spacing:.02em; color:var(--brand); background:var(--tint); box-shadow:inset 0 0 0 1px var(--ring); }
h1 { margin:0 0 18px; font-size:clamp(2.2rem, 5.4vw, 3.5rem); line-height:1.08; letter-spacing:-.03em; font-weight:760; }
.resalte { background:linear-gradient(120deg, var(--brand), var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.bajada { margin:0 0 26px; font-size:1.12rem; color:var(--muted); max-width:34em; }
.acciones { display:flex; gap:12px; flex-wrap:wrap; }
.nota { margin:16px 0 0; font-size:.88rem; color:var(--muted); }
.nota.centro { text-align:center; max-width:46em; margin:24px auto 0; }

/* maqueta: la app y los avisos, hechos con HTML (sin imagenes) */
.maqueta { position:relative; min-height:440px; display:grid; place-items:start center; padding-top:16px; }
.telefono { width:min(300px, 80%); background:var(--card); border:1px solid var(--line); border-radius:34px; padding:14px; box-shadow:var(--shadow); transform:rotate(2deg); }
.app-hoy { background:var(--field); border-radius:24px; padding:18px 16px; }
.app-cab { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.app-cab b { font-size:1.3rem; letter-spacing:-.02em; } .app-cab span { font-size:.8rem; color:var(--muted); }
.fila { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); font-size:.9rem; }
.fila:first-of-type { border-top:0; }
.hora { min-width:48px; text-align:center; padding:2px 8px; border-radius:8px; font:600 .78rem ui-monospace, Menlo, Consolas, monospace; color:var(--brand); background:var(--tint); }
.app-hoy .sub { margin:14px 0 2px; font-size:.7rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.chk { width:20px; height:20px; border-radius:50%; border:2px solid var(--line); flex:none; }
.wa { position:absolute; left:0; bottom:-6px; max-width:250px; padding:12px 14px; background:var(--wa); color:var(--wa-ink); border-radius:16px 16px 16px 4px; box-shadow:var(--shadow); font-size:.82rem; line-height:1.45; transform:rotate(-2deg); }
.wa p { margin:0 0 4px; } .wa small { display:block; margin-top:6px; opacity:.75; font-style:italic; } .wa i { font-style:italic; opacity:.8; }
.notif { position:absolute; right:-14px; top:-10px; display:flex; align-items:center; gap:10px; padding:11px 14px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); font-size:.82rem; transform:rotate(3deg); }
.notif .i { color:var(--brand); } .notif div { display:flex; flex-direction:column; line-height:1.3; } .notif span { color:var(--muted); }

/* secciones */
.seccion { padding:56px 20px; }
h2 { margin:0 0 28px; font-size:clamp(1.6rem, 3.4vw, 2.1rem); line-height:1.15; letter-spacing:-.025em; text-align:center; }
.sub { margin:-14px 0 28px; text-align:center; color:var(--muted); }
h3 { margin:0 0 8px; font-size:1.08rem; letter-spacing:-.01em; }
.pasos { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.paso, .tarjeta { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:var(--shadow); }
.paso p, .tarjeta p { margin:0; color:var(--muted); font-size:.96rem; }
.num { display:grid; place-items:center; width:34px; height:34px; margin-bottom:14px; border-radius:50%; font-weight:700; color:var(--on-brand); background:linear-gradient(140deg, var(--brand-2), var(--brand)); }
.rejilla { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.tarjeta .i { width:26px; height:26px; margin-bottom:12px; color:var(--brand); }

/* planes */
.planes { display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; max-width:820px; margin:0 auto; }
.plan { position:relative; display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:24px; padding:30px 28px; box-shadow:var(--shadow); }
.plan.destacado { border:2px solid var(--brand); }
.cinta { position:absolute; top:-13px; left:24px; padding:4px 14px; border-radius:99px; font-size:.74rem; font-weight:650; color:var(--on-brand); background:linear-gradient(140deg, var(--brand-2), var(--brand)); }
.precio { margin:6px 0 18px; } .precio b { font-size:2.6rem; letter-spacing:-.03em; } .precio span { color:var(--muted); margin-left:4px; }
.plan ul { list-style:none; margin:0 0 22px; padding:0; display:grid; gap:12px; flex:1; }
.plan li { display:flex; gap:10px; align-items:flex-start; font-size:.95rem; }
.plan li span { flex:1; min-width:0; }
.plan li .i { width:20px; height:20px; margin-top:2px; color:var(--brand); }
.plan form { display:grid; gap:8px; }
.plan label { font-size:.84rem; color:var(--muted); }
input[type=text] { width:100%; padding:12px 14px; font:inherit; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:12px; }
input[type=text]:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--ring); }

/* preguntas */
details { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:0 20px; margin-bottom:10px; }
summary { cursor:pointer; list-style:none; padding:16px 0; font-weight:600; display:flex; justify-content:space-between; gap:12px; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; font-size:1.4rem; line-height:1; color:var(--brand); }
details[open] summary::after { content:"−"; }
details p { margin:0 0 16px; color:var(--muted); }

/* pie */
.pie { border-top:1px solid var(--line); padding:28px 0 40px; margin-top:24px; }
.pie .wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.enlaces { display:flex; gap:20px; } .enlaces a { color:var(--muted); text-decoration:none; font-size:.9rem; } .enlaces a:hover { color:var(--ink); }

@media (max-width: 860px) {
  .hero { grid-template-columns:1fr; gap:32px; padding-top:44px; }
  .maqueta { min-height:400px; }
  .pasos, .rejilla { grid-template-columns:1fr; }
  .planes { grid-template-columns:1fr; }
  nav a:not(.btn) { display:none; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }