@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');
:root { color:#181815; background:#f2f0e9; font-family:"DM Sans",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; }
.bar { height:76px; padding:0 max(22px,calc((100vw - 1040px)/2)); display:flex; align-items:center; justify-content:space-between; color:#fff; background:#0b0b0b; }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font:700 13px/1 "Manrope"; letter-spacing:.18em; }
.mark { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#171714; background:#e6ff45; font-size:17px; letter-spacing:0; }
.bar > a:last-child { color:rgba(255,255,255,.67); font-size:12px; text-decoration:none; }
.hero { padding:90px max(22px,calc((100vw - 1040px)/2)) 70px; color:#fff; background:#11110f; }
.kicker { margin:0 0 22px; color:#e6ff45; font:700 11px/1 "Manrope"; letter-spacing:.16em; text-transform:uppercase; }
h1 { max-width:850px; margin:0; font:600 clamp(44px,7vw,76px)/.98 "Manrope"; letter-spacing:-.06em; }
.hero p:last-child { max-width:680px; margin:26px 0 0; color:rgba(255,255,255,.6); font-size:17px; line-height:1.65; }
main { width:min(820px,calc(100% - 44px)); margin:0 auto; padding:80px 0 110px; }
.updated { margin:0 0 46px; color:#6c6b64; font-size:12px; }
h2 { margin:52px 0 13px; font:600 26px/1.2 "Manrope"; letter-spacing:-.035em; }
h3 { margin:30px 0 10px; font:600 18px/1.3 "Manrope"; }
p,li { color:#55544e; font-size:16px; line-height:1.75; }
ul,ol { padding-left:22px; }
.callout { margin:42px 0; padding:28px; border-left:4px solid #e6ff45; background:#fff; box-shadow:0 16px 48px rgba(31,30,26,.06); }
.callout p { margin:0; color:#282822; }
.actions { margin-top:55px; display:flex; flex-wrap:wrap; gap:12px; }
.button { padding:15px 19px; border:1px solid #c9c7bd; text-decoration:none; font-weight:700; font-size:13px; }
.button.primary { border-color:#e6ff45; background:#e6ff45; }
footer { padding:35px 22px; text-align:center; color:rgba(255,255,255,.45); background:#0b0b0b; font-size:12px; }
@media(max-width:600px){.hero{padding-top:68px}main{padding-top:58px}h2{margin-top:42px}.bar> a:last-child{font-size:0}.bar> a:last-child::after{content:"Volver";font-size:12px}}