/* ==========================================================================
   RESPONSIVE.CSS
   Ajustes por breakpoint. Se cargan al final para poder sobrescribir
   con comodidad los estilos "desktop-first" de los demás archivos.
   Breakpoints: 960px (tablet) y 640px (mobile).
   ========================================================================== */

@media (max-width: 960px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }

  .hero__art {
    order: -1;
    max-width: 420px;
    margin-inline: auto;
  }

  .hero h1 {
    max-width: none;
  }

  .quote__grid {
    grid-template-columns: 1fr;
  }

  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

@media (max-width: 960px) {
  .header__nav {
    position: fixed;
    inset: 68px var(--container-pad) auto var(--container-pad);
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    padding: var(--space-3);
    box-shadow: var(--shadow-soft);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-base), opacity var(--transition-base);
  }

  .header--open .header__nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  /* En mobile el CTA vive dentro del menú desplegable y como botón
     flotante de WhatsApp: se evita duplicarlo en la barra. */
  .header__cta {
    display: none;
  }

  .header__toggle {
    display: flex;
  }
}

@media (max-width: 640px) {
  .section {
    padding-block: var(--space-5);
  }

  .quote__form-row {
    grid-template-columns: 1fr;
  }

  .why {
    clip-path: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  }

  .footer__bottom {
    flex-direction: column;
  }
}