@import url('https://fonts.googleapis.com/css2?family=Bacasime+Antique&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');



html {

  scroll-snap-type: smooth;

}





body {

    font-family: 'Open-Sans', sans-serif;

    margin: 0;

    background-image: #ffffff; /* Color de fondo general */

    color: rkred; /* Color del texto */

    line-height: 1.6;

  }

  

  header {

    /*position: sticky;*/

    top: 0;

    z-index: 10;

    /*background-color: rgba(241, 237, 231, 0.992); /* Color de fondo de la cabecera */

    box-shadow: 0 2px 5px rgba(255, 255, 255, 0);

    padding: 10px 0;

  }



  .logo_link{

    position: absolute;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

  }

  

  .navbar-nav .nav-link {

    color: #ffffff;

    transition: color 0.3s;

    font-weight: 600;

  }

  

  .navbar-nav .nav-link:hover {

    color: #ff2832;

    /* Color del texto del menú al pasar el ratón */

  }

  

  .navbar-toggler {

    background-color: rgb(65, 64, 64) !important;

  }



  #icon{

    color: white;

    font-size: 2.2rem;

  }



  

  /* Contenedor del slider - ya lo tienes, solo ajusta si quieres */
#sliderContainer {
  position: relative;
  width: 120%; /* o el tamaño que desees */
  max-width: 700px; /* tamaño máximo */
  height: auto;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Las imágenes del carrusel */
#sliderContainer .slide {
  width: 100%; /* ajusta al tamaño deseado */
  height: auto;
  max-width: 700px; /* tamaño máximo */
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute; /* para superponerlas */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* La imagen activa */
#sliderContainer .slide.active {
  opacity: 1;
  position: relative; /* para que ocupe espacio normal */
  transform: translate(0, 0);
}

   /* Overlay general */
  /* Estilo para la overlay */
#introOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
#introOverlay.show {
  display: flex;
}
/* Animación de entrada del overlay */
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Ocultar overlay cuando tenga la clase 'hidden' */
#introOverlay.hidden {
  display: none;
  animation: fadeOutOverlay 0.5s forwards;
}

/* Animación para salida del overlay */
@keyframes fadeOutOverlay {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Contenido de la ventana */
#introContent {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  padding: 1px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(56, 56, 56, 0.3);
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInScale 0.5s forwards;
}

/* Estado inicial del contenido del overlay */
#introContent {
  opacity: 0;
  transform: scale(0.8);
  /* Añade esto para mejorar la percepción de la animación */
  will-change: opacity, transform;
  /* Opción adicional: establecemos el origen de la escala */
  transform-origin: center;
}

/* Animación con curva de easing para suavizar */
@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Aplicar la animación con una curva de easing para suavidad */
#introContent {
  animation: fadeInScale 0.5s ease-out forwards;
}

/* Contenedor del carrusel */
#sliderContainer {
  position: relative;
  width: 100%; /* ajusta a tu necesidad */
  max-width: 700px;
  height: auto;
  overflow: hidden;
  margin: auto;
  border-radius: 10px;

}

#sliderContainer .slide img {
  width: 100%;
  height: 100%; /* para que ocupe toda la altura del contenedor */
  object-fit: cover; /* o contain, según prefieras */
  display: block;
  border-radius: 10px;
}

/* Contenedor del slider */
#sliderContainer {
  position: relative;
  width: 100%; /* o ajusta a tu necesidad */
  max-width: 700px;
  height: auto; /* ajusta a la altura deseada */
  overflow: hidden;
  margin: auto;
  border-radius: 10px;
  /* Puedes agregar background si quieres */
}

/* Las imágenes del carrusel */
#sliderContainer .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover; /* o contain */
  display: block;
  opacity: 0; /* inicialmente invisibles */
  transition: opacity 0.0s ease-in-out; /* transición rápida */
  /* Sin transform para evitar movimiento */
}

/* La imagen activa */
#sliderContainer .slide.active {
  opacity: 20; /* visible */
}

/* Estilo de las imágenes */
#sliderContainer .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Botón cerrar */
#closeBtn {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, transform 0.3s;
}
#closeBtn:hover {
  background-color: #e21919;
  color: #fff;
  transform: scale(1.1);
}

  

  h1, h3, h5 {

    margin: 15px 0;

    color: #9e000f;

    /*text-shadow: 1px 1px 5px rgba(55, 51, 51, 0.2); /* Sombra de texto */

  }



  h4{

    color: black ;

    font-size: 2.5rem !important;

    margin-bottom: 2.2rem !important;

    font-family: 'Oswald', sans-serif !important;

    font-weight: 650 !important;

  }



  p{

    font-family: 'Open-Sans', sans-serif !important;

  }





  /*------------------------------------------------*/

/*-------EFECTO AL PASAR A LA OTRA PAGINA --------*/

/*------------------------------------------------*/

.ripple-wrap {

  display: none;

  overflow: hidden;

  position: fixed;

  font-size: 0;

  z-index: 1000000000000;

  top: 0; left: 0; right: 0; bottom: 0;

}

@keyframes RIPPLER {

  0%   { border-width: 0; }

  40% { 

    height: 0;

    width: 0;

    border-width: 1500px;

    margin-top: -1500px;

    margin-left:-1500px; 

    border-color: #ca0b0b;

  }

  41% { 

    height: 0;

    width: 0;

    border-width: 1500px;

    margin-top: -1500px;

    margin-left:-1500px; 

    border-color: #ac0505;

  }

  100% {

    border-width: 1500px;

    height: 2000px;

    width: 2000px;

    margin-top: -2500px;

    margin-left:-2500px;

    border-color: #8a0808;

  }

}

@keyframes RIPPLER {

  0%   { border-width: 0; }

  40% { 

    height: 0;

    width: 0;

    border-width: 1500px;

    margin-top: -1500px;

    margin-left:-1500px; 

    border-color: #ca0b0b;

  }

  41% { 

    height: 0;

    width: 0;

    border-width: 1500px;

    margin-top: -1500px;

    margin-left:-1500px; 

    border-color: #ac0505;

  }

  100% {

    border-width: 1500px;

    height: 2000px;

    width: 2000px;

    margin-top: -2500px;

    margin-left:-2500px;

    border-color: #8a0808;

  }

}

.ripple {

  display: block;

  height: 0;

  width: 0;

  border-width: 0px;

  border-style: solid;

  border-color: #8a0808;

  border-radius: 100%;

  position: absolute;

  top: 300px;

  left: 300px;

  -webkit-animation: none;

  animation: none;

}

.ripple-wrap.goripple {

  display: block;

}

.ripple-wrap.goripple .ripple {

 -webkit-animation-name: RIPPLER;

 -webkit-animation-duration: 1.5s;

 -webkit-animation-fill-mode: forwards;

 animation-name: RIPPLER;

 animation-duration: 1.5s;

 animation-fill-mode: forwards;

}

  /*--------Navbar ------*/

  

  .carousel-text h1, .carousel-text p {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* Sombra de texto */

  }

  

  .carousel-img {

    position: relative; /* Añadir posición relativa para el uso de pseudo-elementos si es necesario */

    overflow: hidden; /* Asegúrate de que nada sobresalga */

  }



  /*---------INTRO----------*/

  

  #imgblock {

    width: 100%; /* Aumentar el ancho para que parezca más grande */

    height: 100vh; /* Mantiene la proporción del video */

    /*transform: translateX(-10%); /* Ajusta para centrar el video si es necesario */

    object-fit: cover;

  }



  .intro-sec{

    height: 100vh;

  }



  .intro-info::after{

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    width: 100%;

    height:100%;

    background: radial-gradient(circle at bottom left, rgb(0 0 0 / 56%), transparent);

   

  }



  .text-intro{

    position: absolute;

    z-index: 3;

    width: 50%;

    left: 12%;

    top: 50% !important;

    transform: translate(0, -50%) !important;

  }



  .text-intro h1{

    font-size: 3rem;

    font-family: 'Oswald', sans-serif;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);



  }



  .btnwsp .btn {

    /*margin-top: 1rem;*/

    border-radius: 20px; 

    background-color: #da0008;

    color: #ffffff;

    padding: 10px 25px;

    transition: background-color 0.5s; 

    font-family: 'Open-Sans', sans-serif;

    font-size: 0.9rem;

  }

  

  .btnwsp .btn:hover {

    background-color: #ffc107; /* Color más oscuro al pasar el ratón */

    color: #000000;

    border: 1px solid black;

  }



  /*  ----------------------- btn scroll --------------------------------- */



  #scrolldown a {

    padding-top: 40px !important;

  }

  #scrolldown a span {

    position: absolute;

    top: 0;

    left: 50%;

    width: 24px;

    height: 24px;

    margin-left: -12px;

    border-left: 2px solid #ffffff;

    border-bottom: 2px solid #ffffff;

    -webkit-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-animation: sdb07 2s infinite;

    animation: sdb07 2s infinite;

    opacity: 0;

    box-sizing: border-box;

  }

  #scrolldown a span:nth-of-type(1) {

    -webkit-animation-delay: 0s;

    animation-delay: 0s;

  }

  #scrolldown a span:nth-of-type(2) {

    top: 16px;

    -webkit-animation-delay: .15s;

    animation-delay: .15s;

  }

  #scrolldown a span:nth-of-type(3) {

    top: 32px;

    -webkit-animation-delay: .3s;

    animation-delay: .3s;

  }

  @-webkit-keyframes sdb07 {

    0% {

      opacity: 0;

    }

    50% {

      opacity: 1;

    }

    100% {

      opacity: 0;

    }

  }

  @keyframes sdb07 {

    0% {

      opacity: 0;

    }

    50% {

      opacity: 1;

    }

    100% {

      opacity: 0;

    }

  }



  .demo a {

    position: absolute;

    bottom: 0;

    left: 50%;

    z-index: 4;

    display: inline-block;

    -webkit-transform: translate(0, -50%);

    transform: translate(0, -50%);

    color: #fff;

    font : normal 400 20px/1 'Josefin Sans', sans-serif;

    letter-spacing: .1em;

    text-decoration: none;

    transition: opacity .3s;

    font-size: medium;

  }

  .demo a:hover {

    opacity: .5;

    text-decoration: none;

    color: white;

  }





  @media (max-width: 1024px){

    .text-intro {

      width: 75%;

    }

  }







  @media (max-width: 900px){

    .text-intro {

      left:13%;

    }



    .text-intro h1 {

      font-size: 2.5rem;

    }

    .text-intro p {

      font-size: 1rem;

    }



    .demo a{

      font-size:x-small;

    }

  

    #scrolldown a span{

      width: 10px;

      height: 10px;

      margin-left: -5px;

    }

    .btnwsp .btn {

      font-size: 1rem;

      padding: 8px 15px;

    }

  }



  @media (max-width: 768px) { /*responsive*/

    .text-intro {

      width: 75%;

      left: 17%;

    }



  }





  @media (max-width: 530px){ /*responsive*/

    .text-intro{

      left:18%;

    }

    .text-intro h1 {

      font-size: 2.5rem;

    }

    .text-intro p {

      font-size: 1rem;

    }

  

    .btnwsp .btn {

      font-size: 1rem;

      padding: 8px 15px;

    }

  }





  @media (max-width: 480px) { /*responsive*/

    .text-intro{

      left:19%;

    }

    .redes{

      left:10px !important;

    }

  

    .redes a{

      font-size:20px !important;

    }

  

    .text-intro h1 {

      font-size: 1.8rem;

    }

    .text-intro p {

      font-size: .8rem;

    }

  

  

    .btnwsp .btn {

      font-size: .8rem;

      margin-top: 0;

    }

  }



/*

  @media (max-height: 768px){



    .text-intro h1{

      font-size: 2.4rem;

    }





  }*/



  @media (max-height: 480px){

    .text-intro{

      left:13%;

    }

    .text-intro h1 {

      font-size: 2rem;

    }

    .text-intro p {

      font-size: .8rem;

    }

    .btnwsp .btn {

      font-size: .8rem;

      margin-top: 0;

    }

    .redes a{

      font-size: 20px !important;

    }



  }



  @media (max-width: 380px){



    .text-intro h1 {

      font-size: 1.8rem;

    }

  }



  @media (orientation: landscape) and (max-height: 599px){

    .text-intro h1 {

      font-size: 1.9rem;

    }



  }





/*--------------END INTRO-------------*/



  /* ------------------------------------------------------------------ */



 

  /* Añadir un efecto de sombra */

  .carousel-img video {

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);

  }

  

  .carousel-text {

    position: relative; /* Asegura que el texto se posicione relativo al contenedor */

    z-index: 2; /* Un valor mayor para que el texto esté arriba del video */

  }

  

  .text-white {

    position: relative; /* Opcional para asegurar que se superponga correctamente */

  }

  

  .text-light {

    position: relative; /* Opcional */

  }

  

  .fondimg {

    padding: 2rem; /* Agregando un poco de espacio interno */

  }

  

/*----------------- FOOTER ------------------*/

  

  footer {

    /*background: url(../img/imgSeccion/red\ gradient\ 1.png);*/

    background: #000000;

    color: #dcdcdc !important;

    padding: 2rem 0;

    /* border-top: 1px solid #ffc107; */

  }

  

  .footer-top {

    text-align: center;

  }

  

  .footer-contact {

    margin-bottom: 20px;

  }



  .footer-contact a{

    font-size: 14px;

    color: #dcdcdc !important;

  }

  

  .footer-colored-line {

    background: linear-gradient(45deg, #a31321, #ab8d8d);

    width: 25%;

    height: 0.125rem;

    border-radius: 1.25rem;

    margin: 0.5rem auto;

  }



  .text-white{

    color: #ffffff;

  }



  footer ul{

    padding: 0;

    list-style-type: none;

  }

  

  @media (max-width: 1025px) {

    .fastlinks{

      gap: 0 !important;

    }

  }

@media (max-width: 992px) {

  .footer-contact{

      width:32% !important;

  }

}



@media (max-width: 884px){

  .fastlinks{

    margin-left: 4rem !important;

    margin-right: 4rem!important;

  }

}  



@media (max-width: 820px) {

  .fastlinks .link {

    margin-bottom: 2rem;

    padding: 0 2rem 0 0;

  }

}



@media (max-width: 768px) {

  .fastlinks{

    justify-content: center !important;

    margin: 0 3rem !important;

  }



  .footer-contact {

    margin-bottom: 1rem;

    width:100% !important;

  }

}



@media (max-width: 724px) {

  .fastlinks {

    column-gap: 1rem;

  }

  .fastlinks .link{

    width: 23%;

  }

}



@media (max-width: 696px) {

  .fastlinks .link {

    width: 40%;

    text-align: center;

  }

}



@media (max-width: 590px) {

  .fastlinks {

    column-gap: 0;

  }

  .fastlinks .link{

    width: 45%;

  }

}



@media (max-width: 450px) {



  .fastlinks {

    margin-left: 2rem !important;

    margin-right: 1rem !important;

  }





  .fastlinks .link {

    margin-bottom: 2rem;

    padding: 0 2rem 0 0;

    text-align: left;

  }

}





  /*-------------------Efecto para icono de redes sociales--------------------*/

  

  

  

  .redes a:hover {

    transform: scale(1.1); /* Efecto de aumento al pasar el mouse */

    color: #0077b5; /* Cambia el color al pasar el mouse (por ejemplo, azul para LinkedIn) */

  }

  

  /* Colores personalizados para cada red social */

  .redes a.facebook:hover {

    color: #3b5998; /* Azul de Facebook */

  }

  

  .redes a.linkedin:hover {

    color: #0077b5; /* Azul de LinkedIn */

  }

  

  .redes a.instagram:hover {

    color: #e4405f; /* Rosa de Instagram */

  }

  

  .redes a.whatsapp:hover {

    color: #25D366; /* Verde de WhatsApp */

  

  

  }



  .redes a.tiktok:hover{

    color: #ffffff;

  }

  

  .redes a.youtube:hover{

    color: #b80000;

  }

  

  .redes {

    display: flex;

    flex-direction: column; /* Para que los íconos se apilen verticalmente */

    position: absolute; /* Fija la posición */

    left: 20px; /* Distancia desde la parte derecha */

    background-color: rgba(201, 203, 63, 0);

    padding: 0 10px 0 10px; /* Espaciado interno */

    border-radius: 5px; /* Bordes redondeados (opcional) */

    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra (opcional) */

    z-index: 100;

    top: 50%;

    transform: translate(0, -50%);

  }

  

  .redes a {

      margin: 5px 0; /* Espaciado entre los íconos */

      text-decoration: none; /* Eliminar subrayado */

      color: #ffffff; /* Color inicial */

      transition: transform 0.3s ease, color 0.3s ease; /* Efectos de transición */

      font-size: 25px; /* Tamaño del ícono, ajustado para encajar mejor en el lado derecho */

  }

  

  .redes a:hover {

      transform: scale(1.1); /* Efecto de aumento al pasar el mouse */

  }









  /*---------REDES FOOTER-----------*/

  .redes-footer {

    display: flex;

    flex-direction: row; 

    position: relative; /* Fija la posición */

    justify-content: center;

    background-color: rgba(201, 203, 63, 0);

    padding: 10px; /* Espaciado interno */

    border-radius: 5px; /* Bordes redondeados (opcional) */

    /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); /* Sombra (opcional) */

    z-index: 100;

    gap: 1.8rem;

    margin-bottom: 2rem;

}



.redes-footer a {

    margin: 5px 0; /* Espaciado entre los íconos */

    text-decoration: none; /* Eliminar subrayado */

    color: #ffc200; /* Color inicial */

    transition: transform 0.3s ease, color 0.3s ease; /* Efectos de transición */

    font-size: 25px; /* Tamaño del ícono, ajustado para encajar mejor en el lado derecho */

}



.redes-footer a:hover {

    transform: scale(1.1); /* Efecto de aumento al pasar el mouse */

}



.redes a:hover {

  transform: scale(1.1); /* Efecto de aumento al pasar el mouse */

  color: #0077b5; /* Cambia el color al pasar el mouse (por ejemplo, azul para LinkedIn) */

}



/* Colores personalizados para cada red social */

.redes-footer a.facebook:hover {

  color: #3b5998; /* Azul de Facebook */

}



.redes-footer a.linkedin:hover {

  color: #0077b5; /* Azul de LinkedIn */

}



.redes-footer a.instagram:hover {

  color: #e4405f; /* Rosa de Instagram */

}



.redes-footer a.whatsapp:hover {

  color: #25D366; /* Verde de WhatsApp */

}



.redes-footer a.tiktok:hover{

  color: #ffffff;

}



.redes-footer a.youtube:hover{

  color: #b80000;

}





  /* ---------------- LINKS RÁPIDOS --------------- */

  .fastlinks{

    display: flex;

    flex-wrap: wrap;

    margin-right: 6rem;

    margin-left: 6rem;

    margin-bottom: 2rem;

    justify-content: center;

    gap: 4rem;

  

  }

  

  .link{

    padding: 0 3rem 0 0;

    text-align: left;

  }

  

  .link a{ 

    color: #dcdcdc !important;

    text-decoration: none;

    font-family: "Open-Sans", sans-serif;

  }

  

  .link li a{

    font-size:14px;

    font-weight:100;

  }

  

  .link a:hover {

    color: #FFC107 !important;

  }

  

  .link ul li{

    list-style-type: none;

  }

  

    



  

  

  

  /* --------------------------Efectos de animación--------------------------------- */

  .wow {

    visibility: hidden; 

  }

  

  .wow.fadeInUp {

    animation-name: fadeInUp;

  }

  

  /* Media Queries para Responsividad */

  @media (max-width: 768px) {

    .navbar-nav {

      flex-direction: column; 

    }

  

    .navbar-nav {

      margin-top: 10px; 

    }

  

    #imgblock {

      width: 100%; /* Asegúrate de que el video no sobresalga en pantallas más pequeñas */

      transform: translateX(0); /* Resetear la traslación */

    }

  }

  

  

   /* -----------------------Tipografía general presentacion -------------------------------------- */

  

  body {

    font-family: 'Roboto', sans-serif; /* Tipografía general */

  }

  

  #inicio {

    padding: 5rem 1rem;

    background: linear-gradient(145deg, #ff0019, #141414);

    box-shadow: 0 4px 15px rgba(99, 91, 91, 0.2);

    color: #f3f3f3;

  }

  

  .carousel-text h1 {

    font-family: 'Open Sans', sans-serif; /* Encabezado con Open Sans */

    font-weight: 700;

    font-size: 2.5rem;

    line-height: 1.2;

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);

  }

  

  .carousel-text p {

    font-family: 'Roboto', sans-serif; /* Párrafos con Roboto */

    font-weight: 400;

    font-size: 1.125rem;

    line-height: 1.6;

    text-shadow: 1px 1px 3px rgba(251, 4, 4, 0.748);

  }

  

  

   /*-------- Servicios sucursales---------------  */



  .suc-dp:hover{

    transform: scale(0.98);

    transition: transform 0.3s ease, box-shadow 0.3s ease;



  }



   .suc-dp::after{

    content: "";

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    height: 50%; /* Ajusta esta altura según necesites */

    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-radius: 10px;

  }





  

  .me-3 .branch{

    position: absolute;

    bottom: 0;

    width: 95%;

    color: white;

    z-index: 2;

  

  }

  

  .service-box {

    border: 1px solid #fcf3f3;

    border-radius: 10px;

    padding: 2.5rem;

    transition: transform 0.3s, box-shadow 0.3s;

    background-color: hsl(0, 0%, 100%); /* Fondo blanco para las tarjetas */

  }

  

  .service-box:hover {

    transform: scale(1.05);

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

  }

  

  @media (max-width: 767.98px) {

    .service-box {

        margin-bottom: 2rem; /* Espacio en dispositivos móviles */

    }

  }

  

  .brand-logo {

    max-width: 300px; /* Ajusta el tamaño máximo que desees */

    height: auto; /* Mantiene las proporciones de la imagen */

    margin: 0 auto; /* Centra las imágenes */

  }

  

  

  .branch-image {

    width: 100%; /* Mantiene el 100% del ancho del contenedor */

    height: 305px; /* Ajusta la altura deseada */

    object-fit: cover; /* Mantiene la proporción y cubre el contenedor */

    border-radius: 20px; /* Redondear los bordes */

    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */

    background-size:cover;

  }

  

  .branch-image:hover {

    /*transform: scale(1.05); /* Escala la imagen un 5% */

    box-shadow: 0 4px 15px rgba(191, 70, 70, 0.066); /* Agrega una sombra */

  }

  

  .branch {

    opacity: 0; /* Oculta el texto inicialmente */

    transform: translateY(20px); /* Mueve el texto hacia abajo */

    transition: opacity 0.5s ease, transform 0.5s ease; /* Agrega transición */

  }

  

  .branch.visible {

    opacity: 1; /* Muestra el texto */

    transform: translateY(0); /* Restablece a su posición original */

  }

  

  .col-md-6 {

    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

  

  .col-md-6:hover {

    transform: scale(1.02); /* Sube ligeramente el tamaño */

    /*box-shadow: 0 4px 15px rgba(210, 31, 31, 0.707); /* Agrega sombra */

  }

  

  

  /* ----------------------------------------------*/

  /* Estilos del contenedor de marcas */

  #marcas {

    /*background-color: #f8f9fa;  Un color de fondo suave */

    padding: 60px 0; /* Espaciado superior e inferior */

    text-align: center; /* Centrar texto en contenedor */

  }

  

  /* Estilo del título */

  .title {

    font-size: 2.5rem; /* Tamaño de fuente grande */

    color: #b83e3e; /* Color del texto */

    font-weight: 700; /* Bold */

    margin-bottom: 20px; /* Espacio debajo del título */

    position: relative;

  }

  

  /* Línea inferior del título */

  .footer-colored-line {

    width: 60px; /* Ancho de la línea */

    height: 4px; /* Altura de la línea */

    background-color: #007bff; /* Color azul */

    margin: 0 auto 30px; /* Centrar la línea y espacio debajo */

  }

  

  /* Estilos para los logotipos */

  

  

  

  

  .brand-logo:hover {

    transform: scale(1.1); /* Efecto de aumento al pasar el cursor */

  }

  

  /* 

  .row > div {

    padding: 15px; 

  }*/

  /* Ajustes para pequeñas pantallas */

  @media (max-width: 768px) {

    .title {

        font-size: 2rem; /* Tamaño de fuente más pequeño para pantallas pequeñas */

    }

    

    .footer-colored-line {

        width: 100px; /* Ajusta el ancho de la línea en pantallas pequeñas */

    }

  }

  

  /*---------------------------------------------------------------------*/

  .title {

    color: rgb(163, 34, 34); /* Color rojo para el título */

    opacity: 0; /* Inicialmente oculto */

    transform: translateY(-20px); /* Mueve el título hacia arriba */

    transition: opacity 0.75s ease, transform 0.75s ease; /* Transición suave */

  }

  

  .title.visible {

    opacity: 1; /* Muestra el título */

    transform: translateY(0); /* Restablece a su posición original */

  }

  

  /* Efecto de subrayado al pasar el mouse */

  .title:hover {

    text-decoration: underline; /* Subraya el texto */

    color: rgb(208, 51, 51); /* Cambia a un rojo más oscuro al pasar el mouse */

  }

  

  .small-brand {

    max-width: 60%; /* Ajusta el tamaño de las dos primeras imágenes */

    height: auto; /* Mantiene la relación de aspecto */

  }

  

  /* O usando selectores */

  

  /*---------------------Nuestra experiencia----------------------------- */

   

  #experiencia{

    background-image: linear-gradient(#00000073 20%, #000000b0 99.04%), url('../img/imgSeccion/experiencia-bg.png');;

    object-fit: cover;

    background-size: cover;

    background-position: center;

    background-attachment: fixed;



  }





  .cont-exp{

    padding: 4rem 0 5rem;

    /*backdrop-filter: brightness(0.4);*/

  }



  .cont-exp h4{

    color: #000000;

    font-size: 2rem;

  }



  .row-counters{

    display: flex;

    flex-wrap: wrap;

    gap: 3rem;

    justify-content: center;



  }



  .row-card{

    border: 1px solid;

    padding: 0 !important;

    background: white;

    box-shadow: 20px 1.5rem 0rem 0px rgb(0 0 0 / 10%) !important;

    transition: transform 0.1s, box-shadow 0.3s;

    max-width: 21% !important;

  }



  .row-card:hover{

    transform: scale(1.03);

  }



  .row-text{

    padding: 0 20px;

  }



  .row-text b{



    color: #000000;

    font-family: 'Roboto', sans-serif;

    letter-spacing: 0.5px;

  }



  .counter {

    font-size: 1.2rem;

    /* font-weight: bold; */

    color: #fffaf0;

  }

  

  .icon {

    position: relative;

    width: 100%;

    height: 148px;

    margin-bottom: 15px;

    /*border-bottom: 1px solid rgb(255, 255, 255);*/

  }



  .number{

    position: absolute;

    left: 5px;

    top: 2px;

    z-index: 1;

    text-shadow: 5px 5px #ffffff69;

  }







/*------------------- Experiencia (otro) ------------------ */



.cont-sect{

  margin: 4rem 10rem 0;

}



.cont-exp h4{

  color: #202020;

  font-size: 2.2rem;

  backdrop-filter: blur(1px);

  margin-bottom: 2rem;

}



.sect-exp{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  gap: 1rem;

  row-gap: 2rem;

}



.sec-texto{

  color: white;

  z-index: 2;

  padding: 0 20px;

  text-align: center;

}



.sec-texto h5{

  color: #ffc107;

  text-shadow:-1px 1px 2px #413100;

  font-size: 17.7px;

  margin-top: 0.8rem;

  font-family: 'Open-Sans', sans-serif;

}



.sec-texto p{

  opacity: .8;

}



.row-sector{

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

  width: 250px;

  border-radius: 20px;

  backdrop-filter: blur(3px);



}



.row-sector img{

  width: 100px;

  /*border-radius: 15px;*/

  height: 100px;

  position: relative;

  margin-bottom: 0;

}



.row-sector:hover img{

  transform: scale(1.07);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



/*

.row-sector::after{

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 90%; 

  background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border-radius: 15px;

}*/



@media (max-width: 1330px){

  #experiencia{

    background-position: center;

  }

  .sect-exp {

    gap: 20px;

  }

}



@media (max-width: 1200px) {

  .cont-sect {

    margin: 0 5rem;

  }



  .sect-exp {

    gap: 20px;

  }



  .row-sector img {

    width: 100px;

    height: auto;

  }



}

@media (max-width: 768px){

  .cont-exp header h6 {

    font-size: medium !important;

  }



}



@media (max-width: 576px){

  .cont-exp header h6 {

    font-size: medium !important;

  }







}

















  

  /* Efecto hover para las tarjetas del portafolio */

  /* Estilos para la sección de clientes */

  /* Estilos para la sección de clientes */

  .clientes-scroll {

    overflow: hidden; /* Oculta el desbordamiento */

    white-space: nowrap; /* Evita el salto de línea */

    position: relative; /* Necesario para el posicionamiento absoluto */

  }

  

  .scrolling-container {

    display: inline-block; /* Hace que el contenedor se comporte como un hijo en línea */

    animation: scroll 30s linear infinite; /* Efecto de animación personalizado */

    /*border-top: 1px solid #00000016;

    border-bottom: 1px solid #00000016;*/

  }

  

  .logo {

    display: inline-block; /* Permite que los logos estén uno al lado del otro */

    padding: 0 25px; /* Espaciado entre logos */

  }

  

  .logo img {

    max-height: 100px; /* Controla la altura máxima de las imágenes */

  }

  

  @keyframes scroll {

    0% {

        transform: translateX(0); /* Comienza en la posición original */

    }

    100% {

        transform: translateX(-50%); /* Desplaza exactamente la mitad del ancho del contenedor */

    }

  }

  

  

  /* ------------Estilo de Acerca de nosotros---------------------------------------------------------------------*/

  

  #nosotros {

    background-image: linear-gradient(#0000009c 20%, #000000b0 99.04%), url(../img/imgSeccion/Minería\ 2.png);;

      position: relative;

      color: #fff;

      overflow: hidden;

      color: #000000;

      background-position: center;

      background-size: cover;

  }





  .background-image{

    padding: 5rem 0;

    backdrop-filter: brightness(0.8);



  }



  .fila{

    display: flex;

    align-items: center;

    gap: 40px;

    justify-content: center;

    flex-wrap: nowrap;

    flex-direction: row;

  }



  .columnn{

    width: 40%;

    padding: 3rem;

    text-align: left !important;

    z-index: 1;

    /*animation: heartbeat 2s ease 0s infinite normal forwards;*/

  }



  .columnn h4{

    font-size: 2.3rem;

    margin-bottom: 2.2rem;

    color: #ffffff;

    text-align: center;

}

  



  .columnimg{

    position: relative;

    right: 0;

  }



  .columnimg{

    width: 50%;

  }



  .imgnos img{

    width: 100%;

    height: auto;

    object-fit: cover;

    border-radius: 20px;

    background-position: center;

    background-size: cover;

    border: 1px solid #ffc107;

  }



  .btn-us-cont{

    display: flex;

    justify-content: center;

  }



  .btn-us{

    font-size: 13px;

    font-weight: 400;

    color: #ffffff;

    border: 1px solid #e10000;

    padding: .50rem .70rem;

    border-radius: 20px;

    background: #bf0000;

    /*animation: heartbeat 2s ease 0s infinite normal forwards;*/

  }



  .btn-us:hover{

    color:#000000;

    border: 1px solid #000000;

    background-color: #ffc107;

    text-decoration: none;

    font-weight:500;

  }





    /* Fondo semitransparente para el texto */

    .history-section {

      background-color: rgb(161, 99, 99);

      padding: 30px;

      border-radius: 15px;

      animation: slideIn 1s, bounce 2s infinite; /* Añadiendo la animación de rebote */

    }



    .history-section p {

      font-size: 1.25rem;

      color: #fff;

      text-shadow: 1px 1px 5px rgba(112, 111, 111, 0.7);

    }

    

    /* Estilos para la sección de certificaciones */

    .certifications-section {

      margin-top: 30px;

      /*padding: 20px;

      background-color: rgb(231 231 231 / 83%);

      border-radius: 15px;

      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

      animation: fadeIn 1s, bounce 2s infinite; */

    }

    

    .certifications-section {

      text-align: center; /* Centra el contenido */

      margin-bottom: 3rem;

    }

    

    .certification-cards {

      display: flex; /* Configura el contenedor como un flexbox */

      justify-content: center; /* Centra horizontalmente los elementos dentro */

      align-items: center; /* Alinea verticalmente los elementos dentro */

      gap: 15px; /* Espacio entre certificaciones */

    }

    

    .certification {

      flex: 0 0 auto; /* Evita que los elementos se expandan o encojan */

    }

    

    .cert-img {

      max-width: 80px; /* O ajusta según tu necesidad */

      height: auto; /* Mantiene la proporción de la imagen */

      display: block; /* Elimina el espacio extra debajo de las imágenes */

    }

    

    .certification-card:hover {

        transform: translateY(-5px);

    }

    

    .cert-img {

        width: 80%;

        margin-bottom: 10px;

        transition: transform 0.3s;

    }

    

    .cert-img:hover {

        transform: scale(1.2);

    }



/* Responsividad */



@media (max-width: 1025px){

  .fila{

    flex-direction: column-reverse;

  }

  .columnn{

    padding:1rem;

    width:90%;

    text-align:center !important;

  }

  .columnn .footer-colored-line{

    margin:15px auto !important;

  }

  .columnimg{

    width:90%;

  }

  .us-container{

    margin: 0 3rem !important;

  }

  .certification-cards{

    gap: 0 !important;

  }

}



@media (max-width: 768px) {

  .us-container{

    margin: 0 1.5rem !important;

  }



  .columnn {

    padding: 3rem 1.5rem;

  } 



  .columnn, .columnimg {

    width: 100%; /* Ambas columnas toman el ancho completo */

  }





  .btn-us {

    font-size: 12px;

    padding: 0.4rem 0.8rem;

  }



  .imgnos img {

    height: auto;

  }

}



@media (max-width: 480px) {

  .background-image {

    padding: 2rem 0;

  }



  .columnn {

    padding: 1.5rem 0;

    font-size: 0.9rem;

  }



  .btn-us {

    font-size: 11px;

    padding: 0.3rem 0.6rem;

  }

}

  

  /* Estilos de encabezados */

  h3 {

      font-size: 3rem;

      font-weight: bold;

      /*text-transform: uppercase;

      /*text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9);*/

      animation: fadeIn 1.5s;

  }



  

  @keyframes heartbeat {

    0% {

      animation-timing-function: ease-out;

      transform: scale(1);

      transform-origin: center center;

    }

  

    10% {

      animation-timing-function: ease-in;

      transform: scale(0.91);

    }

  

    17% {

      animation-timing-function: ease-out;

      transform: scale(0.98);

    }

  

    33% {

      animation-timing-function: ease-in;

      transform: scale(0.87);

    }

  

    45% {

      animation-timing-function: ease-out;

      transform: scale(1);

    }

  }

  

  /* Animación de rebote */

  @keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px); /* Subir */

    }

    60% {

        transform: translateY(-5px); /* Suave descenso */

    }

  }

  



  

  /* Animaciones */

  @keyframes fadeIn {

      from {

          opacity: 0;

      }

      to {

          opacity: 1;

      }

  }

  

  @keyframes slideIn {

      from {

          transform: translateY(20px);

          opacity: 0;

      }

      to {

          transform: translateY(0);

          opacity: 1;

      }

  }

  









  /* Estilo para el contenedor de la sección */

  .section-header h3 {

    font-size: 1.75rem;

    margin-bottom: 20px;

    color: rkred; /* Color del texto */

  }

  

  /* Estilo para las líneas */

  .footer-colored-line {

    background-color: #b74141; /* Color de línea */

    height: 5px;

    width: 50%;

    margin: 15px 0;

  }

  

  /* Efectos en las tarjetas */

  .portfolio-card {

    border-radius: 10px; /* Bordes redondeados */

    overflow: hidden; /* Para ocultar el desbordamiento */

    transition: transform 0.3s, box-shadow 0.3s; /* Efecto de transición */

  }

    





  /*-------------------- PORTAFOLIO ---------------------*/



  #port-car{

    background: radial-gradient(circle, #ffffff, #dddddd);

    padding: 4rem 0 8rem 0;

  }



  

  p {

    font-size: .95rem;

    opacity: .9;

    margin-top: 10px;

  }



  .slider-wrapper {

    overflow: hidden;

    max-width: 1200px;

    margin:0 70px 30px;

  }



  .swiper{

    padding: 1rem !important;

  }



  .card-list{

    padding: 20px 0;

  }

  

  .card-list .card-item {

    height: auto;

    color: #000000;

    user-select: none;

    padding: 15px 35px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    backdrop-filter: blur(30px);

    background: rgb(255, 255, 255);

    border: 1px solid #b4b4b4;

    box-shadow: 3px 4px 17px 0px rgb(0 0 0 / 11%);

  }



  .card-img-top{

    width:auto;

    height:auto;

  }



  .card-list-text{

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 1.3rem;

  }



  .card-list-text h5{

    color:#db0000;

    font-family: 'Oswald',sans-serif;

    font-weight: 500; 

  }

  

  .card-list .card-item .user-image {

    width: 150px;

    height: auto;

    border-radius: 50%;

    margin-bottom: 40px;

    border: 3px solid #fff;

    padding: 4px;

  }



  .card-p{

    color: #000000;

    font-size: 0.9rem !important;

  }

  

  

  .slider-wrapper .swiper-pagination-bullet {

    background: #fff;

    height: 13px;

    width: 13px;

    opacity: 0.5;

  }

  

  .slider-wrapper .swiper-pagination-bullet-active {

    opacity: 1;

  }

  

  .slider-wrapper .swiper-slide-button {

    color: #323232;

    /*margin-top: -55px;*/

    transition: 0.2s ease;

  }

  

  .slider-wrapper .swiper-slide-button:hover {

    color: #cf0000;

  }



  .swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {

    background: #000000db;



  }



  .swiper-button-next:after,.swiper-button-prev:after {

    font-size: 25px !important;

  }



  .link-portafolio{

    font-family: 'Open-Sans', sans-serif;

    text-decoration: none;

    padding: .10rem .70rem;

    background: #cd0000;

    color: #ffffff;

    border-radius: 10px;

    font-size: 10.5px;

    text-align: center;

    border: 1px solid #cf0000;

  }



  .link-portafolio:hover{

    color: #4b4b4b;

    text-decoration: none;

    background: #ffc107;

    border: 1px solid #000000;

  }



  @media (max-width: 768px) {

    #port-car .section-header {

      padding-left: 2rem;

      padding-right: 2rem;

    }



    .slider-wrapper {

      margin: 0 10px 40px;

    }

  

    .slider-wrapper .swiper-slide-button {

      display: none;

    }

  }





/*------------------- SERVICIOS -------------------*/

#servicios{

  overflow: hidden;

  margin: 4rem 0 4rem;

}



.background-serv{

  background-image: url(../img/imgSeccion/SERVICIO_3.png);

  margin: 0rem 4rem;

  border-radius: 10px;

  background-size: cover;

  background-position: center;

  overflow: hidden;

}



.darkness{

  backdrop-filter: brightness(0.35);

  padding: 3rem 0;

}



/*

#servicios::after{

  content: "";

  background: #0000007d;

  width: 100%;

  height: 100%;

  visibility: visible;

  position: absolute;

  top: 0;

}*/



.ser-text{

  color: white;

  z-index: 2;

  position: relative;

}



.ser-text h1{

  color: #ffc107;

  font-size: 2.5rem;

  margin-bottom: 1rem;

  font-family: 'Oswald', sans-serif;

  font-weight: 600;

}



.ser-text a{

  margin-top: 2rem;

  font-size: small;

}



.spc{

  margin-bottom: 1rem;

  margin-top: 1rem;

}





.btn-serv{

  background: #ffffff14;

  color: white;

  border: 1px solid white;

  border-radius: 15px;

  padding: 0.5rem 40px;

  text-decoration: none;

  margin-top: 2rem;

  width: 50px;

  transition: background 0.8s ease;



}



.btn-serv:hover{

  color: rgb(255, 255, 255);

  text-decoration: none;

  border: 1px solid rgb(255, 255, 255);

  background:#000000;

}







/* Para pantallas medianas (tablets y pantallas pequeñas) */

@media (max-width: 992px) {

  .ser-text h1 {

    font-size: 2.5rem;

  }



  .ser-text p {

    font-size: 1rem;

  }



  .btn-serv {

    padding: 0.5rem 30px;

  }

}



/* Para pantallas pequeñas (móviles) */

@media (max-width: 768px) {

  #servicios {

    padding:0;

    background-attachment: scroll; /* Mejora el rendimiento en móviles */

  }



  .ser-text {

    padding: 0 10px;

  }



  .ser-text h1 {

    font-size: 2rem;

  }



  .ser-text p {

    font-size: 0.9rem;

    line-height: 1.4;

  }



  .btn-serv {

    padding: 0.5rem 20px;

    font-size: 0.9rem;

  }



  .background-serv{

    margin: 0 1.5rem;

  }



}



/* Para pantallas muy pequeñas (dispositivos < 576px) */

@media (max-width: 576px) {

  #servicios{

    margin: 1rem 0;

  }

  .ser-text h1 {

    font-size: 1.8rem;

  }



  .ser-text p {

    font-size: 0.8rem;

  }



  .btn-serv {

    padding: 0.5rem 15px;

    font-size: 0.8rem;

  }

}





/*------------------------------PAÍSES-----------------------------*/



#paises{

  padding: 2rem 0;

    background-image: url(https://img.freepik.com/free-vector/futuristic-networking-technology-background-vector-white-tone_53876-110879.jpg);

    background-size: cover;

    background-position: center;

}



.ps-cont{

  padding: 1rem 0rem;

  display: flex;

  margin-top: 2rem;

  justify-content: space-evenly;

  align-items: center;

}



.ps-cont header{

  margin-bottom: 0;

  width: 40%;

}



.ps-cont header h4{

  font-size: 1.10rem;

  color: #000000;

  text-align: left;

  line-height: normal;

  font-weight: 350;

}



.countries{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

  justify-content: center;

  gap: 3rem;

}



.country-flag{

  height: 60px !important;

  filter: opacity(0.9);

  border-radius: 5px;



}



.country-name{

  font-size: small;

  margin-top: 5px;

  color: #000000c2;

  font-weight: 400;

  font-family: 'lato', sans-serif;

}



/* Para pantallas medianas (tablets, 768px o menos) */

@media (max-width: 768px) {

  .ps-cont header {

    width: 50%;

  }



  .countries {

    width: 50%;

    gap: 2.5rem;

    /*justify-content: flex-end;*/

  }



  .card-country {

    width: 100%; /* Las tarjetas ocupan el 45% del ancho para 2 por fila */

    margin-bottom: 1rem; /* Espacio extra entre filas */

  }



  .country-flag {

    height: 80px; /* Reduce ligeramente el tamaño de las banderas */

  }



  .card-country h4 {

    font-size: 1rem; /* Reduce el tamaño del texto */

    margin-top: 0.5rem;

  }

}



@media (max-width: 500px){

  .ps-cont{

    gap:1rem;

  }

}



/* Para pantallas pequeñas (móviles, 480px o menos) */

@media (max-width: 485px) {

  .ps-cont{

    gap:0;

  }

  .ps-cont header{

    padding-left: 2rem;

  }



  .countries {

    flex-direction: column; 

    align-items: center;

  }



  .card-country {

    width: 100%;

    max-width: 300px; 

  }



  .country-flag {

    height: 70px;

  }



  .card-country h4 {

    font-size: 0.9rem;

  }

}





/*--------------------- MARCAS ---------------------*/



#marcas {    

  background: linear-gradient(#f7f7f7, #f5f5f5);

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

  padding: 5rem 0 6rem;

  text-align: center; 

}



.container-brands{

  margin: 4rem 0;

}



.brands{

  display: flex;

  flex-direction: row;

  justify-content: center;

  box-shadow: rgb(0 0 0 / 10%) !important;

  overflow: hidden;

  gap: 20px;

}



.fortalum{

  background-position: center;

  object-fit: cover;

  width: 50%;

  height: auto;

  position: relative;

  cursor: pointer;

  overflow: hidden;

  /*border: 1px solid #ffd412;

  border-radius: 15px;*/

}



.fortalum img, .alumet img{

  width: 100%;

  height: auto;

}



.alumet{

  background-position: center;

  object-fit: cover;

  width:50%;

  height: auto;

  position: relative;

  cursor: pointer;

  overflow: hidden;

  /*border: 1px solid #ffd412;

  border-radius: 15px;*/

}



.fortalum-text, .alumet-text{

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    color: rgb(0, 0, 0);

    font-size: 24px;

    opacity: 0;

    transition: opacity 0.3s ease-in-out;



}



.fortalum:hover .fortalum-text {

  opacity: 1;

  z-index: 2;

}



.alumet:hover .alumet-text {

  opacity: 1;

  z-index: 2;

}



.fortalum::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  left: 0;

  visibility: hidden; 

  opacity: 0; 

  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;

  background: radial-gradient(circle, rgb(255 255 255) 0%, rgb(255 255 255 / 40%) 90%);

  border-radius: 40px;

}







.fortalum:hover::after {

  visibility: visible; 

  opacity: 1; 

  transition: visibility 0s 0s, opacity 0.3s ease-in-out; 

}



.alumet::after {

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  right: 0;

  visibility: hidden; 

  opacity: 0; 

  transition: visibility 0s 0.3s, opacity 0.3s ease-in-out;

  background: radial-gradient(circle, rgb(255 255 255) 0%, rgb(255 255 255 / 40%) 90%);

  border-radius: 40px;

}





.alumet:hover::after {

  visibility: visible; 

  opacity: 1; 

  transition: visibility 0s 0s, opacity 0.3s ease-in-out; 

}



.forta-container, .alum-container{

  overflow: hidden;

}





@media (max-width: 1000px) {

  .fortalum-text, .alumet-text{

    top: 50%;

    left: 50%;

    width: 90%;

  }



}



/* Pantallas menores a 768px (tablets y móviles grandes) */

@media (max-width: 768px) {

  .brands {

    flex-direction: column; /* Cambia a una disposición en columna */

    gap: 5rem;

  }



  .fortalum, .alumet {

    width: 100%; /* Cada elemento ocupa el 100% del ancho disponible */

    height: auto; /* Reduce la altura para adaptarse a pantallas más pequeñas */

  }

  

  .fortalum-text, .alumet-text {

    font-size: 18px; /* Reduce el tamaño del texto */

  }

}



@media (max-width: 490px){

  .fortalum-text, .alumet-text{

    top: 50%;

    left: 50%;

    width: 90%;

  }



  .fortalum-text h2, .alumet-text h2{

    font-size: 1.5rem;

  }



  .fortalum-text p, .alumet-text p{

    font-size: .75rem;

  }



}



/* Pantallas menores a 480px (móviles pequeños) */

@media (max-width: 480px) {



  .fortalum-text, .alumet-text {

    font-size: 16px; /* Reduce el tamaño del texto */

    padding: 0 10px; /* Agrega algo de espacio interno */

  }

}

























/*OTRO SLIDESHOW*/

/* Slideshow container */





.mySlides {

  display: none

}



.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

  padding: 0 !important;

  border-radius: 10px;

  overflow: hidden;

}



/* Next & previous buttons */

.slideshow-container .prev, .slideshow-container .next {

  cursor: pointer;

  position: absolute;

  top: 50%;

  width: auto;

  padding: 16px;

  margin-top: -22px;

  color: white !important;

  font-weight: bold;

  font-size: 18px;

  transition: 0.6s ease;

  border-radius: 0 3px 3px 0;

  user-select: none;

}



.slideshow-container .prev{

  left: 0;

}



/* Position the "next button" to the right */

.next {

  right: 0;

  border-radius: 0 3px 3px 0;

}





/* On hover, add a black background color with a little bit see-through */

.prev:hover, .next:hover {

  background-color: rgba(29, 29, 29, 0.171);

}





/* Number text (1/3 etc) */

.numbertext {

  color: #f2f2f2;

  font-size: 12px;

  padding: 8px 12px;

  position: absolute;

  top: 0;

}



/* The dots/bullets/indicators */

.dot {

  cursor: pointer;

  height: 10px;

  width: 10px;

  margin: 0 2px;

  background-color: #bbb;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.6s ease;

}



.active, .dot:hover {

  background-color: #717171;

}



/* Fading animation */

.fading {

  animation-name: imagefade;

  animation-duration: 1.5s;

}



@keyframes imagefade {

  from {opacity: .4} 

  to {opacity: 1}

}



/* On smaller screens, decrease text size */

@media only screen and (max-width: 300px) {

  .prev, .next,.text {font-size: 11px}

}









/*ULTIMO CAROUSEL*/



.marcaimg img{

  border-radius: 5px;

}



.brandss{

  display: flex;

  margin: 0 3rem;

}





#marcas .swiper-pagination-bullet {

  background: #616161 !important;

}



#marcas .swiper-pagination-bullet-active {

  opacity: var(--swiper-pagination-bullet-opacity, 1);

  background: #ae0811 !important;

}





@media (max-width: 768px){

  .brandss{

    flex-direction: column;

    /*gap: 3rem;*/

    padding: 0;

  }

}















/*marcas02*/

.marca-content{

  margin: 0rem 5rem 0;

}



.tabs {

  display: flex;

  justify-content: center;

  /*border-bottom: 2px solid #ddd;*/

  gap: 6rem;

}

.tab {

  height: 120px;

  width: 300px;

  padding: 10px 20px;

  cursor: pointer;

  color: #888;

}

.tab img{

  width: 100%;

  height: 100%;

}



.banners{

  width: 100%;

  height: auto;

  /*padding: 2rem 0;*/



}



.brand-image{

  width: 100%;

  border-radius: 20px;

}



.tab.active {

  font-weight: bold;

  color: black;

  border-bottom: 1px solid black;

}

.content {

  display: none;

  margin-top: 20px;

  text-align: left;

}

.content.active {

  display: flex;

  align-items: center;

  justify-content: center;

}



#marcas .section-header{

  margin-bottom:1rem;

  text-align: left;

}



@media (max-width: 768px){

  .tabs{

    gap: 1rem;

  }

  .marca-content{

    margin: 2rem 2rem 0;

  }

}



@media (max-width: 568px){

  #marcas{

    padding: 60px 0 1rem;

  } 

  #marcas .section-header{

    margin-bottom: 0;

  }

  .tabs{

    gap: 1rem;

  }

  .tab{

    height: 90px;

    width: 250px;

  }

  .marca-content{

    margin: 1rem;

  }

}



@media (max-width: 425px){

  #marcas .section-header h4{

    margin-bottom: 1rem !important;

  }

  .tab{

    height: 70px;

    width: 180px;

    padding: 10px;

  }



  .tabs{

    gap: 1rem;

  }

}







/*

.container-marcas{

  display: flex;

  flex-direction: column;

  gap: 7rem;

  margin: 3rem 8rem;

  padding: 0 5rem;

  border-radius: 20px;

  

}



.fortalum-brand{

  display: flex;

  column-gap: 6rem;

  align-items: center;



}

.alumet-brand{

  display: flex;

  column-gap: 3rem;

  align-items: center;



}



.brand-products{

  width: 50%;

}



.brand-products img{

  width: 100%;

  height: auto;

}



.brand-logof, .brand-logoa{

  width: 60%;



}



.brand-logof img{

  width: 100%;

}



.brand-logoa img{

  width: 100%;

}





.description{

  display: flex;

  flex-direction: column;

  width: 50%;

  gap: 3rem;

  justify-content: center;

  align-items: center;

}



.brand-des ul {

  list-style: none;

  padding: 0;

  text-align: left;

  font-size: .95rem;

}

.brand-des ul li {

  position: relative;

  padding-left: 45px;

  padding-bottom: 4px;

}

.brand-des ul li::before {

  content: "➱"; 

  color: #454545; 

  position: absolute;

  left: 0;

  top: 0;

}



.str-alu{

  color: #003399;

}



.str-fort{

  color: #d70015;

}





@media (max-width: 1380px) {

  .container-marcas {

    padding: 2rem 2rem;

    margin: 3rem 4.5rem;

  }

}



@media (max-width: 1030px) {

  .container-marcas {

    padding: 2rem 2rem;

    margin: 3rem 3rem;

    gap:4rem;

  }

}



@media (max-width: 920px) {

  .fortalum-brand, .alumet-brand{

    flex-direction:column;

    gap:4rem;

  }

  .brand-products{

    width:90%

  }



  .description{

    width:80%;

  }

}



@media (max-width: 868px) {

  #marcas header h4{

    font-size: 2rem;

  }

  .container-marcas {

    margin: 1rem 3rem;

    padding: 2rem 1rem;

  }



  .description{

    width:90%;

  }

}



@media (max-width: 686px){

  .container-marcas {

    margin: 1rem 1rem;

    padding: 2rem 1.5rem;

  }

  

  .brand-products{

    width:100%

  }



  .description{

    width:95%;

  }

}



@media (max-width: 486px){

  #marcas{

    padding: 20px 0;

  }

  .container-marcas {

    padding: 2rem 1rem;

  }

}*/



/*++++++++++++++++++++++++++++++*/







/*----------------- MARCAS 2 ----------------*/



.mrc-cont header{

  margin: auto;

  width: 90%;



}



.marca-slider { 

  overflow: hidden; 

  width: 100%;

  height: 80vh;



} 

.marca-slider figure img { 

  width: 20%;

  height: 80vh;

  float: left;

}



.marca-slider figure { 

  position: relative;

  width: 500%;

  height: 80vh;

  margin: 0;

  left: 0;

  text-align: left;

  font-size: 0;

  animation: 10s slidy infinite; /*el movimiento se va a mantener de forma indefinida -infinito-*/

}





@keyframes slidy {

  0% { left: 0%; }

  20% { left: 0%; }

  25% { left: -100%; }

  45% { left: -100%; }

  50% { left: -200%; }

  70% { left: -200%; }

  75% { left: -300%; }

  95% { left: -300%; }

  100% { left: -400%; }

}









/* ----------------- TESTIMONIOS -------------------- */



#testimonios{

  background-image: linear-gradient(2deg, #000000b3 30%, #0000008c 85%), url(../img/imgSeccion/testimoniosbg.jpg);

  background-position: center;

  object-fit: cover;

  background-size: cover;

  position: relative;

}





.testimonial{

  width: 100%;

  cursor: grab;

}



.row-testimonio{

  display: flex;

  flex-wrap: nowrap;

  flex-direction: row;

  gap: 30px;

  justify-content: center;

  margin-top: 9.5rem;

  overflow: visible;

  user-select: none;

}



.testimonio{

  background: #00000059;

  backdrop-filter: blur(3px);

  position: relative;

  padding: 15px 25px;

  margin: 2rem 1rem 2rem 1rem;

  border-radius: 15px;

  border: 1px solid #8282827d;

  display: inline-block;

}





.testimg{

  text-align: center;

  position: absolute;

  top: -45px;

  left: 50%;

  transform: translateX(-50%);

  overflow: hidden;

  border-radius: 50%;

  border: 1px solid #FFC107;

}



.testimonio img{

  width: 180px;

  height: 170px;

  object-fit: cover;

  transform: scale(1.2);



}



.testimonial-box{

  padding-top: 150px;

}



.testimonial-box h5{

  color: #ffc107;

  font-family: 'Open-Sans', sans-serif;

}



.testimonial-box p{

  color: #e5e5e5;

  margin-bottom: 2.3rem;

}





/*SWIPER*/

.swiper {

  width: 100%;

  height: 100%;

  cursor: grab;

  user-select: none;

}



.test-d::after, .test-d::before{

  content:"";

  position:absolute;

  top:0;

  width:15%;

  height: 100%;

  pointer-events: none;

}



.test-d::after{

  right: 0;

  background: linear-gradient(to left, rgb(0, 0, 0), rgba(0, 23, 56, 0));

}



.test-d::before{

  left: 0;

  background: linear-gradient(to right, rgb(0, 0, 0), rgba(0, 23, 56, 0));

  

}



.swiper-slide {

  text-align: center;

  font-size: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

}



#testimonios .swiper-pagination-bullet {

  background: var(--swiper-pagination-bullet-inactive-color,#ebebeb) !important;

}



#testimonios .swiper-pagination-bullet-active {

  opacity: var(--swiper-pagination-bullet-opacity, 1);

  background: #cbcbcb !important;

}





/* ----------------- SUCURSALES ----------------------*/

#sucursales{

  padding: 4rem 0;

  background: linear-gradient(1deg, #efefef, #ffffff);

}



.column-scs{

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.col-suc{

  width: 50%;

}



.row-suc{

  display: flex;

  flex-direction: row;

  gap: 1rem;

}



.suc-dp::after{

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 50%; /* Ajusta esta altura según necesites */

  background: linear-gradient(to top, rgb(39 39 39 / 93%) 15%, transparent);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.suc-dp .branch{

  display: flex;

  justify-content: center;

  flex-direction: column;

  position: absolute;

  bottom: 0;

  width: 95%;

  color: white;

  z-index: 2;

  margin-bottom: 1rem;

}



.branch-title{

  color: #ffc107;

  font-family: 'Open-Sans', sans-serif;

  font-weight: 600;

}



.branch p{

  margin-bottom: 6px;

}



.branch a{

  color: white;

}



.branch a:hover{

  color: #ffc107;

}



@media (max-width: 1000px){

  .row-suc{

    flex-direction: column;

  }

  .col-suc{

    width: 100%;

  }

}





/*----------------------- Preguntas Frecuentes -------------------*/



#faq{

  background: #efefef;

}





.fap-c{

  display: flex;

}



.fap-c header{

  width: 50%;

  padding-right: 3rem;

}



.faq-content {

  margin: 0 auto;

  color: #2a2a2a;

  width: 50%;

}



.faq-question {

  padding: 20px 0;

  border-bottom: 1px dotted #272727c2;

  border-radius: 10px;



}



.panel-title {

  font-family: 'Open-Sans', sans-serif;

  font-size: 16px;

  font-weight: 500;

  width: 100%;

  position: relative;

  margin: 0;

  padding: 10px 10px 0 70px;

  display: block;

  cursor: pointer;

  color: #313131;

}



.panel-content {   

  font-family: 'Open-Sans', sans-serif;

  font-size: 0.9rem;

  padding: 0px 14px;

  margin: 0 40px;

  height: 0;

  overflow: hidden;

  z-index: 1;

  position: relative;

  opacity: 0;

  -webkit-transition: .4s ease;

  -moz-transition: .4s ease;

  -o-transition: .4s ease;

  transition: .4s ease;

}



.panel:checked ~ .panel-content{

  height: auto;

  opacity: 1;

  padding: 14px 0 14px 30px;

  text-align: justify;

}



.plus {

  position: absolute;

  margin-left: 20px;

  margin-top: 4px;

  z-index: 5;

  font-size: 30px;

  line-height: 100%;

  -webkit-user-select: none;    

  -moz-user-select: none;

  -ms-user-select: none;

  -o-user-select: none;

  user-select: none;

  -webkit-transition: .2s ease;

  -moz-transition: .2s ease;

  -o-transition: .2s ease;

  transition: .2s ease;

  color:#3d3d3d6e;

}



.panel:checked ~ .plus{

  color:#d30015;

}



.panel:checked ~ .panel-title{

  color: #d30015;

  font-weight: 600;

}



.panel:checked ~ .plus {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}



.panel {

  display: none;

}





@media (max-width: 768px) {

  .faq-content {

    width: 100% !important;

    padding: 0 1rem;

  }



  .fap-c{

    flex-direction:column;

    column-gap: 2.5rem;

  }



  .fap-c header{

    width:100%;

    padding-right:0;

  }





  .panel-title {

    font-size: 20px; /* Disminuye el tamaño del texto */

    padding: 10px 10px 0 50px;

  }



  .panel-content {

    font-size: 18px;

    margin: 0 20px; /* Reduce el margen en dispositivos medianos */

  }



  .plus {

    font-size: 36px; /* Ajusta el tamaño del símbolo "+" */

  }

}



@media (max-width: 625px){

  .fap-c header{

    padding:0 2rem;

  }

}



/* Móviles (480px o menos) */

@media (max-width: 480px) {

  .fap-c header{

    margin-bottom: 1rem !important;

    width: 100% !important;

    padding: 0 2.5rem;

  }

  .faq-content {

    max-width: 95%; /* Ocupa casi todo el ancho */

  }



  .panel-title {

    font-size: 18px; /* Texto más pequeño para móviles */

    padding: 10px 10px 0 40px;

  }



  .panel-content {

    font-size: 16px; /* Reduce el tamaño del contenido */

    margin: 0 10px; /* Menor margen en móviles */

  }



  .plus {

    font-size: 30px; /* Reduce el tamaño del símbolo "+" */

    margin-left: 10px;

  }

}





/* --------------------- Sección Blog --------------------------*/



#blog{

  background-image: linear-gradient(2deg, #000000d6 30%, #000000ad 85%), url('../img/imgSeccion/red-truck.png');

  

  /*background: #efefef;*/

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

}



.background-blog{

  padding: 4rem 0px;

}



.caption-blog a{

  color: #ffc107;

}



.caption-blog a:hover{

  color: #c7c7c7;

}



.blog-cont {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  max-width: 1200px;

  margin-top: 3rem;

  gap: 2rem;

}



.card-header{

  padding: 0 !important;

  border-bottom: none !important;

}



.card-body h3{

  color: #f2f2f2;

  font-size: 1.3rem;

  margin-bottom: 15px;

  font-family: 'Open-Sans', sans-serif;

}



.card-body span{

  color: #ffc107;

}



.card-header img {

  width: 100%;

  display: block;

  object-fit: cover;

  border-radius: 5px;

}



.blog-card {

  display: flex;

  flex-direction: column;

  width: 31%;

  overflow: hidden;

  box-shadow: 0 .1rem 1rem rgba(0, 0, 0, 0.1);

  border-radius: 1em;

  border: 1px solid #c4c4c424;

  backdrop-filter: blur(2px);

  padding: 15px;

  padding-bottom: 5px;

  transition: .3s;

  background: #0000003d;

}







.card-body {

  padding: 1rem;

  display: flex;

  flex-direction: column;

  gap: .5rem;



}

  



.card-body h4 {

  font-size: 1.4rem;

  text-transform: capitalize;

  color: #bd0000;

}



.date{

  font-size: small !important;

}



.card-footer {

  display: flex;

  padding: 1rem;

  margin-top: auto;

  border-bottom-left-radius: 10px !important;

  border-bottom-right-radius: 10px !important;

  background: none !important;

  border-top:1px solid #e5e5e54f !important;

}





.blog-card:hover{

  border: 1px solid #9b9b9b99;

  transform: translateY(-0.25rem);

}



.blog-card a{

  color: #fafafa;

  text-decoration: none;

  font-family: var(--title-font);

  font-weight: 600;

  font-size: 14px;

}



.blog-card a:hover{

  color: #c7c7c7;

}



.blog-card p{

  color: #dcdcdc;

}





/* Para pantallas medianas (tabletas) */

@media (max-width: 992px) {

  .blog-card {

    width: 45%; /* Reduce el ancho a dos tarjetas por fila */

  }

}



@media (max-width: 768px) {

  .blog-card {

      width: 100%;

  }

}



/* Para pantallas pequeñas (móviles) */

@media (max-width: 576px) {

  #blog .section-header{

    padding-left: 1rem;

    padding-right: .50rem;

  }

  .blog-card {

    width: 90%; /* Una tarjeta por fila */

  }



  .card-body h4 {

    font-size: 1.2rem; /* Ajustar título para móviles */

  }



  .caption-blog p {

    font-size: 0.9rem; /* Texto más pequeño para móviles */

  }

}





/*prev and next button*/

.nav-btn {

  padding: 0.5rem 1rem;

  background-color: transparent;

  color: #b50000;

  border: none;

  font-size: 1.5rem;

  cursor: pointer;

  transition: color 0.3s ease;

}



.nav-btn:disabled {

  color: #d4d4d4;

  cursor: not-allowed;

}



.nav-btn:hover:not(:disabled) {

  color: #a00000;

}







  

  /* ---------------------styles.css ------------------------------------------*/

  

  body {

    font-family: Arial, sans-serif; /* Fuente del cuerpo para un estilo limpio */

    background-color: #f4f4f4; /* Color de fondo de la página */

  }

  

  .titulo {

    text-align: center; /* Centra el texto */

    font-size: 36px; /* Tamaño del texto */

    font-weight: bold; /* Estilo de texto en negrita */

    color: #b64141; /* Color del texto */

    margin: 20px 0; /* Espaciado arriba y abajo */

  }

  

  /* Estilo para el encabezado de la sección */

  .section-header {

    text-align: center;

    margin-bottom: 2rem; /* Espaciado por debajo del encabezado */

  }

  

  .footer-colored-line {

    /*height: 10px; /* Altura de la línea */

    width: 25px; /* Ancho de la línea */

    background: linear-gradient(329deg, #ff81008a, #ffc107);

    /*margin: 1rem 0 2rem; /* Centrar la línea */

    border-radius: 0; /* Bordes redondeados */

  }



  .footer-line{

    width: 25px;

    background: linear-gradient(329deg, #ff81008a, #ffc107);

    border-radius: 0;

    height: 2px;

    margin:15px auto;

  }

  

  /* Estilos para el acordeón */

  .accordion-item {

    margin-bottom: 1rem; /* Espaciado entre los ítems */

  }

  

  .accordion-button {

    background-color: #efe9e9; /* Color de fondo del botón */

    font-weight: bold; /* Texto en negrita */

  }

  

  .accordion-button:not(.collapsed) {

    color: #fd0d0d; /* Color del texto cuando está abierto */

    background-color: #f0d8d6; /* Color de fondo cuando está abierto */

  }















/*KEYFRAMES*/



@keyframes pulsate-bck {

  0% {

    -webkit-transform: scale(1);

            transform: scale(1);

  }

  50% {

    -webkit-transform: scale(0.9);

            transform: scale(0.9);

  }

  100% {

    -webkit-transform: scale(1);

            transform: scale(1);

  }

}



@keyframes highlight {

	to {

		background-position: 0;

	}

}



mark {

	animation: highlight linear forwards;

  animation-timeline: view(69% 20%);

  /*background: linear-gradient(to right, #71717121 50%, oklch(0.86 0.19 84.89 / 0) 50%);*/

  background-position: 100%;

  background-size: 200% 100%;

  border-radius: 5px;

  padding-inline: 0.125rem;

  background-color: transparent !important;

}









@keyframes beat {

  0% {

    transform: scale(1);

  }

  14% {

    transform: scale(0.9);

  }

  21% {

    transform: scale(1.1) skew(0.004turn)

  }

  28% {

    transform: scale(1) skew(0.008turn);

  }

  35% {

    transform: scale(1) skew(0)

  }

}





/*-------reveal while scroll--------*/

@keyframes reveal {

  0% {

    opacity: 0;

    transform: scale(0.9);

  }

  100% {

    opacity: 1;

    transform: scale(1);

  }

}



.fadein {

  opacity: 0; /* Invisible inicialmente */

  transition: opacity 0.9s ease-in-out; /* Suavizado de la opacidad */

}



.fadein.visible {

  opacity: 1; /* Visible cuando se activa */

}









/*---------Catálogo de Productos---------*/



#catalogo{

  padding: 2rem 0 ;



}



.ctl{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 3rem;

  margin:0 2rem;

}



.mascota{

  width: 30%;

}



.mascota img{

  width: 100%;

  translate: 0 -60px;

}



.ct-text{

  width: 50%;

}



.ct-text h3{

  font-family: 'Oswald', sans-serif;

  color: #000000;

  font-size: 2.3rem;

  margin-bottom: .6em;

}



.ct-text p{

  font-family: 'Open-Sans', sans-serif;

  color: rgba(39, 39, 39, 0.829);

}



.sectores{

  display: grid;

  justify-items: center;

  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  width: 100%;

}



.box-sec{

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  background-color: #161616;

  width: 100%;

  height: auto;

  padding: 30px;

  gap:2rem;

}



.box-sec img{

  width: 40%;



}



.box-sec h4{

  font-family: 'Open-Sans', sans-serif !important;

  font-size: 1.1rem !important;

  color: aliceblue;

  text-align: center;

  font-weight: 500 !important;

  margin-bottom: 0 !important;

}



.box-sec .link-sector{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.btn-ctl {

  --bg: #3a3a3a;

  color: #fff !important;

  cursor: pointer;

  border: 1px solid #2d1d1d;

  border-radius: 10px;

  padding: .3em 2em;

  background: #cd0000;

  transition: 0.2s;

  text-decoration: none;

}



.btn-ctl:hover {

  color: black !important;

  transform: translate(-0.25rem, -0.25rem);

  background: #ffc107;

  box-shadow: 0.25rem 0.25rem var(--bg);

  text-decoration: none;

}



.btn-ctl:active {

  transform: translate(0);

  box-shadow: none;

}



@media (max-width: 768px){

  .ctl{

    gap: 0;

  }

  .mascota{

    width: 0;

    visibility: hidden;

  }

  .ct-text{

    width: 95%;

  }

}





/*------------Navbar dropdown----------*/



.drop-menu-nav{

  background: #000000d7 !important;

  border-radius: 5px !important;

  transform: translate(0, 12px) !important;

  backdrop-filter: blur(7px) !important;

}



.drop-hover{

  color: white !important;

}



.drop-hover:hover{

  color: #ffc107 !important;

  background: #1c1c1cb0 !important;

}



@media (max-width:991px){

  .drop-menu-nav{

    transform: none !important;

  }



  li .drop-hover{

    background: #303030 !important;

  }

  

}