/* --------------------------------------------------------------------------
   21. DISEÑO RESPONSIVO (MEDIA QUERIES)
   -------------------------------------------------------------------------- */

/* Tablets y Pantallas Medianas (Menos de 1024px) */
@media (max-width: 1024px) {
  h1 {
    font-size: 2.85rem !important;
  }

  .hero-layout,
  .contact-layout,
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .product-preview {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }

  .heading-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }



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

  .target-card {
    grid-template-columns: minmax(150px, 40%) minmax(0, 1fr);
    column-gap: 20px;
  }
}

/* Tablets Pequeñas (Menos de 768px) */
@media (max-width: 768px) {
  .site-nav {
    display: none;
    /* Ocultar menú por defecto para activar vía JS */
    position: absolute;
    top: 84px;
    left: 0;
    width: 100%;
    background-color: white;
    flex-direction: column;
    padding: 28px;
    gap: 24px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: var(--shadow-lg);
  }

  /* Cuando el menú móvil está abierto */
  .site-nav.open {
    display: flex;
  }

  .site-nav .button-primary {
    width: min(100%, 320px);
  }

  .nav-toggle {
    display: flex;
  }

  /* Animación del botón hamburguesa */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

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

  .target-card {
    grid-template-columns: minmax(190px, 38%) minmax(0, 1fr);
  }

  .workflow {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .workflow::before {
    display: none;
    /* Ocultar la línea de flujo en móvil */
  }

  .map-interface {
    grid-template-columns: 1fr;
    height: auto;
  }

  .map-sidebar {
    border-right: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    height: 190px;
  }

  .map-canvas {
    height: 260px;
  }

  .floating-metric {
    position: static;
    margin: 14px 0;
    transform: none !important;
  }

  .footer-main {
    grid-template-columns: 1fr;
    grid-template-areas: 'brand' 'contact' 'nav';
    align-items: flex-start;
    gap: 24px;
  }

  .footer-main nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 20px;
  }
}

/* Teléfonos Móviles (Menos de 576px) */
@media (max-width: 576px) {
  h1 {
    font-size: 2.35rem !important;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-assurances {
    flex-direction: column;
    gap: 14px;
  }

  .hero-product-shot figcaption {
    left: 10px;
    bottom: 10px;
    padding: 6px 10px;
    font-size: 0.65rem;
  }




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

  .form-field {
    grid-column: span 1;
  }

  .contact-form {
    padding: 28px;
  }

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

  .target-card {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    padding: 16px;
  }

  .target-card-image {
    height: auto;
    aspect-ratio: 16 / 10;
    grid-row: auto;
  }

  .target-card h3 {
    margin-top: 20px;
  }

  .trust-panel {
    padding: 28px 22px;
  }

  /* Banner de descripción */
  .intro-banner-card {
    padding: 28px 24px;
  }

  .intro-banner-card .quote-text {
    font-size: 0.95rem;
    line-height: 1.65;
  }
}