body {
  font-family: 'Segoe UI', sans-serif;
  background: #f0f0f0;
  margin: 0;
  padding: 20px;
}

header {
  background: #004aad;
  color: white;
  padding: 15px;
  text-align: center;
  border-radius: 10px;
}

h2 {
  margin-top: 30px;
  color: #222;
}

.card {
  background: white;
  padding: 15px;
  margin: 15px 0;
  border-left: 5px solid #004aad;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card p {
  margin: 0;
  font-size: 18px;
}

.card span {
  color: #555;
  font-size: 14px;
}

form {
  background: white;
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

form label {
  display: block;
  margin: 10px 0 5px;
}

form input, form select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form button {
  margin-top: 15px;
  background: #004aad;
  color: white;
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

form button:hover {
  background: #003080;
}


table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}

thead {
  background-color: #004aad;
  color: white;
}

th, td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

tbody tr:hover {
  background-color: #f2f2f2;
}


#calendario h2 {
  background-color: #e1eaff;
  padding: 8px;
  border-left: 5px solid #004aad;
  border-radius: 4px;
  margin-top: 20px;
}

td img {
  margin-right: 5px;
  vertical-align: middle;
  border-radius: 50%;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: translateY(0); }
}
.noticia-destacada {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 480px;
  margin-bottom: 30px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}
.noticia-destacada .bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform .8s ease;
}
.noticia-destacada:hover .bg { transform: scale(1.1); }
.noticia-destacada .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2));
}
.noticia-destacada .contenido {
  position: relative;
  z-index: 2;
  padding: 40px;
  color: #fff;
  max-width: 70%;
}
.noticia-destacada .badge {
  background: #e3242b;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 10px;
  display:inline-block;
}
.noticia-destacada h2 { font-size: 2.6rem; margin: 10px 0 15px; font-weight: 900; }
.noticia-destacada h2 a { color: #fff; text-decoration: none; }
.noticia-destacada p { font-size: 1.2rem; margin-bottom: 25px; color: #f3f4f6; }
.noticia-destacada .btn-ver {
  padding: 12px 26px;
  background: #12b886;
  color: #fff;
  border-radius: 50px;
  font-weight: bold;
  text-decoration: none;
  transition: all .3s;
}
.noticia-destacada .btn-ver:hover {
  background: #0f9a6c;
  transform: translateY(-3px);
  box-shadow: 0 6px 15px rgba(0,0,0,.3);
}
@media (max-width:768px){
  .noticia-destacada{height:380px}
  .noticia-destacada .contenido{max-width:100%;padding:20px}
  .noticia-destacada h2{font-size:1.6rem}
  .noticia-destacada p{font-size:1rem}
}
 
 :root{
      --bg:#f7f8fa; --text:#111827; --muted:#6b7280; --line:#e5e7eb;
      --brand:#b70000; --link:#1f2937; --card:#fff; --chip:#111827; --blue:#2563eb;
    }
    *{box-sizing:border-box}
    html,body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}

    /* ===== layout base ===== */
    .container{max-width:1160px;margin:0 auto;padding:0 16px}
    .topbar{background:var(--brand);color:#fff}
    .topbar .wrap{max-width:1160px;margin:0 auto;padding:12px 16px;display:flex;gap:16px;align-items:center;justify-content:space-between}
    .brand{font-family:Archivo,Inter,sans-serif;font-weight:900;letter-spacing:.3px}
    .brand a{color:#fff;text-decoration:none;font-size:1.1rem}
    nav a{color:#fff;text-decoration:none;margin-left:18px;font-weight:600}

    .ad{max-width:1160px;margin:12px auto;padding:0 16px}
    .ad .slot{background:#0b1220;border-radius:12px;color:#cbd5e1;text-align:center;padding:16px}
    .ad-top .slot{min-height:120px}
    .ad-side .slot{min-height:300px}

    .strip{max-width:1160px;margin:10px auto 0;padding:0 16px}

    /* ===== MAIN GRIDS ===== */
    .results{ /* Tabla + Ir a campeonato */
      max-width:1160px;margin:12px auto;padding:0 16px;
      display:grid;gap:18px;
      grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
    }
    .results > .pad{min-width:0}
    .main{max-width:1160px;margin:12px auto 24px;padding:0 16px;display:grid;grid-template-columns:2fr 1fr;gap:18px}
    .pad{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}

    /* Hero */
    .hero{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
    .hero-grid{display:grid;grid-template-columns:1.2fr 1fr}
    .hero .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
    .hero .body{padding:18px}
    .chip{display:inline-block;background:#ffe3e7;color:#9a0013;border-radius:999px;padding:2px 8px;font-weight:800;font-size:.75rem;margin-right:10px}
    .meta{color:var(--muted);font-size:.9rem;margin-top:6px}

    /* Cards de noticias */
    .grid{margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
    .card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
    .card .thumb img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
    .card .body{display:flex;flex-direction:column;padding:12px;gap:8px;min-height:184px}
    .date{color:var(--muted);font-size:.86rem}
    .card h3{margin:0;font-size:1.05rem;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .excerpt-sm{color:#374151;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.6em}
    .card .foot{margin-top:auto}
    .link{color:var(--brand);font-weight:700;text-decoration:none}

    .box{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px}
    .box h3{margin:0;padding:12px 14px;border-bottom:1px solid var(--line);font-weight:900}

    /* ===== Filtros / Tabla ===== */
    .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
    .filters select,.filters button,.filters input[type="search"]{
      padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#fff
    }
    .filters button{background:#e11d48;color:#fff;border-color:#e11d48;font-weight:700;cursor:pointer}
    .filters button:hover{opacity:.95}

    #tablaWrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    #tablaWrap table{ min-width:560px; width:100%; border-collapse:collapse; font-size:clamp(12px, 2.8vw, 14px); }
    #tablaWrap th,#tablaWrap td{ padding:10px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap }
    #tablaWrap th:first-child,#tablaWrap td:first-child{ text-align:left; white-space:normal }

    /* Chips con scroll horizontal táctil */
    .chiplist{display:flex;gap:10px;flex-wrap:nowrap;overflow:auto;padding-bottom:6px}
    .chiplist::-webkit-scrollbar{height:8px}
    .chiplist::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}
    .chiplink{display:inline-block;background:#eef2ff;color:#1e40af;border:1px solid #dbeafe;border-radius:999px;padding:8px 12px;font-weight:700;text-decoration:none;white-space:nowrap}
    .chiplink:hover{background:#dbeafe}

    /* ===== Responsive ===== */
    @media (max-width:1200px){
      .results{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
    }
    @media (max-width:992px){
      .hero-grid{grid-template-columns:1fr}
      .grid{grid-template-columns:repeat(2,1fr)}
      .main{grid-template-columns:1fr}
    }
    @media (max-width:768px){
      .results{ grid-template-columns:1fr; gap:12px; }
      .filters{ flex-direction:column; align-items:stretch; gap:8px; }
      .filters > *{ width:100%; max-width:100%; }
      .grid{grid-template-columns:1fr}
      .ad .slot{min-height:80px}
      .ad-top .slot{min-height:96px}
      .container, .results, .main, .ad, .strip { padding:0 12px; }
    }
    @media (max-width:560px){
      #tablaWrap table{ min-width:520px; }
      .card .body{min-height:auto}
      .chiplink{padding:7px 10px;font-size:.92rem}
    }