html {
     overflow-x: hidden;
 }
 
.pagos-general {
    position: fixed;
    bottom: 2.3rem;
    right: 1.7rem;
    width: clamp(150px, 35vw, 230px);
    /* tamaño responsivo */
    z-index: 1000 !important;
}

.tiktok-general {
    position: fixed;
    bottom: 2.15rem;
    right: 15.4rem;
    width: clamp(190px, 46vw, 301px);
    /* tamaño responsivo */
    z-index: 1000 !important;
}

@media (max-width: 455px) {
    .tiktok-general {
        right: 11.4rem;
    }
}

.marca-agua {
    position: fixed;
    bottom: 8rem;
    right: 2rem;
    width: clamp(10px, 2.5vw, 15px);
    /* tamaño responsivo */
    z-index: 1000 !important;
    /* por encima de fondo, pero debajo de UI */
    pointer-events: none;
    /* no interfiere con clics */
    user-select: none;
}
 .enlaces-secundarios {
     padding-top: 2.7rem;
 }

 .prueba-contenedor {
     font-family: 'SF Pro Display Thin', sans-serif;
     font-weight: 200;
     gap: 0.5rem;
     font-size: clamp(0.95rem, 1.1vw, 1.3rem);
     height: clamp(3rem, 6vw, 5rem);
     /* Altura visible */
 }

 .sticky-menu {
     z-index: 1000 !important;
     position: sticky;
     top: 0;
     background: transparent;
     transition: background 0.3s ease;
     pointer-events: none;
 }

 .sticky-menu.visible {
     background: white;
     /* cuando aparece */
     pointer-events: auto;
     box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
 }

 /* El contenido interno empieza invisible */
 .sticky-menu .container {
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .sticky-menu.visible .container {
     opacity: 1;
 }

 @media (max-width: 991.98px) {
     body {
         overflow-x: hidden;
     }

     .sticky-menu {
         display: none;
         /* Oculta el menú sticky en móviles y tablets pequeñas */
     }
 }

 .meta {
     padding-top: 3rem;
     padding-bottom: 4rem;
 }

 .contenedor-animado1 {
     width: 100%;
     padding-right: 20px;
     margin-bottom: 20px;
 }

 .contenedor-animado2 {
     width: 100%;
     padding-left: 20px;
     margin-bottom: 20px;
 }

 .contenedor-animado3 {
     width: 100%;
     margin-top: 40px;
     padding-right: 20px;
     margin-bottom: 5rem;
 }

 .contenedor-animado4 {
     width: 100%;
     margin-top: 40px;
     padding-left: 20px;
     margin-bottom: 5rem;
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 /* Fondo fijo */
 .hero-bg {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100vh;
     background-image: url('/images/nuevoproyecto/empresarial/fotofondo.svg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
 }

 /* El resto del contenido se monta sobre el fondo */

 .custom-bg {
     background-color: white;
     position: relative;
     z-index: 2;
 }

 .custom-tran {
     background-color: transparent;
     position: relative;
     z-index: 2;
 }

 .custom-gris {
     background-color: #f5f5f7;
     position: relative;
     z-index: 2;
 }

 /* Espacio para no solapar el fondo fijo */
 .spacer {
     height: 55vh;
     /* Para empujar el contenido debajo del hero */
 }

.espacio-dinamico2 {
    padding-bottom: clamp(2rem, 5vw, 10rem);
}

 /* Contenido */
 .custom-container-padding {
     padding: 5%;
 }

 .programas-title {
     padding-top: clamp(1rem, 5vw, 10rem);
     padding-bottom: clamp(1rem, 4vw, 3rem);
     overflow: hidden;
     /* permite que el h1 salga si escala */
     position: relative;
 }

 .titulos-general {
     display: inline-block;
     transform-origin: left center;
     z-index: 10;
     position: relative;
     font-size: clamp(2rem, 4vw, 5rem);
     font-family: "SF Pro Display", sans-serif;
     font-weight: bold;
     text-align: start;
 }

 @font-face {
     font-family: "SF Pro Display";
     src: url("/fonts/SFProDisplay-Regular.woff2") format("woff2"),
         url("/fonts/SFProDisplay-Regular.woff") format("woff");
     font-weight: normal;
     font-style: normal;
 }

 @media (max-width: 767.98px) {

     .contenedor-animado1,
     .contenedor-animado2,
     .contenedor-animado3,
     .contenedor-animado4 {
         padding-left: 0;
         padding-right: 0;
         margin-bottom: 20px;
         margin-top: 0;
         text-align: center;
         /* opcional, para alinear centrado el contenido */
     }
 }

 @media (max-width: 767.98px) {
     .meta {
         padding-top: 1rem;
         padding-bottom: 2rem;
     }
 }

 .mobile-menu {
     position: fixed;
     top: 0;
     left: 0;
     width: 80%;
     max-width: 300px;
     height: 100vh;
     background: #fff;
     box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
     padding: 2rem 1rem;
     transform: translateX(-100%);
     transition: transform 0.3s ease-in-out;
     z-index: 1040;
     overflow-y: auto;
 }

 .mobile-menu.open {
     transform: translateX(0);
 }

 .mobile-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .mobile-menu li {
     margin-bottom: 1rem;
 }

 .mobile-menu a {
     text-decoration: none;
     color: #000;
     font-size: 1.2rem;
 }


 #menu-toggle {
     position: fixed !important;
     top: 1.5rem !important;
     right: 1rem !important;
     width: 50px !important;
     height: 30px !important;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
     z-index: 1050;
 }

 #menu-toggle.open {
     gap: 2px !important;
 }

 #menu-toggle .bar {
     width: 28px !important;
     height: 4px !important;
     background-color: #000;
     border-radius: 2px;
     transition: all 0.3s ease;
     transform-origin: center !important;
 }

 /* Estado abierto: desaparecer barras de los extremos y cruzar las centrales */
 #menu-toggle.open .bar:nth-child(1),
 #menu-toggle.open .bar:nth-child(4) {
     opacity: 0;
     /* desaparecen */
 }

 #menu-toggle.open .bar:nth-child(2) {
     transform: rotate(45deg);
     width: 50px !important;
 }

 #menu-toggle.open .bar:nth-child(3) {
     transform: rotate(-45deg);
     width: 50px !important;
 }

 /* Ajustes responsivos */
 @media (max-width: 634px) {
     #menu-toggle {
         font-size: 1rem;
         top: 3.5rem;
     }
 }

 @media (min-width: 768px) and (max-width: 813px) {
     #menu-toggle {
         top: 5rem;
     }
 }

 /* Quitar borde y fondo del botón */
 .btn.btn-outline-secondary {
     border: none;
     background: none !important;
     box-shadow: none;
 }

 /* Evitar cambio de color al hacer clic o hover */
 .btn.btn-outline-secondary:hover,
 .btn.btn-outline-secondary:focus,
 .btn.btn-outline-secondary:active {
     background: none !important;
     color: inherit;
     /* Mantiene el color del texto */
 }

 /* Transición suave entre íconos */
 #menu-toggle {
     transition: transform 0.3s ease;
 }

 @font-face {
     font-family: 'SF-Pro-Display-Light';
     src: url('fonts/SF-Pro-Display-Light.OTF') format('opentype');
 }

 .light {
     font-family: 'SF-Pro-Display-Light', sans-serif;
     font-weight: 200;
 }

 @font-face {
     font-family: 'SFProDisplay-Medium';
     src: url('fonts/SFProDisplay-Medium.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
 }

 @font-face {
     font-family: 'SFProDisplay-Regular';
     src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype');
     font-weight: 400;
     font-style: normal;
 }

 .footer-col ul li {
     margin-bottom: 8px;
 }

 .custom-bgpiepagina {
     background-color: #f5f5f7;
     color: #333;
     font-family: 'SF-Pro-Display-Light', sans-serif;
     letter-spacing: 0.5px;
     position: relative;
     z-index: 2;
 }

 .custom-bgpiepagina h3 {
     font-family: 'SFPRODISPLAYREGULAR', sans-serif;
     font-weight: 400;
     font-size: 18px;
     margin-bottom: 15px;
     color: #000;
     letter-spacing: 0.5px;
 }


 .custom-bgpiepagina ul li a {
     display: block;
     text-decoration: none;
     color: #333;
     font-size: 15px;
     font-weight: 200;
     transition: color 0.3s;
 }

 .custom-bgpiepagina ul li a:hover {
     color: #0077cc;
 }

 .footer-col-offset {
     padding-top: 38px;
 }

 .img-edificio-bottom {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: auto;
     z-index: 0;
 }

 .img-piepagina {
     position: relative;
     z-index: 1;
     background: none;
     padding-bottom: 1rem;
 }

 .img-piepagina h3 {
     margin-bottom: 0.3rem;
     /* Reduce espacio debajo del título */
     line-height: 1;
     /* Ajusta la altura del texto */
 }

 .img-piepagina p {
     margin-bottom: 0.4px;
     /* Reduce espacio entre párrafos */
     line-height: 1.35;
     /* Compacta un poco las líneas */
 }

 .max-small {
     font-size: 12px;
 }

 .custom-close {
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 30px;
     color: black;
     background-color: white;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     text-align: center;
     line-height: 40px;
     cursor: pointer;
     z-index: 1056;
 }


 .modal-content {
     background-color: transparent;
     border: none;
     box-shadow: none;
 }

 body.modal-open {
     overflow: auto !important;
     padding-right: 0 !important;
     /* evita que se mueva el contenido */
 }

 #popupModal .modal-content img {
     width: 100%;
     height: auto;
     display: block;
 }