body,
html {
	margin: 0;
	padding: 0;
	height: 100%;
	color: rgb(17, 17, 17); /* Color de texto base */
	font-family: 'BrightlyStories', sans-serif; /* Fuente para el cuerpo del texto */
	font-weight: normal; /* Peso de la fuente para el cuerpo */
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: url('assets/img/puntero.png'), auto; /* Puntero personalizado */
}

/* Declaración de fuentes */
@font-face {
	font-family: 'BrightlyStories';
	src: url('../fonts/Titulos BrightlyStories.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BrightlyStories';
	src: url('../fonts/Titulos BrightlyStories') format('woff'); /* Fuente para el cuerpo */
	font-weight: normal;
	font-style: normal;
}

/* Estilo para títulos */
h1, h2, h3, h4, h5, h6 {
	font-family: 'BrightlyStories', sans-serif; /* Usa BrightlyStories para títulos */
	font-weight: bold; /* Negrilla opcional */
	color: #111; /* Color de los títulos */
}

/* Estilo para el cuerpo del texto */
p, li, span, body {
	font-family: 'Kattys', sans-serif; /* Usa BrightlyStories para el cuerpo */
	font-weight: normal;
	color: rgb(17, 17, 17); /* Color del texto del cuerpo */
}





/* Elementos destacados */

.highlight {
	font-family: 'Great Vibes', cursive;
	/* Fuente decorativa para textos destacados */
}

.background-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	overflow: hidden;
}

.background-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


header {
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 2;
	background-color: rgba(0, 0, 0, 0.5);
	/* Fondo transparente */
	padding: 10px 20px;
}


/* Contenedor del logo */
.logo-container {
    position: absolute;
    top: -60px; /* Ajusta esta distancia según el tamaño de la pantalla */
    left: 95px;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    display: flex; /* Opcional: Para alinear elementos dentro */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}
.logo-img {
    max-width: 115px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-left: 30px; /* Mueve más a la izquierda */
    margin-top: 60px; /* Baja el logo (valor general) */
    animation: jump 2s infinite; /* Añade la animación de salto */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
    .logo-container {
        top: -30px; /* Baja el logo para pantallas pequeñas */
        left: 10px; /* Alinea más a la izquierda */
    }
}

/* Ajustes para pantallas medianas */
@media (min-width: 577px) and (max-width: 768px) {
    .logo-container {
        top: -40px; /* Ajuste superior */
        left: 20px; /* Ajuste izquierdo */
    }
}

/* Ajustes para pantallas grandes (Portátiles) */
@media (min-width: 769px) and (max-width: 1600px) {
    .logo-container {
        top: -30px; /* Baja el logo ligeramente */
        left: 50px; /* Alineación en pantallas grandes */
    }
}

/* Ajustes para pantallas extra grandes (22 pulgadas o más) */
@media (min-width: 1600px) {
    .logo-container {
        top: -40px; /* Ajuste superior más alto */
        left: 100px; /* Más margen izquierdo */
    }
}


/* Animación de salto */
@keyframes jump {
    0%,
    100% {
        transform: translateY(0); /* Posición inicial y final */
    }
    50% {
        transform: translateY(-10px); /* Altura del salto */
    }
}




/* Fuente personalizada para el número de teléfono */

.phone-number {
	font-size: 1rem;
	/* Tamaño de la fuente del número */
}

.phone-icon {
	width: 20px;
	/* Ajusta el tamaño del ícono del teléfono */
	height: auto;
	margin-right: 8px;
	/* Espacio entre el ícono y el número */
}


/* Opcional: alinear verticalmente el ícono con el número */

.nav-link {
	display: flex;
	align-items: center;
}

.nav .nav-link {
	color: white;
	margin-left: 20px;
}

.nav .nav-link:hover {
	color: #ff6f61;
	/* Color del hover en los enlaces del menú */
}

.content {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.content h1 {
	font-size: 4em;
	margin-bottom: 20px;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
}

.content p {
	font-size: 1.2em;
	margin-bottom: 20px;
}

.btn-primary {
	background-color: #FFAF96;
	font-family: 'BrightlyStories', sans-serif; /* Fuente BrightlyStories */
	border: none;
	padding: 10px 20px;
	font-size: 1.2em;
	border-radius: 5px;
}

.btn-primary:hover {
	background-color: #ffa489;
}

/* Redes sociales (columna izquierda) */
.social-buttons {
	position: fixed;
	top: 45%; /* Centrado verticalmente */
	left: 10px; /* Alineado a la izquierda */
	transform: translateY(-50%); /* Corrección para centrar verticalmente */
	display: flex;
	flex-direction: column;
	gap: 10px; /* Espaciado reducido entre los botones */
	z-index: 1000; /* Asegura que esté sobre otros elementos */
}

.social-buttons a {
	display: block;
	width: 50px; /* Tamaño de los botones */
	height: 50px;
	transition: transform 0.3s ease;
}

.social-buttons a img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	cursor: pointer; /* Cambia el cursor para interacción */
}

.social-buttons a:hover {
	transform: scale(1.1); /* Efecto de hover */
}



/* Botón de Google Maps (icono inferior derecho) */
.bottom-right-image {
	position: fixed;
	bottom: 40px; /* Ajustado para estar cerca de WhatsApp */
	left: 12px;
	width: 50px;
	height: auto;
	z-index: 1000;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.bottom-right-image:hover {
	transform: scale(1.1); /* Efecto al pasar el mouse */
}


/* Botones de navegación (parte inferior) */
.navigation-buttons {
	position: fixed;
	bottom: 20px;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
	padding: 15px 0;
	display: flex;
	justify-content: center;
	z-index: 999; /* Justo debajo de elementos flotantes */
}

.navigation-buttons .btn {
    font-family: 'BrightlyStories', sans-serif;
    color: #1d1d1d;
    background: linear-gradient(to bottom, #ffcccc, #e68a8a); /* Fondo degradado */
    border: 1px solid #d66060;
    border-radius: 50px;
    padding: 10px 30px;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    
    /* Imagen de fondo */
    background-image: url('../assets/img/iconobutons.png'); /* Cambia por tu imagen */
    background-size: cover; /* Ajusta para que la imagen cubra todo el botón */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-position: center; /* Centra la imagen */
}

.navigation-buttons .btn:hover {
    transform: scale(1.05);
    background: linear-gradient(to bottom, #e68a8a, #ffcccc); /* Fondo degradado */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);

/* Ajustes responsivos */
@media (max-width: 768px) {
	.social-buttons a {
		width: 40px;
		height: 40px;
	}

	.whatsapp-button {
		bottom: 100px;
		width: 45px;
		height: 45px;
	}

	.bottom-right-image {
		bottom: 70px;
		width: 40px;
	}

	.navigation-buttons .btn {
		padding: 8px 20px;
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.social-buttons a {
		width: 35px;
		height: 35px;
	}

	.whatsapp-button {
		bottom: 80px;
		width: 40px;
		height: 40px;
	}

	.bottom-right-image {
		bottom: 60px;
		width: 35px;
	}

	.navigation-buttons .btn {
		padding: 6px 15px;
		font-size: 14px;
	}
}




/* Botones de navegación */

/* Estilo para los botones de navegación */
.navigation-buttons {
    width: 100%;
    margin-bottom: auto;
    background-color: rgba(0, 0, 0, 0.5); /* Fondo semi-transparente */
    padding: 15px 0; /* Espaciado interno */
    display: flex;
    justify-content: center;
    position: fixed; /* Fijar los botones en la parte inferior */
    bottom: 40px; /* Margen inferior */
    left: 0;
}

/* Botones personalizados */
.navigation-buttons .btn {
    font-family: 'BrightlyStories', sans-serif; /* Fuente BrightlyStories */
    color: #1d1d1d; /* Color del texto */
    background: linear-gradient(to bottom, #ffcccc, #e68a8a); /* Degradado de fondo */
    border: 1px solid #d66060; /* Borde del botón */
    border-radius: 50px; /* Bordes redondeados */
    padding: 10px 30px; /* Tamaño del botón */
    font-size: 18px; /* Tamaño del texto */
    font-weight: normal; /* Negrilla */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra para dar efecto de relieve */
    transition: all 0.3s ease; /* Transición para el hover */
}

/* Efecto al pasar el mouse */
.navigation-buttons .btn:hover {
    background: linear-gradient(to bottom, #e68a8a, #ffcccc); /* Cambio de degradado */
	font-family: 'BrightlyStories', sans-serif; /* Fuente BrightlyStories */
    transform: scale(1.05); /* Efecto de agrandar */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Ajustes responsivos para pantallas pequeñas */
@media (max-width: 576px) {
    .navigation-buttons .btn {
        padding: 8px 20px; /* Botones más pequeños */
        font-size: 1em; /* Texto más pequeño */
    }
}



/* Footer fijado en la parte inferior */

.footer {
	position: fixed;
	/* Fijado en la parte inferior */
	bottom: 0;
	/* Alineado en la parte inferior */
	left: 0;
	/* Alineado a la izquierda */
	width: 100%;
	/* Que ocupe todo el ancho */
	background-color: rgba(0, 0, 0, 0.7);
	/* Fondo semi-transparente */
	color: white;
	text-align: center;
	padding: 10px 0;
	/* Ajuste de altura */
	font-size: 0.9em;
	z-index: 1000;
	/* Asegura que esté encima del contenido */
}

.footer p {
	margin: 0;
	color: white;
	font-family: sans-serif;

	
}


/* Estilos para pantallas pequeñas (dispositivos móviles) */

@media (max-width: 768px) {
	.footer p {
		font-size: 0.5rem;
		/* Reducir el tamaño de la fuente en pantallas pequeñas */
		text-align: center;
		/* Centra el texto en pantallas pequeñas */
	}
}


/* Media Queries para hacerlo responsivo */


/* Ajustes para pantallas pequeñas (max-width: 768px) */

@media (max-width: 768px) {
	.content h1 {
		font-size: 2.5em;
		/* Reducir tamaño del título */
	}
	.content p {
		font-size: 1em;
		/* Reducir tamaño del texto */
	}
	.btn-primary {
		font-size: 1em;
		padding: 8px 16px;
		/* Ajustar tamaño del botón */
	}
	.logo img {
		height: 40px;
		/* Reducir tamaño del logo */
	}
	.social-buttons {
		left: 5px;
		/* Ajustar posición de los botones de redes sociales */
	}
	.social-buttons a {
		width: 40px;
		/* Ajustar tamaño de los botones de redes sociales */
		height: 40px;
	}
	.navigation-buttons {
		bottom: 30px;
		/* Ajustar botones para pantallas pequeñas */
	}
	.navigation-buttons .btn {
		font-size: 0.9em;
		/* Ajustar tamaño de los botones de navegación */
		padding: 8px 16px;
	}
	.whatsapp-button img {
		width: 50px;
		/* Reduce el tamaño del botón en pantallas medianas */
		height: 50px;
	}
}


/* Ajustes para pantallas muy pequeñas (max-width: 576px) */

@media (max-width: 576px) {
	.content h1 {
		font-size: 2em;
		/* Aún más pequeño para pantallas extra pequeñas */
	}
	.content p {
		font-size: 0.9em;
	}
	.btn-primary {
		font-size: 0.9em;
		padding: 6px 12px;
		/* Reducir aún más el tamaño del botón */
	}
	.social-buttons a {
		width: 35px;
		/* Ajustar tamaño de los botones de redes sociales para pantallas muy pequeñas */
		height: 35px;
	}
	.navigation-buttons {
		bottom: 20px;
		/* Ajustar botones para pantallas muy pequeñas */
	}
	.navigation-buttons .btn {
		font-size: 0.8em;
		padding: 6px 12px;
	}
	.modal-content {}
}

.modal-body p {
	text-align: justify;
	/* Centra horizontalmente el texto */
	text-align: center;
	margin: 80px 150px;
	/* 20px arriba y abajo, 40px a la izquierda y derecha */
	padding: 1em 0;
	/* Añade espacio superior e inferior interno */
	line-height: 1.6;
	/* Mejora la legibilidad con un interlineado mayor */
}

.modal-bodyy p {
	text-align: justify; /* Justifica el texto */
	font-family: 'Kattys', sans-serif;
	font-weight: bold;
	margin: 20px 10px; /* Reduce márgenes externos para más espacio */
	padding: 2em 1.5em; /* Aumenta el espaciado interno */
	line-height: 1.6; /* Espaciado entre líneas */
	font-size: 22px !important; /* Tamaño del texto */
	background: linear-gradient(135deg, rgba(255, 205, 210, 0.8), rgba(255, 235, 238, 0.8)); /* Gradiente rosado suave */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Sombra ligera */
	border-radius: 15px; /* Aumenta los bordes redondeados */
	animation: slideUpFade 1s ease; /* Animación de entrada */
	color: #0f0f0f !important; /* Color del texto */
	width: 95%; /* Expande el ancho del cuadro */
	max-width: 100%; /* Permite que el cuadro crezca */
}



/* Nueva animación: deslizamiento desde abajo con fade-in */

@keyframes slideUpFade {
	from {
		opacity: 0;
		/* Comienza invisible */
		transform: translateY(20px);
		/* Inicia más abajo */
	}
	to {
		opacity: 1;
		/* Aparece gradualmente */
		transform: translateY(0);
		/* Regresa a su posición original */
	}
}


/* Estilos para pantallas pequeñas */

@media (max-width: 768px) {
	.modal-bodyy p {
		margin: 20px 10px;
		/* Ajusta los márgenes */
		font-size: 14px;
		/* Reduce el tamaño de fuente */
		line-height: 1.8;
		/* Aumenta el interlineado */
	}
}





.modal-content {
	border-radius: 15px;
	box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}
.modal-header {
    display: flex !important; /* Flexbox para centrar */
    justify-content: center !important; /* Centra horizontalmente */
    align-items: center !important; /* Centra verticalmente */
    background: linear-gradient(to bottom, #ffcccc, #e68a8a) !important; /* Degradado de fondo */
    border: 1px solid #d66060 !important; /* Borde del encabezado */
    border-top-left-radius: 15px !important; /* Bordes redondeados */
    border-top-right-radius: 15px !important; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important; /* Sombra para dar efecto de relieve */
    padding: 10px 15px !important; /* Espaciado interno */
    position: relative !important; /* Necesario para posicionar el botón */
    transition: all 0.3s ease !important; /* Transición para el hover */
}

/* Efecto al pasar el mouse */
.modal-header:hover {
    background: linear-gradient(to bottom, #e68a8a, #ffcccc) !important; /* Cambio de degradado */
    transform: scale(1.02) !important; /* Efecto de agrandar */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra más intensa */
}

.modal-title {
    font-family: 'BrightlyStories', sans-serif !important; /* Fuente personalizada */
    font-size: 1.5rem !important; /* Tamaño del texto */
    font-weight: bold !important; /* Negrilla */
    text-align: center !important; /* Centra el texto horizontalmente */
    color: #1d1d1d !important; /* Color del texto */
    margin: 0 !important; /* Elimina márgenes adicionales */
    flex: 1 !important; /* Asegura que el título ocupe todo el espacio disponible */
}

.modal-header .btn-close {
    position: absolute !important; /* Saca el botón del flujo */
    right: 15px !important; /* Posición a la derecha */
    top: 50% !important; /* Centra verticalmente */
    transform: translateY(-50%) !important; /* Ajusta el centrado vertical */
    z-index: 1 !important; /* Asegura que el botón esté visible */
}

/* Fondo del modal-body */
.modal-body {
	padding: 20px;
	text-align: center;
	color: white; /* Cambia el texto a blanco */
	background: linear-gradient(145deg, #2c2c2c, #3d3d3d); /* Degradado oscuro */
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5), 0px -4px 15px rgba(255, 255, 255, 0.1); /* Efecto de profundidad */
	border-radius: 20px; /* Bordes redondeados más suaves */
	position: relative; /* Contiene el overlay detrás */
	overflow: hidden; /* Asegura que el contenido no se desborde */
}


/* Asegurar que las imágenes y videos estén sobre el overlay */
.modal-body .carousel-inner {
	position: relative;
	z-index: 2; /* Más alto que el overlay */
}

.modal-body img,
.modal-body video {
	border-radius: 15px; /* Bordes redondeados */
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); /* Sombra ligera */
	position: relative;
	z-index: 2; /* Por encima del overlay */
}






/* Aplica la animación al modal */

.modal-content {
	border-radius: 25px;
	/* Bordes redondeados */
	animation: balloon 0.5s ease;
	/* Aplica la animación al abrir */
	overflow: hidden;
	/* Asegura que no se desborde contenido */
	padding: 20px;
	/* Espacio interior para un mejor diseño */
}


/* Opcional: estiliza la sombra para un efecto de profundidad */

.modal-content {
	box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3);
}


/* Suaviza la entrada de los elementos dentro del modal */

.modal.fade .modal-dialog {
	transition: all 0.5s ease;
}


/* Modal con tamaño personalizado */

.custom-modall {
	max-width: 980px;
	/* Ancho personalizado */
}

.custom-modall .modal-content {
	height: 580px;
	/* Alto del modal */
}


/* Modal con tamaño personalizado */

.custom-modal {
	max-width: 1200px;
	/* Ancho personalizado */
}




.custom-modal .modal-content {
	height: 650px;
	/* Alto del modal */
}



.custom-modal .modal-bodyinstalaciones {
	height: calc(100% - 56px); /* Restar el alto del header (56px) */
	overflow-y: auto; /* Activar el scroll vertical */
	padding: 20px;
	background-image: url('/assets/img/imginstalaciones1.jpg'); /* Imagen de fondo */
	background-size: cover; /* Asegura que cubra todo el contenedor */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	border-radius: 15px; /* Bordes redondeados */
	position: relative; /* Necesario para el pseudo-elemento */
}

/* Capa con desenfoque leve */
.custom-modal .modal-bodyinstalaciones::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1); /* Fondo muy sutil (opcional) */
	backdrop-filter: blur(3px); /* Leve desenfoque */
	opacity: 0.95; /* Mantiene casi toda la opacidad */
	z-index: 1; /* Detrás del contenido */
	border-radius: 15px; /* Bordes redondeados */
}

/* Asegurar que el contenido esté encima del desenfoque */
.custom-modal .modal-bodyinstalaciones > * {
	position: relative;
	z-index: 2; /* Por encima del pseudo-elemento */
}



.custom-modal .modal-bodynosotros {
	height: calc(100% - 56px); /* Restar el alto del header (56px) */
	overflow-y: auto; /* Activar el scroll vertical */
	padding: 20px;
	background-image: url('/assets/img/Fondonosotros.jpg'); /* Imagen de fondo */
	background-size: cover; /* Asegura que cubra todo el contenedor */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	border-radius: 15px; /* Bordes redondeados */
	position: relative; /* Necesario para el pseudo-elemento */
}

/* Capa con desenfoque leve */
.custom-modal .modal-bodynosotros::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1); /* Fondo muy sutil (opcional) */
	backdrop-filter: blur(3px); /* Leve desenfoque */
	opacity: 0.95; /* Mantiene casi toda la opacidad */
	z-index: 1; /* Detrás del contenido */
	border-radius: 15px; /* Bordes redondeados */
}

/* Asegurar que el contenido esté encima del desenfoque */
.custom-modal .modal-bodynosotros > * {
	position: relative;
	z-index: 2; /* Por encima del pseudo-elemento */
}


.custom-modal .modal-bodybeneficios {
	height: calc(100% - 56px); /* Restar el alto del header (56px) */
	overflow-y: auto; /* Activar el scroll vertical */
	padding: 20px;
	background-image: url('/assets/img/Fondobeneficios.jpg'); /* Imagen de fondo */
	background-size: cover; /* Asegura que cubra todo el contenedor */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	border-radius: 15px; /* Bordes redondeados */
	position: relative; /* Necesario para el pseudo-elemento */
}

/* Capa con desenfoque leve */
.custom-modal .modal-bodybeneficios::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1); /* Fondo muy sutil (opcional) */
	backdrop-filter: blur(3px); /* Leve desenfoque */
	opacity: 0.95; /* Mantiene casi toda la opacidad */
	z-index: 1; /* Detrás del contenido */
	border-radius: 15px; /* Bordes redondeados */
}

/* Asegurar que el contenido esté encima del desenfoque */
.custom-modal .modal-bodybeneficios > * {
	position: relative;
	z-index: 2; /* Por encima del pseudo-elemento */
}


.custom-modal .modal-bodyformacion {
	height: calc(100% - 56px); /* Restar el alto del header (56px) */
	overflow-y: auto; /* Activar el scroll vertical */
	padding: 20px;
	background-image: url('/assets/img/Fondoformacion.jpg'); /* Imagen de fondo */
	background-size: cover; /* Asegura que cubra todo el contenedor */
	background-position: center; /* Centra la imagen */
	background-repeat: no-repeat; /* Evita que se repita */
	border-radius: 15px; /* Bordes redondeados */
	position: relative; /* Necesario para el pseudo-elemento */
}

/* Capa con desenfoque leve */
.custom-modal .modal-bodyformacion::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1); /* Fondo muy sutil (opcional) */
	backdrop-filter: blur(3px); /* Leve desenfoque */
	opacity: 0.95; /* Mantiene casi toda la opacidad */
	z-index: 1; /* Detrás del contenido */
	border-radius: 15px; /* Bordes redondeados */
}

/* Asegurar que el contenido esté encima del desenfoque */
.custom-modal .modal-bodyformacion > * {
	position: relative;
	z-index: 2; /* Por encima del pseudo-elemento */
}
.custom-image {
	max-width: 500px;
	/* Máximo ancho permitido */
	max-height: 500px;
	/* Máximo alto permitido */
	width: 100%;
	/* Asegura que la imagen sea responsiva */
	height: auto;
	/* Mantiene la proporción */
	object-fit: cover;
	/* Ajusta la imagen sin deformarla */
	border-radius: 10px;
	/* Opcional: añade bordes redondeados */
}

.custom-image-modal {
	max-width: 150px;
	/* Máximo ancho permitido */
	max-height: 150px;
	/* Máximo alto permitido */
	width: 100%;
	/* Asegura que la imagen sea responsiva */
	height: auto;
	/* Mantiene la proporción */
	object-fit: cover;
	/* Ajusta la imagen sin deformarla */
	border-radius: 10px;
	/* Bordes redondeados */
	margin-bottom: -10px;
	/* Ajusta el margen inferior para subir la imagen */
	position: relative;
	/* Asegura que los ajustes de posición funcionen */
	top: -20px;
	/* Mueve la imagen hacia arriba */
}

.custom-paragraph {
	max-width: 100% !important; /* Permite que ocupe todo el ancho del cuadro */
	line-height: 1.6 !important; /* Mejora el espaciado entre líneas */
	font-size: 16px !important; /* Ajusta el tamaño del texto para mayor legibilidad */
	text-align: justify !important; /* Justifica el texto */
	color: #333 !important; /* Color neutro para buen contraste */
	margin: 0 auto !important; /* Centra el texto verticalmente */
	padding: 1em !important; /* Añade un pequeño espacio interno */
}


@media (max-width: 768px) {
	.custom-paragraph {
		max-width: 90%;
		/* Aprovecha mejor el espacio horizontal */
		max-height: 80vh;
		/* Aumenta la altura visible en el modal */
		margin: 10px auto;
		/* Centra el texto horizontal y añade margen superior */
		line-height: 1.6;
		/* Espaciado entre líneas adecuado */
		font-size: 0.9rem;
		/* Tamaño de texto ajustado */
		padding: 0 15px;
		/* Espaciado interno para evitar bordes */
		word-break: break-word;
		/* Rompe palabras largas */
		word-spacing: normal;
		/* Espaciado normal entre palabras */
		hyphens: auto;
		/* Permite dividir palabras si es necesario */
		text-align: justify;
		/* Justifica el texto */
		overflow-y: auto;
		/* Permite desplazamiento si el texto excede la altura */
	}
	.modal-body {
		padding: 10px 20px;
		/* Ajusta el relleno interno del modal */
		max-height: 75vh;
		/* Incrementa la altura visible del modal */
		overflow-y: auto;
		/* Permite el desplazamiento vertical si es necesario */
	}
}

@media (min-width: 769px) {
	.custom-paragraph {
		max-width: 80%;
		/* Mantiene el texto dentro de un ancho razonable */
		margin: 20px auto;
		/* Centra y añade margen superior */
		text-align: justify;
		/* Justifica el texto */
		line-height: 1.8;
		/* Espaciado mayor para mejor legibilidad */
	}
}




/* BENEFICIOS -------------------------------- */

.modal-body {
	position: relative;
	height: auto;
	/* Altura dinámica */
	z-index: 1;
	padding: 20px;
	/* Espaciado interno */
	display: flex;
	justify-content: center;
	/* Centra horizontalmente */
	align-items: center;
	/* Centra verticalmente */
	flex-direction: column;
	/* Columnas en pantallas pequeñas */
	min-height: 60vh;
	/* Altura mínima */
}

.circles-container {
	display: flex;
	flex-wrap: wrap;
	/* Ajusta en varias filas si es necesario */
	justify-content: center;
	/* Centra los círculos horizontalmente */
	gap: 20px;
	/* Espaciado entre los círculos */
	position: relative;
	height: auto;
	/* Altura automática */
}

.circle {
	position: relative;
	/* Necesario para posicionar el título */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 210px;
	/* Tamaño inicial del círculo */
	height: 210px;
}

.circle-title {
	position: absolute;
	top: -90%;
	/* Mueve el título arriba del círculo */
	left: -20%;
	/* Centra horizontalmente */
	transform: translateX(-50%);
	/* Centrado ajustado */
	color: #ffffff;
	/* Color del texto */
	font-family: BrightlyStories;
	font-size: 20px;
	font-weight: normal;
	/* Negrita */
	text-align: center;
	pointer-events: none;
	/* El título no bloquea clics en el círculo */
	z-index: 1;
	/* Encima del círculo */
}

.circle-shape {
	width: 100%;
	/* Ajustado al contenedor */
	height: 100%;
	border-radius: 50%;
	background-size: 83%;
	/* Asegura que la imagen cubra todo el círculo */
	background-position: center;
	/* Centra la imagen dentro del círculo */
	background-repeat: no-repeat;
	/* Evita que la imagen se repita */
	transition: transform 0.3s, background-color 0.3s;
	/* Transición suave */
	border: 2px solid pink;
}


/* Imagen de fondo específica para cada círculo */

.circle-shape.circle1 {
	background-image: url('/assets/img/juguetes.png');
	/* Ruta de la imagen */
}

.circle-shape.circle2 {
	background-image: url('/assets/img/financiacion.png');
}

.circle-shape.circle3 {
	background-image: url('/assets/img/Psicologia.png');
}

.circle-shape.circle4 {
	background-image: url('/assets/img/Alianzas.png');
}


/* Efecto hover */

.circle:hover .circle-shape {
	transform: scale(1.1);
	/* Efecto de aumento */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
	/* Sombra en el hover */
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1100;
}

.popup-content {
	background: white;
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	width: 90%;
	max-width: 500px;
}

@media (max-width: 480px) {
	.circles-container {
		flex-direction: column; /* Mantiene los círculos en columna */
		align-items: flex-start; /* Alinea los círculos a la izquierda */
		gap: 10px; /* Espaciado entre los círculos */
		padding-left: 0px; /* Reduce el relleno del contenedor para acercarlo más a la izquierda */
		margin-left: -15px; /* Mueve todo el contenedor hacia la izquierda */
	}

	.circle {
		width: 93px; /* Tamaño de los círculos */
		height: 93px;
		margin-left: -20px; /* Mueve los círculos más a la izquierda */
	}

	.circle-title {
		top: -50%; /* Ajusta la posición del título */
		font-size: 10px; /* Tamaño del texto */
		text-align: left; /* Alinea el texto a la izquierda */
		left: -30%; /* Corre el texto aún más a la izquierda */
	}

	.circle-shape {
		width: 100%; /* Tamaño completo del círculo */
		height: 100%;
		background-size: 75%; /* Tamaño del contenido dentro del círculo */
	}
}


/* Ajuste del tamaño del video en forma vertical */

.custom-video {
    width: 100%; /* Asegura que el ancho ocupe todo el contenedor */
    max-height: 65vh; /* Limita la altura máxima en dispositivos más grandes */
    object-fit: contain; /* Ajusta el video dentro del contenedor, manteniendo proporciones */
    margin: 0 auto; /* Centra el video si es necesario */
    border-radius: 10px; /* (Opcional) Para darle un diseño más suave */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* (Opcional) Agrega una sombra para resaltar el video */
}

@media (max-width: 768px) {
    .custom-video {
        width: 100%; /* Ajusta el ancho para pantallas pequeñas */
        max-height: 50vh; /* Reduce la altura máxima en dispositivos móviles */
        object-fit: contain; /* Ajuste para pantallas pequeñas */
    }
}



/* Ajustar las flechas del carrusel */

.carousel-control-prev,
.carousel-control-next {
	width: 8%;
	/* Ajusta el área clickeable de las flechas */
}

.carousel-control-prev {
	left: -50px;
	/* Aleja la flecha izquierda del contenido */
}

.carousel-control-next {
	right: -50px;
	/* Aleja la flecha derecha del contenido */
}


/* Asegura que no haya restricciones de pantalla completa */

.carousel,
.carousel-inner,
.carousel-item,
.modal-body {
	overflow: visible !important;
}


/* Contenedor principal */

.programs-container {
	display: flex;
	justify-content: center;
	/* Centra los cuadros horizontalmente */
	align-items: center;
	/* Centra verticalmente en su contenedor */
	flex-wrap: wrap;
	/* Permite reorganizarse en pantallas pequeñas */
	gap: 10px;
	/* Espacio entre cuadros */
	padding: 10px;
	/* Espaciado interno */
}


/* Cuadro individual */

.program-card {
	width: 50%;
	/* Ancho ajustado para una distribución limpia */
	min-width: 220px;
	/* Ancho mínimo */
	height: auto;
	/* Ajusta la altura automáticamente */
	padding: 20px;
	/* Espaciado interno */
	border: 2px solid #f7c6d9;
	/* Borde rosa */
	border-radius: 10px;
	/* Bordes redondeados */
	background-color: #fff;
	/* Fondo blanco */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	/* Sombra ligera */
	display: flex;
	flex-direction: column;
	/* Alineación vertical */
	justify-content: center;
	/* Centra verticalmente el contenido */
	align-items: center;
	/* Centra horizontalmente el contenido */
	text-align: justify;
	/* Justifica el texto */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	/* Efecto hover */
}


/* Efecto hover */

.program-card:hover {
	transform: scale(1.05);
	/* Aumenta ligeramente el tamaño al pasar el mouse */
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
	/* Sombra más fuerte */
}


/* Títulos */

.program-card h5 {
	font-size: 20px;
	/* Tamaño del título */
	margin-bottom: 10px;
	/* Separación entre título y texto */
	color: #AA336A;
	/* Color del título */
	text-align: center;
	/* Centra el título */
	font-weight: normal;
}


/* Texto dentro de los cuadros */

.program-card p {
	font-size: 22px; /* Tamaño del texto actualizado */
	text-align: justify; /* Justifica el texto */
	text-align-last: left; /* Alinea la última línea a la izquierda */
	font-weight: bold; /* Negrita */
	line-height: 1.6; /* Espaciado entre líneas */
	color: #333; /* Color del texto */
	margin: 0 auto; /* Centra el bloque de texto */
	max-width: 100%; /* Reduce el ancho máximo del texto */
	word-spacing: normal; /* Ajuste del espaciado entre palabras */
	hyphens: auto; /* Permite dividir palabras con guiones */
	overflow-wrap: break-word; /* Evita que palabras largas rompan el diseño */
}


/* Responsividad para pantallas más pequeñas */

@media (max-width: 480px) {
	.program-card {
		width: 70%;
		/* Reduce el ancho en móviles pequeños */
		padding: 10px;
		/* Reduce el espaciado interno */
		margin-bottom: 10px;
		/* Espaciado inferior más compacto */
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		/* Sombra más sutil */
	}
	.program-card h5 {
		font-size: 12px;
		/* Títulos más pequeños */
		margin-bottom: 6px;
		/* Espaciado más compacto debajo del título */
		text-align: center;
		/* Centra el título */
	}
	.program-card p {
		font-size: 12px;
		/* Texto más compacto */
		line-height: 1.4;
		/* Espaciado entre líneas ajustado */
		text-align: justify;
		/* Justifica el texto */
		text-align-last: left;
		/* Alinea la última línea a la izquierda */
		word-spacing: -1px;
		margin: 0;
		/* Elimina márgenes innecesarios */
		hyphens: auto;
		/* Permite dividir palabras largas */
		overflow-wrap: break-word;
		/* Evita desbordamiento de palabras largas */
	}
}








/* Estilos del popup */
.age-verification-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8); /* Fondo oscuro semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Asegura que esté por encima de todo */
}

.popup-content {
    background: linear-gradient(135deg, rgba(255, 205, 210, 1), rgba(255, 235, 238, 1)); /* Degradado rosado suave */
    padding: 20px; /* Espaciado interno */
    border-radius: 10px; /* Bordes redondeados */
    max-width: 400px; /* Ancho máximo */
    text-align: center; /* Centra el contenido */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra más suave */
    color: #333; /* Color del texto */
    overflow: hidden; /* Asegura que el contenido no se desborde */
}


.popup-content h2 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.popup-content p {
	font-size: 24px; /* Tamaño del texto */
	margin-bottom: 10px; /* Reduce el margen inferior */
	font-weight: bold; /* Texto en negrita */
	text-align: justify; /* Justifica el texto */
	line-height: 1.3; /* Reduce el espacio entre líneas */
}

.popup-content .buttons {
    display: flex;
    justify-content: space-evenly;
}

.popup-content .btn-age-confirm,
.popup-content .btn-age-deny {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.popup-content .btn-age-confirm {
    background-color: #28a745;
    color: #fff;
}

.popup-content .btn-age-deny {
    background-color: #dc3545;
    color: #fff;
}




/* Botón de cerrar */
button.close-popup-button {
	background: linear-gradient(135deg, #ff7f7f, #ff4c4c); /* Degradado en tonos rojos */
	color: white; /* Texto en blanco */
	font-size: 16px; /* Tamaño del texto */
	font-weight: bold; /* Negrita */
	border: none; /* Sin bordes */
	border-radius: 50px; /* Bordes completamente redondeados */
	padding: 10px 20px; /* Tamaño del botón */
	cursor: pointer; /* Cursor de puntero */
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Sombra ligera */
	transition: all 0.3s ease; /* Transición para hover y active */
}

/* Efecto al pasar el mouse */
button.close-popup-button:hover {
	background: linear-gradient(135deg, #ff4c4c, #ff1a1a); /* Cambia el degradado al pasar el mouse */
	transform: scale(1.05); /* Aumenta ligeramente el tamaño */
	box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* Sombra más intensa */
}

/* Efecto al hacer clic */
button.close-popup-button:active {
	transform: scale(0.95); /* Efecto de clic */
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* Sombra reducida */
}
}