/* Corrección responsive v15: elimina huecos de héroe en tablet y móvil
   sin alterar el diseño de escritorio (>1100px). */
@media (max-width: 1100px) {
  html, body { overflow-x: hidden; }
  main { margin: 0 !important; padding: 0 !important; }

  /* Portada */
  .hero {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
  }
  .hero-copy {
    width: 100% !important;
    align-self: stretch !important;
    padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem) !important;
  }
  .hero-art {
    width: 100% !important;
    min-height: 360px !important;
    height: 360px !important;
    clip-path: none !important;
  }

  /* Páginas de servicio. El JS convierte el hero a .has-photo. */
  .page-hero,
  .page-hero.has-photo {
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  .page-hero.has-photo {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    padding: 0 !important;
    background: #0b3a29 !important;
  }
  .page-hero.has-photo .page-copy {
    order: 1 !important;
    width: 100% !important;
    align-self: stretch !important;
    margin: 0 !important;
    padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem) !important;
    background: #0b3a29 !important;
  }
  .page-hero.has-photo .service-photo {
    order: 2 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
  }
  .page-hero.has-photo .service-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  /* Héroes sin fotografía (legales y páginas auxiliares). */
  .page-hero:not(.has-photo) {
    padding: clamp(2.75rem, 7vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem) !important;
    justify-content: flex-start !important;
  }
  .legal-hero {
    min-height: 0 !important;
  }
}

@media (max-width: 650px) {
  .hero-copy,
  .page-hero.has-photo .page-copy,
  .page-hero:not(.has-photo) {
    padding: 2.25rem 1.25rem !important;
  }

  .hero-art {
    min-height: 250px !important;
    height: 250px !important;
  }

  .page-hero.has-photo .service-photo {
    aspect-ratio: 4 / 3 !important;
  }

  .page-hero h1,
  .page-hero.has-photo h1 {
    font-size: clamp(2.65rem, 14vw, 4rem) !important;
  }

  .bigword { display: none !important; }
}

/* v16: corrige el conflicto entre el menú responsive y las redes sociales del footer.
   La regla global para nav en tablet/móvil estaba convirtiendo .social-links en un
   elemento absoluto en la parte superior de la página, creando el gran hueco blanco. */
@media (max-width: 1100px) {
  footer nav.social-links {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 1.25rem 0 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: .65rem !important;
  }
  footer nav.social-links a {
    position: static !important;
  }
}