@charset "UTF-8";

.custom-bg-primary {
  background-color: #aebc1f;
}

.custom-bg-gray-900 {
  background-color: #5f6161;
}

.custom-bg-gray-700 {
  background-color: #606161;
}

.custom-bg-gray-500 {
  background-color: #a9a9a9;
}

.custom-bg-gray-300 {
  background-color: #f5f5f5;
}

.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.btn-custom-primary {
  font-size: 16px !important;
  font-weight: 500 !important;
  background: #aebc1f !important;
  padding: 0.5rem 1.35rem !important;
  border: solid 1px #aebc1f;
  color: #fff !important;
  border-radius: 0.5rem !important;
  transition: all 0.2s;
}
.btn-custom-primary:hover {
  background-color: #859018 !important;
  color: #ffffff !important;
}

.btn-home {
  font-size: 16px !important;
  font-weight: 600 !important;
  background: #fe9393 !important;
  padding: 1.1rem 2.7rem !important;
  border: solid 1px #ffa3a3;
  color: #1b1b1b !important;
  border-radius: 1.3rem !important;
  transition: all 0.2s;
}
.btn-home:hover {
  background-color: #0A504B !important;
  color: #ffffff !important;
  border: solid 1px #0A504B;
}
.btn-home .figura {
  width: 23px;
  margin-right: 10px;
}
@media only screen and (max-width: 575px) {
  .btn-home {
    padding: 0.7rem 1.2rem !important;
  }
}

.separadorh {
  width: 5%;
}
@media only screen and (max-width: 575px) {
  .separadorh {
    display: none;
  }
}

.btn-wssp {
  font-size: 16px !important;
  font-weight: 600 !important;
  background: #25d366 !important;
  padding: 1.1rem 2.7rem !important;
  color: #ffffff !important;
  border-radius: 1.3rem !important;
  transition: all 0.2s;
}
.btn-wssp .figura {
  width: 23px;
  margin-right: 10px;
}
@media only screen and (max-width: 575px) {
  .btn-wssp {
    padding: 0.7rem 1.2rem !important;
  }
}

.btn-black {
  font-size: 16px !important;
  font-weight: 600 !important;
  background: #03352b !important;
  padding: 0.5rem 1.5rem !important;
  border: solid 1px #023127;
  color: #fff !important;
  border-radius: 1.3rem !important;
  transition: all 0.2s;
  margin: 0px 5px;
}
.btn-black:hover {
  background-color: black !important;
  color: #ffffff !important;
}

.btn-outline-custom-primary {
  display: inline-block;
  color: #aebc1f !important;
  font-weight: 500;
  font-size: 16px;
  padding: 0.5rem 1.35rem;
  border: solid 1px #aebc1f;
  border-radius: 0.5rem;
  transition: all 0.2s;
  margin-right: 15px;
}
.btn-outline-custom-primary:last-child {
  margin-right: 0;
}
.btn-outline-custom-primary:hover {
  background-color: #aebc1f !important;
  color: #ffffff !important;
}
@media (max-width: 767px) {
  .btn-outline-custom-primary {
    padding: 0.5rem 0.75rem;
    margin-right: 5px;
  }
}

.text-custom-primary {
  color: #aebc1f !important;
}

.text-gray-900 {
  color: #5f6161 !important;
}

.text-gray-700 {
  color: #606161 !important;
}

.text-gray-500 {
  color: #a9a9a9 !important;
}

.text-gray-300 {
  color: #f5f5f5 !important;
}

.font-regular {
  font-weight: 400 !important;
}

.font-medium {
  font-weight: 500 !important;
}

.font-bold {
  font-weight: 600 !important;
}

.text-xsmall {
  font-size: 12px !important;
}

.text-small {
  font-size: 14px !important;
}

.separator {
  display: block;
  height: 0;
  border-bottom: 1px solid #f5f5f5;
  width: 90%;
}

.separator-gray {
  display: block;
  height: 0;
  border-bottom: 2px solid #e8e8e8;
  width: 70%;
  margin: 30px 0;
}
.separator-gray__full {
  display: block;
  border-bottom: 1px solid #a9a9a9;
  width: 100%;
  margin: 30px 0;
}

.separator-light-gray {
  display: block;
  height: 0;
  border-bottom: 2px solid #f5f5f5;
  margin: 30px 0;
}

.separator-green {
  display: block;
  height: 0;
  border-bottom: 2px solid #aebc1f;
  width: 30%;
  margin: 30px 0;
}
@media (max-width: 767px) {
  .separator-green {
    width: 70%;
  }
}
.separator-green__full {
  display: block;
  border-bottom: 3px solid #aebc1f;
  width: 100%;
  margin: 30px 0;
}

.contenedor {
  max-width: 1140px;
  margin: 0 auto;
}

.section {
  padding: 75px 30px;
}
@media (max-width: 767px) {
  .section {
    padding: 50px 30px;
  }
}

.section-content-left {
  background-size: cover;
  background-position: center;
  height: 60vh;
  position: relative;
  margin-bottom: 50px;
}
.section-content-left__content {
  position: absolute;
  top: 35%;
  left: 200px;
  transform: translate(0px, -35%);
  background-color: #fff;
  padding: 2rem;
  width: 30%;
  box-shadow: 0px 5px 0px 0px rgb(174, 188, 31);
  text-align: left;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-content-left__content {
    width: 60%;
    left: 20%;
  }
}
@media (max-width: 767px) {
  .section-content-left__content {
    width: 100%;
    left: 0;
    top: 50%;
    transform: translate(0%, 0%);
  }
}
.section-content-left__title {
  font-size: 2.5rem;
  font-weight: 400;
  color: #606161 !important;
  text-wrap: balance;
}
.section-content-left__title span {
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 767px) {
  .section-content-left__title {
    font-size: 1.35rem;
  }
}
.section-content-left__description {
  font-size: 1.25rem;
  font-weight: 400;
  color: #606161 !important;
  margin: 25px 0;
}
@media (max-width: 767px) {
  .section-content-left__description {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .section-content-left {
    height: 50vh;
  }
}

.section-content-right {
  background-size: cover;
  background-position: center;
  height: 60vh;
  position: relative;
  margin-bottom: 50px;
}
.section-content-right__content {
  position: absolute;
  top: 35%;
  right: 200px;
  transform: translate(0%, -35%);
  background-color: #fff;
  padding: 2rem;
  width: 30%;
  box-shadow: 0px 5px 0px 0px rgb(174, 188, 31);
  text-align: left;
}
@media (min-width: 768px) and (max-width: 991px) {
  .section-content-right__content {
    width: 60%;
    right: 20%;
  }
}
@media (max-width: 767px) {
  .section-content-right__content {
    width: 100%;
    right: 0;
    top: 50%;
    transform: translate(0%, 0%);
  }
}
.section-content-right__title {
  font-size: 2.5rem;
  font-weight: 400;
  color: #606161 !important;
}
@media (max-width: 767px) {
  .section-content-right__title {
    font-size: 1.35rem;
  }
}
.section-content-right__description {
  font-size: 1.25rem;
  font-weight: 400;
  color: #606161 !important;
  margin: 25px 0;
}
@media (max-width: 767px) {
  .section-content-right__description {
    font-size: 1rem;
  }
}
@media (max-width: 767px) {
  .section-content-right {
    height: 50vh;
  }
}

.pre-section {
  margin-bottom: 0;
}

.filters-clear {
  font-family: "Montserrat", sans-serif !important;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

/**
* Terza Web - Rediseño 2023
* Date: 08 - 2023
*
**/
.content p {
  font-size: 18px;
}
.content .hero {
  background-image: url('../../img/home/home-banner-2025-2.jpg.jpeg');
  background-size: cover;
  background-position: center;
  padding: 12% 9% 4%;
  position: relative;
}
.content .hero__title {
  font-weight: 500;
  color: #fff !important;
  font-size: 55px !important;
}
@media (max-width: 767px) {
  .content .hero__title {
    font-size: 30px !important;
  }
}
.content .hero__title span {
  color: rgba(255, 255, 255, 0.94);
}
@media (max-width: 767px) {
  .content .hero {
    padding: 240px 9% 80px;
  }
  .content .hero img {
    width: 50% !important;
  }
}
.content .section1__content {
  text-align: center;
}
.content .section1__title {
  color: #1b1b1b;
  font-weight: 600;
}
@media (max-width: 767px) {
  .content .section1__title {
    margin: 0 auto;
  }
}
.content .section1__description {
  margin-bottom: 0px;
  text-align: center;
}
.content .section1__description:last-of-type {
  margin-bottom: 0;
}
.content .section1 .separador {
  margin-top: 3%;
}
.content .section-alfombras p {
  font-size: 18px !important;
  min-height: 81px;
}
.content .section-alfombras h3 {
  display: inline-block;
}
.content .section-alfombras .box111 {
  position: absolute;
  top: 5%;
  left: 58%;
}
.content .section-alfombras .box1 {
  position: absolute;
  top: 40%;
  right: 12%;
}
.content .section-alfombras .box3 {
  position: absolute;
  top: 40%;
  right: 12%;
}
.content .section-alfombras .box21 {
  position: absolute;
  top: 21%;
  right: 5%;
}
.content .section-alfombras .box111 .t1 {
  border-bottom: 4px solid #caff66;
}
.content .section-alfombras .box111 .t4 {
  border-bottom: 4px solid #2cbec1;
}
.content .section-alfombras .box1 .t1 {
  border-bottom: 4px solid #caff66;
}
.content .section-alfombras .box1 .t2 {
  border-bottom: 4px solid #7ad888;
}
.content .section-alfombras .box1 .t3 {
  border-bottom: 4px solid #00d984;
}
.content .section-alfombras .box1 .t4 {
  border-bottom: 4px solid #ff8080;
}
.content .section-alfombras .box3 .t1 {
  border-bottom: 4px solid #caff66;
}
.content .section-alfombras .box3 .t2 {
  border-bottom: 4px solid #7ad888;
}
.content .section-alfombras .box3 .t3 {
  border-bottom: 4px solid #00d984;
}
.content .section-alfombras .box3 .t4 {
  border-bottom: 4px solid #ff8080;
}
.content .section-alfombras .box8 .t1 {
  border-bottom: 4px solid #caff66;
}
.content .section-alfombras .box8 .t2 {
  border-bottom: 4px solid #7ad888;
}
.content .section-alfombras .box8 .t3 {
  border-bottom: 4px solid #00d984;
}
.content .section-alfombras .box8 .t4 {
  border-bottom: 4px solid #ff8080;
}
.content .section-alfombras .box222 {
  position: absolute;
  top: 40%;
  left: 4%;
}
.content .section-alfombras .box222 .t1 {
  border-bottom: 4px solid #8944d5;
}
.content .section-alfombras .box222 .t3 {
  border-bottom: 4px solid #de2a2a;
 }
 .content .section-alfombras .box21 {
  position: absolute;
  top: 40%;
  left: 4%;
}
.content .section-alfombras .box21 .t1 {
  border-bottom: 4px solid #8944d5;
}
.content .section-alfombras .box21 .t3 {
  border-bottom: 4px solid #de2a2a;
 }  
.content .section-alfombras .box2 {
  position: absolute;
  top: 40%;
  left: 12%;
}
.content .section-alfombras .box2 .t1 {
  border-bottom: 4px solid #8944d5;
}
.content .section-alfombras .box8 {
  position: absolute;
  top: 52%;
  left: 12%;
}
.content .section-alfombras .box8 .t1 {
  border-bottom: 4px solid #8944d5;
}
.content .section-alfombras .box21 .t1 {
  border-bottom: 4px solid #edd0f1;
}
.content .section-alfombras .box2 .t2 {
  border-bottom: 4px solid #d2db41;
}
.t01 {
  border-bottom: 4px solid #f9b921;
}
.content .section-alfombras .box22 {
  position: absolute;
  top: 40%;
  left: 12%;
}
.content .section-alfombras .box22 .t22 {
  border-bottom: 4px solid #0073ff;
}
.t02 {
  border-bottom: 4px solid #0a77ff;
}
.content .section-alfombras .box2 .t3 {
  border-bottom: 4px solid #6699ff;
}
.content .section-alfombras .box2 .t4 {
  border-bottom: 4px solid #ffcc00;
}
.content .section-alfombras .box23 .t22 {
  border-bottom: 4px solid #0073ff;
}
.t02 {
  border-bottom: 4px solid #0a77ff;
}

.content .section-alfombras .box23 {
  position: absolute;
  top: 10%;
  left: 12%;
}
@media only screen and (max-width: 575px) {
  .content .section-alfombras h3 {
    font-size: 28px !important;
  }
  .content .section-alfombras p {
    min-height: 54px;
  }
  .content .section-alfombras .box1 {
    position: absolute;
    top: 30%;
    right: 6%;
  }
  .content .section-alfombras .box3 {
    position: absolute;
    top: 30%;
    right: 6%;
  }
  .content .section-alfombras .box8 {
  position: absolute;
  top: 2%;
  right: 3%;
  left: 230;
  }
  .content .section-alfombras .box8 p {
  font-size: 12px !important;
  margin-bottom: 15px !important;
  }
  .content .section-alfombras .box22 {
  position: absolute;
  top: 25%;
  right: 53%;
  left: 10;
  }
  .content .section-alfombras .box22 p {
  font-size: 12px !important;
  margin-bottom: 15px !important;
  }
  .content .section-alfombras .box23 {
  position: absolute;
  top: 8%;
  right: 53%;
  left: 10;
  }
  .content .section-alfombras .box23 p {
  font-size: 12px !important;
  margin-bottom: 15px !important;
  }
  .content .section-alfombras .box1 p {
    font-size: 12px !important;
    margin-bottom: 15px !important;
  }
  .content .section-alfombras .box3 p {
    font-size: 12px !important;
    margin-bottom: 15px !important;
  }
  .content .section-alfombras .box8 p {
  font-size: 12px !important;
 margin-bottom: 15px !important;
  }
  .content .section-alfombras .box2 {
    position: absolute;
    top: 30%;
    left: 2%;
  }
  .content .section-alfombras .box2 p {
    font-size: 12px !important;
    margin-bottom: 15px !important;
  }
.content .section-alfombras .box21 {
  position: absolute;
  top: 21%;
  right: 3%;
}
  .content .section-alfombras .btn-home {
    padding: 10px 25px !important;
    border-radius: 15px !important;
    font-size: 14px !important;
  }
}
.content .section2 {
  padding: 80px 5%;
}
.content .section2 p {
  max-width: 450px;
}
.content .section2__content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 767px) {
  .content .section2__content {
    flex-direction: column;
  }
}
.content .section2 .icono {
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
}
@media only screen and (max-width: 575px) {
  .content .section2 .icono {
    width: 10%;
  }
}
.content .section2__left, .content .section2__right {
  width: 50%;
}
@media (max-width: 767px) {
  .content .section2__left, .content .section2__right {
    width: 100%;
    margin-bottom: 30px;
  }
}
.content .section2__title {
  font-weight: 600;
  color: #1b1b1b !important;
  width: 70%;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .content .section2__title {
    width: 100%;
  }
}
.content .section2__image {
  margin: 0 0 0 auto;
  width: 195%;
}
@media (max-width: 767px) {
  .content .section2__image {
    margin: 0 auto;
    width: 195%;
  }
}
@media only screen and (max-width: 575px) {
  .content .section2 {
    text-align: center;
  }
}
.content .section3 .section3__image {
  width: 100%;
}
@media (max-width: 767px) {
  .content .section3 .caja {
    text-align: center;
    width: 100%;
  }
}
.content .section3 .caja__title {
  font-weight: 600;
  color: #1b1b1b !important;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .content .section3 .caja__title {
    width: 100%;
  }
}
.content .section3 .caja__image {
  width: 45%;
  margin-bottom: 7%;
  margin-top: 2%;
}
.content .section3 .caja__text {
  margin-bottom: 5%;
}
.content .section3 .gracias {
  background-color: #e3f6e9;
  border-radius: 35px;
  height: 100%;
  padding: 5%;
}
.content .section3 .gracias h2 {
  font-size: 92px !important;
  color: #d63737;
  line-height: 1 !important;
  margin-right: 15px;
}
@media only screen and (max-width: 575px) {
  .content .section3 .section3__image {
    margin-top: 8%;
  }
  .content .section3 .gracias {
    margin-top: 8%;
  }
  .content .section3 .gracias h2 {
    font-size: 75px !important;
  }
  .content .section3 .gracias h3 {
    font-size: 24px !important;
    line-height: 0.9;
  }
}
.content .sec7 {
  padding: 0 0 120px;
}
.content .sec7 .btn-greenl {
  background-color: #c7d90c;
  display: inline-block;
  padding: 20px 45px;
  font-size: 16px;
  border-radius: 20px;
  text-align: center;
}
.content .sec7 .box-green {
  background-color: #03352b;
  padding: 55px 60px;
  border-radius: 30px;
}
@media (max-width: 500px) {
  .content .sec7 {
    padding: 0 0 80px;
  }
  .content .sec7 .btn-greend {
    padding: 15px 20px;
    width: 50%;
  }
  .content .sec7 .box-green {
    padding: 30px 20px;
    border-radius: 30px;
  }
}
.content .section4 {
  background-color: #f2f2f2;
}
@media (max-width: 767px) {
  .content .section4 .section4__card {
    text-align: center;
  }
}
.content .section4 .section4__card__image {
  width: 100%;
}
.content .section4 .section4__card__text {
  color: #1b1b1b !important;
  margin-bottom: 30px;
}
@media only screen and (max-width: 575px) {
  .content .section4 img {
    margin-top: 8%;
  }
}
.content .section5 {
  padding: 80px 0;
  position: relative;
}
.content .section5 .glide .slide-img {
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  border-radius: 30px;
}
.content .section5 .glide .slide-box {
  position: relative;
}
.content .section5 .glide .slide-box .txtbox {
  position: absolute;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background-color: #EAFCD6;
  padding: 3% 6%;
  border-radius: 8px;
  display: none;
}
.content .section5 .glide .img-1 {
  background-image: url('../../img/home/terza-home-py-sultanes.png');
}
.content .section5 .glide .img-2 {
  background-image: url('../../img/home/terza-home-py-borregos.png');
}
.content .section5 .glide .img-3 {
  background-image: url('../../img/home/terza-home-py-bridgestone.png');
}
.content .section5 .glide .glide__slide.glide__slide--active .txtbox {
  position: absolute;
  top: 76%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  background-color: #EAFCD6;
  padding: 3% 6%;
  border-radius: 8px;
  display: block;
  min-width: 250px;
}
.content .section5 .glide .glide__slide:not(.glide__slide--active) .slide-img {
  height: 450px !important;
}
.content .section5 .glide .glide__slide:not(.glide__slide--active) p {
  visibility: hidden;
}
@media only screen and (max-width: 575px) {
  .content .section5 .glide .slide-img {
    background-repeat: no-repeat;
    background-size: cover;
    height: 390px;
    width: 100% !important;
    border-radius: 30px;
  }
  .content .section5 .glide .glide__slide:not(.glide__slide--active) .slide-img {
    height: 350px !important;
  }
  .content .section5 .glide .glide__slide:not(.glide__slide--active) p {
    visibility: hidden;
  }
}
.content .section6 .separador {
  margin: 3% 0;
}
.content .section6 h2 {
  font-weight: 600;
  text-align: center;
}
.content .section6 .box {
  background-color: #f2f2f2;
  padding: 2% 2% 3%;
  border-radius: 30px;
}
.content .section6 .col-md-6 {
  margin-top: 3%;
}
@media only screen and (max-width: 575px) {
  .content .section6 {
    text-align: center;
  }
  .content .section6 .font-bold {
    font-size: 18px !important;
  }
  .content .section6 .separador {
    margin: 3% 0 8%;
  }
}
.content .section-logos .box {
  background-color: #bfe9ff !important;
  padding: 6% 5%;
  border-radius: 30px;
}
.content .section-logos .box form .pl-0 {
  padding-left: 0;
}
.content .section-logos .box form .pr-0 {
  padding-right: 0;
}
.content .section-logos form .form-control {
  border-radius: 8px;
  font-weight: 500;
  color: #555555 !important;
  border: none;
  margin-bottom: 20px !important;
  padding: 22px 15px;
}
.content .section-logos form .form-control:focus {
  border: 2px solid #555555 !important;
  box-shadow: none;
}
.content .section-logos form .select-control {
  border-radius: 8px;
  font-weight: 500;
  color: #555555 !important;
  border: none;
  margin-bottom: 20px !important;
  padding: 12px 17px;
  width: 100%;
}
.content .section-logos form .select-control:focus {
  border: 2px solid #555555 !important;
  box-shadow: none;
}
.content .section-logos form select {
  color: #606161;
}
.content .section-logos form select option {
  color: #606161;
}
.content .section-logos form .aviso {
  margin-bottom: 17px;
}
.content .section-logos form .aviso a {
  font-weight: 500;
  text-decoration: underline !important;
}
.content .section-logos .logo {
  width: 80%;
}
@media only screen and (max-width: 575px) {
  .content .section-logos {
    text-align: center;
  }
  .content .section-logos .box {
    padding: 10% 8%;
    margin-bottom: 8%;
  }
  .content .section-logos form .col-md-6 {
    padding: 0;
  }
}

/* =========================
   OPCIÓN B — CUADROS HIPER CENTRADOS (BLOQUE COMPACTO)
   ========================= */

.section-alfombra [class^="box"],
.section-alfombra [class*=" box"]{
  position: absolute;
  z-index: 2;
  width: 260px;
  min-height: 150px;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.15);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Texto oscuro dentro de las cajas */
  color: #111;
}

/* tipografía */
.section-alfombra [class^="box"] h1,
.section-alfombra [class^="box"] h2,
.section-alfombra [class^="box"] h3,
.section-alfombra [class*=" box"] h1,
.section-alfombra [class*=" box"] h2,
.section-alfombra [class*=" box"] h3{
  color: #111;
  font-size: 0.95rem;
  margin-bottom: 6px;
}

.section-alfombra [class^="box"] p,
.section-alfombra [class*=" box"] p{
  color: #333;
  font-size: 0.8rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* botón dentro de la caja */
.section-alfombra [class^="box"] a,
.section-alfombra [class*=" box"] a{
  color: #111;
  font-size: 0.75rem;
  padding: 5px 12px;
  border-radius: 10px;
  text-decoration: none;
}

/* Posiciones desktop: hiper centradas hacia el centro global */
.section-alfombra .position-relative:nth-child(1) [class^="box"],
.section-alfombra .position-relative:nth-child(1) [class*=" box"]{
  right: 5%;
  bottom: 38%;
  transform: translateY(38%);
}

.section-alfombra .position-relative:nth-child(2) [class^="box"],
.section-alfombra .position-relative:nth-child(2) [class*=" box"]{
  left: 5%;
  bottom: 38%;
  transform: translateY(38%);
}

.section-alfombra .position-relative:nth-child(3) [class^="box"],
.section-alfombra .position-relative:nth-child(3) [class*=" box"]{
  right: 5%;
  top: 28%;
  transform: translateY(-28%);
}

.section-alfombra .position-relative:nth-child(4) [class^="box"],
.section-alfombra .position-relative:nth-child(4) [class*=" box"]{
  left: 5%;
  top: 28%;
  transform: translateY(-28%);
}

/* =========================
   MÓVIL — CENTRADO TOTAL EN CADA BLOQUE
   ========================= */
.section-alfombra .position-relative{ position: relative; } /* asegura contexto */

@media (max-width: 768px){
  .section-alfombra [class^="box"],
  .section-alfombra [class*=" box"]{
    width: 88% !important;
    min-height: auto !important;
    padding: 14px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important; /* centro perfecto */
    margin: 0 auto;
  }

  .section-alfombra [class^="box"] h1,
  .section-alfombra [class^="box"] h2,
  .section-alfombra [class^="box"] h3,
  .section-alfombra [class*=" box"] h1,
  .section-alfombra [class*=" box"] h2,
  .section-alfombra [class*=" box"] h3{
    font-size: 0.9rem;
  }

  .section-alfombra [class^="box"] p,
  .section-alfombra [class*=" box"] p{
    font-size: 0.75rem;
  }
}

/* =========================
   FONDOS DE PRUEBA (FAKE PHOTO)
   ========================= */
.fake-photo{
  height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.photo1{ background: linear-gradient(135deg, #1abc9c, #16a085); }
.photo2{ background: linear-gradient(135deg, #3498db, #2980b9); }
.photo3{ background: linear-gradient(135deg, #9b59b6, #8e44ad); }
.photo4{ background: linear-gradient(135deg, #e74c3c, #c0392b); }

@media (max-width: 768px){
  .fake-photo{ height: 42vh; }
}

/* =========================
   LÍNEA DELGADA BAJO CADA TÍTULO (colores distintos por caja)
   ========================= */
.section-alfombra [class^="box"] h3,
.section-alfombra [class*=" box"] h3{
  position: relative;
  margin-bottom: 12px;
  display: inline-block; /* asegura cálculo correcto del centro */
}

.section-alfombra [class^="box"] h3::after,
.section-alfombra [class*=" box"] h3::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
  width: 56px;          /* largo de la línea */
  height: 3px;          /* grosor delgado */
  border-radius: 999px; /* extremos redondeados */
  background: #111;     /* valor por defecto (fallback) */
}

/* Colores específicos por tarjeta */
.box1  h3::after { background: #8BC34A; } /* verde */
.box22 h3::after { background: #5B5FFF; } /* violeta/azul */
.box8  h3::after { background: #03A9F4; } /* azul claro */
.box23 h3::after { background: #FF7043; } /* naranja */

/* Móvil: línea un poco más corta */
@media (max-width: 768px){
  .section-alfombra [class^="box"] h3::after,
  .section-alfombra [class*=" box"] h3::after{
    width: 44px;
    height: 3px;
  }
}
/* Fondo con imagen real (PNG) */
.photo{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Si tu PNG tiene transparencia, este color se verá detrás */
  background-color: #f5f5f5;
}

/* Asigna una imagen distinta por tile (ejemplos) */
.photo1{ background-image: url('../../img/home/box/1.jpg'); }
.photo2{ background-image: url('../../img/home/box/2.jpg'); }
.photo3{ background-image: url('../../img/home/box/3.jpg'); }
.photo4{ background-image: url('../../img/home/box/4.jpg'); }
/* === Tinte violeta degradado sobre todas las fotos === */
/* Funciona tanto si usas .photo (con background-image) como .fake-photo */
.photo, .fake-photo { position: relative; }

.photo::before,
.fake-photo::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* Degradado violeta (arriba más intenso → abajo más suave) */
  background:
    linear-gradient(180deg,
      rgba(142, 36, 170, .42) 0%,   /* violeta */
      rgba(103, 58, 183, .36) 45%,  /* púrpura */
      rgba(0, 0, 0, .06) 100%       /* leve sombreado final */
    );

  /* Mezcla para que el color se funda con la foto (queda más “pro”) */
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Si tuviste un overlay negro previo, bájale un poco la intensidad para que no se oscurezca demasiado */
.section-alfombra .position-relative::after{
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.12) 100%);
  z-index: 1; /* sigue encima del tinte, debajo de las cajas */
}