/*
 * apuesta.com.mx — home y reviews.
 * Estructura del home historico (tema "apuesta", captura 2026-09-21) con una capa
 * visual actual. Los colores de marca son los del :root original del tema.
 */
:root {
  /* Marca (tema original) */
  --green-mx: #006847;
  --green-mx-dark: #084c35;
  --green-btn: #009b69;
  --green-glow: #00d18c;
  --red-mx: #ce1126;
  --gold: #bba056;
  --gold-soft: #d8c38a;
  --gray-green: #0b231e;
  --black-green: #081815;

  /* Superficies y texto */
  --bg: var(--black-green);
  --surface: rgb(255 255 255 / 0.04);
  --surface-2: rgb(255 255 255 / 0.07);
  --surface-solid: #0f2b25;
  --border: rgb(255 255 255 / 0.09);
  --border-strong: rgb(255 255 255 / 0.16);
  --text: #f1f1f1;
  --text-muted: #a9bab3;
  --rating: #f7d24a;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 12px 32px -12px rgb(0 0 0 / 0.6);
  --shadow-lift: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 24px 48px -16px rgb(0 0 0 / 0.7);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --header-h: 68px;
  --subnav-h: 52px;
  --gutter: 16px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--subnav-h) + 16px);
  -webkit-text-size-adjust: 100%;
  interpolate-size: allow-keywords;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Halo de marca fijo detras de todo el contenido */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 10% -10%, rgb(0 104 71 / 0.45), transparent 60%),
    radial-gradient(40rem 30rem at 100% 0%, rgb(187 160 86 / 0.12), transparent 60%),
    radial-gradient(50rem 40rem at 50% 120%, rgb(0 104 71 / 0.25), transparent 60%),
    var(--bg);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

.contenedor {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.salto {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--gold);
  color: var(--black-green);
  font-weight: 700;
}

.salto:focus {
  top: 12px;
}

/* ---------- Header ---------- */

.navbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  background: rgb(8 24 21 / 0.72);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid var(--border);
}

.navbar .contenedor {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.navbar-logo img {
  height: 38px;
  width: auto;
}

.navbar nav {
  margin-left: auto;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s, background-color 0.2s;
}

.navbar-menu a:hover {
  color: var(--text);
  background: var(--surface-2);
}

.navbar-menu summary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s, background-color 0.2s;
}

.navbar-menu summary::-webkit-details-marker {
  display: none;
}

.navbar-menu summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s var(--ease);
}

.navbar-menu details[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.navbar-menu summary:hover,
.navbar-menu details[open] summary {
  color: var(--text);
  background: var(--surface-2);
}

.desplegable {
  position: relative;
}

.submenu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  gap: 0.15rem;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: rgb(10 30 26 / 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lift);
  animation: aparecer 0.2s var(--ease);
}

.submenu a {
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
}

.navbar-cta {
  flex: none;
}

.navbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.navbar-toggle span:not(.oculto) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.25s var(--ease), opacity 0.2s;
}

.navbar-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.navbar-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- Subnav con scroll-spy ---------- */

.subnav {
  position: fixed;
  top: var(--header-h);
  inset-inline: 0;
  z-index: 40;
  height: var(--subnav-h);
  background: rgb(8 24 21 / 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.subnav .contenedor {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.subnav .contenedor::-webkit-scrollbar {
  display: none;
}

.subnav a {
  flex: none;
  padding: 0.38rem 0.9rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.subnav a:hover {
  color: var(--text);
}

.subnav a[aria-current="true"] {
  color: var(--text);
  background: rgb(0 104 71 / 0.35);
  border-color: rgb(0 209 140 / 0.35);
}

main {
  padding-top: calc(var(--header-h) + var(--subnav-h));
}

/* ---------- Secciones ---------- */

.seccion {
  position: relative;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.seccion + .seccion {
  border-top: 1px solid var(--border);
}

.cabecera-seccion {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.cabecera-seccion > div {
  max-width: 720px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgb(187 160 86 / 0.35);
  background: rgb(187 160 86 / 0.08);
  color: var(--gold-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-glow);
  box-shadow: 0 0 0 3px rgb(0 209 140 / 0.2);
}

.titulo-seccion {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin: 0;
}

.titulo-seccion .acento {
  color: var(--gold);
}

.bajada {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.texto-seccion {
  max-width: 760px;
  margin: 2rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.subtitulo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem;
}

.subtitulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border-strong), transparent);
}

.ico {
  width: 28px;
  height: 28px;
  flex: none;
}

/* ---------- Botones ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 700 0.92rem/1 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primario {
  background: var(--green-btn);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgb(0 155 105 / 0.7), 0 1px 0 rgb(255 255 255 / 0.25) inset;
}

.btn-primario:hover {
  background: #00b078;
  box-shadow: 0 10px 28px -8px rgb(0 209 140 / 0.75), 0 1px 0 rgb(255 255 255 / 0.25) inset;
}

.btn-secundario {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-secundario:hover {
  background: var(--surface-2);
  border-color: rgb(255 255 255 / 0.28);
}

.btn-dorado {
  background: var(--gold);
  color: var(--black-green);
}

.btn-dorado:hover {
  background: var(--gold-soft);
}

.btn .flecha {
  transition: transform 0.2s var(--ease);
}

.btn:hover .flecha {
  transform: translateX(3px);
}

/* ---------- Hero: noticias destacadas ---------- */

.hero {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

/* Textura azteca del tema original, como guiño y muy atenuada */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url(../img/bg-bono.png) top center / 1400px auto no-repeat;
  opacity: 0.18;
  mask-image: linear-gradient(180deg, #000 30%, transparent 85%);
}

.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.2rem);
  font-stretch: 75%;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 0.3em;
}

.hero h1 .acento {
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lead {
  max-width: 760px;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, auto);
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.bento-banner {
  grid-column: span 4;
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 50% 40%, rgb(0 209 140 / 0.25), transparent 60%),
    linear-gradient(160deg, rgb(0 104 71 / 0.55), rgb(8 24 21 / 0.9));
  overflow: hidden;
}

.bento-banner img {
  width: 100%;
  max-width: 380px;
  filter: drop-shadow(0 20px 30px rgb(0 0 0 / 0.5));
}

.bento-banner .chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
}

.bento .nota-destacada {
  grid-column: span 8;
}

.bento .nota:not(.nota-destacada) {
  grid-column: span 4;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgb(8 24 21 / 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border-strong);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
}

/* ---------- Tarjeta de noticia ---------- */

.nota {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.nota:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lift);
}

.nota-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-solid);
}

.nota-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.nota:hover .nota-media img {
  transform: scale(1.05);
}

.nota-media .chip {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}

.nota-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  padding: 1rem 1.1rem 1.15rem;
}

.nota-titulo {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-stretch: 100%;
  font-size: 0.98rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.nota-resumen {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.nota-fecha {
  margin-top: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gold-soft);
}

.nota-destacada .nota-media {
  aspect-ratio: 21 / 9;
}

.nota-media.portada,
.nota-destacada .nota-media.portada,
.grid-editorial .nota:first-child .nota-media.portada {
  aspect-ratio: auto;
  min-height: 150px;
}

.nota-destacada .nota-media.portada {
  min-height: 280px;
}

.grid-editorial .nota:first-child .nota-media.portada {
  min-height: 300px;
}

.nota-destacada .nota-cuerpo {
  padding: 1.25rem 1.5rem 1.5rem;
}

.nota-destacada .nota-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.05;
}

.nota-destacada .nota-resumen {
  font-size: 1rem;
}

.grid-notas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.grid-notas--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Noticias: editorial, la primera ocupa dos columnas y dos filas */
.grid-editorial {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.grid-editorial .nota:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.grid-editorial .nota:first-child .nota-media {
  aspect-ratio: auto;
  flex: 1;
  min-height: 260px;
}

.grid-editorial .nota:first-child .nota-titulo {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  line-height: 1.05;
}

/* ---------- Portada tipografica de nota ---------- */

/* Las notas no usan fotos de agencia: la portada es el marcador o el dato clave. */
.portada {
  display: grid;
  place-items: center;
  padding: 2.5rem 1rem 1.25rem;
  background:
    radial-gradient(circle at 20% 0%, rgb(255 255 255 / 0.08), transparent 55%),
    linear-gradient(150deg, var(--c1, #0f5a40), var(--c2, #082a20));
  isolation: isolate;
}

.portada::before {
  content: "";
  position: absolute;
  right: -16px;
  bottom: -16px;
  z-index: -1;
  width: 110px;
  height: 110px;
  background: var(--icono, none) center / contain no-repeat;
  opacity: 0.16;
}

.portada::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 14px);
}

.portada--liga { --c1: #00744f; --c2: #06291f; --icono: url(../img/ico/futbol.svg); }
.portada--tri { --c1: #0b6b4a; --c2: #5a0c16; --icono: url(../img/ico/futbol.svg); }
.portada--nba { --c1: #3a3220; --c2: #0b1d18; --icono: url(../img/ico/basket.svg); }
.portada--nfl { --c1: #6b0f1c; --c2: #0b231e; --icono: url(../img/ico/nfl.svg); }
.portada--esports { --c1: #1f4d40; --c2: #0a1714; --icono: url(../img/ico/esports.svg); }

.marcador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  width: 100%;
}

.marcador .equipo {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
}

.marcador .score,
.portada-dato {
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-shadow: 0 6px 24px rgb(0 0 0 / 0.45);
}

.portada-dato {
  text-align: center;
  color: var(--gold-soft);
}

.portada-dato small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  text-shadow: none;
}

.nota-destacada .portada {
  padding: 3.5rem 2rem 2rem;
}

.nota-destacada .portada::before {
  width: 200px;
  height: 200px;
  right: -30px;
  bottom: -30px;
}

.nota-destacada .marcador .equipo {
  font-size: clamp(0.95rem, 2vw, 1.3rem);
}

.nota-destacada .marcador .score {
  font-size: clamp(3.2rem, 8vw, 5.5rem);
}

.actualizado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- Tarjeta de casa ---------- */

.grid-casas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.casa {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}

.casa:hover {
  transform: translateY(-4px);
  border-color: rgb(0 209 140 / 0.35);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgb(0 209 140 / 0.12);
}

.casa-logo {
  display: grid;
  place-items: center;
  height: 88px;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgb(0 0 0 / 0.35);
  border: 1px solid rgb(255 255 255 / 0.05);
}

.casa-logo img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

.casa-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.casa-nombre {
  margin: 0;
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.casa-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.casa-rating .estrellas {
  color: var(--rating);
  letter-spacing: 0.06em;
  font-size: 0.78rem;
}

.casa-bono {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  background: rgb(0 104 71 / 0.25);
  border: 1px dashed rgb(0 209 140 / 0.35);
}

.casa-bono span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.casa-bono strong {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
}

.casa .btn {
  width: 100%;
  margin-top: auto;
}

.casa-tyc {
  margin: -0.35rem 0 0;
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
}

/* ---------- Ranking de casas ---------- */

.ranking {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ranking;
}

.ranking-fila {
  counter-increment: ranking;
  display: grid;
  grid-template-columns: 44px 180px minmax(0, 1fr) minmax(0, 1.1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 1rem 0.9rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + var(--subnav-h) + 24px);
  transition: border-color 0.25s, background-color 0.25s;
}

.ranking-fila:hover {
  border-color: rgb(0 209 140 / 0.35);
  background: var(--surface-2);
}

.ranking-fila::before {
  content: counter(ranking);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--text-muted);
}

.ranking-fila:nth-child(-n + 3)::before {
  background: linear-gradient(160deg, var(--gold-soft), var(--gold));
  border-color: transparent;
  color: var(--black-green);
}

.ranking-fila .casa-logo {
  height: 64px;
  padding: 0.5rem 0.75rem;
}

.ranking-fila .casa-logo img {
  max-height: 44px;
}

.ranking-fila .casa-nombre {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.ranking-fila .casa-bono {
  background: transparent;
  border: 0;
  padding: 0;
}

.ranking-acciones {
  display: flex;
  gap: 0.5rem;
}

.tyc-bet365 {
  margin: 1.75rem 0 0;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.76rem;
  color: var(--text-muted);
}

/* ---------- Tabs de deportes (control segmentado) ---------- */

.tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.3rem;
  margin-bottom: 1.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.45rem 1.1rem 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: 700 0.95rem/1 var(--font-body);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s, background-color 0.25s var(--ease), box-shadow 0.25s;
}

.tab .ico {
  width: 24px;
  height: 24px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tab:hover {
  color: var(--text);
}

.tab[aria-selected="true"] {
  color: #fff;
  background: var(--green-mx);
  box-shadow: 0 6px 18px -6px rgb(0 104 71 / 0.9), 0 1px 0 rgb(255 255 255 / 0.15) inset;
}

.tab[aria-selected="true"] .ico {
  opacity: 1;
}

.tab-panel[hidden] {
  display: none;
}

.tab-panel:not([hidden]) {
  animation: aparecer 0.35s var(--ease);
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- Bonos (panel verde) ---------- */

.panel-marca {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(0 209 140 / 0.2);
  background:
    radial-gradient(40rem 20rem at 100% 0%, rgb(187 160 86 / 0.18), transparent 60%),
    linear-gradient(150deg, rgb(0 104 71 / 0.9), rgb(8 76 53 / 0.85) 55%, rgb(8 24 21 / 0.95));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.panel-marca .bajada,
.panel-marca .texto-seccion {
  color: rgb(241 241 241 / 0.78);
}

.panel-marca .casa {
  background: rgb(8 24 21 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---------- NFL ---------- */

.nfl::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, var(--bg), rgb(8 24 21 / 0.82) 30%, rgb(8 24 21 / 0.92) 80%, var(--bg)),
    url(../img/bg-superbowl-mapa-1.jpg) center / cover no-repeat;
  opacity: 0.9;
}

.card-superbowl {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 200px;
  margin-top: 1rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(0 209 140 / 0.2);
  background:
    url(../img/NFL.png) right -20px bottom / auto 115% no-repeat,
    linear-gradient(120deg, rgb(0 104 71 / 0.95), rgb(8 76 53 / 0.75));
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.card-superbowl > div {
  max-width: 520px;
}

.card-superbowl h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  margin-bottom: 0.4rem;
}

.card-superbowl p {
  margin: 0;
  color: rgb(241 241 241 / 0.85);
}

/* ---------- FAQ ---------- */

.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 860px;
}

.faq details {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: background-color 0.25s, border-color 0.25s;
}

.faq details[open] {
  background: var(--surface-2);
  border-color: var(--border-strong);
}

.faq summary {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--green-mx);
  transition: transform 0.3s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size 0.35s var(--ease), content-visibility 0.35s allow-discrete;
}

.faq details[open]::details-content {
  block-size: auto;
}

.faq details p {
  margin: 0;
  padding: 0 1.25rem 1.2rem;
  color: var(--text-muted);
}

/* ---------- Juego responsable ---------- */

.responsable {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(206 17 38 / 0.35);
  background: linear-gradient(120deg, rgb(206 17 38 / 0.12), var(--surface));
}

.responsable img {
  width: 64px;
}

.responsable h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 0.4rem;
}

.responsable p {
  color: var(--text-muted);
}

.responsable p:last-child {
  margin-bottom: 0;
}

.responsable a {
  color: var(--text);
  font-weight: 700;
}

/* ---------- Footer ---------- */

.footer {
  padding: 3.5rem 0 2rem;
  border-top: 1px solid var(--border);
  background: rgb(5 16 14 / 0.85);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2.5rem;
}

.footer-logo {
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

.footer h2 {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 1rem;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.footer a {
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--text);
}

.footer-reviews {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.sellos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
}

.sellos img {
  height: 36px;
  width: auto;
  opacity: 0.85;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
}

.footer-legal p {
  margin: 0;
  max-width: 760px;
}

/* ---------- Reviews de casas ---------- */

.pagina-review main {
  padding-top: calc(var(--header-h) + 1.75rem);
  padding-bottom: 4rem;
}

.migas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.migas a {
  text-decoration: none;
  color: var(--text-muted);
}

.migas a:hover {
  color: var(--text);
}

.review-cabecera {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(0 209 140 / 0.2);
  background:
    radial-gradient(30rem 15rem at 100% 0%, rgb(187 160 86 / 0.15), transparent 60%),
    linear-gradient(150deg, rgb(0 104 71 / 0.6), rgb(8 24 21 / 0.9));
  box-shadow: var(--shadow-lift);
}

.review-cabecera .casa-logo {
  height: 110px;
}

.review-cabecera .casa-logo img {
  max-height: 80px;
}

.review-cabecera h1 {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 900;
  font-stretch: 75%;
  margin-bottom: 0.5rem;
}

.review-cabecera .casa-rating {
  font-size: 0.95rem;
}

.review-cabecera .casa-rating .estrellas {
  font-size: 1rem;
}

.review-bono {
  margin: 0;
  max-width: 260px;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: rgb(8 24 21 / 0.55);
  border: 1px dashed rgb(0 209 140 / 0.45);
  text-align: center;
}

.review-bono span {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.review-bono strong {
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
}

.review-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
  margin-top: 2rem;
}

.review-cuerpo {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 1.02rem;
  line-height: 1.75;
}

.review-cuerpo > :first-child {
  margin-top: 0;
}

.review-cuerpo h2 {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-top: 2.25rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

.review-cuerpo h3 {
  font-size: 1.4rem;
  margin-top: 1.75rem;
  color: var(--gold-soft);
}

.review-cuerpo h4 {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

.review-cuerpo p,
.review-cuerpo li {
  color: rgb(241 241 241 / 0.86);
}

.review-cuerpo strong {
  color: var(--text);
}

.review-cuerpo ul,
.review-cuerpo ol {
  padding-left: 1.3rem;
  margin: 0 0 1.25em;
}

.review-cuerpo li {
  margin-bottom: 0.4rem;
}

.review-cuerpo li::marker {
  color: var(--green-glow);
}

.review-cuerpo table {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 0.75rem 0 1.75rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
}

.review-cuerpo th,
.review-cuerpo td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.review-cuerpo tr:last-child td {
  border-bottom: 0;
}

.review-cuerpo th {
  background: rgb(0 104 71 / 0.5);
  font-weight: 700;
}

.review-cuerpo .faq {
  max-width: none;
}

.review-tyc {
  margin: 2rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.review-aside {
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  display: grid;
  gap: 1.25rem;
}

.review-caja {
  padding: 1.35rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
}

.review-caja h2 {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.puntajes,
.otras-casas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.puntajes li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.4rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.puntajes li:last-child {
  margin-bottom: 0;
}

.puntajes .barra {
  grid-column: 1 / -1;
  grid-row: 2;
  height: 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  overflow: hidden;
}

.puntajes .barra span {
  display: block;
  width: var(--v);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green-mx), var(--green-glow));
}

.puntajes .valor {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.otras-casas {
  display: grid;
  gap: 0.25rem;
}

.otras-casas a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.5rem;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  transition: background-color 0.2s;
}

.otras-casas a:hover {
  background: var(--surface-2);
}

.otras-casas a::after {
  content: "→";
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}

.otras-casas a:hover::after {
  transform: translateX(3px);
  color: var(--text);
}

.otras-casas img {
  width: 76px;
  height: 34px;
  object-fit: contain;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgb(0 0 0 / 0.35);
}

/* ---------- 404 ---------- */

.pagina-404 {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem var(--gutter);
  text-align: center;
}

.pagina-404 h1 {
  font-size: clamp(5rem, 20vw, 10rem);
  font-weight: 900;
  font-stretch: 75%;
  background: linear-gradient(90deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.1em;
}

.pagina-404 p {
  color: var(--text-muted);
}

/* ---------- Animacion al entrar en pantalla ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .revelar {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    /* Dentro de un carrusel la linea de tiempo seria el scroll horizontal y la
       tarjeta podria quedar invisible: ahi no se anima. */
    .carrusel .revelar {
      animation: none;
    }

    @keyframes revelar {
      from {
        opacity: 0;
        transform: translateY(24px);
      }
    }
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .grid-notas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ranking-fila {
    grid-template-columns: 44px 150px minmax(0, 1fr) auto;
  }

  .ranking-fila .casa-bono {
    grid-column: 3;
    grid-row: 2;
  }

  .ranking-acciones {
    grid-column: 4;
    grid-row: 1 / span 2;
    flex-direction: column;
  }
}

@media (max-width: 960px) {
  .bento-banner {
    grid-column: span 12;
    min-height: 260px;
  }

  .bento-banner img {
    max-width: 280px;
  }

  .bento .nota-destacada {
    grid-column: span 12;
  }

  .bento .nota:not(.nota-destacada) {
    grid-column: span 6;
  }

  .navbar nav {
    display: none;
  }

  .navbar-cta {
    margin-left: auto;
  }

  .navbar-toggle {
    display: block;
    margin-left: 0;
  }

  .navbar.menu-abierto nav {
    display: block;
    position: fixed;
    top: var(--header-h);
    inset-inline: 0;
    padding: 0.75rem var(--gutter) 1.25rem;
    background: rgb(8 24 21 / 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.7);
    animation: aparecer 0.25s var(--ease);
  }

  .navbar.menu-abierto .navbar-menu {
    flex-direction: column;
    align-items: stretch;
  }

  .navbar.menu-abierto .navbar-menu summary {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text);
    justify-content: space-between;
  }

  .navbar.menu-abierto .submenu {
    position: static;
    min-width: 0;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .navbar.menu-abierto .navbar-menu a {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 1rem;
    color: var(--text);
  }

  .review-cabecera {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
    justify-items: center;
  }

  .review-cabecera .casa-logo {
    width: min(260px, 100%);
  }

  .review-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .review-aside {
    position: static;
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid > :first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  /* Carruseles deslizables en lugar de grillas apretadas */
  .carrusel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 72%);
    grid-template-columns: none;
    gap: 0.85rem;
    margin-inline: calc(var(--gutter) * -1);
    padding: 0.25rem var(--gutter) 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .carrusel::-webkit-scrollbar {
    display: none;
  }

  .carrusel > * {
    scroll-snap-align: start;
  }

  .carrusel .nota:hover,
  .carrusel .casa:hover {
    transform: none;
  }

  .grid-editorial {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ranking-fila {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0.85rem 1rem;
    padding: 1rem;
  }

  .ranking-fila::before {
    grid-row: 1;
  }

  .ranking-fila .casa-logo {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    width: 150px;
  }

  .ranking-fila > div:not(.casa-logo):not(.ranking-acciones),
  .ranking-fila .casa-bono,
  .ranking-acciones {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .ranking-fila .casa-bono {
    padding: 0.7rem 0.85rem;
    background: rgb(0 104 71 / 0.25);
    border: 1px dashed rgb(0 209 140 / 0.35);
  }

  .ranking-acciones {
    flex-direction: row;
  }

  .ranking-acciones .btn {
    flex: 1;
  }

  .carrusel .marcador {
    gap: 0.4rem;
  }

  .carrusel .marcador .equipo {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  .carrusel .marcador .score,
  .carrusel .portada-dato {
    font-size: 1.75rem;
  }

  .card-superbowl {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 9rem;
    background-size: auto 55%, auto;
    background-position: right -10px bottom, center;
  }
}

@media (max-width: 560px) {
  :root {
    --header-h: 60px;
    --subnav-h: 48px;
  }

  .navbar-logo img {
    height: 32px;
  }

  .navbar-cta {
    display: none;
  }

  .navbar-toggle {
    margin-left: auto;
  }

  .bento .nota:not(.nota-destacada) {
    grid-column: span 12;
  }

  .nota-destacada .nota-media {
    aspect-ratio: 16 / 9;
  }

  .grid-editorial {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-editorial .nota:first-child {
    grid-column: auto;
    grid-row: auto;
  }

  .grid-editorial .nota:first-child .nota-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }

  .tabs {
    display: flex;
  }

  .tab {
    flex: 1;
    justify-content: center;
    padding-inline: 0.75rem;
  }

  .responsable {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Articulos de noticias ---------- */

/* Enlace que cubre toda la tarjeta, sin anidar bloques dentro de un <a> */
.nota-enlace {
  text-decoration: none;
  color: inherit;
}

.nota-enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
}

.nota:has(.nota-enlace) {
  cursor: pointer;
}

.nota:has(.nota-enlace:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.nota-enlace:focus-visible {
  outline: none;
}

.pagina-articulo main {
  padding-top: calc(var(--header-h) + 1.75rem);
}

.contenedor-texto {
  max-width: 780px;
}

.articulo h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  font-weight: 900;
  font-stretch: 75%;
  letter-spacing: -0.015em;
  margin-bottom: 0.4em;
}

.articulo-bajada {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.55;
  color: rgb(241 241 241 / 0.85);
}

.articulo-meta {
  margin: 1.25rem 0 0;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.articulo-meta strong {
  color: var(--text);
}

.articulo-foto {
  max-width: 1040px;
  margin: 2rem auto;
}

.articulo-foto img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lift);
}

.articulo-foto figcaption {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.articulo-foto figcaption a {
  color: var(--text-muted);
}

.articulo-cuerpo {
  font-size: 1.08rem;
  line-height: 1.8;
}

.articulo-cuerpo > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 75%;
  font-size: 3.6em;
  line-height: 0.8;
  color: var(--gold);
}

.articulo-cuerpo p,
.articulo-cuerpo li {
  color: rgb(241 241 241 / 0.88);
}

.articulo-cuerpo h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-top: 2.25rem;
}

.articulo-cuerpo ul,
.articulo-cuerpo ol {
  padding-left: 1.3rem;
  margin: 0 0 1.25em;
}

.articulo-cuerpo li {
  margin-bottom: 0.4rem;
}

.articulo-cuerpo li::marker {
  color: var(--green-glow);
  font-weight: 700;
}

.articulo-cuerpo a {
  color: var(--gold-soft);
  text-underline-offset: 3px;
}

.articulo-fuentes {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.9rem;
}

.articulo-fuentes h2 {
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.articulo-fuentes ul {
  margin: 0 0 0.75rem;
  padding-left: 1.1rem;
}

.articulo-fuentes li {
  margin-bottom: 0.35rem;
}

.articulo-fuentes a {
  color: var(--text);
}

.articulo-fuentes p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.articulo-responsable {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--red-mx);
  background: rgb(206 17 38 / 0.08);
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Solo en escritorio: en movil manda el carrusel */
@media (min-width: 861px) {
  .grid-casas--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ======================================================================
 * Capa "liquid glass"
 * Vidrio translucido con canto iluminado y destello que sigue al puntero.
 * El desenfoque real (backdrop-filter) solo va en lo que flota sobre el
 * contenido; en las grillas el fondo es liso y el blur solo costaria
 * rendimiento en moviles. Colores: los mismos tokens de marca.
 * ==================================================================== */

:root {
  --glass-fill: linear-gradient(180deg, rgb(255 255 255 / 0.09), rgb(255 255 255 / 0.025));
  --glass-tint: rgb(12 38 32 / 0.55);
  --glass-blur: blur(22px) saturate(185%);
  --glass-rim: rgb(255 255 255 / 0.14);
  --glass-edge:
    inset 0 1px 0 rgb(255 255 255 / 0.30),
    inset 0 -1px 0 rgb(255 255 255 / 0.05),
    inset 1px 0 0 rgb(255 255 255 / 0.07),
    inset -1px 0 0 rgb(255 255 255 / 0.07);
  --glass-drop: 0 18px 40px -18px rgb(0 0 0 / 0.75);
}

/* Fondo ambiental: manchas de color de marca para que el vidrio tenga que refractar */
body::before {
  background:
    radial-gradient(42rem 32rem at 8% -6%, rgb(0 168 107 / 0.42), transparent 62%),
    radial-gradient(34rem 26rem at 96% 8%, rgb(187 160 86 / 0.20), transparent 62%),
    radial-gradient(30rem 24rem at 82% 62%, rgb(206 17 38 / 0.12), transparent 62%),
    radial-gradient(46rem 34rem at 18% 92%, rgb(0 104 71 / 0.38), transparent 62%),
    var(--bg);
}

/* --- Superficies flotantes: blur real --- */

.navbar,
.subnav {
  background: linear-gradient(180deg, rgb(10 30 26 / 0.62), rgb(10 30 26 / 0.42));
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom-color: rgb(255 255 255 / 0.10);
  box-shadow: inset 0 -1px 0 rgb(255 255 255 / 0.04), 0 10px 30px -20px rgb(0 0 0 / 0.8);
}

.subnav {
  background: linear-gradient(180deg, rgb(10 30 26 / 0.42), rgb(10 30 26 / 0.30));
}

.submenu,
.navbar.menu-abierto nav {
  background: linear-gradient(180deg, rgb(16 44 38 / 0.78), rgb(10 30 26 / 0.70)) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-color: var(--glass-rim);
  box-shadow: var(--glass-edge), var(--glass-drop);
}

.tabs,
.chip,
.eyebrow,
.panel-marca .casa {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.tabs {
  background: var(--glass-fill), var(--glass-tint);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-edge);
}

.tab[aria-selected="true"] {
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.28), transparent 55%),
    linear-gradient(180deg, rgb(0 140 95 / 0.95), rgb(0 92 62 / 0.95));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.45),
    inset 0 -1px 0 rgb(0 0 0 / 0.2),
    0 8px 22px -8px rgb(0 168 107 / 0.8);
}

.chip {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.05)), rgb(8 24 21 / 0.45);
  border-color: rgb(255 255 255 / 0.22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35);
}

.subnav a[aria-current="true"] {
  background:
    radial-gradient(120% 100% at 50% 0%, rgb(255 255 255 / 0.22), transparent 60%),
    rgb(0 104 71 / 0.45);
  border-color: rgb(0 209 140 / 0.40);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30);
}

/* --- Tarjetas: vidrio sin blur, con destello que sigue al puntero --- */

.nota,
.casa,
.ranking-fila,
.faq details,
.review-caja,
.review-cuerpo,
.articulo-fuentes,
.responsable,
.tyc-bet365 {
  background:
    radial-gradient(28rem circle at var(--mx, 20%) var(--my, -10%), rgb(255 255 255 / 0.10), transparent 42%),
    var(--glass-fill),
    var(--glass-tint);
  border-color: var(--glass-rim);
  box-shadow: var(--glass-edge), var(--glass-drop);
}

.nota:hover,
.casa:hover,
.ranking-fila:hover {
  border-color: rgb(255 255 255 / 0.24);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.40),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    inset 1px 0 0 rgb(255 255 255 / 0.10),
    inset -1px 0 0 rgb(255 255 255 / 0.10),
    0 26px 50px -20px rgb(0 0 0 / 0.85),
    0 0 0 1px rgb(0 209 140 / 0.10);
}

.responsable {
  background:
    radial-gradient(28rem circle at var(--mx, 20%) var(--my, -10%), rgb(255 255 255 / 0.10), transparent 42%),
    linear-gradient(120deg, rgb(206 17 38 / 0.16), transparent 60%),
    var(--glass-fill),
    var(--glass-tint);
  border-color: rgb(206 17 38 / 0.35);
}

.casa-logo,
.ranking-fila::before {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.10), inset 0 -10px 20px -12px rgb(0 0 0 / 0.6);
}

.casa-bono {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent),
    rgb(0 104 71 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12);
}

/* El panel de bonos y las cabeceras grandes: vidrio teñido de verde */
.panel-marca,
.review-cabecera,
.card-superbowl {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -1px 0 rgb(255 255 255 / 0.06),
    var(--glass-drop);
  border-color: rgb(255 255 255 / 0.16);
}

.panel-marca::after,
.review-cabecera::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 50%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), transparent);
  pointer-events: none;
}

.review-cabecera {
  position: relative;
  overflow: hidden;
}

/* --- Botones de vidrio --- */

.btn-primario {
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.32), transparent 55%),
    linear-gradient(180deg, rgb(0 178 120 / 0.95), rgb(0 120 80 / 0.95));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -1px 0 rgb(0 0 0 / 0.25),
    0 10px 26px -10px rgb(0 168 107 / 0.85);
}

.btn-primario:hover {
  background:
    radial-gradient(120% 90% at 50% 0%, rgb(255 255 255 / 0.40), transparent 55%),
    linear-gradient(180deg, rgb(0 196 132 / 0.98), rgb(0 132 88 / 0.98));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.65),
    inset 0 -1px 0 rgb(0 0 0 / 0.25),
    0 12px 32px -10px rgb(0 209 140 / 0.9);
}

.btn-secundario,
.navbar-toggle {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04));
  border-color: rgb(255 255 255 / 0.20);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 20px -12px rgb(0 0 0 / 0.7);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Navegadores sin backdrop-filter: vidrio mas opaco para mantener legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navbar,
  .subnav,
  .submenu {
    background: rgb(10 30 26 / 0.96) !important;
  }
}

/* Mas contraste y sin transparencias si el usuario lo pide */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .navbar,
  .subnav,
  .submenu,
  .navbar.menu-abierto nav {
    background: rgb(10 30 26) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .nota,
  .casa,
  .ranking-fila,
  .faq details,
  .review-caja,
  .review-cuerpo,
  .articulo-fuentes {
    background: var(--surface-solid);
  }
}

@media (min-width: 861px) {
  .ranking-fila .casa-bono {
    background: transparent;
    box-shadow: none;
  }
}

/* ---------- Portada con foto del articulo ---------- */

.portada--foto {
  background: var(--surface-solid);
}

.portada--foto .portada-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}

.nota:hover .portada--foto .portada-img {
  transform: scale(1.05);
}

/* Velo para que el marcador se lea sobre cualquier foto */
.portada--foto::before {
  inset: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  background: linear-gradient(180deg, rgb(8 24 21 / 0.15), rgb(8 24 21 / 0.55) 55%, rgb(8 24 21 / 0.85));
  opacity: 1;
}

.portada--foto::after {
  display: none;
}

.nota-destacada .portada--foto::before {
  width: auto;
  height: auto;
  right: 0;
  bottom: 0;
}

/* El marcador y el dato van en una pastilla de vidrio */
.portada--foto .marcador,
.portada--foto .portada-dato {
  align-self: end;
  padding: 0.55rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgb(255 255 255 / 0.18);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)), rgb(8 24 21 / 0.45);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.30), 0 10px 24px -12px rgb(0 0 0 / 0.8);
}

.portada--foto .portada-dato {
  justify-self: center;
}

.portada--foto {
  min-height: 170px;
}

/* Tarjetas angostas (grilla de 5 en escritorio, carruseles en movil): el marcador
   y el dato se achican y el texto chico puede partirse en dos lineas. */
.portada--foto .marcador {
  gap: 0.45rem;
  padding-inline: 0.7rem;
}

.portada--foto .portada-dato {
  max-width: 100%;
}

.portada-dato small {
  white-space: normal;
  text-wrap: balance;
}

.grid-notas .marcador .equipo,
.carrusel .marcador .equipo {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
}

.grid-notas .marcador .score,
.grid-notas .portada-dato,
.carrusel .marcador .score,
.carrusel .portada-dato {
  font-size: 1.65rem;
}

.grid-notas .portada-dato small,
.carrusel .portada-dato small {
  font-size: 0.64rem;
  letter-spacing: 0.06em;
}