:root{
    --sky-1:#1c2a45;
    --sky-2:#a34a24;
    --sky-3:#e8a23c;
    --tierra:#1b2415;
    --paper:#0e0d0b;
    --paper-2:#1c1a15;
    --surface:#18160f;
    --ink:#f2ede1;
    --ink-soft:#a8a495;
    --campo:#4d9760;
    --campo-dark:#3c6e47;
    --campo-light:#7fca8f;
    --trigo:#e0b13f;
    --clay:#e2703f;
    --line:#332f22;
    --white:#fffdf8;
    --radius:4px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}

  /* Salto al contenido: invisible hasta que se navega con teclado (Tab) */
  .skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:100;
    background:var(--trigo);
    color:var(--tierra);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:10px 18px;
  }
  .skip-link:focus{left:0;}
  :focus-visible{outline:2px solid var(--trigo);outline-offset:2px;}
  h1,h2,h3,h4{font-family:'Bitter',Georgia,serif;margin:0;}
  .eyebrow{
    font-family:'Barlow Condensed',sans-serif;
    letter-spacing:.14em;
    text-transform:uppercase;
    font-weight:700;
    font-size:.72rem;
    color:var(--campo-light);
  }
  .num, .score, .tabular{
    font-family:'Barlow Condensed',sans-serif;
    font-variant-numeric:tabular-nums;
  }

  /* ===== Horizon signature bar ===== */
  .horizon{
    height:6px;
    width:100%;
    background:linear-gradient(90deg,var(--sky-1),var(--sky-2) 55%,var(--sky-3));
  }

  /* ===== Header / Masthead ===== */
  header.masthead{
    background:
      linear-gradient(180deg, rgba(28,42,69,.92) 0%, rgba(163,74,36,.88) 62%, rgba(232,162,60,.9) 100%);
    color:var(--white);
    position:relative;
    overflow:hidden;
  }
  header.masthead::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:38%;
    background:var(--tierra);
    clip-path:polygon(0 68%, 12% 60%, 26% 66%, 40% 55%, 55% 63%, 70% 52%, 84% 60%, 100% 50%, 100% 100%, 0 100%);
    opacity:.9;
  }
  .masthead-inner{
    position:relative;
    z-index:2;
    max-width:1180px;
    margin:0 auto;
    padding:18px 24px 64px;
  }
  .topline{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.78rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.85;
    padding-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.22);
    flex-wrap:wrap;
    gap:8px;
  }
  .brand-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:16px;
    padding-top:26px;
  }
  .brand h1{
    font-size:clamp(2.4rem, 6vw, 4.2rem);
    font-weight:800;
    line-height:.92;
    letter-spacing:-.01em;
  }
  /* El titulo linkea al inicio. Hereda todo del h1 para que no se note que es
     un enlace: sin subrayado y sin color propio. Lo unico que cambia es el
     cursor, y el foco visible para quien navega con teclado. */
  .brand-link{
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    display:inline-block;
  }
  .brand-link:focus-visible{
    outline:2px solid rgba(255,255,255,.85);
    outline-offset:6px;
    border-radius:4px;
  }
  .brand h1 span{
    display:block;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:600;
    font-size:.32em;
    letter-spacing:.16em;
    text-transform:uppercase;
    opacity:.85;
    margin-bottom:6px;
  }
  nav.mainnav{
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.05em;
    font-size:.95rem;
  }
  nav.mainnav button{
    background:rgba(255,253,248,.12);
    border:1px solid rgba(255,255,255,.35);
    color:var(--white);
    padding:9px 16px;
    border-radius:999px;
    cursor:pointer;
    transition:.15s ease;
  }
  nav.mainnav button:hover{background:rgba(255,255,255,.28);}
  nav.mainnav button.active{background:var(--white);color:var(--tierra);border-color:var(--white);}

  /* ===== Desplegables de la barra =====
     El grupo es la referencia de posicion del menu, y va junto —sin el gap de
     la barra— para que el boton de la liga y su flechita se lean como una sola
     pieza partida al medio y no como dos botones sueltos. */
  .nav-grupo{position:relative;display:inline-flex;gap:2px;}
  .nav-grupo > button[data-view]{border-top-right-radius:4px;border-bottom-right-radius:4px;}
  nav.mainnav .nav-mas{
    padding:9px 10px;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
    line-height:1;
  }
  .nav-mas[aria-expanded="true"]{background:rgba(255,255,255,.28);}
  /* Cuando la vista activa cuelga del desplegable, el boton de la liga queda
     resaltado pero SIN el relleno lleno del .active: dice "estas por aca
     adentro", que no es lo mismo que "estas parado en esta vista". */
  .nav-grupo.tiene-activo > button[data-view],
  .nav-grupo.tiene-activo > .nav-mas{
    background:rgba(255,255,255,.28);
    border-color:var(--white);
  }
  /* `fixed` y no `absolute`, y no es un capricho: `header.masthead` tiene
     overflow:hidden —ahi vive la silueta del horizonte— y un menu absoluto
     queda CORTADO al llegar al borde de abajo del header. Paso: el segundo item
     del desplegable de la Cultural no se veia. Un elemento fixed no lo recorta
     el overflow de un ancestro, asi que el menu sale entero por encima del
     ticker. La contra es que hay que calcular top/left al abrir (lo hace
     ubicarMenu() en app.js) y cerrarlo al scrollear. */
  .nav-menu{
    position:fixed;
    z-index:60;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:6px;
    /* Nada de min-width:100%: con `fixed` ese 100% se mide contra la PANTALLA
       —no contra el grupo, como pasaba con `absolute`— y el menu salia del
       ancho del viewport. El ancho lo dan los propios items. */
    min-width:8rem;
    background:var(--tierra);
    border:1px solid rgba(255,255,255,.35);
    border-radius:12px;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
  }
  /* OJO: sin esto el menu NO se esconde. `display:flex` de arriba le gana por
     especificidad al `[hidden]{display:none}` del navegador, asi que el menu
     queda dibujado aunque el JS le ponga el atributo. Paso: los dos menus se
     veian abiertos desde que cargaba la pagina. */
  .nav-menu[hidden]{display:none;}
  .nav-menu button{white-space:nowrap;text-align:left;}
  /* En pantalla angosta la barra se parte en varias filas y un menu absoluto
     puede irse del borde derecho: se ancla a la derecha del grupo. */
  /* En pantalla angosta el menu se estira al ancho de la barra: con `fixed` y
     nombres largos, anclarlo al boton lo empujaba fuera del borde. */
  @media (max-width:560px){
    .nav-menu{left:12px;right:12px;}
    .nav-menu button{text-align:center;}
  }

  /* ===== Ticker ===== */
  .ticker-wrap{
    background:var(--tierra);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .ticker{
    max-width:1180px;
    margin:0 auto;
    display:flex;
    gap:0;
    overflow-x:auto;
    scrollbar-width:none;
    padding:0 24px;
  }
  .ticker::-webkit-scrollbar{display:none;}
  .tick-card{
    flex:0 0 auto;
    min-width:190px;
    padding:14px 18px;
    border-right:1px solid rgba(255,255,255,.12);
    color:var(--white);
  }
  .tick-card .liga-tag{
    font-family:'Barlow Condensed',sans-serif;
    font-size:.68rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--trigo);
    font-weight:700;
  }
  .tick-teams{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:6px;
    font-size:.92rem;
    font-weight:600;
  }
  .tick-teams .r{font-family:'Barlow Condensed',sans-serif;font-size:1.15rem;font-weight:800;color:var(--sky-3);}

  /* ===== Layout ===== */
  main{max-width:1180px;margin:0 auto;padding:40px 24px 20px;}
  .section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:18px;
    flex-wrap:wrap;
  }
  .section-head h2{font-size:1.7rem;font-weight:700;color:var(--ink);}
  .section-head .sub{color:var(--ink-soft);font-size:.9rem;max-width:520px;}

  .layout-grid{
    display:grid;
    grid-template-columns:1.65fr 1fr;
    gap:28px;
  }
  @media (max-width:880px){ .layout-grid{grid-template-columns:1fr;} }
  /* Sin esto, un hijo con contenido ancho (el fixture del Provincial, 28/9/2026)
     estira la columna más allá de la pantalla y arrastra a las demás tarjetas:
     un 1fr no baja del ancho mínimo de su contenido. */
  .layout-grid > *{min-width:0;}
  /* Mismo caso que .nav-menu: sin esto, display:grid le gana a [hidden]. */
  .layout-grid[hidden], .news-grid[hidden], .section-head[hidden]{display:none;}

  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
  }

  /* ===== Banner de portada: el hecho del momento, arriba de todo =====
     El contenedor es genérico a propósito: hoy anuncia el arranque del
     Regional, antes fue la final de la Liga Pampeana. Lo que cambia es lo que
     va adentro del banner, no el banner. */
  .banner-portada{
    position:relative;
    overflow:hidden;
    margin-bottom:28px;
    padding:26px 20px 20px;
    text-align:center;
    color:var(--white);
    border-radius:var(--radius);
    background:
      radial-gradient(120% 140% at 50% 0%, rgba(232,162,60,.22), transparent 60%),
      linear-gradient(180deg, var(--sky-1) 0%, #2a2f22 65%, var(--tierra) 100%);
    box-shadow:0 6px 22px rgba(20,18,10,.25);
  }
  /* Sin fondo, pero con el mismo padding que los paneles de texto: si no, la
     caja cambia de alto a cada vuelta del carrusel (17/10/2026). */
  .banner-portada.banner-imagen-activa{
    background:transparent;
    box-shadow:none;
  }
  .banner-portada-label{
    font-family:'Barlow Condensed',sans-serif;
    letter-spacing:.16em;
    text-transform:uppercase;
    font-weight:700;
    font-size:.78rem;
    color:var(--sky-3);
    margin-bottom:6px;
  }
  /* La foto va a todo el ancho de la página, de borde a borde de la caja, con
     su proporción (sin recorte: estos afiches tienen contenido hasta los
     bordes). Los márgenes negativos anulan el padding de .banner-portada, y la
     caja toma el alto de la foto también en los paneles de texto, así que el
     carrusel no salta (pedido del editor, 17/10/2026). */
  .banner-solo-imagen{ margin:-26px -20px 0; }
  .banner-partido-imagen{
    display:block;
    width:100%;
    height:auto;
    border-radius:0;
  }
  .shield-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:150px;
  }
  .shield{
    width:100px;
    height:100px;
    border-radius:16px;
    background:#fdfdfb;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 14px rgba(0,0,0,.5);
    will-change:transform;
    overflow:hidden;
    padding:8px;
  }
  .shield img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  /* Sin recuadro blanco detrás del escudo (pedido del editor, 28/9/2026): el
     escudo va directo sobre el fondo. Solo cuando hay imagen: las iniciales de
     un club sin escudo son oscuras y necesitan el fondo claro. El contorno claro
     y difuso es para que los escudos oscuros no se pierdan en el fondo. */
  .shield:has(img){ background:transparent; box-shadow:none; padding:0; }
  .shield img, img.bs-escudo{
    filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.6));
  }
  img.bs-escudo{ background:transparent; padding:0; border-radius:0; }
  .shield-ini{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:1.5rem;
    letter-spacing:.02em;
    color:var(--tierra);
  }
  .team-name{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:.95rem;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .team-name small{
    display:block;
    font-family:'Inter',sans-serif;
    font-weight:500;
    text-transform:none;
    letter-spacing:normal;
    font-size:.72rem;
    color:#cfd0c4;
    margin-top:2px;
  }
  /* Aviso al pie de una tabla que se calcula sola desde los resultados. Vacío
     cuando la tabla viene cargada a mano, y ahí no ocupa lugar. */
  .tabla-aviso{
    margin:0;
    padding:0 16px 14px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.84rem;
    letter-spacing:.03em;
    color:var(--ink-soft);
  }
  .tabla-aviso:empty{ display:none; }
  .tabla-aviso.hay-vivo{ color:var(--campo); font-weight:700; }
  /* Las otras zonas del Regional (1/10/2026): seis tablas chicas, de a dos en
     pantalla ancha y una debajo de la otra en el celular. */
  /* Llaves de las fases eliminatorias (17/10/2026). Una columna por ronda; en
     el celular las columnas se apilan, de cuartos a la final. */
  .llave-cont{ min-width:0; }
  .llave{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap:16px; margin-top:12px; }
  .ll-ronda h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.06em;
    font-size:.95rem; margin:0 0 8px; color:var(--ink); }
  .ll-ronda h4 small{ color:var(--ink-soft); font-weight:400; text-transform:none; letter-spacing:0; margin-left:4px; }
  .ll-series{ display:flex; flex-direction:column; justify-content:space-around; gap:12px; height:calc(100% - 28px); }
  .ll-serie{ border:1px solid var(--line); border-left:3px solid var(--trigo); border-radius:var(--radius);
    background:var(--paper-2); padding:8px 10px; }
  .ll-id{ font-family:'Barlow Condensed',sans-serif; font-size:.78rem; color:var(--ink-soft); letter-spacing:.04em; margin-bottom:4px; }
  .ll-eq{ display:flex; align-items:center; gap:8px; padding:3px 0; font-family:'Barlow Condensed',sans-serif; font-size:1rem; }
  .ll-eq .bs-escudo{ width:20px; height:20px; flex:0 0 20px; }
  .ll-nombre{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ll-goles{ font-weight:700; min-width:1.4em; text-align:right; }
  .ll-eq.gana{ color:var(--campo-light); font-weight:700; }
  .ll-eq.pierde{ color:var(--ink-soft); }
  .ll-eq.a-definir .ll-nombre{ color:var(--ink-soft); font-style:italic; }
  .ll-penales{ font-size:.78rem; color:var(--trigo); margin:2px 0; }
  .ll-partidos{ list-style:none; margin:6px 0 0; padding:6px 0 0; border-top:1px dashed var(--line);
    font-size:.78rem; color:var(--ink-soft); line-height:1.45; }
  .ll-partidos b{ color:var(--ink); font-weight:600; }
  .ll-partidos li.vivo{ color:var(--campo-light); }
  /* Cuadro radial (17/10/2026). Fondo con el degradé del cielo pampeano, tenue. */
  .ll-radial{ display:block; width:100%; max-width:600px; margin:8px auto 0; border-radius:var(--radius);
    background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sky-1) 70%, transparent) 0%, transparent 70%); }
  .ll-r-linea{ fill:none; stroke:var(--ink-soft); stroke-width:2; opacity:.55; }
  .ll-r-avanza{ fill:none; stroke:var(--trigo); stroke-width:3.5; }
  .ll-r-centro{ fill:var(--paper-2); stroke:var(--trigo); stroke-width:2; }
  .ll-r-punto{ fill:var(--ink); }
  .ll-r-sin{ fill:var(--paper-2); stroke:var(--line); stroke-width:2; }
  .ll-r-ini, .ll-r-marca, .ll-r-titulo, .ll-r-sub, .ll-r-campeon{ text-anchor:middle; dominant-baseline:middle;
    font-family:'Barlow Condensed',sans-serif; }
  .ll-r-ini{ fill:var(--ink-soft); font-size:14px; font-weight:700; }
  .ll-r-marca{ fill:var(--trigo); font-size:14px; font-weight:700; }
  .ll-r-titulo{ fill:var(--ink); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
  .ll-r-sub{ fill:var(--ink-soft); font-size:11px; }
  .ll-r-campeon{ fill:var(--trigo); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
  .ll-r-pie{ text-align:center; font-size:.78rem; color:var(--ink-soft); margin:6px 0 4px; }
  .zonas-region{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap:18px;
    margin:14px 0 12px;
  }
  .zonas-region .standings{ margin:0; }
  /* "Libre: X" bajo los cruces sin día de una zona impar (1/10/2026). */
  .fx-libre{ margin:2px 0 10px; padding:0 14px; font-family:'Barlow Condensed',sans-serif; font-size:.88rem; color:var(--ink-soft); }
  .side-card > .sub{ color:var(--ink-soft); font-size:.9rem; }

  /* ===== Agenda semanal de partidos (portada) =====
     Estructura tomada de la programación de Promiedos —barra de día, rótulo de
     competencia, una fila por partido— pero con la paleta del sitio: la barra de
     día en tierra, el rótulo en trigo y las filas sobre papel. */
  .agenda-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:10px;
  }
  /* Estado de la planilla en vivo. Sin planilla conectada queda vacío, y un
     párrafo vacío no debe dejar un hueco en la portada. */
  .agenda-estado{
    margin:0 0 30px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.86rem;
    letter-spacing:.04em;
    color:var(--ink-soft);
    text-align:right;
  }
  .agenda-estado:empty{ display:none; }
  .agenda-estado.hay-vivo{ color:var(--campo); font-weight:700; }
  .agenda-estado.con-error{ color:var(--clay); }
  .ag-dia{
    background:var(--tierra);
    color:var(--white);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:1rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    text-align:center;
    padding:7px 12px;
  }
  .ag-comp{
    background:rgba(224,177,63,.16);
    border-bottom:1px solid var(--line);
    color:var(--ink);
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:.88rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding:6px 14px;
  }
  /* El rótulo lleva a la sección del torneo (solo en la portada). */
  .ag-comp-link{ display:block; text-decoration:none; }
  .ag-comp-link::after{ content:" ›"; opacity:.55; }
  .ag-comp-link:hover,
  .ag-comp-link:focus-visible{ background:rgba(224,177,63,.28); }
  .ag-comp-link:hover::after{ opacity:1; }

  /* La publicidad de la portada (9/11/2026): una franja a lo ancho de la
     grilla, entre dos torneos. Usa las tipografías y los colores del sitio; del
     aviso original quedan la foto con el logo y el celeste del agua, como
     acento. La arma htmlPublicidad() en app.js. */
  .publi{
    position:relative;
    display:grid;
    grid-template-columns:minmax(220px, 300px) 1fr auto;
    align-items:stretch;
    background:linear-gradient(90deg, var(--paper-2), var(--surface));
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:10px 0;
  }
  .publi:last-child{ margin-bottom:0; border-bottom:0; }
  .publi-tag{
    position:absolute; top:0; right:0; z-index:1;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-soft);
    padding:3px 8px;
    background:rgba(0,0,0,.25);
    border-bottom-left-radius:var(--radius);
  }
  .publi-foto{
    min-height:150px;
    background-size:cover;
    background-position:70% 40%;
    -webkit-mask-image:linear-gradient(90deg, #000 78%, transparent);
            mask-image:linear-gradient(90deg, #000 78%, transparent);
  }
  .publi-texto{ padding:16px 12px 16px 6px; align-self:center; min-width:0; }
  .publi-marca{
    font-family:'Barlow Condensed',sans-serif;
    font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:#6cb8ee; margin:0 0 2px;
  }
  .publi-titulo{
    font-family:'Bitter',serif; font-weight:700;
    font-size:1.55rem; line-height:1.15; color:var(--ink); margin:0 0 8px;
  }
  .publi-titulo span{ color:#6cb8ee; }
  .publi-detalle{
    list-style:none; margin:0; padding:0;
    display:flex; flex-wrap:wrap; gap:4px 16px;
    font-size:.88rem; color:var(--ink-soft);
  }
  .publi-detalle li::before{ content:"💧"; font-size:.7rem; margin-right:5px; }
  .publi-accion{
    display:flex; align-items:center; gap:14px;
    padding:16px 18px 16px 8px;
  }
  .publi-oferta{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    width:118px; height:118px; flex:none;
    border-radius:50%;
    background:var(--trigo); color:#1c2a45;
    font-family:'Barlow Condensed',sans-serif; text-align:center; line-height:1;
    box-shadow:0 0 0 3px rgba(255,253,248,.85);
    transform:rotate(-8deg);
  }
  .po-prod{ font-size:.95rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
  .po-precio{ font-size:1.75rem; font-weight:800; color:#b3261e; margin:2px 0; }
  .po-vig{ font-size:.72rem; font-weight:600; }
  .publi-wa{
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
    background:var(--campo); color:var(--white);
    padding:11px 18px; border-radius:var(--radius);
    text-decoration:none;
    box-shadow:0 3px 0 var(--campo-dark);
  }
  .publi-wa::before{ content:""; width:18px; height:18px; margin-right:8px; flex:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fffdf8'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.7.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.8-1.2s.2-1.1.1-1.2-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat; }
  .publi-wa:hover, .publi-wa:focus-visible{ background:var(--campo-dark); }
  @media (max-width:820px){
    .publi{ grid-template-columns:1fr; }
    .publi-foto{ min-height:0; aspect-ratio:16/10; background-position:center;
      -webkit-mask-image:linear-gradient(180deg, #000 75%, transparent);
              mask-image:linear-gradient(180deg, #000 75%, transparent); }
    .publi-texto{ padding:6px 16px 0; }
    .publi-titulo{ font-size:1.35rem; }
    .publi-accion{ padding:12px 16px 16px; justify-content:space-between; }
    .publi-oferta{ width:96px; height:96px; }
    .po-prod{ font-size:.85rem; }
    .po-precio{ font-size:1.4rem; }
    .publi-wa{ flex:1; min-width:0; white-space:normal; text-align:center; line-height:1.15;
      font-size:1rem; padding:10px 12px; }
  }
  /* La primera columna (hora) y la última (TV/radio) miden lo mismo para que el
     marcador quede en el centro exacto de la fila: así la sede, que va centrada
     debajo, cae justo bajo el guion (21/9/2026).
     hora | local | marcador | visitante — el local termina contra el marcador y
     el visitante arranca después, como en cualquier planilla de resultados. */
  .ag-partido{
    display:grid;
    grid-template-columns:72px 1fr 46px 1fr 72px;
    align-items:center;
    gap:6px;
    padding:9px 14px;
    border-bottom:1px solid var(--line);
    font-family:'Barlow Condensed',sans-serif;
    font-size:1.02rem;
  }
  .ag-partido:last-child{ border-bottom:none; }
  /* Un partido es un solo bloque: partido, goleadores, penales y sede. La línea
     divisoria va solo al final del bloque; si la fila de arriba tiene algo
     debajo, no se dibuja (antes la sede parecía un renglón suelto, 21/9/2026). */
  .ag-partido:has(+ .ag-goleadores, + .ag-penales, + .ag-sede),
  .ag-goleadores:has(+ .ag-penales, + .ag-sede){ border-bottom:none; }
  .ag-hora{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  /* Cada equipo es ahora escudo + nombre. Se usa flex para poder espejar el
     orden: en el local el escudo va antes del nombre y el conjunto se pega al
     marcador por la derecha; en la visita, al reves. */
  .ag-eq{
    display:flex;
    align-items:center;
    gap:7px;
    min-width:0;          /* sin esto el nombre largo estira la columna */
  }
  .ag-eq.local{ justify-content:flex-end; text-align:right; }
  .ag-eq.visita{ justify-content:flex-start; text-align:left; }
  /* El nombre se parte en dos lineas si no entra, como hacia antes de que
     existieran los escudos. NO se recorta con puntos suspensivos: en una grilla
     de partidos, "All Boys (Sant..." no le sirve a nadie. En celular esto hace
     que algunas filas queden mas altas, y esta bien que asi sea. */
  .ag-nombre{
    min-width:0;
    line-height:1.15;
  }
  /* El escudo del banner mide 30px: en la grilla, donde cada fila es angosta,
     va mucho mas chico. Se reaprovecha la clase en vez de duplicar la funcion. */
  .ag-eq .bs-escudo{
    width:24px; height:24px; flex-basis:24px;   /* 19px hasta el 28/9/2026 */
    border-radius:4px;
    padding:1px;
  }
  .ag-eq .bs-iniciales{ font-size:.55rem; letter-spacing:-.02em; }
  .ag-marcador{
    text-align:center;
    font-weight:700;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
  }
  /* Goleadores: misma grilla que .ag-partido, para que cada lista caiga justo
     debajo del equipo que convirtió. */
  .ag-goleadores{
    display:grid;
    grid-template-columns:72px 1fr 46px 1fr 72px;
    gap:6px;
    padding:0 14px 8px;
    margin-top:-5px;
    font-size:.8rem;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line);
  }
  .ag-goleadores .gol{ display:block; line-height:1.5; }
  .ag-goleadores .gol-local{ text-align:right; }
  .ag-goleadores .gol-visita{ text-align:left; }
  .ag-goleadores .gol-pelota{ text-align:center; opacity:.45; font-size:.72rem; }
  /* Definición por penales: va debajo del marcador, en dorado, porque es lo que
     realmente resolvió la serie aunque el resultado diga empate. */
  .ag-penales{
    padding:0 14px 8px;
    margin-top:-4px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.86rem;
    letter-spacing:.03em;
    text-align:center;
    color:var(--trigo);
    font-weight:700;
  }
  /* Chapitas de transmisión: "TV" para la televisación y "RA" para la radio,
     al final de la línea del partido. Si hay enlace, llevan al vivo. Solo
     aparecen cuando el dato está cargado en la planilla. */
  .ag-transmisiones{ display:flex; gap:4px; justify-content:flex-end; }
  .ag-trans{
    display:inline-block;
    padding:1px 5px;
    border:1px solid currentColor;
    border-radius:3px;
    font-family:'Barlow Condensed',sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    line-height:1.5;
    text-decoration:none;
    opacity:.75;
    transition:opacity .15s ease, background-color .15s ease;
  }
  .ag-trans.es-tv{ color:var(--clay); }
  .ag-trans.es-radio{ color:var(--campo); }
  a.ag-trans:hover, a.ag-trans:focus-visible{ opacity:1; background:rgba(0,0,0,.06); }
  /* Sin enlace la chapita informa, pero no promete un click que no existe. */
  .ag-trans.sin-link{ opacity:.5; cursor:default; }

  .ag-sede{
    padding:0 14px 9px;
    margin-top:-4px;
    font-size:.78rem;
    color:var(--ink-soft);
    text-align:center;
    border-bottom:1px solid var(--line);
  }
  /* Partido en curso: el minuto late y la fila se resalta en verde césped. */
  .ag-partido.es-vivo{ background:rgba(77,151,96,.14); }
  .ag-partido.es-vivo .ag-marcador{ color:var(--campo-light,var(--campo)); }
  .ag-vivo{
    color:var(--campo);
    font-weight:700;
    animation:latido 1.6s ease-in-out infinite;
  }
  .ag-fin{ color:var(--ink-soft); font-weight:700; text-transform:uppercase; font-size:.86rem; }
  /* Entretiempo: el partido está en curso pero el reloj está frenado, así que
     no late como el minuto en juego. */
  .ag-et{ color:var(--trigo); font-weight:700; font-size:.82rem; }
  @keyframes latido{ 0%,100%{opacity:1;} 50%{opacity:.45;} }
  /* Empezó y nadie lo sigue en vivo: el resultado llega al final. */
  .ag-sin-vivo{
    padding:0 14px 8px;
    font-size:.76rem;
    font-style:italic;
    color:var(--ink-soft);
    text-align:center;
  }
  .ag-aviso{
    padding:10px 14px;
    margin:0;
    font-size:.84rem;
    color:var(--ink-soft);
    border-bottom:1px solid var(--line);
  }
  /* En pantallas chicas el nombre largo de un club no puede empujar la grilla:
     se achica la tipografía y se angostan las columnas fijas. */
  @media (max-width:560px){
    .ag-partido,
    .ag-goleadores{ grid-template-columns:46px 1fr 40px 1fr 52px; }
    .ag-partido{ font-size:.92rem; padding:9px 8px; }
    .ag-eq{ gap:5px; }
    /* Con columnas de ~70px, una palabra larga ("Independiente") no entraba
       y se desbordaba encima del escudo de la visita (17/10/2026). Se parte
       con guion; si el navegador no sabe, se corta igual. */
    .ag-nombre, .ag-hora{ hyphens:auto; overflow-wrap:anywhere; }
    .ag-eq .bs-escudo{ width:20px; height:20px; flex-basis:20px; }
    .ag-eq .bs-iniciales{ font-size:.48rem; }
    .ag-goleadores{ padding:0 8px 8px; font-size:.74rem; }
    .ag-sede{ padding:0 8px 9px; }
  }

  /* Los datos duros del hecho: fecha, instancia, formato. Va en fila en
     escritorio y se apila solo en pantallas chicas, sin media query, gracias
     al flex-wrap. */
  .banner-portada-datos{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 10px;
    margin:14px auto 2px;
  }
  .banner-portada-datos span{
    font-family:'Barlow Condensed',sans-serif;
    font-size:.92rem;
    letter-spacing:.04em;
    padding:4px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(0,0,0,.18);
    color:#e4e5d9;
  }
  /* El primero es el día y la hora: es el dato que se busca de un vistazo. */
  .banner-portada-datos span:first-child{
    border-color:var(--trigo);
    color:var(--trigo);
  }
  .banner-portada-sub{
    max-width:560px;
    margin:8px auto 4px;
    font-size:.86rem;
    line-height:1.5;
    color:#d8d9cd;
  }
  .banner-portada .source-note{ display:block; margin-top:10px; color:#b7b8ac; }

  /* Las dos zonas de la Liga Cultural, lado a lado y apiladas en el celular. */
  .zonas-cultural{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
    gap:8px 20px;
    margin-top:12px;
  }
  .zonas-cultural h4{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.82rem;
    color:var(--clay);
    margin:0 0 6px;
  }
  .zonas-cultural ol{
    margin:0;
    padding-left:20px;
    font-size:.88rem;
    line-height:1.75;
  }

  /* ===== Banner rotativo ===== */
  /* Los paneles se apilan en la misma celda de grilla y solo uno es visible:
     así el banner no cambia de alto al rotar, que es lo que hace saltar todo
     lo que viene abajo. */
  .banner-slides{ display:grid; }
  .banner-slide{
    grid-area:1 / 1;
    align-self:center;   /* el texto, centrado si una foto hace más alta la caja */
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease;
  }
  .banner-slide.activo{ opacity:1; visibility:visible; }
  .banner-lista{
    list-style:none;
    margin:14px auto 4px;
    padding:0;
    max-width:520px;
    display:grid;
    gap:8px;
  }
  .banner-lista li{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(0,0,0,.2);
  }
  .bs-eq{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-end;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:.95rem;
    text-transform:uppercase;
    line-height:1.15;
    color:var(--white);
    text-align:right;
  }
  .bs-eq.bs-visita{ justify-content:flex-start; text-align:left; }
  .bs-escudo{
    width:36px; height:36px;   /* 30px hasta el 28/9/2026 */
    flex:0 0 36px;
    object-fit:contain;
    background:#fdfdfb;
    border-radius:7px;
    padding:2px;
  }
  .bs-iniciales{
    display:flex; align-items:center; justify-content:center;
    font-size:.72rem; font-weight:800; color:var(--tierra);
  }
  .bs-marcador{
    font-family:'Bitter',Georgia,serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--trigo);
    white-space:nowrap;
  }
  .banner-fecha-grande{
    font-family:'Bitter',Georgia,serif;
    font-weight:700;
    font-size:1.5rem;
    color:var(--trigo);
    margin:16px 0 6px;
  }
  .banner-slide-pie{
    font-family:'Inter',sans-serif;
    font-size:.74rem;
    color:#a9aa9e;
    margin-top:8px;
  }
  .banner-controles{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:14px;
  }
  .bc-flecha, .bc-pausa{
    background:transparent;
    border:1px solid rgba(255,255,255,.3);
    color:var(--white);
    border-radius:999px;
    cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;
  }
  .bc-flecha{ width:28px; height:28px; font-size:1.1rem; line-height:1; padding:0; }
  .bc-pausa{ padding:4px 12px; font-size:.76rem; letter-spacing:.04em; }
  .bc-flecha:hover, .bc-pausa:hover{ background:rgba(255,255,255,.14); }
  .banner-puntos{ display:flex; gap:6px; }
  .banner-puntos button{
    width:8px; height:8px; padding:0;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.5);
    background:transparent;
    cursor:pointer;
  }
  .banner-puntos button.activo{ background:var(--trigo); border-color:var(--trigo); }
  /* Sin animación de cruce para quien pide menos movimiento; además app.js no
     rota solo en ese caso. */
  @media (prefers-reduced-motion: reduce){
    .banner-slide{ transition:none; }
  }
  @media (max-width:560px){
    .bs-eq{ font-size:.8rem; gap:6px; }
    .bs-escudo{ width:28px; height:28px; flex-basis:28px; }
  }

  .banner-portada-titulo{
    font-family:'Bitter',Georgia,serif;
    font-weight:700;
    font-size:1.35rem;
    line-height:1.25;
    margin:0 0 4px;
    color:var(--white);
  }
  /* Paneles de texto del carrusel, más grandes (pedido del editor, 17/10/2026):
     desde que las fotos van a todo el ancho la caja es alta y el texto quedaba
     chico en el medio. Cada panel lista como mucho 3 partidos, así que entra
     en el alto de la foto. Solo dentro del carrusel: la grilla y las llaves
     usan las mismas clases de escudo. */
  .banner-slide .banner-portada-label{ font-size:1rem; margin-bottom:10px; }
  .banner-slide .banner-portada-titulo{ font-size:2.3rem; margin-bottom:8px; }
  .banner-slide .banner-lista{ max-width:780px; gap:12px; margin-top:20px; }
  .banner-slide .banner-lista li{ padding:14px 22px; gap:18px; border-radius:14px; }
  .banner-slide .bs-eq{ font-size:1.5rem; gap:14px; }
  .banner-slide .bs-escudo{ width:60px; height:60px; flex:0 0 60px; }
  .banner-slide .bs-iniciales{ font-size:1.05rem; }
  .banner-slide .bs-marcador{ font-size:1.8rem; }
  .banner-slide .banner-fecha-grande{ font-size:2.3rem; }
  .banner-slide .banner-slide-pie{ font-size:.95rem; margin-top:12px; }
  @media (max-width:560px){
    .banner-slide .banner-portada-label{ font-size:.82rem; margin-bottom:6px; }
    .banner-slide .banner-portada-titulo{ font-size:1.6rem; }
    .banner-slide .banner-lista{ gap:8px; margin-top:12px; }
    .banner-slide .banner-lista li{ padding:10px 10px; gap:8px; }
    .banner-slide .bs-eq{ font-size:1.02rem; gap:8px; }
    .banner-slide .bs-escudo{ width:40px; height:40px; flex-basis:40px; }
    .banner-slide .bs-iniciales{ font-size:.8rem; }
    .banner-slide .bs-marcador{ font-size:1.25rem; }
    .banner-slide .banner-fecha-grande{ font-size:1.8rem; }
    .banner-slide .banner-slide-pie{ font-size:.8rem; }
  }
  /* Con cuatro partidos (los cuartos del Provincial, 26/10/2026) la lista se
     achica para entrar en el mismo alto que con tres. */
  .banner-slide .banner-lista-4{ gap:8px; margin-top:14px; }
  .banner-slide .banner-lista-4 li{ padding:8px 18px; }
  .banner-slide .banner-lista-4 .bs-eq{ font-size:1.2rem; gap:10px; }
  .banner-slide .banner-lista-4 .bs-escudo{ width:44px; height:44px; flex-basis:44px; }
  .banner-slide .banner-lista-4 .bs-marcador{ font-size:1.45rem; }
  @media (max-width:560px){
    .banner-slide .banner-lista-4{ gap:6px; margin-top:10px; }
    .banner-slide .banner-lista-4 li{ padding:6px 8px; gap:6px; }
    .banner-slide .banner-lista-4 .bs-eq{ font-size:.9rem; gap:6px; }
    .banner-slide .banner-lista-4 .bs-escudo{ width:32px; height:32px; flex-basis:32px; }
    .banner-slide .banner-lista-4 .bs-marcador{ font-size:1.1rem; }
  }
  /* Los cuatro de la zona, en fila. No hay un "VS": son todos contra todos,
     así que ninguno tiene un lugar distinto al de los demás. */
  /* Grilla y no flex-wrap: con wrap, en anchos intermedios los cuatro caían
     3+1 y quedaba un escudo huérfano abajo. Así son cuatro columnas o dos,
     nunca tres. */
  .zona-equipos{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    align-items:start;
    justify-items:center;
    gap:14px;
    padding:16px 0 6px;
  }
  .zona-equipos .shield-wrap{ width:100%; }
  /* Entran escalonados, de izquierda a derecha. El retardo va por posición y
     no por clase para no tener que nombrar a cada club en el CSS. */
  .zona-equipos .shield-wrap{ animation:subirEscudo .55s ease-out both; }
  .zona-equipos .shield-wrap:nth-child(1){ animation-delay:.05s; }
  .zona-equipos .shield-wrap:nth-child(2){ animation-delay:.15s; }
  .zona-equipos .shield-wrap:nth-child(3){ animation-delay:.25s; }
  .zona-equipos .shield-wrap:nth-child(4){ animation-delay:.35s; }
  @keyframes subirEscudo{
    0%{ opacity:0; transform:translateY(14px) scale(.92); }
    100%{ opacity:1; transform:translateY(0) scale(1); }
  }
  /* Los resultados de la fecha, debajo de los escudos. Cada partido es una
     fila que se apila sola en pantallas chicas: el marcador queda siempre en
     el medio y el "cuándo" abajo, en chico. */
  /* Fixture completo dentro de la vista de un torneo. Usa las mismas piezas
     que la grilla de la portada (.ag-dia, .ag-partido…), así que acá solo hace
     falta el marco: un poco de aire y un tope de altura con scroll propio, para
     que seis fechas no empujen todo lo que viene abajo. */
  .fixture-torneo{
    margin:10px 0 4px;
    max-height:520px;
    overflow-y:auto;
    overflow-x:auto;
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:4px 0;
  }
  .fixture-torneo .ag-dia:first-child{ margin-top:0; }
  /* La barra del día queda pegada arriba mientras se recorren sus partidos
     (9/10/2026): al bajar dentro de la caja se iba, y quedaban a la vista
     partidos con hora pero sin día — el editor creyó que uno del domingo se
     estaba jugando en ese momento. Con la barra de fechas (.fx-nav) arriba, se
     pega justo debajo de ella. */
  .fixture-torneo .ag-dia{ position:sticky; top:-4px; z-index:1; }
  .fixture-torneo:has(.fx-nav) .ag-dia{ top:42px; }
  /* La barra "‹ Fecha 4 ›" (3/10/2026): una fecha por vez, como Promiedos.
     Queda pegada arriba aunque la fecha sea larga y haya que scrollear. */
  .fx-nav{
    position:sticky; top:-4px; z-index:2;
    display:flex; align-items:center; gap:6px;
    margin:-4px 0 0; padding:6px 8px;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
  }
  .fx-flecha{
    flex:0 0 36px; height:34px;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--tierra); color:var(--white);
    font-size:1.4rem; line-height:1; cursor:pointer;
  }
  .fx-flecha:disabled{ opacity:.3; cursor:default; }
  .fx-flecha:not(:disabled):hover{ background:var(--campo); }
  .fx-elegir{
    flex:1; min-width:0; height:34px;
    border:1px solid var(--line); border-radius:var(--radius);
    background:var(--paper); color:var(--ink);
    font-family:'Barlow Condensed',sans-serif; font-weight:700;
    font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase;
    text-align:center; text-align-last:center; cursor:pointer;
  }
  /* En el celular la tarjeta que lo envuelve se come el ancho con su relleno, y
     los nombres de los clubes se partían en tres líneas (28/9/2026). */
  @media (max-width:560px){
    .side-card:has(.fixture-torneo){ padding-left:8px; padding-right:8px; }
    .side-card:has(.fixture-torneo) > h3{ margin-left:8px; margin-right:8px; }
  }

  .zona-resultados{
    list-style:none;
    margin:14px auto 4px;
    padding:0;
    max-width:520px;
    display:grid;
    gap:8px;
  }
  .zona-resultados li{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:4px 10px;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(0,0,0,.2);
  }
  .zr-equipo{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    font-size:.98rem;
    text-transform:uppercase;
    letter-spacing:.02em;
    line-height:1.15;
    color:var(--white);
  }
  .zona-resultados li .zr-equipo:first-child{ text-align:right; }
  .zona-resultados li .zr-equipo:nth-child(3){ text-align:left; }
  .zr-equipo small{
    display:block;
    font-family:'Inter',sans-serif;
    font-weight:400;
    font-size:.7rem;
    text-transform:none;
    letter-spacing:normal;
    color:#c3c4b8;
  }
  .zr-marcador{
    font-family:'Bitter',Georgia,serif;
    font-weight:700;
    font-size:1.12rem;
    color:var(--trigo);
    white-space:nowrap;
  }
  /* Ocupa las tres columnas: va debajo del partido, centrado. */
  .zr-cuando{
    grid-column:1 / -1;
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:.7rem;
    color:#a9aa9e;
  }

  .banner-portada-link{
    display:inline-block;
    margin-top:10px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    letter-spacing:.03em;
    font-size:.88rem;
    color:var(--trigo);
    text-decoration:none;
    border-bottom:1px solid rgba(232,162,60,.45);
  }
  .banner-portada-link:hover{ border-bottom-color:var(--trigo); }

  /* Cuatro escudos entran en dos filas de dos apenas la pantalla se achica: en
     una sola fila quedarían ilegibles. */
  /* El corte va en 720 y no en 560: entre esos dos anchos los cuatro no entran
     cómodos en una fila, aunque técnicamente quepan. */
  @media (max-width:720px){
    .zona-equipos{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 8px; }
  }
  @media (max-width:560px){
    .shield{ width:74px; height:74px; border-radius:12px; }
    .team-name{ font-size:.78rem; }
  }
  @media (prefers-reduced-motion: reduce){
    .zona-equipos .shield-wrap{
      animation:none !important;
      opacity:1 !important;
      transform:none !important;
    }
  }

  /* League tab pills (secondary, within section) */
  .liga-pills{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:20px;
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.04em;
    font-size:.88rem;
  }
  .liga-pills button{
    padding:8px 16px;
    border-radius:999px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
  }
  .liga-pills button.active{
    background:var(--campo);
    border-color:var(--campo);
    color:var(--white);
  }

  /* Standings table */
  table.standings{
    width:100%;
    border-collapse:collapse;
    font-size:.92rem;
  }
  table.standings caption{
    text-align:left;
    padding:14px 16px 10px;
    font-family:'Bitter',serif;
    font-weight:700;
    font-size:1.05rem;
    color:var(--ink);
    border-bottom:2px solid var(--trigo);
  }
  table.standings th{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:.05em;
    font-size:.72rem;
    color:var(--ink-soft);
    text-align:center;
    padding:8px 6px;
    border-bottom:1px solid var(--line);
  }
  table.standings th.eq{text-align:left;padding-left:16px;}
  table.standings td{
    text-align:center;
    padding:8px 6px;
    border-bottom:1px solid var(--paper-2);
    font-family:'Barlow Condensed',sans-serif;
    font-size:1rem;
  }
  table.standings td.eq{
    text-align:left;
    padding-left:16px;
    font-weight:600;
    font-family:'Inter',sans-serif;
    font-size:.92rem;
    color:var(--ink);
  }
  table.standings td.pts{font-weight:800;color:var(--campo-light);font-size:1.05rem;}
  table.standings tr.qual td.eq{border-left:3px solid var(--campo);padding-left:13px;}
  table.standings tr.rep td.eq{border-left:3px solid var(--trigo);padding-left:13px;}
  table.standings tr:hover td{background:rgba(255,255,255,.04);}
  .legend{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    padding:12px 16px 16px;
    font-size:.78rem;
    color:var(--ink-soft);
  }
  .legend span{display:inline-flex;align-items:center;gap:6px;}
  .dot{width:10px;height:10px;border-radius:2px;display:inline-block;}
  .dot.campo{background:var(--campo);}
  .dot.trigo{background:var(--trigo);}

  /* Results list */
  .results-list{padding:6px 0;}
  .fecha-label{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.72rem;
    color:var(--white);
    background:var(--tierra);
    padding:8px 16px;
  }
  .result-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:10px;
    padding:12px 16px;
    border-bottom:1px solid var(--paper-2);
    font-size:.92rem;
  }
  .result-row:last-child{border-bottom:none;}
  .result-row .team{font-weight:600;}
  .result-row .team.away{text-align:right;}
  .result-row .score{
    font-family:'Barlow Condensed',sans-serif;
    font-weight:800;
    font-size:1.15rem;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    padding:2px 10px;
    color:var(--trigo);
    min-width:56px;
    text-align:center;
  }
  .result-meta{
    font-size:.72rem;
    color:var(--ink-soft);
    text-align:center;
    grid-column:1 / -1;
    margin-top:-4px;
  }

  /* Sidebar cards */
  .side-card{padding:18px 18px 20px;margin-bottom:22px;}
  .side-card h3{
    font-size:1.05rem;
    color:var(--ink);
    margin-bottom:12px;
    padding-bottom:8px;
    border-bottom:2px solid var(--trigo);
  }
  .provincial-box p{font-size:.88rem;line-height:1.55;color:var(--ink-soft);margin:0 0 10px;}
  /* Fila de dato: etiqueta a la izquierda, valor a la derecha, con guion de
     puntos. Estaba anidada bajo .provincial-box y por eso no funcionaba en las
     tarjetas de las Copas, que usan las mismas filas. */
  .fact{
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:.85rem;
    padding:7px 0;
    border-bottom:1px dashed var(--line);
  }
  .fact b{color:var(--ink); text-align:right;}
  .source-note{
    font-size:.72rem;
    color:var(--ink-soft);
    margin-top:10px;
    display:block;
  }
  .source-note a{color:var(--clay);font-weight:600;}

  .fixture-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--paper-2);
    font-size:.86rem;
  }
  .fixture-item:last-child{border-bottom:none;}
  .sin-fixture{font-size:.84rem;color:var(--ink-soft);line-height:1.5;margin:6px 0 0;}
  .fixture-item .when{
    font-family:'Barlow Condensed',sans-serif;
    background:var(--campo);
    color:var(--white);
    border-radius:4px;
    padding:3px 8px;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
  }

  /* News */
  .news-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
  }
  @media (max-width:880px){ .news-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .news-grid{grid-template-columns:1fr;} }
  .news-card{
    display:flex;
    flex-direction:column;
    padding:18px;
    border-top:3px solid var(--clay);
  }
  .news-card.feat{
    grid-column:span 2;
    border-top-color:var(--campo);
  }
  @media (max-width:600px){ .news-card.feat{grid-column:span 1;} }
  .news-card .fuente{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    font-size:.72rem;
    letter-spacing:.06em;
    font-weight:700;
    color:var(--clay);
  }
  .news-card h4{
    font-size:1.05rem;
    margin:8px 0 8px;
    line-height:1.28;
  }
  .news-card.feat h4{font-size:1.35rem;}
  .news-card p{
    font-size:.86rem;
    color:var(--ink-soft);
    line-height:1.5;
    margin:0 0 10px;
    flex-grow:1;
  }
  .news-card .meta{
    display:flex;
    justify-content:space-between;
    font-size:.74rem;
    color:var(--ink-soft);
    border-top:1px solid var(--paper-2);
    padding-top:10px;
  }
  .news-card .meta a{font-weight:700;color:var(--campo-light);}

  /* Diarios strip */
  .diarios-strip{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:26px;
  }
  .diario-chip{
    border:1px solid var(--line);
    background:var(--surface);
    padding:10px 16px;
    border-radius:999px;
    font-size:.82rem;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .diario-chip::before{
    content:"●";
    color:var(--campo);
    font-size:.6rem;
  }

  footer{
    margin-top:60px;
    background:var(--tierra);
    color:rgba(255,255,255,.85);
  }
  .footer-inner{
    max-width:1180px;
    margin:0 auto;
    padding:44px 24px 30px;
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:30px;
  }
  @media (max-width:760px){ .footer-inner{grid-template-columns:1fr;} }
  footer h5{
    font-family:'Barlow Condensed',sans-serif;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-size:.78rem;
    color:var(--trigo);
    margin-bottom:14px;
  }
  footer a.flink{display:block;padding:5px 0;font-size:.88rem;color:rgba(255,255,255,.82);}
  footer a.flink:hover{color:var(--white);}
  footer p{font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.68);}
  .footer-bottom{
    max-width:1180px;
    margin:0 auto;
    text-align:center;
    padding:16px;
    font-size:.75rem;
    color:rgba(255,255,255,.55);
  }

  .disclaimer{
    background:#241c0c;
    border:1px solid var(--trigo);
    border-radius:4px;
    padding:12px 16px;
    font-size:.78rem;
    color:#e6c56f;
    margin-bottom:26px;
  }
  .disclaimer b{color:var(--trigo);}

  .hidden{display:none !important;}

  /* Tablas de goleadores (25/9/2026). El club va debajo del nombre, chico; el
     "+N" marca goles provisorios, de partidos que la fuente todavía no incluye. */
  table.goleadores td:first-child{ width:36px; color:var(--ink-soft); }
  table.goleadores .gol-club{ display:block; font-weight:400; font-size:.78rem; color:var(--ink-soft); }
  /* Escudos en las tablas (28/9/2026): al lado del nombre, del mismo tamaño que
     en la grilla. El hueco vacío ocupa lo mismo, para que los nombres de los
     clubes sin escudo queden alineados con los demás. */
  .tb-escudo{
    display:inline-block; width:20px; height:20px; margin-right:8px;
    vertical-align:middle; object-fit:contain; flex:0 0 20px;
  }
  img.tb-escudo{ filter:drop-shadow(0 0 1px rgba(255,255,255,.55)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
  /* Flex para que un nombre largo se parta AL LADO del escudo y no debajo. */
  .tb-eq, table.goleadores .gol-quien{ display:flex; align-items:center; }
  @media (max-width:560px){
    .tb-escudo{ width:16px; height:16px; flex-basis:16px; margin-right:6px; }
  }
  table.goleadores .gol-prov{ color:var(--trigo); font-size:.8rem; font-weight:700; }
  table.goleadores .gol-pen{ display:block; font-weight:400; font-size:.7rem; color:var(--ink-soft); }
  .gol-ver-mas{
    display:block; margin:10px auto 4px; padding:7px 16px;
    background:transparent; color:var(--trigo); border:1px solid var(--trigo);
    border-radius:4px; cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; font-size:.85rem;
  }
  .gol-ver-mas:hover{ background:rgba(224,177,63,.12); }

  /* ===== Página de partido (21/10/2026) =====
     Estilo Promiedos: encabezado con los dos escudos y el marcador, y abajo
     las tarjetas de siempre (.card.side-card). En el celular todo va en una
     columna y el encabezado achica escudos y números. */
  [data-partido]{ cursor:pointer; }
  .ag-partido[data-partido]:hover{ background:rgba(255,255,255,.03); }
  a.ag-marcador:hover, a.ag-marcador:focus-visible{ color:var(--trigo); text-decoration:underline; text-underline-offset:3px; }
  .ll-ver{ display:block; }
  .ll-ver:hover, .ll-ver:focus-visible{ color:var(--ink); }
  .pt-volver{
    display:inline-block; margin:0 0 14px; padding:6px 14px;
    background:transparent; color:var(--trigo); border:1px solid var(--trigo);
    border-radius:var(--radius); cursor:pointer;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; font-size:.85rem;
  }
  .pt-volver:hover{ background:rgba(224,177,63,.12); }
  .pt-cabecera{ padding:18px 16px 16px; margin-bottom:22px; text-align:center; border-top:3px solid var(--trigo); }
  .pt-cabecera.es-vivo{ border-top-color:var(--campo); background:linear-gradient(rgba(77,151,96,.12), transparent 70%), var(--surface); }
  .pt-comp{ display:inline-block; }
  a.pt-comp:hover{ text-decoration:underline; }
  .pt-rotulo{ font-size:1.1rem; font-weight:700; color:var(--ink); margin:4px 0 16px; overflow-wrap:anywhere; }
  .pt-marcador-fila{ display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:12px; }
  .pt-equipo{
    display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0;
    font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.25rem; line-height:1.15;
    overflow-wrap:anywhere; hyphens:auto;
  }
  .pt-equipo .bs-escudo{ width:72px; height:72px; flex:0 0 72px; }
  .pt-equipo .bs-iniciales{ font-size:1.1rem; }
  .pt-centro{ font-family:'Barlow Condensed',sans-serif; padding-top:14px; min-width:90px; }
  .pt-goles{ font-size:2.8rem; font-weight:800; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
  .pt-goles span{ margin:0 .18em; color:var(--ink-soft); font-weight:400; }
  .pt-cabecera.es-vivo .pt-goles{ color:var(--campo-light); }
  .pt-hora-grande{ font-size:1.9rem; font-weight:700; line-height:1.1; color:var(--trigo); }
  .pt-estado{ margin-top:6px; font-size:.86rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
  .pt-cabecera .ag-penales{ padding:10px 0 0; margin:0; }
  .pt-cuando{ margin-top:14px; font-size:.88rem; color:var(--ink-soft); }
  .pt-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
  .pt-grid > *{ min-width:0; }
  .pt-h3-sub{ font-family:'Barlow Condensed',sans-serif; font-weight:400; font-size:.85rem; color:var(--ink-soft); margin-left:4px; }
  .pt-h3-cruces{ margin-top:18px; }
  /* Goles: una columna por equipo, el minuto en dorado adelante. */
  .pt-goles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .pt-goles-grid > *{ min-width:0; }
  .pt-goles-eq{ font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; color:var(--ink-soft); margin-bottom:6px; }
  .pt-goles-lista{ list-style:none; margin:0; padding:0; font-size:.9rem; line-height:1.4; }
  .pt-goles-lista li{ padding:3px 0; overflow-wrap:anywhere; }
  .pt-goles-lista small{ color:var(--ink-soft); }
  .pt-min{ font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--trigo); margin-right:6px; white-space:nowrap; }
  /* Formaciones (21/10/2026): el dorsal en una columna fija, salió en terracota
     y entró en verde, como en las chapitas de la grilla. */
  .pt-formaciones{ margin-bottom:22px; }
  /* La formación en la cancha (28/10/2026). Horizontal en la compu, vertical en
     el celular. Verdes del sitio, líneas en trigo suave, local en terracota y
     visitante en el verde tierra con borde trigo. */
  .cf-wrap{ margin:4px 0 18px; }
  .cf-cancha{ display:block; width:100%; height:auto; border-radius:14px; }
  .cf-vertical{ display:none; max-width:460px; margin:0 auto; }
  .cf-franja{ fill:#24543a; }
  .cf-franja.b{ fill:#2a5f42; }
  .cf-linea{ fill:none; stroke:rgba(232,201,122,.45); stroke-width:3; }
  .cf-jug circle{ stroke:#fff; stroke-width:3; }
  .cf-jug.loc circle{ fill:var(--clay); }
  .cf-jug.vis circle{ fill:#f3ead3; stroke:var(--tierra); }
  .cf-jug.vis .cf-num{ fill:var(--tierra); }
  .cf-num{ fill:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px;
    text-anchor:middle; dominant-baseline:central; }
  .cf-nom{ fill:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:600; font-size:21px;
    text-anchor:middle; paint-order:stroke; stroke:rgba(0,0,0,.55); stroke-width:4px; }
  .cf-gol, .cf-sale{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:17px; text-anchor:middle;
    paint-order:stroke; stroke:rgba(0,0,0,.6); stroke-width:3px; }
  .cf-gol{ fill:#fff; }
  .cf-sale{ fill:var(--trigo); }
  .cf-eq{ fill:rgba(255,255,255,.85); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:20px;
    letter-spacing:.04em; text-transform:uppercase; }
  .cf-vacio{ fill:rgba(255,255,255,.7); font-family:'Inter',sans-serif; font-size:18px; text-anchor:middle; }
  .cf-vertical .cf-num{ font-size:30px; }
  .cf-vertical .cf-nom{ font-size:30px; stroke-width:5px; }
  .cf-vertical .cf-gol, .cf-vertical .cf-sale{ font-size:24px; }
  .cf-vertical .cf-eq{ font-size:26px; }
  .cf-vertical .cf-vacio{ font-size:26px; }
  @media (max-width:560px){
    .cf-horizontal{ display:none; }
    .cf-vertical{ display:block; }
  }
  .pt-formacion{ list-style:none; margin:0; padding:0; font-size:.9rem; line-height:1.35; }
  .pt-formacion li{ padding:2px 0; overflow-wrap:anywhere; }
  .pt-dorsal{ display:inline-block; min-width:1.6em; font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--ink-soft); }
  .pt-suplentes{ color:var(--ink-soft); }
  .pt-form-sub{ font-family:'Barlow Condensed',sans-serif; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:10px 0 4px; }
  .pt-sale{ color:var(--clay); font-family:'Barlow Condensed',sans-serif; font-weight:700; white-space:nowrap; }
  .pt-entra{ color:var(--campo); font-family:'Barlow Condensed',sans-serif; font-weight:700; white-space:nowrap; }
  .pt-sin-autor{ color:var(--ink-soft); font-style:italic; font-size:.82rem; }
  /* Datos: las mismas filas .fact de las tarjetas de las copas. */
  .pt-grid .fact b{ overflow-wrap:anywhere; }
  .pt-grid .fact a{ color:var(--clay); }
  .pt-tabla{ padding:0 0 6px; overflow-x:auto; }
  table.standings tr.pt-este td{ background:rgba(224,177,63,.1); }
  table.standings tr.pt-este td.eq{ color:var(--trigo); }
  /* Últimos partidos: resultado (G/E/P), fecha, rival y marcador. */
  .pt-grid-ult{ gap:16px; }
  .pt-ult-equipo h4{ display:flex; align-items:center; gap:8px; font-size:.95rem; margin:0 0 8px; color:var(--ink); }
  .pt-ult-equipo h4 .bs-escudo{ width:24px; height:24px; flex:0 0 24px; }
  .pt-ult-equipo h4 .bs-iniciales{ font-size:.5rem; }
  .pt-ult-lista{ list-style:none; margin:0; padding:0; }
  .pt-ult-lista li{ border-bottom:1px dashed var(--line); }
  .pt-ult-lista li:last-child{ border-bottom:none; }
  .pt-ult{ display:grid; grid-template-columns:22px 38px 1fr auto; align-items:center; gap:8px; padding:7px 2px; font-size:.86rem; }
  .pt-ult.pt-cruce{ grid-template-columns:38px 1fr; }
  .pt-ult:hover, .pt-ult:focus-visible{ background:rgba(255,255,255,.04); }
  .pt-res{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:3px;
    font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:.85rem; color:var(--tierra); }
  .pt-res-G{ background:var(--campo-light); }
  .pt-res-E{ background:var(--trigo); }
  .pt-res-P{ background:var(--clay); }
  .pt-ult-fecha{ font-family:'Barlow Condensed',sans-serif; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .pt-ult-rival{ display:flex; align-items:center; gap:7px; min-width:0; }
  .pt-ult-rival .bs-escudo{ width:20px; height:20px; flex:0 0 20px; }
  .pt-ult-rival .bs-iniciales{ font-size:.45rem; }
  .pt-ult-rival > span{ min-width:0; }
  .pt-ult-nombre{ display:block; color:var(--ink); line-height:1.2; overflow-wrap:anywhere; }
  .pt-ult-nombre b{ font-family:'Barlow Condensed',sans-serif; margin:0 3px; }
  .pt-ult-rival small{ display:block; font-size:.72rem; color:var(--ink-soft); }
  .pt-ult-marcador{ font-family:'Barlow Condensed',sans-serif; font-weight:700; text-align:right; white-space:nowrap; }
  @media (max-width:880px){ .pt-grid{ grid-template-columns:1fr; gap:0; } }
  @media (max-width:560px){
    .pt-cabecera{ padding:14px 10px; }
    .pt-marcador-fila{ gap:6px; }
    .pt-equipo{ font-size:1.02rem; }
    .pt-equipo .bs-escudo{ width:52px; height:52px; flex-basis:52px; }
    .pt-centro{ min-width:64px; padding-top:10px; }
    .pt-goles{ font-size:2.1rem; }
    .pt-hora-grande{ font-size:1.45rem; }
    .pt-grid-ult{ gap:4px; }
    .pt-goles-grid{ gap:10px; }
    /* A 320 px la tabla de nueve columnas se pasaba por 13 px. */
    .pt-tabla table.standings th, .pt-tabla table.standings td{ padding-left:3px; padding-right:3px; }
    .pt-tabla table.standings th.eq, .pt-tabla table.standings td.eq{ padding-left:10px; }
    .pt-tabla table.standings tr.qual td.eq, .pt-tabla table.standings tr.rep td.eq{ padding-left:7px; }
  }