/* Book (Normal) */
@import url('https://fonts.cdnfonts.com/css/mollen-personal-use');
*{
    margin: 0;
    padding: 0;
   
}


html {
  scroll-behavior: smooth;
}

/* Esto hará que el desplazamiento suave funcione incluso sin JavaScript,
 pero el JS proporcionado dará más control y compatibilidad con más navegadores */
body{
    margin: 0px;
}

@media (max-width: 688px) {
  #blog-card{
    flex: 0 0 100%;  /* 4 blogs por fila (100%/4) */
  }
  #blog-title p{
    font-size: 30px;
    margin-top: 80px;
  }
  #blog-date p{
    font-size: 15px;
    margin-top: 10px;
  }
  
  #blog-snippet p{
    font-size: 20px;
    margin-top: 30px;
    margin-top: 90px;
  }
 
  #ver-mas a{
    font-size: 16px;
    margin-top: 50px;
  
  }
}
@keyframes contacto-giro {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.wa-float-btn{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #25D366;              /* verde WhatsApp */
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  text-decoration: none;
  z-index: 1500;                     /* por encima de tu header (1000) */
  transition: transform .15s ease, box-shadow .2s ease;
}
.wa-float-btn:hover{
  transform: scale(1.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
/* Aro de énfasis con tu acento #e51271 en hover (opcional) */
.wa-float-btn::after{
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid #e51271;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.wa-float-btn:hover::after{ opacity: 1; }

.wa-float-btn svg{
  width: 60px;
  height: 60px;
  fill: #fff;
}

@media (max-width: 480px){
  .wa-float-btn{
    width: 54px;
    height: 54px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}
/* Modal de contacto */
.contacto-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.6);
}

.contacto-contenido {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  width: 40%;
display: flex;
flex-direction: column;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  animation: contacto-aparecer 0.3s ease-out;
}

@keyframes contacto-aparecer {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.contacto-cerrar {
  display: flex;
  justify-content: flex-end;
  font-size: 24px;
  cursor: pointer;
}
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  height: 360px;
  border: solid 1px #676767;
  
}
.contact-sides{
  display: grid;
   grid-template-rows: 20% 50% 30%;
   align-items: center;
   justify-items: center;
   border-left: solid 1px #676767;
   border-right: solid 1px #676767;
}
.contact-sides1{

  display: grid;
   grid-template-rows: 20% 50% 30%;
   align-items: center;
   justify-items: center;
}
.contact-up {
  border-bottom: solid 1px #676767 ;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-up p{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 400;
  color:#E51271 ;
}
.contact-up1 {
  border-bottom: solid 1px #676767;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-up1 p{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 400;
  color:#e84c13 ;
}
.contacto-cerrar:hover {
  color: red;
}
.contac-midle {
  border-top: solid 1px #676767;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e84c13;
}
.contac-midle1 {
  border-top: solid 1px #676767 ;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E51271;
}
.contac-midle h3{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 700;
  color:white;
  text-align: center;
}
.contac-midle1 h3{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 700;
  color:#FFD000;
  text-align: center;
}
.contact-grid a{
  height: 100%;
  width: 100%;
  text-decoration: none;
}
.contact-down {
  border-top: solid 1px #676767 ;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFD000;
  border-bottom: solid 1px #676767;
}
.contact-down1 {
  border-top: solid 1px #676767 ;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e84c13;
  border-bottom: solid 1px #676767;
}
.contact-down p{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 400;
  color:#e84c13;
}
.contact-down1 p{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(28px + (100vw - 1918px) * 0.02);
  font-weight: 400;
  color:#FFD000 ;
}
#main-header{
    height: 80px;
}
#header_container{
    height: 80px;
    font-family: 'Gotham Rounded', sans-serif;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; 
  display: grid;
  grid-template-columns: auto 1fr;
  padding-left: 5%;
  padding-right: 5%;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  height: 80px;
  align-items: center;
 
  width: 90%;
  background-color: white;
}

.left-header {
  display: flex;
  align-items: center;
}
.right-header img{
    width: 100%;
}
.right-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.right-header a {
  text-decoration: none;
  font-family: 'Mollen Personal Use', sans-serif;
  color: #676767;
  font-size: 18px;
  font-weight: 400;
  margin-right: 18px;
  margin-left: 18px;
}
.right-header a:hover{
    color: #E51271;
    font-weight: 700;

}

/* Estilos para el menú hamburguesa */
.hamburger-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  justify-self: end;
  z-index: 1000;
}

.hamburger-btn span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #676767;
  margin: 4px 0;
  transition: all 0.3s ease;
}

/* Estilos para móvil */
@media (max-width: 768px) {
  header {
    grid-template-columns: auto 1fr;
    padding: 0 5%;
  }
  
  .hamburger-btn {
    display: block;
  }
  
  .nav-bar {
    position: fixed;
    top: 0;
    right: -100%;
    width: 70%;
    height: 100vh;
    background-color: white;
    flex-direction: column;
    align-items: flex-start;
    padding: 80px 30px;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    z-index: 999;
  }
  
  .nav-bar.active {
    right: 0;
  }
  
  .right-header a {
    display: block;
    margin: 15px 0;
    font-size: 20px;
  }
  
  /* Animación para el botón hamburguesa cuando está activo */
  .hamburger-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .hamburger-btn.active span:nth-child(2) {
    opacity: 0;
  }
  
  .hamburger-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
}

#hero-container{
  padding-top:6%;
}
.hero-container{
    margin-left: 5%;
    margin-right: 5%;
    font-family: 'Gotham Rounded', sans-serif;
    
}

  .hero-up{
    display: grid;
    grid-template-columns:  60% 40%;
   
  }
  .hero-up-left h3{
    font-size: calc(60px + (100vw - 1918px) * 0.02);
    color: #e51271;
    margin-top: 5%;

  }
   .en{
    font-weight: 300;

   } 
  .hero-container h1{
    font-size: calc(90px + (100vw - 1918px) * 0.02);
    color: #686868;
  }
.de{
    font-weight: 100;
}
.hero-up-right{
    display: flex;
    height: 100%;
    align-items: flex-end;
    width: 100%;
    
}
.hero-up-right a{
    width: 100%;
    text-decoration: none;
    margin-bottom: 1%;
}
.none-hero{
  display: none;
}
.aira-adviser{
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    background-color:#e51271 ;
    border-radius: 26px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.aira-adviser-p{
    display: flex;
    align-items: center;

}
.aira-adviser-p p{
    
    color: aliceblue;
    font-size: 18px;
    font-weight: 100;
    margin-left: 10%;
}
.news{
    font-weight: 700;
}
.aira-adviser-image{
    display: flex;
    justify-content: flex-end;
    padding-right: 10%;
    width: 100%;
}
.aira-adviser-image img{
    width:30%;
    margin-right: 25px;
    
}
.hero-down {
    position: relative;
    width: 100%;
    max-width: 2600px;
   margin: 0px;
    overflow: hidden;
}

.hero-banner {
    width: 100%;
    height: 600px;

    position: relative;
    transition: transform 0.5s ease;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.hero-slide.active {
    opacity: 1;
}

.hero-wllp1 {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 50% 50%;
    border-radius: 33px;
    position: relative;
    overflow: hidden;
}

/* Contenedor del video */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 33px;
    overflow: hidden;
}

.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Parte izquierda (donde iría el video) */
.wllp1-left {
    position: relative;
    height: 100%;
}

/* Parte derecha (con el texto) */
.wllp1-right {
    display: flex;
   
    flex-direction: column;

    background-color: white; /* Fondo semitransparente */
    z-index: 2; /* Asegura que el texto esté sobre el video */
    border-radius:0px 0px 33px 0px;
    height: 16%;
 
}
.wllp1-left{
  display: flex;
  align-items: flex-end;
  padding-left: 5%;

}
.span-hero{
  color: #FFD000;
}
.wllp1-left h3{
  font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(50px + (100vw - 1918px) * 0.02);
  font-weight: 800;
  margin-bottom: 8%;
  color: white;

}
.wllp1-right1 {
  display: flex;
 

  flex-direction: column;
  background-color: white; /* Fondo semitransparente */
  z-index: 2; /* Asegura que el texto esté sobre el video */
  border-radius:0px 0px 0px 33px;
  height: 15%;
}
.wllp1-right p{
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 300px;
  font-family: 'Mollen Personal Use';
    font-weight: 400;
    font-size: calc(40px + (100vw - 1918px) * 0.02);
    color: white;
}
.wllp1-right1  p{
  padding-left: 20%;
  padding-right: 20%;
  margin-top: 300px;
  font-family: 'Mollen Personal Use';
    font-weight: 400;
    font-size: calc(40px + (100vw - 1918px) * 0.02);
    color: white;
}
.wllp1-right h1 {
    font-size: calc(90px + (100vw - 1918px) * 0.02);
    color: #686868;
   
   
}

/* Flechas de navegación */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    font-size: 1.5rem;
    z-index: 10;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prev-arrow {
    left: 20px;
}

.next-arrow {
    right: 20px;
}

.nav-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}
/* services-container */
.services-container{
    margin-top: 40px;
}
.services-up{
display: grid;
grid-template-columns: 50% 50%;
background-color: #e84c13;
padding-left: 5%;
padding-right: 5%;

}
.services-up-left{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-right:  solid 1px  white;
    font-family: 'Gotham Rounded', sans-serif;

}
.services-up-left h1{
    font-size: calc(90px + (100vw - 1918px) * 0.02);
    color: white;
    padding-top: 5%;
    padding-bottom: 5%;
    margin-right: 20px;
}
.services-up-left p{
    font-size: calc(50px + (100vw - 1918px) * 0.02);
    color: white;
    font-weight: 100;
    margin-right: 20px;
}
.services-up-right{
    display: flex;
    align-items: center;
    margin-left: 10%;
    font-family: 'Mollen Personal Use';
    font-weight: 400;
    font-size: calc(50px + (100vw - 1918px) * 0.02);
}
.services-up-right p{
    font-size: calc(28px + (100vw - 1918px) * 0.02);
    color: white;
}
.container{
    width: 100%;
    height: 100%;
}
  .services-down{
    background-color: #e84c13;
  }
  .buttons-container {
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    
    margin-bottom: 20px;
    flex-wrap: wrap;
 
    height:350px;
  }
  #btn-tab1{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


  }
  #btn-tab2{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content2.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


  }
  #btn-tab3{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content3.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


  }
  #btn-tab4{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content4.jpg');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


  }
  #btn-tab5{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content5.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


  }
  #btn-tab6{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content6.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


    
  }
  #btn-tab7{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content7.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    
    border: solid 1px white;

    
  }
  #btn-tab8{
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url('./img/content8.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    align-items: center;
    border: solid 1px white;


    
  }
  .tab1btn-content{
    display: flex;
    align-items: flex-end;
    height: 100%;
   

  }
  .align-btn{
    width: 100%;
    height: 100%;
    display: flex;
    

  }
  .tab-button {
    padding: 10px 20px;
    border: none;
    background: #f0f0f0;
    cursor: pointer;
    transition: all 0.3s ease;
   color: #f0f0f0;
    filter: grayscale(100%);
  }
  
  .tab-button.active {
    filter: grayscale(0%);
    background: #4CAF50;
    color: white;
  }
  
  
  
  .content {
    display: none;
    animation: fadeIn 0.5s ease;
  }
  
  .content.active {
    display: block;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .services-midle{
    display: grid;
    grid-template-columns: 10% 80% 10%;
    
    background: rgb(232,76,19);
    background: linear-gradient(180deg, rgba(232,76,19,1) 31%, rgba(229,33,39,1) 100%);
    border-top: solid 1px white;
    border-bottom: solid 1px white;

  }
  .services-midle-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-right: solid 1px white;
    padding-top: 10%;
    padding-bottom: 10%;
  }
  .services-midle-left img{
    width: 30%;
    padding-top: 20px;
    padding-bottom: 20px;
    transition: transform 0.5s ease;
  animation: spinAndReturn 4s infinite ease-in-out;
  }
  @keyframes spinAndReturn {
    0%, 100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(15deg); /* Giro inicial */
    }
    50% {
      transform: rotate(-10deg); /* Giro contrario */
    }
    75% {
      transform: rotate(5deg); /* Pequeño rebote */
    }
  }
  
  /* Versión alternativa con rotación completa */
  @keyframes fullSpin {
    0%, 100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(90deg);
    }
    50% {
      transform: rotate(180deg);
    }
    75% {
      transform: rotate(270deg);
    }
  }
  .services-midle-right{
    width: 100%;
    height: 100%;
  }
  .content-container{
    width: 100%;
    height: 100%;
    position: relative;
  }

  #tab1{
    width: 100%;
    height: 100%;


    background-image: url('./img/content.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  #tab2{
    width: 100%;
    height: 100%;


    background-image: url('./img/content2.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  #tab3{
    width: 100%;
    height: 100%;


    background-image: url('./img/content3.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  #tab4{
    width: 100%;
    height: 100%;


    background-image: url('./img/content4.jpg');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  #tab5{
    width: 100%;
    height: 100%;


    background-image: url('./img/content5.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  
  }
  #tab6{
    width: 100%;
    height: 100%;


    background-image: url('./img/content6.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  
  }
  #tab7
  {
    width: 100%;
    height: 100%;


    background-image: url('./img/content7.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  
  }
  #tab8
  {
    width: 100%;
    height: 100%;


    background-image: url('./img/content8.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  
  }
  .tab1-left{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
   
    height: 100%;
  }
  .tab1-content{
    display: flex;
    align-items: center;
  
  }
  .tab1-content {
    padding: 5%;
  }
  .tab1-display{
    display: grid;
    grid-template-columns: 50% 50%;
    height: 100%;
  }
  .tab1-content h3{
    font-family: 'Mollen Personal Use';
    color: white ;
    font-size: calc(50px + (100vw - 1918px) * 0.02);
    margin-left: 20px;
    
  }
  .tab1-right{
    display: flex;
    align-items: flex-end;
    margin-bottom: 5%;
    margin-right: 5%;
  }
  .tab1-right p{
    font-family: 'Mollen Personal Use';
    color: white ;
    font-size: calc(28px + (100vw - 1918px) * 0.02);
    background-color: #33333383;
    margin-left: 5%;
    padding: 5%;
    border-radius: 33px;
  }
  /* Estilos del carrusel (igual que antes) */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 5%;
 
  }
 #title-cases{
    display: flex;
    align-items: center;
 }
  #title-cases h1{
    font-family: 'Gotham Rounded';
    font-size: calc(90px + (100vw - 1918px) * 0.02);
    color: #e51271;
    margin-left: 5%;
    padding-bottom: 2%;

    
  }
  #title-cases p{
    font-family: 'Mollen Personal Use';
    font-size: calc(50px + (100vw - 1918px) * 0.02);
    color: #e51271;
    margin-left: 1%;
    padding-bottom: 1%;

  }
  .carousel-track {
    display: flex;
    
    transition: transform 0.5s ease;

  }
  
  .carousel-item {
    flex: 0 0 calc(25% );
   height: 400px;
    border: none;
   

    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;

  }
  .carousel-item h3{
    display: none;
  }
  .carousel-item:hover h3{
    color: #e51271;
    font-family: 'Mollen Personal Use';
  font-weight: 700;
    font-size: calc(40px + (100vw - 1918px) * 0.02);
    background-color: rgba(255, 255, 255, 0.493);
   
 

  }
  .carousel-item:hover {
  
    border-radius: 33px;
   
  }
  .modal-btn1{
    background-image: url('./img/exito1.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  .modal-btn2{
    background-image: url('./img/exito2.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  .modal-btn3{
    background-image: url('./img/exito3.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  .modal-btn4{
    background-image: url('./img/exito4.webp');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
  }
  .modal-left video{
    width: 80%;
    border-radius: 13px;
  }
  .modal.active {
    display: flex; /* Se muestra cuando tiene la clase active */
}
  /* Estilos para los modales */
  .modal {
    position: fixed; /* Fijo en la pantalla */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente */
    display: none; /* Oculto por defecto */
    justify-content: center;
    align-items: center;
    z-index: 2147483647; /* Máximo valor posible (2^31 - 1) */
  }
  .modal.active ~ .adviser-container .adviser-brands,
  .modal.active + .adviser-container .adviser-brands {
      display: none ;
  }
  .modal-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 40% 60%;
  }

  .modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
    width: 50%;  
    position: relative;
    animation: modalopen 0.5s;
    overflow: auto;
    z-index: 2147483647;
  }
  
  @keyframes modalopen {
    from {opacity: 0; transform: translateY(-50px)}
    to {opacity: 1; transform: translateY(0)}
  }
  
  .close-modal {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
  }
  
  .close-modal:hover {
    color: #e84c13;
  }
  .modal-cases{
    display: grid;
    grid-template-columns: 60% 40%;
    width: 100%;
   
  
  }
  .modal-right{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .modal-margin-up{
    
    display: grid;
    grid-template-columns: 60% 40%;
    border: solid 2px black;
    border-radius: 23px;
    align-items: center;
    
  }
  .modal-margin-up h3{
    font-family: 'Mollen Personal Use';
  font-weight: 700;
    font-size: calc(38px + (100vw - 1918px) * 0.02);
    color: #e51271;
    padding: 5%;
  }
  .modal-margin-up p{
    font-family: 'Mollen Personal Use';
  font-weight: 700;
    font-size: calc(32px + (100vw - 1918px) * 0.02);
   color: #e84c13;
 padding-top: 50%;
 padding-bottom: 50%;
  
    
  }
  .modal-border{
    border-left: solid 2px #686868;
    height: 100%;
    padding-left: 5%;
  padding-right: 5%;
  }
  .modal-margin-down p{
font-family: 'Mollen Personal Use';
font-weight: 400;
font-size: calc(26px + (100vw - 1918px) * 0.02);
padding: 5%;
color: #686868;
border: solid 2px #686868;
border-radius: 23px;

margin-top: 10px;
  }
  .modal-cases-right{
    width: 100%;
    height: 100%;
    border: solid 2px #686868;
    border-radius: 23px;
    display: flex
    ;
        justify-content: center;
        margin-left: 5%;
        margin-left: 5%;
    }
    .modal-cases-right h3{
     color: #e51271;  
     font-family: 'Mollen Personal Use';
     font-weight: 700;
       font-size: calc(30px + (100vw - 1918px) * 0.02); 
     
       height: 33%;
       text-align: center;
       
    }
    .modal-border-right1{
        width: 100%;
        height: 33%;
        
         display: flex;
         justify-content: center;
     align-items: center;
     flex-direction: column;
 }
   
    .modal-border-right{
        width: 100%;
       height: 33%;
        border-top: solid 2px  #686868;
        display: flex;
        justify-content: center;
    align-items: center;
    flex-direction: column;
    
}
   
    .modal-righ-widht{
        width: 100%;
    }
    .modal-border-right p{
        font-family: 'Mollen Personal Use';
        font-weight: 400;
          font-size: calc(30px + (100vw - 1918px) * 0.02); 
          color: #686868;
    }
    .modal-border-right h2{
        font-family: 'Mollen Personal Use';
        font-weight: 400;
          font-size: calc(37px + (100vw - 1918px) * 0.02); 
          color: black;
    }
    .carrusel-controls{
        display:none;
        grid-template-columns: 30% 40% 30%;
        height: 120px;
        margin-left: 5%;
        margin-right: 5%;
        align-items: center;
    justify-items: center;
    }
    .carrusel-controls-center button{
        background-color: white;
        border-style: none;
        cursor: pointer;
    }
    
    .carrusel-controls-center p{
        font-family: 'Mollen Personal Use';
        font-weight: 400;
          font-size: calc(37px + (100vw - 1918px) * 0.02); 
          color:#e51271;
          

    }
    .adviser-container {
        width: 100%;
        overflow: hidden;
        position: relative;
        z-index: auto;
      }
      
      .adviser-brands {
        display: flex;
        align-items: center;
        background: linear-gradient(180deg, rgba(232,76,19,1) 31%, rgba(229,33,39,1) 100%);
        padding: 1% 0;
        width: max-content; /* Ancho según contenido */
        animation: scroll 30s linear infinite;
      }
      
      .adviser-content {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-shrink: 0;
       
      }
      
      .adviser-brands p {
        font-family: 'Mollen Personal Use';
        font-weight: 400;
        font-size: calc(36px + (100vw - 1918px) * 0.02); 
        color: white;
        white-space: nowrap;
        margin: 0 20px;
      }
      
      .adviser-brands img {
        height: 20px;
        width: auto;
        margin: 0 10px;
      }
      
      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-20%); /* Mueve hasta la mitad del contenido duplicado */
        }
      }
      
      /* Pausa la animación al hacer hover */
      .adviser-container:hover .adviser-brands {
        animation-play-state: paused;
      }
        /* brands*/
.brands-logos{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  padding-left: 5%;
  padding-right: 5%;
  margin-top: 5%;
  margin-bottom: 5%;
  justify-items: center;
    align-items: center;
}
.brands-logos img{
  width: 35%;
  padding: 10%;
}
#bav{
  width: 25%;
}
         /* talentos */
         .cuadros-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            
            position: relative;
          }
          #title-talents{
            display: flex;
            align-items: center;
            background-color: #e84c13;
            height: 120px;
         }
          #title-talents h1{
            font-family: 'Gotham Rounded';
            font-size: calc(90px + (100vw - 1918px) * 0.02);
            color: white;
            margin-left: 5%;
            
        
            
          }
          #title-talents p{
            font-family: 'Mollen Personal Use';
            font-size: calc(50px + (100vw - 1918px) * 0.02);
            color: white;
            padding-top: 1%;
            margin-left: 20px;
            font-weight: 100;
          
          
        
          }
          .cuadro {
            background: #f5f5f5;
         
          
            text-align: center;
            transition: all 0.5s ease;
            height: 400px;
            display: grid;
            grid-template-rows: 80% 20%;
            cursor: pointer;
          }
          .cuadro a{
            height: 100%;
            text-decoration: none;
          }
          .cuadro-up{
            display: flex;

            align-items: flex-end;
          
            height: 100%;
           
            border: solid 1px white;
            filter: grayscale(100%);
            transition: filter 0.5s ease;
          }
          .cuadro-up:hover{
            filter: grayscale(0%)
          }
          .cuadro-up p{
            font-family: 'Mollen Personal Use';
            font-weight: 400;
            font-size: calc(37px +(100vw - 1918px)* 0.02);
            text-align: left;
            margin-left: 10px;
            margin-bottom: 10px;
            color: white;
          }
          .cuadro-down{
           background-color: #e51271;
            height: 71px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: solid 1px white;
          }
          .cuadro-down p{
            font-family: 'Gotham Rounded';
            font-weight: 200;
            font-size: calc(37px +(100vw - 1918px)* 0.02);
            text-align: left;
            margin-left: 10px;
            margin-bottom: 10px;
            color: white;
          }
          .Camidust{
            background-image: url('./img/talento1.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
         .Aletjandra{
            background-image: url('./img/talento2.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .ElSaii{
            background-image: url('./img/talento3.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .ItsDandJ{
            background-image: url('./img/talento4.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .MelanieVelandia{
            background-image: url('./img/talento5.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .Peach{
            background-image: url('./img/talento6.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .NickyCast{
            background-image: url('./img/talento7.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .Larry{
            background-image: url('./img/talento8.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;

          }
          .DarckMarie{
            background-image: url('./img/talento9.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;
          }
          .LaMonaSoyYo{
            background-image: url('./img/talento10.webp');
            background-size: cover;       /* Cubre todo el contenedor */
            background-position: center;  /* Centra la imagen */
            background-repeat: no-repeat; /* Evita repetición */
            background-attachment: scroll;
          }

          .cuadro.rotatorio {
            
            position: absolute;
           width: 25%;
            bottom: 0;
            opacity: 0; /* Inicialmente transparente */
            transform: translateY(20px);
            transition: all 0.5s ease; /* Transición suave */
            pointer-events: none; /* Evita interacción cuando está invisible */
            z-index: 1000;
          }
          .cuadro.rotatorio:hover{
            filter: grayscale(0%)
          }
          
          /* Posiciones fijas para los rotatorios */
          .cuadro.rotatorio:nth-child(9) { left: 0; }
          .cuadro.rotatorio:nth-child(10) { left: 25%; }
          
          
          
          .visible {
            animation: appear 0.5s forwards;
          }
          
          @keyframes appear {
            to {
              opacity: 1;
              transform: translateY(0);
            }
          }
          .blog-dec{
            height: 120px;
            display: grid;
            grid-template-columns: 25% 50% 25%;
          }
          .blog-dec-tittle{
            display: flex;
            align-items: center;
            justify-content: center;
            border-left: solid 1px #686868;
            border-right: solid 1px #686868;
          }
          .blog-dec-tittle p{
            font-family: 'Gotham Rounded';
            font-size: calc(40px + (100vw - 1918px) * 0.02);
            color: #E51271

          }
          .blog-dec-tittle h1{
            font-family: 'Gotham Rounded';
            font-size: calc(90px + (100vw - 1918px) * 0.02);
            color: #E51271

          }
          .banner-container {
            position: relative;
           width: 100%;
            margin: auto;
            overflow: hidden;
            height: 100%;
        }
        .blog-banner {
            display: flex;
            transition: transform 0.5s ease;
           
        }
        .blog-card {
            flex: 0 0 25%;
            box-sizing: border-box;
            
            height: 100%;
        }
        .blog {
            background: white;
           
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
            border: solid 1px #676767;
        }
        .blog-thumb{
  width: 100%;
  aspect-ratio: 16 / 9;   /* o 4/3, 1/1, la que prefieras */
  overflow: hidden;
}

.blog-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block; /* evita “gaps” por línea base */
}
        .blog-title{
          display: flex;
          align-items: center;
            height:105px;
        }
        .blog-date p{
          font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(26px + (100vw - 1918px) * 0.02);
  color: #E51271;
  font-weight: 100;
  margin-left: 20px;
        }
        .blog-title p{
          font-family: 'Gotham Rounded', sans-serif;
  font-size: calc(26px + (100vw - 1918px) * 0.02);
  color: #686868;
  font-weight: 700;

  margin-left: 20px;
  margin-right: 20px;
        }
     .blog-snippet{
        height: 150px;
     }
     .blog-snippet p{
      font-family: 'Gotham Rounded', sans-serif;
      font-size: calc(25px + (100vw - 1918px) * 0.02);
      color: #686868;
      font-weight: 100;
      margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
     }
        .blog-content {
            padding: 5px;
            flex-grow: 1;
            height: 100%;
        }
        .blog-date {
            font-size: 0.9em;
            color: #888;
            margin-bottom: 10px;
        }
        .blog-snippet {
            font-size: 0.95em;
           
        }
        .ver-mas {
            text-align: left;
            margin-bottom: 40px;
        }
        .ver-mas a {
            text-decoration: none;
            background: #E84C13;
            color: white;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-top: 5px;
            border-radius: 10px;
            font-size: 0.9em;
            font-family: 'Gotham Rounded', sans-serif;
            font-size: calc(26px + (100vw - 1918px) * 0.02);
           
            font-weight: 700;
            margin-left: 20px;
           
            margin-top: 5px;
            margin-bottom: 20px;
        }
        .blog-sides{
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .flecha {
          margin-left: 10px;
          margin-right: 10px;
            position: absolute;
           
            
            background-color: white;
            color: white;
            border: none;
       
            cursor: pointer;
            z-index: 1;
        }
        .izquierda { left: 0; }
        .derecha { right: 0; }


/* Agencias */ 
        .agency-logos{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
          padding-left: 5%;
          padding-right: 5%;
          margin-top: 5%;
        
          justify-items: center;
            align-items: center;
        }
        .agency-logos img{
          width: 80%;
          padding: 3%;
        }
        .agency-less{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr ;
          padding-left: 20%;
          padding-right: 20%;
       
          justify-items: center;
            align-items: center;
            margin-bottom: 5%;
        }
        .agency-less img{
          width: 80%;
          padding: 3%;
        }
/* whostyle */ 
.whoam-dec{
  background-color: #e84c13/* Posiciones fijas para los rotatorios */;

  display: flex;

  padding-left: 5%;
  gap: 10%;
  padding-bottom: 3%;
  padding-top: 1%;
}
.whoam-dec1 img {
  width: 50px; /* Ajusta según necesites */
  height: 50px;
  animation: floatBounce 3s infinite ease-in-out;
  transform-origin: center;
}

/* Animación alternada para los iconos pares e impares */
.whoam-dec1 img:nth-child(odd) {
  animation-name: floatBounce, rotateSlow;
  animation-duration: 3s, 8s;
}

.whoam-dec1 img:nth-child(even) {
  animation-name: floatBounceReverse, rotateSlowReverse;
  animation-duration: 3.5s, 9s;
}

/* Keyframes para el efecto de flotación */
@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

@keyframes floatBounceReverse {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-25px) rotate(-5deg);
  }
}

/* Keyframes para rotación sutil */
@keyframes rotateSlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotateSlowReverse {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
.whoam-dec img {

  animation: pulseShake 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Animación principal */
@keyframes pulseShake {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  15% {
    transform: scale(1.1) rotate(2deg);
  }
  30% {
    transform: scale(1) rotate(-1deg);
  }
  45% {
    transform: scale(1.15) rotate(3deg);
  }
  60% {
    transform: scale(1.05) rotate(-2deg);
  }
  75% {
    transform: scale(1.1) rotate(1deg);
  }
}

/* Efectos alternados para iconos pares/impares */
.whoam-dec img:nth-child(odd) {
  animation-delay: 0.2s;
  filter: drop-shadow(0 2px 5px rgba(232, 76, 19, 0.3));
}

.whoam-dec img:nth-child(even) {
  animation-name: pulseShakeReverse;
  filter: drop-shadow(0 2px 5px rgba(229, 33, 39, 0.3));
}

@keyframes pulseShakeReverse {
  0%, 100% {
    transform: scale(1) rotate(0deg);
  }
  15% {
    transform: scale(1.1) rotate(-2deg);
  }
  30% {
    transform: scale(1) rotate(1deg);
  }
  45% {
    transform: scale(1.15) rotate(-3deg);
  }
  60% {
    transform: scale(1.05) rotate(2deg);
  }
  75% {
    transform: scale(1.1) rotate(-1deg);
  }
}

/* Efecto hover */
.whoam-dec img:hover {
  animation: none;
  transform: scale(1.2) rotate(0deg);
  filter: 
    drop-shadow(0 0 10px rgba(232, 76, 19, 0.7))
    brightness(1.1);
  transition: all 0.3s ease-out;
}
/* Efecto hover para pausar la animación */
.whoam-dec1 img:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 0 10px rgba(232, 76, 19, 0.8));
}
.whoam-dec1{
  display: flex;
  background-color: #e51271/* Posiciones fijas para los rotatorios */;
  padding-left: 5%;
  gap: 10%;
  padding-bottom: 3%;
}
.whoam-dec2{
  display: flex;
  justify-content: center;
  background-color: #e51271/* Posiciones fijas para los rotatorios */;
  padding-left: 25%;
  padding-right: 25%;
  gap: 22.5%;
  padding-top: 5%;
  padding-bottom: 3%;

}
.whoam-grid{
  display: grid;
  grid-template-columns: 40% 60%; 
  background: rgb(232,76,19);
background: linear-gradient(180deg, rgba(232,76,19,1) 31%, rgba(229,18,113,1) 71%);
padding-left: 5%;
padding-top: 3%;
  
}
.whoam-left-up{
  display: flex;
  flex-direction: column;
  margin-top: 2%;
 margin-bottom: 10%;
}
.whoam-left-up h1{
  font-family: 'Gotham Rounded';
            font-weight: 700;
            font-size: calc(90px + (100vw - 1918px) * 0.02); 
            text-align: left;
        
            color: #FFD000;
}
.whoam-left-up h2{
   font-family: 'Mollen Personal Use';
            font-weight: 400;
            font-size: calc(80px + (100vw - 1918px) * 0.02); 
            text-align: left;
            
            margin-top: -20px;
            color: white;
}
.whoam-left-down p{
  font-family: 'Mollen Personal Use';
           font-weight: 400;
           font-size: calc(30px + (100vw - 1918px) * 0.02); 
           text-align: left;
           
       
           color: white;
           
}
.whoam-left-down {
  height: 150px;
  overflow-y: auto;
  padding-right: 10px; /* Espacio para que el scroll no tape el texto */
}

/* Estilos para la barra de scroll */
.whoam-left-down::-webkit-scrollbar {
  width: 8px;
}

.whoam-left-down::-webkit-scrollbar-track {
  background: transparent;
}

.whoam-left-down::-webkit-scrollbar-thumb {
  background-color: #FFD000;
  border-radius: 4px;
}

/* Para navegadores Firefox */
.whoam-left-down {
  scrollbar-width: thin;
  scrollbar-color: #FFD000 transparent;
}

.whoam-right img{
width: 90%;
}
.repag{
  display: flex;
  background-color: #e51271/* Posiciones fijas para los rotatorios */;

  gap: 10%;
  justify-content: center;
}
.repag1{
  display: flex;
  background-color: #e84c13;/* Posiciones fijas para los rotatorios */;
  padding-left: 5%;
  gap: 10%;
  justify-content: center;
  margin-top: 5%;
  padding-bottom: 2%;
}
.repag button{
  border: none;
  background-color: #f0f0f000;
  cursor: pointer;
}
.repag1 button{
  border: none;
  background-color: #f0f0f000;
  cursor: pointer;
}
.repag button img{
  width: 80%;
margin-bottom: 30%;
margin-top: 30%;
}
/* us*/
.us{
  background: rgb(229,18,113);
background: linear-gradient(180deg, rgba(229,18,113,1) 31%, rgba(232,76,19,1) 71%);
  padding-top: 0;
  display: flex;
  justify-content: center;
 padding-bottom: 10%;
}
.us-back{
  background-image: url('./img/us.svg');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70%;
}
.us-back h1{
  font-family: 'Gotham Rounded';
    font-weight: 100;
    font-size: calc(90px + (100vw - 1918px)* 0.02);
    margin-top: 5%;
    color: #686868;
}
.us-back h2{
  font-family: 'Gotham Rounded';
    font-weight: 600;
    font-size: calc(90px + (100vw - 1918px)* 0.02);
  margin-top: 0px;
    color: #686868;
    margin-bottom: 5%;
}
.us-back p{
  font-family: 'Gotham Rounded';
    font-weight: 200;
    font-size: calc(30px + (100vw - 1918px)* 0.02);
  margin-top: 0px;
    color: #686868;
    margin-bottom: 5%;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}
.us-back-text{
  color: #e51271;
}


.mision{
  background-color: #e84c13;
  padding-right: 5%;
  padding-left: 5%;
}
.mision-grid{
  display: grid;
  grid-template-columns: 50% 50%;
  
}
.mision-left{
  background-image: url('./img/forma.svg');
    background-size: cover;       /* Cubre todo el contenedor */
    background-position: center;  /* Centra la imagen */
    background-repeat: no-repeat; /* Evita repetición */
    background-attachment: scroll;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.mision-left h1{
  font-family: 'Gotham Rounded';
  font-weight: 100;
  font-size: calc(90px + (100vw - 1918px)* 0.02);
  margin-top: 5%;
  color: #e51271;
  padding-top:30%;
  
}
.mision-left h2{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(90px + (100vw - 1918px)* 0.02);
  
  color: #e51271;
  padding-bottom: 28%;
  margin-top: -20px;
}
.mision-right{
  background-image: url('./img/forma2.svg');
  background-size: cover;       /* Cubre todo el contenedor */
  background-position: center;  /* Centra la imagen */
  background-repeat: no-repeat; /* Evita repetición */
  background-attachment: scroll;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 86%;
  margin-left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mision-right p{
  font-family: 'Gotham Rounded';
    font-weight: 400;
    font-size: calc(30px + (100vw - 1918px)* 0.02);
    margin-top: 0px;
    color: #686868;
    margin-bottom: 5%;
    margin-left: 7%;
    margin-right: 7%;
    text-align: center;
}
.mision-txt{
  color: #e84c13;
  font-weight: 800;
}
.why-grid{
  display: grid;
  grid-template-columns: 50% 50%;
 
}
.why-left{
  display: flex;
  justify-content: center;
    align-items: center;
    border-right: solid 1px black;
    height: 600px;
}
.why-left h1{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(100px + (100vw - 1918px)* 0.02);
  margin-top: 0px;
  color: #686868;
padding-left: 5%;
 
}
.why-left img{
 width: 15%;
}
.why-right{
  display: grid;
  grid-template-rows: 33% 33% 33%;
  align-items: center;
}
.why-right h3{
 
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(40px + (100vw - 1918px)* 0.02);
  color: #e84c13; 
  margin-bottom: 15px;
  
}
.why-points{
  display: flex;
  flex-direction: column;
  justify-content: center;
height: 100%;
  border-top: solid 1px #676767;
padding-left: 2%;
padding-right: 2%;
}
.color-why{
  color: #E51271;
}
.why-points p{
  font-family: 'Gotham Rounded';
  font-weight: 200;
  font-size: calc(30px + (100vw - 1918px)* 0.02);
margin-top: 0px;
  color: #686868;

}
.white-why{
  height: 80px;
  border-bottom: solid 2px #676767;
}
.white-why1{
  height: 80px;
  border-top: solid 2px #676767;
}
.workers-title{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color:#E51271 ;
  border-bottom: solid 1px white;

}
.workers-title h1{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(90px + (100vw - 1918px)* 0.02);
  color: #FFD000;
}
.workers-title h2{
  font-family: 'Gotham Rounded';
  font-weight: 300;
  font-size: calc(90px + (100vw - 1918px)* 0.02);
  color: #FFD000;
  margin-left: 15px;
  
}
/* Estilos para los modales worker */
.worker-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  
}

.worker-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  background-color: #e51271;
  background-image: linear-gradient(180deg, #e51271 4%, #ffffff 53%, #ffffff 70%);
  border-radius: 13px;
  
  position: relative;
  
}

.worker-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.worker-close:hover {
  color: black;
}
.workers-show{
  padding-left: 5%;
  padding-right: 5%;
  background-color: #E51271;
}
.worker-btn {
 
  cursor: pointer;
  
  color: black;
  border: none;
  background-color: #E51271;
}
.worker-btn:hover{
  background-color: #f0f0f06e;
  border-radius: 23px;
}
.worker-btn img{
  width: 90%;
}
.work-btn{
  padding-top: 1%;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  justify-items: center;
}

.work-names {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  
  justify-items: center;
}
.work-names h3{
  font-family: 'Gotham Rounded';
  font-weight: 500;
  font-size: calc(40px + (100vw - 1918px)* 0.02);
  color: #FFD000;
}
.work-mod-up{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.work-mod-up img{
  width: 20%;
  border-radius: 400px;
  border: solid 10px #E51271;
}
.work-mod-up h3{
  font-family: 'Gotham Rounded';
  font-weight: 500;
  font-size: calc(40px + (100vw - 1918px)* 0.02);
  color: #E51271;
  margin-top: 20px;
  margin-bottom:40px;
}
.work-dscr{
  padding-left: 10%;
  padding-right: 10%;
}
.work-dscr p{
  font-family: 'Gotham Rounded';
  font-weight: 200;
  font-size: calc(30px +(100vw - 1918px)* 0.02);
  margin-top: 0px;
  color: #686868;
  margin-bottom: 30px;
}
.work-dscr h2{
  
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(40px +(100vw - 1918px)* 0.02);
  margin-top: 0px;
  color: #686868;
}
.workers-dec{
  width: 100%;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  background-color: #e51271;
 padding-top: 4%;
 padding-bottom: 2%;
}
.workdec-center{
  display: flex;
  justify-content: center;
}
.workdec-right{
  display: flex;
  justify-content: flex-end;
  margin-right: 18%;
}
.workdec-left{
  display: flex;
  justify-content: flex-start;
  margin-left:18%;
}
.work-final{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: #E51271;
  border-top: solid 1px white;
  padding-top: 1%;
  padding-bottom: 1%;
 

}
.work-final p{
  font-family: 'Mollen Personal Use';
  font-weight: 340;
  font-size: calc(40px + (100vw - 1918px) * 0.02);
  color: white;
  margin-left: 2%;
  margin-right: 2%;
}
footer{
  background-color: #e84c13;
  background-image: linear-gradient(147deg, #e84c13 0%, #e51271 74%);
}
.footer-grid{
  

display: grid;
grid-template-columns: 50% 50%;

}
.footer-left{
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-left h1{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(90px + (100vw - 1918px) * 0.02);
  padding-left: 5%;
  color: white;
}
.ftsp{
  color: #FFD000;
}
.footer-right{
  display: grid;
  grid-template-rows: 30% 70%;
}
.ft-rg-up{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-right: 5%;

}
.ft-rg-up a{
  margin-left: 3%;

}
.ft-tg-lt{
  display: flex;
  flex-direction: column;
  margin-top: 10%;
  align-items: flex-end;
  margin-right: 5%;
}
.ft-tg{
  display: flex;
  align-items: center;
 
}
.ft-tg h3{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: #FFD000;
  width: 160px;

}
.ft-tg p{
  font-family: 'Gotham Rounded';
  font-weight: 100;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: white;
}
.footer-nav{
  width: 100%;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;

}

.ft-left img{ 
  margin-left: 7%;
}
.ft-right{
  display: flex;
  margin-right: 5%;
  justify-content: flex-end;
}
.ft-right a{
 margin-left: 5%;
 text-decoration: none;
 font-family: 'Gotham Rounded';
  font-weight: 100;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: white;
}
.ft-right a:hover{
  color: #FFD000;
}
.reserved{
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  border-top: solid 1px white;
  margin-top: 20px;
}
.reserved p{
  font-family: 'Gotham Rounded';
  font-weight: 100;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: white;
  margin-left: 3%;
}
.blog-ind{
  display: grid;
  grid-template-columns: 50% 50%;
  padding-right: 5%;
  padding-left: 5%;
}
.blog-ind h1{
  font-family: 'Gotham Rounded';
  font-weight: 800;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: #676767;
}
.blog-contenido{
  font-family: 'Gotham Rounded';
  font-weight: 200;
  font-size: calc(30px + (100vw - 1918px) * 0.02);
  color: black;
  
}
.blog-ind img{
  height: 100%;
}
@media (max-width: 678px) {
  .contacto-boton{
    width: 35%;
    height: 15%;
    bottom: 10px;
   right:  30px;
  }
  .wllp1-right{
    display: none;
  }
  .wllp1-right1{
    display: none;
  }
  .none-hero{
    display: flex;
  }
  .contacto-contenido{
    width: 80%;
  }
  .contact-up p{
    font-size: 16px;
    text-align: center;
  }
  .contact-up1 p{
    font-size: 16px;
    text-align: center;
  }
  .contac-midle h3{
    font-size: 12px;
    text-align: center;
  }
  .contac-midle1 h3{
    font-size: 14px;
    text-align: center;
  }
  .contact-down p{
    font-size: 16px;
    text-align: center;
  }
  .contact-down1 p{
    font-size: 16px;
    text-align: center;
  }
  .hero-up{
    display: flex;
    flex-direction: column;
  }
  .services-up-left h1 {
    margin-right: 0px;
    font-size: calc(82px + (100vw - 1918px) * 0.02);
  }
  .hero-container h1{
    font-size: calc(82px + (100vw - 1918px) * 0.02);
  }
  #hero-container{
    padding-top:20%;
  }
  .services-up{
    display: flex;
  }
  .services-up-left{
    border-right: none;
  }
  .services-up-right{
    display: none;
  
  }
  .services-midle{
    display: flex;
    padding-left: 0;
  }
  .services-midle-left{
    display: none;
  }
  .services-midle-right{
    height: 320px;
  }
 
  .services-midle p{
    font-size: calc(45px + (100vw - 1918px) * 0.02);
  }
  .buttons-container{
    margin: 0;
  }
  .tab1btn-content img{
    display: none;

    
  }
  .modal5 .modal6{
    display: none;
  }
  .modal-btn-none{
    display: none;
  }
  .carousel-track {
    
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.blog-dec-tittle p{
      font-size: calc(60px + (100vw - 1918px) * 0.02);  
}
.blog-ind{
  display:flex;
  flex-direction: column-reverse;
}
.carrusel-controls{
display: none;
}
.modal-margin-up p{
  font-size: calc(60px + (100vw - 1918px)* 0.02);
}
.modal-content{
 width: 100%;
 padding: 0;
}
.modal-margin-up{
  grid-template-columns: 40% 60%;
}
.modal-cases-left{
  width: 90%;
}
.modal-cases-right{
  width: 90%;
}
.modal-margin-up{
  grid-template-columns: 1fr;
}
.modal-grid{
  display: flex;
  flex-direction: column;
}
.modal-border{
  display: none;
}
.modal-left{
  display: flex;
 justify-content: center;
 margin-top: 20px;
}
.modal-left video{
  width: 50%;
}
.modal-margin-up h3{
  font-size: 23px;

}
.modal-cases-right h3 {
  font-size: 23px;
}
.modal-border-right p{
  font-size: 20px;
}
.modal-border-right h2{
  font-size: 23px;
}

.modal-margin-down p{
  font-size: 12px;
}
.modal-cases{
  margin-bottom: 5%;
  
}
.adviser-brands p{
  font-size: 20px;
}
.brands-logos{
  grid-template-columns: 33% 33% 33%;
}
.brands-logos img{
  width: 80%;
}
.carousel-item{
  height: 300px;
}
.cuadros-grid{
  grid-template-columns: repeat(2, 1fr);
}
.agency-logos {
  grid-template-columns: 33% 33% 33%;
}
.agency-less{
grid-template-columns: 33% 33% 33%;
padding-left: 0;
padding-right: 0;
}
.whoam-grid{
  display: flex;
  flex-direction: column;
}
.whoam-dec{
  padding-left: 8%;
}
.rotatorio{
  display: none;
}
.cuadro-up{
  filter: grayscale(0%);
}
.whoam-dec img{
  width: 10%;

}

.whoam-dec1 img{
  width: 10%;

}
.whoam-left-up{
  margin-bottom: 1%;
}
.whoam-left-up h1{
  font-size: 45px;
}
.whoam-left-down p{
  margin-top: 1%;
  font-size: 16px;
}
.us-back{
  width: 90%;
}
.us-back h1 h2{
  font-size: 45px;
}
.us-back p{
  font-size: 16px;
}
.mision-grid{
  display: flex;
  flex-direction: column;
}
.mision-right{
  margin-top: 20px;
  height: 400px;
}
.mision-left h1 h2{
  font-size: 45px;
}
.work-final img{
  width: 15px;
}
.mision-right p {
  font-size: calc(45px + (100vw - 1918px)* 0.02);
}
.why-grid{
  display: flex;
  flex-direction: column;
}
.why-right h3{
  font-size: calc(50px + (100vw - 1918px)* 0.02);
  margin-top: 5%;
}
.why-right p{
  font-size: calc(47px + (100vw - 1918px)* 0.02);
  margin-bottom: 5%;
}
.why-left h1{
  font-size: calc(90px + (100vw - 1918px)* 0.02);
}
.workers-title h1{
  font-size: calc(80px + (100vw - 1918px)* 0.02);
}
.workers-title h2{
  font-size: calc(80px + (100vw - 1918px)* 0.02);
}
.footer-grid{
  grid-template-columns: 1fr;
}
.footer-nav{
  grid-template-columns: 1fr;
}
.tab1btn-content{
  width: 80%;
}
}

@font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Book.otf') format('opentype'),
         url('../fonts/GothamRoundedBook_21018.ttf') format('truetype');
    font-weight: 400; /* Normal (Book) */
    font-style: normal;
  }
  
  /* Book Italic */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-BookItalic.otf') format('opentype');
    font-weight: 400;
    font-style: italic;
  }
  
  /* Light */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Light.otf') format('opentype'),
         url('../fonts/GothamRoundedLight_21020.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
  }
  
  /* Light Italic */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
  }
  
  /* Medium */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Medium.otf') format('opentype'),
         url('../fonts/GothamRoundedMedium_21022.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
  }
  
  /* Medium Italic */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
  }
  
  /* Bold */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-Bold.otf') format('opentype'),
         url('../fonts/GothamRoundedBold_21016.ttf') format('truetype');
    font-weight: 700; /* Bold */
    font-style: normal;
  }
  
  /* Bold Italic */
  @font-face {
    font-family: 'Gotham Rounded';
    src: url('../fonts/GothamRounded-BoldItalic.otf') format('opentype');
    font-weight: 700;
    font-style: italic;
  }
  @import url('https://fonts.cdnfonts.com/css/mollen-personal-use');
  p {
    font-size: clamp(14px, 1.25vw, 24px); /* Mínimo: 14px, Ideal: 1.25vw, Máximo: 24px */
  }
    @media (min-width: 768px) {
    .blog-card {
        flex: 0 0 50%; /* Tablet: 50% (2 elementos visibles) */
    }
}

@media (min-width: 992px) {
    .blog-card {
        flex: 0 0 25%; /* Desktop: 25% (4 elementos visibles como en tu versión original) */
    }
}

/* Estilos para las flechas en móvil */
.blog-sides {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flecha {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
}