/* SECCIÓN ¿QUÉ HACEMOS? */
.what-section{
  padding: 80px 0;
  background: var(--bg-100);
}

.what-container{
  max-width: 1096px;
  margin: 0 auto;
  text-align: center;
}

/* TÍTULO */
.what-title{
 
  color: var(--azul2-100);
  margin-bottom: 40px;
}

/* GRID DE ICONOS */
.what-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: flex-start;
}

.what-grid3{
  
  grid-template-columns: repeat(3, 1fr);
  
}
/* CADA ÍTEM */
.what-item{
  text-align: center;
}

/* CONTENEDOR DEL ICONO (201 x 201) */
.what-icon-wrap{
  width: 201px;
  height: 201px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: transparent;
  box-shadow: 0 18px 32px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* SVG INTERNO */
.what-icon-svg{
  width: 70%;   /* escala el SVG dentro del círculo */
  height: 70%;
  display: block;
}

.what-text{
  
  color: var(--azul-oscuro-100);
}

.what-item:hover .what-icon-wrap{
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(0,0,0,0.16);
}


/* TABLET: 2 columnas */
@media (max-width: 992px){
  .what-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE: 1 columna */
@media (max-width: 600px){
  .what-section{
    padding: 60px 16px;
  }

  .what-grid{
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}


/* ==========================
   SECCIÓN ¿CÓMO LO HACEMOS?
   ========================== */

.how-section{
  padding: 80px 0;
}

.how-container{
  max-width: 1096px;
  margin: 0 auto;
  text-align: center;
}

.how-title{
  font-size: 2rem;
  font-weight: 700;
  color: #0057A4;
  margin-bottom: 40px;
}

/* GRID 3 columnas – 5 items (3 arriba, 2 abajo centrados) */
/* .how-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 48px;
  row-gap: 40px;
  align-items: flex-start;
} */

.how-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* ⭐ 5 columnas invisibles */
  gap: 40px 24px;
  align-items: start;
}

.how-item:nth-child(1){
  grid-column: 2; /* columna 2 */
}
.how-item:nth-child(2){
  grid-column: 3; /* columna 3 */
}
.how-item:nth-child(3){
  grid-column: 4; /* columna 4 */
}


.how-item--bottom-left{
  grid-column: 2; /* columna 2 */
}

.how-item--bottom-right{
  grid-column: 4; /* columna 4 */
}



/* Ítem base */
.how-item{
  text-align: center;
}

/* Los dos de abajo se posicionan en las columnas 2 y 3 */
.how-item--bottom-left{
  grid-column: 2 / 3;
}

.how-item--bottom-right{
  grid-column: 3 / 4;
}

/* ICONO 201 x 201 */
.how-icon-wrap{
  width: 201px;
  height: 201px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  box-shadow: 0 18px 32px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.how-icon-svg{
  width: 70%;
  height: 70%;
  display: block;
}

/* Hover suave */
.how-item:hover .how-icon-wrap{
  transform: translateY(-4px);
  box-shadow: 0 22px 40px rgba(0,0,0,0.16);
}

/* Texto */
.how-text{
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}


/* TABLET: 2 columnas */
@media (max-width: 992px){
  .how-grid{
    grid-template-columns: repeat(2, 1fr);
  }

  .how-item--bottom-left,
  .how-item--bottom-right{
    grid-column: auto; /* se resetea, se comportan como normales */
  }
}

/* MOBILE: 1 columna */
@media (max-width: 600px){
  .how-section{
    padding: 60px 16px;
  }

  .how-grid{
    grid-template-columns: 1fr;
    row-gap: 32px;
  }
}