*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.45 var(--cuerpo); padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
h1, h2, h3 { font-family: var(--titulo); text-transform: uppercase; letter-spacing: .02em; margin: 0; line-height: 1.05; }
h1 { font-size: 32px; font-weight: 800; } h2 { font-size: 24px; font-weight: 800; } h3 { font-size: 18px; font-weight: 700; }
p { margin: 0 0 .6em; } a { color: var(--caliente); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--caliente); outline-offset: 2px; }
#app { max-width: 640px; margin: 0 auto; padding: var(--gutter); outline: none; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--pique); color: var(--pique-texto); padding: 8px 12px; z-index: 99; }
[hidden] { display: none !important; }
.muted { color: var(--texto2); } .small { font-size: 14px; }
.cargando { text-align: center; padding: 60px 0; color: var(--texto2); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }