/* ==========================================================================
   Estilos propios de «Industrias que atendemos»
   Spec: figma/spec/04-industrias.md
   ========================================================================== */

/* --- Encabezado de la página ---------------------------------------------
   El frame no tiene hero: el título arranca en y=146, es decir 49 px por
   debajo de la cabecera (97 px de alto), y tras el último bloque quedan
   128 px de aire hasta el final del frame (2186 − 2058).
   Ambos van en clamp para que en móvil no se coman la pantalla; el máximo es
   el valor exacto del diseño. */

.industrias {
  padding-block: clamp(2rem, 2.552vw, 3.0625rem) clamp(3.5rem, 6.667vw, 8rem);
}

/* Sangría x=120 del spec: el .contenedor estándar más --margen-interior,
   igual que .cabecera__interior en componentes.css.
   Va con calc porque este elemento ES el .contenedor: un padding-inline
   suelto sustituiría al suyo en lugar de sumarse. */
.industrias__interior {
  padding-inline: calc(var(--margen) + var(--margen-interior));
}

/* 28 px 600 #333333 — el máximo de --t-h3 es justo 28. */
.industrias__titulo {
  font-size: var(--t-h3);
  color: var(--gris-texto);
}

/* 14 px 400 #333333, a 6 px del título: 186 − (146 + 34). */
.industrias__bajada {
  margin-top: 0.375rem;
  font-size: var(--t-sm);
}

/* --- Lista de industrias --------------------------------------------------
   Seis bloques idénticos. En el spec arrancan en y=247, 553, 866, 1176, 1486
   y 1796, con huecos de 44, 50, 48, 48 y 48 px entre el fondo de una imagen y
   el arranque de la siguiente. Se normalizan a los 48 px que se repiten
   cuatro veces; la desviación máxima es de 4 px. */

.industrias__lista {
  display: grid;
  gap: 3rem;             /* 48 px entre bloques */
  margin-top: 2.75rem;   /* 44 px: 247 − (186 + 17) */
}

/* --- Bloque de industria --------------------------------------------------
   Imagen a la izquierda (x=120, 682 de ancho) y columna de texto a la
   derecha (x=886, hasta la sangría derecha en 1800 → 914 de ancho), con
   84 px de hueco: 886 − (120 + 682).
   Las columnas van en fr, no en px, para que la proporción del diseño
   aguante al estrechar la ventana. */

.industria {
  display: grid;
  grid-template-columns: minmax(0, 682fr) minmax(0, 914fr);
  gap: clamp(1.5rem, 4.375vw, 5.25rem);   /* máximo 84 px */
  /* En el diseño la columna de texto queda centrada respecto a la imagen en
     los seis bloques (comprobado bloque a bloque). */
  align-items: center;
}

.industria__foto {
  width: 100%;
  height: auto;
  aspect-ratio: 682 / 262;   /* tamaño exacto de la imagen en el spec */
  object-fit: cover;
  /* El spec da radio 4 y borde 1px #999999. No hay token de radio tan
     pequeño: los tres existentes son 24, 30 y 51. */
  border-radius: 4px;
  border: 1px solid var(--gris-borde);
}

.industria__contenido {
  display: grid;
  justify-items: start;
}

/* 22 px 600 #333333 — el máximo de --t-tarjeta es justo 22. */
.industria__titulo {
  font-size: var(--t-tarjeta);
  color: var(--gris-texto);
}

/* 16 px 400 #333333, ancho de párrafo 797 px, a 13 px del título:
   645 − (605 + 27). */
.industria__texto {
  max-width: 797px;
  margin-top: 0.8125rem;
  font-size: var(--t-base);
}

/* El botón mide 260×52 con radio 51 (.boton--oliva + .boton--estrecho ya lo
   resuelven); lo único propio es el cuerpo de 13 px, que no tiene token
   —queda entre --t-xs (12) y --t-sm (14)—, y la separación de 17 px respecto
   al texto: 1011 − (956 + 38).
   En el spec ese hueco baila entre 17, 21 y 29 px según el bloque; se toma
   el 17 que se repite en cuatro de los seis. */
.industria__boton {
  margin-top: 1.0625rem;
  font-size: 0.8125rem;
  /* El rectángulo del CTA lleva borde #999999 en el spec. Se reproduce igual
     que en .boton--solicitud de producto.css, que es el mismo botón oliva de
     13 px y ya lo llevaba. */
  border: 1px solid var(--gris-borde);
}

/* --- Responsive -----------------------------------------------------------
   No hay diseño móvil. Mismo criterio que la portada, ver DECISIONES.md. */

/* Por debajo de 1100 px —el punto en el que el resto del sitio colapsa sus
   rejillas— el bloque pasa a una sola columna con la imagen arriba, que es
   ya el orden del HTML. */
@media (max-width: 1100px) {
  .industria {
    grid-template-columns: 1fr;
  }
}

/* Por debajo de 640 px la proporción 682×262 dejaría la fotografía en una
   franja de unos 140 px de alto, ilegible. Se ensancha a 16/9. Inventado. */
@media (max-width: 640px) {
  .industria__foto {
    aspect-ratio: 16 / 9;
  }

  /* 40 px en vez de 48: al apilarse imagen y texto los bloques se alargan y
     el hueco del diseño se lee como demasiado. Inventado. */
  .industrias__lista {
    gap: 2.5rem;
  }
}