/* Fuentes Comex */
@font-face {
  font-family: 'ComexBlack';
  src: url('../fonts/comex-black.woff') format('woff'),
       url('../fonts/comex-black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ComexMedium';
  src: url('../fonts/comex-medium.woff') format('woff'),
       url('../fonts/comex-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ComexBold';
  src: url('../fonts/comex-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'ComexBoldCondensed';
  src: url('../fonts/comex-bold-condensed.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: 'ComexMedium', sans-serif;
  background: url('../img/fb.jpg') center / cover no-repeat !important;
 
  background-color: transparent;
  color: #1b1f23;
  -webkit-font-smoothing: antialiased;
}


/* Contenedor principal */
.page-wrapper {
  max-width: 480px;
  margin: 0 auto;
  background: transparent;
  min-height: 100vh;
}

.page-wrapper {
  background: url('../img/fb.jpg') center / cover no-repeat !important;
}
/* Hero */

.hero{
 background-color: #009dda;
    text-align: center;
    padding: 15px 0;
}

.hero-image {
  display: block;
  max-width: 100px;
  height: auto;
  margin:0 auto;
}



/* Intro */
.hero2 {
  text-align: center;
  background-color: #7a318b;
}

.intro-title2 {
  font-family: 'ComexBlack', sans-serif;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #fff;
  padding:5px;
}

.intro {
  text-align: center;
}


.intro-logo img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  margin: 0;
  margin-bottom: 16px;
}


.intro-title,
.intro-subtitle {
  padding: 0 20px;
}

.intro-title {
  font-family: 'ComexBlack', sans-serif;
  font-size: 2.2rem;
  line-height: 1.2;
  color: #21aae1;
  margin-bottom: 8px;
}

.intro-titleinterior {
  font-family: 'ComexBlack', sans-serif;
  font-size: 2.0rem;
  line-height: 1.2;
  color: #21aae1;
  margin-bottom: 30px;
  margin-top:30px;
  margin-left:5px;
  margin-right: 5px;
}

.titleinterior {
  font-family: 'ComexBlack', sans-serif;
  font-size: 1.5rem;
  color: #04148e;
  margin-bottom: 4px;
  margin-top: 50px;
}

.intro-subtitle {
  font-family: 'ComexMedium', sans-serif;
  font-size: 1.30rem;
  color: #04148e;
}

/* Slider */
.slider-section {
  padding: 30px 16px 18px;
}
.slider-section-interior {
  padding:0px;
  margin-top:30px;
  margin-bottom:30px;
}

.slider {
  position: relative;          
  border-radius: 16px;
  background: transparent;
  overflow: hidden;
}

.slider-interior {
  position: relative;          
  background: transparent;
  overflow: hidden;
}

.slider-track {
  display: flex;
  width: 100%;
  transition: transform 0.4s ease-in-out;
}

.slide {
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

.slide-image {
  width: 100%;
  height: auto;
  display: block;
}

.slide-content {
  padding: 14px 16px 26px;
  text-align: center;
}

.slide-content-interior {
  padding: 0px;
 
}

.slide-title {
  font-family: 'ComexBlack', sans-serif;
  font-size: 1.5rem;
  color: #1eb1e7;
  margin-bottom: 4px;
  margin-top: 10px;
}

.slide-text {
  font-family: 'ComexMedium', sans-serif;
  font-size: 0.9rem;
  color: #5d5d5d;
  margin-bottom: 10px;
}


.slider-arrow {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-arrow-interior {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}


.slider-arrow-icon {
  width: 32px;
  height: 32px;
  display: block;
}



.slider-arrow--prev {
  left: 1px;
}

.slider-arrow--next {
  right: 1px;
}


.slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}



.btn-primary {
     display: inline-block;
    background-color: #19b2e8;
    color: white;
    padding: 10px 15px 8px 15px;
    border-radius: 35px;
    text-decoration: none;
    font-size: 15px;
    margin-top: 15px;
   
    transition: background-color 0.3s ease;
    border: none;
    border-bottom: 5px solid #16a0d0;
    font-family: 'ComexBold', sans-serif;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.section{
    padding: 16px;
    text-align: center;
  background-color: transparent;
}


 .img-lazy1 {
  width: 80%;
  height: auto;
  margin: 0 auto;
}

.espacio{
    margin-top: 30px !important;
}

.titulo-black1 {
  font-family: 'ComexBlack', sans-serif;
  font-size: 1.5rem;
  line-height: 1.2;
  margin: 10px 0;
   font-weight: 500;
   color:#0B0D52;
}

.texto-medium1 {
  font-family: 'ComexMedium', sans-serif;
  font-size: 1rem;
  color: #3AADCC;
   line-height: 1.6;
 
}

.btn-primary:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.btn-primary:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.boton1 {
  display: inline-block;
  background-color: #3AADCC;
  color: white;
  padding: 5px 12px;
  border-radius: 15px;
  text-decoration: none;
  font-size: 23px;
  margin-top: 15px;
  transition: background-color 0.3s ease;
}

/* Dots */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 18px;
  background: transparent;
}

.slider-dots-interior {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 4px 0 18px;
   
    position: absolute;
    align-items: center;
    bottom: 3px;
    margin: 0 auto;
    width: 100%;
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: #c3c3c3;
  cursor: pointer;
}

.dot-active {
  background: #283373;
}


/* Categorías */
.categories {
    background:#f0fcfd ;
  padding: 18px 16px 18px;
}

.section-title {
  text-align: center;
  font-size: 1.2rem;
  font-family: 'ComexBold', sans-serif;
  color: #04148e;
  margin-bottom: 10px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px 20px;
  margin-top:30px;
  align-items: center;
}

.category-pill {
  display: flex;                
  align-items: center;         
  justify-content: center;     
  padding: 10px 10px;             
   text-align: center;          
  border-radius: 11px;
  border: 2px solid #fff;
  color: #fff;
  text-decoration: none;
  font-family: 'ComexBold', sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10);
}

.fondo1{
  background: #1a54a2; 
  font-size: 1rem;
  height: 44px;
}
.fondo2{
  background: #db2a2d;  
  font-size: 1rem;
  height: 44px;
}
.fondo3{
  background: #000000;  
  font-size: 1rem;
  height: 44px;
}
.fondo4{
  background: #ec8c23; 
  font-size: 1rem;
  height: 44px;
}
.fondo5{
  background: #00877e;  
  font-size: 0.80rem;
  height: 44px;   
}
.fondo6{
  background: #652c1d;  
  font-size: 1rem;
  height: 44px;
}
.fondo7{
  background: #00556f;  
  font-size: 0.90rem;
}

.fondo8{
  background: #7a297f; 
  font-size: 0.90rem;
}

.fondo9{
  background: #25aae2;  
  font-size: 1rem;
  height: 44px;
}
.fondo10{
  background: #0761a8; 
  font-size: 1rem;
  height: 44px;
}
.fondo11{
   
  background: #7ab229; 
  font-size: 1rem;
}

.category-pill.fondo11 {
  position: relative;
  height: 44px;       
  padding-left: 85px;     
  justify-content: flex-start; 
}


.category-pill.fondo11::before {
  content: '';
  position: absolute;
  left: 8px;              
  top: 50%;
  transform: translateY(-50%);
  width: 70px;            
  height: 70px;
  background-image: url('../img/eco.webp'); 
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}  


.fondo12{
  background: #cf3e8a;  
   font-size: 0.90rem;
}

.category-pill:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.category-pill:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.grid-dl{display:grid}
.dl{
  display:grid;
  gap:15px;
  justify-items:center;
  text-align:center;
  padding:30px 16px 25px 16px;
  text-decoration:none;
  background-color:#1a54a2;
}
.dl .title{
  margin:0;
  color:#fff;
  font-family:"ComexMedium";
  font-weight:500;
  line-height:1.2;
  font-size:clamp(2.1rem,3.2vw,2.15rem)
}

.dl .title2{
  margin:0;
  color:#fff;
  font-family:"ComexMedium";
  font-weight:500;
  line-height:1.2;
  font-size:clamp(0.80rem,2.2vw,1.10rem)
}
.pill{
  position:relative;
  display:inline-block;
  padding:10px 30px;
  background:#fff;
  color:#7a318b;
  border:1px solid #470456;
  border-radius:12px;
  font-family:"ComexMedium",system-ui,sans-serif;
  font-size:clamp(1rem,3vw,1.6rem);
  text-decoration:none;
  line-height:1;
  margin-bottom:8px
}
.pill::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:-16px;
  width:78%;
  height:18px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.38) 0, rgba(0,0,0,.25) 35%, rgba(0,0,0,.12) 55%, transparent 70%);
  filter:blur(3px);
  pointer-events:none
}

.pill:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.pill:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.dl-light{background:#7a318b}

/* Banners */
.banner {
  padding: 0 0;
}

.banner-image {
  display: block;
  width: 100%;
  height: auto;
}

.responsive-image img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}

/*interiores*/
.banner-image-interior {
  display: block;
  width: 75%;
  height: auto;
  margin:0 auto;
}

.texto-medium {
  margin-top:15px;
  font-family: 'ComexMedium', sans-serif;
  font-size: 1.2rem;
  color: #3AADCC;
  letter-spacing: 1px;
  text-align:center;
}
.rendimiento{
    margin-top:40px;
     text-align: center;
}
.grid-dos-columnas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  justify-items: center;
  margin-bottom: 20px;
}

.grid-dos-columnas .item h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 300;
}

.grid-dos-columnas img {
width: 60%;
  height: auto;
  margin:0 auto;
}

.boton {
  display: inline-block;
  background-color: #3AADCC;
  color: white;
  padding: 9px 35px 7px 35px;
  border-radius: 25px;
  text-decoration: none;
  font-size: 1.5rem;
  margin-top: 15px;
  transition: background-color 0.3s ease;
  border: none;
  border-bottom: 5px solid #2F94B4; 
  font-family: 'ComexBold', sans-serif;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); 
}

.boton:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.14);
}

.boton:active {
  transform: scale(0.97) translateY(1px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}



/* Legal */
.legal {
  padding: 14px 18px 24px;
  background-color: #009dda;
}

.legal p {
  font-size: 0.75rem;
  color: #fff;
  line-height: 1.4;
}

/* Responsivo para pantallas  grandes */
@media (min-width: 600px) {
  .page-wrapper {
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }

  .intro {
    
  }

  .slider-section {
    padding-inline: 24px;
  }

  .categories {
    padding-inline: 24px;
  }
}