/* ===== Base: variables, reinicio, tipografía y utilidades =====
   Narrativa por scroll: secciones grafito y acero alternadas, títulos enormes centrados.
   Firma: temple del acero + cordón de soldadura. */
:root{
  color-scheme:dark;
  --negro:#0e1012; --grafito:#17191c; --acero:#eceef0; --gris:#98a0a8; --gris2:#8a929b; --linea:#2a2e33;
  --paja:#e3b04f; --bronce:#b4652f; --violeta:#6b55a8; --temple:#3a73ad; --wa:#15803d; --wa-osc:#116a33; --wa-ico:#1fa855;
  --temple-grad:linear-gradient(90deg,#f0d38a,#e3b04f 20%,#b4652f 45%,#6b55a8 70%,#3a73ad);
  --f:'Archivo','Arial Black',system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --alto-barra:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:calc(var(--alto-barra) + 12px);
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--negro);color:#f2f3f4;font-family:var(--f);font-stretch:100%;font-size:18px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-stretch:125%;font-weight:850;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;overflow-wrap:anywhere}
p{text-wrap:pretty;overflow-wrap:break-word}
a{color:inherit}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:3px solid var(--paja);outline-offset:3px;border-radius:8px}
.pend{border-bottom:2px solid var(--paja);padding:0 2px 2px;color:var(--paja);font-weight:600}
.temple-txt{background:var(--temple-grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Enlace para saltar al contenido (teclado y lectores de pantalla) */
.saltar{position:absolute;left:12px;top:-60px;z-index:30;background:var(--paja);color:#15181b;padding:10px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.saltar:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

/* Botones y enlaces de acción */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-weight:700;text-decoration:none;white-space:nowrap;border:0;cursor:pointer;font-family:inherit;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform 140ms var(--ease-out),background-color 160ms ease}
.pill-sm{padding:10px 18px;min-height:40px;font-size:13px;background:var(--wa);color:#fff}
.pill-lg{padding:15px 28px;font-size:17px;background:var(--wa);color:#fff;min-height:48px}
.pill:active{transform:scale(.97);background:var(--wa-osc)}
.enlace{color:var(--paja);text-decoration:none;font-weight:700;font-size:17px;padding:10px 4px;display:inline-block}
.enlace:active{opacity:.7}

@media (hover:hover) and (pointer:fine){
  .pill:hover{background:var(--wa-osc)}
  .enlace:hover{text-decoration:underline}
}