@charset "UTF-8";
/**
 * Box grid module. Reference: modulos/mod_box_grid/mod_box_grid.css
 */

.mod_box_grid {
  position: relative;
  overflow: hidden;
  background: #231F20;
}
.mod_box_grid__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mod_box_grid .row {
  position: relative;
  padding-top: 80px;
  padding-bottom: 80px;
  z-index: 1;
}
@media screen and (max-width: 64em) {
  .mod_box_grid .row {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}
.mod_box_grid .content-before {
  max-width: 720px;
  margin: 0 auto 45px;
  text-align: center;
}
.mod_box_grid .content-before * {
  color: #fff;
}
.mod_box_grid .content-before p {
  text-align: center;
}
.mod_box_grid .boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 920px;
  margin: 0 auto;
}
.mod_box_grid .boxes .box {
  padding: 40px 30px;
  background: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  min-width: 0;
}
/* Layout: 1 column 1 element */
.mod_box_grid.one-col-one .boxes {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
}
.mod_box_grid.one-col-one .boxes .box {
  flex: 0 0 100%;
  max-width: 100%;
}
/* Layout: 2 columns — CSS Grid para forzar 2 columnas */
.mod_box_grid.two-col-two .boxes,
.mod_box_grid.two-col-four .boxes,
.mod_box_grid.two-col-six .boxes {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
.mod_box_grid.two-col-two .boxes .box,
.mod_box_grid.two-col-four .boxes .box,
.mod_box_grid.two-col-six .boxes .box {
  min-width: 0;
  width: auto;
  margin: 0;
}
/* Layout: 3 columns — CSS Grid para forzar 3 columnas */
.mod_box_grid.three-col-three .boxes,
.mod_box_grid.three-col-six .boxes {
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.mod_box_grid.three-col-three .boxes .box,
.mod_box_grid.three-col-six .boxes .box {
  min-width: 0;
  width: auto;
  margin: 0;
}
/* Tablet: 2 columnas para layouts de 2 y 3 columnas */
@media screen and (max-width: 64em) {
  .mod_box_grid.two-col-two .boxes,
  .mod_box_grid.two-col-four .boxes,
  .mod_box_grid.two-col-six .boxes,
  .mod_box_grid.three-col-three .boxes,
  .mod_box_grid.three-col-six .boxes {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Mobile: 1 columna para todos */
@media screen and (max-width: 40em) {
  .mod_box_grid.one-col-one .boxes,
  .mod_box_grid.two-col-two .boxes,
  .mod_box_grid.two-col-four .boxes,
  .mod_box_grid.two-col-six .boxes,
  .mod_box_grid.three-col-three .boxes,
  .mod_box_grid.three-col-six .boxes {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.mod_box_grid .boxes .box h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.mod_box_grid .boxes .box .box-text {
  margin-bottom: 1rem;
}
.mod_box_grid .boxes .box .box-text p:last-child {
  margin-bottom: 0;
}