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

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
       font-family: Comex, Open Sans, serif;
    }

    /* Aplicar la fuente Comex globalmente */
    body {
        max-width: 600px;
    margin:0 auto;
       font-family: Comex, Open Sans, serif;
      line-height: 1;
      background-color: #ffffff;
    }

    /* Header */
    header {
      background-color: #009dda;
      text-align: center;
      padding: 10px 0;
    }

    header img {
      max-width: 120px;
      height: auto;
    }

    /* T铆tulos */
    h1, h2 {
      text-align: center;
      color: #333;
      margin: 20px 0;
     font-family: 'Comex', sans-serif !important;
    }

    h2 {
      font-size: 1.2rem;
      color: #555;
      font-family: 'Comex', sans-serif;
    }

    /* Slider */
    .slider-container {
      position: relative;
      max-width: 100%;
     
      overflow: hidden;
    }

    .slider {
      display: flex;
      width: 100%;
      transition: transform 0.5s ease;
    }

    .slide {
      min-width: 100%;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom:30px;
    }



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

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

.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:#1a54a2;
  border:1px solid #1a54a2;
  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:#1a54a2}
    .slide img {
      width: 90%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }
  .dl-lightimper{background:#00887e}
    .slide img {
      width: 90%;
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }  
    
    

    /* Botones de navegacion */
    .slider-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: transparent;
      color: #01ace6;
      border: none;
      font-size: 2rem;
      padding: 10px;
      cursor: pointer;
    }

    .slider-button.prev {
      left: 10px;
    }

    .slider-button.next {
      right: 10px;
    }

    /* Estilos para el enlace con imagen debajo de cada slider */
    .slide a {
      position: absolute;
      bottom: -35px;
      left: 50%;
      transform: translateX(-50%);
      display: block;
    }

    .slide a img {
      width: 120px;  
      height: auto;
    }

    /* Divs con columnas */
    .two-column {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0px;
      margin-top:0px !important;
    }

    .column {
      width: 48%;
      text-align: center;
    }

    .column button {
      display: block;
      width: 100%;
      height: auto;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .column button img {
      width: 100%;
      height: auto;
    }

    /* Fondo azul */
    .blue-background {
      background-color: #005597;
      padding: 40px 20px 30px 20px;
      margin-top: 0px;
     
    }

    

    .blue-background button {
      padding: 10px 20px;
      display: block;
      width: 70%;
      height: auto;
      background-color: transparent;
      border: none;
      cursor: pointer;
      margin-bottom: 10px;
    }
    
   
    .blue-background button img {
      width: 70%;
      height: auto;
    }

   

    /* Imagen responsiva */
    .responsive-image img {
      width: 100%;
      height: auto;
      margin:0 auto;
      display: block;
    }
    
    .responsive-image_title1 {
  width: 100%; 
  max-width: 100%; 
  height: auto; 
  object-fit: contain;
  display: block; 
  margin: 0 auto; 
}


@media (max-width: 768px) {
  .responsive-image_title1 {
    width: 90%; 
    max-width: 90%; 
  }
}

  
    @media (max-width: 768px) {
      .two-column {
        justify-content: space-between;
        gap: 20px;
      }

      .column {
        width: 48%; 
      }

      .column button img {
        width: 80%;
      }
    }
    
    .footer {
      background-color: #009dda;
      color: #ffffff;
      text-align: center;
      padding: 20px;
      font-family: 'Comex', sans-serif;
    }

    .footer p {
      margin: 10px 0;
      font-size: 14px;
      
      text-align:left;
    }
    
    .footer  a {
     color: #ffffff;
     text-decoration:none !important;
    }
    .footer-line {
      border-bottom: 1px solid #ffffff;
      margin: 10px 0;
    }
    
    .fixed-image {
  position: fixed;
  bottom: 15px;
  left: 15px;
  z-index: 1000; 
   
}

.fixed-image img {
  width: 50px; 
  height: auto;
}
    
    
/*.fixed-image2 {
    position: absolute;
  top: 609px;
  z-index: 1000; 
   width: 100%; 
   
}*/

 
@media (max-width: 667px) {
    .fixed-image2 {
    position: absolute;
    top: 550px;
    z-index: 1000; 
    width: 100%; 
   
     }
}

@media (max-width: 896px) {
    .fixed-image2 {
    position: absolute;
    top: 610px;
    z-index: 1000; 
    width: 100%; 
   
     }
}

@media (max-width: 844px) {
    .fixed-image2 {
    position: absolute;
    top: 570px;
    z-index: 1000; 
    width: 100%; 
   
     }
}

.fixed-image2 img {
  width: 150px; 
  height: auto;
  margin:0 auto;
  display:block;
}


.image-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.image-half {
  width: 50%;
  padding: 0px;
}

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