/**
 * RESPONSIVE
 * ----------------------------------------------------------------
 * Enfoque "mobile first": las reglas base de los demás archivos
 * ya están pensadas para móvil. Aquí solo se añade lo necesario
 * para pantallas medianas y grandes.
 * ----------------------------------------------------------------
 */

/*
 * Excepción puntual con max-width (el resto del archivo solo usa
 * min-width, mobile-first): corrige un problema real de espaciado
 * detectado en móvil, sin tocar el aspecto ya publicado en escritorio.
 *
 * Cuando "seccion" y "contenedor" van en el mismo elemento (Conócenos,
 * Galería, Opiniones, Contacto), el padding lateral de ".contenedor"
 * queda anulado por el de ".seccion" (misma prioridad CSS; ".seccion"
 * está definido después en layout.css). El contenido de esas cuatro
 * secciones tocaba el borde de la pantalla en vez de guardar el mismo
 * margen que el resto. El pie de página tampoco tenía margen lateral
 * propio. Se limita a menos de 900px (punto de corte de escritorio en
 * este proyecto) a petición expresa de no modificar el escritorio.
 */
@media (max-width: 899px) {
  .seccion.contenedor,
  .pie-pagina {
    padding-left: var(--espacio-md);
    padding-right: var(--espacio-md);
  }
}

/* Tablet en adelante */
@media (min-width: 700px) {
  /* En móvil, "cover" ya muestra el 100% de la altura de la foto de la
     furgoneta (recorta por los lados en su lugar), así que no hace
     falta tocar nada ahí. En tablet/escritorio, en cambio, el hero es
     mucho más panorámico que la foto (casi cuadrada) y "cover" tiene
     que recortar cada vez más arriba y abajo cuanto más ancha es la
     pantalla. Subir la altura aquí (y solo aquí) reduce ese recorte
     sin tocar el encuadre ya bueno de móvil ni desbocar la altura en
     escritorio. */
  .hero {
    min-height: 90vh;
  }

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

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

  .ubicacion-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .fila-imagen-texto {
    grid-template-columns: 1fr 1fr;
  }

  /* A partir de aquí ya hay espacio de sobra: recuperamos el relleno
     generoso de los botones definido en el diseño original. */
  .boton {
    padding: var(--espacio-xs) var(--espacio-lg);
  }
}

/* Escritorio: activar menú horizontal */
@media (min-width: 900px) {
  /* El bloqueo de scroll del panel móvil no aplica al menú horizontal */
  body.menu-movil-abierto {
    overflow: visible;
  }

  /* Con nav horizontal ya hay espacio de sobra: recuperamos el tamaño
     original de la cabecera y su botón de acción, y el logo puede
     crecer algo más que en móvil (más aire alrededor al no compartir
     fila con el botón de menú). */
  .cabecera-barra {
    padding: var(--espacio-sm) var(--espacio-md);
    gap: var(--espacio-sm);
  }

  .cabecera-marca img {
    height: 58px;
  }

  .menu-boton {
    display: none;
  }

  /* El menú vuelve a ser una barra horizontal normal: nada de panel
     fijo, fondo oscurecido ni botón de cerrar (eso es solo para el
     panel móvil). */
  .menu-fondo {
    display: none !important;
  }

  /* "flex: 1" hace que la navegación ocupe el espacio que queda junto
     al logo (ya no hay botón "Llamar" al otro lado) y "justify-content:
     center" centra el propio menú dentro de ese espacio, en vez de
     quedar pegado al borde derecho. */
  .menu-principal {
    display: flex;
    flex: 1;
    flex-direction: row;
    justify-content: center;
    position: static;
    height: auto;
    width: auto;
    max-width: none;
    background: none;
    border-left: none;
    overflow: visible;
    padding: 0;
  }

  .menu-cerrar {
    display: none;
  }

  .menu-principal ul {
    flex-direction: row;
    padding: 0;
    gap: var(--espacio-xs);
  }

  .menu-principal a {
    padding: var(--espacio-xs) var(--espacio-sm);
    font-size: 1rem;
    border-bottom: none;
  }

  .cuadricula-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}