/* WS Editore — ajustes de pantalla chica y mediana.
   Tres cosas, todas medidas con el navegador de verdad:

   1) y 2) Dos bloques del inicio llevan su rejilla pegada dentro del HTML
   ("grid-template-columns:1fr 1fr" en contacto y "1.15fr .85fr" en el Piloto 2027).
   Un estilo en línea gana sobre cualquier CSS, así que no se apilaban en celular y
   empujaban la página de costado: la web "bailaba" al deslizar.
   Medido: 390 px -> 47 px de desborde (ahora 2) | 360 px -> 32 px (ahora 0).

   3) La barra de menú se muestra horizontal hasta 720 px, pero necesita 830 px
   para caber: entre 721 y 830 px la página se corría de lado (62 px en una tablet
   de 768). Se adelanta el menú de hamburguesa a 860 px, con las mismas reglas
   que ya usa el sitio en celular, así el menú se ve y se comporta igual.
   Medido: 768 px -> 62 px de desborde (ahora 0).

   El !important es obligatorio en los puntos 1 y 2: es la única forma de
   ganarle a un estilo puesto en línea.
   Alcance: SOLO estos dos bloques del inicio y el menú. */

@media (max-width: 960px){
  #contacto .container{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  #piloto2027 .container{
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
}

@media (max-width: 860px){
  .nav-toggle{ display: block; }
  .main-nav{
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 1.4rem 1.4rem;
    gap: .2rem;
  }
  .main-nav.open{ display: flex; }
  .main-nav a{ padding: .6rem 0; width: 100%; }
}

/* 4) El eslogan del hero (IMAGINA · IMPRIME · IMPACTA, el texto grande y tenue del fondo).
   Estaba anclado a la derecha (right:-1rem) con white-space:nowrap, dentro de un hero con
   overflow:hidden. Medido con el navegador: en celular la frase mide 616 px y el héroe 390,
   así que se recortaban 210 px DEL INICIO ("IMAGINA ·" se perdía); en escritorio se salía
   16 px por la derecha y no coincidía con el margen del contenido (se veía desalineado).
   Ahora va centrada y con tamaño atado al ancho de pantalla: la frase entra COMPLETA
   siempre (616 px de frase a 38.4 px de fuente => 14.85 veces el tamaño de fuente, por eso
   el tope 6.2vw). Medido después: 360 px -> entra con 14 px de aire por lado; 1920 px -> 1188 px. */
.hero::after{
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  bottom: .4rem;
  font-size: min(5rem, 6vw);
  text-align: center;
  max-width: 100%;
}