/**
 * Customer Reviews - Slider Responsive
 * Estilos con alta especificidad para evitar conflictos
 */

/* ========================================
   BASE - Desktop grande (>1200px) - 4 tarjetas
   ======================================== */
.cr-reviews-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1290px !important;
    margin: 0 auto !important;
    padding: 32px 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background-color: #F8FDFD99;
    border-radius: 16px;
}

.cr-reviews-wrapper .cr-nav-arrow {
    flex-shrink: 0 !important;
    width: 40px !important;
    height: 40px !important;
    background-color: #FFFFFF !important;
    border: 1px solid #E4F7F7 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0px 2px 8px 0px #35B4B82E !important;
    padding: 0 !important;
}

.cr-reviews-wrapper .cr-nav-prev,
.cr-reviews-wrapper .cr-nav-next {
    width: 40px !important;
    height: 40px !important;
}

.cr-reviews-wrapper .cr-nav-arrow img {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    margin: 0 auto !important;
}

.cr-reviews-wrapper .cr-nav-prev img {
    transform: rotate(180deg) !important;
}

.cr-reviews-wrapper .cr-nav-next img {
    transform: rotate(0deg) !important;
}

.cr-reviews-wrapper .cr-nav-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
}

.cr-reviews-wrapper .cr-reviews-viewport {
    flex: 1 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.cr-reviews-wrapper .cr-reviews-track {
    display: flex !important;
    gap: 24px !important;
    transition: transform 0.4s ease !important;
}

/* Tarjetas - Desktop grande: 360px para 4 tarjetas */
.cr-reviews-wrapper .cr-reviews-track .cr-review-item {
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-height: 292px !important;
    background: #ffffff !important;
    border: 1px solid #E4F7F7;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 0 !important;
    box-shadow: 0px 2px 8px 0px #35B4B82E;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.cr-reviews-wrapper .cr-review-rating {
    margin-bottom: 24px !important;
}

.cr-reviews-wrapper .cr-stars {
    display: flex !important;
    gap: 2px !important;
}

.estilo-entradas .wp-block-read-more {
    display: flex;
    gap: 4px;
}

header .wp-block-navigation__submenu-container.isHorizontal,
header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded=true]~.wp-block-navigation__submenu-container {
    background-color: #fff!important;
}

header .wpml-language-switcher-block .wpml-ls-dropdown ul li.wp-block-navigation-submenu ul.isHorizontal li:hover {
    background-color: #D1D5DC !important;
    border-radius: 10px !important;
}

header .wpml-language-switcher-block .wpml-ls-dropdown ul li.wp-block-navigation-submenu ul.isHorizontal li:hover>div {
    background-color: #D1D5DC !important;
}

footer a:hover {
    text-decoration: none;
    color: #27878A!important;
}

.no-underline a {
    text-decoration: none;
}

.no-underline a:hover {
    color: #27878A!important;
}

.no-link {
    pointer-events: none;
}

.tra-grp-shadow>div {
    box-shadow: 0px 0px 8px 0px #35B4B81F;
}

.cr-reviews-wrapper .cr-star {
    font-size: 20px !important;
    line-height: 1 !important;
}

.cr-reviews-wrapper .cr-star-filled {
    color: #fbbc04 !important;
}

.cr-reviews-wrapper .cr-star-empty {
    color: #fbbc04 !important;
}

.cr-reviews-wrapper .cr-review-content {
    color: #3c4043 !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
    margin-bottom: 20px !important;
    flex: 1 !important;
    overflow: hidden !important;
}

.cr-reviews-wrapper .cr-review-content p {
    margin: 0 0 12px 0 !important;
}
.cr-reviews-wrapper .cr-review-content p:first-child,
.cr-reviews-wrapper .cr-review-content p:last-child {
    display: none;
}

.cr-reviews-wrapper .cr-review-footer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid #f0f0f0 !important;
    margin-top: auto !important;
}

.cr-reviews-wrapper .cr-review-avatar {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #e8eaed !important;
}

.cr-reviews-wrapper .cr-review-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.cr-reviews-wrapper .cr-avatar-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #45556C 0%, #764ba2 100%) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 20px !important;
}

.cr-reviews-wrapper .cr-review-author-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.cr-reviews-wrapper .cr-author-name {
    margin: 0 0 4px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #202124 !important;
}

.cr-reviews-wrapper .cr-author-location {
    margin: 0 0 6px 0 !important;
    font-size: 14px !important;
    color: #5f6368 !important;
}

.cr-reviews-wrapper .cr-author-position {
    margin: 0 !important;
    font-size: 13px !important;
    color: #5f6368 !important;
}

.cr-reviews-wrapper .cr-author-position strong {
    color: #202124 !important;
    font-weight: 500 !important;
}

.cr-no-reviews {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #5f6368 !important;
}

/* ========================================
   CENTRADO - Cuando hay 2 o menos reviews
   Solo aplica en desktop y tablet (>768px)
   ======================================== */
@media (min-width: 769px) {
    .cr-reviews-wrapper.cr-centered .cr-reviews-viewport {
        display: flex !important;
        justify-content: center !important;
    }

    .cr-reviews-wrapper.cr-centered .cr-reviews-track {
        justify-content: center !important;
        transform: none !important;
    }

    /* Ocultar flechas cuando hay pocas reviews y están centradas */
    .cr-reviews-wrapper.cr-centered .cr-nav-arrow {
        display: none !important;
    }
}

/* ========================================
   RESPONSIVE - Desktop (1024px - 1200px) - 3 tarjetas
   ======================================== */
@media (max-width: 1200px) {
    .cr-reviews-wrapper {
        padding: 32px 40px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track {
        gap: 20px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track .cr-review-item {
        flex: 0 0 360px !important;
        width: 360px !important;
        min-width: 360px !important;
    }
}

/* ========================================
   RESPONSIVE - Tablet (768px - 1024px) - 2 tarjetas
   ======================================== */
@media (max-width: 1024px) {
    .cr-reviews-wrapper {
        padding: 0 35px !important;
        gap: 12px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track {
        gap: 16px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track .cr-review-item {
        flex: 0 0 280px !important;
        width: 280px !important;
        min-width: 280px !important;
        max-height: 300px !important;
        padding: 24px !important;
    }
    
    .cr-reviews-wrapper .cr-review-content {
        font-size: 14px !important;
    }
    
    .cr-reviews-wrapper .cr-review-avatar {
        width: 44px !important;
        height: 44px !important;
    }
    
    .cr-reviews-wrapper .cr-author-name {
        font-size: 15px !important;
    }
}

/* ========================================
   RESPONSIVE - Tablet pequeña (576px - 768px) - 2 tarjetas pequeñas
   ======================================== */
@media (max-width: 768px) {
    .cr-reviews-wrapper {
        padding: 16px 45px !important;
        gap: 10px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track {
        gap: 12px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track .cr-review-item {
        flex: 0 0 220px !important;
        width: 220px !important;
        min-width: 220px !important;
        max-height: 320px !important;
        padding: 20px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow,
    .cr-reviews-wrapper .cr-nav-prev,
    .cr-reviews-wrapper .cr-nav-next {
        width: 36px !important;
        height: 36px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow img {
        width: 14px !important;
        height: 14px !important;
        margin: 0 auto !important;
    }
    
    .cr-reviews-wrapper .cr-review-content {
        font-size: 13px !important;
        margin-bottom: 16px !important;
    }
    
    .cr-reviews-wrapper .cr-review-footer {
        gap: 12px !important;
        padding-top: 12px !important;
    }
    
    .cr-reviews-wrapper .cr-review-avatar {
        width: 40px !important;
        height: 40px !important;
    }
    
    .cr-reviews-wrapper .cr-avatar-placeholder {
        font-size: 16px !important;
    }
    
    .cr-reviews-wrapper .cr-author-name {
        font-size: 14px !important;
    }
    
    .cr-reviews-wrapper .cr-author-location,
    .cr-reviews-wrapper .cr-author-position {
        font-size: 12px !important;
    }
    
    .cr-reviews-wrapper .cr-star {
        font-size: 16px !important;
    }
    
    .cr-reviews-wrapper .cr-review-rating {
        margin-bottom: 12px !important;
    }
}

/* ========================================
   RESPONSIVE - Móvil (<576px) - 1 tarjeta
   ======================================== */
@media (max-width: 576px) {
    .cr-reviews-wrapper {
        padding: 16px 45px !important;
        gap: 8px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track {
        gap: 16px !important;
    }
    
    /* Una sola tarjeta a la vez, ocupa todo el ancho */
    .cr-reviews-wrapper .cr-reviews-track .cr-review-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        padding: 24px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow,
    .cr-reviews-wrapper .cr-nav-prev,
    .cr-reviews-wrapper .cr-nav-next {
        width: 36px !important;
        height: 36px !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .cr-reviews-wrapper .cr-nav-prev {
        left: 5px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-next {
        right: 5px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow img {
        width: 14px !important;
        height: 14px !important;
        margin: 0 auto !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-viewport {
        width: 100% !important;
    }
    
    .cr-reviews-wrapper .cr-review-content {
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin-bottom: 18px !important;
    }
    
    .cr-reviews-wrapper .cr-review-footer {
        gap: 14px !important;
        padding-top: 16px !important;
    }
    
    .cr-reviews-wrapper .cr-review-avatar {
        width: 48px !important;
        height: 48px !important;
    }
    
    .cr-reviews-wrapper .cr-avatar-placeholder {
        font-size: 18px !important;
    }
    
    .cr-reviews-wrapper .cr-author-name {
        font-size: 15px !important;
    }
    
    .cr-reviews-wrapper .cr-author-location,
    .cr-reviews-wrapper .cr-author-position {
        font-size: 13px !important;
    }
    
    .cr-reviews-wrapper .cr-star {
        font-size: 18px !important;
    }
}

/* ========================================
   RESPONSIVE - Móvil pequeño (<400px) - 1 tarjeta
   ======================================== */
@media (max-width: 400px) {
    .cr-reviews-wrapper {
        padding: 16px 40px !important;
    }
    
    .cr-reviews-wrapper .cr-reviews-track .cr-review-item {
        padding: 20px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow,
    .cr-reviews-wrapper .cr-nav-prev,
    .cr-reviews-wrapper .cr-nav-next {
        width: 32px !important;
        height: 32px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-prev {
        left: 3px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-next {
        right: 3px !important;
    }
    
    .cr-reviews-wrapper .cr-nav-arrow img {
        width: 12px !important;
        height: 12px !important;
        margin: 0 auto !important;
    }
    
    .cr-reviews-wrapper .cr-review-content {
        font-size: 13px !important;
    }
    
    .cr-reviews-wrapper .cr-review-avatar {
        width: 44px !important;
        height: 44px !important;
    }
    
    .cr-reviews-wrapper .cr-author-name {
        font-size: 14px !important;
    }
    
    .cr-reviews-wrapper .cr-author-location,
    .cr-reviews-wrapper .cr-author-position {
        font-size: 12px !important;
    }
}