/* Noti Sports · sistema visual de la página pública · base 1.1, componentes 1.2–2.4 y sistema 2.5 al final
   Idea: una cabina de transmisión. Fondo de estudio, contenido iluminado, un solo acento para lo que está vivo. */

:root {
  --acento: #00F0C0;              /* cian de marca (se cambia en el panel) */
  --secundario: #D4F000;          /* lima de marca (se cambia en el panel) */
  --tinta-marca: #04141C;         /* texto sobre cian o lima */
  --fondo: #07151F;
  --fondo-2: #0B1E2B;
  --superficie: #102838;
  --superficie-2: #16344A;
  --borde: #1E4258;
  --texto: #EAF6F7;
  --texto-2: #A3BDC6;
  --texto-3: #7C99A5;
  --exito: #22C55E;
  --radio: 12px;
  --radio-g: 18px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --t-rapida: 160ms;
  --f-titulo: "Barlow Condensed", "Oswald", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ancho: 1280px;
  --gutter: 16px;
  --alto-enc: 60px;
  --alto-nav: 64px;
  color-scheme: dark;
}
@media (min-width: 760px) { :root { --gutter: 32px; --alto-enc: 68px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--alto-enc) + 12px); }
body {
  margin: 0; background: radial-gradient(1200px 520px at 50% -12%, rgba(0, 240, 192, .10), transparent 62%) no-repeat, var(--fondo); color: var(--texto);
  font: 400 16px/1.55 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--alto-nav) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 700; letter-spacing: .01em; line-height: 1.05; margin: 0; text-transform: uppercase; }
small { font-size: 14px; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 8px; z-index: 100; font-weight: 600; }
.saltar:focus { left: 8px; }
.ico { width: 22px; height: 22px; flex: none; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); }
.centro { text-align: center; }

/* ---------- Encabezado ---------- */
.enc { position: sticky; top: 0; z-index: 50; height: var(--alto-enc); background: rgba(7, 21, 31, .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.enc-in { max-width: var(--ancho); margin: 0 auto; height: 100%; padding: 0 var(--gutter); display: flex; align-items: center; gap: 32px; }
.logo img { height: 32px; width: auto; }
.logo-txt { display: inline-block; font-family: var(--f-titulo); font-weight: 800; font-style: italic; font-size: 28px; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.logo-txt .l1 { color: var(--acento); }
.logo-txt .l2 { color: var(--secundario); }
.logo-txt.pequeno { font-size: 22px; }
.nav-sup { display: none; gap: 4px; }
.nav-sup a { padding: 8px 14px; border-radius: 999px; color: var(--texto-2); font-weight: 600; font-size: 15px; transition: color var(--t-rapida), background var(--t-rapida); }
.nav-sup a:hover { color: var(--texto); background: var(--superficie); }
.nav-sup a[aria-current] { color: var(--texto); background: var(--superficie-2); }
@media (min-width: 900px) { .nav-sup { display: flex; } }

/* ---------- Navegación inferior (celular) ---------- */
.nav-inf { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: calc(var(--alto-nav) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; justify-content: space-around; background: rgba(7, 21, 31, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .07); }
.nav-inf a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; color: var(--texto-3); font-size: 12px; font-weight: 600; }
.nav-inf a[aria-current] { color: var(--texto); }
.nav-inf a[aria-current] .ico { color: var(--acento); }
@media (min-width: 900px) { .nav-inf { display: none; } }

/* ---------- Botones y etiquetas ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px; border: 0; font-weight: 700; font-size: 15px; cursor: pointer; transition: transform var(--t-rapida), background var(--t-rapida), opacity var(--t-rapida); }
.btn:active { transform: scale(.97); }
.btn-prim { background: var(--secundario); color: var(--tinta-marca); }
.btn-prim:hover { background: color-mix(in srgb, var(--secundario) 85%, white); }
.btn-prim .ico { width: 20px; height: 20px; }
.btn-sec { background: rgba(255, 255, 255, .1); color: var(--texto); }
.btn-sec:hover { background: rgba(255, 255, 255, .16); }
.et { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font: 700 12px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; background: rgba(255, 255, 255, .14); color: var(--texto); vertical-align: middle; }
.et-nuevo, .et-estreno { background: var(--acento); color: var(--tinta-marca); }
.et-previa { background: #F5B301; color: #1A1300; }
.et-resumen { background: #2B6BFF; color: #fff; }
.et-exclusivo { background: #fff; color: #07151F; }
.sobre { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.sobre a:hover { color: var(--texto); }
.punto-vivo { width: 10px; height: 10px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 0 var(--acento); animation: latido 1.8s infinite; }
@keyframes latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 70%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Al aire hoy ---------- */
.al-aire { position: relative; max-width: var(--ancho); margin: 0 auto; }
.al-aire-medio { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.al-aire-medio img { width: 100%; height: 100%; object-fit: cover; }
.al-aire-medio::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,21,31,0) 45%, rgba(7,21,31,.85) 85%, var(--fondo)); pointer-events: none; }
.al-aire-medio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 2; }
.al-aire-medio.reproduciendo::after { display: none; }
.btn-play-grande { position: absolute; z-index: 1; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--acento); color: var(--tinta-marca); box-shadow: var(--sombra); transition: transform var(--t-rapida), background var(--t-rapida); }
.btn-play-grande:hover { transform: translate(-50%, -50%) scale(1.06); background: color-mix(in srgb, var(--acento) 80%, white); }
.btn-play-grande .ico { width: 30px; height: 30px; margin-left: 4px; }
.al-aire-info { position: relative; z-index: 1; padding: 0 var(--gutter) 8px; margin-top: -56px; }
.al-aire-info h1 { font-size: clamp(32px, 7vw, 64px); max-width: 18ch; text-wrap: balance; }
.al-aire-meta { color: var(--texto-2); margin: 10px 0 0; font-size: 15px; }
.al-aire-meta a { color: var(--texto); font-weight: 600; }
@media (min-width: 900px) {
  .al-aire { padding: 24px var(--gutter) 0; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 36px; align-items: end; }
  .al-aire-medio { border-radius: var(--radio-g); box-shadow: var(--sombra); }
  .al-aire-medio::after { background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35)); }
  .al-aire-info { margin: 0; padding: 0 0 12px; }
  .btn-play-grande { top: 50%; width: 84px; height: 84px; }
}

/* ---------- Guía de estrenos ---------- */
.guia { max-width: var(--ancho); margin: 28px auto 0; padding: 0 var(--gutter); }
.guia h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; }
.guia h2 small { font-family: var(--f-texto); text-transform: none; font-weight: 500; color: var(--texto-3); letter-spacing: 0; }
.guia ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.guia ul::-webkit-scrollbar { display: none; }
.guia li a { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-width: 210px; padding: 12px 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); }
.guia li a:hover { border-color: #3A4B6E; }
.g-hora { grid-row: span 2; font: 800 30px/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.g-cuando { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--acento); }
.g-prog { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Filas horizontales ---------- */
.fila { max-width: var(--ancho); margin: 36px auto 0; }
.fila-enc { display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter); flex-wrap: wrap; }
.fila-enc h2 { font-size: clamp(24px, 4vw, 32px); }
.fila-enc h2 a:hover { color: var(--acento); }
.fila-flechas { margin-left: auto; display: flex; gap: 8px; }
.fila-flechas button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--borde); background: var(--superficie); cursor: pointer; display: grid; place-items: center; }
.fila-flechas button:hover { background: var(--superficie-2); }
.fila-flechas button:disabled { opacity: .35; cursor: default; }
.fila-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--gutter) 6px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.fila-pista::-webkit-scrollbar { display: none; }
.fila-pista > * { scroll-snap-align: start; }
@media (min-width: 600px) { .fila-pista { grid-auto-columns: 44%; } }
@media (min-width: 900px) { .fila-pista { grid-auto-columns: calc((100% - 3 * 14px) / 4.15); } }

/* ---------- Tarjeta de episodio ---------- */
.tarj-ep { display: block; border-radius: var(--radio); }
.mini { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.mini img.sin-imagen, .al-aire-medio img.sin-imagen { visibility: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.tarj-ep:hover .mini img { transform: scale(1.04); }
.mini .dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .78); font: 600 13px/1.2 var(--f-texto); font-variant-numeric: tabular-nums; }
.mini .et { position: absolute; left: 8px; top: 8px; }
.tarj-txt { display: block; padding: 10px 2px 0; }
.tarj-prog { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); margin-bottom: 2px; }
.tarj-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 600; font-size: 16px; line-height: 1.35; }
.tarj-ep:hover .tarj-tit { color: #fff; text-decoration: underline; text-decoration-color: var(--acento); text-underline-offset: 3px; }
.tarj-fecha { display: block; margin-top: 4px; font-size: 14px; color: var(--texto-3); }

/* ---------- Patrocinio ---------- */
.patrocinio { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); margin-top: 16px; }
.patrocinio:hover { background: rgba(255, 255, 255, .1); }
.pat-et { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--texto-3); text-transform: uppercase; }
.pat-logo img { height: 22px; width: auto; max-width: 120px; object-fit: contain; }
.pat-logo b { font-weight: 700; }
.patrocinio.en-fila { margin: 0; min-height: 34px; }

/* ---------- Programas ---------- */
.titulo-pag { font-size: clamp(36px, 7vw, 56px); margin: 28px 0 20px; }
.rejilla-prog { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 700px) { .rejilla-prog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rejilla-prog { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tarj-prog { display: block; }
.tarj-prog-img { display: block; aspect-ratio: 2 / 3; border-radius: var(--radio); overflow: hidden; background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); border: 1px solid var(--borde); }
.tarj-prog-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.tarj-prog:hover img { transform: scale(1.04); }
.tarj-prog-ph { height: 100%; display: grid; place-items: center; padding: 16px; text-align: center; font: 800 26px/1 var(--f-titulo); text-transform: uppercase; }
.tarj-prog-nom { display: block; margin-top: 10px; font-weight: 700; }
.tarj-prog-hora, .tarj-prog-pat { display: block; font-size: 14px; color: var(--texto-3); }

.prog-enc { position: relative; min-height: 420px; display: flex; align-items: flex-end; background: var(--fondo-2); overflow: hidden; }
.prog-enc::before { content: ""; position: absolute; inset: 0; background-image: var(--fondo, none); background-size: cover; background-position: center top; opacity: .55; }
.prog-enc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,21,31,.15) 0%, rgba(7,21,31,.7) 55%, var(--fondo) 100%), linear-gradient(90deg, rgba(7,21,31,.75), transparent 70%); }
.prog-enc-in { position: relative; z-index: 1; width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 40px var(--gutter) 24px; }
.prog-enc h1 { font-size: clamp(40px, 9vw, 80px); }
.prog-desc { max-width: 60ch; color: var(--texto-2); font-size: 17px; margin: 12px 0 0; }
.prog-hora { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 600; }
.cuenta { margin: 6px 0 0; color: var(--texto-2); }
.cuenta b { color: var(--texto); }
.conductores { margin-top: 28px; }
.conductores h2, .lista-ep h2 { font-size: 26px; display: flex; align-items: baseline; gap: 10px; }
.lista-ep h2 small { font-family: var(--f-texto); font-size: 15px; color: var(--texto-3); font-weight: 600; }
.conductores ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; }
.conductores li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.conductores img, .conductores .ini { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.conductores .ini { display: grid; place-items: center; background: var(--superficie-2); font: 800 22px/1 var(--f-titulo); color: var(--acento); }
.lista-ep { margin-top: 36px; }
.rejilla-ep { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 16px; margin-top: 14px; }
@media (min-width: 600px) { .rejilla-ep { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rejilla-ep { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Episodio ---------- */
.ep { padding-top: 0; }
.ep-reproductor { position: relative; aspect-ratio: 16 / 9; margin: 0 calc(-1 * var(--gutter)); background: #000; }
.ep-reproductor iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 760px) { .ep-reproductor { margin: 24px 0 0; border-radius: var(--radio-g); overflow: hidden; box-shadow: var(--sombra); } }
.ep-cuerpo { display: grid; gap: 32px; margin-top: 20px; }
@media (min-width: 1000px) { .ep-cuerpo { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
.ep-principal h1 { font-size: clamp(28px, 5vw, 44px); text-wrap: balance; }
.ep-meta { margin: 8px 0 0; color: var(--texto-2); }
.capitulos { margin-top: 26px; }
.capitulos h2 { font-size: 22px; }
.capitulos ol { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.capitulos li + li { border-top: 1px solid var(--borde); }
.capitulos button { width: 100%; display: flex; gap: 14px; align-items: center; min-height: 48px; padding: 10px 14px; background: var(--superficie); border: 0; text-align: left; cursor: pointer; font-size: 15px; }
.capitulos button:hover { background: var(--superficie-2); }
.capitulos button.activo { background: var(--superficie-2); box-shadow: inset 3px 0 0 var(--acento); }
.cap-t { min-width: 56px; font: 700 15px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--acento); }
.etiquetas { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.tag { padding: 6px 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); font-size: 14px; font-weight: 600; color: var(--texto-2); }
.tag-deporte { color: var(--texto); }
.ep-desc { margin-top: 22px; background: var(--superficie); border-radius: var(--radio); padding: 4px 16px; }
.ep-desc summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 700; }
.ep-desc p { color: var(--texto-2); margin: 4px 0 16px; overflow-wrap: anywhere; }
.lat-t { font-size: 20px; margin: 0 0 12px; }
.lat-t:not(:first-child) { margin-top: 28px; }
.lat-lista { display: grid; gap: 18px; }
@media (min-width: 1000px) {
  .lat-lista .tarj-ep { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
  .lat-lista .tarj-txt { padding: 0; }
  .lat-lista .tarj-tit { font-size: 15px; }
}

/* ---------- Estados ---------- */
.vacio { max-width: 560px; margin: 64px auto; padding: 32px 24px; text-align: center; background: var(--superficie); border: 1px dashed var(--borde); border-radius: var(--radio-g); }
.vacio h2 { font-size: 28px; }
.vacio p { color: var(--texto-2); margin: 10px 0 0; }
.aviso-toast { position: fixed; left: 50%; bottom: calc(var(--alto-nav) + 20px); transform: translateX(-50%); background: var(--texto); color: var(--fondo); padding: 12px 18px; border-radius: 999px; font-weight: 600; z-index: 80; box-shadow: var(--sombra); }

/* ---------- Pie ---------- */
.pie { margin-top: 72px; border-top: 1px solid var(--borde); background: var(--fondo-2); }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 32px var(--gutter); display: grid; gap: 20px; }
.pie-marca p { margin: 6px 0 0; color: var(--texto-3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie-redes a { font-weight: 600; color: var(--texto-2); min-height: 44px; display: inline-flex; align-items: center; }
.pie-redes a:hover, .pie-legal a:hover { color: var(--texto); }
.pie-legal { color: var(--texto-3); font-size: 14px; }
@media (min-width: 900px) { .pie-in { grid-template-columns: 1.2fr 1fr; } .pie-legal { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ================= Shorts (entrega 1.2) ================= */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ver-todo { font-weight: 700; font-size: 15px; color: var(--texto-2); padding: 8px 4px; }
.ver-todo:hover { color: var(--texto); }
.fila-vertical .fila-pista { grid-auto-columns: 42%; }
@media (min-width: 600px) { .fila-vertical .fila-pista { grid-auto-columns: 26%; } }
@media (min-width: 900px) { .fila-vertical .fila-pista { grid-auto-columns: calc((100% - 5 * 14px) / 6.2); } }
.tarj-short { display: block; }
.mini-v { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.mini-v img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.tarj-short:hover .mini-v img { transform: scale(1.04); }
.mini-v::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); }
.mini-v-ico { position: absolute; z-index: 1; left: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); }
.mini-v-ico .ico { width: 16px; height: 16px; margin-left: 2px; }
.mini-v img.sin-imagen { visibility: hidden; }
.tarj-short-tit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px; font-weight: 600; font-size: 15px; line-height: 1.35; }
.ep-shorts { margin-top: 26px; }
.ep-shorts h2 { font-size: 22px; }
.ep-shorts-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 40%; gap: 12px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
@media (min-width: 600px) { .ep-shorts-pista { grid-auto-columns: 160px; } }

/* El feed ocupa la pantalla. En el celular se oculta el encabezado y queda la barra de abajo. */
body.modo-shorts { padding-bottom: 0; background: #000; overflow: hidden; }
body.modo-shorts .pie { display: none; }
body.modo-shorts .principal { position: relative; }
@media (max-width: 899px) { body.modo-shorts .enc { display: none; } }
.feed { --alto-feed: calc(100dvh - var(--alto-nav) - env(safe-area-inset-bottom)); height: var(--alto-feed); overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; outline: none; }
.feed::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .feed { --alto-feed: calc(100vh - var(--alto-enc)); } }
.slide { position: relative; height: var(--alto-feed); scroll-snap-align: start; scroll-snap-stop: always; display: flex; justify-content: center; background: #000; overflow: hidden; }
.slide-medio { position: relative; height: 100%; aspect-ratio: 9 / 16; max-width: 100%; background: #0B0B0B; }
@media (max-width: 899px) { .slide-medio { width: 100%; aspect-ratio: auto; } }
@media (min-width: 900px) { .slide { padding: 12px 0; } .slide-medio { border-radius: 16px; overflow: hidden; } }
.slide-medio img { width: 100%; height: 100%; object-fit: cover; }
.slide-medio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.slide-toque { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.slide-medio::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 18%, transparent 55%, rgba(0,0,0,.75) 100%); }
.slide.pausado .slide-toque::after { content: ""; position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(0,0,0,.5) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 34px no-repeat; }
/* Zona segura: nada importante en el 10% de abajo ni pegado a los bordes. */
.slide-info { position: absolute; z-index: 3; left: max(16px, calc(50% - min(28vh, 260px) + 16px)); right: 84px; bottom: calc(10% + 8px); max-width: 520px; pointer-events: none; }
@media (max-width: 899px) { .slide-info { left: 16px; } }
.slide-info a, .slide-info .btn { pointer-events: auto; }
.slide-tit { font-size: clamp(20px, 5.4vw, 26px); text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.slide-prog, .slide-pat { margin: 0 0 6px; font-size: 14px; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.7); }
.slide-pat { font-weight: 600; color: #E5E7EB; }
.slide-pat a { text-decoration: underline; }
.slide-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 10px 0 0; }
.slide-tags li { font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.btn-chico-pub { min-height: 44px; margin-top: 12px; font-size: 14px; }
.slide-acciones { position: absolute; z-index: 3; right: max(12px, calc(50% - min(28vh, 260px) - 72px)); bottom: calc(10% + 8px); display: flex; flex-direction: column; gap: 14px; }
@media (max-width: 899px) { .slide-acciones { right: 12px; } }
.slide-btn { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; min-height: 56px; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.slide-btn .ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: rgba(0,0,0,.45); }
.feed-filtros { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top) + 12px); left: 0; right: 64px; display: flex; gap: 8px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.feed-filtros::-webkit-scrollbar { display: none; }
.feed-filtros a { flex: none; min-height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); color: #E5E7EB; }
.feed-filtros a[aria-current] { background: var(--secundario); color: var(--tinta-marca); }
.feed-sonido { position: fixed; z-index: 40; top: calc(env(safe-area-inset-top) + 8px); right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); cursor: pointer; }
@media (min-width: 900px) { .feed-filtros { top: calc(var(--alto-enc) + 12px); left: 50%; right: auto; transform: translateX(-50%); max-width: 60vw; } .feed-sonido { top: calc(var(--alto-enc) + 10px); right: 24px; } }
.feed-vacio { min-height: 70vh; display: grid; place-items: center; padding: 16px; }
.feed-fin { height: 120px; display: grid; place-items: center; color: var(--texto-3); scroll-snap-align: end; }
/* Computadora: el texto queda dentro del video y los botones a su derecha. Ancho del video = alto × 9/16. */
@media (min-width: 900px) {
  .slide { --medio-mitad: calc((var(--alto-feed) - 24px) * 0.28125); }
  .slide-info { left: calc(50% - var(--medio-mitad) + 16px); right: calc(50% - var(--medio-mitad) + 16px); max-width: none; bottom: calc(12px + 10%); }
  .slide-acciones { right: calc(50% - var(--medio-mitad) - 84px); bottom: calc(12px + 10%); }
}

/* =====================================================================
   REDISEÑO 1.2.2 · "Estadio neón": la identidad del banner de Noti Sports
   ===================================================================== */
:root { --alto-dep: 46px; }
h1, h2, h3 { font-style: italic; letter-spacing: 0; }

/* ---------- Encabezado: logo, navegación y barra de deportes ---------- */
.enc { height: auto; background: rgba(7, 21, 31, .9); border-bottom: 1px solid rgba(0, 240, 192, .14); }
.enc-in { height: 58px; gap: 28px; }
@media (min-width: 900px) { :root { --alto-enc: 114px; } .enc-in { height: 68px; } }
.logo-txt { font-size: 30px; filter: drop-shadow(0 0 14px rgba(0, 240, 192, .25)); }
.nav-sup { gap: 6px; }
.nav-sup a { border-radius: 0; padding: 22px 12px; font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-size: 19px; letter-spacing: .02em; text-transform: uppercase; color: var(--texto-2); }
.nav-sup a:hover { background: none; color: #fff; }
.nav-sup a[aria-current] { background: none; color: #fff; box-shadow: inset 0 -3px 0 var(--secundario); }
.enc-redes { margin-left: auto; display: flex; gap: 2px; }
.enc-redes a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--texto-2); border-radius: 50%; }
.enc-redes a:hover { color: var(--acento); background: rgba(0, 240, 192, .08); }
.barra-dep { border-top: 1px solid rgba(255, 255, 255, .05); }
.barra-dep-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); height: var(--alto-dep); display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.barra-dep-in::-webkit-scrollbar { display: none; }
.barra-dep a { flex: none; min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 6px; transform: skewX(-10deg);
  font-family: var(--f-titulo); font-style: italic; font-weight: 700; font-size: 16px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--texto); background: rgba(0, 240, 192, .06); border: 1px solid rgba(0, 240, 192, .22); transition: background var(--t-rapida), color var(--t-rapida); }
.barra-dep a:hover { background: rgba(0, 240, 192, .16); color: #fff; }
.barra-dep a[aria-current] { background: var(--secundario); border-color: var(--secundario); color: var(--tinta-marca); }
@media (max-width: 899px) { .enc-redes { display: none; } }

/* ---------- Títulos de sección con la "barra" de marca ---------- */
.fila-enc h2, .sec-t { font-size: clamp(24px, 3.6vw, 34px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.fila-enc h2::before, .sec-t::before { content: ""; align-self: center; width: 6px; height: .85em; background: var(--secundario); transform: skewX(-14deg); border-radius: 1px; }
.sec-pre { font-family: var(--f-texto); font-style: normal; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--acento); }
.fila-enc h2 a:hover { color: var(--secundario); }
.seccion { max-width: var(--ancho); margin: 40px auto 0; }
.sec-enc { display: flex; align-items: center; gap: 14px; padding: 0 var(--gutter); }
.sec-enc .ver-todo { margin-left: auto; }
.ver-todo { color: var(--acento); }
.ver-todo:hover { color: var(--secundario); }

/* ---------- Hero "Al aire hoy" con luces de estadio ---------- */
.hero { position: relative; overflow: hidden; padding: 20px 0 8px; isolation: isolate; }
.hero-fondo { position: absolute; inset: 0; z-index: -2; background-image: var(--img); background-size: cover; background-position: center; filter: blur(34px) saturate(1.2); opacity: .38; transform: scale(1.2); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 20% 0%, rgba(0, 240, 192, .22), transparent 60%), radial-gradient(50% 60% at 85% 10%, rgba(212, 240, 0, .12), transparent 60%),
              repeating-linear-gradient(100deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 60px), linear-gradient(180deg, rgba(7, 21, 31, .2), var(--fondo) 92%); }
.hero-in { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: 18px; }
.hero .al-aire-medio { border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 240, 192, .35), 0 24px 60px rgba(0, 0, 0, .55), 0 0 80px rgba(0, 240, 192, .14); }
.hero .al-aire-medio::after { display: none; }
.hero .btn-play-grande { top: 50%; }
.al-aire-medio .dur { position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .78); font: 600 13px/1.2 var(--f-texto); font-variant-numeric: tabular-nums; }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.hero-prog { display: inline-block; font-family: var(--f-titulo); font-style: italic; font-weight: 800; font-size: 24px; text-transform: uppercase; color: var(--secundario); letter-spacing: .01em; }
.hero-prog:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-tit { font-size: clamp(26px, 3.4vw, 40px); line-height: 1.04; margin-top: 4px; text-wrap: balance; }
.hero-meta { margin: 10px 0 0; color: var(--texto-2); font-size: 15px; }
@media (min-width: 900px) { .hero { padding: 36px 0 12px; } .hero-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: center; } }
.estrenos { max-width: var(--ancho); margin: 22px auto 0; padding: 0 var(--gutter); display: flex; align-items: center; gap: 14px; }
.estrenos-t { flex: none; display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.estrenos-t .ico { width: 18px; height: 18px; color: var(--acento); }
.estrenos ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.estrenos ul::-webkit-scrollbar { display: none; }
.estrenos li a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 10px; background: rgba(16, 40, 56, .8); border: 1px solid var(--borde); white-space: nowrap; }
.estrenos li a:hover { border-color: rgba(0, 240, 192, .5); }
.estrenos b { font: italic 800 24px/1 var(--f-titulo); color: var(--secundario); font-variant-numeric: tabular-nums; }
.estrenos span { display: grid; font-weight: 600; font-size: 14px; line-height: 1.2; }
.estrenos em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
@media (max-width: 899px) { .estrenos { flex-direction: column; align-items: stretch; gap: 8px; } }

/* ---------- Vitrina de programas ---------- */
.vitrina { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px var(--gutter) 4px; scrollbar-width: none; }
.vitrina::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .vitrina { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; } }
.vitrina-prog { scroll-snap-align: start; position: relative; display: block; border-radius: 16px; overflow: hidden; background: var(--superficie); border: 1px solid var(--borde); transition: transform var(--t-rapida), border-color var(--t-rapida); }
.vitrina-prog:hover { transform: translateY(-3px); border-color: rgba(0, 240, 192, .55); }
.vp-img { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--superficie-2), var(--fondo-2)); }
.vp-img img { width: 100%; height: 100%; object-fit: cover; }
.vp-txt { display: grid; gap: 4px; padding: 14px 16px 16px; }
.vp-nom { font: italic 800 26px/1 var(--f-titulo); text-transform: uppercase; }
.vp-hora { color: var(--texto-2); font-size: 14px; font-weight: 600; }
.vp-pat { color: var(--texto-3); font-size: 13px; }
.vp-ver { display: inline-flex; align-items: center; gap: 2px; margin-top: 6px; color: var(--secundario); font-weight: 700; font-size: 14px; }
.vp-ver .ico { width: 18px; height: 18px; }

/* ---------- Tarjetas ---------- */
.tarj-tit { font-family: var(--f-titulo); font-weight: 700; font-size: 18px; line-height: 1.12; letter-spacing: .01em; }
.tarj-ep:hover .tarj-tit { text-decoration: none; color: var(--acento); }
.mini, .mini-v { transition: box-shadow var(--t-rapida); }
.tarj-ep:hover .mini, .tarj-short:hover .mini-v { box-shadow: 0 0 0 2px var(--acento), 0 0 24px rgba(0, 240, 192, .25); }
.mini-v-ico { background: var(--acento); color: var(--tinta-marca); }
.tarj-short-tit { font-family: var(--f-titulo); font-weight: 700; font-size: 17px; line-height: 1.12; }
.titulo-pag { font-size: clamp(36px, 6vw, 56px); }

/* ---------- Barra inferior del celular ---------- */
.nav-inf { background: rgba(5, 16, 24, .96); border-top: 1px solid rgba(0, 240, 192, .16); }
.nav-inf a { position: relative; font-size: 12px; letter-spacing: .02em; }
.nav-inf a[aria-current] { color: #fff; }
.nav-inf a[aria-current]::before { content: ""; position: absolute; top: 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px; background: var(--secundario); }
.nav-inf a[aria-current] .ico { color: var(--secundario); }
.nav-inf .ni-shorts .ico { width: 34px; height: 30px; padding: 4px 6px; border-radius: 10px; background: var(--acento); color: var(--tinta-marca); }
.nav-inf .ni-shorts[aria-current] .ico { background: var(--secundario); color: var(--tinta-marca); }

/* ---------- Página de programa y pie ---------- */
.prog-enc h1 { font-size: clamp(40px, 8vw, 76px); }
.prog-enc::after { background: linear-gradient(180deg, rgba(7, 21, 31, .1) 0%, rgba(7, 21, 31, .7) 55%, var(--fondo) 100%), linear-gradient(90deg, rgba(7, 21, 31, .8), transparent 70%), radial-gradient(60% 80% at 10% 0%, rgba(0, 240, 192, .16), transparent 60%); }
.pie { background: linear-gradient(180deg, var(--fondo-2), #050F17); border-top: 1px solid rgba(0, 240, 192, .14); }
.ver-todo { white-space: nowrap; }
@media (max-width: 599px) {
  .fila-enc h2, .sec-t { display: block; position: relative; padding-left: 16px; font-size: 24px; line-height: 1.05; }
  .sec-t { white-space: nowrap; }
  .fila-enc h2::before, .sec-t::before { position: absolute; left: 0; bottom: 3px; height: 19px; }
  .sec-pre { display: block; margin-bottom: 2px; }
  .fila-enc { flex-wrap: nowrap; }
  .fila-enc > h2 { min-width: 0; }
  /* Con patrocinador, el «Presentado por» baja a su propio renglón para no salirse de la pantalla */
  .fila-enc:has(.patrocinio.en-fila) { flex-wrap: wrap; row-gap: 6px; }
  .fila-enc .patrocinio.en-fila { order: 3; flex-basis: 100%; }
}
@media (hover: none), (max-width: 640px) { .fila-flechas { display: none; } }
@media (max-width: 599px) { .sec-enc { gap: 8px; } .sec-t { font-size: 21px; } .ver-todo { font-size: 14px; padding: 8px 0; } }
@media (max-width: 380px) { .sec-enc .ver-todo { display: none; } }

/* ===== Cover de la portada (1.2.2) ===== */
.cover { background: var(--fondo); border-bottom: 3px solid var(--acento); line-height: 0; }
.cover a, .cover picture { display: block; }
.cover img { display: block; width: 100%; max-width: 1920px; height: auto; margin: 0 auto; }

/* ===== Blog (1.2.2) ===== */
.tarj-nota { display: block; border-radius: var(--radio); }
.tn-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: linear-gradient(160deg, var(--superficie-2), var(--superficie)); }
.tn-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.tn-img .et { position: absolute; left: 8px; top: 8px; }
.tn-ph { height: 100%; display: grid; place-items: center; color: var(--acento); }
.tn-ph .ico { width: 44px; height: 44px; }
.tarj-nota:hover .tn-img img { transform: scale(1.04); }
.tn-txt { display: block; padding: 10px 2px 0; }
.tn-dep { display: block; margin-bottom: 4px; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--acento); }
.tn-tit { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-weight: 700; font-size: 17px; line-height: 1.3; }
.tarj-nota:hover .tn-tit { text-decoration: underline; text-decoration-color: var(--secundario); text-underline-offset: 3px; }
.tn-res { display: block; margin-top: 8px; color: var(--texto-2); font-size: 16px; line-height: 1.5; }
.tn-meta { display: block; margin-top: 6px; font-size: 14px; color: var(--texto-3); }
.tarj-nota.grande { margin-bottom: 28px; }
.tarj-nota.grande .tn-tit { font: 800 clamp(28px, 5vw, 44px)/1.02 var(--f-titulo); text-transform: uppercase; -webkit-line-clamp: 4; }
@media (min-width: 900px) {
  .tarj-nota.grande { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: center; }
  .tarj-nota.grande .tn-img { border-radius: var(--radio-g); box-shadow: 0 0 0 3px var(--acento); }
}
.rejilla-notas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px 18px; }
@media (min-width: 600px) { .rejilla-notas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .rejilla-notas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.titulo-pag small { font-size: .5em; color: var(--acento); margin-left: 8px; }
.filtros-blog { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: -6px calc(var(--gutter) * -1) 24px; padding: 0 var(--gutter); }
.filtros-blog::-webkit-scrollbar { display: none; }
.filtros-blog a { flex: none; padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); font-weight: 600; font-size: 15px; }
.filtros-blog a[aria-current] { background: var(--acento); border-color: var(--acento); color: var(--tinta-marca); }
.paginacion { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin: 36px 0 8px; color: var(--texto-2); }
.paginacion .ico { width: 18px; height: 18px; }

/* Nota */
.nota-enc { max-width: 820px; padding-top: 28px; }
.nota-enc h1 { font-size: clamp(34px, 6.4vw, 60px); line-height: 1; }
.nota-enc .sobre a { color: var(--acento); }
.nota-entrada { margin: 16px 0 0; font-size: clamp(18px, 2.3vw, 21px); line-height: 1.5; color: var(--texto-2); }
.nota-meta { margin: 14px 0 0; font-size: 15px; color: var(--texto-3); }
.nota-meta b { color: var(--texto); }
.patrocinio.en-nota { margin-top: 16px; }
.nota-foto { max-width: 1100px; margin: 26px auto 0; }
.nota-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.nota-foto figcaption, .nota-cuerpo figcaption { padding: 8px var(--gutter) 0; font-size: 13px; color: var(--texto-3); }
@media (min-width: 760px) { .nota-foto img { border-radius: var(--radio-g); } .nota-foto figcaption { padding-left: 0; } }
.nota-cuerpo { max-width: 760px; padding-top: 10px; font-size: 18px; line-height: 1.7; color: #E6F3F6; }
.nota-cuerpo p { margin: 18px 0 0; }
.nota-cuerpo h2 { margin: 34px 0 0; font-size: clamp(26px, 4vw, 32px); padding-left: 14px; border-left: 5px solid var(--acento); }
.nota-cuerpo h3 { margin: 26px 0 0; font-size: 23px; color: var(--secundario); }
.nota-cuerpo :is(p, li, blockquote) a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.nota-cuerpo strong { color: #fff; }
.nota-cuerpo ul, .nota-cuerpo ol { margin: 18px 0 0; padding-left: 24px; }
.nota-cuerpo li { margin-top: 6px; }
.nota-cuerpo li::marker { color: var(--acento); font-weight: 700; }
.nota-cuerpo blockquote { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 5px solid var(--secundario); font: 700 clamp(22px, 3.4vw, 28px)/1.25 var(--f-titulo); text-transform: uppercase; color: #fff; }
.nota-cuerpo blockquote p { margin: 0; }
.nota-cuerpo figure { margin: 26px 0 0; }
.nota-cuerpo figure img { width: 100%; height: auto; border-radius: var(--radio); }
.nota-cuerpo figcaption { padding-left: 0; }
.nota-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: #000; }
.nota-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.nota-compartir { margin-top: 30px; }
.nota-programa { display: grid; gap: 2px; margin-top: 26px; padding: 18px 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); border-left: 5px solid var(--secundario); }
.nota-programa .sobre { margin: 0; font-size: 12px; }
.nota-programa b { font: 800 26px/1.05 var(--f-titulo); text-transform: uppercase; }
.nota-programa span:last-child { color: var(--texto-2); font-size: 15px; }
.nota-programa:hover b { color: var(--secundario); }
.nota-rel { margin-top: 48px; }
.nota-rel .sec-t { margin-bottom: 16px; }
.nav-inf a { min-width: 0; }

/* ===== Anúnciate (1.2.2) ===== */
.ads-hero { padding: 48px 0 36px; background: linear-gradient(180deg, #12475A 0%, transparent 100%); border-bottom: 1px solid var(--borde); }
.ads-hero h1 { font-size: clamp(38px, 7vw, 68px); max-width: 900px; line-height: .98; }
.ads-hero .sobre { color: var(--acento); }
.ads-lead { max-width: 640px; margin: 16px 0 0; font-size: clamp(18px, 2.3vw, 21px); line-height: 1.5; color: var(--texto-2); }
.ads-hero .acciones { margin-top: 24px; }
.ads-sec { margin-top: 44px; }
.ads-sec .sec-t { margin-bottom: 18px; }
.ads-ubic { display: grid; gap: 16px; }
@media (min-width: 760px) { .ads-ubic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ads-card { padding: 22px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); border-top: 4px solid var(--acento); }
.ads-card h3 { font-size: 24px; margin: 12px 0 8px; }
.ads-card p { margin: 0; color: var(--texto-2); line-height: 1.55; }
.ads-ico { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--acento); color: var(--tinta-marca); }
.ads-nota { margin: 16px 0 0; color: var(--texto-3); }
.ads-progs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ads-progs a { display: grid; gap: 4px; padding: 0 0 12px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); overflow: hidden; }
.ads-progs img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ads-progs b { padding: 10px 14px 0; font: 800 22px/1.05 var(--f-titulo); text-transform: uppercase; }
.ads-progs span { padding: 0 14px; color: var(--secundario); font-weight: 600; font-size: 14px; }
.ads-pasos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .ads-pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ads-pasos li { counter-increment: p; padding: 20px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 6px; }
.ads-pasos li::before { content: counter(p); font: 800 40px/1 var(--f-titulo); color: var(--secundario); }
.ads-pasos b { font-size: 18px; }
.ads-pasos span { color: var(--texto-2); line-height: 1.5; }
.ads-cta { margin: 48px 0 8px; padding: 28px; border-radius: var(--radio-g); background: var(--acento); color: var(--tinta-marca); text-align: center; }
.ads-cta h2 { font-size: clamp(26px, 4vw, 36px); }
.ads-cta p { margin: 8px 0 16px; font-weight: 500; }
.ads-cta .btn-sec { background: var(--tinta-marca); color: var(--secundario); border-color: var(--tinta-marca); }

/* ===================== El fan (2.0) ===================== */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.aviso-toast.mal { background: #FDE68A; color: #00121F; }
/* Encabezado */
.enc-fan { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.enc-fan + .enc-redes { margin-left: 0; }
.enc-entrar { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--acento); color: var(--tinta-marca); font-weight: 800; font-size: 14px; }
.enc-campana { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--texto); cursor: pointer; }
.enc-campana:hover { background: rgba(0, 240, 192, .1); }
.enc-campana .badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--secundario); color: var(--tinta-marca); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.enc-yo { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--c1, var(--acento)); color: #fff; font-weight: 800; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--acento); }
.enc-yo.nivel-fiel { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px #C9D3DA; }
.enc-yo.nivel-hincha, .enc-yo.nivel-inmortal { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px #E8C35A; }
.enc-yo img { width: 100%; height: 100%; object-fit: cover; }
.enc-menu { width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--texto); cursor: pointer; border-radius: 50%; }
@media (min-width: 900px) { .enc-menu { display: none; } }
.menu-movil { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px var(--gutter); background: var(--fondo-2); border-top: 1px solid var(--borde); }
.menu-movil[hidden] { display: none; }
.menu-movil a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: var(--superficie); font-weight: 700; }
.menu-movil a[aria-current] { color: var(--acento); }
@media (min-width: 900px) { .menu-movil { display: none !important; } }
.panel-avisos { position: fixed; z-index: 90; top: 64px; right: 12px; width: min(380px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); }
.pa-cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--borde); }
.pa-cab a { color: var(--acento); font-size: 13px; font-weight: 600; }
.panel-avisos ul { list-style: none; margin: 0; padding: 0; }
.panel-avisos li a { display: grid; gap: 2px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.panel-avisos li.nuevo a { background: rgba(0, 240, 192, .07); box-shadow: inset 3px 0 0 var(--acento); }
.panel-avisos li span { color: var(--texto-2); font-size: 14px; }
.panel-avisos li small { color: var(--texto-3); font-size: 12px; }
.pa-marca { color: var(--secundario) !important; font-weight: 700; }
.pa-vacio { padding: 20px 16px; color: var(--texto-2); }
/* Base de las páginas del fan */
.fan-pag { padding-bottom: 40px; }
.fan-cargando { color: var(--texto-3); padding: 24px 0; }
.fan-lead { color: var(--texto-2); line-height: 1.55; margin: 8px 0; }
.fan-lead a, .fan-alt a, .ayuda a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.ayuda { color: var(--texto-3); font-size: 14px; margin: 12px 0; }
.fan-caja { max-width: 560px; margin: 24px auto; padding: 24px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); }
.fan-caja h2 { font-size: 30px; }
.fan-tabs { display: flex; gap: 6px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .06); width: max-content; max-width: 100%; overflow-x: auto; }
.fan-tabs button { min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--texto-2); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.fan-tabs button[aria-selected="true"] { background: var(--acento); color: var(--tinta-marca); }
.fan-form { display: grid; gap: 14px; }
.fan-form.ancho { max-width: 640px; }
.fan-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.fan-form small { color: var(--texto-3); font-weight: 400; font-size: 13px; }
.fan-form input, .fan-form select, .fan-form textarea, .fan-filtros select, .com-form textarea, .com-form input, .chat-form input { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; }
.fan-form input:focus, .fan-form select:focus, textarea:focus, .chat-form input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.fan-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.fan-form legend { font-weight: 700; margin-bottom: 6px; }
.chk { display: flex !important; grid-template-columns: none; gap: 10px; align-items: flex-start; font-weight: 500 !important; }
.chk input { width: 20px; min-height: 20px; height: 20px; margin-top: 2px; accent-color: var(--acento); flex: none; }
.chk-lista { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.chk-lista small { color: var(--texto-3); }
.trampa { position: absolute; left: -9999px; }
.msg-mal, .msg-ok, .msg-av { padding: 10px 14px; border-radius: 12px; margin: 0; font-weight: 600; }
.msg-mal { background: #FDE68A; color: #00121F; }
.msg-ok { background: rgba(0, 240, 192, .15); color: var(--texto); }
.msg-av { background: rgba(212, 240, 0, .14); color: var(--texto); margin-bottom: 16px; }
.msg-av a { color: var(--secundario); }
.fan-o { text-align: center; color: var(--texto-3); margin: 6px 0; font-size: 14px; }
.g-btn { display: flex; justify-content: center; min-height: 44px; }
.fan-alt { margin: 14px 0 0; color: var(--texto-2); font-size: 14px; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento); font: inherit; cursor: pointer; text-decoration: underline; }
.fan-acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0; }
.btn-peligro { background: #FDE68A; color: #00121F; }
.fan-sec { margin-top: 28px; }
.fan-sec h2 { font-size: clamp(24px, 3.6vw, 32px); margin-bottom: 12px; }
.fan-sec h2 small { font-size: .55em; color: var(--acento); }
.fan-sec h3 { font-size: 20px; margin: 16px 0 8px; }
.dos-col { display: grid; gap: 24px; }
@media (min-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.fan-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.fan-filtros select { width: auto; }
.fan-tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.fan-tabla th { text-align: left; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); padding: 8px; border-bottom: 1px solid var(--borde); }
.fan-tabla td { padding: 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.fan-tabla td small { color: var(--texto-3); }
.fan-tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fan-tabla tr.yo td, .fan-tabla tr.actual td { background: rgba(0, 240, 192, .08); }
.fan-tabla a { font-weight: 700; }
.chip-eq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); font-weight: 700; font-size: 13px; white-space: nowrap; }
.chip-eq::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); }
.tag-emb { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--secundario); color: var(--tinta-marca); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin-left: 4px; }
/* Selector de equipo */
.sel-eq { display: grid; gap: 14px; }
.sel-eq h3 { font-size: 15px; letter-spacing: .08em; color: var(--texto-3); margin: 4px 0 8px; }
.sel-eq-buscar { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; }
.sel-eq-rejilla { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.sel-eq-op { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.sel-eq-op.activo { border-color: var(--acento); box-shadow: inset 0 0 0 2px var(--acento); background: rgba(0, 240, 192, .1); }
.sel-eq-color { width: 18px; height: 18px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
/* Tarjeta Noti Sports Fan */
.mi-grid { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .mi-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }
.tarjeta-fan { position: relative; overflow: hidden; border-radius: 22px; padding: 18px 20px 16px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c1) 85%, transparent), transparent 60%), linear-gradient(160deg, #0E3B4C, #00121F 75%); box-shadow: 0 0 0 2px var(--acento), 0 24px 50px rgba(0, 0, 0, .45); }
.tarjeta-fan.nivel-fiel { box-shadow: 0 0 0 3px #C9D3DA, 0 24px 50px rgba(0, 0, 0, .45); }
.tarjeta-fan.nivel-hincha, .tarjeta-fan.nivel-inmortal { box-shadow: 0 0 0 3px #E8C35A, 0 24px 50px rgba(0, 0, 0, .45); }
.tf-cab { display: flex; justify-content: space-between; align-items: center; }
.tf-marca { font: italic 800 22px/1 var(--f-titulo); letter-spacing: .02em; color: #BBD8E0; }
.tf-marca b { color: var(--acento); font-weight: 800; } .tf-marca i { color: var(--secundario); }
.tf-emb { padding: 3px 10px; border-radius: 999px; background: var(--secundario); color: var(--tinta-marca); font-size: 12px; font-weight: 800; }
.tf-cuerpo { display: grid; grid-template-columns: 96px minmax(0, 1fr) 88px; gap: 14px; align-items: center; margin-top: 12px; }
@media (max-width: 420px) { .tf-cuerpo { grid-template-columns: 76px minmax(0, 1fr); } .tf-qr { grid-column: 1 / -1; justify-self: end; margin-top: -8px; } }
.camiseta { width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4)); }
.tf-nombre { margin: 0; font: 800 clamp(26px, 5vw, 34px)/1 var(--f-titulo); text-transform: uppercase; overflow-wrap: anywhere; }
.tf-num { margin: 6px 0 0; color: var(--secundario); font-weight: 700; }
.tf-desde { margin: 2px 0 0; color: #BBD8E0; font-size: 13px; }
.tf-nivel { margin: 10px 0 6px; font-size: 15px; }
.tf-barra { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.tf-barra span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--acento), var(--secundario)); }
.tf-falta { margin: 6px 0 0; color: #BBD8E0; font-size: 13px; }
.tf-qr { width: 88px; height: 88px; border-radius: 10px; background: #fff; padding: 4px; }
.tf-insignias { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tf-insignias li { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 700; }
.insignias { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.insignias li { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); border-top: 3px solid var(--secundario); }
.insignias span { color: var(--texto-2); font-size: 14px; } .insignias small { color: var(--texto-3); font-size: 12px; }
.foto-fan { display: flex; align-items: center; gap: 12px; }
.foto-fan img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--superficie-2); }
.fan-borrar { margin-top: 18px; color: var(--texto-2); }
.fan-borrar summary { cursor: pointer; font-weight: 700; }
.perfil-fan { max-width: 620px; margin: 24px auto; }
/* Quinielas */
.quiniela { margin: 18px 0 28px; padding: 18px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); }
.q-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
.q-cab h2 { font-size: clamp(26px, 4vw, 34px); }
.q-estado { display: grid; text-align: right; } .q-estado b { color: var(--secundario); font-size: 18px; } .q-estado small { color: var(--texto-3); }
.q-pat { margin: 6px 0 0; color: var(--texto-2); font-size: 14px; } .q-pat b { color: var(--texto); }
.q-reglas { color: var(--texto-3); font-size: 14px; margin: 8px 0 12px; }
.q-partidos { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.q-partido { padding: 14px; border-radius: 14px; background: var(--fondo-2); display: grid; gap: 10px; }
.q-eq { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.q-vs { color: var(--texto-3); font-size: 14px; } .q-vs b { color: var(--texto); font-size: 20px; }
.q-ops { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.q-op { min-height: 48px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; font-weight: 800; cursor: pointer; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-op.activo { background: var(--acento); color: var(--tinta-marca); border-color: var(--acento); }
.q-op:disabled { cursor: default; opacity: .7; }
.q-marcador label { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--texto-3); font-size: 14px; }
.q-marcador span { display: inline-flex; gap: 6px; align-items: center; }
.q-marcador input { width: 64px; min-height: 42px; text-align: center; border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; font-weight: 700; }
.q-pts { margin: 0; font-weight: 800; color: var(--texto-3); } .q-pts.bien { color: var(--secundario); }
.q-ficha { color: var(--acento); font-size: 14px; font-weight: 600; justify-self: start; }
.q-guardar { display: grid; gap: 10px; margin-top: 16px; }
.q-guardar .btn { justify-self: start; }
.nb-enlace { margin-top: 24px; font-size: 14px; color: var(--texto-3); } .nb-enlace a { color: var(--texto-2); text-decoration: underline; }
.grupos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.grupos a { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); }
.grupos span { color: var(--texto-3); font-size: 14px; }
.g-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-end; margin-bottom: 8px; }
.g-cab h2 { font-size: clamp(28px, 5vw, 40px); }
/* Chat */
.chat { display: grid; gap: 8px; }
.chat-lista { list-style: none; margin: 0; padding: 10px; height: 380px; overflow-y: auto; border-radius: 14px; background: var(--fondo-2); border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 10px; }
.chat-lista li { line-height: 1.35; }
.chat-lista b { color: var(--c1, var(--acento)); filter: brightness(1.6); }
.chat-lista small { color: var(--texto-3); font-size: 12px; margin-left: 6px; }
.chat-lista p { margin: 2px 0 0; overflow-wrap: anywhere; }
.chat-lista .enlace { font-size: 12px; color: var(--texto-3); }
.chat-estado { color: var(--texto-3); font-size: 13px; margin: 0; min-height: 1em; }
.chat-form { display: flex; gap: 8px; }
/* Retos */
.reto { margin: 16px 0; padding: 18px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); }
.reto.destacado { border-color: var(--secundario); box-shadow: 0 0 0 1px var(--secundario); }
.reto h2 { font-size: clamp(24px, 4vw, 34px); }
.r-barra { display: flex; height: 52px; border-radius: 14px; overflow: hidden; margin: 14px 0 8px; font-weight: 800; }
.r-barra span { display: flex; align-items: center; padding: 0 12px; min-width: 22%; white-space: nowrap; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.r-barra span:first-child { background: var(--ca); } .r-barra span:last-child { background: var(--cb); justify-content: flex-end; }
.r-nota { color: var(--texto-3); font-size: 14px; } .r-hecho { color: var(--secundario); font-weight: 700; }
.r-ops { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.r-ops small { color: var(--texto-3); font-size: 12px; margin-left: 4px; }
.r-op { position: relative; width: 100%; min-height: 52px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow: hidden; }
.r-op:disabled { cursor: default; }
.r-op.activo { border-color: var(--acento); }
.r-op-t, .r-op-p { position: relative; z-index: 1; } .r-op-p { color: var(--secundario); }
.r-op-b { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(0, 240, 192, .18); }
.r-pie { color: var(--texto-3); font-size: 14px; margin: 10px 0 0; }
/* Equipo y partido */
.eq-enc { margin: 24px 0 8px; padding: 24px; border-radius: var(--radio-g); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 80%, #00121F), #00121F 80%); border: 1px solid var(--borde); box-shadow: inset 6px 0 0 var(--c2); }
.eq-enc h1 { font-size: clamp(38px, 7vw, 64px); }
.eq-fans { margin: 8px 0 0; color: var(--texto-2); font-weight: 600; }
.partidos, .lista-fans { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.partidos li, .lista-fans li { display: flex; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--superficie); }
.partidos a, .lista-fans a { font-weight: 700; } .partidos small, .lista-fans small { color: var(--texto-3); }
ol.lista-fans { counter-reset: n; } ol.lista-fans li { counter-increment: n; } ol.lista-fans li::before { content: counter(n); color: var(--acento); font-weight: 800; margin-right: 6px; }
.inmortales { color: #E8C35A; font-weight: 700; line-height: 1.8; }
.ficha { margin: 12px 0 20px; padding: 20px; border-radius: var(--radio-g); background: var(--superficie); border: 1px solid var(--borde); }
.ficha-eq { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; }
.fe { font: 800 clamp(22px, 4.5vw, 36px)/1.05 var(--f-titulo); text-transform: uppercase; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--c1) 45%, transparent); }
.ficha-mar b { display: block; font: 800 clamp(32px, 7vw, 56px)/1 var(--f-titulo); color: var(--secundario); }
.ficha-mar small { color: var(--texto-3); }
/* Comentarios y muro */
.comentarios { margin-top: 28px; }
.com-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.com-cab h2 { font-size: 26px; } .com-cab small { color: var(--acento); font-size: .6em; }
.js-like.activo { color: var(--secundario); }
.com-form { display: grid; gap: 8px; margin-bottom: 14px; }
.com-form .btn { justify-self: start; }
.com-extra { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .com-extra input[name=youtube] { flex: 1 1 220px; }
.com-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.com-lista li { padding: 12px 14px; border-radius: 14px; background: var(--superficie); }
.com-autor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .com-autor small { color: var(--texto-3); font-size: 12px; }
.com-lista p { margin: 6px 0 0; overflow-wrap: anywhere; line-height: 1.5; }
.com-img, .com-yt img { margin-top: 8px; max-width: 100%; max-height: 360px; border-radius: 12px; }
.com-acc { margin-top: 6px; } .com-acc .enlace { color: var(--texto-3); font-size: 13px; display: inline-flex; gap: 4px; align-items: center; } .com-acc .ico { width: 14px; height: 14px; }
.slide-btn.activo { color: var(--secundario); }
.hoja { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .55); display: flex; align-items: flex-end; justify-content: center; }
.hoja-in { width: min(640px, 100%); max-height: 75vh; overflow-y: auto; background: var(--fondo-2); border-radius: 20px 20px 0 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }
.hoja-cab { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; background: var(--fondo-2); }
.hoja-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: var(--texto); cursor: pointer; display: grid; place-items: center; }
/* Tira de tu equipo en la portada */
.tira-equipo { background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 55%, #00121F), #072B3A); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.tira-equipo .envoltura { display: flex; gap: 10px; overflow-x: auto; padding-top: 12px; padding-bottom: 12px; scrollbar-width: none; }
.te-eq, .te-item { flex: none; display: grid; gap: 2px; padding: 10px 16px; border-radius: 14px; background: rgba(0, 18, 31, .55); min-height: 56px; }
.te-eq { grid-template-columns: auto auto; align-items: center; column-gap: 10px; } .te-eq small { grid-column: 2; color: var(--texto-2); }
.te-color { grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.te-item small { color: var(--acento); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .te-item span { color: var(--texto-3); font-size: 13px; }
@media (max-width: 899px) { .enc-in { gap: 10px; } .enc-fan { gap: 2px; } }
.otros-liga { border: 1px solid var(--borde); border-radius: 12px; padding: 0 14px; margin-bottom: 8px; background: var(--fondo); }
.otros-liga summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.otros-liga[open] { padding-bottom: 12px; }
.ficha-eq > * { min-width: 0; } .fe { overflow-wrap: anywhere; font-size: clamp(18px, 4.5vw, 36px); }

/* ===================== Publicidad: banners y video (2.1) ===================== */
.anuncio { display: block; margin: 20px auto; max-width: 970px; text-align: center; }
.anuncio[hidden] { display: none; }
.anuncio.en-envoltura { padding: 0 var(--gutter); }
.anuncio-et { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); text-align: left; }
.anuncio-img { display: block; border-radius: 12px; overflow: hidden; background: var(--superficie); line-height: 0; }
.anuncio-img img { display: block; width: 100%; height: auto; aspect-ratio: 970 / 250; object-fit: cover; }
@media (max-width: 640px) { .anuncio-img img { aspect-ratio: 640 / 200; } }
.anuncio-casa { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; min-height: 90px; padding: 18px 22px; border-radius: 12px; text-align: left;
  background: linear-gradient(110deg, #072B3A, #0E3B4C 60%, #12505F); border: 1px dashed var(--acento); color: var(--texto); }
.anuncio-casa b { font: italic 800 clamp(22px, 4vw, 30px)/1 var(--f-titulo); text-transform: uppercase; color: var(--acento); }
.anuncio-casa span { color: var(--texto-2); font-weight: 600; }
.anuncio-casa:hover span { color: var(--secundario); }
.nota-cuerpo .anuncio { margin: 28px 0; }
.ep-principal .anuncio { margin: 18px 0; }
/* Reproductor de anuncios en video */
.av { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.av-vertical, .slide-anuncio .av { aspect-ratio: auto; height: 100%; border-radius: 0; }
.av-v { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; cursor: pointer; }
.av-et { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 18, 31, .8); color: #fff; font-size: 12px; font-weight: 700; }
.av-sonido { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0, 18, 31, .75); color: #fff; cursor: pointer; }
.av-sonido.activo { background: var(--acento); color: var(--tinta-marca); }
.av-ir { position: absolute; left: 10px; bottom: 10px; padding: 10px 16px; border-radius: 999px; background: var(--secundario); color: var(--tinta-marca); font-weight: 800; font-size: 14px; }
.av-saltar { position: absolute; right: 0; bottom: 18px; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .5); border-right: 0; background: rgba(0, 18, 31, .85); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.av-saltar:disabled { cursor: default; opacity: .85; }
.av.terminado .av-v { opacity: .5; }
/* Pre-roll sobre el reproductor del episodio */
.ep-reproductor { position: relative; }
.preroll { position: absolute; inset: 0; z-index: 3; background: #000; display: grid; }
.preroll .av { border-radius: 0; height: 100%; aspect-ratio: auto; }
.preroll-play { display: grid; place-items: center; align-content: center; gap: 8px; border: 0; background: radial-gradient(circle, #0E3B4C, #00121F 70%); color: #fff; cursor: pointer; font: inherit; }
.preroll-play svg { width: 72px; height: 72px; padding: 16px; border-radius: 50%; background: var(--acento); color: var(--tinta-marca); }
.preroll-play span { font: italic 800 24px/1 var(--f-titulo); text-transform: uppercase; }
.preroll-play small { color: var(--texto-2); }
/* Anuncio entre los shorts */
.slide-anuncio .slide-medio { background: #000; }
.tabla-ads { overflow-x: auto; } .tabla-ads table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tabla-ads th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-3); padding: 8px; border-bottom: 1px solid var(--borde); }
.tabla-ads td { padding: 10px 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.slide-anuncio .av-et, .slide-anuncio .av-sonido { top: 64px; }
.slide-anuncio .av-ir { bottom: 24px; left: 16px; }
.av-ir, .av-et, .av-sonido, .av-saltar { z-index: 2; }
.slide-anuncio .slide-medio::after { display: none; }

/* ===================== Resultados, tablas y contenido por equipo (2.2) ===================== */
.fan-tabs a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px; color: var(--texto-2); font-weight: 700; white-space: nowrap; }
.fan-tabs a[aria-current] { background: var(--acento); color: var(--tinta-marca); }
.ligas-tabs { margin: 8px 0 18px; }
.tp { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); min-width: 0; transition: border-color var(--t-rapida); }
.tp:hover { border-color: var(--acento); }
.tp.vivo { border-color: var(--secundario); box-shadow: inset 3px 0 0 var(--secundario); }
.tp-liga { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-eq { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-weight: 700; }
.tp-eq.gana .tp-nom, .tp-eq.gana .tp-gol { color: var(--texto); } .tp-eq:not(.gana) { color: var(--texto-2); }
.tp-eq.mio .tp-nom { color: var(--acento); }
.tp-col { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .3); display: block; }
.es-escudo { width: 22px; height: 22px; object-fit: contain; border-radius: 0; box-shadow: none; background: none; }
.tp-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-gol { font: 800 20px/1 var(--f-titulo); min-width: 18px; text-align: right; color: var(--texto); }
.tp-estado { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-3); }
.tp.vivo .tp-estado { color: var(--secundario); font-weight: 700; }
.pista-tp { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 230px); gap: 10px; overflow-x: auto; padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); scrollbar-width: thin; max-width: 100%; }
.marcadores-portada .sec-enc { min-width: 0; }
.marcadores-portada .sec-t { white-space: normal; min-width: 0; }
.marcadores-portada { padding-top: 18px; }
.marcadores-portada .sec-t .punto-vivo { margin-right: 8px; }
.grupo-tp { margin: 18px 0 26px; } .grupo-tp h2 { font-size: 24px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.rejilla-tp { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.tp-act { font-size: 13px; }
/* Tablas */
.tabla-env-pub { overflow-x: auto; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie); margin-bottom: 18px; }
.tabla-pos { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tabla-pos th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-3); padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--borde); }
.tabla-pos td { padding: 9px 8px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tabla-pos th:nth-child(2), .tabla-pos td.t-eq { text-align: left; }
.tabla-pos td.t-eq a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.tabla-pos .tp-col { width: 14px; height: 14px; }
.tabla-pos tr.mio td { background: rgba(0, 240, 192, .1); } .tabla-pos tr.mio td.t-eq a { color: var(--acento); }
.tabla-pos tr:nth-child(-n+8) td:first-child { color: var(--acento); font-weight: 800; }
@media (max-width: 560px) { .ocultable { display: none; } }
.sub-tabla { font-size: 20px; margin: 18px 0 8px; }
.tablas-portada { display: grid; gap: 18px; } @media (min-width: 900px) { .tablas-portada { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.goleadores { padding: 16px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); align-self: start; }
.goleadores h2, .goleadores h3 { font-size: 20px; margin: 0 0 10px; }
.goleadores ol { margin: 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 8px; }
.goleadores li { counter-increment: g; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.goleadores li::before { content: counter(g); color: var(--acento); font-weight: 800; }
.goleadores li span { display: grid; font-weight: 700; } .goleadores li small { color: var(--texto-3); font-weight: 400; font-size: 13px; }
.goleadores li b { font: 800 22px/1 var(--f-titulo); color: var(--secundario); }
.reto-portada .btn { margin-top: 8px; }
/* Equipo */
.eq-tabla { margin: 0 0 12px; color: var(--texto-2); } .eq-tabla b { color: var(--secundario); font-size: 20px; } .eq-tabla a { color: var(--acento); margin-left: 6px; }
.partidos li.vivo { box-shadow: inset 3px 0 0 var(--secundario); } .partidos li.vivo small { color: var(--secundario); font-weight: 700; }
.enlace-mas { color: var(--acento); font-weight: 600; font-size: 14px; }
.cont-eq { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.ce { display: grid; gap: 6px; align-content: start; }
.ce-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--superficie); }
.ce-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ce-tipo { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 18, 31, .85); color: var(--acento); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.ce-tit { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ce small { color: var(--texto-3); font-size: 12px; }
.chip-eq.con-escudo::before { display: none; } .chip-eq img { width: 16px; height: 16px; object-fit: contain; }
.tag-oficial { background: var(--acento); }
.te-vivo { box-shadow: inset 0 0 0 2px var(--secundario); } .te-vivo small { color: var(--secundario) !important; }
/* Avisos al celular */
.push-cta { display: grid; gap: 6px; margin: 0 0 12px; } .push-cta .btn { justify-self: start; } .push-cta small { color: var(--texto-3); }
.push-ok, .push-nota { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: rgba(0, 240, 192, .1); color: var(--texto); font-weight: 600; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.push-nota { background: rgba(212, 240, 0, .1); font-weight: 500; }
.push-ok .ico, .push-cta .ico { width: 18px; height: 18px; }

/* 2.2: con «Resultados» en el menú, las redes sociales del encabezado solo salen en pantallas anchas */
@media (max-width: 1499px) { .enc-redes { display: none; } }
.enc-in > * { min-width: 0; }
@media (min-width: 900px) and (max-width: 1199px) { .nav-sup { gap: 0; } .nav-sup a { padding: 22px 8px; font-size: 16px; } .enc-in { gap: 16px; } }
@media (max-width: 599px) { .solo-ancho { display: none; } }

/* Tipografía propia (Inter / Inter Display, licencia OFL, en assets/fuentes) */
@font-face { font-family: "NS Display"; src: url("fuentes/ns-display-900.woff") format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "NS Display"; src: url("fuentes/ns-display-900i.woff") format("woff"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "NS Display"; src: url("fuentes/ns-display-800.woff") format("woff"); font-weight: 600 800; font-style: normal; font-display: swap; }
@font-face { font-family: "NS Display"; src: url("fuentes/ns-display-800i.woff") format("woff"); font-weight: 600 800; font-style: italic; font-display: swap; }
@font-face { font-family: "NS Texto"; src: url("fuentes/ns-texto-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "NS Texto"; src: url("fuentes/ns-texto-400i.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "NS Texto"; src: url("fuentes/ns-texto-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "NS Texto"; src: url("fuentes/ns-texto-600.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "NS Texto"; src: url("fuentes/ns-texto-700.woff") format("woff"); font-weight: 700 900; font-style: normal; font-display: swap; }

/* =====================================================================
   2.5 · SISTEMA VISUAL NOTI SPORTS
   El contenido es el protagonista. Una sola capa que reemplaza las capas «Estadio neón» (1.2.2)
   y «Nivel cadena» (2.3): menos cajas, menos bordes, sin brillos ni degradados decorativos.
   · Cian = lo interactivo y lo que está en vivo. · Lima = la acción principal y la pleca de sección.
   · Títulos en Inter Display 800, en minúsculas normales (sin cursivas, salvo el logotipo).
   · Escala: 40/44 · 28/34 · 22/28 · 17/24 · 16/26 (notas 18/30) · 13/18.
   ===================================================================== */
:root {
  --acento: #00F0C0; --secundario: #D4F000; --tinta-marca: #00121F;
  --fondo: #00121F; --fondo-2: #041A28; --superficie: #0A2333; --superficie-2: #0F2D40; --borde: rgba(255, 255, 255, .09);
  --linea: rgba(255, 255, 255, .07); --placa: #0A2333;
  --texto: #F3F8F9; --texto-2: #AFC4CC; --texto-3: #86A1AC;
  --f-titulo: "NS Display", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-texto: "NS Texto", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --radio: 12px; --radio-g: 14px; --radio-c: 10px;
  --t-rapida: 140ms;
  --alto-enc: 56px;
}
@media (min-width: 760px) { :root { --alto-enc: 64px; } }
body { background: var(--fondo); font: 400 16px/1.6 var(--f-texto); color: var(--texto); }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 800; font-style: normal; text-transform: none; letter-spacing: -.015em; line-height: 1.15; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--acento) 35%, transparent); }

/* ---------- Encabezado: callado, para que el contenido hable ---------- */
.enc { height: auto; min-height: var(--alto-enc); background: color-mix(in srgb, var(--fondo) 92%, transparent); border-bottom: 1px solid var(--linea); }
.enc-in { height: var(--alto-enc); gap: 28px; }
.logo-txt { font-size: 24px; }
.nav-sup { gap: 2px; }
.nav-sup a { padding: 8px 12px; border-radius: 8px; background: none; box-shadow: none; font: 600 15px/1 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.nav-sup a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.nav-sup a[aria-current] { color: var(--texto); background: none; box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
@media (min-width: 900px) and (max-width: 1199px) { .nav-sup a { padding: 8px 9px; font-size: 14px; } .enc-in { gap: 16px; } }
/* Barra de deportes: solo en pantallas anchas y como texto discreto (en el celular está en los filtros de Shorts) */
.barra-dep { background: none; border-top: 1px solid var(--linea); }
.barra-dep-in { height: 40px; gap: 4px; }
.barra-dep a { transform: none; min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: none; font: 600 13px/1 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.barra-dep a:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.barra-dep a[aria-current] { background: none; color: var(--texto); box-shadow: inset 0 -2px 0 var(--acento); border-radius: 0; }
@media (max-width: 899px) { .barra-dep { display: none; } }
.enc-entrar { min-height: 36px; padding: 0 14px; border-radius: var(--radio-c); background: rgba(255, 255, 255, .08); color: var(--texto); font: 600 14px/1 var(--f-texto); text-transform: none; letter-spacing: 0; }
.enc-entrar:hover { background: rgba(255, 255, 255, .14); }
.enc-campana:hover, .enc-menu:hover { background: rgba(255, 255, 255, .06); }
.enc-campana .badge { background: var(--acento); }
.enc-yo { width: 34px; height: 34px; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px rgba(255, 255, 255, .25); }
.enc-yo.nivel-fiel, .enc-yo.nivel-hincha, .enc-yo.nivel-inmortal { box-shadow: 0 0 0 2px var(--fondo), 0 0 0 3px rgba(255, 255, 255, .25); }
.enc-buscar { border-radius: 8px; color: var(--texto-2); }
.enc-buscar:hover, .enc-buscar[aria-current="page"] { color: var(--texto); background: rgba(255, 255, 255, .05); }
.menu-movil { background: var(--fondo); border-top: 1px solid var(--linea); }
.menu-movil a { border-radius: var(--radio-c); background: var(--superficie); font-weight: 600; }
.menu-movil a[aria-current] { color: var(--texto); box-shadow: inset 2px 0 0 var(--acento); }
.panel-avisos { background: var(--fondo-2); border: 1px solid var(--borde); border-radius: var(--radio-g); }
.panel-avisos li.nuevo a { background: rgba(255, 255, 255, .03); box-shadow: inset 2px 0 0 var(--acento); }
.pa-marca { color: var(--texto) !important; }

/* ---------- Cintillo de marcadores: una línea fina, sin placas ---------- */
.cintillo { display: flex; height: 36px; background: var(--fondo); border-bottom: 1px solid var(--linea); overflow: hidden; position: relative; z-index: 1; }
.cin-etq { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 var(--gutter); position: relative; z-index: 1; background: var(--fondo); color: var(--texto-3);
  font: 600 12px/1 var(--f-texto); letter-spacing: .02em; text-transform: none; clip-path: none; box-shadow: 1px 0 0 var(--linea); }
.cintillo.en-vivo .cin-etq { color: var(--acento); }
.cin-etq .punto-vivo { width: 7px; height: 7px; background: var(--acento); }
.cin-ventana { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
.cin-pista { display: flex; width: max-content; animation: cin-correr calc(var(--n, 8) * 7s) linear infinite; }
.cin-ventana:hover .cin-pista, .cin-ventana:focus-within .cin-pista { animation-play-state: paused; }
@keyframes cin-correr { to { transform: translateX(-50%); } }
.cin-lista { display: flex; margin: 0; padding: 0; list-style: none; }
.cin-lista a { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 18px; white-space: nowrap; font: 500 13px/1 var(--f-texto); color: var(--texto-2); position: relative; }
.cin-lista a::after { content: ""; position: absolute; right: 0; top: 12px; bottom: 12px; width: 1px; background: var(--linea); transform: none; }
.cin-lista a:hover .cin-eq, .cin-lista a:hover .cin-tit { color: var(--texto); }
.cin-liga { font: 600 11px/1 var(--f-texto); letter-spacing: .02em; text-transform: none; color: var(--texto-3); }
.cin-eq { display: inline-flex; align-items: center; gap: 6px; color: var(--texto); }
.cin-col { display: block; width: 8px; height: 8px; border-radius: 50%; transform: none; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
img.cin-col { width: 14px; height: 14px; border-radius: 0; object-fit: contain; background: none; }
.cin-lista b { font: 700 14px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto); }
.cin-est { padding: 0; font: 500 12px/1 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); background: none; }
.cin-vivo .cin-est { background: none; color: var(--acento); font-weight: 600; }
.cin-tit { max-width: 44ch; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .cin-pista { animation: none; } .cin-copia { display: none; }
  .cin-ventana { overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Títulos de sección: el texto manda, la pleca es una firma pequeña ---------- */
.seccion, .fila { margin-top: 48px; }
.fila-enc, .sec-enc { background: none; padding-bottom: 0; margin-bottom: 0; gap: 12px; align-items: baseline; }
.fila-enc h2, .sec-t { display: flex; align-items: baseline; gap: 10px; font: 800 22px/1.2 var(--f-titulo); text-transform: none; letter-spacing: -.015em; color: var(--texto); white-space: normal; padding-left: 0; }
.fila-enc h2::before, .sec-t::before { content: ""; position: static; flex: none; align-self: center; width: 4px; height: 16px; margin: 0; border-radius: 2px; transform: none; box-shadow: none; background: var(--secundario); }
.fila-enc h2 a:hover { color: var(--texto); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sec-pre { display: none; }
.sec-nota { color: var(--texto-3); font-size: 13px; }
.ver-todo { margin-left: auto; font: 600 14px/1 var(--f-texto); text-transform: none; letter-spacing: 0; color: var(--texto-2); white-space: nowrap; }
.ver-todo:hover { color: var(--texto); }
@media (min-width: 900px) { .fila-enc h2, .sec-t { font-size: 26px; } }
@media (max-width: 599px) {
  .fila-enc h2, .sec-t { display: flex; position: static; padding-left: 0; font-size: 21px; line-height: 1.2; }
  .fila-enc h2::before, .sec-t::before { position: static; height: 15px; }
  .ver-todo { font-size: 14px; padding: 6px 0; }
}
@media (max-width: 380px) { .sec-enc .ver-todo { display: inline; } }
.fila-pista, .vitrina { padding-top: 14px; }
.fila-flechas button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: var(--texto); }
.fila-flechas button:hover { background: rgba(255, 255, 255, .14); }

/* ---------- Al aire hoy: la imagen manda ---------- */
.cover { background: var(--fondo); border-bottom: 0; }
.hero { background: none; padding: 20px 0 0; }
.hero::before, .hero-fondo { display: none; }
.hero .al-aire-medio { border-radius: var(--radio-g); box-shadow: none; }
.al-aire-medio .dur, .mini .dur { border: 0; border-radius: 6px; background: rgba(0, 0, 0, .72); font: 600 12px/1.2 var(--f-texto); padding: 3px 7px; }
.btn-play-grande { width: 64px; height: 64px; background: rgba(0, 18, 31, .72); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); backdrop-filter: blur(6px); }
.btn-play-grande:hover { background: var(--acento); color: var(--tinta-marca); }
.kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0; background: none; clip-path: none; color: var(--acento); font: 600 13px/1 var(--f-texto); letter-spacing: .01em; text-transform: none; }
.kicker .punto-vivo { width: 8px; height: 8px; background: var(--acento); }
.hero-prog { display: inline-block; padding: 0; background: none; clip-path: none; color: var(--texto-2); font: 600 15px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; }
.hero-prog:hover { background: none; color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.hero-tit { margin: 6px 0 0; padding: 0; background: none; border: 0; font: 800 clamp(26px, 3.4vw, 40px)/1.12 var(--f-titulo); letter-spacing: -.02em; text-transform: none; }
.hero-meta { display: block; margin: 10px 0 0; padding: 0; background: none; color: var(--texto-3); font: 400 14px/1.4 var(--f-texto); }
.hero-info .acciones { margin-top: 20px; }
@media (min-width: 900px) { .hero { padding-top: 32px; } .hero-in { gap: 44px; } }
.estrenos { margin-top: 20px; }
.estrenos-t { font: 600 13px/1 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.estrenos-t .ico { color: var(--texto-3); width: 16px; height: 16px; }
.estrenos li a { border: 0; border-radius: var(--radio-c); background: var(--superficie); padding: 8px 14px; }
.estrenos li a:hover { background: var(--superficie-2); }
.estrenos b { font: 700 18px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto); }
.estrenos em { font: 500 11px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.estrenos span { font-weight: 600; font-size: 14px; }

/* ---------- Botones y etiquetas: chicos, sólidos, sin gritar ---------- */
.btn { min-height: 44px; padding: 0 18px; border-radius: var(--radio-c); font: 600 15px/1 var(--f-texto); font-style: normal; text-transform: none; letter-spacing: 0; box-shadow: none; }
.btn-prim { background: var(--secundario); color: var(--tinta-marca); }
.btn-prim:hover { background: color-mix(in srgb, var(--secundario) 88%, white); color: var(--tinta-marca); }
.btn-sec { background: rgba(255, 255, 255, .08); color: var(--texto); box-shadow: none; border: 0; }
.btn-sec:hover { background: rgba(255, 255, 255, .14); color: var(--texto); }
.btn-peligro { background: rgba(253, 230, 138, .14); color: #FDE68A; }
.et { height: 20px; padding: 0 7px; border-radius: 5px; clip-path: none; font: 700 11px/1 var(--f-texto); letter-spacing: .03em; text-transform: uppercase; }
.et-nuevo, .et-estreno { background: var(--acento); color: var(--tinta-marca); }
.enlace, .fan-lead a, .fan-alt a, .ayuda a { color: var(--acento); }
.sobre { font: 600 13px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.punto-vivo { animation-duration: 2.4s; }
@media (prefers-reduced-motion: reduce) { .punto-vivo { animation: none; } }

/* ---------- Tarjetas de contenido: imagen + texto, sin marco ---------- */
.mini, .mini-v, .vp-img, .tn-img, .tarj-prog-img, .ce-img { border-radius: var(--radio); border: 0; background: var(--superficie); }
.tarj-ep:hover .mini, .tarj-short:hover .mini-v, .tarj-nota:hover .tn-img { box-shadow: none; }
.mini img, .mini-v img, .tn-img img, .vp-img img, .ce-img img { transition: transform 280ms ease, filter 280ms ease; }
.tarj-ep:hover .mini img, .tarj-short:hover .mini-v img, .tarj-nota:hover .tn-img img, .vitrina-prog:hover .vp-img img, .ce:hover .ce-img img { transform: scale(1.025); filter: brightness(1.06); }
.tarj-tit, .tn-tit { font: 600 16px/1.4 var(--f-texto); letter-spacing: -.005em; text-transform: none; }
.tarj-short-tit { font: 600 15px/1.35 var(--f-texto); }
.tarj-ep:hover .tarj-tit, .tarj-nota:hover .tn-tit { color: var(--texto); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tarj-prog { font: 600 12px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.tarj-fecha, .tn-meta { font-size: 13px; color: var(--texto-3); }
.tn-dep { font: 600 12px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--acento); }
.mini-v-ico { background: rgba(0, 18, 31, .72); color: #fff; }
.tarj-prog-img { border: 0; }
.tarj-prog-ph { font: 800 22px/1.1 var(--f-titulo); text-transform: none; }
/* Vitrina de programas */
.vitrina-prog { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.vitrina-prog:hover { transform: none; box-shadow: none; }
.vp-img { border-radius: var(--radio-g); overflow: hidden; }
.vp-txt { border-top: 0; padding: 12px 2px 0; gap: 2px; }
.vp-nom { font: 800 20px/1.2 var(--f-titulo); text-transform: none; letter-spacing: -.015em; }
.vp-hora { color: var(--texto-2); font-size: 14px; font-weight: 500; }
.vp-pat { color: var(--texto-3); font-size: 13px; }
.vp-ver { display: none; }
/* Blog */
.tarj-nota.grande .tn-tit { font: 800 clamp(26px, 4.2vw, 40px)/1.12 var(--f-titulo); letter-spacing: -.02em; text-transform: none; }
.tarj-nota.grande .tn-img { box-shadow: none; }
.titulo-pag { font: 800 clamp(30px, 5vw, 44px)/1.1 var(--f-titulo); letter-spacing: -.02em; text-transform: none; }
.titulo-pag small { font-size: .45em; color: var(--texto-3); font-weight: 600; }
.filtros-blog a { border: 0; background: rgba(255, 255, 255, .06); font-weight: 600; font-size: 14px; min-height: 36px; padding: 0 14px; }
.filtros-blog a[aria-current] { background: var(--texto); color: var(--fondo); }
/* Nota */
.nota-enc h1 { font: 800 clamp(30px, 5.2vw, 48px)/1.1 var(--f-titulo); letter-spacing: -.022em; text-transform: none; text-wrap: balance; }
.nota-enc .sobre a { color: var(--acento); }
.nota-cuerpo { font-size: 18px; line-height: 1.75; color: #E3EEF1; }
.nota-cuerpo h2 { padding-left: 0; border-left: 0; font-size: clamp(22px, 3vw, 28px); }
.nota-cuerpo h3 { color: var(--texto); font-size: 21px; }
.nota-cuerpo blockquote { border-left: 3px solid var(--secundario); padding: 2px 0 2px 18px; font: 600 clamp(20px, 2.6vw, 24px)/1.45 var(--f-texto); text-transform: none; color: var(--texto); }
.nota-cuerpo li::marker { color: var(--texto-3); }
.nota-programa { border: 0; border-left: 0; background: var(--superficie); }
.nota-programa b { font: 800 22px/1.2 var(--f-titulo); text-transform: none; }
.nota-programa:hover b { color: var(--texto); text-decoration: underline; }
/* Programa */
.prog-enc h1 { font: 800 clamp(34px, 6vw, 60px)/1.05 var(--f-titulo); letter-spacing: -.025em; text-transform: none; }
.prog-enc::after { background: linear-gradient(180deg, rgba(0, 18, 31, 0) 0%, rgba(0, 18, 31, .55) 50%, var(--fondo) 100%), linear-gradient(90deg, rgba(0, 18, 31, .75), transparent 70%); }

/* ---------- Estados vacíos, de carga y de error ---------- */
.vacio { border: 0; background: none; padding: 24px 16px; }
.vacio h2 { font-size: 22px; }
.vacio p { color: var(--texto-3); }
.fan-cargando { color: var(--texto-3); }
.fan-cargando::after { content: ""; display: block; height: 3px; width: 120px; margin-top: 12px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25), transparent) 0 0 / 200% 100%; animation: cargando 1.2s linear infinite; }
@keyframes cargando { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fan-cargando::after { animation: none; } }
.msg-mal { background: rgba(253, 230, 138, .12); color: #FDE68A; }
.msg-ok { background: rgba(0, 240, 192, .1); }
.msg-av { background: rgba(255, 255, 255, .06); }
.msg-av a { color: var(--acento); }
.aviso-toast.mal { background: #FDE68A; }

/* ---------- Publicidad: clara, etiquetada y sin empujar el contenido ---------- */
.anuncio { margin: 36px auto; }
.anuncio-et { font: 500 11px/1 var(--f-texto); letter-spacing: .04em; color: var(--texto-3); margin-bottom: 8px; }
.anuncio-img { border-radius: var(--radio); background: var(--superficie); }
.anuncio.reservado:empty { display: block; position: relative; aspect-ratio: 970 / 250; max-width: min(970px, 100%); border-radius: var(--radio); background: var(--superficie); margin-top: calc(36px + 19px); }
.anuncio.reservado.en-envoltura:empty { max-width: min(970px, calc(100% - 2 * var(--gutter))); padding: 0; }
.anuncio.reservado:empty::before { content: "Publicidad"; position: absolute; left: 0; top: -19px; font: 500 11px/1 var(--f-texto); letter-spacing: .04em; color: var(--texto-3); }
@media (max-width: 640px) { .anuncio.reservado:empty { aspect-ratio: 640 / 200; } }
.anuncio-casa { border: 0; background: var(--superficie); min-height: 0; padding: 18px 20px; }
.anuncio-casa b { font: 800 20px/1.2 var(--f-titulo); text-transform: none; color: var(--texto); }
.anuncio-casa span { color: var(--texto-2); font-weight: 500; font-size: 15px; }
.anuncio-casa:hover span { color: var(--texto); }
.av-ir { background: var(--secundario); border-radius: var(--radio-c); font-weight: 700; }
.av-sonido.activo { background: var(--texto); color: var(--fondo); }
.preroll-play { background: #000; }
.preroll-play svg { background: rgba(255, 255, 255, .14); color: #fff; }
.preroll-play span { font: 700 20px/1.2 var(--f-texto); text-transform: none; }
/* «Presentado por»: patrocinio de datos deportivos */
.anuncio.pres { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; background: none; border: 0; min-height: 0; }
.pres-et { font: 500 11px/1 var(--f-texto); letter-spacing: .02em; text-transform: none; color: var(--texto-3); white-space: nowrap; }
.pres-logo { display: inline-flex; align-items: center; height: 26px; padding: 2px 6px; background: rgba(255, 255, 255, .05); border-left: 0; border-radius: 6px; }
.pres-logo img { max-height: 20px; max-width: 110px; width: auto; object-fit: contain; }
.sec-enc .anuncio.pres { margin-left: auto; margin-right: 12px; align-self: center; }
.pres-pag { margin: 4px 0 14px !important; }
.pres-reto { margin: 2px 0 10px !important; }
.pres-cin { flex: none; height: 100%; padding: 0 var(--gutter) 0 12px; background: var(--fondo); border-left: 1px solid var(--linea); }
.pres-cin .pres-logo { height: 24px; }
.pres-cin .pres-logo img { max-height: 18px; max-width: 90px; }
@media (max-width: 699px) { .pres-cin .pres-et { display: none; } .sec-enc .anuncio.pres { margin-right: 0; } }
.patrocinio { border-radius: var(--radio-c); }

/* ---------- Feed «Lo último» (2.5) ---------- */
.feed-portada { max-width: var(--ancho); margin: 48px auto 0; }
.feed-col { max-width: 640px; margin: 8px auto 0; padding: 0 var(--gutter); }
/* En pantallas anchas: el feed a la izquierda (alineado con el resto de la página) y los shorts como columna fija a la derecha */
@media (min-width: 1100px) {
  .feed-col { max-width: none; margin: 8px 0 0; display: grid; grid-template-columns: minmax(0, 680px) minmax(260px, 340px); column-gap: 64px; align-items: start; }
  .feed-col > * { grid-column: 1; }
  .feed-col > .repisa { grid-column: 2; grid-row: 1 / span 40; position: sticky; top: calc(var(--alto-enc) + 20px); padding-top: 20px; border-bottom: 0; }
  .feed-col > .repisa .repisa-pista { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 12px 0 0; padding: 0; gap: 16px 12px; }
  .feed-col > .repisa .tarj-short:nth-child(n+5) { display: none; }
}
.post { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.post:last-child { border-bottom: 0; }
.post-cab { display: flex; align-items: center; gap: 12px; }
.post-av { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto); font: 700 14px/1 var(--f-texto); }
.post-av.de-fan { background: color-mix(in srgb, var(--c1, #174659) 55%, var(--superficie)); }
.post-av img { width: 100%; height: 100%; object-fit: cover; }
.post-quien { margin: 0; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.post-quien b { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-quien b a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-ctx { color: var(--texto-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-ctx a:hover { color: var(--texto); }
.post-oficial { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 5px; background: rgba(0, 240, 192, .14); color: var(--acento); font-size: 11px; font-weight: 700; vertical-align: 1px; }
.post-pt { color: var(--texto-2); }
.post-cuerpo { display: grid; gap: 10px; margin-top: 12px; }
.post-medio { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--radio); overflow: hidden; background: var(--superficie); }
.post-muro .post-medio { margin-top: 12px; }
.post-medio img { width: 100%; height: 100%; object-fit: cover; transition: transform 280ms ease; }
.post-cuerpo:hover .post-medio img, a.post-medio:hover img { transform: scale(1.02); }
.post-play { position: absolute; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 18, 31, .72); color: #fff; backdrop-filter: blur(6px); }
.post-play .ico { width: 18px; height: 18px; margin-left: 2px; }
.post-dur { position: absolute; right: 10px; bottom: 10px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .72); font: 600 12px/1.2 var(--f-texto); font-variant-numeric: tabular-nums; }
.post-tit { font: 700 19px/1.3 var(--f-titulo); letter-spacing: -.01em; text-wrap: pretty; }
.post-cuerpo:hover .post-tit { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.post-res { color: var(--texto-2); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-texto { margin: 12px 0 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.post-acc { display: flex; gap: 4px; margin: 10px 0 0 -10px; }
.post-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--texto-3); font: 500 14px/1 var(--f-texto); cursor: pointer; font-variant-numeric: tabular-nums; }
.post-btn:hover { color: var(--texto); background: rgba(255, 255, 255, .05); }
.post-btn .ico { width: 20px; height: 20px; transition: transform 160ms ease; }
.post-btn.activo { color: var(--acento); }
.post-btn.activo .ico { fill: currentColor; }
.post-btn:active .ico { transform: scale(.88); }
@media (prefers-reduced-motion: reduce) { .post-btn .ico, .post-medio img { transition: none; } }
.post-btn:last-child { margin-left: auto; }
.repisa { padding: 20px 0; border-bottom: 1px solid var(--linea); }
.repisa-cab { display: flex; align-items: baseline; justify-content: space-between; }
.repisa-cab h3 { font: 700 17px/1.2 var(--f-titulo); }
.repisa-cab a { color: var(--texto-2); font-size: 14px; font-weight: 600; }
.repisa-cab a:hover { color: var(--texto); }
.repisa-pista { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 12px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; scroll-padding: 0 var(--gutter); scrollbar-width: none; }
.repisa-pista::-webkit-scrollbar { display: none; }
.repisa-pista > * { scroll-snap-align: start; }
.repisa .tarj-short-tit { font-size: 13px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; }
.anuncio.en-feed { margin: 20px 0; padding: 0; }
.anuncio.reservado.en-feed:empty { margin-top: 39px; }
@media (min-width: 640px) { .feed-portada .anuncio.en-feed .anuncio-img img { aspect-ratio: 640 / 200; } .anuncio.reservado.en-feed:empty { aspect-ratio: 640 / 200; } }

/* ---------- Marcadores: tarjetas tonales, el número manda ---------- */
.tp { gap: 0; padding: 12px 14px; border: 0; border-radius: var(--radio); background: var(--superficie); overflow: hidden; box-shadow: none; }
.tp:hover { border: 0; background: var(--superficie-2); }
.tp-liga { padding: 0 0 8px; border: 0; font: 500 12px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.tp-eq { grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; padding: 4px 0; font: 600 15px/1.25 var(--f-texto); }
.tp-eq .tp-col { width: 12px; height: 12px; border-radius: 50%; box-shadow: none; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.tp-eq .es-escudo { width: 18px; height: 18px; margin-left: 0; }
.tp-eq:has(.es-escudo) { grid-template-columns: 18px minmax(0, 1fr) auto; }
.tp-gol { font: 700 18px/1 var(--f-texto); font-variant-numeric: tabular-nums; min-width: 20px; color: var(--texto); }
.tp-eq.mio .tp-nom { color: var(--texto); text-decoration: underline; text-decoration-color: var(--acento); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tp:has(.gana) .tp-eq:not(.gana) .tp-nom, .tp:has(.gana) .tp-eq:not(.gana) .tp-gol { color: var(--texto-3); }
.tp-estado { padding: 8px 0 0; margin-top: 4px; background: none; border-top: 1px solid var(--linea); font: 500 12px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.tp.vivo { border: 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 40%, transparent); }
.tp.vivo .tp-estado { background: none; color: var(--acento); font-weight: 600; }
.tp.vivo .tp-estado .punto-vivo { width: 7px; height: 7px; background: var(--acento); }
.pista-tp { grid-auto-columns: minmax(196px, 220px); scrollbar-width: none; }
.pista-tp::-webkit-scrollbar { display: none; }
.marcadores-portada { padding-top: 8px; }
.marcadores-portada.seccion { margin-top: 24px; }
.grupo-tp h2 { font-size: 19px; }
.grupo-tp h2::before { content: ""; width: 4px; height: 15px; border-radius: 2px; background: var(--secundario); transform: none; }

/* ---------- Tablas de posiciones ---------- */
.tabla-env-pub, .goleadores { border: 0; border-radius: var(--radio); background: var(--superficie); }
.tabla-pos { font-size: 14px; }
.tabla-pos th { font: 600 11px/1 var(--f-texto); letter-spacing: .03em; text-transform: uppercase; color: var(--texto-3); padding: 12px 8px; border-bottom: 1px solid var(--linea); }
.tabla-pos td { padding: 10px 8px; border-bottom: 1px solid var(--linea); }
.tabla-pos tr:last-child td { border-bottom: 0; }
.tabla-pos td:first-child { font: 600 14px/1 var(--f-texto); color: var(--texto-3); }
.tabla-pos tr:nth-child(-n+8) td:first-child { color: var(--texto-2); font-weight: 600; }
.tabla-pos td:last-child { font: 700 15px/1 var(--f-texto); color: var(--texto); }
.tabla-pos td.t-eq a { font-weight: 600; }
.tabla-pos tr:hover td { background: rgba(255, 255, 255, .025); }
.tabla-pos tr.mio td { background: rgba(0, 240, 192, .07); }
.tabla-pos tr.mio td:first-child { box-shadow: inset 2px 0 0 var(--acento); }
.tabla-pos tr.mio td.t-eq a { color: var(--texto); }
.tabla-pos .tp-col { width: 10px; height: 10px; border-radius: 50%; transform: none; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.sub-tabla { font-size: 18px; }
.goleadores { padding: 16px; }
.goleadores h2, .goleadores h3 { font: 700 17px/1.2 var(--f-titulo); text-transform: none; padding-bottom: 0; border-bottom: 0; margin-bottom: 12px; }
.goleadores li::before { font: 600 14px/1 var(--f-texto); color: var(--texto-3); }
.goleadores li span { font-weight: 600; }
.goleadores li b { font: 700 17px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto); }

/* ---------- Pestañas: segmentos discretos ---------- */
.fan-tabs { border-radius: var(--radio-c); padding: 3px; gap: 2px; background: rgba(255, 255, 255, .05); box-shadow: none; }
.fan-tabs a, .fan-tabs button { min-height: 36px; padding: 0 14px; border-radius: 8px; font: 600 14px/1 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-2); }
.fan-tabs a[aria-current], .fan-tabs button[aria-selected="true"], .centro-tabs button[aria-selected="true"] { background: var(--superficie-2); color: var(--texto); }

/* ---------- El fan: cuenta, formularios y comunidad ---------- */
.fan-pag { padding-top: 24px; }
.fan-caja { border: 0; background: var(--superficie); border-radius: var(--radio-g); }
.fan-caja h2, .fan-sec h2 { font-size: clamp(22px, 3vw, 28px); }
.fan-sec h2 small, .com-cab small { color: var(--texto-3); font-weight: 600; }
.fan-form input, .fan-form select, .fan-form textarea, .fan-filtros select, .com-form textarea, .com-form input, .chat-form input, .sel-eq-buscar, .q-marcador input {
  border-radius: var(--radio-c); border: 1px solid var(--borde); background: var(--fondo-2); }
.fan-form input:focus, .fan-form select:focus, textarea:focus, .chat-form input:focus, .sel-eq-buscar:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.sel-eq-op { border-radius: var(--radio-c); border: 0; background: var(--superficie); }
.sel-eq-op.activo { box-shadow: inset 0 0 0 1.5px var(--acento); background: var(--superficie-2); }
.tarjeta-fan { border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 18px 40px rgba(0, 0, 0, .35); }
.tarjeta-fan.nivel-fiel { box-shadow: 0 0 0 1.5px #C9D3DA, 0 18px 40px rgba(0, 0, 0, .35); }
.tarjeta-fan.nivel-hincha, .tarjeta-fan.nivel-inmortal { box-shadow: 0 0 0 1.5px #E8C35A, 0 18px 40px rgba(0, 0, 0, .35); }
.tf-nombre { font-weight: 800; text-transform: none; }
.tf-num { color: var(--texto); }
.tf-barra span { background: var(--acento); }
.insignias li { border: 0; border-radius: var(--radio); background: var(--superficie); }
.chip-eq { background: rgba(255, 255, 255, .06); font-weight: 600; }
.tag-emb { background: rgba(212, 240, 0, .16); color: var(--secundario); }
.tag-oficial { background: rgba(0, 240, 192, .14); color: var(--acento); }
.grupos a, .partidos li, .lista-fans li, .com-lista li, .te-eq, .te-item, .q-partido { border: 0; border-radius: var(--radio); }
.grupos a { background: var(--superficie); }
.partidos li.vivo { box-shadow: inset 2px 0 0 var(--acento); }
.partidos li.vivo small { color: var(--acento); }
ol.lista-fans li::before { color: var(--texto-3); font-weight: 600; }
.com-lista { gap: 0; }
.com-lista li { background: none; padding: 14px 0; border-bottom: 1px solid var(--linea); border-radius: 0; }
.com-lista li:last-child { border-bottom: 0; }
.com-cab h2 { font-size: 22px; }
.com-img, .com-yt img { border-radius: var(--radio); }
.js-like.activo, .slide-btn.activo { color: var(--acento); }
.chat-lista { border: 0; background: var(--superficie); border-radius: var(--radio); }
.chat-lista b { filter: none; color: var(--texto); }
.otros-liga { border: 0; background: var(--superficie); border-radius: var(--radio-c); }
.hoja-in { border-radius: 18px 18px 0 0; }
/* Tira de tu equipo */
.tira-equipo { background: none; border: 0; border-bottom: 1px solid var(--linea); box-shadow: inset 0 2px 0 var(--c1); }
.te-eq, .te-item { background: var(--superficie); min-height: 52px; padding: 9px 14px; }
.te-item small { font: 600 12px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.te-item b { font-weight: 600; }
.te-vivo { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento) 45%, transparent); }
.te-vivo small { color: var(--acento) !important; }
.te-otro small { color: var(--texto-3); }
.te-color { width: 22px; height: 22px; }
.cont-eq .ce-tipo { background: rgba(0, 18, 31, .78); color: var(--texto); font-weight: 600; letter-spacing: 0; text-transform: none; }
.para-ti .cont-eq { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 250px); overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
/* Quinielas y retos */
.quiniela, .reto, .ficha { border: 0; background: var(--superficie); border-radius: var(--radio-g); }
.q-cab h2, .reto h2 { font-size: clamp(22px, 3.4vw, 30px); }
.q-estado b { color: var(--texto); }
.q-partido { background: var(--fondo-2); }
.q-op { border: 0; border-radius: var(--radio-c); background: rgba(255, 255, 255, .06); font-weight: 600; }
.q-op.activo { background: var(--texto); color: var(--fondo); }
.q-pts.bien { color: var(--acento); }
.reto.destacado { border: 0; box-shadow: inset 0 0 0 1px rgba(212, 240, 0, .35); }
.r-barra { border-radius: var(--radio-c); height: 44px; font-weight: 700; }
.r-op { border: 0; border-radius: var(--radio-c); background: rgba(255, 255, 255, .05); font-weight: 600; }
.r-op.activo { box-shadow: inset 0 0 0 1.5px var(--acento); }
.r-op-p { color: var(--texto); }
.r-op-b { background: rgba(255, 255, 255, .08); }
.r-hecho { color: var(--acento); }
/* Equipo y partido */
.eq-enc { border: 0; border-radius: var(--radio-g); background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 55%, var(--fondo)), var(--fondo) 75%); box-shadow: inset 4px 0 0 var(--c2); }
.eq-enc h1 { font: 800 clamp(32px, 6vw, 52px)/1.05 var(--f-titulo); letter-spacing: -.02em; text-transform: none; }
.eq-tabla b { color: var(--texto); }
.eq-tabla a, .enlace-mas { color: var(--acento); }
.ficha { padding: 0; overflow: hidden; }
.ficha-eq { gap: 0; align-items: stretch; }
.fe { display: grid; place-items: center; padding: 22px 12px; border-radius: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 20%, var(--superficie)), var(--superficie)); border-top: 3px solid var(--c1);
  color: var(--texto); font: 800 clamp(18px, 3.6vw, 30px)/1.1 var(--f-titulo); letter-spacing: -.015em; text-transform: none; overflow-wrap: normal; }
.fe:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 4px; }
.ficha-mar { display: grid; place-content: center; padding: 14px clamp(12px, 3vw, 32px); background: var(--fondo-2); text-align: center; }
.ficha-mar b { font: 800 clamp(36px, 7vw, 60px)/1 var(--f-titulo); font-variant-numeric: tabular-nums; color: var(--texto); letter-spacing: -.02em; }
.ficha-mar small { margin-top: 8px; padding: 0; background: none; font: 500 13px/1.2 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.ficha .fan-acciones { padding: 14px; margin: 0; border-top: 1px solid var(--linea); }
.fan-pag > .fan-lead:first-child, .ficha { margin-top: 16px; }
/* Centro del partido */
.centro { margin: 18px 0 8px; }
.centro-tabs { margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.centro-tabs button { flex: none; white-space: nowrap; background: none; border: 0; color: var(--texto-2); padding: 0 14px; cursor: pointer; }
.centro-panel[hidden] { display: none; }
.ev-lista { list-style: none; margin: 0; padding: 0; border-left: 0; text-align: left; }
.ev { display: grid; grid-template-columns: 44px 16px 1fr; gap: 12px; align-items: start; padding: 10px 0; position: relative; }
.ev + .ev { border-top: 1px solid var(--linea); }
.ev-min { font: 600 15px/1.3 var(--f-texto); font-variant-numeric: tabular-nums; text-align: right; color: var(--texto-2); }
.ev-ico { width: 10px; height: 14px; margin-top: 3px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
.ev-gol .ev-ico, .ev-penal .ev-ico, .ev-autogol .ev-ico { background: var(--texto); width: 14px; height: 14px; border-radius: 50%; }
.ev-amarilla .ev-ico { background: #F5D000; }
.ev-roja .ev-ico { background: #E5484D; }
.ev-cambio .ev-ico { background: var(--acento); clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%); }
.ev-txt { text-align: left; }
.ev-txt em { display: block; font: 500 12px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; font-style: normal; color: var(--texto-3); margin-bottom: 2px; }
.ev-gol .ev-txt, .ev-penal .ev-txt { font-weight: 600; color: var(--texto); }
.ev-txt small { color: var(--texto-3); }
.al-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.al-eq { background: var(--superficie); padding: 14px; border-top: 0; border-radius: var(--radio); }
.al-eq h3 { margin: 0 0 8px; font: 700 17px/1.2 var(--f-titulo); text-transform: none; }
.al-eq h3 small { color: var(--texto-3); font-size: 13px; font-weight: 500; }
.al-eq ol { list-style: none; margin: 0; padding: 0; }
.al-eq li { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linea); font-size: 14px; }
.al-eq li:last-child { border-bottom: 0; }
.al-eq li b { min-width: 22px; text-align: right; font: 600 14px/1.3 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto-3); }
.al-eq li small { margin-left: auto; color: var(--texto-3); }
.al-banca { margin: 10px 0 0; font-size: 13px; color: var(--texto-2); }
.est-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.est-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: var(--texto-2); }
.est-cab b { font: 700 16px/1 var(--f-texto); font-variant-numeric: tabular-nums; color: var(--texto); }
.est-barra { display: flex; gap: 3px; height: 6px; margin-top: 6px; }
.est-barra i { display: block; min-width: 2px; border-radius: 2px; }
@media (max-width: 599px) { .al-dos { grid-template-columns: 1fr; } }
/* Avisos al celular */
.push-ok, .push-nota { border-radius: var(--radio-c); }
.push-nota { background: rgba(255, 255, 255, .05); }

/* ---------- Buscador ---------- */
.enc-buscar { margin-left: auto; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.enc-buscar .ico, .enc-buscar svg { width: 21px; height: 21px; }
.enc-buscar + .enc-fan { margin-left: 0; }
@media (max-width: 599px) { .enc-buscar { display: none; } .enc-buscar + .enc-fan { margin-left: auto; } }
.buscador { display: flex; gap: 8px; margin: 6px 0 18px; max-width: 720px; }
.buscador input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border-radius: var(--radio-c); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); font: 500 17px var(--f-texto); }
.buscador input:focus { outline: 2px solid var(--acento); outline-offset: 0; border-color: transparent; }
.buscador .btn { height: 48px; }
.seccion-b { margin: 22px 0 30px; }
.res-eqs { display: flex; flex-wrap: wrap; gap: 8px; }
.res-eq { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--superficie); border: 0; border-radius: var(--radio-c); color: var(--texto); }
.res-eq:hover { background: var(--superficie-2); text-decoration: none; }
.res-eq b { font: 600 16px/1.2 var(--f-texto); text-transform: none; }
.res-eq small { color: var(--texto-3); }
.res-eq .tp-col { width: 12px; height: 12px; border-radius: 50%; transform: none; background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%); }
.rejilla-eps, .rejilla-shorts { display: grid; gap: 24px 16px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.rejilla-shorts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* ---------- Anúnciate ---------- */
.ads-hero { background: none; border-bottom: 1px solid var(--linea); }
.ads-hero h1 { font: 800 clamp(32px, 6vw, 56px)/1.05 var(--f-titulo); letter-spacing: -.025em; text-transform: none; }
.ads-hero .sobre { color: var(--texto-3); }
.ads-card { border: 0; border-top: 0; background: var(--superficie); border-radius: var(--radio-g); }
.ads-card h3 { font-size: 20px; }
.ads-ico { background: rgba(255, 255, 255, .07); color: var(--texto); border-radius: var(--radio-c); }
.ads-progs a, .ads-pasos li { border: 0; background: var(--superficie); border-radius: var(--radio); }
.ads-progs b { font: 700 18px/1.2 var(--f-titulo); text-transform: none; }
.ads-progs span { color: var(--texto-3); }
.ads-pasos li::before { font: 700 28px/1 var(--f-titulo); color: var(--texto-3); }
.ads-cta { background: var(--superficie); color: var(--texto); border-radius: var(--radio-g); }
.ads-cta .btn-sec { background: var(--secundario); color: var(--tinta-marca); }

/* ---------- Barra de abajo (celular) y pie ---------- */
.nav-inf { background: color-mix(in srgb, var(--fondo) 95%, transparent); border-top: 1px solid var(--linea); }
.nav-inf a { color: var(--texto-3); font: 500 11px/1.2 var(--f-texto); letter-spacing: 0; }
.nav-inf a[aria-current] { color: var(--texto); }
.nav-inf a[aria-current]::before { display: none; }
.nav-inf a[aria-current] .ico { color: var(--texto); }
.nav-inf .ni-shorts .ico, .nav-inf .ni-shorts[aria-current] .ico { width: 22px; height: 22px; padding: 0; border-radius: 0; background: none; color: inherit; }
.pie { background: var(--fondo); border-top: 1px solid var(--linea); padding-top: 0; }
.pie-redes a { color: var(--texto-2); }
.pie-redes a:hover { color: var(--texto); }
.pat-et { font: 500 12px/1.3 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.patrocinio { border: 0; background: rgba(255, 255, 255, .05); }

/* =====================================================================
   2.5.1 · AJUSTES DE DIRECCIÓN DE ARTE
   Firma propia (sellos de estado y números de marcador), más contraste tipográfico, un solo encabezado.
   ===================================================================== */
html { background: var(--fondo); }
/* Un solo bloque de encabezado: la barra de deportes sale (los filtros por deporte siguen en Shorts) */
.barra-dep { display: none; }

/* Títulos de sección: pleca en línea con el texto (sin espacios dobles) y más tamaño */
.fila-enc h2, .sec-t { display: block; font-size: 23px; line-height: 1.15; letter-spacing: -.02em; }
.fila-enc h2::before, .sec-t::before { display: inline-block; vertical-align: -.04em; width: 4px; height: .78em; margin-right: 10px; }
@media (min-width: 900px) { .fila-enc h2, .sec-t { font-size: 32px; } }
@media (max-width: 599px) { .fila-enc h2, .sec-t { display: block; font-size: 23px; } .fila-enc h2::before, .sec-t::before { height: .78em; } }
.grupo-tp h2 { display: flex; }

/* Escala con más contraste: portada y titulares grandes, tarjetas compactas */
.hero-tit { font-size: clamp(30px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.titulo-pag { font-size: clamp(36px, 6vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.post-tit { font-size: 20px; line-height: 1.25; letter-spacing: -.015em; }
@media (min-width: 900px) { .post-tit { font-size: 23px; } .vp-nom { font-size: 23px; } }
.tarj-tit, .tn-tit { font-size: 15px; line-height: 1.38; }

/* Firma 1 · Sellos de estado: cápsula «En vivo» (cian) y «Al aire» (lima). Siempre la misma forma. */
.kicker, .tp.vivo .tp-estado, .cintillo.en-vivo .cin-etq, .te-vivo small, .partidos li.vivo small {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 9px 4px 8px; border-radius: 999px;
  font: 700 11px/1 var(--f-texto); letter-spacing: .07em; text-transform: uppercase; }
.kicker { background: rgba(212, 240, 0, .14); color: var(--secundario); margin-bottom: 14px; }
.kicker .punto-vivo { background: var(--secundario); width: 6px; height: 6px; }
.tp.vivo .tp-estado, .te-vivo small, .partidos li.vivo small { background: rgba(0, 240, 192, .14); color: var(--acento) !important; }
.tp.vivo .tp-estado { margin-top: 8px; border-top: 0; }
.cintillo.en-vivo .cin-etq { margin: 6px 10px 6px var(--gutter); padding-right: 10px; background: rgba(0, 240, 192, .14); box-shadow: none; }
.tp.vivo { box-shadow: none; }

/* Firma 2 · Los números mandan: marcadores en Inter Display, como en pantalla */
.tp-gol { font: 800 24px/1 var(--f-titulo); letter-spacing: -.02em; }
.tp-eq { padding: 5px 0; }
.cin-lista b { font: 800 15px/1 var(--f-titulo); }
.tabla-pos td:last-child { font: 800 17px/1 var(--f-titulo); }
.goleadores li b { font: 800 20px/1 var(--f-titulo); }
.estrenos b { font: 800 20px/1 var(--f-titulo); letter-spacing: -.01em; }
.ficha-mar b { font-size: clamp(44px, 8vw, 76px); letter-spacing: -.03em; }

/* Avatares del feed: la marca con su ícono, los programas con su imagen */
.post-av.es-marca { background: var(--superficie); }
.post-av.es-marca img { object-fit: contain; }
.post-av.de-prog img { object-fit: cover; }

/* Vitrina de programas: el sello del patrocinador viaja en la tarjeta */
.vp-enlace { display: block; }
.vitrina-prog:hover .vp-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* «Presentado por» del programa: el mismo sello discreto que el de los datos deportivos */
.patrocinio { gap: 8px; min-height: 0; padding: 0; background: none; border: 0; border-radius: 0; margin-top: 14px; }
.patrocinio:hover { background: none; }
.patrocinio:hover .pat-logo { background: rgba(255, 255, 255, .1); }
.pat-et { font: 500 11px/1 var(--f-texto); letter-spacing: .02em; text-transform: none; color: var(--texto-3); white-space: nowrap; }
.pat-logo { display: inline-flex; align-items: center; height: 28px; padding: 3px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.pat-logo img { height: 20px; max-width: 110px; }
.pat-logo b { font-size: 13px; }
.patrocinio.en-fila { margin: 0; }
.patrocinio.en-vitrina { margin: 10px 2px 0; }

/* Página Programas: una sola proporción y tarjetas sin cajas con texto */
.rejilla-prog { gap: 28px 18px; }
.rejilla-prog.horizontal { grid-template-columns: 1fr; }
@media (min-width: 640px) { .rejilla-prog.horizontal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rejilla-prog.horizontal { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rejilla-prog.horizontal .tarj-prog-img { aspect-ratio: 16 / 9; }
.rejilla-prog .tarj-prog { font: 400 14px/1.4 var(--f-texto); letter-spacing: 0; text-transform: none; color: var(--texto); margin: 0; }
.rejilla-prog .tarj-prog-img { border: 0; border-radius: var(--radio-g); background: var(--superficie); }
.tarj-prog-ph { place-items: end start; text-align: left; padding: 18px; font: 800 24px/1.1 var(--f-titulo); letter-spacing: -.02em; text-transform: none; color: var(--texto-2);
  background: radial-gradient(120% 90% at 100% 0%, var(--superficie-2), var(--superficie)); }
.tarj-prog-nom { margin-top: 12px; font: 800 22px/1.2 var(--f-titulo); letter-spacing: -.015em; }
.tarj-prog-hora, .tarj-prog-pat { font-size: 14px; color: var(--texto-3); }
.tarj-prog:hover .tarj-prog-nom { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* Partido: el reto sin recuadro lima, chat vacío con mensaje en lugar de una caja grande */
.reto.destacado { box-shadow: none; }
.chat-lista { border: 0; }
.chat-lista:empty { height: 140px; justify-content: center; align-items: center; }
.chat-lista:empty::before { content: attr(data-vacio); color: var(--texto-3); font-size: 14px; text-align: center; padding: 0 16px; }
.r-barra span { text-shadow: none; font-weight: 700; }
/* Márgenes: la vitrina arranca en el margen (no pegada a la orilla) y las tablas se alinean con su título */
.vitrina { scroll-padding-inline: var(--gutter); }
.tablas-portada { padding: 14px var(--gutter) 0; }

/* ===================== 2.7 · Editorial, firma de autor y «Administración» ===================== */
.sub-pag { color: var(--texto-2); margin: -8px 0 22px; max-width: 62ch; }
.sub-pag.chico { font-size: 14px; margin-top: 24px; }
.sub-pag a, .autor-redes a, .ca-redes a { color: var(--acento); text-decoration: underline; text-underline-offset: 3px; }
.autor-av { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: var(--superficie-2); }
.autor-av.chico { width: 28px; height: 28px; }
.autor-av.grande { width: 96px; height: 96px; }
.autor-ini { display: inline-grid; place-items: center; font: 700 16px/1 var(--f-titulo); color: var(--texto); letter-spacing: .02em; }
.autor-av.chico.autor-ini { font-size: 11px; }
.autor-av.grande.autor-ini { font-size: 32px; }
.firma { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
.firma:hover b, .firma:focus-visible b { color: var(--acento); }
.caja-autor { display: flex; gap: 16px; align-items: flex-start; margin: 32px 0 8px; padding: 18px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.caja-autor .sobre { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.ca-nombre { display: block; font: 700 22px/1.15 var(--f-titulo); margin: 2px 0 6px; }
.ca-bio { margin: 0 0 8px; color: var(--texto-2); font-size: 15px; }
.ca-redes { margin: 0 0 8px; font-size: 14px; }
.fila-autores { display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 18px; scroll-padding: 0 var(--gutter); }
.tarj-autor { display: grid; justify-items: center; gap: 6px; min-width: 120px; padding: 14px 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); text-align: center; }
.tarj-autor b { font-size: 15px; line-height: 1.2; }
.tarj-autor span { font-size: 13px; color: var(--texto-3); }
.tarj-autor:hover, .tarj-autor:focus-visible { border-color: var(--acento); }
.autor-enc { display: flex; gap: 20px; align-items: center; margin: 28px 0 24px; flex-wrap: wrap; }
.autor-enc h1 { font: 800 clamp(30px, 6vw, 52px)/1.05 var(--f-titulo); margin: 2px 0 8px; letter-spacing: -.02em; }
.autor-enc .sobre { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.autor-bio { margin: 0 0 8px; color: var(--texto-2); max-width: 60ch; }
.autor-redes, .autor-cuenta { margin: 0 0 4px; font-size: 14px; color: var(--texto-3); }
.aviso-vista { position: sticky; top: 0; z-index: 30; padding: 10px var(--gutter); background: var(--secundario); color: var(--tinta-marca); font-size: 14px; text-align: center; }
.acceso .puertas { display: grid; gap: 14px; margin-top: 8px; }
@media (min-width: 900px) { .acceso .puertas { grid-template-columns: repeat(3, 1fr); } }
.puerta { padding: 20px; border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); display: flex; flex-direction: column; gap: 8px; }
.puerta h2 { margin: 0; font: 700 24px/1.1 var(--f-titulo); }
.puerta p { margin: 0 0 8px; color: var(--texto-2); flex: 1; }
.puerta .btn { align-self: flex-start; }
.ca-cargo, .autor-cargo { margin: -2px 0 8px; font-size: 14px; color: var(--acento); font-weight: 600; }
.aviso-vista a { color: inherit; text-decoration: underline; margin-left: 6px; }
.nota .caja-autor p, .caja-autor p { margin: 0 0 6px; line-height: 1.45; }
.nota .caja-autor .ca-cargo { margin: -2px 0 8px; }
.nota .caja-autor .ver-todo { display: inline-block; margin-top: 2px; }

/* ===================== 2.7 · fase 2: deportes, comunidad, Lo mío ===================== */
.btn-seguir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--acento); background: transparent; color: var(--acento); font: 600 14px/1 var(--f-texto); cursor: pointer; }
.btn-seguir svg { width: 16px; height: 16px; }
.btn-seguir .no { display: none; } .btn-seguir[aria-pressed="true"] .si { display: none; } .btn-seguir[aria-pressed="true"] .no { display: inline-flex; align-items: center; gap: 6px; }
.btn-seguir .si { display: inline-flex; align-items: center; gap: 6px; }
.btn-seguir[aria-pressed="true"] { background: var(--acento); color: var(--tinta-marca); }
.btn-seguir[aria-pressed="true"] svg { fill: currentColor; }
.chip-seguir { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font: 600 14px/1 var(--f-texto); cursor: pointer; }
.chip-seguir[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: var(--tinta-marca); }
.chip-seguir[aria-pressed="true"]::before { content: "✓ "; }
.btn-seguir:focus-visible, .chip-seguir:focus-visible { outline: 3px solid var(--secundario); outline-offset: 2px; }
.chips-ligas, .chips-eq { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.ayuda-pub { margin: 12px 0 6px; font-size: 13px; color: var(--texto-3); }
.elegir-eq summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--acento); font-weight: 600; }
.comp-enc { margin: 16px 0 4px; }
.comp-enc .sobre a, .jugador .sobre a { color: var(--texto-2); }
.comp-tit { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.comp-tit .titulo-pag { margin: 0; }
.comp-tabs { margin: 12px 0 8px; }
.aviso-datos { margin: 10px 0; padding: 10px 14px; border-radius: var(--radio); background: var(--superficie); border-left: 3px solid var(--texto-3); color: var(--texto-2); font-size: 14px; }
.aviso-retrasado, .aviso-api-caida { border-left-color: var(--secundario); }
.aviso-pospuesto, .aviso-suspendido, .aviso-cancelado { border-left-color: var(--secundario); color: var(--texto); }
.jornadas { overflow-x: auto; margin: 8px calc(var(--gutter) * -1) 4px; padding: 0 var(--gutter); scroll-padding: 0 var(--gutter); }
.jornadas-in { display: flex; gap: 6px; width: max-content; }
.jornadas a { min-width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0 10px; border-radius: 10px; background: var(--superficie); color: var(--texto-2); font-weight: 600; }
.jornadas a[aria-current] { background: var(--secundario); color: var(--tinta-marca); }
.rejilla-comp { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.tarj-comp { display: grid; gap: 4px; padding: 16px; border-radius: var(--radio); background: var(--superficie); border: 1px solid var(--borde); color: var(--texto); }
.tarj-comp b { font: 800 24px/1.05 var(--f-titulo); }
.tarj-comp:hover, .tarj-comp:focus-visible { border-color: var(--acento); }
.tc-pais { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3); }
.tc-prox { font-size: 13px; color: var(--texto-2); }
.tc-vivo { font-size: 13px; color: var(--acento); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.rejilla-est { display: grid; gap: 16px; }
@media (min-width: 900px) { .rejilla-est { grid-template-columns: repeat(3, 1fr); } }
.lista-jug { list-style: none; margin: 0; padding: 0; counter-reset: j; }
.lista-jug li { counter-increment: j; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.lista-jug li > span { display: grid; gap: 2px; min-width: 0; }
.lista-jug li > span::before { content: counter(j) "."; color: var(--texto-3); font-size: 12px; }
.lista-jug a { color: var(--texto); font-weight: 600; }
.lista-jug small { color: var(--texto-3); font-size: 13px; }
.lista-jug b { font: 800 22px/1 var(--f-titulo); color: var(--acento); }
.kpis-pub { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0; }
@media (min-width: 760px) { .kpis-pub { grid-template-columns: repeat(6, 1fr); } }
.kpis-pub div { padding: 12px; border-radius: var(--radio); background: var(--superficie); display: grid; gap: 2px; }
.kpis-pub b { font: 800 28px/1 var(--f-titulo); }
.kpis-pub span { font-size: 12px; color: var(--texto-3); }
.rejilla-miseq { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.mi-eq { padding: 14px; border-radius: var(--radio); background: var(--superficie); border-top: 4px solid var(--c1); display: grid; gap: 6px; }
.me-nom { display: flex; align-items: center; gap: 8px; color: var(--texto); font: 800 20px/1.1 var(--f-titulo); }
.me-lug { margin: 0; color: var(--texto-2); font-size: 14px; }
.me-linea { display: block; color: var(--texto); font-size: 14px; padding: 6px 0; border-top: 1px solid var(--borde); }
.me-linea small { color: var(--texto-3); }
.clasico { padding: 20px; border-radius: var(--radio-g); background: linear-gradient(135deg, var(--superficie-2), var(--superficie)); border: 1px solid var(--borde); }
.clasico h2 { margin: 4px 0; font: 800 clamp(28px, 6vw, 44px)/1 var(--f-titulo); }
.cla-q { color: var(--texto-2); margin: 6px 0 12px; }
.cla-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.btn-apoyo { background: var(--superficie-2); color: var(--texto); border: 2px solid var(--c1, var(--acento)); }
.btn-apoyo:hover { background: var(--c1, var(--acento)); }
.feed-mas { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; }
.prediccion .pred-mar { display: flex; align-items: flex-end; gap: 12px; margin: 8px 0; }
.pred-mar label { display: grid; gap: 4px; justify-items: center; font-weight: 600; }
.pred-mar input { width: 76px; height: 64px; text-align: center; font: 800 34px/1 var(--f-titulo); border-radius: var(--radio); border: 1px solid var(--borde); background: var(--fondo-2); color: var(--texto); }
.pred-mar b { font-size: 28px; padding-bottom: 14px; color: var(--texto-3); }
.pred-cierre { color: var(--texto-2); font-size: 14px; }
.pred-nac { display: grid; gap: 4px; margin: 8px 0; } .pred-nac small { color: var(--texto-3); }
.pred-res.bien, .lista-pred .bien small { color: var(--acento); font-weight: 700; }
.pred-res.mal { color: var(--texto-2); }
.lista-pred { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-pred a { display: flex; justify-content: space-between; gap: 10px; padding: 12px; border-radius: var(--radio); background: var(--superficie); color: var(--texto); }
.lista-pred small { color: var(--texto-3); }
.forma { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.forma span { display: flex; gap: 4px; }
.forma a { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; font-weight: 800; font-size: 13px; color: var(--tinta-marca); }
.forma-G { background: var(--acento); } .forma-E { background: var(--texto-3); } .forma-P { background: var(--superficie-2); color: var(--texto) !important; }
.historial-p { list-style: none; margin: 0; padding: 0; } .historial-p li { padding: 8px 0; border-bottom: 1px solid var(--borde); } .historial-p small { display: block; color: var(--texto-3); }
.ep-junto { margin: 12px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); overflow-x: auto; scroll-padding: 0 var(--gutter); }
.ep-junto-pista { display: flex; gap: 10px; width: max-content; }
.ep-junto-it { width: 220px; position: relative; }
.ep-junto-et { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--secundario); color: var(--tinta-marca); font-size: 12px; font-weight: 700; }
@media (min-width: 1000px) { .ep-junto { display: none; } }
.dos-col > .seccion { margin-left: 0; margin-right: 0; min-width: 0; }
.fan-pag .sec-enc { padding-left: 0; padding-right: 0; }
.fan-pag .pista-tp { margin: 0 calc(var(--gutter) * -1); }
.me-linea small:first-child { display: block; }