body {
  font-family: 'Inter', sans-serif;
  background-color: #ffffff;
  color: #FFFFFF;
  margin: 0;
}

/* --- HEADER COMPLETO --- */
.header {
  background-color: #1c1c1c;
  text-align: center;
  padding: 32px 16px 10px;
}

.logo {
  max-height: 48px; /* altura final que quieras igualar */
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto 12px;
}

.logo-editorial {
  max-height: 36px;
  height: auto;
  width: auto;
  display: block;
  margin: 0 auto 12px;
  object-fit: contain;
  transform: translateY(-4px); /* sube la imagen 4px */
}

.lema {
  font-family: 'League Spartan', sans-serif;
  font-size: 14px;
  color: #ffffff;
   margin-top: -2px; /* sube el lema 2px */
	font-weight: 600;
}

/* --- FOOTER COMPLETO --- */
.footer {
  background-color: #FFFFFF;
  text-align: center;
  padding: 32px 16px;
  color: #1C1C1C;
  font-size: 12px;
  margin-top: 64px;
}

.footer-redes {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Footer: enlace igual que en el home */
.footer-redes a{
  color: #000;
  text-decoration: none;
  font-weight: 900;     /* = bold del home */
  font-family: inherit; /* Urbanist, como el contenedor */
}

.icono-red {
  width: 20px;
  height: 20px;
}

.footer-links {
  margin-bottom: 8px;
}

.footer-links a {
  color: #1C1C1C;
  text-decoration: none;
  font-weight: 700;
  margin: 0 4px;
}

.footer-copy {
  font-weight: bold;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.footer-legal {
  font-size: 10px;
  color: #555555;
  line-height: 1.4;
  max-width: 320px;
  margin: 0 auto;
}

/* --- ESPACIADO EN DESKTOP (HEADER Y FOOTER) --- */
@media (min-width: 1024px) {
  .footer {
    margin-top: 64px;
  }

  .header {
    padding: 32px 16px 10px;
  }
}

:root{
  --w-m: 90vw;
  --w-t: min(88vw, 840px);
  --w-d: min(80vw, 900px);
}

/* helpers de layout */
.ancho-nota{
  width: auto;
  max-width: var(--w-m);
  margin: 0 auto;
}
@media (min-width:768px){  .ancho-nota{ max-width: var(--w-t); } }
@media (min-width:1024px){ .ancho-nota{ max-width: var(--w-d); } }

.full-bleed{ width:100%; max-width:none; margin:0; }

/* ===== BLOQUE 1 — HERO (centrado, sin recorte) ===== */
.bloque { max-width: 1100px; margin: 0 auto; }
.bloque-hero { margin: 0 0 24px; }

/* Contenedor del hero: centra la imagen */
.hero {
  display: flex;
  justify-content: center;
  margin: 0 0 24px;
}

/* Imagen: centrada, con ancho/alto contenidos (no full-width) */
.hero__img {
  display: block;
  margin: 0 auto;             /* centra la imagen */
  width: auto;                /* ancho automático */
  max-width: 90vw;            /* no ocupa todo el ancho */
  max-height: 520px;          /* menos panorámica */
  object-fit: contain;        /* mantiene todo el contenido visible */
  object-position: center;    /* centrada */
}

/* Tablet: un poco más grande si hay espacio */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__img { width: min(88vw, 840px); }
}

/* Desktop grande: mantiene el centro y límites */
@media (min-width: 1024px) {
  .hero__img { width: min(80vw, 900px); }
}

/* ===== CTA JUEGO (mismo ancho que la imagen, centrado) ===== */
.cta-juego{
  /* mismo esquema que .hero__img */
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;  /* iconos | texto | botón */
  align-items: center;
  gap: 16px;

  width: auto;
  max-width: 90vw;              /* = .hero__img (mobile/by default) */
  margin: 0 auto 32px;

  background: #FFFFFF;
  color: #1C1C1C;
  padding: 16px;
  border: 1px solid #e9e9e9;
}

/* Tablet: mismo ancho que la imagen */
@media (min-width: 768px) and (max-width: 1023px){
  .cta-juego{ width: min(88vw, 840px); }   /* = .hero__img en tablet */
}

/* Desktop grande: mismo ancho que la imagen */
@media (min-width: 1024px){
  .cta-juego{ width: min(80vw, 900px); }   /* = .hero__img en desktop */
}

/* Iconos */
.cta-juego__iconos{
  display: flex;
  align-items: center;
  gap: 12px;
}
.cta-juego__iconos img{
  height: 56px;
  width: auto;
  image-rendering: pixelated;
}

/* Texto — centrado dentro de su columna */
.cta-juego__texto{
  text-align: center;      /* ← centra títulos y bajada */
  justify-self: center;    /* ← centra el bloque entre iconos y botón */
}
.cta-juego__texto h3{
  font-family: 'League Spartan', sans-serif;
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.1;
  margin: 0;
}
.cta-juego__texto p{
  margin: 6px 0 0;
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.35;
}

/* Botón (estilo home/GOAT) */
.cta-juego__btn{
  background: #000;
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  justify-self: end;        /* se mantiene pegado a la derecha */
}

/* Responsive: apilar en una columna */
@media (max-width: 720px){
  .cta-juego{
    grid-template-columns: 1fr;
    text-align: center;
    gap: 12px;
  }
  .cta-juego__iconos{ justify-content: center; }
  .cta-juego__texto{ justify-self: center; }
  .cta-juego__btn{ justify-self: center; }
}
/* ===== Ajustes finos sin mover tu estructura ===== */

/* Desktop (>=1024px): 1 sola línea, un pelín más grande si cabe */
@media (min-width: 1024px){
  .cta-juego__texto h3{
    white-space: nowrap;                 /* evita salto en desktop */
    font-size: clamp(24px, 2.2vw, 34px); /* sube tope sin desbordar */
  }
}

/* Tablet (768–1023px): permite 1–2 líneas y escala mejor */
@media (min-width: 768px) and (max-width: 1023px){
  .cta-juego{
    width: min(88vw, 840px);  /* ya lo tienes, reafirmamos */
    gap: 14px;
    padding: 14px 16px;
  }

  .cta-juego__iconos img{
    height: 48px;             /* un poco más chico que desktop */
  }

  .cta-juego__texto{
    text-align: center;
    justify-self: center;
  }
  .cta-juego__texto h3{
    white-space: normal;                 /* deja partir 1–2 líneas */
    font-size: clamp(20px, 2.6vw, 30px); /* ↑ no se ve diminuto */
    line-height: 1.15;
  }
  .cta-juego__texto p{
    font-size: clamp(12px, 1.6vw, 15px);
  }

  .cta-juego__btn{
    padding: 8px 16px;         /* botón un poco más compacto */
    font-size: 14px;
  }
}

/* Móvil (<=720px): mantiene tu apilado, solo afinamos tamaños */
@media (max-width: 720px){
  .cta-juego__iconos img{ height: 40px; }
  .cta-juego__texto h3{
    white-space: normal;
    font-size: clamp(18px, 6vw, 24px);
  }
  .cta-juego__texto p{
    font-size: clamp(12px, 3.6vw, 14px);
  }
}

/* Mejorar legibilidad en pantallas medianas */
@media (min-width: 720px) and (max-width: 1024px){
  .cta-juego__texto h3{
    font-size: clamp(24px, 2.5vw, 32px);
  }
  .cta-juego__texto p{
    font-size: clamp(14px, 1.6vw, 18px);
  }
}

/* ===== BLOQUE 3 — Kicker / etiqueta (full-bleed, compacto) ===== */
.kicker{
  background: #1C1C1C;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* compacta */
  padding: 10px 12px;        /* ↓ menos alto */
  border: none;
}

/* full-bleed: ocupa el ancho total de la pantalla */
.kicker--full{
  width: 100vw;
  margin-inline: calc(50% - 50vw);   /* rompe el contenedor y sangra a los lados */
}

/* Texto más pequeño y legible */
.kicker__label{
  margin: 0;
  font-family: 'Graduate', serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1;
  font-size: clamp(16px, 2.2vw, 28px);  /* antes era mucho mayor */
}

/* Opcional: en pantallas muy grandes, aún más fino */
@media (min-width: 1200px){
  .kicker{ padding-block: 8px; }       /* menos alto todavía */
  .kicker__label{ font-size: clamp(16px, 1.8vw, 26px); }
}

/* ===== BLOQUE 4 — Título + Sumario (mismo ancho que la imagen/CTA) ===== */
.nota-head{
  width: auto;
  max-width: 90vw;                 /* = mobile por defecto */
  margin: 20px auto 12px;          /* separaciones verticales */
  color: #1C1C1C;
  text-align: left;
}

@media (min-width: 768px) and (max-width: 1023px){
  .nota-head{ width: min(88vw, 840px); }   /* = tablet como el hero/CTA */
}
@media (min-width: 1024px){
  .nota-head{ width: min(80vw, 900px); }   /* = desktop como el hero/CTA */
}

/* Título: League Spartan Bold */
.nota-titulo{
  margin: 0 0 12px;
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;                 /* Bold */
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-size: clamp(28px, 6vw, 54px); /* grande pero fluido */
}

/* Sumario: League Spartan SemiBold */
.nota-sumario{
  margin: 0;
  font-family: 'League Spartan', sans-serif;
  font-weight: 600;                  /* SemiBold */
  line-height: 1.25;
  font-size: clamp(16px, 2.4vw, 24px);
  max-width: 70ch;                   /* legibilidad en desktop */
}

/* ===== BLOQUE 5 — FRASE (mismo ancho que Título/CTA) ===== */
.cita{
   width: min(90vw, 900px);   /* base como CTA/título */
  margin: 20px auto;
  text-align: center;
  color: #1C1C1C;
}

/* Tablet: igual que el hero/cta */
@media (min-width:768px) and (max-width:1023px){
  .cita{ width: min(88vw, 840px); }  /* tablet: igual que CTA/título */
}

/* Desktop: igual que el hero/cta */
@media (min-width:1024px){
  .cita{ width: min(80vw, 900px); }  /* desktop: igual que CTA/título */
}

/* Comillas — League Spartan Black */
.cita__mark{
  font-family: 'League Spartan', sans-serif;
  font-weight: 900; /* Black */
  font-size: clamp(48px, 10vw, 120px);
  line-height: 1;
  margin: 0 0 8px;          /* separación bajo la comilla de apertura */
  line-height: 1;
}

/* Marca inferior (puedes usar la comilla de cierre o rotar) */
.cita__mark--bottom{
  display: block;
  margin-top: 8px;          /* separación arriba de la comilla de cierre */
}

/* Frase — League Spartan Regular, más grande que el contexto */
.cita__texto{
  font-family: 'League Spartan', sans-serif;
  font-weight: 400; /* Regular */
  font-size: clamp(22px, 3.8vw, 36px);
  line-height: 1.15;
  margin: 0px auto 20px;
  max-width: 28ch;                /* ancho cómodo de lectura */
}

/* Contexto — Regular, más pequeño */
.cita__contexto{
  font-family: 'League Spartan', sans-serif;
  font-weight: 400; /* Regular */
  font-size: clamp(14px, 2.1vw, 20px);
  line-height: 1.35;
  margin: 8px auto 32px;
  max-width: 60ch;                /* un poco más ancho que la frase */
}

/* ===== BLOQUE 6 — Cuerpo y Subtítulos (Inter) ===== */
.cuerpo-nota{
  color:#1C1C1C;
  text-align:left;
}

/* Texto corrido — Inter Regular */
.cuerpo-nota p{
  font-family:'Inter', sans-serif;
  font-weight:400;                   /* Regular */
  font-size:clamp(16px, 1.35vw, 18px);
  line-height:1.65;
  margin:0 0 16px;
}

/* Negritas dentro del cuerpo (opcional) */
.cuerpo-nota strong{ font-weight:700; }  /* Inter Bold */

/* Subtítulos — Inter ExtraBold en MAYÚSCULAS */
.subtitulo-nota{
  font-family:'Inter', sans-serif;
  font-weight:800;                   /* ExtraBold */
  text-transform:uppercase;
  letter-spacing:.02em;
  line-height:1.15;
  font-size:clamp(18px, 2.4vw, 28px);
  margin:28px 0 12px;               /* arriba/abajo del subtítulo */
}

/* Sutilezas responsive para mejor legibilidad en tablet */
@media (min-width:768px) and (max-width:1023px){
  .subtitulo-nota{ font-size:clamp(20px, 2.6vw, 30px); }
}

/* Variante de subtítulo para el remate final de la nota */
.nota-subtitulo--final{
  font-family: 'Inter', sans-serif;
  font-weight: 900;            /* Inter Black */
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #1C1C1C;
  line-height: 1.05;
  font-size: clamp(22px, 3.6vw, 38px); /* responsive sin exagerar en tablet */
  margin: 40px 0 0;            /* separarlo del cuerpo anterior */
}

.nota .cta-juego:last-of-type{
  margin-top: clamp(16px, 3vw, 50px);
}

/* ===== GRAF 1 — Los escuderos más fieles ===== */
.graf-escuderos{            /* contenedor del gráfico */
  margin: 28px auto 20px;
  /* color por defecto si no hay tema */
  --graf-color: #c62828; /* antes --rojo-esc */
}

.graf-escuderos__title{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--graf-color);
  line-height: 1.05;
  font-size: clamp(22px, 4.2vw, 32px);
}

.graf-escuderos__subtitle{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 16px;
  color: #111;
  line-height: 1.1;
  font-size: clamp(16px, 2.6vw, 16px); /* fijo en 16px (intencional) */
}

.graf-escuderos__grid{
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  display: grid;
  gap: 12px 16px;
  text-align: center;
  align-items: end;
}

/* columnas responsivas */
@media (max-width: 767px){   .graf-escuderos__grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px) and (max-width:1023px){
  .graf-escuderos__grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width:1024px){   .graf-escuderos__grid{ grid-template-columns: repeat(6,1fr); } }

.graf-escuderos__num{
  font-family: 'Graduate', serif;
  color: var(--graf-color);
  line-height: .9;
  margin: 0 0 6px;
  font-size: clamp(56px, 10vw, 140px);
}

.graf-escuderos__name{
  font-family: 'Graduate', serif;
  color: var(--graf-color);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
  font-size: clamp(12px, 1.6vw, 20px);
}

/* Temas de color para los gráficos */
.graf--rojo   { --rojo-esc: #c62828; }  /* rojo */
.graf--rosa   { --rojo-esc: #e91e63; }  /* rosa */
.graf--morado { --rojo-esc: #6a0dad; }  /* morado */

/* Tema rosa (usa --graf-accent para este bloque) */
.graf--rosa { --graf-accent: #e91e63; }

/* ===== GRAF 2 — Socios exitosos ===== */
.graf-awards{
  margin: 28px auto 20px;
}

/* Tabla responsiva con CSS Grid */
.graf-awards__table{
  display: grid;
  grid-template-columns: 1.6fr repeat(4, minmax(56px, .6fr));
  gap: 10px 16px;
  align-items: center;
  font-family: 'Graduate', serif;
}

.graf-awards__row{ display: contents; } /* deja que cada celda ocupe la misma fila de grid */

/* Celdas */
.graf-awards__cell{
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.1;
  color: #111;
}

/* Encabezados de columnas */
.graf-awards__head .graf-awards__cell{
  text-align: center;
  color: var(--graf-accent, #e91e63);
  font-size: clamp(12px, 1.4vw, 18px);
  font-weight: 600;
}

/* Columna de jugador */
.graf-awards__cell--player{
  color: var(--graf-accent, #e91e63);
  font-size: clamp(14px, 2vw, 20px);
  font-weight: 600;
  text-align: left;
}

/* Valores (x1, x3 o “–”) */
.graf-awards__val{
  color: var(--graf-accent, #e91e63);
  text-align: center;
  font-size: clamp(14px, 1.8vw, 20px);
}

/* Ajuste en pantallas pequeñas: un poco más angosto y legible */
@media (max-width: 640px){
  .graf-awards__table{
    grid-template-columns: 1.4fr repeat(4, 1fr);
    gap: 8px 10px;
  }
  .graf-awards__cell--player{
    font-size: clamp(13px, 4vw, 18px);
  }
  .graf-awards__val{
    font-size: clamp(13px, 3.6vw, 18px);
  }
}

/* Título rosa solo en el gráfico con tema rosa */
.graf--rosa .graf-escuderos__title{
  color: var(--graf-accent, #e91e63);
}

/* Tema morado */
.graf--morado{ --graf-accent: #6a0dad; }

/* TÍTULO en color de tema (morado aquí) */
.graf--morado .graf-escuderos__title{
  color: var(--graf-accent);
}

/* Contenedor del gráfico 3 */
.graf-campeones{
  margin: 28px auto 20px;
}

/* Lista de jugadores (dos líneas por item) */
.graf-campeones__list{
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 16px;
}

/* Nombre del jugador: Graduate, mayúsculas, morado */
.graf-campeones__name{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--graf-accent);
  font-size: clamp(20px, 3.6vw, 32px);
  margin: 0;
}

/* Línea de detalle: Graduate, mayúsculas, morado (más pequeño) */
.graf-campeones__desc{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.1;
  color: var(--graf-accent);
  font-size: clamp(14px, 2.4vw, 22px);
  margin: 4px 0 0;
}

/* ===== GRAF 4 — ¿SÚPER BIG THREE? ===== */
.graf-bigtres{
  --graf-color: #c62828;       /* rojo por defecto */
  margin: 28px auto 20px;
  color:#1C1C1C;
}

/* Títulos (mismos tamaños que los de graf-escuderos) */
.graf-bigtres__title{
  font-family:'Graduate', serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 8px;
  color:var(--graf-color);
  line-height:1.05;
  font-size:clamp(22px, 4.2vw, 32px);
}
.graf-bigtres__subtitle{
  font-family:'Graduate', serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  margin:0 0 16px;
  color:#111;
  line-height:1.1;
  font-size:clamp(16px, 2.6vw, 16px);
}

/* Disposición general */
.b3-compare{
  display:grid;
  grid-template-columns: 1fr auto 1fr; /* izquierda | centro | derecha */
  gap: 24px;
  align-items:start;
}

/* Columna central: filas de métricas */
.b3-middle{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:center;
}

.b3-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;  /* número izq | etiqueta | número der */
  align-items:baseline;
  gap:16px;
}

.b3-num{
  font-family:'Graduate', serif;
  color:var(--graf-color);
  text-align:center;
  line-height:.9;
  font-size:clamp(18px, 3vw, 40px);  /* mismo rango que los números del 1er gráfico */
}

.b3-label{
  font-family:'Graduate', serif;
  color:var(--graf-color);
  text-transform:uppercase;
  letter-spacing:.06em;
  text-align:center;
  line-height:1;
  font-size:clamp(18px, 3vw, 40px);
}

/* Lados: equipos y jugadores */
.b3-team{
  font-family:'Graduate', serif;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:#111;
  margin:0 0 6px;
  font-size:clamp(12px, 1.6vw, 18px);
}

.b3-roster{
  list-style:none;
  margin:0;
  padding:0;
}
.b3-roster li{
  font-family:'Graduate', serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--graf-color);
  line-height:1.1;
  font-size:clamp(12px, 1.6vw, 20px);
}

/* Responsive: apilar en móvil */
@media (max-width: 720px){
  .b3-compare{ grid-template-columns:1fr; gap:16px; }
  .b3-side{ text-align:center; }
}

/* ===== GRAF 4 — columna derecha (Cleveland) ===== */

/* por defecto, la columna de texto queda a la izq */
.b3-side{ text-align:left; }

/* SOLO la derecha alineada a la derecha */
.b3-side--right{
  text-align:right;      /* título y líneas a la derecha */
  justify-self:end;      /* si el contenedor es GRID, ancla a la derecha */
  /* si tu contenedor es FLEX en lugar de GRID, añade también: */
  /* margin-left: auto; */
}

/* la lista sin viñetas y sin sangría */
.b3-roster{
  list-style:none;
  margin:0;
  padding:0;
}

/* asegurar herencia de alineación en los <li> */
.b3-side--right .b3-roster li,
.b3-side--right .b3-team{
  text-align:right;
}

/* ------ Paleta por tema (rosa para este gráfico) ------ */
:root{
  --rosa-graf: #e91e63;
}
.theme-rosa{ --graf-accent: var(--rosa-graf); }

/* Reutiliza tamaños del GRAF 1 */
.graf-title{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--graf-accent, #c62828);  /* por defecto rojo si no hay tema */
  line-height: 1.05;
  font-size: clamp(22px, 4.2vw, 32px);
}
.graf-subtitle{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 16px;
  color: #111;
  line-height: 1.1;
  font-size: clamp(16px, 2.6vw, 16px);
}

/* Contenedor del gráfico */
.graf-campeones{
  margin: 28px auto 20px;
}

/* Lista en filas; cada fila es una mini-grid 2 columnas */
.campeones-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.campeones-grid li{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: 24px;
  align-items: baseline;
}

/* Nombre (rosa) + detalle (negro) */
.campeones-grid .name{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--graf-accent, #c62828);
  line-height: 1.1;
  font-size: clamp(14px, 1.8vw, 20px);
}
.campeones-grid .detail{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #111;
  line-height: 1.1;
  font-size: clamp(14px, 1.8vw, 20px);
  text-align: left;
}

/* Responsive: en móviles, nombre arriba / detalle abajo */
@media (max-width: 680px){
  .campeones-grid li{
    grid-template-columns: 1fr;
    row-gap: 4px;
  }
}

/* Tema morado para este gráfico */
.theme-morado{ --graf-accent:#6a0dad; }

/* Reaprovecha tamaños de títulos/subtítulos ya usados */
.graf-title{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 8px;
  color: var(--graf-accent, #c62828);
  line-height: 1.05;
  font-size: clamp(22px, 4.2vw, 32px);
}
.graf-subtitle{
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0 0 16px;
  color: #111;
  line-height: 1.1;
  font-size: clamp(16px, 2.6vw, 16px);
}

/* Contenedor y lista */
.graf-leyendas{ margin: 28px auto 20px; }

.leyendas-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

/* Nombre y descripción (ambos morado) */
.leyendas-list .name{
  display: block;
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--graf-accent, #6a0dad);
  line-height: 1.05;
  font-size: clamp(18px, 2.8vw, 32px);
}
.leyendas-list .note{
  display: block;
  font-family: 'Graduate', serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--graf-accent, #6a0dad);
  line-height: 1.1;
  font-size: clamp(14px, 1.9vw, 22px);
}

/* ===== Botón genérico (estilo “ME RINDO”) ===== */
.btn{
  display: inline-block;
  padding: 12px 22px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  /* OJO: no forzamos uppercase para permitir "jueguitos.app" en minúsculas */
  text-decoration: none;
  letter-spacing: .02em;
  line-height: 1;
  border: 2px solid transparent;
  transition: transform .06s ease, background-color .2s, color .2s, border-color .2s;
}
.btn--negro{
  background: #000;
  color: #fff;
}
.btn--negro:hover{
  background: #111;
  transform: translateY(-1px);
}
.btn--negro:active{
  transform: translateY(0);
}

/* Contenedor y ajuste del botón de “volver” */
.volver{
  text-align: center;
  margin: clamp(24px, 6vw, 56px) auto;
}
.volver__btn{
  font-size: clamp(14px, 1.4vw, 16px);
  padding: 12px 20px;
  /* Permitimos que "jueguitos.app" se vea en minúsculas */
  text-transform: none;
}

/* Utilidad para evitar cortes de línea en el dominio */
.nowrap{ white-space: nowrap; }

/* Botones (mismo estilo del “ME RINDO”) */
.btn{
  display: inline-block;
  padding: 12px 22px;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  text-decoration: none;
  letter-spacing: .02em;
  line-height: 1;
  border: 2px solid transparent;
  transition: transform .06s ease, background-color .2s, color .2s, border-color .2s;
}
.btn--negro{
  background: #000;
  color: #fff;
}
.btn--negro:hover{
  background: #111;
  transform: translateY(-1px);
}
.btn--negro:active{
  transform: translateY(0);
}

/* Contenedor final y pila de botones (mismo ancho) */
.volver{
  text-align: center;
  margin: clamp(24px, 6vw, 56px) auto;
}
.volver__stack{
  display: grid;
  gap: 12px;
}
.volver__btn,
.compartir__btn{
  width: 100%;            /* mismo ancho para ambos */
  text-transform: none;   /* respetamos “jueguitos.app” en minúsculas */
  font-size: clamp(14px, 1.4vw, 16px);
  padding: 12px 20px;
}

/* Mensaje de feedback al compartir/copiar */
.compartir__msg{
  margin: 2px 0 0;
  font-size: 13px;
  color: #1C1C1C;
  opacity: 0;
  transition: opacity .2s;
}
.compartir__msg.is-visible{ opacity: 1; }

/* No cortar el dominio */
.nowrap{ white-space: nowrap; }

/* Misma anchura para ambos, pero más cortos y centrados */
.volver--compact .volver__stack{
  max-width: min(92vw, 250px); /* <- ajusta 560px si los quieres aún más cortos */
  margin: 0 auto;
  gap: 10px;
  justify-items: stretch;
}
.volver--compact .volver__btn,
.volver--compact .compartir__btn{
  width: 100%;
  padding: 12px 18px;          /* puedes bajar/subir el alto aquí */
  font-size: clamp(14px, 1.3vw, 16px);
}

/* El wrapper: 1 columna y centrado */
.volver--compact .volver__stack{
  display: grid;                 /* <-- importante */
  grid-template-columns: 1fr;    /* 1 columna */
  max-width: 250px;              /* tu ancho compacto */
  margin: 0 auto;
  gap: 10px;
  justify-items: stretch;        /* que los hijos se estiren */
}

/* Que ambos botones ocupen el 100% del wrapper */
.volver--compact .volver__btn,
.volver--compact .compartir__btn{
  display: block;                /* evita inline/inline-block */
  width: 100% !important;        /* misma anchura para ambos */
  box-sizing: border-box;        /* por si hay borde/padding */
}

.cta-juego.wrestlemania {
  background-color: #C62828; /* rojo intenso */
  color: #ffffff;
}

.cta-juego.wrestlemania .btn {
  background-color: #ffffff;
  color: #000000;
}

.graf-msg.wrestlemania {
  font-family: 'Tourney', sans-serif;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.wrestlemania * {
  font-family: 'Tourney', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.wrestlemania .titulo-wrestlemania {
  font-size: 2.4rem;              /* más chico */
  color: #c62828;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;          /* subtítulo más cerca */
  line-height: 1.1;
}

.graf-msg.wrestlemania .subtitulo-wrestlemania {
  font-size: 1.4rem;              /* más compacto */
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;          /* menos espacio antes de los números */
}

.graf-msg.wrestlemania .numeros-wrestlemania {
  font-family: 'Tourney', sans-serif;
  font-weight: 700 !important;   /* BOLD verdadero */
  font-size: 6.4rem;              /* más chico */
  color: #c62828;
  letter-spacing: 0.3rem;
  margin: 0rem 0 0rem 0;          /* menos margen */
  line-height: 1;
}

.graf-msg.wrestlemania .footer-wrestlemania {
  font-size: 1.4rem;              /* más chico */
  color: #c62828;
  letter-spacing: 0.04em;
  margin-top: 0rem;               /* más cerca */
}

.graf-msg.wrestlemania.vencedores-eternos {
  font-family: 'Tourney', sans-serif;
  text-transform: uppercase;
  color: #e91e63;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.wrestlemania.vencedores-eternos * {
  font-family: 'Tourney', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.wrestlemania.vencedores-eternos .titulo-wrestlemania {
  font-size: 2.4rem;
  color: #e91e63;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.graf-msg.wrestlemania.vencedores-eternos .subtitulo-wrestlemania {
  font-size: 1.4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.graf-msg.wrestlemania.vencedores-eternos .tabla-victorias {
  font-size: 1.4rem;
  color: #e91e63;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-top: 0.5rem;
}

.vencedores-eternos .tabla-victorias {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  font-family: 'Tourney', sans-serif;
  font-weight: 600;
  color: #e91e63;
}

.vencedores-eternos .row {
  display: grid;
  grid-template-columns: min-content auto;
  font-size: 1.3rem;
  line-height: 1.3;
}

.vencedores-eternos .row.head {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.vencedores-eternos .row > div:first-child {
  width: 8rem; /* o el ancho que desees para alinear bien los números romanos */
}

.graf-msg.wrestlemania.se-quedaron-cortos {
  font-family: 'Tourney', sans-serif;
  text-transform: uppercase;
  color: #6a0dad;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.wrestlemania.se-quedaron-cortos * {
  font-family: 'Tourney', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.wrestlemania.se-quedaron-cortos .titulo-wrestlemania {
  font-size: 2.4rem;
  color: #6a0dad;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.graf-msg.wrestlemania.se-quedaron-cortos .subtitulo-wrestlemania {
  font-size: 1.4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.graf-msg.wrestlemania.se-quedaron-cortos .tabla-derrotas {
  font-size: 1.4rem;
  color: #6a0dad;
  letter-spacing: 0.03em;
  line-height: 1.3;
  margin-top: 0.5rem;
}

.se-quedaron-cortos .tabla-derrotas {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  font-family: 'Tourney', sans-serif;
  font-weight: 600;
  color: #6a0dad;
}

.se-quedaron-cortos .row {
  display: grid;
  grid-template-columns: 15rem auto;
  font-size: 1.3rem;
  line-height: 1.3;
}

.se-quedaron-cortos .row.head {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.graf-msg.wrestlemania.figuras-externas {
  font-family: 'Tourney', sans-serif;
  text-transform: uppercase;
  color: #c62828;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.wrestlemania.figuras-externas * {
  font-family: 'Tourney', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.wrestlemania.figuras-externas .titulo-wrestlemania {
  font-size: 2.4rem;
  color: #c62828;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.graf-msg.wrestlemania.figuras-externas .subtitulo-wrestlemania {
  font-size: 1.4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.figuras-externas .tabla-externos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr;
  gap: 1rem;
  font-size: 1.3rem;
  line-height: 1.3;
  margin-top: 1rem;
  font-weight: 600;
  color: #c62828;
}

.figuras-externas .tabla-externos .row {
  display: contents;
}

.figuras-externas .tabla-externos .row.head {
  font-weight: 700;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.graf-msg.wrestlemania.de-hollywood {
  font-family: 'Tourney', sans-serif;
  text-transform: uppercase;
  color: #e91e63;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.wrestlemania.de-hollywood * {
  font-family: 'Tourney', sans-serif !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.wrestlemania.de-hollywood .titulo-wrestlemania {
  font-size: 2.4rem;
  color: #e91e63;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.graf-msg.wrestlemania.de-hollywood .subtitulo-wrestlemania {
  font-size: 1.4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.de-hollywood .tabla-hollywood {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
  font-family: 'Tourney', sans-serif;
  font-weight: 600;
  color: #e91e63;
}

.de-hollywood .row {
  display: grid;
  grid-template-columns: 20ch auto;
  font-size: 1.3rem;
  line-height: 1.3;
}

.graf-msg.wrestlemania.favorito-de-casa .titulo-wrestlemania,
.graf-msg.wrestlemania.favorito-de-casa .numeros-wrestlemania,
.graf-msg.wrestlemania.favorito-de-casa .footer-wrestlemania {
  color: #6a0dad;
}

/* Estilo personalizado para el CTA de Campeones 5 Grandes */
.cta-juego.cinco-grandes {
  background-color: #E91E63;
  color: #ffffff;
}

.cta-juego.cinco-grandes .btn {
  background-color: #ffffff;
  color: #000000;
  font-weight: 900;
  font-family: 'Urbanist', sans-serif;
}

.cta-juego.cinco-grandes .btn:hover {
  background-color: #f4f4f4;
}

.graf-msg.futbol {
  font-family: 'Prata', serif;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 2rem;
  text-align: left;
}

.graf-msg.futbol * {
  font-family: 'Prata', serif !important;
  font-weight: 400 !important;   /* Prata no es bold por defecto */
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

.graf-msg.futbol .titulo-futbol {
  font-size: 1.8rem;             /* mismo tamaño que título Wrestlemania */
  color: #c62828;
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;         /* subtítulo más cerca */
  line-height: 1.1;
}

.graf-msg.futbol .subtitulo-futbol {
  font-size: 1.2rem;             /* compacto como Wrestlemania */
  color: #000;
  line-height: 1.1;
  margin-bottom: 0.8rem;         /* menos espacio antes de números */
}

.graf-msg.futbol .numeros-futbol {
  font-family: 'Prata', serif;
  font-weight: 400 !important;   /* mantiene estilo serif clásico */
  font-size: 5.5rem;             /* igual que Wrestlemania */
  color: #c62828;
  letter-spacing: 0.3rem;
  margin: 0;
  line-height: 1;
}

.graf-msg.futbol .footer-futbol {
  font-size: 1.2rem;             /* chico y cercano */
  color: #c62828;
  letter-spacing: 0.04em;
  margin-top: 0;
}

/* ===== Tabla fútbol 3 columnas (Prata) — VARIANTE ROSA ===== */
.graf-msg.futbol.tabla{
  font-family: 'Prata', serif;
  text-transform: uppercase;
  text-align: left;
  margin-bottom: 2rem;
}
.graf-msg.futbol.rosa{ --fut-color:#E91E63; }

/* Títulos (mismo patrón del módulo anterior) */
.graf-msg.futbol.tabla .titulo-futbol{
  font-size: 1.8rem;
  color: var(--fut-color);
  letter-spacing: 0.04em;
  line-height: 1.1;
  margin: 0 0 .2rem 0;
}
.graf-msg.futbol.tabla .subtitulo-futbol{
  font-size: 1.2rem;
  color: #000;             /* negro como en la referencia */
  line-height: 1.1;
  margin: 0 0 .8rem 0;
}

/* Tabla en 3 columnas */
.tabla-futbol.tres{
  display: grid;
  grid-auto-rows: auto;
  row-gap: .6rem;
}
.tabla-futbol.tres .row{
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;  /* 3 columnas */
  column-gap: 2rem;
}
.tabla-futbol.tres .row > div{
  font-size: 1rem;       /* mantiene proporciones que ya aprobaste */
  color: var(--fut-color);
  letter-spacing: 0.02em;
}

/* Encabezado de la tabla */
.tabla-futbol.tres .row.head > div{
  letter-spacing: 0.04em;
}

/* ===== Tabla fútbol 2 columnas (Prata) — VARIANTE MORADO ===== */
.graf-msg.futbol.morado{ --fut-color:#6A0DAD; }

/* Estructura de tabla en 2 columnas (igual que la de 3, solo cambia el grid) */
.tabla-futbol.dos{
  display: grid;
  grid-auto-rows: auto;
  row-gap: .6rem;
}
.tabla-futbol.dos .row{
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columnas */
  column-gap: 2rem;
}
.tabla-futbol.dos .row > div{
  font-size: 1rem;                  /* mismo tamaño que guardaste */
  color: var(--fut-color);
  letter-spacing: 0.02em;
}
/* Encabezado de la tabla */
.tabla-futbol.dos .row.head > div{
  letter-spacing: 0.04em;
}

/* ===== Tabla fútbol 2 columnas (Prata) — VARIANTE ROJO ===== */
.graf-msg.futbol.rojo {
  --fut-color: #C62828;   /* Rojo definido aquí */
}

/* ===== GRAF FÚTBOL — Variante MORADO ===== */
.graf-msg.futbol.morado {
  font-family: 'Prata', serif;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 2rem;
  text-align: left;
}

/* Aseguramos que hereden Prata y no se pisen colores */
.graf-msg.futbol.morado * {
  font-family: 'Prata', serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  color: inherit; /* 👈 muy importante: evita que quede fijo en rojo */
}

/* Ahora cada parte usa morado explícito */
.graf-msg.futbol.morado .titulo-futbol {
  font-size: 1.8rem;
  color: #6A0DAD !important;   /* 👈 forzamos morado */
  letter-spacing: 0.04em;
  margin-bottom: 0.2rem;
  line-height: 1.1;
}

.graf-msg.futbol.morado .subtitulo-futbol {
  font-size: 1.2rem;
  color: #000;                  /* negro */
  line-height: 1.1;
  margin-bottom: 0.8rem;
}

.graf-msg.futbol.morado .numeros-futbol {
  font-family: 'Prata', serif;
  font-weight: 400 !important;
  font-size: 5.5rem;
  color: #6A0DAD !important;    /* 👈 morado forzado */
  letter-spacing: 0.3rem;
  margin: 0;
  line-height: 1;
}

.graf-msg.futbol.morado .footer-futbol {
  font-size: 1.2rem;
  color: #6A0DAD !important;    /* 👈 morado forzado */
  letter-spacing: 0.04em;
  margin-top: 0;
}

/* ====== HOME EDITORIAL � GRID & CARDS (namespaced .ed-) ====== */

body.home-editorial { background-color: #1c1c1c; }

/* Colores de acento para cards s�lidas */
:root{
  --ed-rojo:   #C62828;
  --ed-rosa:   #E91E63;
  --ed-morado: #6A0DAD;
}

/* Contenedor de cards */
.ed-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 720px){ .ed-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px){ .ed-grid{ grid-template-columns: repeat(3, 1fr); } }

/* Card base */
.ed-card{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* Imagen de cabecera */
.ed-card__img{
  width: 100%;
  display: block;
  aspect-ratio: 16/9;   /* recorte uniforme */
  object-fit: cover;
}

/* Cuerpo */
.ed-card__body{
  padding: 20px 18px 22px;
  text-align: center;
}

/* T�tulo */
.ed-card__title{
  font-family: 'League Spartan', sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 3.6vw, 28px);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #121212;
  margin: 10px 0 16px;
  text-align: center;
}

/* ===== Bot�n LEER (id�ntico a JUGAR en proporci�n) ===== */
.ed-card .ed-card__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  padding: 8px 14px;     /* m�s compacto */
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  border-radius: 0;
  text-decoration: none;
  box-shadow: none;
}

/* Colores del bot�n seg�n variante de card */
.ed-card--light  .ed-card__btn{ background:#000; color:#fff; } /* card blanca */
.ed-card--solid  .ed-card__btn{ background:#fff; color:#000; } /* card de color */
.ed-card--solid  .ed-card__btn:hover{ filter:brightness(.95); }

/* Variantes de fondo */
.ed-card--light{  background:#fff; color:#121212; }
.ed-card--solid{  color:#fff; }
.ed-card--solid .ed-card__title{ color:#fff; }

/* Colores s�lidas */
.ed-card--rojo{   background: var(--ed-rojo); }
.ed-card--rosa{   background: var(--ed-rosa); }
.ed-card--morado{ background: var(--ed-morado); }

/* Grid ancho nota (opcional) */
.ancho-nota { padding-inline: 8px; }

/* Emojis 8-bit */
.ed-card__icons{
  display:flex; justify-content:center; align-items:center;
  gap:.6rem; margin:.8rem 0 0;
}
.ed-card__icons img{ height:40px; }
@media (min-width:640px){  .ed-card__icons img{ height:48px; } }
@media (min-width:1024px){ .ed-card__icons img{ height:52px; } }

/* T�tulos m�s chicos y fijados a 4 l�neas */
.ed-card__title{
  font-size: clamp(18px, 2.6vw, 24px); /* antes m�s grande */
  line-height: 1.1;
  margin: 10px 0 14px;

  /* 4 pisos fijos */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  /* reserva alto exacto de 4 l�neas para alinear botones */
  min-height: calc(1.1em * 4);
}

/* en cards s�lidas el color del t�tulo sigue en blanco */
.ed-card--solid .ed-card__title{ color:#fff; }

/* Badge superior tipo "EDITORIAL" del home */
.ed-topbadge{
  display:flex;
  justify-content:center;
  margin: 18px 0 24px;
}

.ed-topbadge .ed-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 16px;
  background:#fff;
  color:#000;
  text-decoration:none;
  text-transform: uppercase;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  border-radius: 0;
}

/* Igualar ancho de las cards del home editorial al home principal */
.ed-card{
  max-width: 320px;   /* ancho fijo m�ximo */
  margin: 0 auto;     /* centrado dentro de la columna */
}

/* Subir el bot�n "JUEGOS" bajo el header (solo en home editorial) */
body.home-editorial .header{ padding-bottom: 0; }                 /* antes 10px */
body.home-editorial .logo-editorial{ margin-bottom: 8px; }        /* antes 12px */
body.home-editorial .header .lema{ 
  margin: 6px 0 6px;                                              /* quitamos el margin-bottom del <p> */
}

/* wrapper del bot�n */
body.home-editorial .ed-topbadge{ 
  margin-top: 18px;                                               /* antes 18px */
  margin-bottom: 20px;                                            /* antes 24px */
}

/* si lo quieres a�n 4�6px m�s arriba, descomenta esta l�nea: */
/* body.home-editorial .ed-topbadge{ margin-top: 4px; } */

/* === Ajuste de grosor solo en home editorial === */
body.home-editorial .btn,
body.home-editorial .btn--negro,
body.home-editorial .ed-card__btn {
  font-weight: 700; /* c�mbialo a 900 si luego quieres m�s pesado */
}

/* T�tulos de las cards en home editorial */
body.home-editorial .ed-card__title {
  text-transform: uppercase;   /* todo en altas */
  font-size: 1.2rem;           /* m�s peque�o (ajusta si quieres 1.1 o 1.3) */
  line-height: 1.3;            /* m�s compacto, que no se vea tan ancho */
}