/**
 * landing.css — capa de campaña sobre Bulma.
 *
 * Todos los colores salen de las variables --c-* que inyecta la campaña, así
 * que este archivo no contiene ni un color de marca: cambiar la paleta en el
 * panel repinta la página entera.
 */

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
body.landing {
  font-family: var(--c-fuente);
  color: var(--c-texto);
  background: var(--c-fondo);
}

.landing .container {
  max-width: 1120px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.landing .container-estrecho {
  max-width: 860px;
}

.seccion {
  padding: 4rem 0;
}

.seccion-participar,
.seccion-ranking {
  background: var(--c-fondo);
}

.seccion-premios,
.seccion-info {
  background: var(--c-fondo-alt);
}

.titulo-seccion {
  color: var(--c-primario);
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 2.5rem;
  letter-spacing: -0.01em;
}

.titulo-izquierda {
  text-align: left;
}

/* Aviso de vista previa (solo para administradores) */
.aviso-previa {
  background: #fff3cd;
  color: #6b4d00;
  text-align: center;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
}
.aviso-previa a { color: #6b4d00; text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * Barra de logos
 * ------------------------------------------------------------------ */
.barra-marcas {
  background: #fff;
  border-bottom: 1px solid var(--c-borde);
  padding: 1rem 0;
}

.marcas-cabecera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* El alto lo define la campaña (--c-logo-alto): cada archivo trae su propio
   margen interno, así que un valor fijo se ve grande en unos y pequeño en otros. */
.marcas-cabecera img {
  max-height: var(--c-logo-alto);
  max-width: min(42vw, 320px);
  width: auto;
  object-fit: contain;
}
.logo-texto {
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-primario);
  font-size: 0.95rem;
}
.separador-logos {
  width: 1px;
  /* Acompaña al alto de los logos en lugar de quedarse fijo */
  height: calc(var(--c-logo-alto) * 0.8);
  background: var(--c-borde);
  display: inline-block;
}

/* ------------------------------------------------------------------ *
 * Portada
 * ------------------------------------------------------------------ */
.hero-campana {
  /* Fondo propio: en el diseño la portada es beige y las secciones interiores lila */
  background: var(--c-hero-fondo);
  padding: 3.5rem 0;
  overflow: hidden;
}

.hero-titulo {
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.22;
  color: var(--c-texto);
}

.hero-destacado {
  display: block;
  color: var(--c-primario);
  font-weight: 800;
  position: relative;
}

.hero-chispa {
  color: var(--c-acento);
  font-size: 0.55em;
  vertical-align: super;
  margin-left: 0.15em;
}

.hero-subtitulo {
  display: block;
  font-size: 0.62em;
  font-weight: 400;
  color: var(--c-texto);
  margin-top: 0.35rem;
  line-height: 1.35;
}

.hero-imagen {
  width: 100%;
  height: auto;
  display: block;
}

/* ---- Logo de la actividad ----
   Cuando la campaña tiene su propio lockup, sustituye al titular escrito. */
.hero-logo-actividad {
  max-width: min(100%, 460px);
  height: auto;
  display: block;
}

.hero-subtitulo-suelto {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--c-texto);
  line-height: 1.4;
  margin-top: 1rem;
}

/* ---- Alineación del texto de la portada ---- */
.hero-alineado-izquierda .hero-columna-texto { text-align: left; }
.hero-alineado-centro    .hero-columna-texto { text-align: center; }
.hero-alineado-derecha   .hero-columna-texto { text-align: right; }

.hero-alineado-centro  .hero-logo-actividad { margin-left: auto; margin-right: auto; }
.hero-alineado-derecha .hero-logo-actividad { margin-left: auto; }

/* ---- Portada centrada: texto arriba, imagen debajo ---- */
.hero-centrado {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.hero-centrado .hero-titulo,
.hero-centrado .hero-subtitulo-suelto { text-align: center; }
.hero-centrado .hero-logo-actividad { margin: 0 auto; }
.hero-centrado .hero-imagen { margin-top: 2rem; }

/* ---- Banner de ancho completo ----
   El banner trae su propio fondo, así que la sección no pinta el suyo: una
   franja de otro color debajo de la imagen se lee como un sobrante. El botón
   se monta sobre el borde inferior del banner para que ambos formen un bloque
   y no dos elementos sueltos. */
.hero-banner {
  padding: 0;
  background: var(--c-fondo);
}

.hero-banner picture,
.hero-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-banner-enlace { display: block; }

.hero-banner .container {
  position: relative;
  z-index: 2;
  margin-top: -1.75rem;
  padding-bottom: 1.5rem;
}

/* La sección que sigue al banner no necesita su margen superior completo:
   el botón ya deja aire suficiente y, sumados, quedaba un vacío muy largo. */
.hero-banner + .seccion,
.hero-banner + section .seccion:first-child {
  padding-top: 2.25rem;
}

.hero-banner .boton-campana {
  margin-top: 0;
  padding: 1rem 2.6rem;
  font-size: 1.02rem;
  box-shadow: 0 8px 22px var(--c-sombra);
}

/* Botón principal, reutilizado en toda la página */
.boton-campana {
  display: inline-block;
  background: var(--c-primario);
  color: var(--c-sobre-primario);
  border: none;
  border-radius: 999px;
  padding: 0.85rem 2.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.boton-campana:hover { filter: brightness(1.12); color: var(--c-sobre-primario); }
.boton-campana:active { transform: translateY(1px); }
.boton-campana:focus-visible { outline: 3px solid var(--c-acento); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * Cómo participar
 * ------------------------------------------------------------------ */
.pasos {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.paso {
  display: grid;
  grid-template-columns: 2rem 5.5rem 1fr;
  align-items: center;
  gap: 1.1rem;
}

.paso-numero {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--c-primario);
  color: var(--c-primario);
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso-icono {
  display: flex;
  align-items: center;
  justify-content: center;
}
.paso-icono img { max-height: 62px; width: auto; }
.paso-icono svg { color: var(--c-primario); }

.paso-titulo {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--c-texto);
  line-height: 1.35;
}

.paso-detalle {
  color: var(--c-texto-suave);
  font-size: 0.9rem;
  margin-top: 0.3rem;
  line-height: 1.5;
}

.paso-marcas {
  margin-top: 0.7rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
}

.marca-nombre {
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  /* El color en línea lo pone cada marca; esto es el respaldo */
  color: var(--c-acento);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Premios
 * ------------------------------------------------------------------ */
.premios-imagenes {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.premios-imagenes img {
  max-height: 190px;
  width: auto;
}

.premios-subtitulo {
  color: var(--c-texto-suave);
  margin-bottom: 1rem;
}

.premios-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.premios-lista li + li {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-borde);
}

.premio-titulo {
  font-size: 1.25rem;
  color: var(--c-texto);
  line-height: 1.3;
}
.premio-titulo strong { color: var(--c-primario); font-weight: 800; }

.premio-detalle {
  color: var(--c-texto-suave);
  font-size: 0.92rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

/* ---- Premios como pieza de ancho completo ---- */
.seccion-premios-banner {
  background: var(--c-fondo-alt);
}

.seccion-premios-banner picture,
.seccion-premios-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.premios-banner-enlace { display: block; }

/* Si además hay premios escritos, se listan bajo la imagen con menos aire
   del habitual: la pieza gráfica ya introduce la sección. */
.seccion-premios-banner .seccion-premios {
  padding-top: 2.5rem;
}

/* ------------------------------------------------------------------ *
 * Tabla de posiciones
 * ------------------------------------------------------------------ */
.ranking-cabecera {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

/* El 320px es un ancho mínimo mientras la cabecera es una fila. Ojo: en móvil
   pasa a columna y ese mismo valor se interpretaría como ALTO, reservando un
   hueco enorme bajo el subtítulo; por eso se anula en el media query. */
.ranking-intro { flex: 1 1 320px; }

/* En la referencia este título va en el color de texto, no en el de marca:
   convive con un subtítulo a su izquierda, no encabeza la sección centrado. */
.ranking-intro .titulo-seccion {
  color: var(--c-texto);
  margin-bottom: 0.6rem;
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
}

.ranking-subtitulo {
  color: var(--c-texto-suave);
  font-size: 0.9rem;
  max-width: 34ch;
  line-height: 1.5;
}

.consulta { flex: 0 1 auto; }

.consulta-etiqueta {
  display: block;
  font-size: 0.82rem;
  color: var(--c-texto-suave);
  margin-bottom: 0.4rem;
}

.consulta-controles {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.consulta-input {
  border: 1px solid var(--c-borde);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  min-width: 220px;
  color: var(--c-texto);
  background: #fff;
}
.consulta-input:focus {
  outline: none;
  border-color: var(--c-primario);
  box-shadow: 0 0 0 3px var(--c-primario-suave);
}

.consulta-boton { padding: 0.7rem 1.6rem; font-size: 0.9rem; }

.consulta-resultado {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  min-height: 1.2rem;
}

.consulta-tarjeta {
  background: var(--c-primario);
  color: var(--c-sobre-primario);
  border-radius: var(--c-radio);
  padding: 0.9rem 1.1rem;
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
.consulta-tarjeta .dato { text-align: center; }
.consulta-tarjeta .dato-valor { font-size: 1.5rem; font-weight: 800; line-height: 1; }
.consulta-tarjeta .dato-etiqueta { font-size: 0.7rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.06em; }

.consulta-aviso {
  background: var(--c-fondo-alt);
  color: var(--c-texto-suave);
  border-radius: var(--c-radio);
  padding: 0.8rem 1rem;
}

.tabla-posiciones {
  border-radius: var(--c-radio);
  overflow: hidden;
  border: 1px solid var(--c-borde);
  overflow-x: auto;
}

.tabla-posiciones table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.92rem;
}

.tabla-posiciones thead th {
  background: var(--c-primario);
  color: var(--c-sobre-primario);
  font-weight: 700;
  padding: 0.85rem 1rem;
  text-align: center;
  font-size: 0.88rem;
  white-space: nowrap;
}

.tabla-posiciones tbody td {
  padding: 0.7rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--c-borde);
}

.tabla-posiciones tbody tr:nth-child(even) { background: var(--c-fondo-alt); }
.tabla-posiciones tbody tr:last-child td { border-bottom: none; }

.tabla-posiciones tbody tr.destacada {
  background: var(--c-primario-suave);
  font-weight: 700;
}

.estrellas { white-space: nowrap; }
.estrella { color: var(--c-estrella); }

.tabla-posiciones tbody tr.fila-corte td {
  color: var(--c-texto-suave);
  letter-spacing: 0.25em;
  padding: 0.35rem 1rem;
}

.tabla-vacia {
  padding: 2.5rem 1rem !important;
  color: var(--c-texto-suave);
}

.ranking-pie {
  text-align: center;
  color: var(--c-texto-suave);
  font-size: 0.8rem;
  margin-top: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * Información importante
 * ------------------------------------------------------------------ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.info-item {
  padding: 0.5rem 1.75rem;
  text-align: center;
}

/* Línea fina entre columnas, sin encerrar las tarjetas en una rejilla */
.info-item + .info-item {
  border-left: 1px solid var(--c-borde);
}

.info-icono {
  color: var(--c-primario);
  margin-bottom: 0.7rem;
  display: flex;
  justify-content: center;
}

.info-titulo {
  font-weight: 700;
  color: var(--c-texto);
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
}

.info-detalle {
  color: var(--c-texto-suave);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Preguntas frecuentes
 * ------------------------------------------------------------------ */
.faq-lista {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--c-borde);
  border-radius: var(--c-radio);
  background: #fff;
  overflow: hidden;
}

.faq-pregunta {
  width: 100%;
  display: grid;
  grid-template-columns: 2.2rem 1fr 1.5rem;
  align-items: center;
  gap: 0.9rem;
  background: none;
  border: none;
  padding: 1rem 1.2rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: var(--c-texto);
}
.faq-pregunta:hover { background: var(--c-fondo-alt); }
.faq-pregunta:focus-visible { outline: 3px solid var(--c-acento); outline-offset: -3px; }

.faq-icono {
  color: var(--c-primario);
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-titulo {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
}

.faq-resumen {
  display: block;
  font-size: 0.83rem;
  color: var(--c-texto-suave);
  margin-top: 0.15rem;
}

.faq-flecha {
  color: var(--c-texto-suave);
  transition: transform 0.2s ease;
  font-size: 1.1rem;
  text-align: center;
}
.faq-pregunta[aria-expanded="true"] .faq-flecha { transform: rotate(180deg); }
.faq-pregunta[aria-expanded="true"] .faq-resumen { display: none; }

.faq-respuesta {
  padding: 0 1.2rem 1.1rem 4.1rem;
  color: var(--c-texto-suave);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ------------------------------------------------------------------ *
 * Términos y condiciones
 * ------------------------------------------------------------------ */
.seccion-tyc { padding: 0 0 3.5rem; }

.banda-tyc {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 1rem;
  background: var(--c-primario);
  color: var(--c-sobre-primario);
  border: none;
  border-radius: var(--c-radio);
  padding: 1.15rem 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: filter 0.18s ease;
}
.banda-tyc:hover { filter: brightness(1.12); color: var(--c-sobre-primario); }
.banda-tyc .tyc-icono,
.banda-tyc .tyc-flecha { display: flex; align-items: center; justify-content: center; }
.banda-tyc .tyc-texto { text-align: center; }

/* La flecha va dentro de un círculo, como en la referencia */
.banda-tyc .tyc-flecha {
  border: 1.5px solid currentColor;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  margin-left: auto;
}

.modal-tyc { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-tyc[hidden] { display: none; }
.modal-tyc-fondo { position: absolute; inset: 0; background: rgba(20, 14, 30, 0.55); }
.modal-tyc-caja {
  position: relative;
  background: #fff;
  border-radius: var(--c-radio);
  max-width: 820px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.modal-tyc-caja header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.4rem; border-bottom: 1px solid var(--c-borde);
}
.modal-tyc-caja h3 { color: var(--c-primario); font-weight: 800; }
.modal-tyc-cerrar { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--c-texto-suave); }
.modal-tyc-cuerpo { padding: 1.4rem; overflow-y: auto; font-size: 0.9rem; line-height: 1.65; color: var(--c-texto-suave); }
.modal-tyc-cuerpo h2, .modal-tyc-cuerpo h3 { color: var(--c-texto); margin: 1.2rem 0 0.4rem; font-weight: 700; }
.modal-tyc-cuerpo ul, .modal-tyc-cuerpo ol { margin: 0.5rem 0 0.5rem 1.4rem; }
.modal-tyc-cuerpo li { list-style: inherit; }

/* ------------------------------------------------------------------ *
 * Pie
 * ------------------------------------------------------------------ */
.pie {
  /* Fondo propio: en la referencia el pie es casi negro, no morado oscuro */
  background: var(--c-pie-fondo);
  color: #fff;
  padding: 1.75rem 0;
}

.pie-contenido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pie-marcas {
  display: flex;
  align-items: center;
  gap: 0.9rem 1.4rem;
  flex-wrap: wrap;
}

.pie-marca-texto {
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}

.pie-logos {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/*
 * Dos tratamientos para los logos del pie, según lo que traiga cada archivo.
 * La plantilla elige la clase; ver el comentario en landing/pagina.php.
 */

/* Todos con fondo transparente: se tiñen de blanco, sin recuadros. */
.pie-logos-blancos .pie-marcas img,
.pie-logos-blancos .pie-logos img {
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.pie-logos-blancos .pie-marcas img { max-height: calc(var(--c-logo-alto) * 0.5); }
.pie-logos-blancos .pie-logos img  { max-height: calc(var(--c-logo-alto) * 0.62); }

/* Alguno tiene fondo opaco: pastilla clara para todos, que quede parejo. */
.pie-logos-pastilla .pie-marcas img,
.pie-logos-pastilla .pie-logos img {
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 0.35rem 0.55rem;
}
.pie-logos-pastilla .pie-marcas img { max-height: calc(var(--c-logo-alto) * 0.5 + 0.7rem); }
.pie-logos-pastilla .pie-logos img  { max-height: calc(var(--c-logo-alto) * 0.62 + 0.7rem); }

.pie .separador-logos { background: rgba(255, 255, 255, 0.3); }

.pie-nota {
  margin-top: 1rem;
  font-size: 0.78rem;
  opacity: 0.7;
  text-align: center;
}

/* ------------------------------------------------------------------ *
 * Móvil
 * ------------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  .seccion { padding: 2.75rem 0; }

  /* ---- Barra de logos ----
     Los dos logos se mantienen en una sola línea. Como son lockups apaisados,
     lo que hay que limitar es el ANCHO —no el alto—: con un tope de porcentaje
     cada uno se encoge lo necesario y nunca se parte en dos filas. */
  .barra-marcas { padding: 0.8rem 0; }

  .marcas-cabecera {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }

  .marcas-cabecera img {
    max-height: min(calc(var(--c-logo-alto) * 0.78), 44px);
    max-width: 40%;
    flex: 0 1 auto;
    min-width: 0;
  }

  .separador-logos {
    height: 30px;
    flex: 0 0 auto;
  }

  .hero-campana { padding: 2.25rem 0; }
  .hero-imagen { margin-top: 1.5rem; }

  /* En pantallas pequeñas todo se centra: una columna estrecha alineada a la
     derecha se lee mal, y la imagen siempre queda debajo del texto. */
  .hero-alineado-izquierda .hero-columna-texto,
  .hero-alineado-centro    .hero-columna-texto,
  .hero-alineado-derecha   .hero-columna-texto { text-align: center; }

  .hero-logo-actividad { margin-left: auto !important; margin-right: auto !important; }

  /* Con el texto a la derecha, en móvil el texto va primero */
  .hero-texto_derecha .columns { flex-direction: column-reverse; display: flex; }

  .hero-banner { padding: 0; }
  .hero-banner .container {
    margin-top: -1.25rem;
    padding-bottom: 1.25rem;
  }
  .hero-banner + .seccion { padding-top: 1.75rem; }
  .hero-banner .boton-campana {
    padding: 0.9rem 2rem;
    font-size: 0.95rem;
  }

  /* ---- Cómo participar ----
     En tres columnas el texto queda en una franja estrechísima y el número,
     centrado verticalmente, acaba a la altura del último renglón. En móvil se
     pasa a dos filas: número e icono arriba, texto debajo.

     La tercera columna vacía (1fr) es la que mantiene juntos al número y al
     icono: sin ella, el texto de la fila de abajo —que ocupa todo el ancho—
     estira las dos columnas de arriba y el icono se va al borde derecho. */
  .paso {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 0.55rem 0.85rem;
  }

  .paso-numero,
  .paso-icono { grid-row: 1; }

  .paso-texto {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .paso-icono img { max-height: 40px; }
  .paso-icono svg { width: 36px; height: 36px; }

  .pasos { gap: 2.25rem; }

  /* Las marcas en dos columnas: cuatro nombres no caben en una fila, y
     repartidos 3 + 1 quedan descompensados. */
  .paso-marcas {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 0.45rem 1.5rem;
  }

  .ranking-cabecera {
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
  }

  /* Al cambiar el eje, flex-basis pasa a ser alto: se devuelve al contenido. */
  .ranking-intro { flex: 0 0 auto; }

  .ranking-subtitulo { max-width: none; }
  .consulta-controles { flex-direction: column; }
  .consulta-input, .consulta-boton { width: 100%; }

  .tabla-posiciones table { font-size: 0.85rem; }
  .tabla-posiciones thead th,
  .tabla-posiciones tbody td { padding: 0.6rem 0.5rem; }

  .faq-respuesta { padding-left: 1.2rem; }

  .info-item + .info-item {
    border-left: 0;
    border-top: 1px solid var(--c-borde);
    margin-top: 1.25rem;
    padding-top: 1.5rem;
  }

  /* ---- Pie ----
     Centrado y con las marcas repartidas en dos columnas: en una sola fila no
     caben las cuatro y quedaban 3 + 1. */
  .pie { padding: 2rem 0 1.5rem; }

  .pie-contenido {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }

  .pie-marcas {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 0.8rem 1.75rem;
  }

  .pie-logos {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.75rem;
  }

  .pie-logos img { max-height: 42px; max-width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}