/* ===================================
    Cover
====================================== */

.hero-slider {
  position: relative;
  min-height: 750px;
  overflow: hidden;
  padding-top: 50px;
  padding-bottom: 80px;
      display: flex;
    align-items: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
   background: linear-gradient(180deg, #104570 -3.26%, rgba(17, 68, 112, 0.8) 49.21%, #00203B 100%), url('../../assets/img/inicio/cover.png');
   background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  z-index: 1;
}

.heroSwiper{
    width: 100%;
}

.heroSwiper .swiper-slide{
  display: flex;
  align-items: center;
}

.hero-content,
.hero-media {
  position: relative;
  z-index: 3;
}

.hero-content h1 {
  font-weight: 600;
  color: #fff;
}

.hero-content p {
  color: #fff;
}

.hero-media{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-media img {width: 100%;}


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

.hero-media img {width: 80%;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

    .hero-media img {width: 65%;}

    .smoke-1-top {
  top: 0px;}

}
/* md  */ @media (min-width: 768px) {

  .hero-slider {
    min-height: 700px;
  padding-top: 80px;
  padding-bottom: 80px;
}

    .heroSwiper{
    width: 350px;
}

    .hero-media img {width: 100%;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

    .heroSwiper{width: 430px;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

    .heroSwiper{width: 500px;}
}
/* xxl */ @media (min-width: 1400px) {}

/* Custom Bullets */
.custom-pagination {
  position: absolute;
bottom: 70px !important;
display: flex;
justify-content: center;
gap: 0px;
z-index: 10;
padding-right: 10px;
padding-left: 10px;
}

.custom-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 8px;
  background: #FFFFFF8F;
  opacity: 1;
  border-radius: 20px;
  transition: background 0.3s;
}

.custom-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

/*Animacion humo*/

.smoke {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 220px;

  background-image: url('../../assets/img/inicio/smoke.png');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: contain;

  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}


.smoke-top {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 220px;

  background-image: url('../../assets/img/inicio/smoke-top.png');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: contain;

  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* humo base top */
.smoke-1-top {
  top: -130px;
  height: 350px;
  opacity: 0.35;
  filter: blur(2px);
  animation: smokeLeft 22s linear infinite;
}

/* humo medio */
.smoke-2-top {
  top: 0px;
  height: 200px;
  opacity: 0.22;
  filter: blur(4px);
  animation: smokeRight 32s linear infinite;
}

/* humo alto */
.smoke-3-top {
  top: 0px;
  height: 140px;
  opacity: 0.14;
  filter: blur(6px);
  animation: smokeFloatLeft 42s ease-in-out infinite;
}

/* capa extra suave */
.smoke-4-top {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 200px;
  top: 0px;

  background-image: url('../../assets/img/inicio/smoke-top.png');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: contain;

  pointer-events: none;
  z-index: 2;
  opacity: 0.08;
  filter: blur(10px);
  mix-blend-mode: screen;
  will-change: transform, opacity;

  animation: smokeFloatRight 60s ease-in-out infinite;
}


/* humo base abajo */
.smoke-1 {
  bottom: 0px;
  height: 900px;
  opacity: 0.35;
  filter: blur(2px);
  animation: smokeLeft 22s linear infinite;
}

/* humo medio */
.smoke-2 {
  bottom: 0px;
  height: 650px;
  opacity: 0.22;
  filter: blur(4px);
  animation: smokeRight 32s linear infinite;
}

/* humo alto */
.smoke-3 {
  bottom: 0px;
  height: 440px;
  opacity: 0.14;
  filter: blur(6px);
  animation: smokeFloatLeft 42s ease-in-out infinite;
}

/* capa extra suave */
.smoke-4 {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 200px;
  bottom: 0px;

  background-image: url('../../assets/img/inicio/smoke.png');
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: contain;

  pointer-events: none;
  z-index: 2;
  opacity: 0.08;
  filter: blur(10px);
  mix-blend-mode: screen;
  will-change: transform, opacity;

  animation: smokeFloatRight 60s ease-in-out infinite;
}

/* Animaciones humo  */
@keyframes smokeLeft {
  0% {
    transform: translateX(0) translateY(0) scale(1.05);
  }
  50% {
    transform: translateX(-4%) translateY(-8px) scale(1.08);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1.05);
  }
}

@keyframes smokeRight {
  0% {
    transform: translateX(0) translateY(0) scale(1.1);
  }
  50% {
    transform: translateX(4%) translateY(-10px) scale(1.14);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1.1);
  }
}

@keyframes smokeFloatLeft {
  0% {
    transform: translateX(0) translateY(0) scale(1.15);
  }
  50% {
    transform: translateX(-3%) translateY(-14px) scale(1.2);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1.15);
  }
}

@keyframes smokeFloatRight {
  0% {
    transform: translateX(0) translateY(0) scale(1.2);
  }
  50% {
    transform: translateX(3%) translateY(-16px) scale(1.24);
  }
  100% {
    transform: translateX(0) translateY(0) scale(1.2);
  }
}



/* ===================================
    General
====================================== */

/*Sello*/

.content-sello{
    width: 80px;
    height: 80px;
     border-radius: 999px 999px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:-40px;
    left:50%;
    background: #fff;
    z-index: 10;
    transform: translate(-50%, -0%);
}

.content-sello .sello{
    width: 60px;
    height: 60px;
    animation: rotar 30s linear  infinite;
}


@keyframes rotar {
  100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

/*Marcas lideres*/

.content-marca{
    display: grid;
    grid-template-columns: 1fr;
    gap:20px;
        align-items: center;
        justify-content: center;
}

.content-marca .marca{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F5F5F5;
}

.content-marca .marca img{
    width: 85%;
}

.content-marca .description{
    display: grid;
    grid-template-columns: 25px auto;
    gap:10px;
        align-items: center;
}

.content-marca .description .check{
    width: 25px;
    height: 25px;
    background: #107E14;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 14px;
    line-height: 0px;
}

/* ===================================
    catalogo
====================================== */

.catalog-glow__wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  grid-template-areas: 
   "c1 c2 c3 c5"
  "te te te te"
  "c15 c16 c18 c19";
}

.card-1{grid-area: c1;}
.card-2{grid-area: c2;}
.card-3{grid-area: c3;}
.card-4{grid-area: c4;}
.card-5{grid-area: c5;}
.card-6{grid-area: c6;}
.card-7{grid-area: c7;}
.card-8{grid-area: c8;}
.card-9{grid-area: c9;}
.card-10{grid-area: c10;}
.card-11{grid-area: c11;}
.card-12{grid-area: c12;}
.card-13{grid-area: c13;}
.card-14{grid-area: c14;}
.card-15{grid-area: c15;}
.card-16{grid-area: c16;}
.card-17{grid-area: c17;}
.card-18{grid-area: c18;}
.card-19{grid-area: c19;}
.card-20{grid-area: c20;}
.card-21{grid-area: c21;}
.card-22{grid-area: c22;}
.card-23{grid-area: c23;}
.card-24{grid-area: c24;}

.texto-sect{grid-area: te;}


/* CENTRO */
.catalog-glow__content {
  max-width: 520px;
  margin: 0 auto;
}


.catalog-glow__content{
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CARDS */
.glow-card {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  background: #F2F2F2;
  display: grid;
  place-items: center;
  transform: scale(0.95);
  filter: grayscale(20%);
  transition: all 0.8s ease;
}

.glow-card {
  transition:
    opacity 0.9s ease,
    transform 0.9s ease,
    filter 0.9s ease,
    background 0.9s ease;
}

.glow-card img {
  transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease;
}

.glow-card.is-on {
  background: #f4f4f4; /* encendido */
}

.glow-card .img-icon {
  width: 80%;
}

.glow-card .img-cover{
  width: 100%!important;
  height: 100%!important;
  object-fit: cover!important;
}

/* ACTIVO */
/* estado apagado */
.glow-card:not(.is-on) img {
  opacity: 0;
  transform: scale(0.8);
  filter: blur(6px);
}

.glow-card.is-on img {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

  .catalog-glow__wrap {
  grid-template-columns: repeat(5, 1fr);
  gap:30px;
  grid-template-areas: 
   "c1 c2 c3 c5 c7"
  "te te te te te"
  "te te te te te"
  "c15 c16 c18 c19 c20";
}

}
/* md  */ @media (min-width: 768px) {

.catalog-glow__wrap {
  grid-template-columns: repeat(6, 1fr);
  gap:30px;
  grid-template-areas: 
   "c1 c2 c3 c5 c7 c8"
  "c9 te te te te c12"
  "c13 te te te te c14"
  "c15 c16 c18 c19 c20 c22";
}

.content-sello{
    width: 100px;
    height: 100px;
     border-radius: 999px 999px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top:-50px;
    left:50%;
    background: #fff;
    z-index: 10;
    transform: translate(-50%, -0%);
}

.content-sello .sello{
    width: 80px;
    height: 80px;
    animation: rotar 30s linear  infinite;
}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

.catalog-glow__wrap {
  grid-template-columns: repeat(6, 1fr);
  gap:30px;
  grid-template-areas: 
   "c1 c2 c3 c5 c7 c8"
  "c9 te te te te c12"
  "c13 te te te te c14"
  "c15 c16 c18 c19 c20 c22";
}


} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {

.catalog-glow__wrap {
  grid-template-columns: repeat(8, 1fr);
  gap:30px;
  grid-template-areas: 
  "c1 c2 c3 c4 c5 c6 c7 c8"
  "c9 c10 te te te te c11 c12"
  "c13 c14 te te te te c15 c16"
  "c17 c18 c19 c20 c21 c22 c23 c24";
}


}
/* xxl */ @media (min-width: 1400px) {}

/* ===================================
    Responsive
====================================== */


/* xxs */ @media (max-width: 430px) {}
/* xs  */ @media (min-width: 431px) {

    /*Marcas lideres*/
    .content-marca{grid-template-columns: 1fr;}
    .content-marca .marca{width: 130px;height: 130px;}

} /* @media (max-width: 575px) {} */
/* sm  */ @media (min-width: 576px) {

    /*Marcas lideres*/
    .content-marca{grid-template-columns:1fr;}
    .content-marca .marca{width: 150px;height: 150px;}
    .content-marca .description .check{width: 30px;height: 30px;font-size: 18px;}
    .content-marca .description{grid-template-columns: 30px auto;gap:15px;}

}
/* md  */ @media (min-width: 768px) {
  

    /*Marcas lideres*/
    .content-marca{grid-template-columns: 120px auto;}
    .content-marca .marca{width: 120px;height: 120px;}

} /* ipad Portrait */
/* lg  */ @media (min-width: 992px) {

    /*Marcas lideres*/
    .content-marca{grid-template-columns: 180px auto;}
    .content-marca .marca{width: 180px;height: 180px;}

} /* ipad Landscape */
/* xl  */ @media (min-width: 1200px) {}
/* xxl */ @media (min-width: 1400px) {}