/* ═══ RESPONSIVE ═══
   Casi todo el sitio se adapta solo: las rejillas usan `auto-fit` con un ancho
   mínimo, y los márgenes y tamaños se calculan con `clamp()`. Aquí quedan solo
   los cambios que no son de grado sino de forma —la barra que se convierte en
   menú desplegable— y unos pocos ajustes de piezas concretas. */

@media (max-width:980px){
  /* La navegación deja de ser una fila y pasa a ser un panel desplegable. */
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(14px);
    flex-direction:column;
    padding:20px;gap:6px;
    border-top:1px solid var(--line);
    align-items:stretch;
    box-shadow:0 10px 30px rgba(12,43,25,.1);
  }
  .nav-links.open{display:flex}
  .nav-tab{padding:12px 20px;text-align:left}
  .nav-tab.active::after{display:none}
  .nav-cta{margin-left:0;justify-content:center;margin-top:8px}
  .menu-toggle{display:grid;place-items:center;width:42px;height:42px}

  /* El velo del hero en vertical va al final de la hoja: necesita además la
     condición de movimiento. */

  /* La línea punteada del proceso solo tiene sentido en una única fila. */
  .proceso-grid::before{display:none}

  /* El botón de WhatsApp se queda en el icono: la etiqueta robaría pantalla. */
  .wa-flotante{
    right:18px;bottom:18px;
    height:56px;width:56px;padding:0;
    justify-content:center;
  }
  .wa-flotante-texto{display:none}
  .wa-flotante:hover,
  .wa-flotante:focus-visible{gap:0}

  .drone-icon{width:140px;height:140px}
  .intro-logo{width:min(260px, 68vw)}
}

/* ═══ EL VELO DEL HERO EN VERTICAL ═══
   En vertical el texto ocupa todo el ancho: el velo ya no puede cargar a un
   lado, así que degrada de arriba abajo. Denso donde está el titular, más
   abierto abajo, por debajo de donde acaba el texto. El valor sale de medir:
   sobre los fotogramas más oscuros deja el titular en 5:1 de contraste.

   La condición de movimiento no sobra: con «movimiento reducido» no hay vídeo
   detrás —se esconde— y este degradado lavaría la escena dibujada. Al dejarlo
   fuera, manda el velo plano que define `home.css`. Esta hoja carga la última,
   así que sin esa condición pisaría aquella regla. */
@media (max-width:980px) and (prefers-reduced-motion: no-preference){
  .hero-velo{
    background:linear-gradient(
      to bottom,
      rgba(255,255,255,.58) 0%,
      rgba(255,255,255,.52) 78%,
      rgba(255,255,255,.34) 100%
    );
  }
}