@font-face {
  font-family: 'ABCDiatype-Regular';
  src: url('/css/fonts/ABCDiatype-Regular.woff') format('woff');
  font-weight: 400;
  font-style: Regular;
}
@font-face {
  font-family: 'RM Mono';
  src: url('/css/fonts/rmmono-regular.woff2') format('woff');
  font-weight: 400;
  font-style: Regular;
}
body{
    background-color: #F3F3F3;
}
.dropdown-toggle:hover,.dropdown-toggle:focus,.navbar-nav .nav-link.show{
    color: #FFFFFF;
}
.dropdown-toggle.white:hover, .dropdown-toggle.white:focus, .navbar-nav.white .nav-link.show{
    color: #000000;
}
.navbar-toggler {
    border: none;
    color: #FFFFFF;
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
}
.navbar-toggler.white {
    color: #000000;
}

.dropdown-toggle::after,.navbar-toggler.collapsed::after {
    content: "";
    border: none;
    width: 9.84px;
    height: 11.46px;
    background-image: url('/img/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
   
    transform: translateY(6px) rotate(180deg);
}
.dropdown-toggle.white::after ,.navbar-toggler.collapsed.white::after{
    content: "";
    border: none;
    width: 9.84px;
    height: 11.46px;
    background-image: url('/img/arrow-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
   transform: translateY(6px) rotate(360deg);
}
.navbar-nav .nav-link.show::after,.navbar-toggler::after {
content: "";
    border: none;
    width: 9.84px;
    height: 11.46px;
    background-image: url('/img/arrow.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
  transform: translateY(6px) rotate(360deg);
}
.navbar-nav .nav-link.white.show::after,.navbar-toggler.white::after ,#menumobil::after{
content: "";
    border: none;
    width: 9.84px;
    height: 11.46px;
    background-image: url('/img/arrow-black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    display: inline-block;
    transform: translateY(6px) rotate(180deg);
}
.navbar-toggler:focus {
    box-shadow: none;
}
#menumobil::after {
    transform: translateY(1px) rotate(180deg);
}
.navbar-toggler.collapsed::after,.navbar-toggler::after {
    transform: translateY(3px) rotate(180deg);
}
.navbar-toggler.collapsed.white::after {
    transform: translateY(3px) rotate(360deg);
}
.nav-float{
    position: fixed;
    z-index: 999999999999;
}
.logo{
    width: 122px;
    height: 34px;
    margin-right: 40px;
}
/* Estado inicial */
.nav-float {
  background-color: transparent; /* O el color que prefieras */
  transition: background-color 0.4s ease; /* Para que el cambio sea suave */
}

/* Clase que aplicaremos con JS */
.navbar-scrolled {
  background-color: #fff; /* El color al bajar */
}
.navbar-scrolled .nav-link {
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #272727;
}
.mfirstb{
   padding-top:50px;
}
.hb1{
    height: 100vh;
    background: #0049D1;
}
.hb1 h1{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style:normal;
    font-size: 100px;
   /* Interlineado ajustado (en la imagen el texto está compacto) */
    line-height: .9;
    
    /* Espaciado entre letras ligeramente negativo para ese look moderno */
    letter-spacing: -0.03em;
    text-align: center;
    color: #F5F5F5;
}
.nav-link{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #F5F5F5;
}
.hb2{
    background: #000000;
}
ol, ul {
    padding-left: 1rem;
}
li.gray{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #B3B3B3;
}
.ulwhite{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #F3F3F3;

}

.list{
    height: 96px;
    padding-top: 32px;
    padding-bottom: 32px;
    gap: 16px;
    border-top-width: 1px;
    border-top: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    border-left: none;
    border-right: none;
}
.text-abc-32-F3F3F3{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #F3F3F3;

}
.text-abc-32-FFFFFF{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #FFFFFF;
}
.cont-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 15px; /* espacio entre cards */
  align-items: start; /* evita que se estiren raro */
}
.customcard{
    width: 448px;
    height: 428px;
    border-radius: 4px;
    border-width: 1px;
    background: #F3F3F3;
    border: 1px solid #000000;
}
.rimg{
    height: 428px;
    height: 336px;
}
.rtex{
    width: 458px;
    height: 92px;
    padding-left: 12px;
}
.rimg div img{
    width: 50%;
    height: 50%;
    object-fit: contain;
}
.cardDos{
    width: 448px;
    height: 889px;
    border-radius: 4px;
    border-width: 1px;
    background: #F3F3F3;
    border: 1px solid #000000;
}
.brt{
    border-top: #000000 1px solid;
}
.brtb{
    border-left: none;
    border-right: none;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
}
.ulblue{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #0049D1;
}
.ABC-32-1E1E1E{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 32px;
    leading-trim: NONE;
    line-height: 95%;
    letter-spacing: -1.9%;
    color: #1E1E1E;
}
.ABC-42-1E1E1E{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 42px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    color: #1E1E1E;
}
.ABC-38-5-1E1E1E{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 38.76px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ABC-48-000000{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 48px;
    leading-trim: NONE;
    line-height: 97%;
    letter-spacing: -1.1%;
    color: #000000;

}
.ABC-26-000000{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 26px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    text-transform: capitalize;
    color: #000000;
}
.ABC-18-757575{
    font-family: ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    color:  #757575;
}
.servicioscont{
    height: 344px;
    background-color: #000000;
    
}
.ABC-16-757575{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #757575;

}

.multiple-items {
  /* Crea el efecto de desvanecimiento en los bordes izquierdo y derecho */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 6%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 6%,
    black 10%,
    black 90%,
    transparent 100%
  );

  /* Asegura que los logos que salen del flujo visible no causen scroll horizontal */
  overflow: hidden; 
}
        /* Contenedor de los puntos (se mantiene estático) */
.slick-dots {
    display: flex;
    justify-content: start;
    list-style: none;
    padding: 0;
    margin-top: 0px;
}

/* Estilo base de los puntos */
.slick-dots li {
    margin: 0 5px;
}

.slick-dots li button {
    font-size: 0; /* Oculta el número por defecto */
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #E6E6E6; /* Color de los puntos inactivos */
    border-radius: 50%;
    transition: background 0.3s ease;
}

/* Punto Activo: Aquí cambia el color */
.slick-dots li.slick-active button {
    background: #000000; /* Color del punto activo */
    transform: scale(1.2); /* Opcional: un ligero aumento de tamaño */
}
/* 1. Asegúrate de que el slide de Slick ocupe el 100% real y use box-sizing */
.testimonios .slick-slide {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px; /* Dale un pequeño colchón a los lados para que no toque los bordes */
}

/* 2. Fuerza al contenedor de tu texto a respetar el ancho y romper líneas */
.testimonios .slick-slide p, 
.testimonios .slick-slide h3,
.testimonios .slick-slide blockquote { /* Usa la etiqueta exacta que tengas para el texto */
    white-space: normal;    /* Evita que el texto se quede en una sola línea horizontal */
    word-wrap: break-word;  /* Rompe palabras largas si es necesario */
    overflow-wrap: break-word;
    max-width: 100%;        /* No permite que el texto mida más que el slide */
    display: block;
}
.rmmono-16-757575{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
    color:  #757575;

}
.ABCD-18-ffffff{
    font-family:  ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 18px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #FFFFFF;
}

.hclientes{
    height: 634px;
}
.cont-form{
    height: 344px;
    padding-top: 32px;
    padding-right: 24px;
    padding-bottom: 32px;
    padding-left: 24px;
    gap: 24px;
    border-radius: 4px;
    border-width: 1px;
    border: 1px solid #000000;
}
.ABC-26-000{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 26px;
    line-height: 99%;
    letter-spacing: -1.1%;
    color: #000000;
}
textarea{
    width: 659px;
    height: 127px;
    gap: 10px;
}
input{
    width: 100%;
    height: 35px;
}
textarea, input{
    border-radius: 8px;
    border-width: 1px;
    padding: 12px;
    border: 1px solid #757575;
    color: #757575;
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: left;
    color:  #757575;
    background-color: #F3F3F3;
}
.btn-xl-black{
    width: 100%;
    height: 35px;
    opacity: 1;

    gap: 10px;
    border-radius: 8px;
    background: #000000;
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}
.btn-xl-black:hover{
    background: #FFFFFF;
    color: #000000;
    border: solid 1px #000000;
}
ul.listacontacto {
    list-style: none; /* Quitamos los puntos por defecto */
    padding: 0;
}

ul.listacontacto li::before {
    content: "✓"; /* Símbolo de la paloma */
    color:  #757575;
    font-weight: bold;
    display: inline-block; 
    width: 1em;    /* Espacio entre icono y texto */
    margin-left: -1em; 
}
  
ul.listacontacto  li {
    padding-left: 1.2em;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;

}
.rmmono-16-1E1E1E{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color:  #1E1E1E;
    text-decoration: none;
}
.rmmono-14-1E1E1E{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color:  #1E1E1E;
    text-decoration: none;
}
.rmmono-16-000000{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #000000;
}
.circle{
    width: 14px;
    height: 14px;
    border-radius: 100%;
}
footer{
    height: 100px;
}
.dropdown-menu{
    width: 330px;
    height: 106px;
    top: 65px;
    left: 243px;

    border-radius: 8px;
    gap: 24px;
    padding: 10px;
}
.dropdown-menu .dropdown-item{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    text-transform: uppercase;
    color: #000000;

}
.multiple-items div img{
    width: auto;
    height: 40px;           /* Ajusta la altura según necesites */
    object-fit: contain;     /* CRUCIAL: No deforma los logos */
    filter: grayscale(100%); /* Efecto gris de la imagen */
    opacity: 0.6;            /* Para que se vean sutiles */
    transition: all 0.3s ease;
    padding: 0 20px;         /* Espacio entre logos */
}
.multiple-items div img:hover{
    filter: grayscale(0%);
  opacity: 1;
}
.rowcardimg{
    height: 516px;
    position: relative;
}
.rowcard{
    padding: 10px 12px;
    height: 337px;
  
}
.btn-primaryCustom{
    width: 225px;
    height: 59px;
    gap: 10px;
    border-radius: 8px;
    background: #0049D1;
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
}
.btn-primaryCustom:hover{
    background: #0049D1;
    font-family: ABCDiatype-Regular;
    color: #FFFFFF;
}
.ec1{
    background: #0049D1;
    background-image: url('/img/diagrama.png');
    background-repeat: no-repeat;
    background-position: right top;
    height: 100vh;
}
.contacto{
    height: 88vh;
}
.dropdown-menu .dropdown-item {
    position: relative;
    padding-left: 1.5rem; /* Ajusta según el tamaño de tu punto */
    transition: color 0.3s ease;
}
.dropdown-item:focus, .dropdown-item:hover 
{
    color: #0049D1!important;
} 
.dropdown-menu .dropdown-item:hover::before {
    content: "";
    position: absolute;
    left: 0.5rem;          /* Espaciado desde el borde izquierdo */
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    width: 8px;           /* Ancho del punto */
    height: 8px;          /* Alto del punto */
    background-color: #0049D1; /* Tu azul específico */
    border-radius: 50%;   /* Lo hace circular */
}
.menu-mobil{
    position: absolute;
    z-index: 99999999999;
    width: 100%;
    background-color: #F5F5F5;
    position: fixed;
}
.menu-mobil ul{
     list-style-type: none;
     padding: 0px;
}
.menu-mobil ul li {
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    text-transform: uppercase;
    color: #1E1E1E;
    padding-top: 15px;
    padding-bottom: 15px;
}
.contenedor {
  display: flex; /* Activa Flexbox */
  flex-direction: column; /* Alinea los divs de forma vertical */
  height: 100%; /* Define la altura total de tu contenedor (puedes usar px, vh, etc.) */
}
.div-80 {
  flex: 0.8; /* Ocupa el 80% del espacio del contenedor */
}

.div-20 {
  flex: 0.2; /* Ocupa el 20% restante */
}
.contacto{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: var(--Text-Default-Default, #1E1E1E);

}
ol.espaciado-simple{
margin-left: 30px;
}
ol.espaciado-simple li {
    padding-left: 100px; /* Ajusta este valor a tu gusto */
    
}
/*animaciones*/

/* Estilos base para el header flotante al inicio */
#nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030; /* Por encima de todo */

    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
}

/* Estado 1: Ocultar la barra cuando se hace scroll hacia abajo */
#nav.nav-hidden {
    transform: translateY(-100%);
}



/* Opcional: Si tu fondo inicial es oscuro y el de scroll es claro, 
   puedes cambiar el color de los links dinámicamente */
#nav.nav-scrolled .nav-link, 
#nav.nav-scrolled #dropdown {
    color: #000000 !important; /* Texto negro cuando tiene fondo */
}

#nav.nav-scrolled .logo {
    /* Si tu logo es blanco, puedes usar filtros para invertirlo a negro al hacer scroll */
    /* filter: invert(1); */
}

/* Estado inicial del texto (oculto y un poco abajo) */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  will-change: opacity, transform; /* Optimiza el rendimiento de la animación */
}

/* Clase que activa la animación cuando el elemento entra en pantalla */
.fade-in-up.visible {
  animation: fadeInUpModern 0.8s cubic-bezier(0.215, 0.610, 0.355, 1) forwards;
}

/* Definición de los fotogramas (Keyframes) */
@keyframes fadeInUpModern {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.typing-proportional {
    list-style-position: inside;
    overflow: hidden;
    white-space: nowrap;
    width: 0; /* Empieza oculto */
    max-width: fit-content;
}

/* Esta clase se agregará mediante JavaScript cuando sea visible */
.typing-proportional.play {
    animation: typing-no-cursor 6s steps(40, end) forwards;
}
.contenedor-imagen {
  position: relative;
 
  overflow: hidden; /* Por si las imágenes se salen del borde */

  cursor: pointer;
}

/* Estilos generales para ambas imágenes */
.foto {
  position: absolute;
  top: 10%;
  left: 10%;
  
  object-fit: cover; /* Evita que la imagen se deforme */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Animación suave */
}

/* La foto de hover empieza invisible */
.foto-hover {
  opacity: 0;
  width: 80%;
}

/* --- EFECTO HOVER --- */

/* Cuando tocamos el CONTENEDOR, la foto de arriba se vuelve visible */
.contenedor-imagen:hover .foto-hover {
  opacity: 1;
}

/* Opcional: Un ligero zoom a la foto base para darle más dinamismo */
.contenedor-imagen:hover .foto-base {
  transform: scale(1.05);
   opacity: 0;
}
@keyframes typing-no-cursor {
    from { width: 0; }
    to { width: 100%; }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }

}