body{
  font-family: 'gustanlpbook';
  font-style: normal;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  color: #000;
}

button::focus{
  outline: none;
  -webkit-appearance: none;
}

main{
 min-height:100vh;    
 overflow-x: hidden;
}
.navbar-brand svg{
  width: 90% !important;
}
.alpha svg{
  width: 100% !important;  
}
h1{
  font-family: 'gustanlpbold';
  font-size: 1.3rem;
}

h2{
  font-family: 'Gustanlp-Extrabold';
  font-size: 1.2rem;
}

h3{
  font-size: 1.1rem;
  font-family: 'Gustanlp-Extrabold';
}

h4{
  font-size: 1.15rem;
  font-family: 'gustanlpbold';
}

.gray-bg h2, .primary-bg h2{
  font-size: 1.6rem;
  line-height: 1.7rem;
  font-family: 'gustanlpbook';
}

.gray-bg svg{
  width: 86px;
  height: auto;
}

.primary-bg p{
  font-size: 1.4rem;
  line-height: 1.6rem;
}

a{
 color: #000; 
 text-decoration: none;
}

a:focus, a:hover{
  color: inherit;   
}
p{
  /*font-size: 1.2rem;
  line-height: 1.5rem;*/
  color:  #000;
}

.header-logo svg{
  width: 175px;
  height: auto;
}

.lead{
  font-size: 1.2rem;
  line-height: 1.35rem;
  font-weight: 700;
}

.lead-01{
  font-size: 1em;
  line-height: 1.2rem;
  font-weight: 400;
}

.caption{
  background-color: #C4161C;
  color: #FFF;
  padding: 0.25em .75em;
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 1;
  font-size: 1.1rem;
}

.gray-bg .lead{
  font-family: 'gustanlpbook';
  font-weight: 400;
}

.btn{
  border-radius: 35px;
}
.btn-primary{  
  padding: 0.65em 1rem 0.5em;
  font-weight: 700;    
  cursor: pointer;
  border: none;
  line-height: 1.2rem;
  background-color: rgba(199,22,28,1);    
  color: #FFF;   
  transition: all 0.8s ease;  
  border-radius: 0px;  
  border: 1px solid #C4161C;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background-color: rgba(199,22,28,0);
  border: 1px solid #C4161C;
  color: #C4161C;
}

.cta{
  position: fixed;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.cta.visible {
  top: 57px;
  opacity: 1;
  pointer-events: auto;
}

.top .btn-primary, .cta .btn-primary, .primary-bg .btn-primary{  
  padding: 0.65em 1rem 0.5em;
  font-weight: 700;    
  cursor: pointer;
  border: none;
  line-height: 1.2rem;
  background-color: #fff;     
  color: #C4161C;   
  transition: all 0.8s ease;  
  border-radius: 0px;  
  border: 1px solid #FFF;
  height: auto;    
}
.top .btn-primary:hover, .top .btn-primary:focus, .top .btn-primary:active, .primary-bg .btn-primary:hover, .primary-bg .btn-primary:focus, .primary-bg .btn-primary:active, .cta .btn-primary:hover, .cta .btn-primary:focus, .cta .btn-primary:active{
  background-color: rgba(255,255,255,0);
  border: 1px solid #fff;
  color: #fff;
}

a.btn-primary{
  text-decoration: none;
}
.gray-text{
  color: #757575;
}
.primary-text{
  color: #C4161C;
}

.primary-bg{
  background-color: #C4161C;
}

.primary-bg h1, .primary-bg h2, .primary-bg p{
  color: #FFF;
}

.top{
  background: url(../img/top-bg-m.webp) 0 0 no-repeat;
  background-size: 100% auto;
  padding-top: 180px;
}

.top .primary-bg{
  background-color: #000;
}

.top .primary-bg svg{
 width: 86px;
 height: auto;
}

.navbar{     
  border-bottom: none;
  padding: 0;
}

.top img{
  width: 100%;
  height: auto;
}

.card{   
  border-radius: 0px; 
  border: 1px #DDDCD2 solid;
  box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
  background: #fff;
}

.feat .card{
  min-height: 435px;
}

.videos .card{
  border: none;
  box-shadow: none;
}
/*
.small{
  color: #acb1b5;
  line-height: 1.1rem;
  font-size: .9rem;
}*/

.scroll-to-top{
  background: rgba(51,51,51,.35);
  width: 40px;
  height: 40px;
  right: 15px;
  bottom: 15px;
  z-index: 1000;
  border-radius: 50%;
  color: #fff;
  padding-top: 8px;
}

.scroll-to-top a{
  text-align: center;
}

.scroll-to-top .bi{
  color: #fff;
  width: 90% !important;
  padding-right: 0;
}

.dark-bg{
  background-color: #000;
}

.gray-bg{
  background-color: #EDEDED;
}

.links a{
  color: #757575;
  border-right: 1px solid #757575;
  padding: 0 8px;
}

.links a:last-child, .links-social a:last-child{
  border-right: none;
}

.links a:first-child, .links-social a:first-child{
  padding-left: 0;
}

.links-social p{
  color: #757575;
  margin-bottom: 0;
}

.links-social a{
  padding: 0 10px;
}

.links-social a{
  color: #757575;
}

.card .dark-bg{
  min-height: 200px;
  position: relative;
}

.card .dark-bg svg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.itemCard.comercio {
  background: url(../img/comercio_exterior.jpg);
  background-repeat: no-repeat !important;
  background-size: cover!important;
  background-position: 100% !important;
  min-height: 100%;
}

.itemCard.comercio:hover {
  background: url(../img/comercio_exterior.gif);
  background-position: 50% 100% !important;
}

.contendor-video {
  width: 100%;
  height: 100%;
  display: none;
}

.contendor-intro a {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .25);
  z-index: 4;
  cursor: pointer;
  top: 0;
}

.play{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal-content{
  border-radius: 0;
  border: none;
}
.modal-header{
  border-bottom: none;
}

.modal-body h2{
  font-family: 'gustanlpbook';
}

header{
  background: #FFF;  
  padding: 0;
}

.cta{
  background-color: #C4161C;
}

.cta small{
  color: #FFF;
  font-size: .8rem;
  line-height: 1rem;
  margin-top: .35rem;
  width: 62%;
}

.cta .btn{
  width: auto;
}


footer{
}

footer p, footer a{
}
footer h4{
  font-size: 1.1rem;
  color: #b12e26;
  font-weight: 700;
}
footer .social{
  display: flex;
}
footer i{
  font-size: 1.2rem;
}
ul{ 
  list-style: none; 
  padding-left: 0;
}
/*.owl-fondos ul{ 
  list-style: disc; 
}

.bi{
  color: #b12e26;
}*/

.icn{
  width: 120px;
  height: auto;
}

.legales p{
  font-size: .85rem;
  font-weight: 400;
  color: #757575;
}

.legales .links a{
  color: #4F4F4F;
  padding: 0 5px;
  font-family: 'gustanlpbold';
}

.legales p.cftna{
  font-size: 40px;
  font-weight: 400;
  color: #757575;
}


.carousel .card{
  box-shadow: none;
  border: none;
  height: 450px;
}
.carousel-indicators {
  display: flex !important;
  justify-content: center;
  gap: 1px;
  margin-bottom: 0rem;
  bottom: 15px;
}

/* Indicadores personalizados */
.carousel-indicators [data-bs-target] {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: transparent;
  border: 2.5px solid #C4161C;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Activo */
.carousel-indicators .active {
  background-color: #C4161C;
  border: 2.5px solid #C4161C;
}

/* Ajuste opcional: posición */
.carousel {
  position: relative;
}

.carousel-indicators {
  bottom: 15px;
}

.yt-preview-btn{
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: block;
  flex-shrink: 0;
  z-index: 0;
}

.yt-bg{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position:center;
  transition: transform 0.6s ease;
  will-change: transform;
}

.yt-preview-btn:hover .yt-bg{
  transform: scale(1.05);
}

  /*.yt-preview-btn::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.25), transparent);
    pointer-events: none;
  }*/

  .fill{
    fill: rgba(255,255,255,1);
  }
  .yt-play-icon{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: transform .18s ease;
  }
  .yt-play-icon svg{ width: 55px; height: 55px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.35)); }
  .yt-preview-btn:hover .yt-play-icon{ transform: scale(1.05); }

  .yt-preview-btn:hover .yt-play-icon .fill{ 
    fill: rgba(196,22,28,1);

  }

  .preview-iframe{
    position: absolute;
    inset: 0;
    border: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
  }

  .yt-title{
    position:absolute;
    left:10px;
    bottom:10px;
    right:10px;
    color:#fff;
    font-weight:500;
    font-size:15px;
    text-shadow:0 2px 8px rgba(0,0,0,0.7);
    z-index:6;
  }

  /* Modal */
  .modal.video{   
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.6);
    z-index: 9999;
    padding: 20px;
    width: 100%;
    height: 100%;
  }
  .modal.open{ display:flex; }

  .modal.video .modal-content{
    width: min(1100px, 96vw);
    /*aspect-ratio: 16/9;*/
    height: 96vh;
    background: #000;
    border-radius: 0;
    overflow: hidden;
    /*position: relative;*/
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
  }

  .modal-close{
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    backdrop-filter: blur(4px);
  }

  @media (hover: none){
    .yt-play-hint{
      position: absolute;
      left: 10px;
      bottom: 10px;
      z-index:5;
      font-size: 13px;
      background: rgba(0,0,0,0.45);
      color: #fff;
      padding: 6px 8px;
      border-radius: 6px;
      pointer-events: none;
    }
  }


  @media (min-width: 375px) {
    h1{
      font-size: 1.8rem;
      line-height: 1.6rem;
    }
/*.primary-bg p{
  font-size: 1.6rem;
  line-height: 1.85rem;
}*/
.top{
  padding-top: 212px;
}

.top .primary-bg svg{
 width: 82px;
 height: auto;
}

.cta small{
  padding-top: .5rem;
}

.cta .btn-primary{
  margin-top: 0;
}

}

@media (min-width: 425px){
  .top{
    padding-top: 240px;
  }
  .cta small{
    font-size: 1rem;
    width: 60%;
  }
  .cta .btn-primary{  
    margin-top: 0rem;
    width: 40%;
    margin-top: 1rem;
  }
}

@media (min-width: 768px) {
  h1{
    font-size: 2.2rem;
    line-height: 2.3rem;
  }
  .top {  
    padding-top: 433px !important;
  }

  .lead{
    font-size: 1.3em;
    line-height: 1.75rem;
    font-weight: 700;
  }

  .lead-01{
    font-size: 1.2em;
    line-height: 1.4rem;
    font-weight: 400;
  }

  .gray-bg h2, .primary-bg h2{
    font-size: 3.25rem;
    line-height: 3.3rem;
    font-family: 'gustanlpbook';
  }

  .gray-bg h4{
    min-height: 4rem;
  }

  .modal.video .modal-content{
    width: min(1100px, 96vw);
    aspect-ratio: 16/9;
    height: auto;    
    top: 155px;
    left: 50%;
    transform: translate(-50%,0);
  }
  .cta small{
    padding: 0;
    line-height: 1.15rem;
  }
  .cta .btn{
    margin-top: 0;
  }

  .feat .card{
    min-height: 572px;
  }

  .videos .card{   
    border-radius: 0px; 
    border: 1px #DDDCD2 solid;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%), 0 3px 1px -2px rgb(0 0 0 / 20%);
    background: #fff;
  }

}

@media (min-width: 991px) {  
  header{
    border-bottom: 1px solid rgba(0,0,0,.12);
  }

  h1{
    font-size: 3.2rem;
    line-height: 2.8rem;    
  }

  h2{
    font-size: 1.8rem;
    line-height: 1.95rem;
  }

  .gray-bg h4{
    min-height: 2.5rem;
  }

  .cta{
    background-color: transparent;
    top: 0;
    position: relative;
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .cta .btn-primary{  
    padding: 0.65em 1em 0.5em !important;
    font-weight: 700;    
    cursor: pointer;
    border: none;
    line-height: 1.2rem;
    background-color: rgba(199,22,28,1);    
    color: #FFF;   
    transition: all 0.8s ease;  
    border-radius: 0px;  
    border: 1px solid #C4161C; 
    margin-top: 0;   
    width: auto;
  }
  .cta .btn-primary:hover, .cta .btn-primary:focus, .cta .btn-primary:active{
    background-color: rgba(199,22,28,0);
    border: 1px solid #C4161C;
    color: #C4161C;
  }
  .header-logo svg{
    width: 275px;
  }

.cta small{
  width: 0;
}

.modal.video .modal-content{
  top: 70px;
}

.top {
  background: url(../img/top-bg.webp) 0 0 no-repeat;
  background-size: 100% auto;  
  aspect-ratio: 1920 / 875;
  width: 100%;
}

.top .primary-bg{
  background-color: transparent;
  position: absolute;
  width: 67%;
  left: 12%;
  bottom: 28%
}
.top .primary-bg p{
  font-size: 1.25rem;
}

.legales p.cftna{
  font-size: 140px;
  line-height: 140px;
}

.feat .card{
  min-height: 575px;
}

}

@media (min-width: 1200px) {
  
  .top .primary-bg{
    bottom: 31%;
  }

  .feat .card {
    min-height: 525px;
  }

  .top .primary-bg svg {
    width: 150px;
    height: auto;
  }

}

@media (min-width: 1280px) {
  h1 {
    font-size: 3.8rem;
    line-height: 3.6rem;
  }

  .top .primary-bg{  
    bottom: 170px;
  }
}

@media (min-width: 1366px) {
  .top .primary-bg{
    bottom: 31%;
  }
}


@media (min-width: 1440px) {
.feat .card {
  min-height: 480px;
}
}

@media (min-width: 1720px) {   
  .top .primary-bg{  
    bottom: 34%;
  }
}

@media (min-width: 1920px) {

  .top .primary-bg{  
    bottom: 36%;
  }
}

@media (min-width: 2200px) {
  
  .top .primary-bg{  
    bottom: 40%;
  }
}