/* Widget de Reseñas - Solo fondo, imagen de mujer y barra inferior */

/* Importar variables de root.css */
@import url('root.css');

/* Animación fadeInUp */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Sección principal - Fondo */
.resenha.relative {
    display: block;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient(to top, var(--color_fondo) 390px, rgba(0, 0, 0, 0) 390px);
    font-size: 16px;
    font-family: var(--primary_font);
    color: var(--color_texto);
    box-sizing: border-box;
    overflow: hidden;

}

/* Aplicar Poppins a todos los elementos */
.resenha.relative,
.resenha.relative * {
    font-family: var(--primary_font) !important;
}

/* Contenedor */
.resenha .container-lg {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.resenha .row {
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Figura lateral - Imagen de la mujer */
.resenha .figura.visible-lg {
    border: 0;
    max-width: 100%;
    box-sizing: border-box;
  
    animation-name: fadeInUp;
    position: absolute;
    bottom: 0;
    right: 45%;
   
    height: 825px;
    animation-delay: 0.2s;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    object-fit: contain;
    animation-duration: 1s;
    animation-fill-mode: both;
}

/* Imagen móvil - Imagen de la mujer en móvil */
.resenha .seniora_movil {
    position: relative;
    width: 70%;
    max-width: 400px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    z-index: 1;
    pointer-events: none;
}
.resenha .corte {
    bottom: 389px;
    position: absolute;
    left: 0;
}
/* Franja multicolor inferior */
.corte-bottom.corte-google {
    z-index: 1;
    box-sizing: border-box;
    bottom: -1px;
    position: absolute;
    height: 10px;
    width: 100%;
    background-image: linear-gradient(
        90deg,
        #4688f1 16.6%,
        #e7443c 16.6%,
        #e7443c 33.3%,
        #f9bb2d 33.3%,
        #f9bb2d 50%,
        #4688f1 50%,
        #4688f1 66.6%,
        #3aa757 66.6%,
        #3aa757 83.2%,
        #e7443c 83.2%
    );
}

/* ============================================
   CAJA DE RESEÑAS - SLIDER
   ============================================ */

/* Contenedor principal del slider */
.caja_resenha {
    background-color: var(--light__e);
    border-radius: 20px;
    height: 680px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.1));
}
@media (min-width: 991px) {
    .caja_resenha {
        width: 553px;;
    }
}
/* Línea celeste interna usando pseudo-elemento */
.caja_resenha::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: 2px solid var(--primario_claro__e);
    border-radius: 18px;
    pointer-events: none;
    z-index: 1;
}

/* Slider Swiper */
#resenha-slider {
    width: 100%;
    height: 100%;
    position: relative;
}

#resenha-slider .swiper-wrapper {
    width: 100%;
    height: 100%;
    overflow: visible;
}

#resenha-slider .swiper-slide {
    width: 100%;
    height: 100%;
    padding: 70px 35px 40px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

#resenha-slider .swiper-slide::-webkit-scrollbar {
    width: 4px;
}

#resenha-slider .swiper-slide::-webkit-scrollbar-track {
    background: transparent;
}

#resenha-slider .swiper-slide::-webkit-scrollbar-thumb {
    background: var(--third_color_opacity);
    border-radius: 2px;
}

/* Primera slide - Portada */
.resenha-portada {
    align-items: center;
    justify-content: flex-start;
    height: 680px!important;
}

/* Títulos */
.caja_resenha-titulo {
    font-size: 45px;
    font-weight: 700;
    color: var(--color_azul_oscuro);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
    line-height: 1.2;
}

.caja_resenha-titulo span {
    color: var(--primario_claro__e);
}

.caja_resenha-subtitulo {
    font-size: 30px;
    font-weight: 400;
    color: var(--color_azul_oscuro);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.caja_resenha-subtitulo span {
    color: var(--primario_claro__e);
    font-weight: 400;
}

/* Tarjetas de reseñas de sedes */
.resenha_sede {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
}

.caja_resenha-persona {
    font-size: 20px;
    font-weight: 600;
    color: var(--color_azul_oscuro);
    text-align: left;
    flex: 1;
    white-space: nowrap;
    line-height: 1.2;
}

.caja_resenha-persona p {
    margin: 0;
    display: inline;
    white-space: nowrap;
}

.caja_resenha-persona span {
    display: inline;
    font-size: 20px;
    color: var(--color_azul_oscuro);
    font-weight: 400;
    margin-left: 5px;
}

.caja_resenha-puntuacion {
    column-gap: 10px;
    padding: 14px 20px;
    border-radius: 10px;
    display: inline-flex;
    margin: 0 auto;
    background-color: #fafafa;
    align-items: center;
    flex-shrink: 0;
}

.puntuacion-numero {
    color: var(--primario_claro__e);
    font-weight: 600;
    font-style: italic;
    font-size: 26px;
    line-height: 1;
}

.puntuacion-estrellas {
    width: 180px;
    height: auto;
    vertical-align: bottom;
}

.puntuacion-resenhas {
    font-size: 16px;
    color: var(--color_gris);
    font-weight: 600;
}

.puntuacion-resenhas span {
    font-weight: 600;
}

/* Logo de Google */
.google_logo {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 170px;
    height: auto;
}

/* Flechas de navegación Swiper */
#resenha-slider .swiper-button-prev,
#resenha-slider .swiper-button-next {
    background-color: var(--light__e);
    width: 45px;
    height: 45px;
    border: 1.5px solid var(--third_color, #00a5c2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 11;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    margin: 0;
}

#resenha-slider .swiper-button-prev {
    left: -11px;
}

#resenha-slider .swiper-button-next {
    right: -11px;
}

#resenha-slider .swiper-button-prev:hover,
#resenha-slider .swiper-button-next:hover {
    background-color: var(--primario_claro__e);
    border-color: var(--primario_claro__e);
    box-shadow: 0 3px 10px rgba(26, 158, 220, 0.25);
}

#resenha-slider .swiper-button-prev::after,
#resenha-slider .swiper-button-next::after {
    display: none;
}

#resenha-slider .swiper-button-prev img,
#resenha-slider .swiper-button-next img {
    width: 19px;
    height: 19px;
    opacity: 0.7;
    transition: all 0.2s ease;
    display: block;
    opacity: 1;
}

/* Rotar la flecha izquierda para que apunte hacia la izquierda */
#resenha-slider .swiper-button-prev img {
    transform: rotate(180deg);
}

#resenha-slider .swiper-button-prev:hover img,
#resenha-slider .swiper-button-next:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

/* Slides de testimonios */
.resenha_personal {
    display: block;
    height: 680px;
    text-decoration: none;
    color: inherit;
    position: relative;
    box-sizing: border-box;
    overflow: visible;
  
}

/* Elementos separadores */
.separa-tmf {
    height: 50px;
}

.separa-3pg {
    height: 20px;
}

.separa-w3e {
    height: 10px;
}

.separa-b1c {
    height: 5px;
}

.resenha_personal .caja_resenha-foto {
    width: 370px;
    height: 209px;
    border-radius: 20px;
    background-color: #a9a9a9;
    margin: 0 auto;
    position: relative;
}

.resenha_personal .caja_resenha-foto .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    border-radius: 20px;
    object-fit: cover;
    left: 0;
}

.resenha_personal .caja_resenha-foto .comillas {
    position: absolute;
    width: 90px;
    top: -35px;
    right: -20px;
    z-index: 10;
}

.resenha_personal .caja_resenha-persona_2 {
    color: var(--primario_claro__e);
    text-align: center;
}

.resenha_personal .caja_resenha-persona_3 {
    font-size: 20px;
    color: var(--primario__e, var(--color_azul_oscuro));
    font-style: italic;
    text-align: center;
}

.resenha_personal .puntuacion-estrellas_2 {
    width: 120px;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.resenha_personal .parrafo {
    font-size: 13px;
    line-height: 24px;
    color: var(--color_gris_oscuro);
    margin-bottom: 0;
    max-width: 460px;
    text-align: center;
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.resenha_personal .google_logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    width: 170px;
    height: auto;
}

/* Clases de compatibilidad Bootstrap 3 -> Bootstrap 5 */
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Clases de visibilidad de Bootstrap 3 */
.visible-xs {
    display: block !important;
}

@media (min-width: 576px) {
    .visible-xs {
        display: none !important;
    }
}

.visible-sm {
    display: none !important;
}

@media (min-width: 576px) and (max-width: 991px) {
    .visible-sm {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .visible-sm {
        display: none !important;
    }
}

.visible-lg {
    display: none !important;
}

@media (min-width: 992px) {
    .visible-lg {
        display: block !important;
    }
}

@media (max-width: 991px) {
    .resenha.relative {
        width: 100vw;
        height: auto;
    }
    
    .corte-bottom.corte-google {
        width: 100%;
    }
}

/* Ajustes para mobile - Cards del slider */
@media (max-width: 767px) {
    /* Títulos de la portada */
    .caja_resenha-titulo {
        font-size: 32px;
    }
    
    .caja_resenha-subtitulo {
        font-size: 22px;
        margin-bottom: 20px;
    }
    
    /* Nombres de personas */
    .caja_resenha-persona {
        font-size: 16px;
    }
    
    .caja_resenha-persona span {
        font-size: 16px;
    }
    
    .resenha_personal .caja_resenha-persona_3 {
        font-size: 16px;
    }
    
    /* Puntuación */
    .caja_resenha-puntuacion {
        padding: 10px 15px;
        column-gap: 8px;
    }
    
    .puntuacion-numero {
        font-size: 18px;
    }
    
    .puntuacion-estrellas {
        width: 100px;
    }
    
    .puntuacion-resenhas {
        font-size: 12px;
    }
    
    /* Imágenes de las cards */
    .resenha_personal .caja_resenha-foto {
        width: 100%;
        height: 158px;
    }
    
    .resenha_personal .caja_resenha-foto .comillas {
        width: 70px;
        top: -28px;
        
    }
    
    .resenha_personal .puntuacion-estrellas_2 {
        width: 70px;
    }
    
    .resenha_personal .google_logo {
        width: 110px;
    }
    
    .google_logo {
        width: 140px;
    }
    
    /* Párrafos */
    .resenha_personal .parrafo {
        font-size: 12px;
        line-height: 20px;
        max-width: 100%;
    }
    
    /* Separadores más pequeños */
    .separa-tmf {
        height: 35px;
    }
    
    .separa-3pg {
        height: 15px;
    }
    
    /* Padding del slide más pequeño */
    #resenha-slider .swiper-slide {
        padding: 50px 45px 30px;
    }
    
    /* Altura de la card más pequeña */
    .resenha_personal {
        height: auto;
        min-height: 600px;
    }
    
    .caja_resenha {
        height: auto;
        min-height: 600px;
    }
    
    .resenha-portada {
        height: auto !important;
        min-height: 600px !important;
    }
}