/* CSS Document */
.container_icert_footerc {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    position: relative;
    margin: 0 auto;
    line-height: 1.45;
    width: 100%;
    padding: 20px 0;
    background-color: #f8f9fa; 
}

/* Limpiar floats para el contenedor .row si no se usan clases de grid de Bootstrap para las columnas hijas directas */
.container_icert_footerc .row::after {
    content: "";
    clear: both;
    display: table;
}

/* --- Bloque Izquierdo: Información Básica --- */
/* CAMBIO: Aplicar estilos a la nueva clase '.icert-info-column' */
.icert-info-column {
    float: left;
    width: 20%; /* Ancho deseado */
    padding-right: 15px; /* Espacio entre columna info y slider */
    padding-left: 15px; /* Alineado con el padding del container de Bootstrap */
    box-sizing: border-box;
}
.info_basica_footerc { /* Estilos generales para el bloque de info */
    padding-top: 15px; 
    padding-bottom: 20px; 
    text-align: center;
    display: flex; 
    flex-direction: column; 
    align-items: center;
}

.logo_icert_footerc {
    display: block;
    margin: 0 0 5px 0; 
    max-width: 100px; 
    height: auto;
}

.titulo_icert_footerc {
    font-size: 18px; 
    font-weight: 600; 
    margin-top: 0;
    margin-bottom: 1px; 
    color: #212529;
}

.subtitulo_icert {
    font-size: 12px; 
    color: #495057; 
    margin-bottom: 4px; 
}

.star_icert_footer_c {
    margin-bottom: 4px; 
    line-height: 1;
}

.estrellas_grande_footerc {
    width: 20px; 
    height: 20px; 
    margin: 0 1px;
    vertical-align: middle;
}

img.estrellas_grande_footerc[src*="5-estrellas.png"],
img.estrellas_grande_footerc[src*="4-media-estrellas.png"],
img.estrellas_grande_footerc[src*="4-estrellas.png"] {
    width: auto;
    max-width: 100px; 
    height: 20px; 
}

.ptotal_footerc {
    font-size: 26px; 
    font-weight: 600;
    margin: 0;
    color: #212529;
}

.puntuaciontotal_footerc {
    padding-top: 0;
    margin-bottom: 2px; 
}

.info_basica_footerc .opinionestotales_footerc {
    line-height: 1.2 !important; 
    color: #495057;
    margin-top: 0;
    margin-bottom: 12px !important;
}
.info_basica_footerc .opinionestotales_footerc p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px;
}
.info_basica_footerc .opinionestotales_footerc strong {
    color: #212529;
    font-weight: 600; 
}

.info_basica_footerc .linkicert_footerc {
    font-size: 16px; 
    color: #007bff; 
    text-decoration: none;
    font-weight: 500;
    margin-top: 0;
    display: inline-block; 
}
.info_basica_footerc .linkicert_footerc:hover {
    text-decoration: underline;
    color: #0056b3;
}


/* --- Slider y Tarjetas de Opinión --- */
/* CAMBIO: Aplicar estilos a la nueva clase '.icert-slider-column' */
.icert-slider-column {
    float: left;
    width: 80%; /* Ancho deseado */
    padding-left: 15px; /* Espacio entre columna info y slider */
    padding-right: 15px; /* Alineado con el padding del container de Bootstrap */
    box-sizing: border-box;
}

.opinionesslider_footerc {
    padding-top: 10px;
    padding-bottom: 10px;
}

.opinionesslider_footerc .slick-slide {
    padding: 0 8px; /* Espacio entre tarjetas, ajustar si es necesario */
    height: 100%; 
    display: flex !important; 
    flex-direction: column; 
    box-sizing: border-box;
}
.opinionesslider_footerc .slick-track {
    display: flex;
    align-items: stretch; 
}
.opinionesslider_footerc .slick-slide > div { 
    height: 100% !important; 
    width: 100%;
    display: flex !important; 
    flex-direction: column; 
}

.opinion-card-wrapper {
    width: 100%;
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    flex-grow: 1; 
}

.opinion-card {
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px 15px; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center; 
    width: 100%;
    height: 100%; 
    justify-content: space-between;
    min-height: 280px; 
}

.opinion-card-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    width: 100%;
}

.opinion-card-product-title { 
    font-size: 14px; 
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px; 
    color: #343a40;
    width: 100%; 
}

.star_icert_slider_item {
    margin-bottom: 10px; 
    line-height: 1; 
    width: 100%; 
}

.estrellapeque_footerc {
    display: inline-block !important;
    width: 16px; 
    height: 16px;
    margin: 0 1px; 
    vertical-align: middle;
}
img.estrellapeque_footerc[src*="5-estrellas.png"], 
img.estrellapeque_footerc[src*="4-media-estrellas.png"],
img.estrellapeque_footerc[src*="4-estrellas.png"] {
    width: auto; 
    max-width: 80px; 
    height: 16px; 
    margin: 0; 
}

.comentario_footerc {
    font-size: 14px; 
    line-height: 1.45; 
    color: #495057; 
    margin-top: 0;
    margin-bottom: 0;
    font-style: italic; 
    max-width: 95%; 
    width: 100%; 
}

.cliente_footerc {
    margin-top: 0;
    padding-top: 8px;  
    border-top: 1px solid #f1f3f5; 
    width: 100%; 
    flex-shrink: 0;
}

.cliente_avatar_info_wrapper {
    display: flex;
    align-items: center; 
    justify-content: center; 
    text-align: left; 
    padding-top: 8px; 
}

.cliente_avatar {
    width: 30px; 
    height: 30px; 
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px; 
    font-weight: 500;
    text-transform: uppercase;
    margin-right: 10px; 
    flex-shrink: 0; 
}

.textocliente_footerc {
    font-size: 12px;
    line-height: 1.3; 
}
.cliente_nombre {
    display: block;
    font-weight: 600;
    color: #343a40;
    font-size: 12px; 
}
.cliente_nombre strong { font-weight: 600; } 

.cliente_fecha {
    display: block;
    color: #6c757d;
    font-size: 11px; 
}

/* --- Slick arrows --- */
.slick-prev, .slick-next {
    width: 30px; 
    height: 30px;
    z-index: 10; 
}
.slick-prev:before, .slick-next:before {
    font-size: 24px; 
    color: #343a40 !important; 
    opacity: 0.6;
}
.slick-prev:hover:before, .slick-next:hover:before {
    opacity: 0.9;
}

.slick-prev { left: -10px; } /* Ajustar para que no se solape con el contenido izquierdo si el slider está muy pegado */
.slick-next { right: -10px; }


/* --- Responsive Adjustments --- */

/* Pantallas extra grandes y grandes (donde se ven 4 columnas por defecto en el slider, y la distribución 20/80) */
/* No se necesita media query específico para el 20/80 si es el comportamiento por defecto */

/* Pantallas medianas/tablets (donde JS cambia a 3 slides en el slider, y las columnas 20/80 se apilan) */
@media (max-width: 1199.98px) { /* Corresponde a < 1200px (cuando Slick pasa a 3 slides) */
    .slick-prev { left: -5px; } 
    .slick-next { right: -5px; }
    .opinionesslider_footerc .slick-slide {
        padding: 0 8px; 
    }
     /* Aquí podrías mantener el 20/80 o empezar a apilar. 
        Para este ejemplo, apilaremos en el siguiente breakpoint. */
}

/* Tablets (donde JS cambia a 2 slides en el slider, y las columnas 20/80 SE APILAN) */
@media (max-width: 991.98px) { /* Corresponde a < 992px (cuando Slick pasa a 2 slides) */
    .icert-info-column,
    .icert-slider-column {
        width: 100%; /* Ocupan todo el ancho */
        float: none; /* Quita el float para que se apilen */
        padding-left: 15px; /* Mantiene el padding estándar del contenedor */
        padding-right: 15px;
    }
    .icert-info-column {
        margin-bottom: 25px; /* Espacio entre el bloque de info y el slider cuando están apilados */
        padding-right: 15px; /* Restaurar padding original si se había quitado */
    }
    .icert-slider-column {
         padding-left: 15px; /* Restaurar padding original si se había quitado */
    }

    .opinionesslider_footerc .slick-slide {
        padding: 0 10px; 
    }
    .opinion-card {
        min-height: 260px; 
    }
    .slick-prev { left: 0px; } 
    .slick-next { right: 0px; }
}

/* Móviles (donde JS cambia a 1 slide en el slider, y las columnas 20/80 siguen apiladas) */
@media (max-width: 767.98px) { /* Corresponde a < 768px (cuando Slick pasa a 1 slide) */
    .container_icert_footerc {
        padding: 15px 0;
    }
    /* .icert-info-column y .icert-slider-column ya son width: 100% y float: none desde el breakpoint anterior */
    
    .icert-slider-column {
        padding-left: 10px; 
        padding-right: 10px;
    }
    .opinion-card {
        padding: 15px 10px; 
        min-height: 240px; 
    }
    .opinionesslider_footerc .slick-slide {
        padding: 0 5px; 
    }
    /* Flechas pueden necesitar más ajuste si el slider en sí tiene padding interno */
    .slick-prev { left: 5px; } 
    .slick-next { right: 5px; }

    .comentario_footerc {
        font-size: 13px; 
    }
}