/* ============================================
   Ajustes responsive globales
   (los ajustes propios de cada módulo viven
   en su archivo; aquí van los transversales)
   ============================================ */

/* ---- Tablets grandes y laptops chicas ---- */
@media (max-width: 1199.98px) {
  .hero-linea-grande {
    font-size: calc(var(--tamano-gigante) * 1.3);
  }
}

/* ---- Tablets ---- */
@media (max-width: 991.98px) {
  .hero {
    padding-top: 6.5rem;
    min-height: auto;
  }

  .visita-mapa,
  .visita-mapa iframe {
    min-height: 20rem;
  }
}

/* ---- Móviles ---- */
@media (max-width: 575.98px) {
  :root {
    --espacio-seccion: 3.5rem;
  }

  .hero-acciones .boton-principal,
  .hero-acciones .boton-secundario {
    width: 100%;
    text-align: center;
  }

  /* Las fotos de historia se apilan y pierden el escalón */
  .historia-fotos {
    grid-template-columns: 1fr;
  }

  .historia-foto-baja {
    margin-top: 0;
  }

  /* Área táctil cómoda para los enlaces de playlist */
  .playlists-enlaces a {
    padding-block: 0.75rem;
  }

  /* El catálogo del menú pasa a dos columnas compactas */
  .carta-grid {
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 0.9rem;
  }

  .carta-controles {
    flex-direction: column;
    align-items: stretch;
  }

  .carta-busqueda {
    width: 100%;
  }

  .lista-colaboradores li {
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
  }

  .pie-redes {
    flex-direction: column;
    gap: 0.8rem;
  }

  .pie-redes-lista {
    justify-content: center;
  }

  .pie-inferior {
    flex-direction: column;
    text-align: center;
  }
}

/* ---- Pantallas muy grandes: contener la escala ---- */
@media (min-width: 1600px) {
  .hero-fondo {
    background-position: center 25%;
  }
}