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;
}

 .sopa-letras {
     scroll-margin-top: clamp(5rem, 9vw, 7.5rem) !important;
 }

 /* margen de anclaje*/
 .titulos-general {
     scroll-margin-top: clamp(3.5rem, 7vw, 6rem);
 }

 .sticky-menu {
     z-index: 1000 !important;
     position: sticky;
     top: 0;
     background: #defbcf;
     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 */
     }
 }

 .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 */
 }

 .enlaces-secundarios {
     padding-top: 2.7rem;
 }

 .carousel-indicators {
     position: absolute;
     bottom: 20px;
     /* Súbelos un poco más si aún quedan muy abajo */
     left: 50%;
     transform: translateX(-50%);
     z-index: 15;
     display: flex !important;
     justify-content: center;
     align-items: center;
     gap: 10px;
     margin: 0;
     padding: 0;
 }

 .carousel-indicators button {
     width: 30px;
     height: 4px;
     border-radius: 2px;
     background-color: black !important;
     background-image: none !important;
     border: none;
     opacity: 0.5;
     filter: none !important;
     transition: opacity 0.3s ease;
 }

 .carousel-indicators .active {
     opacity: 1;
 }


 .carousel-control-prev-icon,
 .carousel-control-next-icon {
     filter: invert(40%) sepia(100%) saturate(500%) hue-rotate(230deg);
 }

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

 .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;
 }

 .pedagogico {
     padding-bottom: 3%;
 }

 .texto-soporte {
     display: inline-block;
     transform-origin: left center;
     z-index: 10;
     position: relative;
     font-size: clamp(1rem, 1.8vw, 2rem);
     font-family: "SF Pro Display", sans-serif;
     font-weight: 400;
     text-align: start;
     line-height: 1.3;
 }

 .texto-soporte .bold {
     font-weight: 700;
 }

 .contenedor-izquierdo,
 .contenedor-derecho {
     overflow: hidden;
 }

 .contenedor-animado {
     position: relative;
     width: 100%;
     aspect-ratio: 1 / 1;

 }

 .small-biblioteca {
     width: 80%;
 }

 /* Fondo sombra */
 .small-sombra {
     position: absolute;
     top: 13%;
     left: 0%;
     width: 100%;
     /* relativo al contenedor */
     height: auto;
     z-index: 1;
 }

 /* Mano encima */
 .small-mano {
     position: absolute;
     top: 25%;
     /* ajusta según lo que necesites */
     left: 23%;
     width: 70%;
     /* también escalable */
     height: auto;
     z-index: 2;
 }

 .small-encima {
     position: absolute;
     top: 6%;
     left: 84%;
     width: 20%;
     /* relativo al contenedor */
     height: auto;
     z-index: 4;
 }

 .small-mancha {
     position: absolute;
     top: 6%;
     left: 85%;
     width: 100%;
     /* relativo al contenedor */
     height: auto;
     z-index: 3;
 }

 html {
     overflow-x: hidden;
 }

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

 .icono-con-fondo2:hover {
     background-color: #99cd7d;
 }

 .icono-con-fondo2 {
     display: block;
     /* Hace que el fondo abrace la imagen */
     background-color: #defbcf;
     border-radius: 15px;
     transition: background-color 0.3s ease;
 }

 .icono-con-fondo2 img {
     width: 100%;
     height: auto;
 }

 .icono-con-fondo3 {
     display: block;
     /* Hace que el fondo abrace la imagen */
     background-color: #e4efff;
     border-radius: 15px;
     transition: background-color 0.3s ease;
 }

 .icono-con-fondo3 img {
     width: 100%;
     height: auto;
 }

 .icono-con-fondo3:hover {
     background-color: #a9c9ff;
 }

 .icono-con-fondo4 {
     display: block;
     /* Hace que el fondo abrace la imagen */
     background-color: #dee3cf;
     border-radius: 15px;
     transition: background-color 0.3s ease;
 }

 .icono-con-fondo4 img {
     width: 100%;
     height: auto;
 }

 .icono-con-fondo4:hover {
     background-color: #adbfa3;
 }

 .icono-con-fondo4.no-hover {
     pointer-events: none;
 }

 .icono-con-fondo4.no-hover:hover {
     background-color: #dee3cf;
     cursor: default !important;
 }

 .icono-con-fondo {
     display: inline-block;
     /* Hace que el fondo abrace la imagen */
     background-color: #fffff2;
     /* Fondo */
     border-radius: 15px;
     /* Bordes redondeados */
     transition: background-color 0.3s ease;
 }

 .icono-con-fondo img {
     display: block;
     /* Evita espacio raro debajo de la img */
     width: 100%;
     /* Mantiene el ancho dentro del bloque */
     height: auto;
     /* Mantiene proporción */
 }

 .icono-con-fondo:hover {
     background-color: #ffd86e;
     /* Un tono diferente al pasar el mouse */
 }


 .linea-lapiz {
     width: 13%;
     margin-top: -13%;
     margin-left: 60%;

 }

 @media (max-width: 576px) {
     .linea-lapiz {
         margin-top: -16%;
         margin-left: 60%;
     }
 }

 .linea-separadora {
     text-align: center;
     margin-top: -7%;
     background-size: cover;
 }

 @media (max-width: 767px) {
     .image-content2 {
         order: 2;
         /* Imagen lateral abajo */
     }

     .map-btn-2 img {
         width: 100%;
         height: 100%;
         object-fit: contain;
     }

     .desplazar-arriba {
         transform: translateY(-3px);
     }
 }

 .small-robot {
     max-width: none;
     width: 75%;
 }

 .small-img {
     max-width: none;
     width: 140%;
 }

 @media (max-width: 767px) {
     .small-img {
         max-width: 40%;
         /* más pequeñas */
         margin: 0 auto;
         /* Centrado si hace falta */
         display: block;
         transform: translate(90px, -95px);

     }
 }

 .desplazar-arriba {
     transform: translateY(-17px);
     /* Mueve hacia arriba 20px */
 }

 .map-container {
     position: relative;
 }

 .map-container2 {
     max-width: 65%;
     margin-left: 10%;
 }

 @media (max-width: 768px) {
     .map-container2 {
         max-width: 100%;
         margin-left: 0%;
     }
 }

 .map-btn-2 {
     position: absolute;
     width: 20%;
     height: 5.8%;
     cursor: pointer;
     transform: translate(-50%, -50%);
     background: transparent;
     border: none;
     transition: background-color 0.3s;

 }

 .map-btn-2:hover {
     transform: translate(-50%, -50%) scale(2.5);
     /* escala un 10% más grande */
 }

 .map-btn-2 img {
     width: 100%;
     height: auto;
     object-fit: contain;
     /* asegura que la imagen encaje sin deformarse */
     display: block;
     opacity: 1;
     /* efecto de marca de agua */
     transition: opacity 0.3s ease;
 }

 .map-btn-2 img.activo {
     opacity: 1;
     /* cuando está seleccionado */
 }

 .programas-title {
     padding-top: clamp(1rem, 2vw, 4rem);

     /* permite que el h1 salga si escala */
     position: relative;
 }

 .menu-title {
     display: inline-block;
     transform-origin: left center;
     z-index: 10;
     position: relative;
     font-size: clamp(0.75rem, 1.66vw, 1.66rem);
     font-family: "SF Pro Display", sans-serif;
     font-weight: 400;
     text-align: start;
     line-height: 0.9;
 }

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

 .titulos-general .light {
     font-weight: 400;
 }

 .custom-bg {
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     background-image: url("/images/nuevoproyecto/fotoportada.svg");
     width: 100%;
     padding-top: 3rem;
 }

 @media (max-width: 576px) {
     .custom-bg {
         padding-top: 0;
     }
 }

 .fototrio {
     background: url("/images/nuevoproyecto/fotoplan4.svg");
     width: 100%;
     background-repeat: no-repeat;
     background-position: center 30px;
     background-size: 80%;
 }

 .custom-bg-rayas {
     background-size: 100% 100%;
     background: url("/images/nuevoproyecto/fondoplan2.svg");
     width: 100%;
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
 }

 .custom-bg-azul {
     background-size: 100% 100%;
     background: url("/images/nuevoproyecto/fondo2.svg");
     width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     margin-top: -8%;

 }

 .custom-bg-azul2 {
     background-size: 100% 100%;
     background: #defbcf;
     width: 100%;
     background-repeat: no-repeat;
     background-size: cover;

 }

 .base-1 {
     background-image: transparent;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     width: 100%;
 }

 .espacio-dinamico {
     padding-bottom: clamp(4rem, 40vw, 80rem);
 }

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

 .espacio-dinamico3 {
     padding-bottom: 42%;
 }

 .custom-bg-papel {
     background: #FFFFF2;
     width: 100%;
     padding-top: 3rem;
 }

 @media (max-width: 576px) {
     .custom-bg-papel {
         padding-top: 0.1rem;
     }
 }

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

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




 #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;
 }

 .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;
 }

 @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;
 }

 .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;
 }