/* Estilos del sitio público (estilo «historia en pantallas»). Los valores salen de design/tokens.css
   (el build lo copia a /design/); acá no se define ningún color, tamaño ni fuente de marca nuevos. */
@import url("/design/fonts/fonts.css");
@import url("/design/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
.logo { display: inline-block; height: 30px; width: calc(30px * 945 / 250); background: currentColor;
  -webkit-mask: url("/design/brand/inverta-logo.svg") no-repeat center / contain;
  mask: url("/design/brand/inverta-logo.svg") no-repeat center / contain; }
.btn { font: inherit; font-weight: 800; min-height: var(--tap-primary); padding: 0 var(--s-5); border: 0; background: var(--accent);
  color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--text-sm); opacity: .85; }
.field input, .field select { font: inherit; min-height: var(--tap-primary); padding: 0 var(--s-4); border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { font: inherit; min-height: var(--tap); padding: 0 var(--s-4); border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--radius-pill); cursor: pointer; }
.chip[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip:disabled { cursor: not-allowed; opacity: .7; }
.muted { color: var(--ink-muted); }
.tag { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600; border: 1px solid currentColor; }
.tag.draft { color: var(--warning); margin-bottom: var(--s-4); }
.alert { border-left: 4px solid var(--c); background: var(--surface); padding: var(--s-3) var(--s-4); max-width: var(--measure); margin: 0 0 var(--s-4); }
.alert b { color: var(--c); }
.alert.warn { --c: var(--warning); }
.dot { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); display: inline-block; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: aro 1.8s var(--ease) 1 both; }
@keyframes aro { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }

/* C3 · Historia en pantallas, versión de referencia: 5 pantallas, navegación con icono y pantalla actual marcada */
html{zoom:.9;scroll-snap-type:y proximity;scroll-behavior:smooth;background:var(--indigo-800)}
body{background:var(--bg);color:var(--ink)}

/* Fondos: "logo" = degradado del logo (índigo 700 → 500); "claro" = índigo claro. --f3 sigue al tema. */
:root{--f1:var(--brand-gradient);--f2:linear-gradient(160deg,var(--indigo-500) 0%,var(--indigo-700) 100%);--f3:var(--bg);--t1:#fff;--t3:var(--ink);--ac1:var(--menta-400);--mut1:#D6DCF2}

.top{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) var(--gutter);background:var(--indigo-800)}
.top .logo{color:#fff}
.top .btn{min-height:var(--tap);font-size:var(--text-sm)}

.scr{min-height:calc(100svh / .9);scroll-margin-top:0;scroll-snap-align:start;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--s-8) + 16px) var(--gutter) var(--s-8)}
.scr .in{max-width:var(--max-w);margin:0 auto;width:100%}
.dark{background:var(--f1);color:var(--t1)}
.mid{background:var(--f2);color:var(--t1)}
.light{background:var(--f3);color:var(--t3)}
.n{font-family:var(--font-num);font-stretch:62%;font-weight:900;font-size:.9rem;letter-spacing:.1em;opacity:.75;margin:0 0 var(--s-5);display:block}
.g{font-size:clamp(2.2rem,7.6vw,5.4rem);line-height:1.02;font-weight:800;letter-spacing:-.03em;margin:0;max-width:18ch}
.scr.dark .g em,.scr.mid .g em{font-style:normal;color:var(--ac1)}
.scr.light .g em{font-style:normal;color:var(--accent-text)}
.sub{font-size:var(--text-lg);line-height:1.4;max-width:38ch;margin:var(--s-5) 0 0}
.scr.dark .sub,.scr.mid .sub{color:var(--mut1)}
.scr.light .sub{color:var(--ink-muted)}
.hint{margin-top:var(--s-6);font-size:var(--text-xs);opacity:.7}

.three{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;gap:var(--s-4);max-width:640px}
.three li{border-top:1px solid color-mix(in srgb,currentColor 40%,transparent);padding-top:var(--s-3);font-size:var(--text-lg);display:flex;justify-content:space-between;gap:var(--s-4)}
.three li span{opacity:.7;font-size:var(--text-sm);text-align:right}

/* Portada: el lema es el protagonista */
.lema{font-size:clamp(3rem,min(11.5vw,17vh),7.5rem);line-height:.98;font-weight:800;letter-spacing:-.04em;margin:0;max-width:11ch}
@media(min-width:900px){.lema{max-width:16ch}}
.scr.dark .lema em,.scr.mid .lema em{font-style:normal;color:var(--ac1)}
.gancho{font-size:clamp(1.25rem,3.2vw,2rem);font-weight:700;line-height:1.2;margin:var(--s-6) 0 0;max-width:24ch}
.lema+.gancho+.sub{margin-top:var(--s-3)}
.dash{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;gap:var(--s-4);max-width:46ch}
.dash li{position:relative;padding-left:2.2rem;font-size:var(--text-lg);line-height:1.4}
.dash li::before{content:"—";position:absolute;left:0;top:0;font-weight:800;color:var(--accent-text)}
.rules{list-style:none;padding:0;margin:var(--s-6) 0 0;max-width:760px}
.rules li{padding:var(--s-4) 0;border-top:1px solid color-mix(in srgb,currentColor 40%,transparent);display:grid;grid-template-columns:3rem 1fr;gap:var(--s-3)}
.rules li:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}
.rules .ri{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scr.dark .rules .ri{color:var(--ac1)}
.rules strong{display:block;font-size:var(--text-lg)}
.rules .rd{display:block;opacity:.85}
/* Pasos como línea de tiempo: vertical en celular, horizontal en escritorio */
.linea{list-style:none;margin:var(--s-6) 0 0;padding:0;display:grid;gap:var(--s-5);border-left:2px solid color-mix(in srgb,currentColor 40%,transparent);margin-left:22px;max-width:640px}
.linea li{position:relative;padding-left:var(--s-6)}
.linea li::before{content:attr(data-n);position:absolute;left:-23px;top:0;width:44px;height:44px;background:var(--accent);color:var(--on-accent);font-family:var(--font-num);font-stretch:75%;font-weight:900;font-size:1.6rem;display:grid;place-items:center}
.linea b{display:block;font-size:var(--text-lg);line-height:1.2;margin-bottom:var(--s-1);padding-top:var(--s-2)}
.linea .d{display:block;font-size:var(--text-sm);opacity:.85}
@media(min-width:900px){
  .linea{grid-template-columns:repeat(4,1fr);gap:var(--s-5);border-left:0;margin-left:0;max-width:none}
  .linea li{padding:68px 0 0}
  .linea li::before{left:0}
  .linea li:not(:last-child)::after{content:"";position:absolute;top:21px;left:52px;right:-16px;height:2px;background:color-mix(in srgb,currentColor 40%,transparent)}
  .linea b{padding-top:0}
}
/* Pantalla 3: los 4 pasos */
.pasos{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5) var(--s-4)}
@media(min-width:900px){.pasos{grid-template-columns:repeat(4,1fr);gap:var(--s-5)}}
@media(max-width:759px){.pasos .num{font-size:3.2rem}.pasos b{font-size:var(--text-md)}.pasos span.d{font-size:var(--text-xs)}}
.pasos li{border-top:2px solid currentColor;padding-top:var(--s-3)}
.pasos .num{display:block;font-family:var(--font-num);font-stretch:62%;font-weight:900;font-size:clamp(4rem,12vw,6.5rem);line-height:.85;margin-bottom:var(--s-3)}
.scr.mid .pasos .num{color:var(--ac1)}
.pasos b{display:block;font-size:var(--text-lg);line-height:1.2;margin-bottom:var(--s-1)}
.pasos span.d{font-size:var(--text-sm);opacity:.85}

/* Pantalla 4: Tu informe de esta semana */
.informe{display:grid;gap:var(--s-6)}
@media(min-width:960px){.informe{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s-7)}}
.panel{background:var(--surface);color:var(--ink);border:1px solid var(--line);padding:var(--s-5)}
.panel h3{margin:0 0 var(--s-1);font-size:var(--text-md)}
.panel .psub{font-size:var(--text-sm);color:var(--ink-muted);margin:0 0 var(--s-4)}
.rank{list-style:none;padding:0;margin:var(--s-5) 0 0;display:grid;gap:1px;background:var(--line)}
.rank li{background:var(--surface);display:grid;grid-template-columns:2rem 1fr auto;gap:var(--s-3);align-items:center;padding:var(--s-4) 0}
.rank .p{font-family:var(--font-num);font-stretch:75%;font-weight:900;color:var(--ink-muted);font-size:1.3rem}
.rank .t{font-weight:700}
.rank small{display:block;color:var(--ink-muted);font-size:var(--text-xs)}
.rank .d{font-family:var(--font-num);font-stretch:75%;font-weight:900;font-size:2rem;line-height:1;color:var(--accent-text)}
.panel .foot{margin:var(--s-4) 0 0;font-size:var(--text-xs);color:var(--ink-muted)}

/* Chips de presupuesto del informe: los 3 en una línea */
#presu{flex-wrap:nowrap;gap:var(--s-1)}
#presu .chip{flex:1 1 auto;white-space:nowrap;padding:0 var(--s-2);font-size:var(--text-xs);text-align:center}
@media(max-width:759px){.panel{padding:var(--s-4)}}
/* Pantalla 5 */
form{display:grid;gap:var(--s-4);max-width:480px;margin-top:var(--s-6)}
.dark .field input,.dark .field select{background:rgba(255,255,255,.12);color:var(--t1);border-color:currentColor}
.dark .chip{background:transparent;color:var(--t1);border-color:currentColor}
.dark .chip[aria-pressed=true]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.legal{font-size:var(--text-xs);opacity:.7;margin-top:var(--s-6)}

/* Navegación: icono + nombre. Celular: barra abajo. Escritorio: columna a la derecha. */
.rail a{display:flex;align-items:center;justify-content:center;gap:var(--s-2);text-decoration:none;color:#fff;font-size:11px;font-weight:600}
.rail svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rail a[aria-current=true]{color:var(--on-accent);background:var(--accent)}
@media(max-width:759px){
  .rail{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(6,1fr);background:rgba(27,37,84,.96);border-top:1px solid var(--indigo-500);padding-bottom:env(safe-area-inset-bottom)}
  .rail a{flex-direction:column;gap:2px;min-height:60px;padding:6px 0}
  .scr:last-of-type{padding-bottom:calc(var(--s-8) + 40px)}
  .pie{padding-bottom:calc(var(--s-5) + 64px)}
}
@media(min-width:760px){
  .rail{position:fixed;right:var(--s-4);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:var(--s-2);align-items:flex-end}
  .rail a{min-width:48px;min-height:48px;padding:0 14px;border-radius:var(--radius-pill);background:rgba(27,37,84,.92);border:1px solid rgba(255,255,255,.25);font-size:var(--text-sm)}
  .rail a span{display:none}
  .rail a[aria-current=true] span,.rail a:hover span,.rail a:focus-visible span{display:inline}
  .scr .in{padding-right:72px}
}

/* Páginas sueltas (términos, privacidad, 404) y «Próximamente» */
.page { min-height: 100svh; padding: calc(var(--s-8) + 16px) var(--gutter) var(--s-8); }
.page .in { max-width: var(--max-w); margin: 0 auto; }
.page h1 { font-size: var(--text-2xl); line-height: 1.05; font-weight: 800; letter-spacing: -.03em; margin: 0 0 var(--s-5); }
.page p { max-width: var(--measure); }
.pie { scroll-snap-align: end; padding: var(--s-5) var(--gutter); background: var(--indigo-800); color: #A3AED0; font-size: var(--text-xs); }
.pie .in { max-width: var(--max-w); margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-5); }
.pie a { text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.pie .links { display: inline-flex; gap: var(--s-4); }
.cta-off { font-size: var(--text-sm); opacity: .85; margin: 0; }
.sub-chico { font-size: var(--text-sm); }
.g-22 { max-width: 22ch; }
.informe-chico { max-width: none; }
@media (max-width: 759px) { .rail ~ .pie { padding-bottom: calc(var(--s-5) + 60px); } }

/* «Próximamente»: todo en una pantalla, sin desplazamiento */
.soon-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.soon-page .scr.soon { min-height: 0; flex: 1; padding-top: calc(60px + var(--s-4)); padding-bottom: var(--s-4); scroll-snap-align: none; }
.soon-page .pie { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.soon-page .pie a { min-height: 0; }

/* Texto legal (borrador) */
.legal-texto { max-width: var(--measure); margin-top: var(--s-6); }
.legal-texto h2 { font-size: var(--text-lg); line-height: 1.25; margin: var(--s-6) 0 var(--s-2); }
.legal-texto p, .legal-texto li { margin: 0 0 var(--s-3); }
.legal-texto ul { padding-left: var(--s-5); margin: 0 0 var(--s-3); }
.dato { background: color-mix(in srgb, var(--warning) 22%, transparent); padding: 0 var(--s-1); }
.pie .legal-linea { margin: 0; line-height: 1.6; }
.pie .legal-linea a { display: inline; min-height: 0; text-decoration: underline; text-underline-offset: 2px; }

/* Barra superior de la landing */
.top .acciones { display: flex; align-items: center; gap: var(--s-2); }
.top .btn { white-space: nowrap; }
@media (max-width: 759px) {
  .top { gap: var(--s-2); }
  .top .logo { height: 26px; width: calc(26px * 945 / 250); flex: none; }
  .top .btn { padding: 0 var(--s-3); font-size: var(--text-xs); }
  .top .acciones { gap: var(--s-1); }
}