@import url('https://fonts.googleapis.com/css2?family=Flamenco:wght@300;400&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --azulTabla: rgb(32, 114, 184);
    --azulTabla2: rgb(29, 112, 183);
    --blancoTabla: rgb(238, 244, 249);
    --grisAnuncios: #756b6b;
    --rojo:      rgb(194, 19, 48);
    --rojoClaro: rgb(219, 5, 40);
    --negro:     rgb(63, 63, 62);
    --gris:      #757575;
    --grisClaro: #e8e8e8;
    --grisFondo: #d4d4d4;
    --grisOscuro: rgb(63, 63, 62);
    --blanco:    #fcfcfc;
    --transicion: 0.2s ease;
}


body {
    font-family: "Montserrat", sans-serif;
    /* max-width: 140rem; */
}

/*Elemento de Bienvenida*/
.BienvenidaSA {
    display: flex;
}

.BienvenidaSA div {
    flex-basis: 50%;
    align-self: center;
    justify-self: center;
}

@media (min-width: 721px) {
    .BienvenidaSA {
        flex-direction: row;
    }

    .TituloSA {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .MensajePrincipalSA {
        max-width: 50rem;
        margin: 0 2rem;
    }

    .mensajePrincipalSA__centrar {
        margin: auto;
        margin-bottom: 5rem;
        margin: 0 2rem;
    }

    .SeparacionPlantas {
        margin-top: 4rem;
    }
}

@media (max-width: 720px) {
    .BienvenidaSA {
        flex-direction: column;
    }

    .TituloSA {
        display: inline-flex;
        justify-content: start;
        align-items: center;
        margin-left: 3rem;
        margin-bottom: 5rem;
    }

    .mensajePrincipalSA__centrar p {
        margin-top: -3rem;
        margin-bottom: 3rem;
    }

    .mensajePrincipalSA__centrar {
        margin: 0 3rem;
    }

}

.tituloSA__centrar {
    font-size: 1.3em;
    line-height: 1.3;
    color: var(--grisOscuro);
}

.mensajePrincipalSA__centrar {
    margin-top: 5rem;
    font-size: 1.9rem;
    text-align: justify;
    /* font-weight: 300; */
}




/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}
/*Comentarios*/
/* --- Estilos Generales --- */

/* --- Sección Testimonios (Cuadrícula de tres) --- */
.seccion-testimonios {
    background-color: #f4f4f4;
    padding: 60px 40px;
    max-width: 100%;
}

.contenedor-testimonios {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
/* --- Tarjeta Testimonio Individual --- */
.tarjeta-testimonio {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 0.3rem 1rem rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    align-items: flex-start;   /* alineación izquierda */
    text-align: left;
    justify-content: space-between;   /* empuja el botón al fondo */
}

.cabecera-tarjeta {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 1.2rem;
}

.anio-testimonio {
    align-self: flex-start;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--grisOscuro);
    margin-bottom: 1rem;
}

.placeholder-foto {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #d4d4d4;
    margin-bottom: 0.6rem;
    object-fit: cover;          /* si es <img> recorta bien */
    display: block;
}

/* Nombre centrado */
.tarjeta-testimonio h3 {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--grisOscuro);
    text-align: center;
    margin: 0 0 0.15rem 0;
}

/* Línea roja bajo el nombre */
.tarjeta-testimonio h3::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    background-color: #c02d41;
    margin-top: 0.5rem;
}

/* Subtítulo de carrera (si lo añades como <p class="testimonio__carrera">) */
.testimonio__carrera {
    font-size: 0.75em;
    color: #888;
    font-style: italic;
    text-align: center;
    margin-bottom: 0.8rem;
}

.cuerpo-tarjeta {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;                          /* ocupa todo el espacio disponible */
}
 
/* Texto del testimonio en itálica */
.cuerpo-tarjeta p {
    font-size: 0.82em;
    line-height: 1.65;
    color: #555;
    font-style: italic;
    margin-bottom: 1.2rem;
    flex: 1;
}

/* Botón rojo */
.btn-ver-mas {
    display: inline-block;
    padding: 0.45rem 1.6rem;
    background-color: #fff;
    color: #c02d41;
    border: red;
    border: 1px solid var(--rojo);
    border-radius: 0.4rem;
    font-size: 0.78em;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    transition: background-color 0.2s ease;
    align-self: center;
    margin-top: 1rem;
    display: block;
    width: fit-content;
}
 
.btn-ver-mas:hover { 
    background-color: #9e1e30; 
    color: #fff;
}

/* --- ESTILOS DEL MODAL (POP-UP) --- */

.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posicionado relativo a la ventana del navegador */
    z-index: 1000; /* Asegura que esté por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Habilita el desplazamiento si el contenido es demasiado largo */
    background-color: rgba(0,0,0,0.6); /* Fondo semi-transparente */
    opacity: 0; /* Para la animación de aparición */
    transition: opacity 0.4s ease;
    align-items: center; /* Centrado vertical con flex */
    justify-content: center; /* Centrado horizontal con flex */
}

/* Clase para mostrar el modal */
.modal.mostrar {
    display: flex;
    opacity: 1;
}

.modal-contenido {
    background-color: #fff;
    border-radius: 1rem;
    padding: 3rem 3rem 2.5rem;   /* más espacio arriba para el botón X */
    width: 75%;
    max-width: 820px;
    box-shadow: 0 1.5rem 4rem rgba(0,0,0,0.22);
    position: relative;
    animation: modalEntrada 0.28s ease;
}

@keyframes modalEntrada {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Animación de escalado al mostrar el modal */
.modal.mostrar .modal-contenido {
    transform: scale(1);
}

/* Botón cerrar */
.btn-cerrar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: 1.5px solid rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.btn-cerrar:hover {
    background: var(--rojo, #c02d41);
    border-color: var(--rojo, #c02d41);
    color: #fff;
    transform: rotate(90deg);
}

.btn-cerrar svg {
    width: 1.2rem;
    height: 1.2rem;
    stroke: currentColor;
    fill: none;
    display: block;
}


/* Grid del modal */
.grid-modal {
    display: grid;
    grid-template-columns: 28% 1fr;
    gap: 2.5rem;
    align-items: start;
}

/* Columna izquierda */
.modal-columna-izq {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.modal-columna-izq .anio-testimonio {
    align-self: flex-start;
    font-size: 0.8em;
    font-weight: 700;
    color: #444;
    margin-bottom: 0.6rem;
}

/* Foto grande en el modal */
.placeholder-foto-grande {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background-color: #d4d4d4;
    object-fit: cover;
    display: block;
    margin-bottom: 0.8rem;
}

.modal-columna-izq h3 {
    font-size: 0.95em;
    font-weight: 700;
    color: #222;
    text-align: center;
    margin: 0;
}

/* Divisor punteado */
.divisor-punteado {
    width: 100%;
    border-top: 2px dashed #ddd;
    color: transparent;
    margin-top: 0.6rem;
}

.modal-columna-izq .placeholder-foto-grande {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    border-radius: 50%;
    margin-bottom: 20px;
}


/* Columna derecha */
.modal-columna-der {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0.5rem;
}

.modal-columna-der p {
    font-size: 0.88em;
    line-height: 1.85;
    color: #555;
    font-style: italic;
}
/* --- Responsive --- */
@media (max-width: 768px) {
    .contenedor-testimonios {
        grid-template-columns: 1fr; /* Una columna en dispositivos pequeños */
    }
    .grid-modal {
        grid-template-columns: 1fr;
    }
    .modal-columna-izq .anio-testimonio {
        align-self: center; /* Centra el año en el modal para móviles */
    }
}

/* Responsive */
@media (max-width: 600px) {
    .grid-modal { grid-template-columns: 1fr; }
    .modal-columna-izq { align-items: center; }
    .modal-columna-izq .anio-testimonio { align-self: center; }
}

/*Elemento de Separacion*/
.SeparacionPlantas {
    min-height: 15rem;
    margin-bottom: 6rem;
    background-image: url(../IMAGES/SolicitudAD/plantas.png);
}

/* ── MODAL MÁS ANCHO + SCROLL INTERNO ───────────────────── */
.modal-contenido {
    width: 85%;           /* antes: 75% */
    max-width: 1000px;    /* antes: 820px */
    max-height: 85vh;     /* limita la altura a 85% de la pantalla */
    overflow-y: auto;     /* scroll interno cuando el texto es largo */
    padding: 3rem 3.5rem 2.5rem;
}

/* El grid de columnas también se ajusta al nuevo ancho */
.grid-modal {
    grid-template-columns: 22% 1fr;   /* columna izq un poco más estrecha */
    gap: 3rem;
    align-items: start;
}

/* La columna derecha queda bien legible con el scroll */
.modal-columna-der p {
    font-size: 0.86em;
    line-height: 1.9;
    color: #555;
    font-style: italic;
    text-align: justify;
}

/* Scrollbar discreta dentro del modal */
.modal-contenido::-webkit-scrollbar {
    width: 5px;
}
.modal-contenido::-webkit-scrollbar-track {
    background: transparent;
}
.modal-contenido::-webkit-scrollbar-thumb {
    background: #b80505;
    border-radius: 3px;
}

/* ── 1. UNIFICACIÓN DE FONDO ──────────────────────────
   Cambia el fondo gris a blanco para que sea consistente
   con el resto de secciones de la página.
   ──────────────────────────────────────────────────── */
.seccion-testimonios {
    background-color: #ffffff;
    padding: 60px 40px;
}
 
/* El contenedor interno hereda el blanco */
.contenedor-testimonios {
    background-color: #ffffff;
}
 
 
/* ── 2. ESCRITORIO vs MÓVIL: visibilidad ─────────────
   En escritorio (> 900px): cuadrícula original visible,
   carrusel móvil oculto.
   En tablet/móvil (≤ 900px): cuadrícula oculta,
   carrusel visible.
   ──────────────────────────────────────────────────── */
@media (min-width: 901px) {
    .contenedor-testimonios   { display: grid; }   /* restaura el grid de escritorio */
    .testimonios-carrusel     { display: none;  }
}
 
@media (max-width: 900px) {
    /* Oculta la cuadrícula original */
    .contenedor-testimonios   { display: none;  }
 
    /* Ajuste de padding de la sección en tablet/móvil */
    .seccion-testimonios {
        padding: 40px 20px;
    }
 
    /* Muestra el carrusel */
    .testimonios-carrusel     { display: block; }
}
 
 
/* ── 3. CARRUSEL DE TESTIMONIOS (móvil/tablet) ───────  */
 
.testimonios-carrusel {
    width: 100%;
    max-width: 560px;       /* limita el ancho en tablets grandes */
    margin: 0 auto;
    box-sizing: border-box;
    touch-action: pan-y;    /* permite scroll vertical, bloquea el horizontal para que no compita con el swipe */
    user-select: none;      /* evita que el texto se seleccione al deslizar */
}
 
/* Track: apila las tarjetas, solo la activa es visible */
.testimonios-carrusel__track {
    position: relative;
    min-height: 300px;
}
 
/* Tarjeta en modo carrusel: oculta por defecto */
.tarjeta-testimonio--movil {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.07);
    animation: fadeInTestimonio 0.35s ease;
}
 
/* Única tarjeta visible */
.tarjeta-testimonio--movil.activa {
    display: flex;
}
 
@keyframes fadeInTestimonio {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}
 
/* Barra de navegación */
.testimonios-carrusel__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 28px;
}
 
/* Dots específicos para testimonios (clase dot-t para no colisionar con .dot del carrusel de actividades) */
.testimonios-carrusel__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}
 
.dot-t {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d4d4d4;
    transition: background-color 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
    cursor: pointer;
}
 
.dot-t.activo {
    background-color: #a51d2d;
    transform: scale(1.3);
}
 
 
/* ── 4. MODAL RESPONSIVO (acomodo vertical) ──────────
   En pantallas ≤ 768px el grid de 2 columnas del modal
   se convierte en columna única con orden: año → foto
   → nombre → carrera → divisor → texto.
   ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
 
    /* El modal ocupa casi toda la pantalla */
    .modal-contenido {
        width: 92%;
        max-width: 420px;
        padding: 2.5rem 1.8rem 2rem;
        max-height: 88vh;
        overflow-y: auto;
    }
 
    /* Una sola columna */
    .grid-modal {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
 
    /* Columna izquierda: todo centrado */
    .modal-columna-izq {
        align-items: center;
        text-align: center;
    }
 
    .modal-columna-izq .anio-testimonio {
        align-self: center;
        margin-bottom: 1rem;
    }
 
    /* Foto más pequeña en móvil */
    .placeholder-foto-grande {
        width: 140px;
        height: 140px;
        margin-bottom: 0.6rem;
    }
 
    .modal-columna-izq h3 {
        text-align: center;
    }
 
    /* Carrera centrada si existe */
    #modal-carrera {
        text-align: center;
    }
 
    /* Columna derecha: texto justificado */
    .modal-columna-der {
        padding-top: 0;
    }
 
    .modal-columna-der p {
        font-size: 0.85em;
        line-height: 1.8;
        text-align: justify;
    }
}
 
@media (max-width: 480px) {
    .modal-contenido {
        width: 96%;
        padding: 2rem 1.4rem 1.8rem;
    }
 
    .placeholder-foto-grande {
        width: 120px;
        height: 120px;
    }
 
    .modal-columna-der p {
        font-size: 0.82em;
    }
}

/* ═══════════════════════════════════════════════════════
   PARCHE FLECHAS v2 — servicio social
   Pegar al final del CSS principal.
   Anula completamente .btn-flecha y aplica
   el estilo idéntico a .btn-nav-ptar / .proyectos__nav-btn
═══════════════════════════════════════════════════════ */
 
.btn-flecha.btn-nav-unificado {
    /* Anular estilos heredados de .btn-flecha */
    background-color: white !important;
    background:       white !important;
    box-shadow:       none !important;
    font-size:        unset !important;
 
    /* Estilo unificado — idéntico a .btn-nav-ptar */
    width:            2.8rem !important;
    height:           2.8rem !important;
    border-radius:    50% !important;
    border:           0.15rem solid var(--rojo) !important;
    color:            var(--rojo) !important;
    cursor:           pointer;
    display:          flex !important;
    align-items:      center !important;
    justify-content:  center !important;
    flex-shrink:      0;
    transition:       background var(--transicion, 0.2s ease),
                      color var(--transicion, 0.2s ease);
    padding:          0;
}
 
.btn-flecha.btn-nav-unificado:hover {
    background-color: var(--rojo) !important;
    background:       var(--rojo) !important;
    color:            white !important;
}
 
.btn-flecha.btn-nav-unificado svg {
    width:       1.2rem !important;
    height:      1.2rem !important;
    stroke:      currentColor !important;
    fill:        none !important;
    display:     block;
    flex-shrink: 0;
    min-width:   unset !important;
}