@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: 'ABCDiatype-Medium';
  src: url('/css/fonts/ABCDiatype-Medium.woff2') format('woff2');
  font-weight: 500;
  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;
}
.nav-link{
    padding: 0px;
}
.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;
}
#navbarNav{
    margin-bottom: 3px;
}
#nav .dropdown-toggle::after {
    vertical-align: 5px;
}
.dropdown-item.active  span{
    padding-left: 16px;
}
.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);
}
  /*  */
img:focus,
img:focus-visible {
  outline: none;
}
.dropdown-toggle::after{
        vertical-align: 5px;
}
 .nav-link:hover {
    color:white;
}
.white  .nav-link:hover {
    color:black;
}
 
.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(7px) 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: 118px;
    height: 34px;
    
}
.testsubmt{
            margin-top: calc(.25rm * 8);
}
.testimonih{
    height: 200px;
    padding-top: 25px;
}
.descsomo{
    height: 399px;
}
/* Estado inicial */
.nav-float {
  background-color: transparent; /* O el color que prefieras */
  transition: background-color 0.4s ease; /* Para que el cambio sea suave */
}
.cmb30{
   height: 54px;
}
/* Clase que aplicaremos con JS */
.navbar-scrolled {
  background-color: #F3F3F3; /* 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-Medium;
    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;
    padding-top: 140px;
    
}
ol, ul {
    padding-left: 1rem;
}
li.gray{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #B3B3B3;
}
.text-abc-28-FFFFFF{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 28px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
}
.ABC-42-1E1E1E{
    font-family:ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 42px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ABC-42-1E1E1E-regular{
    font-family:ABCDiatype-Regular;
    font-weight: 500;
    font-style: Regular;
    font-size: 42px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ulwhite{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 150%;
    letter-spacing: -1.9%;
    text-transform: uppercase;
    color: #F3F3F3;

}

.list{
    height: auto;
    padding: 24px 0px;
   
    gap: 16px;
    border-top-width: 1px;
    border-top: 1px solid #FFFFFF;
    border-bottom: none;
    border-left: none;
    border-right: none;
}
.cont-direccion{
   width: 340px; 
}
.form4{
    padding-top: 4px;
}
.form35{
    padding-top: 35px; 
}
.listborderend{
    border-bottom: 1px solid #FFFFFF;
     border-top: 1px solid #FFFFFF;
    border-left: none;
    border-right: none; 
}
.text-abc-32-F3F3F3{
    font-family: ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 32px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #F3F3F3;

}
.text-abc-28-F3F3F3{
    font-family:ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 28px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #F3F3F3;

}
.text-abc-28-F3F3F3-regular{
    font-family:ABCDiatype-Regular;
    font-weight: 500;
    font-style: Medium;
    font-size: 28px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #F3F3F3;

}
.text-abc-32-FFFFFF{
    font-family:ABCDiatype-Medium;
    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: 24px; /* espacio entre cards */
    align-items: start; /* evita que se estiren raro */
    }
    .titlecard{
         font-family: ABCDiatype-Medium;
        font-weight: 400;
        font-style: Medium;
        font-size: 16px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 1%;
        color: #000000;

    }
    .ABC-16-757575-ligth{
         font-family: ABCDiatype-Regular;
        font-weight: 300;
        font-style: Light;
        font-size: 16px;
        leading-trim: NONE;
        line-height: 100%;
        letter-spacing: 0%;
        color:#757575;

    }
    .paddingtop98{
        padding-top: 101px;
    }
    .desccard{
      font-family: ABCDiatype-Regular;
    font-weight: 300;
    font-style: Light;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;

        color: #757575;
    }
.contfabriquemos{
    margin-top: 90px;
    margin-bottom: 39px;

}
.customcard{
    width: 100%;
    height: 426px;
    border-radius: 4px;
    border-width: 1px;
    background: #F3F3F3;
    border: 1px solid #000000;
}
.rimg{
    height: 428px;
    height: 336px;
}
.rtex{
    width: 102%;
    height: 92px;
    padding-left: 12px;
}
.rimg div img{
    width: 50%;
    height: 50%;
    object-fit: contain;
}
.cardDos{
    width: 100%;
    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: 14px;
    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-28-1E1E1E-Regular{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 28px;
    leading-trim: NONE;
    line-height: 95%;
    letter-spacing: -1.9%;
    color: #1E1E1E;
}
.padding158{
    padding-top: 158px;
}
.padding170{
    padding-top: 170px;
}
.mt-100{
    margin-top: 100px;
}
.mb-100{
    margin-bottom: 100px;
}
.margint122{
   margin-top:  122px;
}
.ABC-36-1E1E1E{
    font-family: ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    color: #1E1E1E;
}
.ABC-36-1E1E1E-regular{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    color: #1E1E1E;
}
.ABC-36-FFFFFF{
   font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    color: #FFFFFF;
}
.ABC-38-5-1E1E1E{
    font-family:ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 38.76px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ABC-28-1E1E1E{
    font-family: ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 28px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.w{
    background: white;
}
.b{
    background-color: #0049D1;
}
.g{
    background-color: #B3B3B3;
}
.bi-dot{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-bottom: 2px;
    margin-right: 10px;
}
.pading0{
    padding-left: 0px!important;
}
.padingt{
    padding-top: 100px;
}
.pading24{
    padding-left: 24px!important;
    padding-right: 24px!important;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent !important;
}
.dropdown-item.active, .dropdown-item:active {
   background-color: transparent !important;
}
li{
    padding-left: 0px;
}
 li::marker {
  font-size: 16px; /* Ajusta este valor a tu gusto (1.5rem, 24px, etc.) */
}

.cont-g-list{
    display: grid;
    width: 472px;
    height: auto;
    top: 584px;
    padding-top: 64px;
    padding-right: 24px;
    padding-bottom: 64px;
    gap: 40px;
    angle: 0 deg;
    opacity: 1;
}
.cont-list{
    width: 424px;
    height: 54px;
    gap: 26px;
    angle: 0 deg;
    opacity: 1;
    display: grid;
    grid-template-columns: 94px 1fr;
    align-items: center;
}
.cont-list span{
    width: 94px;
    height: 18px;
    angle: 0 deg;
    opacity: 1;
    margin-bottom: 9px;

}
.ABC-26-1E1E1E{
    font-family:ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ABC-26-1E1E1E-Regular{
    font-family:ABCDiatype-Regular;
    font-weight: 500;
    font-style: Regular;
    font-size: 26px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color:#1E1E1E;
}
.ABC-36-000000{
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 36px;
    leading-trim: NONE;
    line-height: 97%;
    letter-spacing: -1.1%;
    color: #000000;

}
.ABC-36-fff{
    color: var(--IEMSA-White, #FFF);
    font-family: ABCDiatype-Regular;
    font-size: 36px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%; /* 36px */
}
.ecb2{
    height: 568px;
}
.ABC-26-000000{
    font-family: ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 26px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #000000;
}
.ABC-24-000000{
     font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Medium;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;

    color: #000000;
}
.ABC-18-757575{
    font-family: ABCDiatype-Medium;
    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;
    
}
.paddingtop126{
   padding-top: 126px; 
}
.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; 
}
.multiple-itemsG {
  /* Crea el efecto de desvanecimiento en los bordes izquierdo y derecho */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 1%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 1%,
    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: 10px;
    padding-left: 6px;
}

/* 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: 14px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #757575;
}
.contactofooter{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: CAP_HEIGHT;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
    color: #757575;

}
.servicios{
    height: 344px;
}
.rmmono-14-757575{
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
    color:  #757575;
}
.ABCD-16-ffffff{
    font-family:  ABCDiatype-Medium;
    font-weight: 500;
    font-style: Medium;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: -1.1%;
    color: #FFFFFF;
}

.hclientes{
    height: 634px;
}
.electroservicios-fabricamos{
    height: 299px;
    padding-top: 100px;
    padding-bottom: 100px;
}
.barclient{
    border: 1px solid #000000;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
        padding-bottom:60px;
}
#dropdow{
        margin-top: 3px;
}
.mb-112{
    margin-bottom: 112px;
}
.clientes{
   padding-bottom: 156px;
}
.borderb{
    border-top:solid 1px black ;
    margin-top: 80px;
    margin-bottom: 76px;
}
.bordert{
     margin-bottom: 90px;
    border-top:solid 1px black ;
}
.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: 24px;
    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: 10px 12px;
    border: 1px solid #757575;
    color: #757575;
    font-family: RM Mono;
    font-weight: 400;
    font-style: Regular;
    font-size: 14px;
    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;
    margin-top: 24px;
}

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{
    padding: 24px 26px;
    padding-top: 53px;
    height: auto;
}
.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 ,.multiple-itemsG 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 ,.multiple-itemsG 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;
}

.diagramas  {
    object-fit: cover;
    width: 100%;
    height: 558px;
    border-radius: 4px;
}
.slide-1,.slide-2{
    padding-right: 24px;
}
.diagramaazul{
    width: 684px;
    height: 558px;
    border-radius:4px;
    background: #0049D1;
}
.pading-contacto{
    padding: 32px 24px;;
}
.diagramaazul img {
    width: 445.3399658203125px;
    height: 471.42230224609375px;
    margin-top: 50px;
}
footer img{
    width: 88px;
    height: 25.307218551635742px;
}
.ec1{
    background: #0049D1;
    background-image: url('/img/IEMSA_PosteElectrico.svg');
    background-repeat: no-repeat;
    background-position:right bottom;
    background-size: 613px 845px;
    height: 903px;
}
.contacto{
    height: 100%;
}
.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 ,.dropdown-item.active
{
    color: #0049D1!important;
} 
.dropdown-menu .dropdown-item:hover::before,.dropdown-menu .dropdown-item.active::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;
    padding-top: 29px;
    
}
.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: 14px;
    leading-trim: NONE;
    line-height: 99%;
    letter-spacing: -1.1%;
    text-transform: uppercase;
    color: #1E1E1E;
    padding-top: 0px;
    padding-bottom: 24px;
}
.footerhm {
    padding-bottom: 36px!important;
}
.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%;
    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%;
    height: 88px;
    z-index: 1030; /* Por encima de todo */
    padding: 26px 24px;
    transition: transform 0.4s ease-in-out, background-color 0.4s ease-in-out;
}
.menu-mobil{
     padding: 26px 24px;
}
/* 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 {
     width: auto;
    height: 516px;
  object-fit: contain; /* Evita que la imagen se deforme */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* Animación suave */
}
.foto-hover{

    object-fit: contain;
}
.content-title {
    width: 700px;
}
.content-title-electroconstruciones{
        width: 578px;
    }
.item{
    height: 29%;
    
}
.item2{
    height: 33%;
     
}
.item3{
    height: 33%;
    
}
.margint100{
    margin-top: 100px;
}

.contsomos{
    width: 1040px;
}
.gapnav{
    gap:97px;
}
.item4{
    height: 19%;
    padding-bottom: 24px;
    
}
.pading12{
    padding-right: 0px;
    padding-left:0px ;
    padding-bottom: 12px;
}
.pading12-14r{
     padding-right: 0px;
    padding-left:12px ;
    padding-bottom: 12px;
}

/* 1. El contenedor debe ser la referencia de posición */
.contenedor-imagen {
  position: relative;
  display: inline-block; /* O width/max-width según tu diseño */
  overflow: hidden;      /* Para que el zoom no se salga del contenedor */
}

/* 2. La foto base mantiene las dimensiones del contenedor */
.foto-base {
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* 3. La foto hover se superpone exactamente sobre la base */
.foto-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Mantiene la proporción de la imagen sin deformar */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* --- EFECTOS HOVER --- */

.contenedor-imagen:hover .foto-hover {
  opacity: 1;
}

.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: 100%;
    }

}
.reptrasimg{
    width: 100%;
    height: 558px;
    object-fit: cover;
    border-radius: 4px;
}

.elemento-sin-hover:hover {
    width: 100%;
    height: 35px;
    opacity: 1;

    gap: 10px;
    border-radius: 8px;
    background: #000000!important;
    font-family: ABCDiatype-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #FFFFFF;
    cursor:default
}

a{
    color: #0049D1;
}
a.rmmono-16-757575{
    color: #757575;
}
a.rmmono-16-757575:hover{
    color: #0049D1;
}