/* OlgaDev · estilo compartido de las páginas estáticas (guías, respuestas, legales, recursos, proyectos, cursos y apps).
   Les pone la cara de la portada nueva (oct-2026) sin tocar sus textos ni sus direcciones: se carga DESPUÉS del <style>
   de cada página y redefine sus variables (--bg, --panel, --ink…) y sus piezas comunes (cabecera .top, pie .pie, h1, .btn…).
   Oscuro por defecto y claro con [data-tema="claro"], como el resto del sitio (tema.js). Al cambiarlo, sube el ?v= de los
   <link> (nginx cachea los .css un mes): lo hace parches/olgadev-estilo-estaticas.py. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/bricolage-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--bg:#0b0a12;--panel:#151225;--ink:#f1eefb;--muted:#a9a5bd;--line:#2a2640;--acc:#7c3aed;--acc2:#c4b5fd;--texto:#d9d5e8;--texto-alto:#f1eefb;--fuerte:#fff;--velo:rgba(11,10,18,.86);
  --od-amarillo:#ffd935;--od-display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;--od-mono:ui-monospace,SFMono-Regular,Menlo,monospace}
:root[data-tema="claro"]{--bg:#fff;--panel:#f6f3fc;--ink:#140d26;--muted:#5b5670;--line:#e6e1f3;--acc:#7c3aed;--acc2:#5b21b6;--texto:#3b3550;--texto-alto:#241f36;--fuerte:#140d26;--velo:rgba(255,255,255,.9)}
body{background:var(--bg)}

/* ── Cabecera común (la ponen iguales en todas parches/olgadev-estilo-estaticas.py) ── */
header.top{position:sticky;top:0;z-index:20;background:var(--velo);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header.top .wrap{max-width:1100px;margin:0 auto;padding:12px max(18px,env(safe-area-inset-right)) 12px max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:14px}
header.top .brand,footer.pie .brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:800 1.05rem/1 var(--od-display);letter-spacing:-.01em}
header.top .brand i,footer.pie .brand i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#7c3aed;flex:none}
header.top .brand img,footer.pie .brand img{width:20px;height:20px;filter:none!important}
.od-menu{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.od-menu::-webkit-scrollbar{display:none}
.od-menu a{flex:none;padding:8px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font:700 .92rem/1 var(--od-display);transition:color .2s,background .2s}
.od-menu a:hover,.od-menu a[aria-current="page"]{color:var(--ink);background:var(--panel)}
.od-ada{flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:999px;text-decoration:none;background:#7c3aed;color:#fff;font:800 .9rem/1 var(--od-display)}
.od-ada img{width:26px;height:26px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.7)}
@media (max-width:640px){header.top .wrap{flex-wrap:wrap;row-gap:8px}.od-menu{order:3;width:100%;margin-left:-6px}.od-ada{margin-left:auto}}

/* ── Tipografía de la portada ── */
nav.crumbs{font-family:var(--od-mono);font-size:12px;letter-spacing:.04em}
nav.crumbs a{color:var(--muted)} nav.crumbs a:hover{color:var(--acc2)}
.kicker{font:600 12px/1.2 var(--od-mono)!important;letter-spacing:.06em!important;text-transform:none!important;color:var(--acc2)!important}
.kicker::before{content:"("} .kicker::after{content:")"}
main h1{font-family:var(--od-display);font-weight:800;font-size:clamp(2.1rem,5.4vw,3.5rem);line-height:1;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
main h2{font-family:var(--od-display);font-weight:800;font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.12;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
main h3{font-family:var(--od-display);font-weight:800;letter-spacing:-.01em}
.lede{border-radius:18px!important;border-color:transparent!important;border-left:4px solid #7c3aed!important;background:var(--panel)!important}
thead th,caption{font-family:var(--od-display)!important;text-transform:none!important;letter-spacing:0!important;font-size:.85rem!important;font-weight:800}
.tabla-wrap{border-radius:18px}
.nota{border-radius:16px}
ul.bul li:before{border-radius:2px!important;transform:rotate(45deg);background:var(--acc)!important}

/* ── Botones: pastilla con el rombo, como en la portada ── */
.btn{border-radius:999px!important;font-family:var(--od-display);font-weight:800;padding:12px 20px!important;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:#7c3aed!important;color:#fff!important;border-color:transparent!important;padding-right:12px!important;box-shadow:0 12px 30px rgba(124,58,237,.3)}
.btn.primary::after{content:"";width:16px;height:16px;margin-left:4px;border-radius:4px;background:var(--od-amarillo);transform:rotate(45deg);transition:transform .45s cubic-bezier(.7,0,.2,1);flex:none}
.btn.primary:hover::after{transform:rotate(225deg)}
.btn.ghost{background:transparent!important;border:1.5px solid var(--line)!important;color:var(--ink)!important}
.btn.ghost:hover{border-color:var(--acc)!important}
.cta-note{font-family:inherit!important;font-size:.85rem!important}

/* ── Pie común ── */
footer.pie{margin-top:40px;border-top:1px solid var(--line);background:var(--bg);color:var(--muted);font:14px/1.5 -apple-system,"Segoe UI",system-ui,sans-serif}
footer.pie .wrap{max-width:1100px;margin:0 auto;padding:36px max(18px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:1.2fr 2fr;gap:28px;text-align:left}
.od-pie-marca p{margin:10px 0 0;color:var(--muted);font-size:.9rem}
.od-pie-ada{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--acc2);font-weight:700;text-decoration:none}
.od-pie-ada img{width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #22c55e}
.od-pie-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.od-pie-cols b{display:block;margin-bottom:8px;font:800 .95rem/1.2 var(--od-display);color:var(--ink)}
.od-pie-cols a{display:block;padding:4px 0;color:var(--muted);text-decoration:none}
.od-pie-cols a:hover{color:var(--acc2)}
.od-pie-final{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;padding-top:18px;border-top:1px solid var(--line);font-size:.85rem}
.od-pie-final b{color:var(--ink);font-family:var(--od-display)}
@media (max-width:720px){footer.pie .wrap{grid-template-columns:1fr}.od-pie-cols{grid-template-columns:1fr 1fr}}

/* Botones flotantes de tema.js: redondos y morados, como en la portada */
.flotante{background:#7c3aed!important;border-color:rgba(167,139,250,.45)!important;color:#fff!important}
@media (prefers-reduced-motion:reduce){.btn,.btn.primary::after{transition:none}}

/* Aviso de cookies (analitica.js): su caja es siempre oscura, así que su texto también se fija claro. Sin esto, en el tema
   claro el <p> y el <strong> heredaban el color oscuro de la página y no se leían (fallo anterior al 21-oct). */
[aria-label="Cookies de analítica"] p,[aria-label="Cookies de analítica"] strong{color:#e7e5ee!important}
/* El pie común manda sobre los estilos propios de cada página (algunas lo ponían en monoespaciada y centrado) */
footer.pie .wrap,footer.pie p,footer.pie span,footer.pie a{font-family:-apple-system,"Segoe UI",system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
footer.pie .brand,footer.pie .od-pie-cols b,footer.pie .od-pie-final b{font-family:var(--od-display)!important}
footer.pie .sep{display:none}

/* ── v2 (21-oct): piezas que aún iban con el estilo anterior (Proyectos, Recursos y otras): sin mayúsculas de máquina de
   escribir, con Bricolage y rombos, como la portada ── */
.gorro{font:600 12px/1.2 var(--od-mono)!important;letter-spacing:.06em!important;text-transform:none!important;color:var(--acc2)!important}
.gorro::before{content:"("} .gorro::after{content:")"}
.cifra{border-radius:20px!important}
.cifra b{font-family:var(--od-display);font-weight:800;font-size:2.4rem!important;letter-spacing:-.04em!important}
.cifra span{font:700 .9rem/1.25 var(--od-display)!important;letter-spacing:0!important;text-transform:none!important}
.nombre{font:800 clamp(1.7rem,3vw,2.2rem)/1 var(--od-display)!important;letter-spacing:-.035em!important;text-transform:lowercase}
.nombre::first-letter{text-transform:uppercase}
.categoria{font:700 .95rem/1.2 var(--od-display)!important;letter-spacing:0!important;text-transform:none!important}
.estado{font:800 .78rem/1 var(--od-display)!important;letter-spacing:0!important;text-transform:none!important;padding:7px 12px!important}
.estado.viva{background:rgba(34,197,94,.14)}
.estado.obra{background:rgba(124,58,237,.12)}
.chip{font:600 .78rem/1 var(--od-display)!important;letter-spacing:0!important;text-transform:none!important;border-radius:999px!important}
.proyecto{border-radius:26px!important}
.hace li::before{border-radius:2px!important;transform:rotate(45deg)}
.visitar{font:800 .95rem/1 var(--od-display)!important;border-radius:999px!important;padding:11px 18px!important;border:1.5px solid var(--line)!important;text-decoration:none}
.visitar::after{content:"";width:12px;height:12px;margin-left:4px;border-radius:3px;background:var(--od-amarillo);transform:rotate(45deg);flex:none}
.cierre{border-radius:26px!important}
.cierre h2{font-family:var(--od-display);font-weight:800;letter-spacing:-.03em}