/* Páginas públicas: livianas, pensadas primero para celular. Mismo tema negro con acento lima que la app. */
:root {
  --bg: #000; --surface: #0e1011; --surface-2: #181b1d; --ink: #f4f6f5; --ink-2: #9aa3a0; --line: #23272a;
  --brand: #c6f432; --brand-ink: #0b1200; --brand-soft: #1a2408; --warn-soft: #2b2008; --accent: #a78bfa;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); line-height: 1.55;
  background: radial-gradient(80% 32rem at 15% -8rem, rgba(198, 244, 50, .16), transparent 70%),
    radial-gradient(70% 26rem at 105% -4rem, rgba(167, 139, 250, .14), transparent 70%), var(--bg);
  background-repeat: no-repeat;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a { color: var(--brand); }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
header.site { border-bottom: 1px solid var(--line); background: rgba(14, 16, 17, .8); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 5; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: -.01em; font-size: 1.15rem; color: var(--ink); text-decoration: none; }
.brand img { border-radius: .5rem; }
nav.top { display: flex; gap: 1rem; font-size: .95rem; }
nav.top a { color: var(--ink-2); text-decoration: none; min-height: 2.75rem; display: inline-flex; align-items: center; }
main { padding: 1.5rem 0 3rem; }
h1 { font-size: 2.1rem; font-weight: 900; line-height: 1.08; letter-spacing: -.035em; margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.25rem 0 .25rem; }
p.lead { font-size: 1.1rem; color: var(--ink-2); margin-top: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; padding: 1.1rem; margin: 1rem 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem;
  border-radius: 999px; border: 0; background: var(--brand); color: var(--brand-ink); font: inherit; font-weight: 800;
  text-decoration: none; cursor: pointer; box-shadow: 0 10px 28px -12px rgba(198, 244, 50, .75);
}
.btn.block { display: flex; width: 100%; }
.grid { display: grid; gap: .75rem; grid-template-columns: 1fr 1fr; }
label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .25rem; }
input, select {
  width: 100%; min-height: 3rem; padding: 0 .9rem; border-radius: 1rem; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--ink); font-size: 16px; /* 16 px: iOS no hace zoom */
}
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line); }
th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.result { background: var(--brand-soft); border: 1px solid rgba(198, 244, 50, .25); border-radius: 1.25rem; padding: 1rem; margin-top: 1rem; }
.result strong { font-size: 1.9rem; font-weight: 900; letter-spacing: -.03em; display: block; color: var(--brand); }
.note { background: var(--warn-soft); border-radius: 1rem; padding: .85rem 1rem; font-size: .95rem; }
.muted { color: var(--ink-2); font-size: .9rem; }
ul.links { list-style: none; padding: 0; display: grid; gap: .5rem; }
ul.links a { display: flex; min-height: 3rem; align-items: center; padding: 0 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; color: var(--ink); }
/* Anuncios: tarjeta con el mismo radio que el resto, rotulada, con el alto reservado desde el primer render. */
.ad { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1rem; margin: 1.5rem 0; }
.ad small { display: block; color: var(--ink-2); font-size: .75rem; margin-bottom: .5rem; }
.ad .slot { min-height: 280px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: .9rem; overflow: hidden; }
.consent { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: .85rem 1rem; }
.consent .wrap { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.consent button { min-height: 2.75rem; border-radius: .9rem; padding: 0 1rem; font: inherit; font-weight: 600; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
.consent button.ok { background: var(--brand); color: var(--brand-ink); border-color: transparent; }
footer.site { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; color: var(--ink-2); font-size: .9rem; }
footer.site a { color: var(--ink-2); }
/* Ilustraciones de los ejercicios: el mismo muñeco que anima la app, acá quieto (inicio y final). */
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0; }
.figs figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 1.5rem; padding: .5rem .5rem .75rem; text-align: center; }
.figs figcaption { color: var(--ink-2); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.fig { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig-near { stroke: var(--ink); } .fig-far { stroke: #6f7774; } .fig-halo { stroke: var(--surface); }
.fig-gear { stroke: #4a5257; } .fig-load { stroke: var(--brand); } .fig-cable { stroke: var(--ink-2); }
.fig-near.fig-fill { fill: var(--ink); } .fig-gear.fig-fill { fill: #4a5257; } .fig-load.fig-fill { fill: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.chips li { border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; font-weight: 700; }
.chips li.main { color: var(--accent); border-color: rgba(167, 139, 250, .35); }
ol.steps { padding-left: 1.3rem; } ol.steps li { margin: .5rem 0; padding-left: .25rem; }
ol.steps li::marker { color: var(--brand); font-weight: 800; }
ul.cards { list-style: none; padding: 0; display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
ul.cards a { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; padding: .5rem .5rem .7rem; text-decoration: none; color: var(--ink); font-weight: 700; font-size: .9rem; line-height: 1.25; }
ul.cards small { display: block; color: var(--ink-2); font-weight: 500; margin-top: .15rem; }
@media (max-width: 27.99rem) { nav.top a.wide { display: none; } }
[hidden] { display: none !important; }
@media (min-width: 40rem) { h1 { font-size: 2.8rem; } }