/* Estilo de las páginas públicas (servidor/src/web.ts). Se empaqueta con huella en public/css/ (npm run portal).
   Dirección "Amanecer" (elegida por Leandro el 27/10/2026): el azul del sitio que se abre a un durazno cálido, bandas de
   borde a borde y el texto en una columna cómoda de leer. Sin librerías; fuentes libres (OFL) alojadas en /fuentes. */
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/fuentes/bricolage-800.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fuentes/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fuentes/atkinson-700.woff2) format("woff2")}
:root{--fondo:#f6f8fc;--texto:#121b33;--suave:#4f5a75;--linea:#dbe1ec;--acento:#1f4fa8;--caja:#ffffff;--sobre-acento:#ffffff;
--g1:#102a63;--g2:#1f4fa8;--g3:#f2a97e;--texto-banda:#ffffff;--suave-banda:#dde6ff;--marca:#ffe3d1;--marca-texto:#5a2408;
--sombra:0 1px 2px rgb(18 27 51/.06),0 12px 32px -14px rgb(18 27 51/.28);--radio:16px;
--titulo:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;--cuerpo:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--fondo:#0d1322;--texto:#e8ecf7;--suave:#a9b3cb;--linea:#2a3550;--acento:#93b4f5;--caja:#151d31;--sobre-acento:#0d1322;
--g1:#0a1a44;--g2:#173b85;--g3:#b5603a;--marca:#4a2a1c;--marca-texto:#ffe3d1;--sombra:0 1px 2px rgb(0 0 0/.3),0 14px 34px -14px rgb(0 0 0/.6)}}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--fondo);color:var(--texto);font:18px/1.65 var(--cuerpo);-webkit-font-smoothing:antialiased}
a{color:var(--acento);text-underline-offset:.18em}
.cont{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
/* Cabecera: el menú y el título de cada página van en una banda con el degradé, de borde a borde. */
.cabecera{background:radial-gradient(110% 150% at 88% 0%,var(--g3) 0%,transparent 52%),linear-gradient(135deg,var(--g1) 0%,var(--g2) 62%);color:var(--texto-banda)}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;padding-block:16px;font-size:16px}
.menu a{color:var(--texto-banda);text-decoration:none;opacity:.92}.menu a:hover{opacity:1;text-decoration:underline}
.menu .logo{display:flex;align-items:center;gap:10px;font:800 19px/1 var(--titulo);letter-spacing:-.01em;margin-right:auto;opacity:1}.menu .logo:hover{text-decoration:none}
.menu .logo img{display:block;border-radius:8px;box-shadow:0 0 0 1px rgb(255 255 255/.25)}
.menu .cta{background:#ffffff;color:var(--g1);font-weight:700;padding:7px 15px;border-radius:99px;opacity:1}.menu .cta:hover{text-decoration:none}
.banda-titulo{padding-block:22px 46px;max-width:58em}
.banda-titulo p{margin:0 0 6px;color:var(--suave-banda);font-size:16px}.banda-titulo a{color:var(--texto-banda)}
.banda-titulo .en{color:var(--suave-banda);font-style:italic;font-size:20px;margin-top:6px}
h1,h2,h3{font-family:var(--titulo);font-weight:800;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(30px,4.2vw,46px);line-height:1.1;margin:6px 0 0}
h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin:44px 0 12px}h3{font-size:21px;line-height:1.3;margin:28px 0 8px}
main.cont{padding-block:36px 56px}
main.cont>p,main.cont>ul,main.cont>ol,.columna>p,.columna>ul{max-width:44em}
.en{color:var(--suave);font-style:italic}
code{font-size:15px;background:color-mix(in srgb,var(--acento) 12%,var(--caja));padding:2px 6px;border-radius:5px;word-break:break-all}
mark{background:var(--marca);color:var(--marca-texto);padding:0 .16em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Portada */
.portada{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:26px 84px}
.ceja{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--suave-banda);margin:0}
.portada h1{font-size:clamp(36px,5vw,60px);line-height:1.04;margin:12px 0 18px}
.portada h1 em{font-style:normal;background:linear-gradient(90deg,#ffd2b5,#ffffff);-webkit-background-clip:text;background-clip:text;color:transparent}
.bajada{font-size:20px;color:var(--suave-banda);margin:0 0 26px;max-width:32em}
.botones{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.tarjeta-ejemplo{display:grid;gap:10px;background:var(--caja);color:var(--texto);text-decoration:none;border-radius:var(--radio);padding:24px;box-shadow:var(--sombra),0 30px 60px -30px rgb(0 0 0/.55);transform:rotate(-1.5deg);transition:transform .25s ease}
.tarjeta-ejemplo:hover{transform:rotate(0) translateY(-4px)}
.tarjeta-ejemplo .num{font-size:14px;color:var(--suave)}.tarjeta-ejemplo strong{font:800 23px/1.25 var(--titulo)}
.tarjeta-ejemplo .decir{margin:4px 0 0;border-left-width:1px}.tarjeta-ejemplo .decir small{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acento)}.tarjeta-ejemplo .decir b{font:800 20px var(--titulo)}
@media (prefers-reduced-motion:no-preference){.tarjeta-ejemplo{animation:flotar 7s ease-in-out infinite}.tarjeta-ejemplo:hover{animation:none}}
@keyframes flotar{50%{translate:0 -8px}}
/* Caminos y tarjetas */
.caminos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:22px 0}
.caminos.dos{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sube{margin-top:-78px;position:relative}
.camino{display:grid;gap:6px;align-content:start;background:var(--caja);border:1px solid transparent;border-radius:var(--radio);padding:20px 22px;text-decoration:none;color:var(--texto);box-shadow:var(--sombra);transition:transform .15s ease,border-color .15s ease}
.camino:hover{border-color:var(--acento);transform:translateY(-2px)}
.camino strong{font:800 20px/1.3 var(--titulo);color:var(--acento)}.camino span{font-size:16px;color:var(--suave);line-height:1.5}
.camino .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--g2),var(--g3));color:#fff;margin-bottom:4px}
.banda-app{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:center;background:radial-gradient(90% 140% at 100% 0%,var(--g3) 0%,transparent 60%),linear-gradient(120deg,var(--g1),var(--g2));color:var(--texto-banda);border-radius:calc(var(--radio) + 6px);padding:34px;margin:48px 0 8px}
.banda-app h2{margin:0 0 8px;color:inherit}.banda-app p{margin:0;color:var(--suave-banda)}.banda-app a{color:#ffffff}
/* Botones */
.boton{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:16px;font-weight:700;border:1px solid var(--acento);color:var(--acento);background:var(--caja);border-radius:10px;padding:8px 15px;cursor:pointer;margin:4px 0;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.boton:hover{transform:translateY(-1px)}
.boton.principal{background:var(--acento);color:var(--sobre-acento)}
.boton.grande{font-size:18px;padding:14px 22px;border-radius:12px}
.cabecera .boton.principal,.banda-app .boton{background:#ffffff;color:var(--g1);border-color:#ffffff;box-shadow:0 12px 26px -12px rgb(0 0 0/.6)}
.cabecera .boton.secundario{background:rgb(255 255 255/.12);color:#ffffff;border-color:rgb(255 255 255/.45)}
.boton:focus-visible,.camino:focus-visible,.tarjeta-ejemplo:focus-visible,a:focus-visible{outline:3px solid var(--acento);outline-offset:3px}
.cabecera a:focus-visible,.banda-app a:focus-visible{outline-color:#ffffff}
/* Página de pregunta: dos columnas en la compu; al costado, escuchar y seguir. */
.dos-columnas{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;align-items:start}
.columna{min-width:0}
.lateral{position:sticky;top:20px;display:grid;gap:14px}
.lateral>*{margin:0}
.caja-lateral{background:var(--caja);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px;display:grid;gap:10px}
.caja-lateral .boton{justify-content:center}
.decir{background:color-mix(in srgb,var(--acento) 8%,var(--caja));border:1px solid color-mix(in srgb,var(--acento) 30%,var(--linea));border-left:5px solid var(--acento);border-radius:12px;padding:14px 16px;margin:16px 0}
.decir span[lang=en]{font:800 21px/1.35 var(--titulo)}
table{border-collapse:collapse;width:100%;font-size:16px;background:var(--caja);border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
td,th{border-bottom:1px solid var(--linea);padding:10px 12px;text-align:left;vertical-align:top}th{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--suave)}
tr:last-child td{border-bottom:0}
.pasos{display:flex;justify-content:space-between;gap:12px;font-size:16px}
ol.lista{padding-left:26px}ol.lista li{margin:5px 0}
.pie{border-top:1px solid var(--linea);color:var(--suave);font-size:15px;padding-block:26px 40px;background:var(--caja)}
.tapa{border:2px dashed var(--linea);border-radius:var(--radio);padding:20px;text-align:center;color:var(--suave);margin:16px 0;background:var(--caja)}
.ayuda{background:color-mix(in srgb,var(--marca) 55%,var(--caja));border-radius:12px;padding:14px 16px;margin:18px 0}
.senadores{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;margin:12px 0}.senadores figure{margin:0}.senadores img{width:160px;max-width:100%;height:auto}
.tablero{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}@media (max-width:820px){.tablero{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:520px){.tablero{grid-template-columns:repeat(2,minmax(0,1fr))}}
.carta{min-height:120px;border-radius:12px;border:1px solid var(--linea);background:linear-gradient(135deg,var(--g1),var(--g2));color:#ffffff;font:inherit;font-size:16px;line-height:1.3;padding:12px;cursor:pointer;overflow-wrap:anywhere;box-shadow:var(--sombra)}
.carta.abierta{background:var(--caja);color:var(--texto)}.carta.no{border:2px dashed var(--suave)}.anuncio{min-height:1.6em;font-size:16px;color:var(--suave)}.carta.hecha{background:var(--caja);color:var(--texto);border:2px solid var(--acento);cursor:default}
.nombres-ocultos .nombre{color:transparent;background:var(--linea);border-radius:4px}
.muestra{margin:12px 0}.tarjeta-muestra:focus{outline:none}.tarjeta-muestra{background:var(--caja);border-radius:var(--radio);box-shadow:var(--sombra);padding:18px;animation:aparecer .4s ease-out}
.compra{background:var(--caja);border:2px solid var(--acento);border-radius:var(--radio);padding:20px;margin:18px 0;box-shadow:var(--sombra)}.opcion{display:flex;gap:10px;align-items:flex-start}.opcion input{margin-top:7px}
@keyframes aparecer{from{opacity:0;transform:translateY(6px)}}
figure{margin:18px 0}figure img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--linea)}figcaption{color:var(--suave);font-size:15px}
.azar{display:grid;gap:8px;font-size:16px}.azar label{display:flex;gap:6px;align-items:center;color:var(--suave)}
@media (prefers-reduced-motion:reduce){.tarjeta-muestra,.tarjeta-ejemplo{animation:none}.boton,.camino,.tarjeta-ejemplo{transition:none}}
/* Teléfono y tableta: una columna */
@media (max-width:860px){.portada,.dos-columnas,.banda-app{grid-template-columns:1fr;gap:28px}.lateral{position:static;order:-1}.tarjeta-ejemplo{transform:none}}
@media (max-width:560px){body{font-size:17px}.menu{gap:8px 16px;font-size:15px}.menu .cta{order:1}.menu::after{content:"";flex-basis:100%;order:1}.menu a:not(.logo):not(.cta){order:2}.portada{padding-block:10px 70px}.banda-app{padding:24px}.sube{margin-top:-58px}}
/* Usar el ancho de la compu: costado con índice en las páginas de texto y listas en columnas. */
.indice ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:16px;line-height:1.4}
.caja-lateral>strong{font:800 17px var(--titulo)}
.caja-lateral>a{text-decoration:none;font-weight:700}.caja-lateral>a:hover{text-decoration:underline}
ol.lista{columns:2 380px;column-gap:56px}ul.lista{columns:3 220px;column-gap:40px}
ol.lista li,ul.lista li{break-inside:avoid}
h2[id]{scroll-margin-top:20px}
.conector{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:start}
.conector .caja-lateral code{font-size:15px}
@media (max-width:860px){.conector{grid-template-columns:1fr}}
@media (max-width:860px){.lateral.al-final{order:0}}
ul.caja-lateral{list-style:none;margin:0}ul.caja-lateral li{display:grid;gap:4px}
main.cont>ol.lista,main.cont>ul.lista{max-width:none}
.boton[data-estado="cargando"]{cursor:progress;animation:latido 1s ease-in-out infinite alternate}
.boton[data-estado="sonando"]{border-width:2px}
@keyframes latido{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){.boton[data-estado="cargando"]{animation:none;opacity:.7}}