.elementor-3891 .elementor-element.elementor-element-bccd6ad{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-3891 .elementor-element.elementor-element-9e5519b{--display:flex;}.elementor-3891 .elementor-element.elementor-element-a8efa7a{--display:flex;}.elementor-3891 .elementor-element.elementor-element-737d3ab{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-3891 .elementor-element.elementor-element-8a3c48d .elementor-button{background-color:#FFFFFF;font-family:"Lato", Sans-serif;font-size:16px;font-weight:700;fill:#5E5E5E;color:#5E5E5E;}.elementor-3891 .elementor-element.elementor-element-8a3c48d.elementor-element{--align-self:center;}.elementor-3891 .elementor-element.elementor-element-8a3c48d .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-3891 .elementor-element.elementor-element-8a3c48d .elementor-button .elementor-button-content-wrapper{gap:3px;}.elementor-3891 .elementor-element.elementor-element-11844a0{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:15px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-3891 .elementor-element.elementor-element-b7195bb{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-3891 .elementor-element.elementor-element-84aba45{--display:flex;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}@media(min-width:768px){.elementor-3891 .elementor-element.elementor-element-84aba45{--content-width:605px;}}@media(max-width:1024px){.elementor-3891 .elementor-element.elementor-element-bccd6ad{--grid-auto-flow:row;}.elementor-3891 .elementor-element.elementor-element-737d3ab{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-3891 .elementor-element.elementor-element-bccd6ad{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-3891 .elementor-element.elementor-element-737d3ab{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for shortcode, class: .elementor-element-8db4967 *//* Ocultar texto basado en reseñas */
.glsr-summary-text {
    display: none !important;
}

/* ================================
   IMPORTAR FUENTE LATO
================================ */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* ================================
   CONTENEDOR GENERAL
================================ */
.glsr-summary {
    background: #f8f9fa;
    padding: 25px 25px;
    border-radius: 30px;
    max-width: 900px;
    font-family: 'Lato', sans-serif !important;
}

/* CONTENEDOR HEADER (número + estrellas) */
.glsr-summary-rating {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 25px;
    font-weight: 700;
    color: #4a4a4a;
}

/* Estrellas */
.glsr-star {
    color: #f5b400 !important;
    font-size: 15px;
}

/* Etiquetas izquierda */
.glsr-summary-label {
    font-size: 10px;
    color: #666;
}

/* Contenedor porcentajes */
.glsr-summary-percentages {
    margin-top: 15px;
}

/* Fila completa */
.glsr-summary-percentages > div {
    display: grid;
    grid-template-columns: 150px 1fr 60px;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

/* Fondo gris barra */
.glsr-bar {
   !important;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
}

/* Progreso amarillo */
.glsr-bar-percent {
  !important;
    height: 100%;
}

/* Porcentaje derecha */
.glsr-summary-percentages strong {
    font-size: 18px;
    color: #666;
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b7195bb *//* =====================================================
   PAGINACIÓN HORIZONTAL CON FLECHAS – ALINEADA IZQUIERDA
   ===================================================== */

.glsr-pagination {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important; /* izquierda */
    align-items: center !important;
    gap: 10px !important;
    margin: 1px 0 !important; /* quitar centrado */
    padding: 0 !important;
    list-style: none !important;
}

/* Botones base */
.glsr-pagination a,
.glsr-pagination span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: #f0f4f8 !important;
    color: #3e5f8a !important;
    border: 1px solid #d0dbe8 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
}

/* Ocultar números */
.glsr-pagination .page-numbers:not(.prev):not(.next),
.glsr-pagination .current {
    display: none !important;
}

/* Flechas */
.glsr-pagination .prev,
.glsr-pagination .next {
    font-size: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

/* Iconos flecha */
.glsr-pagination .prev::before {
    content: '\2039';
    font-size: 22px !important;
}

.glsr-pagination .next::before {
    content: '\203A';
    font-size: 22px !important;
}

/* Hover elegante */
.glsr-pagination .prev:hover,
.glsr-pagination .next:hover {
    background-color: #3e5f8a !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(62,95,138,0.25);
}

/* Movimiento sutil direccional */
.glsr-pagination .prev:hover::before {
    transform: translateX(-2px);
}

.glsr-pagination .next:hover::before {
    transform: translateX(2px);
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-3740afd *//* 1. Aplicar Open Sans a todo el formulario */
.glsr-form-wrap, 
.glsr-form-wrap * {
    font-family: 'Open Sans', sans-serif !important;
}

/* 2. Contenedor general con fondo claro y bordes suaves */
.glsr-form-wrap {
    background-color: #f8f9fa !important;
    padding: 30px !important;
    border-radius: 10px !important;
}

/* 3. Etiquetas (Labels) en negro, fuente pequeña y con asterisco */
.glsr-form-wrap label {
    color: #333 !important;
    text-transform: none !important; /* Quita las mayúsculas rígidas */
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
    display: block;
}

/* 4. Campos de texto (Inputs) con bordes muy redondeados y trazo fino */
.glsr-form-wrap input[type="text"], 
.glsr-form-wrap input[type="email"], 
.glsr-form-wrap textarea {
    border: 1px solid #a5b8d1 !important; /* Color azulino sutil del borde */
    border-radius: 25px !important; /* Bordes muy redondeados como tu ejemplo */
    padding: 10px 10px !important;
    background-color: #fff !important;
    box-shadow: none !important;
}

/* 5. El área de texto (Reseña) con menos redondez para que no se deforme */
.glsr-form-wrap textarea {
    border-radius: 10px !important;
}

/* 6. Botón de envío estilo "IMPRIMIR" */
.glsr-form-wrap button.glsr-button {
    background-color: #4a6d95 !important; /* Azul oscuro del botón de tu imagen */
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 40px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    margin-top: 20px !important;
}

/* 7. Estilo para el Toggle (Checkbox de opinión honesta) */
.glsr-form-wrap .glsr-toggle-label {
    color: #666 !important;
    font-size: 13px !important;
    text-transform: none !important;
}/* End custom CSS */