/* Las páginas públicas de gritnook.com (presentación y papeles).
   Mismos colores y letra que la app: azul noche en oscuro, papel en claro,
   el acento como línea y borde. Las genera web/generar.js. */
@font-face{font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url("/fuentes/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url("/fuentes/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url("/fuentes/inter-latin-600-normal.woff2") format("woff2")}

:root{
  --bg:#e4e7f5; --surface:#f3f5fe; --surface-2:#e9ecf8; --line:#cfd3e5; --line-2:#b2b6ca;
  --ink:#292b31; --ink-2:#3f424d; --ink-3:#595d6c;
  --acento:#5d5294; --acento-txt:#5d5294; --acento-suave:#e7e5fe; --acento-borde:#d2cefd; --on-acento:#f3f5fe;
  --verde:#166534; --ambar:#92400E; --cinta:#D23B47;
  --sombra:0 0 0 1px #cfd3e5, 0 10px 30px rgba(41,43,49,.08);
  --luz:radial-gradient(900px 480px at 10% -10%, rgba(93,82,148,.12), transparent 60%);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#161826; --surface:#1d1f2c; --surface-2:#232532; --line:#292b31; --line-2:#3f424d;
  --ink:#e9e9ed; --ink-2:#b2b6ca; --ink-3:#9397ab;
  --acento:#9184d9; --acento-txt:#b5abfc; --acento-suave:#2b2741; --acento-borde:#423a6a; --on-acento:#161826;
  --verde:#4ADE80; --ambar:#FBBF24; --cinta:#F0616A;
  --sombra:0 0 0 1px #2c2e3b, 0 14px 40px rgba(0,0,0,.45);
  --luz:radial-gradient(1000px 560px at 12% -14%, rgba(145,132,217,.16), transparent 62%);
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg) var(--luz) no-repeat; color:var(--ink); font:400 16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto}
a{color:var(--acento-txt)}
:focus-visible{outline:2px solid var(--acento-txt); outline-offset:3px; border-radius:6px}
.saltar{position:absolute; left:-999px; top:8px; z-index:20; padding:8px 14px; border-radius:10px; background:var(--surface); color:var(--ink)}
.saltar:focus{left:16px}
.ancho{width:min(1120px, 100% - 32px); margin-inline:auto}

/* ── cabecera ── */
.cab{position:sticky; top:0; z-index:10; backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent)}
.cab .ancho{display:flex; align-items:center; gap:18px; min-height:64px}
.marca{display:inline-flex; align-items:center; margin-right:auto}
.marca img{display:block; height:30px; width:auto}
.cab nav{display:flex; align-items:center; gap:4px}
.cab nav a{padding:8px 12px; border-radius:10px; color:var(--ink-2); text-decoration:none; font-weight:500; font-size:15px}
.cab nav a:hover{color:var(--ink); background:var(--acento-suave)}
.cab nav a[aria-current="page"]{color:var(--ink)}
@media (max-width:760px){ .cab nav .opc{display:none} }

/* ── botones ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink); font:600 15px/1.2 Inter, system-ui, sans-serif; text-decoration:none; cursor:pointer}
.btn:hover{border-color:var(--acento)}
.btn.primario{border-color:transparent; color:var(--on-acento);
  background:linear-gradient(180deg, color-mix(in srgb, var(--acento) 86%, #fff), var(--acento))}
.btn.primario:hover{filter:brightness(1.06)}
.cab .btn{min-height:38px; padding:8px 14px; font-size:14px}

/* ── portada de cada página ── */
.hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center; padding:56px 0 40px}
.eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; font:600 13px/1 Inter, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--acento-txt)}
.eyebrow::before{content:""; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px var(--acento-suave)}
h1{margin:0 0 18px; font:650 clamp(34px, 5.2vw, 56px)/1.08 Inter, sans-serif; letter-spacing:-.035em; text-wrap:balance}
h1 em, h2 em{font-style:normal; background:linear-gradient(92deg, var(--acento-txt), color-mix(in srgb, var(--acento-txt) 40%, var(--cinta)));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{margin:0 0 26px; max-width:60ch; font-size:clamp(17px, 2vw, 19px); line-height:1.6; color:var(--ink-2)}
.acciones{display:flex; flex-wrap:wrap; gap:12px}
.nota-pie{margin:16px 0 0; font-size:14px; color:var(--ink-3)}
.movil{margin:0; justify-self:center; width:min(320px, 100%); border-radius:34px; padding:10px; background:#0d0e16;
  box-shadow:0 0 0 1px #3f424d, 0 30px 80px rgba(0,0,0,.35), 0 0 60px color-mix(in srgb, var(--acento) 18%, transparent)}
.movil img{display:block; width:100%; border-radius:26px}
@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr); gap:36px; padding:36px 0 24px}
  .movil{width:min(280px, 82%)}
}

/* ── secciones ── */
section{padding:40px 0}
h2{margin:0 0 12px; font:650 clamp(26px, 3.4vw, 36px)/1.15 Inter, sans-serif; letter-spacing:-.025em; text-wrap:balance}
h3{margin:0 0 6px; font:600 18px/1.3 Inter, sans-serif; letter-spacing:-.01em}
.sub{margin:0 0 28px; max-width:62ch; color:var(--ink-2); font-size:17px}
.rejilla{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap:16px}
.tarjeta{padding:22px; border-radius:18px; background:var(--surface); box-shadow:var(--sombra)}
.tarjeta p{margin:0; color:var(--ink-2); font-size:15.5px}
.ico{display:grid; place-items:center; width:42px; height:42px; margin-bottom:14px; border-radius:12px; color:var(--acento-txt); background:var(--acento-suave)}
.ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

.pasos{counter-reset:paso; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap:16px}
.pasos li{position:relative; padding:22px 22px 22px 70px; border-radius:18px; background:var(--surface); box-shadow:var(--sombra)}
.pasos li::before{counter-increment:paso; content:counter(paso); position:absolute; left:22px; top:22px; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center; font-weight:600; color:var(--on-acento); background:var(--acento)}
.pasos p{margin:0; color:var(--ink-2); font-size:15.5px}

.doble{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:center}
.doble.al-reves{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.doble.al-reves .movil{order:2}
.lista-ok{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.lista-ok li{position:relative; padding-left:30px; color:var(--ink-2)}
.lista-ok li::before{content:""; position:absolute; left:2px; top:.45em; width:16px; height:9px; border:solid var(--verde); border-width:0 0 2.2px 2.2px; transform:rotate(-45deg)}
.lista-ok strong{color:var(--ink)}
@media (max-width:860px){ .doble, .doble.al-reves{grid-template-columns:minmax(0,1fr); gap:30px} .doble.al-reves .movil{order:0} }

/* ── preguntas frecuentes ── */
.faq{display:grid; gap:10px; max-width:820px}
.faq details{border-radius:14px; background:var(--surface); box-shadow:var(--sombra)}
.faq summary{list-style:none; cursor:pointer; padding:18px 52px 18px 20px; position:relative; font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:22px; top:50%; width:9px; height:9px; margin-top:-6px; border:solid var(--ink-3);
  border-width:0 2px 2px 0; transform:rotate(45deg); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(225deg); margin-top:-2px}
.faq details > div{padding:0 20px 18px; color:var(--ink-2)}
.faq details > div p{margin:0 0 10px}
.faq details > div p:last-child{margin:0}

/* ── llamada final ── */
.final{margin:24px 0 64px; padding:44px 32px; border-radius:26px; text-align:center; background:var(--surface);
  box-shadow:var(--sombra); background-image:radial-gradient(600px 240px at 50% -30%, color-mix(in srgb, var(--acento) 22%, transparent), transparent 70%)}
.final .sub{margin-inline:auto}
.final .acciones{justify-content:center}

/* ── los papeles ── */
.papel{max-width:780px; padding:48px 0 64px}
.papel h1{font-size:clamp(30px, 4.4vw, 42px)}
.papel h2{font-size:22px; margin:34px 0 10px}
.papel p, .papel li{color:var(--ink-2)}
.papel strong{color:var(--ink)}
.papel ul{padding-left:22px}
.papel .tabla{overflow-x:auto; margin:16px 0}
.papel table{border-collapse:collapse; width:100%; font-size:15px}
.papel th, .papel td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.papel th{color:var(--ink); font-weight:600}
.papel .vigor{color:var(--ink-3)}

/* ── pie ── */
.pie{border-top:1px solid var(--line); padding:32px 0 40px; font-size:14px; color:var(--ink-3)}
.pie .ancho{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-start; justify-content:space-between}
.pie nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.pie a{color:var(--ink-2); text-decoration:none}
.pie a:hover{color:var(--ink); text-decoration:underline}
.pie p{margin:0}

@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }