@font-face{font-family:"Integral CF";font-weight:800;src:url(/fonts/IntegralCF-Heavy.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Integral CF";font-weight:600;src:url(/fonts/IntegralCF-DemiBold.woff2) format("woff2");font-display:swap}
:root{--ink:#1b1b1d;--ink2:#242427;--linea:#38383c;--rojo:#e62a26;--rojo-fondo:#cc2420;--amarillo:#ffe100;--blanco:#f6f5f2;--gris:#bab7b2;--integral:"Integral CF",Impact,sans-serif;--fraunces:Fraunces,Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color-scheme:dark}
body{min-height:100svh;color:var(--blanco);font:400 18px/1.35 var(--fraunces);-webkit-font-smoothing:antialiased;display:flex;justify-content:center;padding:40px 18px}
main{width:100%;max-width:520px;display:flex;flex-direction:column;gap:32px}
header{text-align:center}
.logo{margin:0 auto 18px;width:72px;height:72px}
h1{font:800 clamp(34px,9vw,48px)/1 var(--integral);text-transform:uppercase;letter-spacing:.01em}
header p{margin-top:10px;font-style:italic;color:var(--gris)}
nav{display:flex;flex-direction:column;gap:12px}
.link{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:16px 18px;background:var(--ink2);border:2px solid var(--linea);color:var(--blanco);text-decoration:none;transition:background-color .12s steps(2),border-color .12s steps(2),color .12s steps(2)}
.t{font:800 17px/1.1 var(--integral);text-transform:uppercase}
.s{grid-column:1;font-style:italic;color:var(--gris);font-size:15px;margin-top:4px}
.a{grid-column:2;grid-row:1/span 2;font:800 20px var(--integral)}
.link:hover,.link:focus-visible{border-color:var(--amarillo)}
.link:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.main{background:var(--rojo-fondo);border-color:var(--rojo-fondo);padding:22px 18px}
.main .t{font-size:22px}.main .s{color:var(--blanco)}
.main:hover,.main:focus-visible{background:var(--amarillo);border-color:var(--amarillo);color:var(--ink)}
.main:hover .s,.main:focus-visible .s{color:var(--ink)}
footer{text-align:center;font:600 12px var(--integral);letter-spacing:.08em;color:var(--gris);text-transform:uppercase}
@media(min-width:860px){body{align-items:center;padding:64px 48px}main{max-width:560px}.logo{width:88px;height:88px}}
@media(prefers-reduced-motion:reduce){.link{transition:none}}