/* --- GENERAL --- */
body {
  margin: 0;
  background-color: #1C1C1C;
  font-family: 'Inter', sans-serif;
  color: #FFFFFF;
}

:root{
  --card-w: 320px;   /* ancho de cada card en desktop */
  --card-h: 360px;   /* alto uniforme para TODAS */
  --gap: 32px;       /* separación entre cards */
}
@media (max-width: 1280px){
  :root{ --card-w: 300px; --card-h: 340px; }
}
@media (max-width: 720px){
  :root{ --card-w: 280px; --card-h: 320px; }
}

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

/* --- HEADER --- */
.header {
  background-color: #FFFFFF;
  text-align: center;
  padding: 24px 16px 16px;
}

.logo {
  max-width: 220px;
  margin: 0 auto 12px;
}

.lema {
  font-family: 'League Spartan', sans-serif;
  font-size: 14px;
  color: #1C1C1C;
  margin: 0;
}

/* --- CARDS DE JUEGO --- */
.home {
  padding: 32px 16px;
  background-color: #1C1C1C;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}

.card {
  background-color: transparent;
  width: 100%;
  max-width: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  text-align: center;
  gap: 16px;
  min-height: auto;
}

.card .icono {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 8px;
}

.card .contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 0; /* ✅ Quitamos espacio debajo */
}

.card .contenido h2 {
  font-family: 'League Spartan', sans-serif;
  font-size: 18px;
  margin: 0;
  line-height: 1.2;
  color: #FFFFFF;
}

.card .contenido p {
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
  color: #FFFFFF;
}

.card .btn {
  display: inline-block;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: 14px;
  background-color: #FFFFFF;
  color: #1C1C1C;
  padding: 8px 16px;
  text-decoration: none;
  text-transform: uppercase;
  margin-top: 0;
}

/* --- COLORES POR JUEGO --- */
.quinteto {
  background-color: #C62828;
}

.mundial {
  background-color: #E91E63;
}

.champions {
  background-color: #6A0DAD;
}

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

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

.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;
}

/* ===== AJUSTES DESKTOP (pantallas grandes) ===== */
@media (min-width: 1024px) {
  .home {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
    padding: 48px 32px;
    flex-wrap: wrap;                       /* permite saltar de fila */
    max-width: min(100%, 1728px);          /* 5 * 320 + 4 * 32 => tope a 5 */
    margin: 0 auto;
    align-items: stretch;            /* iguala alturas */
  }

  .home > .card {
    align-self: stretch;             /* fuerza estirado por card */
    display: flex;
    flex-direction: column;
    max-width: 320px;
    flex: 0 0 270px;   /* ancho fijo: no crece ni encoge */
    width: 320px;      /* refuerzo por si acaso */
    height: 100%;
  }

  .card .icono { margin-bottom: 12px; }

  .card .contenido {
    margin-bottom: 0;
    flex: 1;                         /* empuja el botón al fondo */
  }

  .card .btn { margin-top: 0; }

  .footer { margin-top: 64px; }
}

/* ✅ Para que el contenido de acerca.html no herede el display:flex del home */
.contenido-acerca {
  display: block;
  text-align: center;
  padding: 4rem 2rem;
  max-width: 900px;
  margin: 0 auto;
}

.contenido-acerca p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

/* ✅ Estilo del botón igual al home */
.btn {
  display: inline-block;
  background-color: #ffffff;
  color: #1C1C1C;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  padding: 1rem 2rem;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #e0e0e0;
}

.footer-redes a {
  color: #000; /* O el color que desees */
  text-decoration: none;
  font-weight: bold; /* si quieres mantenerlo fuerte */
}

/* ====== ICONOS GOAT EN LA CARD ====== */
.iconos-lebron {
  display: flex;
  justify-content: center;
  gap: 6px;
  height: 64px;           /* misma altura que .card .icono */
  align-items: flex-end;  /* alinea los 3 PNG abajo */
  margin-bottom: 12px;    /* igual que .card .icono en desktop */
}

.iconos-lebron .icono {
  height: 48px;  /* si los quieres más grandes, pon 64px */
  width: auto;
}

/* --- EDICIONES GOAT (fondo blanco, texto negro, botón negro) --- */
.edicion-goat {
  background-color: #FFFFFF; /* Fondo blanco */
}

.edicion-goat .contenido h2,
.edicion-goat .contenido p {
  color: #000000; /* Texto negro */
}

.edicion-goat .btn {
  background-color: #000000; /* Fondo negro del botón */
  color: #FFFFFF; /* Texto blanco del botón */
}

/* Botón ancho tipo "VOLVER" (idéntico, pero con variante invertida) */
.btn-final {
  display: block;
  width: min(80vw, 600px);      /* mismo ancho que dejamos en la nota */
  margin: 16px auto;
  padding: 22px 16px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-family: 'Urbanist', sans-serif;
  font-weight: 900;
  font-size: clamp(16px, 2.2vw, 28px);
  border: 2px solid transparent;
  transition: background .2s ease, color .2s ease, transform .04s ease;
}

/* Variante invertida para el home: fondo blanco, texto negro */
.btn-final--invert {
  background: #fff;
  color: #000;

}
.btn-final--invert:hover { background: #f6f6f6; }
.btn-final:active { transform: translateY(1px); }

/* Accesibilidad al enfocar con teclado */
.btn-final:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
}

/* Variantes compactas para el botón */
.btn-final--sm{
  width: max-content;          /* ancho justo al texto */
  padding: 10px 16px;          /* más pequeño */
  font-size: clamp(12px, 1.6vw, 16px);
  border-width: 2px;
  display: inline-block;
  margin: 12px auto;           /* centrado vertical */
}

/* contenedor para centrar fácilmente */
.home-toolbar{
  text-align: center;
  margin: 8px 0 10px;
}

/* Ajuste fino del espacio debajo del botón EDITORIAL */
.btn-final--sm{ margin-bottom: 0; }     /* por si acaso */

.home-toolbar{ margin-bottom: 6px; }    /* el botón en sí */

/* Reduce el espacio del bloque que viene justo después del botón */
.home-toolbar + section,
.home-toolbar + div{
  margin-top: 6px !important;
  padding-top: 0 !important;
}

/* Ajuste del espacio debajo del botón EDITORIAL */
.home{
  padding-top: 16px;   /* antes 48px */
}

@media (max-width: 767px){
  .home{ padding-top: 12px; }
}
@media (min-width: 768px){
  .home{ padding-top: 16px; }
}