/* css/layout.css */
.container { width: var(--container); margin-inline: auto; }

section { padding-block: var(--section-pad); }

/* ── HERO ── */
#hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: var(--nav-h);
}

/* ── SERVICES ── */
#services .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* ── GALLERY ── */
#gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
}
#gallery .gallery-grid .card--wide { grid-column: span 2; }

/* ── SECTORS ── */
#sectors .sectors-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* ── EQUIPMENT ── */
#equipment .eq-table { width: 100%; border-collapse: collapse; }

/* ── WHY LASER ── */
#why .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 64px;
}
#why .benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}

/* ── CERTIFICATIONS ── */
#certifications { text-align: center; }

/* ── CONTACT ── */
#contact .contact-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
#contact .contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* ── FOOTER ── */
footer .footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* ── RESPONSIVE ── */
/* ── NAV: evita que el nombre de la empresa se solape con los enlaces
   en anchos intermedios (~portátil). Los enlaces bajan a una segunda
   fila en vez de superponerse. ── */
@media (min-width: 601px) and (max-width: 1750px) {
  nav#nav {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
    padding-block: 10px;
  }
  #nav a.nav-logo { flex-basis: 100%; }
  #hero { padding-top: calc(var(--nav-h) + 46px); }
}
@media (min-width: 601px) and (max-width: 960px) {
  #hero { padding-top: calc(var(--nav-h) + 92px); }
}
@media (min-width: 601px) and (max-width: 780px) {
  #nav ul.nav-links { flex-wrap: wrap; row-gap: 8px; column-gap: 20px; }
  #hero { padding-top: calc(var(--nav-h) + 130px); }
}

/* ── EMPRESA & PROCESO responsive ── */
@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 48px; }
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-steps::before { display: none; }
}

@media (max-width: 900px) {
  #hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { min-height: 55vw; }

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

  #gallery .gallery-grid { grid-template-columns: 1fr 1fr; }
  #gallery .gallery-grid .card--wide { grid-column: span 2; }

  .sector-content.active { grid-template-columns: 1fr; }
  .sector-media { display: none; }

  #why .stats-grid { grid-template-columns: repeat(2, 1fr); }
  #why .benefits-grid { grid-template-columns: repeat(2, 1fr); }

  #contact .contact-hero { grid-template-columns: 1fr; }
  #contact .contact-body { grid-template-columns: 1fr; }
  .addr-cards { grid-template-columns: 1fr; }

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

  .contact-cta-strip { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 600px) {
  #nav ul.nav-links { display: none; }
  #nav span.nav-logo-name { display: none; }
  #services .services-grid { grid-template-columns: 1fr; }
  #gallery .gallery-grid { grid-template-columns: 1fr; }
  #gallery .gallery-grid .card--wide { grid-column: span 1; }
  #why .stats-grid { grid-template-columns: repeat(2, 1fr); }
  #why .benefits-grid { grid-template-columns: 1fr; }
  footer .footer-cols { grid-template-columns: 1fr; }
  .eq-table { font-size: 0.72rem; }
  .cert-shields { gap: 16px; }
  .about-features { grid-template-columns: 1fr; }
  .process-steps { grid-template-columns: 1fr; }
}