:root{
  --red:#d91023;
  --deep-red:#8f0715;
  --white:#ffffff;
  --ink:#151515;
  --muted:#5f6673;
  --cream:#fff8f4;
  --card:rgba(255,255,255,.88);
  --border:rgba(217,16,35,.18);
  --shadow:0 22px 60px rgba(25,10,15,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 20% 10%, rgba(217,16,35,.16), transparent 32%),
    linear-gradient(115deg, #fff 0%, #fff6f3 42%, #fff 100%);
  min-height:100vh;
}
.sport-bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.9)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='900' viewBox='0 0 1400 900'%3E%3Cg opacity='.26' fill='none' stroke='%23d91023' stroke-width='5'%3E%3Ccircle cx='135' cy='120' r='70'/%3E%3Cpath d='M85 120h100M135 50v140M95 72c50 35 50 65 0 96M175 72c-50 35-50 65 0 96'/%3E%3Crect x='1030' y='80' width='220' height='140' rx='28'/%3E%3Cpath d='M1070 150h140M1140 110v80'/%3E%3Cpath d='M320 680c110-115 240-120 390-24M380 730c100-75 210-78 330-20'/%3E%3Ccircle cx='835' cy='180' r='52'/%3E%3Cpath d='M795 145l80 70M875 145l-80 70'/%3E%3Cpath d='M1020 650l220-130M1010 675l250-148M1060 715l70-170'/%3E%3Cpath d='M190 430h250M190 520h250M245 360v230M385 360v230'/%3E%3C/g%3E%3Cg opacity='.18' fill='%23151515'%3E%3Ctext x='520' y='330' font-size='72' font-family='Arial' font-weight='700'%3EPE%3C/text%3E%3Ctext x='650' y='520' font-size='42' font-family='Arial' font-weight='700'%3EFÚTBOL · VÓLEY · BOX%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size:cover;
  background-position:center;
}
.site-header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(16px,3vw,44px);
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);font-weight:900;letter-spacing:-.03em;font-size:1.1rem}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--red),var(--deep-red));color:white;box-shadow:0 12px 24px rgba(217,16,35,.25)}
.site-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:980px}
.site-nav a{color:#202020;text-decoration:none;font-weight:700;font-size:.9rem;padding:9px 11px;border-radius:999px}
.site-nav a:hover{background:var(--red);color:white}
.menu-toggle{display:none;border:0;background:var(--red);color:white;border-radius:12px;padding:10px 13px;font-size:1.2rem}
main{width:min(1180px,92%);margin:0 auto;padding:34px 0 58px}
.hero{
  position:relative;overflow:hidden;
  border-radius:34px;
  padding:clamp(34px,7vw,82px);
  background:
    linear-gradient(125deg, rgba(217,16,35,.96), rgba(143,7,21,.92)),
    linear-gradient(90deg, #d91023 0 33%, #fff 33% 66%, #d91023 66%);
  color:white;
  box-shadow:var(--shadow);
}
.flag-ribbon{position:absolute;inset:auto 0 0 0;height:9px;background:linear-gradient(90deg,var(--red) 0 33%,#fff 33% 66%,var(--red) 66%)}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.78rem;opacity:.9}
h1{font-size:clamp(2.3rem,7vw,5.6rem);line-height:.93;margin:10px 0 18px;letter-spacing:-.075em;max-width:920px}
.lead{font-size:clamp(1.05rem,2.1vw,1.35rem);max-width:780px;line-height:1.65}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:999px;padding:14px 19px;font-weight:900}
.btn.primary{background:white;color:var(--red)}
.btn.secondary{border:1px solid rgba(255,255,255,.55);color:white}
.content-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr);gap:22px;margin-top:24px}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:28px;
  padding:clamp(20px,3vw,34px);
  box-shadow:0 18px 50px rgba(20,10,10,.08);
}
.panel h2{margin-top:0;font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.045em}
.article-copy p{font-size:1.04rem;line-height:1.82;color:#2f333a}
.match-card{padding:18px;border-radius:22px;background:linear-gradient(180deg,#fff,#fff4f2);border:1px solid var(--border);margin-bottom:13px}
.match-card span{font-size:.72rem;text-transform:uppercase;letter-spacing:.13em;font-weight:900;color:var(--red)}
.match-card h3{margin:.4rem 0;font-size:1.05rem}
.match-card p{margin:0;color:var(--muted);line-height:1.55}
.fan-comment blockquote{font-size:clamp(1.3rem,3vw,2rem);line-height:1.42;margin:0;color:#241015;font-weight:800;letter-spacing:-.04em}
.comment-author{color:var(--red);font-weight:900}
.link-cloud div{display:flex;gap:10px;flex-wrap:wrap}
.pill{padding:10px 14px;border-radius:999px;background:#fff;color:var(--deep-red);font-weight:850;text-decoration:none;border:1px solid var(--border)}
.pill:hover{background:var(--red);color:white}
footer{text-align:center;padding:34px 18px;background:#151515;color:white}
footer p{margin-bottom:0;color:#ddd}
@media (max-width:900px){
  .menu-toggle{display:block}
  .site-header{align-items:flex-start}
  .site-nav{display:none;position:absolute;top:70px;left:4%;right:4%;background:white;border:1px solid var(--border);border-radius:22px;padding:16px;box-shadow:var(--shadow)}
  .site-nav.open{display:grid;grid-template-columns:1fr 1fr}
  .site-nav a{background:#fff7f6}
  .content-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  main{width:94%;padding-top:20px}
  .hero{border-radius:26px;padding:30px 22px}
  .site-nav.open{grid-template-columns:1fr}
}