/* Base */
:root{
  --bg:#0f0f10; /* near black */
  --text:#f5f5f7; /* near white */
  --muted:#b8b8bb;
  --gold:#c7a008;
  --accent:#ffd166; /* soft gold */
  --card:#18181b;
  --brand:#ffffff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Poppins',system-ui,Arial,Helvetica,sans-serif; color:var(--text); background:var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px,92%); margin-inline:auto}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(15,15,16,.9); backdrop-filter:saturate(140%) blur(6px); border-bottom:1px solid #232326}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:10px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; color:var(--brand)}
.brand-mark{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:8px; background:var(--gold); color:#000; font-weight:800}
.main-nav{display:flex; gap:14px}
.nav-link{color:var(--text); opacity:.9}
.nav-link:hover{opacity:1}
.ad-728{display:flex; align-items:center; justify-content:center; height:90px; margin:6px auto; width:min(100%, 970px); border:1px dashed #3a3a40; color:var(--muted); font-size:.9rem}

/* Hero */
.hero{position:relative; min-height:68vh; display:grid; place-items:center; text-align:center}
.hero-bg{position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)),
  url('https://es.estilovivo.shop/real-madrid-vs-mallorca.jpg') center/cover no-repeat; filter:saturate(105%)}
.hero-content{position:relative; padding:64px 0}
.hero h1{font-size:1.65rem; line-height:1.25; margin:0 0 8px}
.subtitle{color:var(--muted); margin:0 0 14px}
.countdown{display:flex; gap:10px; justify-content:center; margin:10px 0 22px}
.countdown span{display:inline-grid; place-items:center; padding:8px 10px; border:1px solid #303037; border-radius:8px; background:rgba(24,24,27,.6)}
.btn{display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; border:none}
.btn-cta{background:linear-gradient(90deg, var(--gold), #ffe08a); color:#000}
.btn-cta:hover{filter:brightness(1.05)}
.btn-block{display:block; width:100%; text-align:center; margin-top:10px}

/* Watch + Sidebar */
.watch-section{display:grid; grid-template-columns:1fr; gap:18px; margin:28px auto}
.content{display:flex; flex-direction:column}
.player{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; border:1px solid #27272a}
.player-overlay{position:absolute; inset:0; margin:auto; height:100%; width:100%; display:grid; place-items:center; color:#fff; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.4)); font-size:1.3rem; cursor:pointer}
.ad-300{display:flex; align-items:center; justify-content:center; height:250px; width:100%; margin-top:14px; border:1px dashed #3a3a40; color:var(--muted)}
.sidebar{display:flex; flex-direction:column; gap:18px}
.card{background:var(--card); border:1px solid #2a2a30; border-radius:12px; padding:16px}
.teams{display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:6px}
.logo{width:40px; height:40px; border-radius:50%; background:#fff; color:#000; font-weight:800; display:grid; place-items:center}
.vs{color:var(--muted); font-weight:700}
.match-meta{list-style:none; padding:0; margin:10px 0 0}
.match-meta li{margin:6px 0}
.related h3{margin:0 0 8px}
.related ul{list-style:none; padding:0; margin:0}
.related li{margin:6px 0}

/* Article */
.article{margin:30px auto 60px}
.article h2, .article h3{margin-top:18px}
.article p{color:#e5e5e7; line-height:1.7}

/* Legal pages */
.legal{padding:28px 0}
.simple{background:#0f0f10}
.contact-form{display:grid; gap:10px; max-width:560px}
.contact-form input, .contact-form textarea{background:#111114; color:#fff; border:1px solid #2c2c31; border-radius:8px; padding:10px}
.contact-form button{justify-self:start}

/* Footer */
.site-footer{border-top:1px solid #232326; background:#0f0f10}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 0; flex-wrap:wrap}
.footer-nav{display:flex; gap:14px}
.copy{color:var(--muted)}

/* Responsive */
@media(min-width:960px){
  .hero h1{font-size:2.1rem}
  .watch-section{grid-template-columns:minmax(0,1fr) 320px}
}