/* ==========================================================================
   main.css — Layout global, header/footer, base
   Serrato HH
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-offwhite);
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-3);
}

h2 { font-size: var(--fs-h2); }

p { margin: 0 0 var(--space-2); }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-2);
  background: var(--color-navy);
  color: var(--color-white);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Header ---------- */
.site-header {
  background: var(--color-navy);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  min-height: 88px;
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

/* El original oculta el botón "Contáctanos!" del header en móvil sin
   dejar ninguna alternativa (el burger está deshabilitado a propósito
   porque no hay ítems de menú: clase "no-nav-links"). Replicado tal
   cual, confirmado por el HTML guardado en RECURSOS. */
@media (max-width: 767px) {
  .site-header .btn.site-header__cta { display: none; }
}

/* ---------- Hero ---------- */
/* Grilla portada 1:1 desde el Fluid Engine de Squarespace (extraída del
   HTML guardado en RECURSOS): mismos gutters, mismo número de filas y
   columnas, y los mismos grid-area por bloque. Nada de proporciones
   aproximadas — son los valores reales del sitio. */
.hero {
  background: var(--color-offwhite);
  overflow: hidden;
}

.hero__grid {
  --grid-gutter: calc(6vw - 9px);
  --cell-max-width: calc((1500px - 9px * 7) / 8);
  display: grid;
  grid-template-rows: repeat(16, minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 23px;
  column-gap: 9px;
}

.hero__text {
  grid-area: 2 / 2 / 17 / 8;
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.hero__text p { max-width: none; }

.hero__image {
  grid-area: 1 / 9 / 17 / 11;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 768px) {
  .hero__grid {
    --grid-gutter: calc(4vw - 9px);
    --cell-max-width: calc((1500px - 9px * 23) / 24);
    --container-width: min(1500px, calc(100vw - 4vw * 2));
    grid-template-rows: repeat(10, minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
  .hero__text {
    grid-area: 2 / 3 / 10 / 18;
    justify-content: center;
  }
  .hero__text p { max-width: 46ch; }
  .hero__image { grid-area: 1 / 22 / 11 / 27; }
}

/* ---------- Coverage / Cobertura ---------- */
/* Misma idea: grilla portada del Fluid Engine. El texto tiene z-index
   más alto que el mapa y la foto de bodega — se superponen (el mapa
   arranca en la fila 1, el texto en la fila 3) y el texto queda encima,
   tal como en el original. La foto de bodega es parte de esta MISMA
   sección/grilla en el sitio real, no una sección aparte. */
.coverage {
  background: var(--color-cream);
  position: relative;
}

.coverage__grid {
  --grid-gutter: calc(6vw - 11px);
  --cell-max-width: calc((1500px - 11px * 7) / 8);
  display: grid;
  grid-template-rows: repeat(27, minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  row-gap: 11px;
  column-gap: 11px;
}

.coverage__text {
  grid-area: 3 / 2 / 23 / 10;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.coverage__text p { max-width: 55ch; }

.coverage__map {
  grid-area: 1 / 3 / 9 / 11;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coverage__map img {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.9;
}

.coverage__photo {
  grid-area: 23 / 1 / 28 / 11;
  z-index: 1;
  overflow: hidden;
}

.coverage__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (min-width: 768px) {
  .coverage__grid {
    --grid-gutter: calc(4vw - 11px);
    --cell-max-width: calc((1500px - 11px * 23) / 24);
    --container-width: min(1500px, calc(100vw - 4vw * 2));
    grid-template-rows: repeat(24, minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
  .coverage__text {
    grid-area: 3 / 3 / 15 / 20;
  }
  .coverage__map { grid-area: 1 / 16 / 17 / 27; }
  .coverage__photo { grid-area: 17 / 1 / 25 / 27; }
}

/* ---------- Clients / Clientes ---------- */
.clients {
  background: var(--color-orange);
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

.clients h2 { color: var(--color-white); }

.clients__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-5);
}

/* El original usa 3 logos por fila en móvil (no 2) — grilla de 8
   columnas donde cada logo ocupa 2 y deja 1 de separación. Un solo
   breakpoint a 767px, igual que el resto del sitio. */
@media (max-width: 900px) {
  .clients__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-text-on-dark);
  padding-top: var(--space-6);
  padding-bottom: var(--space-6);
}

.site-footer__logo img { height: 34px; width: auto; margin-bottom: var(--space-4); }

.site-footer__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  opacity: 0.9;
}