/* ==========================================================================
   Estilos propios de la página Nosotros
   Medidas tomadas de figma/spec/05-nosotros.md (diseño a 1920 px).
   ========================================================================== */

/* --- Portada --------------------------------------------------------------
   Imagen a sangre (spec: 1918×423 en @2,96) con el texto encima, a la
   izquierda. En el spec el texto arranca en x=184, es decir 64 px más
   adentro que la sangría interior estándar de 120 px que dan
   --margen + --margen-interior. */

.presentacion {
  /* 64 px a 1920. Se encoge con el viewport igual que las dos sangrías
     de tokens.css, para que la proporción se mantenga. */
  --sangria-presentacion: clamp(0rem, 3.334vw, 4rem);

  display: grid;
  grid-template-areas: 'lienzo';
}

.presentacion__foto {
  grid-area: lienzo;
  width: 100%;
  /* height: auto anula el atributo height del HTML —que está para que no
     salte el layout mientras carga— y deja mandar a aspect-ratio. */
  height: auto;
  /* El archivo original es 1920×549 y en el diseño se muestra en una caja
     de 1920×423: recorte centrado arriba y abajo, sin deformar. */
  aspect-ratio: 1920 / 423;
  object-fit: cover;
}

/* El texto va superpuesto a la foto y centrado en su altura: en el spec
   ocupa 247–349 dentro de una imagen que va de 96 a 519. */
.presentacion__interior {
  grid-area: lienzo;
  align-self: center;
  /* Este elemento ES el .contenedor, así que la sangría extra se suma aquí
     con calc en lugar de añadir un padding suelto que lo sustituiría.
     Mismo criterio que .cabecera__interior en componentes.css. */
  padding-inline: calc(var(--margen) + var(--margen-interior) + var(--sangria-presentacion));
}

.presentacion__titulo {
  max-width: 628px; /* ancho exacto de la caja de texto en el spec */
  font-size: var(--t-h3); /* 28 px */
  /* En el render sólo «el aliado estratégico» va en negrita; el resto del
     texto es de peso normal, aunque el spec declare 600 para todo el nodo. */
  font-weight: var(--peso-normal);
  color: var(--gris-texto);
  /* base.css pone text-wrap: balance en los titulares. Aquí lo estorba: el
     reparto en tres líneas del diseño lo produce el ancho de 628 px. */
  text-wrap: pretty;
}

.presentacion__titulo strong {
  font-weight: var(--peso-fuerte);
}

/* --- Bloques de dos columnas ---------------------------------------------
   Rótulo a la izquierda y texto a la derecha, alternando fondo claro y
   oliva. En el spec: rótulo de 155 px de ancho en x=322 y texto de hasta
   1002 px en x=664. El espaciado vertical de cada banda es de ~100 px, que
   es lo que ya da .seccion (--gap-seccion, 104 px a 1920). */

.bloque {
  /* 202 px a 1920: lo que hay entre la sangría interior estándar (120) y el
     x=322 del rótulo. */
  --sangria-bloque: clamp(0rem, 10.52vw, 12.625rem);
  /* 187 px a 1920: hueco entre columnas, 664 − (322 + 155). */
  --hueco-columnas: clamp(2rem, 9.74vw, 11.6875rem);

  background: var(--fondo);
}

/* Bandas oscuras: en el spec son rectángulos #889408 de 1923×280 a sangre,
   con el texto en blanco. */
.bloque--oliva {
  background: var(--verde-oliva);
  color: var(--blanco);
}

.bloque__interior {
  display: grid;
  grid-template-columns: minmax(0, 155px) minmax(0, 1002px);
  column-gap: var(--hueco-columnas);
  align-items: start;
  padding-inline: calc(var(--margen) + var(--margen-interior) + var(--sangria-bloque))
    calc(var(--margen) + var(--margen-interior));
}

.bloque__rotulo {
  font-size: var(--t-h3); /* 28 px */
  font-weight: var(--peso-fuerte);
  /* Los saltos de línea del diseño («¿Quiénes / somos?») los produce el
     ancho de 155 px de la columna, no un <br>. */
}

.bloque__texto {
  font-size: var(--t-base); /* 16 px */
  line-height: var(--lh-texto);
}

/* En el original los párrafos van separados por una línea en blanco. */
.bloque__texto p + p {
  margin-top: calc(var(--lh-texto) * 1em);
}

/* --- Valores --------------------------------------------------------------
   Cinco bloques con el nombre del valor y su descripción. En el spec cada
   uno empieza 114 px por debajo del anterior y ocupa 77 px de texto
   visible, así que quedan 37 px de aire entre ellos. */

.valores {
  display: grid;
  gap: 2.3125rem; /* 37 px */
}

.valor__nombre {
  font-size: var(--t-base); /* 16 px */
  font-weight: var(--peso-fuerte);
  /* Una línea en blanco entre el nombre y la descripción, como en el
     original, donde ambos son un único bloque de texto. */
  margin-bottom: calc(var(--lh-texto) * 1em);
}

/* --- Responsive -----------------------------------------------------------
   No hay diseño móvil. Mismo criterio que la portada del sitio: las dos
   columnas colapsan a una a los 900 px, igual que «Empaques Flexibles» en
   home.css, y las sangrías extra desaparecen. */

@media (max-width: 900px) {
  .presentacion {
    --sangria-presentacion: 0rem;
    grid-template-areas: 'lienzo' 'texto';
  }

  /* Apilado, la foto ya no compite con el texto: se muestra entera, sin
     recortar, en su proporción original. */
  .presentacion__foto {
    aspect-ratio: 1920 / 549;
  }

  .presentacion__interior {
    grid-area: texto;
    padding-block: 2.5rem;
  }

  .bloque {
    --sangria-bloque: 0rem;
  }

  .bloque__interior {
    grid-template-columns: minmax(0, 1002px);
    row-gap: 1.5rem;
  }
}