/* --------------------------------------------------------------------
   BLOQUE TESTIMONIOS
   --------------------------------------------------------------------
   – Usa las variables --primario y --secundario definidas en tu hoja global
   – “tipografia1” es la familia que ya declaraste en tu proyecto
   – Solo añadimos las reglas al final para la vista modal
--------------------------------------------------------------------- */

/* ==================== SECCIÓN TESTIMONIOS ==================== */
.bloque-testimonios {
    background: linear-gradient(var(--secundario) 0%, #4422898b 100%);
    padding: 6rem 0 8rem; /* aire arriba y abajo  */
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.bloque-testimonios .container {
    /* margen extra para hover-zoom */
    margin-top: -50px;
    padding-top: 0;
    padding-bottom: 2rem;
}

/* -------------------- Título -------------------- */
.titulo-testimonios {
    padding: 2rem;
    font-family: "tipografia1";
    color: #f9f9f9;
    font-size: 5rem;
}

/* ==================== TARJETA DE TESTIMONIO ==================== */
.card-testimonio {
    --radio: 24px;
    background: var(--primario);
    border-radius: var(--radio);
    min-height: 480px; /* alto mínimo para centrar texto */
    padding: 2rem 2rem 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s;
}

/* ------------- Foto circular con anillo ------------- */
.avatar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
}
.avatar-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scale(1.12); /* 12 % mayor que la foto */
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.12);
}
.avatar-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ------------- Tipografía dentro de la tarjeta ------------- */
.card-testimonio h5 {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}
.ciudad {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.card-testimonio .card-text {
    color: #fff;
    font-weight: 500;
    line-height: 1.2;
}

/* ------------- Botón “Conoce más” ------------- */
.btn-conoce {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 1.25rem;
    border: 0;
    background: #fff;
    color: var(--primario);
    font-weight: 600;
    border-radius: 999px;
    padding: 0.75rem 3rem; /* ancho generoso */
    min-width: 13rem; /* asegura longitud mínima */
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.25s;
}
.btn-conoce:hover {
    transform: translate(-50%, -2px) !important;
    background: var(--secundarioBis);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ==================== CONTROLES CARRUSEL ==================== */

#testimoniosCarousel .carousel-control-prev,
#testimoniosCarousel .carousel-control-next {
    width: auto;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    z-index: 3;
}
#testimoniosCarousel .carousel-control-prev {
    left: -40px;
}
#testimoniosCarousel .carousel-control-next {
    right: -40px;
}
#testimoniosCarousel .carousel-control-prev-icon,
#testimoniosCarousel .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
    background-size: 100% 100%;
}

/* Más separación en pantallas ≥ 992 px */
@media (min-width: 992px) {
    #testimoniosCarousel .carousel-control-prev {
        left: -70px;
    }
    #testimoniosCarousel .carousel-control-next {
        right: -70px;
    }
}

/* ==================== ONDA DECORATIVA ==================== */
.onda-separadora,
.onda-superior {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
}
.onda-separadora {
    bottom: 0;
    z-index: 1;
}
.onda-superior {
    top: 0;
    z-index: 1;
}
.onda-separadora svg {
    display: block;
    width: 100%;
    height: 50px;
    position: relative;
    z-index: 2;
}

/* ==================== MODAL DE TESTIMONIO ==================== */
.modal-testimonio {
    /* actúa sobre .modal-dialog */
    max-width: 500px;
    width: 90%;
}

/* La tarjeta dentro del modal:
   – pierde la altura fija y se adapta al contenido
   – máximo 80 vh y scroll si excede
   – ocultamos el botón “Conoce más” */
.modal-testimonio .card-testimonio {
    min-height: auto;
    max-height: 80vh;
    overflow-y: auto;
    padding-bottom: 3rem; /* aire inferior extra */
}
.modal-testimonio .btn-conoce {
    display: none;
}
/* --------------- 1. Tarjeta con altura fija --------------- */
.card-testimonio {
    /* igual para todas: NO se expande con texto */
    height: 480px; /* el alto que ya usabas como mínimo  */
    display: flex;
    flex-direction: column;
}

/* --------------- 2. Texto recortado en la preview --------- */
.preview-text {
    /* muestra máx. 7 líneas y oculta el resto */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7; /* nº de líneas visibles */
    overflow: hidden;
}

/* --------------- 3. Columna ocupa 100 % de la altura ------- */
.card-card {
    height: 100%; /* la tarjeta se estira dentro de la col */
    display: flex;
}

/* --------------- 4. Diapositiva con altura constante ------- */
#testimoniosCarousel .carousel-item {
    min-height: 480px; /* igual que la tarjeta               */
}

/* =========================================================
   Ajustes responsive puntuales – bloque testimonios
   ========================================================= */

/* ===== 0-575 px · teléfonos pequeños
   – Mostrar UNA sola tarjeta por diapositiva
   – Evitar márgenes laterales indeseados                */
@media (max-width: 575.98px) {
    /* oculta todas las tarjetas salvo la primera de cada .carousel-item */
    #testimoniosCarousel .carousel-item .card-card:nth-child(n + 2) {
        display: none !important;
    }

    /* ancho completo, sin padding lateral del .row  */
    #testimoniosCarousel .carousel-item .row {
        margin-inline: 0;
    }
}

/* ===== 576-767 px · teléfonos grandes / mini-tablet
   – 2 tarjetas por fila (ya ocurre con  col-sm-6  )
   – Nada que ocultar                                 */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* no se necesita código extra: tus clases Bootstrap ya
     usan  col-sm-6  →  dos tarjetas de 50 % */
}

/* ===== 768-991 px · tablets 7-10"
   – 2 tarjetas por fila (col-sm-6 sigue activo)
   – Máx. 4 tarjetas visibles por diapositiva          */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* deja visibles cuatro tarjetas, pero reparte mejor el
     espacio lateral (opcional):                       */
    #testimoniosCarousel .carousel-item .row {
        margin-inline: -0.5rem;
    }
    #testimoniosCarousel .carousel-item .card-card {
        padding-inline: 0.5rem;
    }
}

@media (max-width: 991.98px) {
    #testimoniosCarousel .carousel-control-prev,
    #testimoniosCarousel .carousel-control-next {
        display: none !important;
    }
}