body {
   margin: 0;
   font-family: 'Montserrat', sans-serif;
   background-color: #f5f5f5;
   /* Fondo claro para contraste */
}

* {
   font-family: 'Montserrat', sans-serif;
}

/* titulo */
#titulo {
   /* Tipografía */
   font-family: 'Montserrat', sans-serif;
   /* Usar una fuente moderna */
   font-size: 2.5rem;
   /* Tamaño responsivo */
   font-weight: 700;
   line-height: 1.3;
   text-align: center;
   color: #2c3e50;
   /* Color oscuro profesional */
   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
   /* Sutil sombra para legibilidad */

   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
   border-radius: 12px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

   /* Borde decorativo */
   border-left: 5px solid #3498db;
   /* Azul profesional */
}

/* Estado visible (cuando ScrollMagic active la clase) */
#titulo.visible {
   opacity: 1;
   transform: translateY(0);
}

#datos {
   font-size: 16px;
}

#datos>p:first-of-type {
   font-family: 'Montserrat', sans-serif;
   font-size: 1.5rem;
   font-weight: 600;
   color: #2c3e50;
   text-align: center;
   margin-bottom: 1rem;
   position: relative;
   padding-bottom: 1rem;
}

#datos>p:first-of-type::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 3px;
   background: linear-gradient(90deg, #3498db, #9b59b6);
   border-radius: 3px;
}

#datos h3 {

   color: #3498db;
   margin: 0rem 0 0rem;
   font-size: 1.2rem;
   font-weight: 600;
}

#datos ul {
   margin: 1rem 0;
   padding-left: 1rem;
   text-align: left;
}

#datos li {
   position: relative;
   padding-left: 1.8rem;
   list-style-type: disclosure-closed;
}

/* Contenedor del fondo (ocupa toda la pantalla) */
.background-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   /* Detrás del contenido */
}

/* Fondos por sección */
.background {
   position: absolute;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   background-size: cover;
   background-position: center;
}

/* Fondos personalizados (colores o imágenes) */
.background[data-section="titulo"] {
   background-color: #51a1f6;
   /* Color claro */
   background-image: url('imagen/entrada.png');
}

.background[data-section="datos"] {
   background-color: #ece49c;
   background-image: url('imagen/servicios.png');
}

.background[data-section="proceso"] {
   background-color: #ca1b35;
   background-image: url('imagen/intervencion_psico.png');
}

.background[data-section="entrevista"] {
   background-color: #e8f5e9;
   background-image: url('imagen/entrevista.png');
}

.background[data-section="docente"] {
   background-color: #e8f5e9;
   background-image: url('imagen/entrevista_docente.png');
}

.background[data-section="e_alumno"] {
   background-color: #e8f5e9;
   background-image: url('imagen/e_alumno.png');
}

.background[data-section="entrevista_especialistas"] {
   background-color: #e8f5e9;
   background-image: url('imagen/entrevista_4.png');
}

.background[data-section="evaluar_rendimiento"] {
   background-color: #e8f5e9;
   background-image: url('imagen/evaluar_4.png');
}

.background[data-section="analisis_resultados"] {
   background-color: #e8f5e9;
   background-image: url('imagen/analisis.png');
}

.background[data-section="informe_psico"] {
   background-color: #e8f5e9;
   background-image: url('imagen/informe.png');
}


/* Mostrar el fondo activo */
.background.active {
   opacity: 1;
}

/* Asegurar que las secciones tengan contenido legible */
.section {
   background-color: rgba(255, 255, 255, 0.8);
   /* Fondo semi-transparente */
   padding: 20px;
   border-radius: 10px;
   margin: 20px auto;
   max-width: 80%;
   min-height: 70vh;

   /* Centrado con Flexbox */
   display: flex;
   flex-direction: column;
   justify-content: center;
   /* Centrado vertical */
   align-items: center;
   /* Centrado horizontal */
   text-align: center;
   /* Para texto centrado */
}

.section:hover {
   border: 3px solid #3498db;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.section.visible {
   opacity: 1;
   transform: translateY(0);
}

.section h1 {
   color: #333;
   margin-bottom: 10px;
}

.section img {
   max-height: 70vh;
   /* Ajusta según necesidad */
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   filter: brightness(1.1) contrast(1.1);
   opacity: 0.95;
}


h1 {
   font-size: 25px;
   font-weight: bold;
}

/* card */
.custom-card {
   transition: all 0.3s ease;
   border: none;
   border-radius: 12px;
   overflow: hidden;
   height: 230px;
   position: relative;
   margin: 5px;
   /* Añadido para posicionamiento absoluto de la imagen */
   padding: 0;
   /* Elimina el padding por defecto de la card */
}

.custom-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-img-container {
   position: absolute;
   /* Posiciona el contenedor de la imagen absolutamente */
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 1;
   /* Coloca la imagen detrás del contenido */
}

.card-img-custom {
   object-fit: cover;
   width: 100%;
   height: 100%;
}

.section-cards {
   padding: 60px 0;
   background-color: #f8f9fa;
}

.card-img-custom {
   transition: transform 0.5s ease;
}

.custom-card:hover .card-img-custom {
   transform: scale(1.1);
}

.card-title {
   font-weight: bold !important;
   font-size: 18px;
   position: relative;
   /* Asegura que el título esté sobre la imagen */
   z-index: 2;
   color: white;
   /* Cambia el color para que sea visible sobre la imagen */
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   /* Añade sombra para mejor legibilidad */
}

.card-body {
   position: relative;
   /* Asegura que el contenido esté sobre la imagen */
   z-index: 2;
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   /* Añade un overlay semi-transparente para mejor legibilidad */
}

.card-text {
   text-align: left !important;
   font-size: 16px;
   color: white;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   /* Cambia el color para que sea visible sobre la imagen */
}

.texto {
   font-size: 1.em;
}