/* ============================================================================
   POR QUÉ CONFIAR · los cuatro pilares — definición ÚNICA
   ----------------------------------------------------------------------------
   Nuestra capa. Manda sobre .c-pillars y .c-pillar de home.css (136-160), que
   quedan muertas y se borran cuando alguien vuelva a tocar la librería.

   Diseño: archivo de Figma, nodo 101-43.

   ⚠️ El archivo tiene una errata: el titular dice «POR QUÉ CONFIRAR». Aquí va
   escrito bien, «confiar». Está avisado.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   La sección va en AZUL con el texto en crema. Antes era al revés —crema con
   texto azul—, y por eso el cuarto icono, que está dibujado en crema, había que
   teñirlo con una máscara para que no desapareciera. Sobre azul se ve solo.
   ------------------------------------------------------------------------- */
.c-confianza {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--on-primary);
}

/* .home .cmp fija el azul de marca a todo el texto de la portada. Las secciones
   sobre fondo oscuro declaran su crema en sus PROPIOS elementos, que es lo que
   gana a un color heredado del antepasado. Misma convención que el hero y que
   «Buscando la calma». */
.c-confianza .cmp__lead,
.c-confianza .cmp__eyebrow,
.c-confianza .c-pillar h3,
.c-confianza .c-pillar p {
  color: var(--wp--preset--color--on-primary);
}

/* ----------------------------------------------------------------------------
   LA ALINEACIÓN, que es lo que se pedía.
   ----------------------------------------------------------------------------
   Antes los títulos caían a 146, 89, 151 y 165 — repartidos en 76px. La causa:
   los cuatro símbolos tienen alturas distintas y colgaban de arriba, así que el
   título empezaba donde acababa su símbolo.

   Se resuelve con `subgrid`: las tres filas —símbolo, título, texto— las define
   .c-pillars, y cada pilar las hereda en vez de crear las suyas. Así la altura
   de cada fila es la mayor de las cuatro columnas y las tres líneas cuadran,
   diga lo que diga el contenido.

   `align-items: end` en la fila del símbolo: cuelgan del título hacia arriba,
   que es como están en el archivo — cada uno con su altura natural.
   ------------------------------------------------------------------------- */
.c-pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--60);
  /* «Nuestros pilares» es el rótulo de lo que viene debajo, y estaba pegado a
     la rejilla: se leía como una línea más del bloque de texto de arriba en vez
     de como su encabezamiento. Con aire, se entiende qué encabeza. */
  margin: var(--wp--preset--spacing--70) 0 0;
  padding: 0;
  list-style: none;
}

.c-pillar {
  display: grid;
  gap: var(--wp--preset--spacing--30);
  justify-items: center;
  text-align: center;
}

@container (min-width: 48rem) {
  .c-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 64rem) {
  .c-pillars {
    grid-template-columns: repeat(4, 1fr);
    /* símbolo · título · texto */
    grid-template-rows: auto auto auto;
  }

  .c-pillar {
    grid-row: span 3;
    grid-template-rows: subgrid;
    /* Todo arranca ARRIBA de su fila: así los títulos empiezan a la misma
       altura y los textos también, aunque tengan distinto número de líneas.
       Con `end` el texto se alineaba por abajo y el pilar más largo empezaba
       25px más arriba que los otros tres. */
    align-items: start;
  }

  /* El símbolo es la excepción: cuelga del título hacia arriba, cada uno con su
     altura natural, como en el archivo. */
  .c-pillar figure {
    align-self: end;
  }
}

/* ----------------------------------------------------------------------------
   Los símbolos conservan su forma: se limita el ALTO, no el ancho.
   ----------------------------------------------------------------------------
   Antes se fijaba el ancho a 72px para los cuatro, y como tienen siluetas muy
   distintas —una es ancha y baja, otra estrecha y alta— salían de 45 a 134px de
   alto. En el archivo miden 127, 125, 84 y 123: parecidos de alto, distintos de
   ancho. Se copia eso.
   ------------------------------------------------------------------------- */
.c-pillar figure {
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.c-pillar img {
  width: auto;
  height: auto;
  max-height: 4.25rem;
  max-width: 100%;
  object-fit: contain;
}

/* «Dibujos Calma» (7 oct 2026): ilustraciones a color que sustituyen a los
   símbolos. Van SIN duotono y en una placa crema.

   ⚠️ LA PLACA HACE FALTA. El dibujo trae un fondo blanco roto opaco, y esta
   sección es azul. En «Necesidades» el fondo se funde con `multiply` porque la
   tarjeta es blanca; aquí `multiply` sobre el azul teñiría de azul la
   ilustración entera. Sobre la placa crema, el mismo `multiply` funde el fondo
   y deja los colores como están. */
.c-pillar figure.c-pillar__dibujo {
  align-items: center;
  width: min(100%, 12rem);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
  border-radius: var(--wp--custom--radius--lg);
  background-color: var(--wp--preset--color--base);
  /* Sin esto el <img> cuadrado tapa las esquinas redondas y se funde con el
     azul de fuera. */
  overflow: hidden;
}

.c-pillar .c-pillar__dibujo img {
  width: 100%;
  height: 100%;
  max-height: none;
  mix-blend-mode: multiply;
}

.c-pillar h3 {
  margin: 0;
  font-family: var(--wp--preset--font-family--text);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--typography--leading--tight);
  letter-spacing: var(--wp--custom--typography--tracking--text);
  text-transform: uppercase;
}

.c-pillar p {
  margin: 0;
  max-width: 32ch;
  font-size: var(--wp--preset--font-size--small);
  line-height: var(--wp--custom--typography--leading--body);
}