@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-color: #f2f4f7;
  color: #1b1f23;
  -webkit-font-smoothing: antialiased;
}


.page-wrapper {
  max-width: 480px;
  margin: 0 auto;
  background: #ffffff;
  min-height: 100vh;
}



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

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




.hero2 {
  text-align: center;
  background-color: #7bb128;
}

.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;
 
}


.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.2rem;
  line-height: 1.2;
  color: #21aae1;
  margin-bottom: 30px;
  margin-top:30px;
}

.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-section {
  padding: 30px 16px 18px;
}
.slider-section-interior {
  padding:0px;
  margin-top:30px;
  margin-bottom:30px;
}

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

.slider-interior {
  position: relative;          
  background: #fff;
  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: #fff;
}


 .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;
}


.slider-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 4px 0 18px;
  background: #ffffff;
}

.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%;
}

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

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

.dot-active {
  background: #283373;
}



.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: #7bb128; 
  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);
}

.int3{
    background: #e8e8e8; 
    margin:0px !important;
    
}

.int3 .title{
  margin:20px 0px 20px 0px;
  color:#5da631;
  font-family:"ComexMedium";
  font-weight:600;
  line-height:1.2;
  font-size:clamp(1.8rem,3.0vw,1.2rem);
  text-align:center;
}



.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:#7bb128;
}
.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:#7bb128;
  border:1px solid #7bb128;
  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:#7bb128}

.eco-label-section {
  padding: 48px 16px 18px 14px;
  background: #ffffff;
}

.eco-label-card {
  border: 2px solid #72ad3b;
  border-radius: 16px;
  background: #ffffff;
  padding: 20px 18px 20px;
  color: #5e5e5e;
  max-width: 420px;
  margin: 0 auto;
  overflow: visible;
}

.eco-label-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title seal"
    "intro seal";
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
  margin-bottom: 12px;
  
}

.eco-label-title {
  grid-area: title;
  margin: 0;
  color: #5fa437;
  font-family: "ComexBold", sans-serif;
  font-size: clamp(1.32rem, 4vw, 1.15rem);
  line-height: 1.12;
}

.eco-label-seal {
  grid-area: seal;
  width: 145px;
  max-width: 32vw;
  height: auto;
  display: block;
  align-self: start;
  margin-top: 2px;
  margin-bottom: 0;
}

.eco-label-intro {
  grid-area: intro;
  margin: 0;
  font-family: "ComexMedium", sans-serif;
  font-size: 0.9rem;
  line-height: 1.25;
}

.eco-label-group {
  margin-top: 25px;
}

.eco-label-group h3 {
  margin: 0 0 4px;
  color: #5fa437;
  font-family: "ComexBold", sans-serif;
  font-size: clamp(1.32rem, 4vw, 1.15rem);
  line-height: 1.05;
}

.eco-label-group ul {
  margin: 0;
  padding-left: 18px;
}

.eco-label-group li {
  margin: 3px 0;
  font-family: "ComexMedium", sans-serif;
  font-size: 0.84rem;
  line-height: 1.18;
}

.eco-label-group li::marker {
  color: #6cab3e;
}

@media (max-width: 380px) {
  .eco-label-title {
    font-size: 1.22rem;
  }

  .eco-label-seal {
    width: 118px;
  }
}

.eco-reasons {
  background: #ffffff;
  padding: 18px 14px 22px;
  text-align: center;
}

.eco-reasons-title {
  margin: 0;
  color: #616161;
  font-family: "ComexBold", sans-serif;
  font-size: clamp(1.7rem, 4.2vw, 2rem);
  line-height: 1.08;
}

.eco-reasons-number {
  margin-top: 12px;
  color: #5ca735;
  font-family: "ComexBold", sans-serif;
  font-weight: 600;
  font-size: clamp(6.2rem, 15vw, 7.3rem);
  line-height: 0.92;
}

.eco-reasons-subtitle {
  margin: 8px 0 28px;
  color: #616161;
  font-family: "ComexBold", sans-serif;
  font-size: clamp(1.55rem, 3.8vw, 1.85rem);
  line-height: 1.05;
}

.eco-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  margin-top: 6px;
}

.eco-reason-item {
  padding: 8px 7px 0;
}

.eco-reason-item + .eco-reason-item {
  border-left: 1px solid #d9d9d9;
}

.eco-reason-item img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}

.eco-reason-item:nth-child(2) img {
  transform: scale(1.1);
  transform-origin: center;
}

.eco-reason-item p {
  margin: 0;
  color: #5f5f5f;
  font-family: "ComexMedium", sans-serif;
  font-size: clamp(0.69rem, 2.05vw, 0.84rem);
  line-height: 1.2;
}

.eco-actions {
  background: #ffffff;
  padding: 38px 16px 24px;
}

.eco-actions-stack {
  display: grid;
  gap: 22px;
  justify-items: center;
}

.eco-action-btn {
  width: min(250px, 80%);
  height: 44px;
  display: flex;                
  align-items: center;         
  justify-content: center;     
  padding: 10px 10px;             
  text-align: center;
  border-radius: 11px;
  border: 2px solid #fff;
  text-decoration: none;
  font-family: "ComexBold", sans-serif;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.10);
}

.eco-action-btn--vin {
  background: #bbcc9c;
  color: #ffffff;
  font-size: 1rem;
}

.eco-action-btn--esm {
  background: #5ea92d;
  color: #ffffff;
  font-size: 1rem;
}

.eco-action-btn--imp {
  background: #045f38;
  color: #ffffff;
  font-size: 1rem;
}

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

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

.eco-footer-image {
  background: #ffffff;
  margin: 0;
  padding: 0;
}

.eco-footer-image img {
  width: 100%;
  height: auto;
  display: block;
}

.eco-footer-image + .slider-section {
  padding: 0;
}


.banner {
  padding: 0 0;
}

.vin-header-image {
  margin: 0 0 16px 0;
  padding: 0;
}

.vin-header-image img {
  width: 100%;
  height: auto;
  display: block;
}

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


.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;
}

.eco-vin-products {
  background: #ffffff;
  padding: 14px 12px 18px;
}

.eco-vin-card {
  margin: 0 auto 18px;
  max-width: 430px;
  text-align: center;
}

.eco-vin-card + .eco-vin-card {
  margin-top: 26px;
}

.eco-vin-card:last-child {
  margin-bottom: 0;
}

.eco-vin-title {
  margin: 0 0 8px;
  color: #04148e;
  font-family: 'ComexBlack', sans-serif;
  font-size: clamp(1.55rem, 5.2vw, 2rem);
  line-height: 1.1;
}

.eco-vin-ps {
  width: 100%;
  max-width: 355px;
  height: auto;
  display: block;
  margin: 0 auto 8px;
}

.eco-vin-desc {
  margin: 0 auto 12px;
  max-width: 88%;
  color: #3AADCC;
  font-family: 'ComexMedium', sans-serif;
  font-size: clamp(0.92rem, 2.6vw, 1.05rem);
  line-height: 1.35;
}

.eco-vin-products .texto-medium {
  color: #3AADCC;
}

.eco-vin-products .texto-medium strong {
  color: #3AADCC;
}

.eco-vin-subtitle {
  margin: 0 0 8px;
  color: #5ea92d;
  font-family: 'ComexBlack', sans-serif;
  font-size: clamp(1.5rem, 4.8vw, 1.95rem);
  line-height: 1.1;
}

.eco-vin-attrs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 10px;
  align-items: start;
  max-width: 350px;
  margin: 0 auto;
}

.eco-vin-attr {
  text-align: center;
}

.eco-vin-attr h4 {
  margin: 0 0 4px;
  color: #8dbf66;
  font-family: 'ComexBold', sans-serif;
  font-size: 0.78rem;
  line-height: 1.15;
  text-transform: none;
}

.eco-vin-attr img {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.eco-vin-attr--full {
  grid-column: 1 / -1;
}

.eco-vin-attr--full img {
  max-width: 175px;
}

.eco-vin-caps {
  margin: 10px 0 0;
  color: #5d5d5d;
  font-family: 'ComexMedium', sans-serif;
  font-size: clamp(0.92rem, 2.7vw, 1.08rem);
  line-height: 1.3;
}

.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 {
  padding: 14px 18px 24px;
  background-color: #009dda;
}

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


@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;
  }
}