/* ==========================================================================
   Estilos propios de la página de Sostenibilidad
   Spec: figma/spec/05-sosteibilidad.md
   (el frame de Figma se llama «05 Sosteibilidad», con la errata; el archivo
   de la maqueta va bien escrito)
   ========================================================================== */

/* --- Caja de contenido ----------------------------------------------------
   En esta pantalla el contenido no llega a ocupar los 1800 que deja el
   .contenedor: va de x=195 a x=1726, es decir 1531 px centrados dentro de
   los 1920 del diseño. Se reproduce con un ancho máximo en lugar de con
   sangrías, para que al estrechar la ventana mande el padding del
   .contenedor y no haya que corregir nada más.

   Candidato a subir a componentes.css: las demás páginas interiores
   arrancan en la misma horquilla (170–195 en el spec). */

.contenido-interior {
  width: 100%;
  max-width: 1531px; /* 1726 − 195, el ancho de contenido en Figma */
  margin-inline: auto;
}

/* --- Portada --------------------------------------------------------------
   Banda a sangre de 1920×280 justo debajo de la cabecera. Usa .bloque-foto,
   pero con el título alineado a la izquierda en lugar de centrado. */

.portada {
  /* El velo del diseño es #0000006E, un 43 % de negro; el token medio
     es el 45 %. Ver DECISIONES.md, punto 3. */
  --velo: var(--velo-medio);
  min-height: 280px; /* alto exacto de la banda en Figma */
  padding-block: 2rem; /* no está en el diseño: evita que el título toque los bordes al estrechar */
  text-align: left; /* .bloque-foto centra por defecto */
}

.portada__titulo {
  max-width: 628px; /* ancho del bloque de texto en Figma: fuerza el mismo corte de línea */
  font-size: var(--t-h2); /* 36 px */
}

/* --- Bloques de dos columnas ----------------------------------------------
   Foto a la izquierda y texto a la derecha. Se repite dos veces (y=443 y
   y=1405) con la misma disposición y la misma imagen. */

.bloque-doble {
  /* En Figma quedan 67 px entre la portada y el primer bloque y 65 hasta la
     banda de bosque. Se unifican en 66. */
  padding-block: clamp(2.5rem, 3.44vw, 4.125rem);
}

.bloque-doble__interior {
  display: grid;
  /* 669 de foto + 103 de hueco + 759 de texto = los 1531 de contenido.
     En proporciones (fr) y no en píxeles, para que el bloque se encoja
     entero en lugar de desbordarse. */
  grid-template-columns: minmax(0, 669fr) minmax(0, 759fr);
  gap: clamp(2rem, 5.36vw, 6.4375rem); /* 103 px: 967 − (195 + 669) */
  align-items: center;
}

.bloque-doble__foto {
  width: 100%;
  height: auto;
  /* La foto original es vertical (936×1338) y en el diseño va recortada a un
     rectángulo apaisado. `cover` recorta por el centro. */
  aspect-ratio: 669 / 315; /* tamaño de la foto en Figma */
  object-fit: cover;
  border-radius: 44px; /* radio del rectángulo en Figma */
}

.bloque-doble__texto {
  font-size: var(--t-base); /* 16 px en el spec; el cuerpo no escala */
}

/* Los párrafos se separan por el renglón en blanco que Figma deja entre
   ellos: 19,36 px, que es el interlineado del cuerpo de 16. */
.bloque-doble__texto > * + *,
.bloque-cierre__texto > * + * {
  margin-top: 1.25rem;
}

/* En Figma las cinco viñetas son un carácter «•» tecleado dentro del mismo
   bloque de texto, con las líneas seguidas. Aquí son una lista de verdad y
   el marcador lo pone el CSS.
   Candidato a subir a componentes.css. */
.lista-vinetas {
  list-style: disc;
  padding-left: 1.0625rem; /* 17 px: lo que ocupan «•» más su espacio en el original */
}

/* --- Banda «Nuestro compromiso» -------------------------------------------
   Sección a sangre de 523 px con foto de bosque aéreo, título y dos
   párrafos, todo centrado. */

.banda {
  --velo: var(--velo-medio); /* #0000006E ≈ 43 %, igual que la portada */
  min-height: 523px; /* alto exacto de la banda en Figma */
  padding-block: 3rem; /* inventado: respiración al estrechar; no altera el alto a 1920 */
}

.banda__interior {
  /* 764 de texto más los 60 de margen del .contenedor a cada lado. */
  max-width: 884px;
}

.banda__titulo {
  max-width: 467px; /* ancho del título en Figma: mantiene el corte en dos líneas */
  margin-inline: auto;
  font-size: var(--t-h3); /* 28 px */
  margin-bottom: clamp(2rem, 3.39vw, 4.0625rem); /* 65 px: 1063 − 998 */
}

.banda__texto {
  font-size: var(--t-base); /* 16 px */
}

.banda__texto > * + * {
  margin-top: 1.25rem; /* el mismo renglón en blanco de 19,36 */
}

/* --- Bloque final «Mucho más que un empaque» ------------------------------- */

.bloque-cierre {
  /* Entre el bloque anterior y este hay 141 px: 66 los pone el bloque de
     arriba y los 75 restantes, este. Por debajo no hay referencia —el frame
     de Figma se acaba sin pie—, así que se usa el espaciado de sección. */
  padding-top: clamp(2.5rem, 3.91vw, 4.6875rem);
  padding-bottom: var(--gap-seccion);
}

.bloque-cierre__interior {
  display: grid;
  /* 236 de título + 108 de hueco + 824 de texto = 1168. En Figma este bloque
     no está centrado: se pega a la derecha del contenido (x=578 → x=1746).
     Con el ancho máximo y `margin-inline-start: auto` sale a x=558, veinte
     píxeles a la izquierda del original. */
  grid-template-columns: minmax(0, 236fr) minmax(0, 824fr);
  column-gap: clamp(1.5rem, 5.63vw, 6.75rem); /* 108 px: 922 − (578 + 236) */
  row-gap: 3rem; /* 48 px: 2118 − 2070, lo que separa el botón del texto */
  max-width: 1168px;
  margin-inline-start: auto;
}

.bloque-cierre__titulo {
  max-width: 236px; /* ancho del título en Figma: parte en dos líneas */
  font-size: var(--t-h3); /* 28 px */
}

.bloque-cierre__texto {
  font-size: var(--t-base); /* 16 px */
}

.bloque-cierre__boton {
  grid-column: 2; /* debajo del texto, alineado con su borde izquierdo */
  justify-self: start;
  /* El rótulo de este botón va a 13 px en el spec, no a los 16 del resto del
     sitio. Se corrige aquí para no tocar componentes.css. */
  font-size: 0.8125rem; /* 13 px */
  /* El rectángulo del CTA lleva borde #999999, igual que el de la ficha de
     producto (.boton--solicitud en producto.css). Con `box-sizing: border-box`
     el botón sigue midiendo los 364×52 del spec. */
  border: 1px solid var(--gris-borde);
}

/* --- Responsive -----------------------------------------------------------
   No hay diseño móvil. Mismo criterio que la portada del sitio: las dos
   rejillas de dos columnas colapsan a una. Anotado en la respuesta. */

@media (max-width: 900px) {
  .bloque-doble__interior,
  .bloque-cierre__interior {
    grid-template-columns: minmax(0, 1fr);
  }

  .bloque-cierre__interior {
    max-width: none;
  }

  .bloque-cierre__boton {
    grid-column: auto;
  }
}