/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

::selection {
    background-color: #52bf316b;
}

/* ==============================================================
   ESTILOS GENERALES DEL CONTENEDOR DE RENTING
   ============================================================== */
.renting-options-container {
    font-family: inherit; /* Hereda la fuente del tema principal */
    margin-bottom: 30px; /* Espacio inferior para separar de otros elementos */
    padding-top: 15px; /* Espacio superior para separar la línea del contenido */
}

.renting-options-container .hey-section-title {
    font-size: 19px;         /* Tamaño de fuente que tenías */
    margin-top: 35px;        /* Margen superior que tenías */
    margin-bottom: 15px;     /* Margen inferior que tenías */
    font-weight: bold;       /* Los h3 son 'bold' por defecto, lo mantenemos */
    display: block;          /* Para que se comporte como un bloque (como un h3) */
    color: #333;             /* Un color base, similar al de los h3 estándar */
    line-height: 1.3;        /* Ajusta si es necesario para igualar al h3 */
}

/* ==============================================================
   ESTILOS DEL PRECIO DESTACADO "DESDE"
   ============================================================== */
.renting-price-highlight {
    font-size: 20px;       /* Tamaño de fuente grande para destacar */
    color: #434343;
    font-weight: 300;
}

.renting-price-value {
    color: #52bf31;     /* Color verde destacado */
    font-weight: bold;
}


/* ==============================================================
   ESTILOS DE LOS TABS DE MESES
   ============================================================== */
.renting-months-tabs {
    display: flex;          /* Para alinear los tabs horizontalmente */
    margin-bottom: 0px;    /* Reducido el margen inferior para que se pegue a la línea */
    border-bottom: 1px solid #e0e0e0; /* Línea inferior para separar de las opciones de KM */
}

.renting-month-tab {
    display: block; /* Cambiado a block para que ocupe todo el ancho disponible dentro de flex */
    flex-grow: 1; /* Para que los tabs se distribuyan equitativamente en el espacio */
    padding: 10px 10px;    /* Espacio interno del tab */
    background-color: #f0f0f0; /* Color de fondo por defecto (gris claro) */
    cursor: pointer;        /* Cursor de "mano" al pasar por encima */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para efectos hover y active */
    text-align: center; /* Centrar texto dentro del tab */
    border-radius: 5px 5px 0 0; /* Bordes redondeados en la parte superior */
    color: #333; /* Color de texto por defecto */
    font-weight: bold; /* Texto en negrita en los tabs */
    border-bottom: 2px solid transparent; /* Borde inferior transparente para efecto hover */
}

.renting-month-tab:hover {
    background-color: #e0e0e0; /* Gris un poco más oscuro al pasar el ratón */
}

.renting-month-tab.active {
    background-color: #ffffff;
    color: #52bf31;
    font-weight: bold;
    border: 1px solid #52bf31;
}


/* ==============================================================
   ESTILOS DE LAS OPCIONES DE KILOMETRAJE
   ============================================================== */
.renting-km-options {
    width: 100%; /* Ancho por defecto para pantallas pequeñas (responsive) */
    max-width: 100%; /* Asegura que no se expanda demasiado */
}
@media(min-width:769px){ /* Media query para pantallas más grandes de 768px */
    .renting-km-options {
        width: 100%; /* Ancho completo en pantallas grandes también para seguir el ejemplo */
    }
}

.renting-km-table {
    width: 100%;            /* Ancho de la tabla al 100% del contenedor */
    border-collapse: collapse; /* Colapsa los bordes de la tabla para un aspecto limpio */
    display: table; /* Asegura que se comporte como tabla (para el ancho max-width) */
    max-width: 100%; /* Asegura que no se expanda demasiado */
}

.renting-km-row {
    padding: 0;        /* Eliminado padding vertical para ajustar al ejemplo */
    border-bottom: 1px solid #e0e0e0; /* Línea divisoria entre filas */
    transition: background-color 0.2s ease; /* Transición suave para el hover */
}
.renting-km-row:last-child {
    border-bottom: none; /* Elimina la línea inferior de la última fila para evitar doble borde */
}

.renting-km-row:hover,
.renting-km-row input[type="radio"]:checked + label + .renting-price-container .renting-price {
    background-color: #f0f0f0; /* Gris claro al pasar el ratón o al seleccionar */
}
.renting-km-row input[type="radio"]:checked + label {
    font-weight: bold; /* Negrita para la etiqueta cuando el radio está seleccionado */
}
.renting-km-row input[type="radio"]:checked + label + .renting-price-container .renting-price .price-value {
    color: #000; /* Asegurar color negro en el precio cuando la fila está seleccionada */
}

.renting-km-row td {
    padding: 10px;         /* Espaciado interno de las celdas */
    vertical-align: middle; /* Alineación vertical al centro en las celdas */
}

.renting-km-row td:first-child {
    width: 70%; /* Ancho para la columna de KM, ajustable */
    padding-left: 20px; /* Añadir padding izquierdo como en el ejemplo */
}

.renting-km-row td:last-child {
    text-align: right;      /* Alinea el texto a la derecha en la última celda (precio) */
    font-weight: normal; /* Eliminada la negrita general aquí, se aplicará en el .renting-price */
    width: 30%; /* Ancho para la columna del precio, ajustable */
    padding-right: 20px; /* Añadir padding derecho como en el ejemplo */
}

.renting-km-row label {
    margin-left: 8px;       /* Espacio a la izquierda de la etiqueta del radio button */
    font-weight: normal;    /* Peso de fuente normal para la etiqueta */
}

.clickable-row {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.clickable-row:hover {
    background-color: #f8f8f8;
}

.renting-price-container {
    display: inline-block; /* Contenedor para alinear precio y sufijo */
}

.renting-price {
    font-weight: bold;      /* Negrita para el precio */
    color: #52bf31;      /* Color verde para el precio */
    white-space: nowrap; /* Evitar que el precio y el sufijo se separen en líneas diferentes */
}

.renting-price {
    color: inherit; /* Heredar color del .renting-price */
}

.renting-price .price-suffix {
    font-weight: normal;    /* Peso de fuente normal para el sufijo "/MES + IVA" */
    color: #767676;      /* Color gris para el sufijo */
    margin-left: 5px; /* Espacio entre el precio y el sufijo */
}


/* ==============================================================
   ESTILOS DEL FORMULARIO DE CONTACT FORM 7
   ============================================================== */
   
.renting-form {
    margin-top: 40px;
    background-color: #52bf31;
    border-radius: 12px;
    padding: 40px 25px 10px 25px;
}

.renting-form .hey-section-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: white;
    font-weight: bold;
    font-size: 22px;
}

.phone-option {
    padding-bottom: 35px;
}

/* Estilos generales de campos del formulario */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.empresa-fields input[type="number"],
.wpcf7-form textarea {
    width: 100%;            /* Ancho al 100% del contenedor */
    padding: 10px;         /* Espaciado interno de los campos */
    margin-bottom: 3px;    /* Espacio inferior entre campos */
    border: 1px solid #ddd; /* Borde gris claro */
    border-radius: 7px;    /* Bordes redondeados de los campos */
}

@media (min-width:768px) {
    .wpcf7-form input[type="text"],
    .wpcf7-form input[type="email"],
    .wpcf7-form input[type="tel"],
    .empresa-fields input[type="number"],
    .wpcf7-form textarea {
        font-size:14px;
    }
    .woocommerce form .form-row {
        font-size: 15px;
    }
}

/* Estilos específicos para el tipo de cliente (radio buttons) */
.client-type {
    display: flex;
    justify-content: space-between;
}

.client-type .wpcf7-list-item {
    flex: 1;
    margin: 0 5px !important;
}

/* Ocultar los radio buttons nativos */
.client-type input[type="radio"] {
    display: none !important; /* Añadimos !important para asegurar que se aplique */
}

/* Estilo para las etiquetas que actúan como botones */
.client-type .wpcf7-list-item-label {
    display: block;
    padding: 0px 7px;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #ddd;
    margin-left: 0 !important;
}

/* Estilo cuando está seleccionado */
.client-type input[type="radio"]:checked + .wpcf7-list-item-label {
    background: white;
    color: #52bf31;
    font-weight: bold;
    border: 1px solid #52bf31;
    box-shadow: 0 2px 5px rgba(82,191,49,0.2);
}

.client-type .wpcf7-list-item-label:hover {
    background: #e0e0e0;
}

/* Estilos del botón de envío del formulario */
.wpcf7-submit {
    width: 100%;            /* Ancho al 100% del contenedor */
    padding: 12px 0;        /* Espaciado vertical del botón */
    background-color: #000; /* Color de fondo negro */
    color: white;           /* Color de texto blanco */
    border: none;           /* Elimina borde */
    cursor: pointer;        /* Cursor de "mano" al pasar por encima */
    font-weight: bold;      /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    border-radius: 4px;    /* Bordes redondeados del botón */
}

.wpcf7-submit:hover {
    background-color: #333; /* Color de fondo más oscuro al pasar el ratón */
}

@media (max-width: 480px) {
    .client-type {
        flex-direction: column;
    }
    
    .client-type .wpcf7-list-item {
        margin: 5px 0 !important;
    }
}

/* ==============================================================
   ESTILOS PERSONALIZADOS FORMULARIO PRODUCTO CON CUOTA (CF7 ID: 0060921)
   ============================================================== */

/* Aplica solo en páginas de producto (.single-product) y al form específico */

/* 1. Estilo del botón de envío */
.single-product #wpcf7-f5150-p5705-o1 input.wpcf7-submit {
    background-color: #ff7925!important; /* Tu color naranja */
    color: #ffffff!important; /* Texto blanco para contraste */
    border: none!important; /* Opcional: quitar borde si lo hubiera */
    /* Mantenemos otros estilos como padding, font-weight del CSS general si quieres */
}

/* Opcional: Estilo hover para el botón */
.single-product #wpcf7-f5150-p5705-o1 input.wpcf7-submit:hover {
    background-color: #e66a1e!important; /* Naranja un poco más oscuro para hover */
}

/* --- FIN ESTILOS PERSONALIZADOS CF7 ID: 0060921 --- */


/* ==============================================================
   ESTILOS ADICIONALES (POR SI ACASO - REVISAR SI SON NECESARIOS)
   ============================================================== */
#renting-price-display {
    color: #52bf31 !important; /* Forzar color verde - REVISA SI ES NECESARIO EL !important */
}

#renting-price-display .euro-symbol {
    color: inherit !important; /* Forzar herencia de color - REVISA SI ES NECESARIO EL !important */
}


/* Estilos para el encabezado del vehículo */
.vehicle-header-container {
    position: relative;
    margin-bottom: 40px;
}

.vehicle-featured-image {
    position: relative;
    height: 700px; /* Mantén tu altura original */
    background-size: cover;
    background-position: center;
    z-index: 0; /* Base para z-index de hijos */
}

.vehicle-top-elements-overlay {
    position: absolute;
    top: 20px;
    left: 15px;  /* Ajustado a 15px para móviles también */
    right: 15px; /* Ajustado a 15px para móviles también */
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espacio mínimo entre ellos */
    overflow: hidden; /* <<<< AÑADIR ESTO para evitar que los hijos desborden este contenedor */
}

.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb {
    color: #fff;
    font-size: 13px;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb a,
.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb span.breadcrumb-separator {
    color: #f0f0f0;
    text-decoration: none;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb a:first-child {
    line-height: 1;
}

.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb a:first-child svg {
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

.vehicle-breadcrumb-wrapper .woocommerce-breadcrumb a:first-child span {
    vertical-align: middle; /* Intenta alinear el span con la línea media */
    line-height: inherit; /* Heredar el line-height: 1 del padre 'a' */
}

.vehicle-featured-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 5%, rgb(0 0 0 / 12%) 37%, rgba(0, 0, 0, 0.15) 55%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
    pointer-events: none; /* Para que no interfiera con clics si hubiera algo detrás */
}

/* Asegura que los overlays de texto estén por encima de la capa oscura */
.vehicle-breadcrumb-overlay,
.vehicle-title-overlay,
.vehicle-specs-overlay {
    position: relative; /* O manten la posición absoluta que ya tienen */
    z-index: 2; /* Asegura que estén por encima del ::before (z-index: 1) */
}

.vehicle-specs-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 15px 40px 15px; /* Más padding inferior */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgb(0 0 0 / 9%));
}

.vehicle-specs-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end; /* Alinea elementos al fondo */
}

.vehicle-spec-item {
    background: rgba(255, 255, 255, 0.93);
    padding: 10px 8px; /* Reducido */
    border-radius: 8px; /* Un poco menos redondeado */
    text-align: center;
    backdrop-filter: blur(3px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); /* Menos pronunciado */
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 8px; /* Menos margen */
    font-size: 0.85rem; /* Reducir el tamaño de la fuente */
}

.spec-label {
    font-size: 0.75rem; /* Hacer la etiqueta más pequeña */
    font-weight: 500;
}

.spec-value {
    font-size: 0.9rem; /* Hacer el valor más pequeño */
    font-weight: 600;
}

/* Cabecera con título y precio */
.vehicle-title-overlay {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
    padding: 0 15px;
    transition: top 0.3s ease-out;
}

.vehicle-title {
    color: #fff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-size: 2.5em;
    margin: 0 0 10px 0 !important;
    font-weight: bold;
}

.vehicle-base-price {
    color: #fff;
    font-size: 1.8em;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.vehicle-price-header {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    font-size: 1.8em;
    line-height: 1.3;
}

.price-prefix,
.price-suffix,
.price-tax {
    font-weight: 300;
    opacity: 0.8;
}

.price-amount {
    font-weight: 700;
    margin: 0 3px;
}

/* Estilos para el título sobre la tabla de cuotas */
.product-title-over-table {
    font-size: 24px;
    color: #333;
    font-weight: bold;
    padding-bottom: 10px;
}

@media (max-width: 768px) {
    .product-title-over-table {
        margin-top: -25px;
    }
}

.price-value {
    font-weight: bold;
}

#renting-price-text {
    font-weight: 200;
    text-align: left;
    margin-bottom: 0px;
}

.clickable-row.selected {
    background-color: #fafafa !important;
    box-shadow: inset 0 0 0 1px #e0e0e0;
}

.clickable-row.selected td {
    position: relative;
    background-color: #fafafa !important;
}

.clickable-row.selected td:first-child::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #52bf31;
    opacity: 0.3;
}

.vehicle-breadcrumb-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
}

/* Campos específicos de empresa */
.empresa-fields input[type="number"],
.empresa-fields input[type="text"] {
    width: 100% !important;
    box-sizing: border-box; /* Incluye padding en el ancho total */
}

/* Asegurar que el contenedor también ocupe todo el espacio */
.empresa-fields .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* Ajustar para móviles */
@media (max-width: 768px) {
    .vehicle-featured-image {
        height: 700px;
    }
    
    .vehicle-specs-overlay {
        padding: 20px 10px 30px 10px;
    }
    
    .vehicle-specs-grid {
        grid-template-columns: 1fr 1fr !important; /* 2 columnas */
        grid-auto-rows: auto;
        row-gap: 15px;
    }
    
    .vehicle-specs-grid > .vehicle-spec-item:nth-child(5) {
        grid-column: 1 / -1; /* Ocupa todo el ancho */
        justify-self: center;
        max-width: 250px; /* Ancho máximo para mantener proporción */
        width: 100%;
        margin-top: 10px;
    }
    
    .vehicle-spec-item {
        margin: 0 5px;
    }
    
    .spec-label {
        font-size: 11px;
    }
    
    .spec-value {
        font-size: 14px;
    }
    
    .vehicle-title {
        font-size: 1.8em;
    }
    
    .vehicle-base-price {
        font-size: 1.4em;
    }
    
    .price-main {
        font-size: 1.4em;
    }
    
    .price-suffix {
        font-size: 0.65em;
    }
    
    .price-tax {
        font-size: 0.65em;
    }
    
    .vehicle-price-header {
        font-size: 1.4em;
    }
    
    .vehicle-title {
        font-size: 1.8em !important;
    }
}

/* Ajuste de margen para entry-content en productos */
@media (min-width: 769px) {
    .single-product .entry-content {
        margin-top: -25px !important;
    }
}
@media (max-width: 768px) {
    .single-product .entry-content {
        margin-top: -20px!important;
    }
    .vehicle-header-container {
        margin-bottom: 20px!important;
    }
}


@media(min-width: 769px) {
    .woocommerce #content div.product div.summary, 
    .woocommerce div.product div.summary, 
    .woocommerce-page #content div.product div.summary, 
    .woocommerce-page div.product div.summary {
        width: 55%;
        padding: 0px 100px;
    }

    .woocommerce #content div.product div.images, 
    .woocommerce div.product div.images, 
    .woocommerce-page #content div.product div.images, 
    .woocommerce-page div.product div.images {
        width: 45%;
        padding: 0px 25px;
    }
}

.vehicle-breadcrumb-overlay .woocommerce-breadcrumb {
    display: flex
;
}

@media(max-width: 768px) {
    .woocommerce #content div.product div.images, .woocommerce #content div.product div.summary, .woocommerce div.product div.images, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.images, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.images, .woocommerce-page div.product div.summary {
        float: none;
        width: 100%;
        padding: 15px;
    }
    
    .vehicle-breadcrumb-overlay {
        display: block;
        position: absolute; /* Asegura que esté posicionado */
        top: 20px; /* Ajusta según necesites */
        left: 15px; /* Ajusta según necesites */
        z-index: 3; /* Asegura que esté por encima de otros elementos */
        width: calc(100% - 30px); /* Ocupa ancho menos los paddings laterales */
    }
    
    .vehicle-breadcrumb-overlay .woocommerce-breadcrumb {
        color: #fff;
        font-size: 13.25px;
        display: flex;          /* Activa Flexbox */
        justify-content: flex-start;
        align-items: center;    /* Centra los elementos verticalmente */
        flex-wrap: wrap;        /* Permite que los elementos pasen a línea inferior si no caben */
        text-align: center;     /* Asegura centrado del texto si envuelve */
    }
    
    /*.vehicle-breadcrumb-overlay .woocommerce-breadcrumb.breadcrumb-multiline > * {*/
        /*margin-bottom: 8px;*/
    /*}*/
    
    .vehicle-breadcrumb-overlay .woocommerce-breadcrumb a {
         color: #f0f0f0; /* Color enlaces un poco diferente */
    }
    
    .vehicle-title-overlay {
        position: absolute; /* Asegúrate de que sigue siendo absoluto */
        /* Mueve el bloque hacia abajo para dejar espacio al breadcrumb */
        top: 75px; /* Ajusta este valor según el espacio que necesite el breadcrumb (ej: 20px top + 30px alto + 15px margen) */
        left: 15px; /* Alinea a la izquierda con padding */
        right: 15px; /* Añade padding derecho */
        width: auto; /* El ancho se define por left/right */
        text-align: left; /* Alinea el texto (título y precio) a la izquierda */
        z-index: 2; /* Mantenlo por encima del oscurecimiento */
        padding: 0; /* Resetea padding si lo tenía */
    }
    
    /* Ajusta márgenes si es necesario para el título y precio */
     .vehicle-title-overlay .vehicle-title {
         margin-bottom: 8px !important; /* Ajusta espacio bajo el título */
         font-size: 1.6em !important; /* Puedes reducir un poco el tamaño si es necesario */
     }
      .vehicle-title-overlay .vehicle-price-header {
         font-size: 1.3em !important; /* Puedes reducir un poco el tamaño */
         line-height: 1.2;
     }
}

@media (min-width: 769px) {
    .woocommerce:where(body:not(.woocommerce-uses-block-theme)) .woocommerce-breadcrumb {
        font-size: 12px;
    }
}

/* Contenedor principal de la galería */
ol.flex-control-nav.flex-control-thumbs {
    position: relative;
}

/* Thumbnails container */
ol.flex-control-nav.flex-control-thumbs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 10px;
    margin-top: 15px;
}

/* Thumbnails individuales */
ol.flex-control-nav.flex-control-thumbs li {
    flex: 0 0 auto;
    width: 80px !important; /* Ancho fijo */
    height: 60px !important; /* Alto fijo */
    margin: 0 !important;
}

ol.flex-control-nav.flex-control-thumbs img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 4px;
}

/* Ocultar scrollbar en navegadores WebKit */
ol.flex-control-nav.flex-control-thumbs::-webkit-scrollbar {
    display: none;
}


.empresa-fields {
    display: none !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}



.form-row-inline {
    display: flex;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

.form-row-inline p {
    flex: 1; /* Hace que ambos campos ocupen el mismo espacio */
    margin: 0; /* Elimina márgenes */
}

.form-row-inline p:first-of-type {
    padding-right: 15px;
}

.acceptance_renting {
    font-size: 13px;
}

.wpcf7-list-item{
    margin: 0px!important;
}




/* Contenido adicional del producto */
.product-additional-content {
    width: 100%;
    clear: both;
}

.product-additional-content > *:first-child {
    margin-top: 0 !important;
}

.product-additional-content > *:last-child {
    margin-bottom: 0 !important;
}

@media(min-width: 769px) {
    .product-additional-content {
        margin: 80px auto;
        padding: 0 25px;
    }
}

.product-description_title {
    font-size: 28px;
}





/* ==============================================================
   ESTILOS SECCIÓN "QUÉ INCLUYE LA CUOTA" - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-servicios-incluidos-section {
    background-color: #ffffff!important;
    padding: 50px 20px;
    margin: 30px auto 0px auto!important;
    position: relative;
    overflow: hidden;
}

/* Título de la Sección */
.hey-servicios-incluidos-section .h2-servicios {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 45px; /* Más espacio antes del grid */
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

/* Línea decorativa opcional bajo el título */
.hey-servicios-incluidos-section .h2-servicios::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #52bf31;
    border-radius: 2px;
}

/* Grid de Servicios */
.hey-servicios-incluidos-section .servicios-grid {
    display: grid;
    gap: 25px; /* Espacio uniforme */
    max-width: 1000px; /* Ajustar si es necesario */
    margin: 0 auto;
    /* Definir columnas en media query para desktop */
}

/* Item Individual de Servicio (AHORA ES UNA TARJETA) */
.hey-servicios-incluidos-section .servicio-item {
    background-color: #f8f9fa; /* Fondo gris muy claro para la tarjeta */
    border-radius: 12px; /* Bordes redondeados para la tarjeta */
    padding: 25px 20px; /* Padding interno de la tarjeta */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
    border: 1px solid #e9ecef; /* Borde ligero */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%; /* Asegura que todas las tarjetas en una fila tengan la misma altura */
    box-sizing: border-box; /* Incluye padding y borde en el tamaño */
}

.hey-servicios-incluidos-section .servicio-item:hover {
    transform: translateY(-5px); /* Elevar la tarjeta */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09); /* Sombra más pronunciada */
    border-color: #d8dcdf;
}

/* Icono del Servicio */
.hey-servicios-incluidos-section .servicio-icon {
    width: 48px; /* Tamaño ajustado */
    height: 48px;
    margin-bottom: 18px; /* Más espacio bajo el icono */
    object-fit: contain;
    color: #52bf31; /* *** Hacer el icono verde *** */
    /* Si los iconos son IMG y no fuentes de iconos/SVG, el color no aplicará directamente.
       En ese caso, considera usar SVGs o fuentes de iconos, o mantenerlos negros. */
}

/* Título del Servicio */
.hey-servicios-incluidos-section .servicio-titulo {
    font-weight: 600; /* Más peso para el título del servicio */
    font-size: 16px;
    color: #222; /* Más oscuro */
    line-height: 1.4;
    margin-top: auto; /* Empuja el título hacia abajo si hay espacio extra */
    padding-top: 5px; /* Pequeño espacio sobre el título */
}

/* Texto Pequeño (si existe) */
.hey-servicios-incluidos-section .servicio-titulo small {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #666;
    margin-top: 5px;
}

/* Ajustes Específicos para PC (min-width: 769px o 1025px) */
@media (min-width: 769px) { /* Aplicar desde tabletas hacia arriba */
    .hey-servicios-incluidos-section .servicios-grid {
        /* 3 columnas para la disposición de escritorio */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1025px) {
    /* Ajuste de Ancho General de la Sección para Escritorio */
    .hey-servicios-incluidos-section {
        max-width: 1300px; /* O el valor que hayas elegido */
        /* width: 85%; */ /* O la alternativa que uses */
        padding: 60px 40px; /* Más padding en escritorio */
    }
}

/* Responsive: Móviles (Mantener 2 columnas como antes) */
@media (max-width: 767px) { /* Ajustado el breakpoint */
    .hey-servicios-incluidos-section {
        padding: 40px 15px;
        margin: 30px auto 50px auto;
    }

    .hey-servicios-incluidos-section .h2-servicios {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .hey-servicios-incluidos-section .servicios-grid {
        /* 2 columnas en pantallas pequeñas */
        grid-template-columns: repeat(2, 1fr);
        gap: 20px; /* Reducir gap en móvil */
        max-width: 100%;
    }

     .hey-servicios-incluidos-section .servicio-item {
        padding: 20px 15px;
    }

    .hey-servicios-incluidos-section .servicio-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 15px;
    }

    .hey-servicios-incluidos-section .servicio-titulo {
        font-size: 15px;
    }
    .hey-servicios-incluidos-section .servicio-titulo small {
        font-size: 13px;
    }
}

/* Limpieza (mantener de antes) */
.hey-servicios-incluidos-section .servicio-item p,
.hey-servicios-incluidos-section .servicio-item img {
    margin: 0;
}
.hey-servicios-incluidos-section .servicio-item img {
    margin-bottom: 18px; /* Ajustar margen inferior del icono */
}
.hey-servicios-incluidos-section .servicio-item br {
    display: none;
}


/*  Estilos generales del contenedor de sección de producto (reutilizable) */
    .producto-section {
        margin-top: 60px;
        margin-bottom: 40px;
        padding: 20px 0;
        background-color: #f8f9fa; /* Fondo gris claro similar a otros elementos */
        font-family: inherit; /* Hereda la fuente del tema principal */
    }

    .producto-section-title {
        color: #333; /* Color de título similar a otros títulos de sección */
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 30px;
        text-align: center;
    }

    .pricing-section-title {
        color: #333;
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 25px;
        text-align: center;
        text-transform: uppercase;
    }

    .planes-precios-section div:first-of-type {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }


/* ==============================================================
   ESTILOS SECCIÓN EQUIPAMIENTO DESTACADO - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-equipamiento-destacado-section {
    background-color: #f8f9fa; /* Fondo gris claro consistente */
    padding: 40px 20px;
    margin: 60px auto;
    /* max-width: 1100px; <= Controlado por el media query de abajo */
    border-radius: 12px;
    border: 1px solid #e7e7e7;
}

/* Título de la Sección (hereda estilos generales, pero podemos ajustar si es necesario) */
.hey-equipamiento-destacado-section .producto-section-title {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    margin-bottom: 35px;
    text-align: center;
}

/* Grid de Equipamiento */
.hey-equipamiento-destacado-section .equipamiento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Ajusta minmax si es necesario */
    gap: 25px; /* Espacio consistente */
}

/* Tarjeta Individual de Equipamiento (.producto-card) */
.hey-equipamiento-destacado-section .equipamiento-item {
    background-color: #ffffff; /* Fondo blanco para la tarjeta */
    border-radius: 8px;
    padding: 25px; /* Más padding interno */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); /* Sombra suave */
    border: 1px solid #e9ecef;
    display: flex;
    flex-direction: column; /* Asegurar apilamiento vertical interno */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.hey-equipamiento-destacado-section .equipamiento-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

/* Icono Check */
.hey-equipamiento-destacado-section .icono-check {
    color: #ffffff; /* Icono blanco */
    background-color: #52bf31; /* Fondo verde corporativo */
    font-size: 16px; /* Tamaño del icono interno */
    width: 32px; /* Ancho del círculo */
    height: 32px; /* Alto del círculo */
    border-radius: 50%; /* Hacerlo circular */
    display: inline-flex; /* Usar flex para centrar el icono <i> */
    align-items: center;
    justify-content: center;
    margin-bottom: 18px; /* Espacio debajo del icono */
    flex-shrink: 0; /* Evitar que se encoja */
}

.hey-equipamiento-destacado-section .icono-check i {
    line-height: 1; /* Ajustar si el icono no se centra bien verticalmente */
    display: block;
}


/* Título de la Tarjeta */
.hey-equipamiento-destacado-section .producto-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-top: 0; /* Resetear margen superior */
    margin-bottom: 10px; /* Espacio debajo del título */
    line-height: 1.4;
}

/* Descripción de la Tarjeta */
.hey-equipamiento-destacado-section .producto-card-text {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 0; /* Asegurar que no haya margen extra al final */
    flex-grow: 1; /* Permite que el texto ocupe espacio si las tarjetas tienen alturas variables */
}

/* Ajuste de Ancho para Escritorio (Hereda del bloque anterior) */
@media (min-width: 1025px) {
    .hey-equipamiento-destacado-section {
        max-width: 1300px; /* O el valor que hayas elegido */
        /* width: 85%; */ /* O la alternativa que uses */
    }
}

@media (min-width: 769px) {
    .hey-equipamiento-destacado-section .equipamiento-grid {
        padding: 0 35px;
    }
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-equipamiento-destacado-section {
        padding: 30px 15px;
        margin: 40px auto;
    }

    .hey-equipamiento-destacado-section .producto-section-title {
        font-size: 22px;
        margin-bottom: 25px;
    }

    .hey-equipamiento-destacado-section .equipamiento-grid {
        grid-template-columns: 1fr; /* Forzar una columna */
        gap: 20px;
    }

    .hey-equipamiento-destacado-section .equipamiento-item {
        padding: 20px;
    }

    .hey-equipamiento-destacado-section .icono-check {
        width: 28px;
        height: 28px;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .hey-equipamiento-destacado-section .producto-card-title {
        font-size: 17px;
    }

    .hey-equipamiento-destacado-section .producto-card-text {
        font-size: 14px;
    }
}


/* ==============================================================
   ESTILOS SECCIÓN ESPECIFICACIONES TÉCNICAS - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-especificaciones-section {
    background-color: #ffffff;
    padding: 40px 20px;
    margin: 60px auto;
    max-width: 1100px;
    overflow: hidden;
}

/* Título Principal de la Sección */
.hey-especificaciones-section .especificaciones-title {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    margin-bottom: 40px; /* Más espacio antes de las categorías */
    text-align: left;
}

/* Contenedor de cada Categoría (Carrocería, Motor, etc.) */
.hey-especificaciones-section .especificaciones-categoria {
    margin-bottom: 40px; /* Espacio entre categorías */
}
.hey-especificaciones-section .especificaciones-categoria:last-child {
    margin-bottom: 0; /* Sin margen inferior en la última categoría */
}

/* Título de Categoría */
.hey-especificaciones-section .especificaciones-categoria-titulo {
    font-size: 20px;
    font-weight: 600; /* Ligeramente más peso */
    color: #222;
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #52bf31; /* Línea inferior con color corporativo */
    display: inline-block; /* Para que el borde se ajuste al texto */
}

/* Grid de Especificaciones dentro de cada categoría */
.hey-especificaciones-section .especificaciones-grid {
    display: grid;
    /* Usar auto-fit para mejor responsividad, ajustar minmax según necesidad */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 25px; /* Espacio entre items */
}

/* Item Individual de Especificación */
.hey-especificaciones-section .especificacion-item {
    display: flex;
    align-items: center; /* Centrar verticalmente icono y texto */
    background-color: #f8f9fa; /* Fondo gris claro para cada item */
    border: 1px solid #e9ecef; /* Borde muy sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 15px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    overflow: hidden; /* Asegurar que el contenido respete el borde */
}

.hey-especificaciones-section .especificacion-item:hover {
    /* transform: translateY(-3px); */ /* Efecto sutil al pasar el ratón */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); */
}

/* Icono de Especificación */
.hey-especificaciones-section .especificacion-icon {
    width: 40px; /* Icono ligeramente más pequeño */
    height: 40px;
    margin-right: 15px;
    flex-shrink: 0; /* Evitar que el icono se encoja */
    opacity: 0.85; /* Hacer el icono un poco menos dominante */
    object-fit: contain; /* Asegurar que el icono se vea completo */
}

/* Contenedor del Texto (Título + Dato) */
.hey-especificaciones-section .especificacion-texto {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Ocupa el espacio restante */
}

/* Título/Etiqueta de la Especificación */
.hey-especificaciones-section .especificacion-titulo {
    font-size: 14px; /* Más pequeño */
    color: #666; /* Color gris */
    margin-bottom: 3px; /* Menos espacio */
    line-height: 1.3;
    font-weight: 400; /* Peso normal */
}

/* Dato/Valor de la Especificación */
.hey-especificaciones-section .especificacion-dato {
    font-size: 17px; /* Más grande que la etiqueta */
    font-weight: 600; /* Más peso */
    color: #222; /* Color oscuro */
    line-height: 1.3;
    margin: 0; /* Resetear margen del párrafo */
}

/* Lista para Dimensiones */
.hey-especificaciones-section .especificacion-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 17px; /* Mismo tamaño que el dato */
    font-weight: 600; /* Mismo peso que el dato */
    color: #222;
    line-height: 1.4; /* Ajustar interlineado si es necesario */
}

.hey-especificaciones-section .especificacion-lista li {
    margin-bottom: 0; /* Sin espacio extra entre dimensiones */
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-especificaciones-section {
        padding: 40px 15px;
        margin: 80px auto!important;
    }

    .hey-especificaciones-section .especificaciones-title {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .hey-especificaciones-section .especificaciones-categoria-titulo {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .hey-especificaciones-section .especificaciones-grid {
        /* Mantener auto-fit o forzar una columna si se prefiere */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        /* grid-template-columns: 1fr; */ /* Descomentar para forzar 1 columna */
        gap: 15px;
    }

    .hey-especificaciones-section .especificacion-item {
        padding: 12px;
    }

    .hey-especificaciones-section .especificacion-icon {
        width: 35px;
        height: 35px;
        margin-right: 12px;
    }

    .hey-especificaciones-section .especificacion-titulo {
        font-size: 13px;
    }

    .hey-especificaciones-section .especificacion-dato,
    .hey-especificaciones-section .especificacion-lista {
        font-size: 16px;
    }
}

@media (min-width: 769px) {
    .hey-especificaciones-section .especificaciones-categoria {
        padding: 0 35px;
    }
}

    /* ==============================================================
   ESTILOS SECCIÓN EQUIPAMIENTO COMPLETO - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-equipamiento-section {
    background-color: #f8f9fa; /* Fondo gris claro consistente */
    padding: 40px 20px;
    margin: 60px auto;
    max-width: 1100px; /* Mismo ancho que la sección CTA */
    border-radius: 12px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); */ /* Sombra opcional, más sutil */
    border: 1px solid #e7e7e7; /* Borde ligero */
}

/* Título de la Sección */
.hey-equipamiento-section .producto-section-title {
    font-size: 26px; /* Consistente con CTA */
    font-weight: 600;
    color: #333;
    margin-bottom: 35px; /* Más espacio antes de los tabs */
    text-align: center;
}

/* Contenedor General de Tabs */
.hey-equipamiento-section .tabs-equipamiento {
    /* No necesita mucho estilo, es el contenedor */
}

/* Barra de Navegación de Tabs */
.hey-equipamiento-section .tab-links {
    display: flex;
    flex-wrap: wrap; /* Permite envolver en móvil */
    gap: 5px; /* Espacio entre tabs */
    margin-bottom: 0; /* Quitar margen inferior para pegar al borde del contenido */
    border-bottom: 2px solid #ddd; /* Línea base para los tabs */
    padding-left: 0; /* Resetear padding si lo tuviera */
}

/* Estilo de cada Tab (Botón) */
.hey-equipamiento-section .hey-tab-link {
    flex-grow: 1; /* Ocupan espacio equitativamente */
    padding: 12px 15px;
    background-color: #f0f0f0;
    color: #555;
    border: 1px solid #ddd;
    border-bottom: none; /* El borde inferior lo da la barra de navegación */
    border-radius: 8px 8px 0 0; /* Bordes redondeados superiores */
    cursor: pointer;
    font-weight: 500; /* Ligeramente menos pesado que el activo */
    text-align: center;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    margin-bottom: -2px; /* Solapa ligeramente con la línea inferior para el efecto activo */
    position: relative; /* Para el pseudo-elemento ::after */
    font-size: 15px;
}

.hey-equipamiento-section .hey-tab-link:hover {
    background-color: #e8e8e8;
    color: #333;
}

/* Estilo del Tab Activo */
.hey-equipamiento-section .hey-tab-link.active {
    background-color: #ffffff; /* Fondo blanco para destacar */
    color: #52bf31; /* Color corporativo */
    font-weight: 600; /* Más peso */
    border-color: #ddd #ddd transparent #ddd; /* Bordes laterales y superior, transparente abajo */
    z-index: 1; /* Para estar por encima de la línea base */
}

/* Contenido del Tab */
.hey-equipamiento-section .hey-tab-content {
    display: none; /* Oculto por defecto */
    background-color: #ffffff; /* Fondo blanco */
    padding: 25px 30px; /* Padding interno generoso */
    border: 1px solid #ddd; /* Borde alrededor */
    border-top: none; /* Sin borde superior, ya lo da el tab activo */
    border-radius: 0 0 8px 8px; /* Bordes redondeados inferiores */
    min-height: 200px; /* Altura mínima para evitar saltos */
}

.hey-equipamiento-section .hey-tab-content.active {
    display: block; /* Mostrar contenido activo */
}

/* Estilo de la Lista de Equipamiento (ul) */
.hey-equipamiento-section .equipamiento-lista-completa {
    list-style: none; /* Quitar bullets por defecto */
    padding: 0;
    margin: 0;
    /* Opcional: Usar columnas en escritorio para mejor legibilidad */
    column-count: 2;
    column-gap: 40px;
}

/* Estilo de cada Item de Equipamiento (li) */
.hey-equipamiento-section .equipamiento-lista-completa li {
    margin-bottom: 12px; /* Espacio entre items */
    font-size: 15px;
    color: #444;
    line-height: 1.5;
    padding-left: 20px; /* Espacio para pseudo-elemento (bullet/check) */
    position: relative; /* Para posicionar el pseudo-elemento */
    break-inside: avoid-column; /* Evitar que un item se corte entre columnas */
}

/* Añadir un 'bullet' personalizado o icono */
.hey-equipamiento-section .equipamiento-lista-completa li::before {
    content: "\2714"; /* Código para un checkmark (✓) */
    /* content: "\2022"; */ /* Código para un bullet (•) */
    position: absolute;
    left: 0;
    top: 1px; /* Ajuste fino vertical */
    color: #52bf31; /* Color corporativo */
    font-weight: bold;
    font-size: 14px;
}

/* Estilo del Texto Resaltado (strong) */
.hey-equipamiento-section .equipamiento-lista-completa li strong {
    font-weight: 600; /* Un poco más de peso */
    color: #222; /* Color más oscuro */
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-equipamiento-section {
        padding: 40px 15px;
        margin: 80px auto !important;
    }

    .hey-equipamiento-section .producto-section-title {
        font-size: 22px;
        margin-bottom: 25px;
    }

    /* Ajustar tabs en móvil si se envuelven */
    .hey-equipamiento-section .tab-links {
       justify-content: center; /* Centrar tabs si se envuelven */
    }

     .hey-equipamiento-section .hey-tab-link {
        flex-basis: auto; /* Permitir que tomen su ancho natural si se envuelven */
        flex-grow: 0;
        font-size: 14px;
        padding: 10px 12px;
    }

    .hey-equipamiento-section .hey-tab-content {
        padding: 20px;
    }

    /* Desactivar columnas en móvil */
    .hey-equipamiento-section .equipamiento-lista-completa {
        column-count: 1;
    }

    .hey-equipamiento-section .equipamiento-lista-completa li {
        font-size: 14px;
        padding-left: 18px;
        margin-bottom: 10px;
    }

    .hey-equipamiento-section .equipamiento-lista-completa li::before {
        font-size: 13px;
    }
}

/* Preguntas frecuentes Accordion Styles - Inicio */
.car-rental-faq-section {
    padding: 30px 20px;
    font-family: inherit;
   /* margin-top: 60px;*/
    margin-bottom: 40px;
}

.car-rental-faq-container {
    max-width: 1200px;
    margin: 0 auto;
}

.car-rental-faq-section .producto-section-title {
    text-align: left;
    margin-bottom: 30px;
    font-size: 24px;
}


/* ==============================================================
   ESTILOS SECCIÓN "CÓMO FUNCIONA" - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-como-funciona-section {
    background-color: #ffffff; /* Cambiado a fondo blanco */
    padding: 50px 20px;
    margin: 60px auto;
    /* max-width sigue controlado por media query */
    border-radius: 12px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); /* Añadir sombra */
    overflow: hidden;
}

/* Nuevo: Contenedor Flex para Imagen y Pasos */
.hey-como-funciona-container {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center; /* Alinear verticalmente */
    max-width: 1100px; /* Ancho del contenido interno */
    margin: 0 auto; /* Centrar contenido */
}

/* Nuevo: Columna Imagen */
.hey-como-funciona-image-col {
    flex: 1 1 40%; /* Ajustar proporción según necesidad */
    min-width: 280px;
}

.hey-como-funciona-image {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Nuevo: Columna Pasos */
.hey-como-funciona-steps-col {
    flex: 1 1 55%;
    min-width: 300px;
}

/* Título de la Sección (Ahora dentro de la columna de pasos) */
.hey-como-funciona-section .producto-section-title {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 30px; /* Menos margen antes del grid */
    text-align: left; /* Alinear a la izquierda */
    padding-bottom: 8px;
    border-bottom: 2px solid #52bf31; /* Línea bajo el texto */
    display: inline-block; /* Ajustar borde al texto */
    position: static; /* Quitar posicionamiento relativo si no se usa ::after */
}
/* Quitar o ajustar el ::after si no se quiere la línea centrada */
.hey-como-funciona-section .producto-section-title::after {
    display: none; /* Ocultar línea centrada */
}


/* Grid de Pasos (Ahora dentro de su columna) */
.hey-como-funciona-section .como-funciona-grid {
    display: grid;
    grid-template-columns: 1fr; /* Apilar pasos verticalmente */
    gap: 20px; /* Espacio entre pasos */
    max-width: none; /* Ya no necesita max-width */
    margin: 0; /* Ya no necesita centrarse */
}

/* Item Individual (Paso) - Ajustes menores */
.hey-como-funciona-section .como-funciona-item {
    background-color: #f8f9fa; /* Fondo gris claro para diferenciar */
    padding: 25px 20px;
    text-align: left; /* Alinear texto a la izquierda */
    flex-direction: row; /* Icono/Número al lado del texto */
    align-items: flex-start; /* Alinear al inicio verticalmente */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-color: #e9ecef;
}

.hey-como-funciona-section .como-funciona-item:hover {
   transform: none; /* Quitar efecto hover de elevación si se prefiere */
   box-shadow: 0 3px 10px rgba(0,0,0,0.07); /* Sombra sutil en hover */
}

/* Contenedor para Icono/Número */
.hey-como-funciona-section .como-funciona-icon-numero-wrap { /* Necesitarás añadir este div en el PHP si quieres número e icono juntos */
    flex-shrink: 0;
    margin-right: 15px;
    /* Estilos adicionales si es necesario */
}


/* Icono del Paso */
.hey-como-funciona-section .como-funciona-icon {
    width: 40px; /* Más pequeño */
    height: 40px;
    margin-bottom: 0; /* Sin margen inferior */
    margin-right: 15px; /* Espacio a la derecha */
    flex-shrink: 0;
    color: #52bf31;
}

/* Número del Paso */
.hey-como-funciona-section .como-funciona-numero {
    display: inline-block;     /* Para que el padding funcione y se ajuste al texto */
    font-size: 14px;           /* Tamaño de fuente (ajustar si es necesario) */
    font-weight: 700;          /* Negrita */
    color: #ffffff;            /* Texto blanco */
    background-color: #52bf31; /* Fondo verde corporativo */
    border-radius: 7px;        /* Esquinas redondeadas solicitadas */
    padding: 6px 14px;         /* Padding interno (vertical, horizontal) - ajusta para el tamaño deseado */
    text-align: center;
    flex-shrink: 0;            /* Evitar que se encoja */
    line-height: 1.4;          /* Altura de línea normal */
    /* Quitar width, height, line-height fijos (eran para el círculo) */
    /* Los márgenes se manejan en media queries */
}


/* Contenedor Texto (Título + Descripción) */
.hey-como-funciona-section .como-funciona-text-wrap { /* Añade este div en PHP para agrupar título y desc */
    flex-grow: 1;
}

/* Título del Paso */
.hey-como-funciona-section .como-funciona-titulo {
    font-size: 17px;
    margin-bottom: 8px;
}

/* Descripción del Paso */
.hey-como-funciona-section .como-funciona-descripcion {
    font-size: 14px;
    line-height: 1.5;
}


/* Ajuste de Ancho General para Escritorio */
@media (min-width: 1025px) {
    .hey-como-funciona-section {
        max-width: 1300px; /* O el valor que hayas elegido */
        padding: 60px 40px;
    }
     .hey-como-funciona-container {
        max-width: 1200px; /* Ajustar ancho interno si es necesario */
        gap: 50px; /* Más espacio en escritorio */
    }
}

@media (min-width: 769px) {
    .hey-como-funciona-section .como-funciona-numero {
        margin-right: 15px; /* Espacio a la derecha */
        margin-bottom: 15px;   /* Sin espacio abajo */
    }
    /* Ajusta el item para el layout horizontal si no lo hicimos antes */
     .hey-como-funciona-section .como-funciona-item {
        flex-direction: row;
        align-items: center; /* Centrar verticalmente ahora que no es un círculo alto */
        text-align: left;
    }
     .hey-como-funciona-section .como-funciona-titulo {
         margin-bottom: 5px; /* Menos espacio si está al lado */
         font-size: 18px;
         font-weight: bold;
     }
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-como-funciona-section {
        padding: 40px 15px;
        margin: 40px auto;
    }
    .hey-como-funciona-container {
        flex-direction: column; /* Apilar */
        gap: 30px;
        max-width: 100%;
    }
    .hey-como-funciona-image-col,
    .hey-como-funciona-steps-col {
        flex-basis: 100%;
        width: 100%;
    }
    .hey-como-funciona-section .producto-section-title {
        font-size: 26px;
        text-align: center; /* Centrar título en móvil */
        margin-bottom: 25px;
        display: block; /* Asegurar que ocupe ancho para centrar bien */
        border-bottom: none; /* Quitar borde en móvil */
    }
    .hey-como-funciona-section .producto-section-title::after {
       display: block; /* Mostrar línea centrada en móvil */
    }

    .hey-como-funciona-section .como-funciona-grid {
       max-width: 100%;
       gap: 15px;
    }
     .hey-como-funciona-section .como-funciona-item {
        flex-direction: column; /* Apilar icono/num y texto en móvil */
        text-align: center; /* Centrar texto */
        align-items: center;
        padding: 20px;
    }
    .hey-como-funciona-section .como-funciona-numero {
        margin-right: 0;    /* Sin espacio a la derecha */
        margin-bottom: 15px; /* Espacio abajo */
        font-size: 15px;
        padding: 5px 12px;
    }
    .hey-como-funciona-section .como-funciona-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .hey-como-funciona-section .como-funciona-titulo {
        margin-bottom: 8px; /* Restaurar o ajustar margen inferior título */
        font-size: 18px;
        font-weight: bold;
    }
    .hey-como-funciona-section .como-funciona-descripcion {
        font-size: 14px;
    }
}


.woocommerce div.product div.summary {
        margin-bottom: 0px;
    }
    

/* Separador visual entre secciones */
.seccion-separador {
    width: 100%;
    height: 60px;
    clear: both;
    display: block;
}

@media (max-width: 768px) {
    .seccion-separador {
        display: none;
    }
}

/* Estilos para las secciones de productos */
.producto-section {
    margin-top: 60px;
    margin-bottom: 40px;

}

.servicios-incluidos {
    margin-top: 20px !important; /* Ajustado porque ahora tenemos el separador */
    margin-bottom: 40px;
    padding: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.h2-servicios {
    color: #333;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

@media(min-width: 768px) {
    .equipamiento-completo-section {
        width: 80%!important;
        padding: 40px;
        border-radius: 12px;
    }
}

/* Asegurar espaciado entre las secciones de renting */
.como-funciona-renting-section, 
.especificaciones-tecnicas-section, 
.equipamiento-completo-section,
.planes-precios-section, 
/*.car-rental-faq-section,*/
.equipamiento-destacado-section {
    margin-top: 60px;
    margin-bottom: 40px;
}

/* Estilos para los botones de tipo de cliente en ambos formularios */
.client-type input[type="radio"]:checked + .wpcf7-list-item-label,
.planes-precios-section .wpcf7-form .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
    background: white;
    color: #52bf31;
    font-weight: bold;
    border: 1px solid #52bf31;
    box-shadow: 0 2px 5px rgba(82,191,49,0.2);
}

/* Estilos generales para los botones de radio en la sección de planes y precios */
.planes-precios-section .wpcf7-form .wpcf7-radio {
    display: flex;
    justify-content: space-between;
}

.planes-precios-section .wpcf7-form .wpcf7-radio .wpcf7-list-item {
    flex: 1;
    margin: 0 5px !important;
}

.planes-precios-section .wpcf7-form .wpcf7-radio .wpcf7-list-item-label {
    display: block;
    padding: 4px 8px;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    border: 1px solid #ddd;
    margin-left: 0 !important;
}

.planes-precios-section .wpcf7-form .wpcf7-radio input[type="radio"] {
    display: none;
}

.planes-precios-section .wpcf7-form .wpcf7-radio .wpcf7-list-item-label:hover {
    background: #e0e0e0;
}

/* Clase adicional para manejar el estado seleccionado */
.client-type .wpcf7-list-item-label.selected {
    background: white;
    color: #52bf31;
    font-weight: bold;
    border: 1px solid #52bf31;
    box-shadow: 0 2px 5px rgba(82,191,49,0.2);
}


/* Estilos para la sección de colores */
.colores-producto {
    margin: 15px 0;
    clear: both;
    display: block;
}

.colores-producto .colores-titulo { /* Título de la sección "Colores" */
    margin-bottom: 10px;
    /* Puedes añadir más estilos como font-weight, font-size si lo deseas */
    /* font-weight: 600; */
}

.colores-producto h4 {
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 16px;
    color: #434343;
}

.colores-contenedor {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Espacio entre círculos */
    /* margin-top: 10px; /* Si el título está fuera del div principal de colores-producto */
}

.color-circulo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #c5c5c5;
    position: relative;
    cursor: pointer; /* Para indicar que es interactivo (aunque solo muestre tooltip) */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Sombra sutil */
    transition: transform 0.2s ease-in-out;
}
.color-circulo:hover {
    transform: scale(1.1);
}

.color-nombre { /* Tooltip con el nombre del color */
    display: none;
    position: absolute;
    bottom: calc(100% + 7px); /* Un poco más de espacio */
    left: 50%;
    transform: translateX(-50%);
    background-color: #333; /* Fondo oscuro para el tooltip */
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    white-space: nowrap;
    z-index: 100;
    font-size: 13px;
    line-height: 1.4;
    pointer-events: none; /* Para que no interfiera con el hover del círculo */
}
.color-circulo:hover .color-nombre {
    display: block;
}

.hey-color-a-consultar .color-consultar-texto {
    margin-top: 5px; /* Espacio después del título "Colores" */
    font-style: italic;
    color: #555555;
    padding: 5px 0; /* Un poco de padding */
    /* border-top: 1px dashed #eee; /* Opcional: un separador visual */
    /* margin-top: 10px; */
}

/* Estilos para el panel de admin */
.opciones_producto {
    padding: 15px;
    background: #f8f8f8;
    margin-top: 15px;
    border: 1px solid #ddd;
}

.color-item {
    margin-bottom: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #eee;
}

#agregar_color {
    background: #0073aa;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.eliminar-color {
    background: #dc3545;
    color: white;
    border: none;
    padding: 3px 8px;
    cursor: pointer;
    margin-left: 10px;
}



/* ==============================================================
   ESTILOS MEJORADOS SECCIÓN PLANES Y PRECIOS - ESCRITORIO
   ============================================================== */
@media (min-width: 769px) {
    .planes-precios-section {
        background: #fff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        margin: 60px auto;
        max-width: 1200px;
        position: relative;
        z-index: 1;
    }

    .planes-precios-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
    }

    .planes-precios-grid {
        position: relative;
        padding-right: 40px;
        border-right: 1px solid #eee;
    }

    .planes-precios-form {
        padding: 25px;
        background: #f8f8f8;
        border-radius: 8px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.03);
    }

    .planes-precios-item {
        padding: 0;
        box-shadow: none;
        background: transparent;
    }

    .planes-precios-imagen {
        max-height: 280px;
        width: auto;
        margin: 0 auto 25px;
        display: block;
    }

    .planes-precios-precio-container {
        justify-content: flex-start;
        margin: 20px 0;
    }

    .planes-precios-nombre {
        font-size: 24px;
        text-align: left;
        margin-bottom: 15px;
    }

    /* Ajustes específicos para el formulario CF7 */
    .planes-precios-section .wpcf7-form {
        margin-top: 0;
    }

    .planes-precios-section .wpcf7-form-control {
        width: 100% !important;
    }

    .planes-precios-section .wpcf7-submit {
        margin-top: 15px;
        font-size: 15px;
        padding: 14px 20px;
    }
}

/* Ajuste para móvil - Mantener estilos existentes */
@media (max-width: 768px) {
    .planes-precios-section {
        padding: 20px;
        margin: 40px 0;
    }
}


/* ==============================================================
   ESTILOS SECCIÓN FINAL CTA PRODUCTO - HEYrenting
   ============================================================== */

/* Contenedor Principal de la Sección */
.hey-final-cta-section {
    background-color: #52bf31;
    padding: 50px 20px;
    margin: 60px auto;
    border: 1px solid #e7e7e7;
    overflow: hidden;
}

/* Contenedor del Contenido (ya no flex) */
.hey-final-cta-container {
    max-width: 750px; /* Reducir ancho máximo ya que es solo texto/form */
    margin: 0 auto; /* Centrar */
    text-align: center; /* Centrar todo el contenido interno */
}

/* Columna Contenido (ahora ocupa todo) */
.hey-final-cta-content-col {
   /* Ya no necesita flex-basis */
   width: 100%;
}

/* Título de la Sección */
.hey-final-cta-title {
    font-size: 28px;
    font-weight: 600;
    color: #fff;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.3;
}

/* Texto Descriptivo */
.hey-final-cta-text {
    font-size: 16px;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 650px; /* Limitar ancho del párrafo para legibilidad */
    margin-left: auto;
    margin-right: auto;
}

/* Contenedor del Formulario */
.hey-final-cta-form {
   max-width: 550px; /* Limitar ancho del formulario */
   margin: 0 auto; /* Centrar formulario */
   text-align: left; /* Alinear contenido del form a la izquierda */
}

/* Estilos del formulario (inputs, botón, checkbox) se mantienen igual que antes */
.hey-final-cta-form .wpcf7-form { margin: 0; }
.hey-final-cta-form .wpcf7-form p { margin-bottom: 15px; text-align: left; } /* Asegurar alineación izquierda para párrafos del form */

.hey-final-cta-form .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
    width: 100% !important; padding: 12px 15px; border-radius: 5px; font-size: 15px; box-sizing: border-box;
}
.hey-final-cta-form .wpcf7-form-control:not([type="submit"]):focus {
    border-color: #52bf31; box-shadow: 0 0 0 2px rgba(82, 191, 49, 0.2); outline: none;
}
.hey-final-cta-form .wpcf7-submit {
    background-color: #ff7925; color: #ffffff; font-weight: bold; font-size: 16px; padding: 14px 30px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease, transform 0.1s ease; width: 100%; text-transform: uppercase; margin-top: 10px;
}
.hey-final-cta-form .wpcf7-submit:hover { background-color: #ff7925; }
.hey-final-cta-form .wpcf7-submit:active { transform: scale(0.98); }
.hey-final-cta-form .acceptance_renting label { font-size: 13px; color: #666; text-align: left; }
.hey-final-cta-form .acceptance_renting span.wpcf7-list-item { margin: 0 !important; display: flex; align-items: flex-start; text-align: left; }
.hey-final-cta-form .acceptance_renting span.wpcf7-list-item label { color: #fff; }
.hey-final-cta-form .acceptance_renting input[type="checkbox"] { margin-right: 8px; margin-top: 3px; width: auto !important; }
.hey-final-cta-form p.acceptance_renting,
.hey-final-cta-form span.wpcf7-form-control-wrap.acceptance_renting { margin-top: -25px; margin-bottom: -25px; text-align: left; }


/* Ajuste de Ancho para Escritorio */
@media (min-width: 1025px) {
    .hey-final-cta-section {
        padding: 60px 40px;
    }
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-final-cta-section {
        padding: 40px 15px;
        margin: 40px auto -40px auto;
    }
    
    .hey-final-cta-container { max-width: 100%; }
    .hey-final-cta-title { font-size: 24px; }
    .hey-final-cta-text { font-size: 15px; margin-bottom: 20px; }
    .hey-final-cta-form { max-width: 100%; }
    .hey-final-cta-form .wpcf7-submit { padding: 12px 25px; font-size: 15px; }
}


/* --- ESTILOS MINIATURA PERSONALIZADA HEYrenting --- */

/* Contenedor principal de la miniatura personalizada */
.wc-block-product-template .wc-block-product .heyrenting-product-thumbnail {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ocupa toda la altura del LI */
    border-radius: 12px; /* Bordes redondeados */
    overflow: hidden; /* Asegura que el contenido respete los bordes */
    position: relative; /* Para posicionar elementos internos */
    color: #333; /* Color de texto por defecto */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none; /* Asegura que el enlace no tenga subrayado */
    border: 1px solid #dbdbdb;
    box-shadow: 1px 5px 12px -1px rgb(165 165 165 / 47%);
}

ul.wc-block-product-template li.wc-block-product .heyrenting-product-thumbnail:hover {
    box-shadow: 0 5px 15px #00000061;
}

/* Enlace que envuelve todo */
.heyrenting-product-thumbnail a.heyrenting-thumbnail-link {
    text-decoration: none;
    color: inherit; /* Hereda color del contenedor */
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Fila superior: Título y Distintivo */
.heyrenting-product-thumbnail .thumbnail-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 15px;
    min-height: 80px;
    gap: 10px;
    box-sizing: border-box;
}

.heyrenting-product-thumbnail .thumbnail-title-and-distinction-wrapper {
    display: flex;
    flex-direction: column; /* Apila título y distinción verticalmente */
    align-items: flex-start; /* Alinea ambos a la izquierda */
    flex-grow: 1; /* Para que ocupe el espacio disponible a la izquierda del badge de estudio */
    gap: 5px; /* Espacio vertical entre el título y la distinción */
    min-height: 1px;
}

.heyrenting-product-thumbnail .thumbnail-title {
    font-size: 17px; /* Mantenemos tu tamaño de título */
    font-weight: 500;
    margin: 0;
    line-height: 1.2; /* AJUSTA ESTO: Un line-height más pequeño puede ayudar a controlar la altura del título */
    overflow-wrap: break-word;
    word-wrap: break-word;
    /* --- NUEVO: Limitar altura del título si es necesario (opcional) --- */
    /* max-height: 34px; */ /* Ejemplo: 2 líneas de 17px con line-height 1 */
    /* overflow: hidden; */   /* Si usas max-height, esto oculta el texto extra */
    /* text-overflow: ellipsis; */ /* Añade "..." si se corta */
    /* display: -webkit-box; */   /* Para truncado de múltiples líneas (WebKit) */
    /* -webkit-line-clamp: 2; */  /* Número de líneas a mostrar (WebKit) */
    /* -webkit-box-orient: vertical; */ /* (WebKit) */
    /* --- FIN NUEVO OPCIONAL --- */
}

.heyrenting-product-thumbnail .thumbnail-title .card-title-short {
    display: block; /* Para que ocupe su propia línea */
    font-size: 20px; /* O el tamaño que desees para la parte principal */
    font-weight: 600; /* O 700 para un look más bold como en tu imagen de ejemplo */
    color: inherit; /* Hereda el color del div.thumbnail-title */
    /* margin-bottom: 1px; */ /* Espacio mínimo si hay parte larga, o gestionado por line-height */
}

.heyrenting-product-thumbnail .thumbnail-title .card-title-long {
    display: block; /* Para que ocupe su propia línea */
    font-size: 14px; /* Más pequeño que el nombre corto */
    font-weight: 400; /* Peso normal o 300 para más ligero */
    color: #555555; /* Un gris para diferenciarlo, ajusta si el $title_color es muy claro */
    /* Si $title_color es oscuro, podrías usar opacity: */
    /* opacity: 0.85; */
    /* color: inherit; */
    margin-top: 2px; /* Pequeño espacio entre el nombre corto y el largo */
    line-height: 1.3; /* Ajustar para que no quede muy pegado */
}

/* Estilo para el fallback (cuando solo se muestra el nombre completo del producto) */
.heyrenting-product-thumbnail .thumbnail-title .card-title-full {
    display: block;
    font-size: 17px; /* Mismo tamaño que el nombre corto */
    font-weight: 500; /* El peso que usabas antes para el título completo */
    color: inherit;
}

.heyrenting-product-thumbnail img.card-distinction-badge {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%; /* Para que no se desborde si el título es muy corto */
    border-radius: 3px;
    margin-top: 5px;
}

.heyrenting-product-thumbnail .thumbnail-badge { /* Badge "Estudio 3 min" */
    flex-shrink: 0; /* Que no se encoja */
    align-self: flex-start;
    /* Opcional: para debug */
    /* border: 1px solid orange; */
}

.heyrenting-product-thumbnail .thumbnail-badge img {
    display: block;
    width: auto;
    height: auto; /* Reducimos un poco la altura para que no sea tan dominante */
    max-width: 45px; /* Reducimos ancho máximo */
}

/* Contenedor de la Imagen */
.heyrenting-product-thumbnail .thumbnail-image-container {
    flex-grow: 1; /* Clave para que esta área se expanda y contraiga */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    position: relative;
    overflow: hidden;
    min-height: 180px;
}

.heyrenting-product-thumbnail .thumbnail-image {
    display: block;
    /* Quitar max-width/max-height si quieres que llene el contenedor */
    width: 100%; /* O el ancho específico si prefieres */
    height: 100%; /* O la altura específica */
    object-fit: cover; /* 'cover' para llenar, 'contain' para mostrar todo */
    /* object-position: center center; */ /* Ajustar si es necesario con cover */
}

/* Fila inferior: Precio y Etiquetas */
.heyrenting-product-thumbnail .thumbnail-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* Alinea items abajo */
    padding: 12px 15px;
    background-color: transparent; /* Fondo ligeramente diferente si se quiere */
    min-height: 60px; /* Altura mínima */
    flex-wrap: wrap; /* Permite que las etiquetas pasen abajo si no caben */
    gap: 5px;
    position: relative; /* Para el z-index si es necesario */
    z-index: 2;
}

/* Estilos de Precio (adaptados de tu ejemplo TotalRenting) */
.heyrenting-product-thumbnail .thumbnail-price {
    font-size: 13px;
    line-height: 1.4;
    color: #666;
    /* Quitamos flex-basis y flex-grow para que tome su ancho natural */
    /* flex-basis: 60%; */ /* <-- ELIMINAR o COMENTAR */
    /* flex-grow: 1; */    /* <-- ELIMINAR o COMENTAR */
    /* Añadimos flex-shrink para evitar que se comprima demasiado si las etiquetas son largas */
    flex-shrink: 0;
}

.heyrenting-product-thumbnail .thumbnail-price .desde {
    display: block;
    font-size: 11px;
    margin-bottom: -2px; /* Puede necesitar ajuste fino */
}

.heyrenting-product-thumbnail .thumbnail-price .precioVariable {
    display: block; /* O inline-block si prefieres */
}

.heyrenting-product-thumbnail .thumbnail-price .woocommerce-Price-amount {
    font-weight: bold;
    color: #52bf31;
    font-size: 21px;
}

.heyrenting-product-thumbnail .thumbnail-price .mes {
    display: block; /* Hace que ocupe su propia línea */
    font-size: 11px; /* Ligeramente más pequeño */
    margin-left: 0; /* Quitar margen si lo tenía de antes */
    margin-top: -2px; /* Acercarlo al precio (ajustar según sea necesario) */
}

.heyrenting-product-thumbnail .thumbnail-price small {
    display: block;
    font-size: 10px;
    margin-top: 2px;
    color: #888;
}
.heyrenting-product-thumbnail .thumbnail-price.no-price {
    font-style: italic;
    color: #999;
}

/* Contenedor de Etiquetas */
.heyrenting-product-thumbnail .thumbnail-tags {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-end;
    /* Quitamos flex-grow para que tome su ancho natural */
    /* flex-grow: 1; */ /* <-- ELIMINAR o COMENTAR */
    text-align: right;
    /* Añadimos flex-shrink para evitar que se comprima si el precio es largo */
    flex-shrink: 0;
    margin-left: auto; /* Empuja las etiquetas a la derecha cuando hay espacio */
}

.heyrenting-product-thumbnail .thumbnail-tags-inline {
    display: flex; /* Pone las etiquetas internas una al lado de la otra */
    gap: 4px; /* Espacio entre Entrega Rápida y Oferta Limitada */
    justify-content: flex-end; /* Las alinea a la derecha dentro de su fila */
    flex-wrap: wrap; /* Permite envolver si no caben (aunque es raro con 2) */
}

.heyrenting-product-thumbnail .tag-item {
    display: inline-block;
    font-size: 11.5px;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid; /* El color se aplica inline */
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    /* Colores (bg, text, border) se aplican inline desde PHP */
}


/* Ocultar elementos originales del bloque si es necesario (descomentar si ves duplicados) */
/*
.wc-block-product-template .wc-block-product > *:not(.heyrenting-product-thumbnail) {
     display: none !important;
}
*/

/* Ajustes responsivos específicos para la miniatura */
@media (max-width: 480px) {
    .heyrenting-product-thumbnail .thumbnail-title {
        font-size: 16px;
    }
    .heyrenting-product-thumbnail .thumbnail-badge img {
        height: auto;
        max-width: 40px;
    }
    .heyrenting-product-thumbnail img.card-distinction-badge {
        height: 50px;
    }

    .heyrenting-product-thumbnail .thumbnail-top {
       min-height: 40px;
       padding: 10px 12px;
       gap: 5px;
    }
    .heyrenting-product-thumbnail .thumbnail-price .woocommerce-Price-amount {
        font-size: 21px;
    }
    .heyrenting-product-thumbnail .thumbnail-bottom {
        flex-direction: row; /* Apila precio y sección de tags */
        align-items: flex-start; /* Alinea ambos bloques a la izquierda */
        gap: 8px; /* Espacio vertical entre precio y tags */
    }
    .heyrenting-product-thumbnail .thumbnail-tags {
        display: flex; /* Convertir en contenedor flex */
        flex-direction: row; /* Alinear items horizontalmente */
        flex-wrap: wrap; /* Permitir que pasen a la siguiente línea si no caben */
        align-items: center; /* Alinear verticalmente si envuelven */
        justify-content: flex-start; /* Alinear al inicio (izquierda) */
        gap: 5px; /* Espacio horizontal y vertical entre etiquetas */
        width: 100%; /* Ocupar todo el ancho debajo del precio */
    }
    .heyrenting-product-thumbnail .thumbnail-tags-inline {
         display: contents; /* Los hijos (tags) se comportan como hijos directos de .thumbnail-tags */
         /* Alternativa si 'contents' da problemas: */
         /* display: flex; */
         /* flex-wrap: wrap; */
         /* gap: 5px; */
         /* align-items: center; */
         /* justify-content: flex-start; */
    }
    .heyrenting-product-thumbnail .thumbnail-price .mes {
        display: inline-block; /* Vuelve a ser inline en móvil */
        margin-left: 3px;   /* Restaura margen izquierdo */
        margin-top: 0;      /* Quita el margen superior negativo */
        font-size: 13px;   /* Asegura tamaño original si lo cambiaste */
        line-height: 1.4; /* Restaura line-height original */
    }
}

@media(max-width: 768px) {
    .heyrenting-product-thumbnail .thumbnail-title {
        font-size: 16px;
    }
    .heyrenting-product-thumbnail .thumbnail-badge img {
        height: auto;
        max-width: 50px;
    }

    .heyrenting-product-thumbnail .thumbnail-top {
       min-height: 45px; /* Reducir altura mínima en móvil */
       padding: 10px 12px; /* Reducir padding en móvil */
    }
    .heyrenting-product-thumbnail .thumbnail-price .woocommerce-Price-amount {
        font-size: 21px;
    }
    .heyrenting-product-thumbnail .thumbnail-bottom {
        flex-direction: row; /* Apila precio y sección de tags */
        align-items: flex-start; /* Alinea ambos bloques a la izquierda */
        gap: 8px; /* Espacio vertical entre precio y tags */
    }
    .heyrenting-product-thumbnail .thumbnail-tags {
        display: flex; /* Convertir en contenedor flex */
        flex-direction: row; /* Alinear items horizontalmente */
        flex-wrap: wrap; /* Permitir que pasen a la siguiente línea si no caben */
        align-items: center; /* Alinear verticalmente si envuelven */
        justify-content: flex-start; /* Alinear al inicio (izquierda) */
        gap: 5px; /* Espacio horizontal y vertical entre etiquetas */
        width: 100%; /* Ocupar todo el ancho debajo del precio */
    }
    .heyrenting-product-thumbnail .thumbnail-tags-inline {
         display: contents; /* Los hijos (tags) se comportan como hijos directos de .thumbnail-tags */
         /* Alternativa si 'contents' da problemas: */
         /* display: flex; */
         /* flex-wrap: wrap; */
         /* gap: 5px; */
         /* align-items: center; */
         /* justify-content: flex-start; */
    }
    .heyrenting-product-thumbnail .thumbnail-price .mes {
        display: inline-block; /* Vuelve a ser inline en móvil */
        margin-left: 3px;   /* Restaura margen izquierdo */
        margin-top: 0;      /* Quita el margen superior negativo */
        font-size: 13px;   /* Asegura tamaño original si lo cambiaste */
        line-height: 1.4; /* Restaura line-height original */
    }
}

/* --- FIN ESTILOS MINIATURA PERSONALIZADA HEYrenting --- */


/* La lista UL que contiene los productos */
.wp-block-woocommerce-product-collection.is-layout-flow.wp-block-product-collection-is-layout-flow {
    display: flex;
    justify-content: center;
}


ul.wc-block-product-template.columns-3 {
    display: grid;
    /* --- CAMBIO PRINCIPAL AQUÍ --- */
    /* Intenta primero con max-content. Si aún se estira, usa un valor fijo como 320px ó 330px */
    grid-template-columns: repeat(auto-fit, minmax(300px, max-content));
    /* Alternativa si max-content no funciona bien: */
    /* grid-template-columns: repeat(auto-fit, minmax(300px, 320px)); */
    /* --- FIN CAMBIO PRINCIPAL --- */
    justify-content: start; /* IMPORTANTE: Alinea las columnas a la izquierda */
    justify-items: start; /* Mantenlo: Alinea el contenido DENTRO de la columna a la izquierda */
    /*gap: 30px;*/ /* Mantén tu gap */
    padding: 0;
    list-style: none;
    width: 100%;
    align-items: stretch;
    max-width: 1200px; /* Mantén tu max-width general */
    margin-left: auto;
    margin-right: auto;
}

.heyrenting-catalog-column ul.wc-block-product-template.columns-3 {
    /* Restaura el comportamiento de estiramiento con 1fr */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Quita el max-width para que llene la columna catálogo */
    max-width: none;
    /* Quita márgenes auto para que se alinee dentro de su columna */
    margin-left: 0;
    margin-right: 0;
    /* justify-content: start; ya debería heredarlo o estar por defecto */
    /* justify-items: start; ya debería heredarlo */
}


/* Cada elemento LI (producto individual) */
ul.wc-block-product-template.columns-3 li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%!important;
    max-width: none;
}

    

/* Ajustes Responsivos (ejemplo para menos columnas en móvil) */
@media (max-width: 768px) {
    ul.wc-block-product-template.columns-3 {
        gap: 20px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    ul.wc-block-product-template.columns-3 {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 15px;
        margin: 0;
    }
}







/* --- ESTILOS FILTROS HEYrenting (Desktop & Mobile) --- */

/* --- Contenedor Principal (cuando hay filtros) --- */
.heyrenting-collection-with-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}


/* --- Columna de Filtros (Visible en Desktop) --- */
.heyrenting-filter-column {
    width: 14%;
    flex: 0 0 14%;
    box-sizing: border-box;
    display: block;

    /* --- Propiedades Sticky --- */
    position: -webkit-sticky;
    position: sticky;
    top: 80px; /* MANTÉN TU VALOR AJUSTADO AQUÍ */
    align-self: flex-start;

    /* --- Eliminamos/Modificamos Restricción de Altura y Scroll --- */
    /* max-height: calc(100vh - 80px - 20px); */ /* <-- ELIMINAR o COMENTAR ESTA LÍNEA */
    /* overflow-y: auto; */                     /* <-- ELIMINAR o COMENTAR ESTA LÍNEA */
    overflow-y: visible; /* Asegurar que el contenido no quede oculto verticalmente (valor por defecto) */
    overflow-x: hidden; /* <<<--- AÑADIR ESTO para ocultar scroll horizontal */
    /* --- FIN Propiedades Sticky y Scroll --- */
}

/* --- Columna de Catálogo --- */
.heyrenting-catalog-column {
    width: 100%; /* Ocupa todo el ancho por defecto (móvil) */
    flex: 1; /* Ocupa el espacio restante en desktop */
    box-sizing: border-box;
    min-width: 0; /* Importante para flexbox */
}


/* --- Botón Filtro Móvil --- */
.heyrenting-mobile-filter-button-wrap {
    margin-bottom: 15px;
    display: block; /* Mostrar por defecto (se oculta en desktop) */
    text-align: center; /* Opcional: centrar botón */
}

.heyrenting-mobile-filter-button {
    display: block;
    padding: 10px 20px;
    background-color: #ffffff;
    color: #52bf31;
    border: 1px solid;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
}
.heyrenting-mobile-filter-button:hover {
    background-color: #52bf31;
    color: white;
}


/* --- Panel Filtro Móvil (Off-Canvas Izquierdo) --- */
.heyrenting-mobile-filter-panel {
    position: fixed;
    top: 0;
    left: -100%; /* Oculto fuera a la izquierda */
    width: 85%; /* Ancho del panel */
    max-width: 320px; /* Ancho máximo */
    height: 100%;
    background-color: #fff;
    z-index: 1001; /* Por encima del contenido, debajo del overlay si es necesario */
    transition: left 0.3s ease-in-out;
    overflow-y: auto; /* Permitir scroll si los filtros son largos */
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.heyrenting-mobile-filter-panel.is-active {
    left: 0; /* Mostrar panel */
}

.heyrenting-mobile-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background-color: #f8f9fa;
}

.heyrenting-mobile-panel-title {
    margin: 0;
    font-size: 18px;
}

.heyrenting-mobile-panel-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 5px;
    color: #666;
}
.heyrenting-mobile-panel-close:hover {
    color: #000;
    background-color: #f8f9fa;
}

.heyrenting-mobile-panel-content {
    padding: 15px;
}
/* Heredar/aplicar estilos de widget si es necesario */
.heyrenting-mobile-panel-content .widget {
    margin-bottom: 15px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
}
.heyrenting-mobile-panel-content .widget-title {
     font-size: 17px;
     margin-bottom: 8px;
}

.widget-title {
    font-size: 17px;
    margin-bottom: 5px;
}

/* --- Overlay Panel Móvil --- */
.heyrenting-mobile-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Detrás del panel, encima del contenido */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear;
}

.heyrenting-mobile-filter-panel.is-active + .heyrenting-mobile-panel-overlay {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s 0s linear;
}


/* --- Media Query para Desktop --- */
@media (min-width: 769px) {
    /* --- Contenedor Principal --- */
    .heyrenting-collection-with-filters {
        display: flex;
        /* gap: 20px; */ /* Ya lo tenías, ajústalo si es necesario */
        gap: 30px; /* Reajustado al valor que tenías */
        align-items: flex-start; /* IMPORTANTE: Alinear items al inicio verticalmente */
        position: relative; /* Contexto de posicionamiento, aunque no estrictamente necesario para sticky */
    }
    
    /* --- Regla por defecto para 3 o más columnas (cuando NO forzamos) --- */
    ul.wc-block-product-template.columns-3:not(.hey-force-1-col):not(.hey-force-2-cols) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, max-content)); /* Flexible */
        /*gap: 30px;*/
        padding: 0;
        list-style: none;
        width: 100%;
        align-items: stretch;
        justify-content: start;   /* Alinear pistas a la izquierda */
        justify-items: start;    /* Alinear items dentro de pistas a la izquierda */
        max-width: 1200px;
        margin-left: auto;  /* Centrar el bloque UL */
        margin-right: auto;
    }

    /* --- Regla para forzar 1 columna --- */
    ul.wc-block-product-template.columns-3.hey-force-1-col {
        display: grid;
        grid-template-columns: minmax(300px, 400px); /* Una columna tamaño tarjeta */
        gap: 30px;
        padding: 0;
        list-style: none;
        width: auto; /* Ajustar al contenido */
        max-width: 400px; /* Limitar al tamaño de la tarjeta */
        align-items: stretch;
        justify-content: start !important; /* Alinear la PISTA única a la izquierda */
        justify-items: start !important;   /* Alinear el ITEM (li) a la izquierda */
        /* --- Quitamos el centrado del UL --- */
        /* margin-left: auto; */
        /* margin-right: auto; */
        margin-left: 0; /* Lo alineamos a la izquierda de su contenedor padre */
        margin-right: 0;
    }

    /* --- Regla para forzar 2 columnas --- */
    ul.wc-block-product-template.columns-3.hey-force-2-cols {
        display: grid;
        /* 2 Columnas tamaño tarjeta, SIN 1fr */
        grid-template-columns: repeat(2, minmax(300px, 400px));
        gap: 30px;
        padding: 0;
        list-style: none;
        width: auto; /* Ajustar al contenido */
        max-width: calc(400px * 2 + 30px); /* (2 * max-item-width) + gap */
        align-items: stretch;
        justify-content: start !important; /* Alinear PISTAS a la izquierda */
        justify-items: start !important;   /* Alinear ITEMS (li) a la izquierda */
        /* --- Quitamos el centrado del UL --- */
        /* margin-left: auto; */
        /* margin-right: auto; */
        margin-left: 0; /* Lo alineamos a la izquierda de su contenedor padre */
        margin-right: 0;
    }
    
    /* --- Columna de Filtros --- */
    .heyrenting-filter-column {
        position: -webkit-sticky; /* Para compatibilidad con Safari antiguo */
        position: sticky;
        width: 14%;
        flex: 0 0 14%;
        box-sizing: border-box;
        display: block;
        position: -webkit-sticky;
        position: sticky;
        top: 80px; /* TU VALOR */
        align-self: flex-start;
        overflow-y: visible;
        overflow-x: hidden;
        background-color: #f3f3f3;
        padding: 20px;
        border-radius: 12px;
    }
    
    /* --- Estilos Opcionales para Scrollbar (WebKit) --- */
    .heyrenting-filter-column::-webkit-scrollbar {
        width: 6px; /* Ancho del scrollbar */
    }
    .heyrenting-filter-column::-webkit-scrollbar-track {
        background: #f1f1f1; /* Color del track */
        border-radius: 3px;
    }
    .heyrenting-filter-column::-webkit-scrollbar-thumb {
        background: #ccc; /* Color del thumb (barra móvil) */
        border-radius: 3px;
    }
    .heyrenting-filter-column::-webkit-scrollbar-thumb:hover {
        background: #aaa; /* Color al pasar el ratón */
    }
    /* --- FIN Estilos Scrollbar --- */
    
    /* Mostrar columna de filtros desktop */
    .heyrenting-collection-with-filters .heyrenting-filter-column {
        display: block;
    }
    
    /* --- Columna de Catálogo --- */
    .heyrenting-catalog-column {
        flex: 1;
        min-width: 0; /* Necesario para Flexbox */
    }

    /* Ajustar ancho del catálogo en desktop */
    .heyrenting-collection-with-filters .heyrenting-catalog-column {
         /* El flex: 1 ya se encarga, pero podemos ser explícitos */
         /* width: 75%; */
    }

    /* Ocultar botón y panel móvil en desktop */
    .heyrenting-mobile-filter-button-wrap,
    .heyrenting-mobile-filter-panel,
    .heyrenting-mobile-panel-overlay {
        display: none !important; /* Importante para asegurar que se oculte */
    }
    
    /* Asegurar box-sizing en widgets internos por si acaso */
    .heyrenting-filter-column .widget {
        box-sizing: border-box;
        width: 100%; /* Asegura que los widgets no se pasen del ancho */
    }
}

@media(max-width: 768px) {
    .heyrenting-filter-column{
        display: none;
    }
}

/* --- Evitar Scroll Body cuando el panel está activo --- */
body.heyrenting-mobile-filter-active {
    overflow: hidden;
}

/* --- Estilos Adicionales Filtros (igual que antes) --- */


a.active-filter {
    font-weight: bold;
    color: #0056b3; /* O tu color activo */
}
a.clear-attribute-filter {
    font-size: 0.75em;
    color: #515151;
    display: block;
    margin-top: 5px;
    background-color: white;
    text-decoration: underline;
}


/* --- ESTILOS FILTROS DESPLEGABLES --- */
.attribute-filter-group .filter-toggle-button {
    cursor: pointer;
    position: relative;
    padding-right: 25px; /* Espacio para el icono */
    user-select: none; /* Evitar selección de texto al hacer clic */
}

.attribute-filter-group .filter-toggle-button .toggle-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    border-color: #666;
    transform: translateY(-60%) rotate(45deg); /* Flecha hacia abajo */
    transition: transform 0.2s ease-in-out, border-color 0.2s;
}
.attribute-filter-group .filter-toggle-button:hover .toggle-icon {
    border-color: #000;
}

/* Estilo cuando está abierto */
.attribute-filter-group.is-open .filter-toggle-button .toggle-icon {
    transform: translateY(-40%) rotate(-135deg); /* Flecha hacia arriba */
}

/* Ocultar contenido por defecto */
.attribute-filter-group.collapsible-filter .filter-options-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    /* Añadir un poco de padding/margen cuando está oculto puede ser necesario */
    /* padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; */
    border-top: 1px solid transparent; /* Para transición suave */
}

/* Mostrar contenido cuando está abierto */
.attribute-filter-group.collapsible-filter.is-open .filter-options-content {
    max-height: 1000px; /* Un valor grande para permitir contenido variable */
    transition: max-height 0.4s ease-in;
    padding-top: 10px; /* Espacio cuando está abierto */
    border-top: 1px solid #eee;
    margin-top: 5px;
}

/* Asegurar que el contenido del no desplegable siempre esté visible */
.attribute-filter-group .filter-options-content.is-always-open {
    max-height: none; /* Quitar limitación */
    overflow: visible;
}

.attribute-filter-group .filter-options-content ul {
    padding-left: 10px; /* Indentar opciones */
}

ul.filter-buttons-list a {
    border: 1px solid #474747;
}

/* --- ESTILOS BASE noUiSlider --- */
.heyrenting-price-filter-form .noUi-target {
    /* Estilos básicos para el track */
    background: #FAFAFA;
    border-radius: 4px;
    border: 1px solid #D3D3D3;
    box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
    height: 10px; /* Grosor del track */
    margin-bottom: 10px; /* Espacio para pips/tooltips */
}
.heyrenting-price-filter-form .noUi-connect {
    background: #52bf31;
    box-shadow: inset 0 0 3px rgba(51, 51, 51, 0.45);
    border-radius: 3px;
}
.heyrenting-price-filter-form .noUi-handle {
    /* Estilo de los handles (arrastradores) */
    border: 1px solid #D9D9D9;
    border-radius: 50%; /* Círculo */
    background: #FFF;
    width: 18px;
    height: 18px;
    cursor: pointer;
    box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
    /* Posicionamiento correcto de los handles */
    top: -5px; /* Mitad de altura del handle + mitad grosor track */
    right: -9px; /* Mitad de ancho del handle */
}
.heyrenting-price-filter-form .noUi-handle:focus {
    outline: none; /* Quitar outline por defecto */
    border-color: #0073aa; /* Cambiar borde en foco */
}
/* Opcional: Quitar handle derecho */
.heyrenting-price-filter-form .noUi-handle-lower { }
.heyrenting-price-filter-form .noUi-handle-upper { }

/* Estilos para el texto del rango */
.price-slider-amount {
    font-size: 0.9em;
    color: #555;
    text-align: center;
}
.price-slider-amount .filter-price-label {
     font-weight: bold;
     margin-right: 5px;
}
#heyrenting-price-range-display {
    font-weight: bold;
    color: #333;
}

/* Estilos para Pips (marcas) - opcional */
.heyrenting-price-filter-form .noUi-pips {
    position: relative;
    color: #999;
}
.heyrenting-price-filter-form .noUi-pips-horizontal {
    display: none;
}
.heyrenting-price-filter-form .noUi-marker-horizontal.noUi-marker {
    height: 5px; /* Líneas pequeñas */
    width: 1px;
    background: #ccc;
    margin-left: -0.5px; /* Centrar */
}
.heyrenting-price-filter-form .noUi-marker-horizontal.noUi-marker-large {
    height: 8px; /* Líneas más grandes */
}
.heyrenting-price-filter-form .noUi-value-horizontal {
    transform: translate(-50%, 50%);
    font-size: 10px;
    padding-top: 5px;
}

/* Estilo botón "Aplicar precio" */
.price-filter-button {
    display: block;
    text-align: left;
    width: auto;
    background-color: #fff;
    color: #333;
    font-size: 14px;
    padding: 5px;
    border-radius: 7px;
    margin-top: 3px;
    border: 1px solid #999999;
}

.price-filter-button:hover {
    background-color: white;
    color: black;
}
.price-filter-button:active {
    background-color: white;
    color: black;
}

.filter-options-content.is-always-open ul {
    margin: 0;
}


/* --- ESTILOS FILTRO TRANSMISIÓN (BOTONES) --- */
    .attribute-filter-group.filter-transmision .filter-options-content ul.filter-buttons-list {
        display: flex; /* Poner botones en línea */
        flex-wrap: wrap;
        gap: 8px; /* Espacio entre botones */
        padding-left: 0; /* Sin indentación */
        margin-bottom: 10px;
    }

    .attribute-filter-group.filter-transmision .filter-options-content li {
        margin: 0;
    }

    .filter-term-button {
        display: inline-block;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-radius: 7px;
        text-decoration: none;
        color: #333;
        background-color: #fff;
        font-size: 0.9em;
        transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    }

    .filter-term-button:hover {
        border-color: #999;
        background-color: #f8f8f8;
        text-decoration: none;
    }

    .filter-term-button.active-filter {
        border-color: #52bf31;
        background-color: #52bf3117;
        color: #52bf31;
        font-weight: bold;
    }

    /* --- ESTILOS FILTRO DROPDOWN --- */
    .attribute-dropdown-form select {
        width: 100%;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 7px;
        background-color: #fff;
        font-size: 0.95em;
        max-width: 100%; /* Asegurar que no se desborde */
        box-sizing: border-box;
    }
    
    
    /* --- ESTILOS PARA BOTÓN FILTRAR STICKY (MÓVIL) --- */

/* El wrapper mantiene su espacio cuando el botón es sticky gracias al min-height del JS */
.heyrenting-mobile-filter-button-wrap {
    /* Puedes añadir un transition si quieres suavizar la aparición/desaparición del min-height */
    transition: min-height 0.3s ease;
}

/* Estilos del botón cuando está fijo */
.heyrenting-mobile-filter-button.is-sticky {
    position: fixed;
    /* top: 0;  <-- Esto lo establece el JS para incluir headerOffset */
    left: 0;
    width: 100%;
    z-index: 990; /* Debajo de popups (1000+) y panel (1001) */

    /* Estilos visuales para el botón fijo */
    background-color: #c3c3c3;
    color: #373737;
    border: none; /* Quitar borde original */
    border-bottom: 1px solid #e0e0e0; /* Línea inferior separadora */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border-radius: 0; /* Sin bordes redondeados cuando es full width */
    padding: 12px 20px; /* Ajustar padding vertical/horizontal */
    text-align: center; /* Centrar texto */
    box-sizing: border-box; /* Asegurar que padding/border no aumenten el width */

    /* Transición suave para la aparición (opcional) */
    /* animation: fadeInDown 0.3s ease-out; */
}

/* Ocultar el estado sticky en desktop por si acaso el JS falla */
@media (min-width: 769px) {
  .heyrenting-mobile-filter-button.is-sticky {
    display: none !important;
  }
  .heyrenting-mobile-filter-button-wrap {
      min-height: auto !important; /* Resetear min-height en desktop */
  }
}

/* Opcional: Animación fadeInDown */
/*
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/


/* --- ESTILOS PARA ALINEAR ALTURA DE PRODUCTOS EN GRID --- */

/* 1. Contenedor Grid Principal (ul) */
ul.wc-block-product-template {
    /* display: grid; Ya lo tienes */
    /* grid-template-columns: repeat(X, 1fr); Ya lo tienes */
    /* gap: Ypx; Ya lo tienes */
    align-items: stretch; /* Asegura que los LI (items del grid) se estiren verticalmente en su fila. Es el valor por defecto, pero lo ponemos explícito. */
}

/* 2. Item del Grid (li) */
ul.wc-block-product-template li.wc-block-product {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

/* 3. Contenedor de la imagen (para asegurar flexibilidad interna) */
.heyrenting-product-thumbnail .thumbnail-image-container {
    /* flex-grow: 1; Ya lo tienes - Esto es clave para que esta área absorba el espacio extra */
    /* display: flex; Ya lo tienes */
    /* align-items: center; Ya lo tienes */
    /* justify-content: center; Ya lo tienes */
    /* min-height: 195px; Ya lo tienes */
}

/* --- FIN ESTILOS ALINEACIÓN ALTURA --- */



/* --- ESTILOS PARA EL SWITCH "EN OFERTA" --- */
.heyrenting-on-sale-filter {
    margin-bottom: 20px; /* Espacio debajo del switch */
    padding-bottom: 15px; /* Espacio antes de la línea si la hubiera */
    border-bottom: 1px solid #eee; /* Línea separadora opcional */
    margin-top: 0px; /* Asegurar que esté pegado arriba si es el primer widget */
    padding-top: 0px;
}

/* Contenedor del switch */
.heyrenting-switch {
    position: relative;
    display: inline-flex; /* Para alinear texto y switch */
    align-items: center; /* Centrar verticalmente */
    width: auto; /* Ajustar al contenido */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ocultar el checkbox por defecto */
.heyrenting-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute; /* Sacarlo del flujo */
}

/* Texto de la etiqueta */
.heyrenting-switch .switch-label-text {
    margin-right: 10px; /* Espacio entre texto y switch */
    font-weight: 500;
    color: #333;
    font-size: 1.05em; /* Ligeramente más grande que el texto normal */
}

/* El slider (el fondo del switch) */
.heyrenting-switch .slider {
    position: relative;
    display: inline-block; /* Necesario para que width/height funcionen */
    width: 44px; /* Ancho del switch */
    height: 24px; /* Alto del switch */
    background-color: #ccc;
    transition: .4s;
    border-radius: 34px; /* Hacerlo redondeado */
}

/* El círculo del switch */
.heyrenting-switch .slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Tamaño del círculo */
    width: 18px;
    left: 3px; /* Posición inicial izquierda */
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%; /* Hacerlo circular */
}

/* Cambio de color y posición cuando está activo (checked) */
.heyrenting-switch input:checked + .slider {
    background-color: #52bf31; /* Color verde HEYrenting */
}

.heyrenting-switch input:checked + .slider:before {
    transform: translateX(20px); /* Mover el círculo a la derecha */
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
}

/* Foco para accesibilidad */
.heyrenting-switch input:focus + .slider {
    box-shadow: 0 0 1px #52bf31;
}

/* Clase para lectores de pantalla */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important; /* Importante para sacarlo del flujo visual */
    width: 1px;
    word-wrap: normal !important; /* Evita saltos de línea raros */
}

.heyrenting-marca-boton .heyrenting-marca-heading {
    font-size: 13px; /* Mismo tamaño que el span anterior (ajusta si era diferente) */
    color: #555555;   /* Mismo color que el span anterior (ajusta si era diferente) */
    margin-top: 8px; /* Mismo margen superior que el span anterior (ajusta si era diferente) */
    line-height: 1.2;
    font-weight: 500; /* Mismo peso que el span anterior (ajusta si era diferente) */
    margin-bottom: 0; /* Quitar margen inferior por defecto de los H3 */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center; /* Asegurar centrado si hereda otra cosa */
}

.heyrenting-marca-boton.no-logo .heyrenting-marca-heading {
    display: none;
}


/* --- ESTILOS NUEVA ETIQUETA "SOLO PROFESIONALES" --- */

.heyrenting-product-thumbnail .tag-item.tag-solo-profesionales {
    background-color: #f0f0f0; /* Fondo gris claro o el que prefieras */
    color: #333;           /* Color de texto oscuro */
    border-color: #ccc;       /* Borde gris */
    /* Hereda padding, font-size, etc. de .tag-item */
}

.heyrenting-product-thumbnail .tag-item.tag-solo-profesionales i.fa-user {
    margin-right: 4px; /* Espacio entre icono y texto */
    font-size: 0.9em;  /* Ajustar tamaño del icono si es necesario */
    vertical-align: middle; /* Alinear icono con el texto */
}


/* ==============================================================
   ESTILOS SECCIÓN CTA "PLANES Y PRECIOS" - HEYrenting
   ============================================================== */

/* Sección Principal */
.hey-cta-section {
    background-color: #ffffff; /* Fondo blanco limpio */
    padding: 40px 20px; /* Padding generoso */
    margin: 60px auto; /* Margen vertical y centrado horizontal */
    max-width: 1100px; /* Ancho máximo controlado */
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.07); /* Sombra sutil */
    border: 1px solid #e0e0e0; /* Borde muy ligero */
    overflow: hidden; /* Para asegurar que los bordes redondeados se apliquen bien */
}

/* Contenedor Flex (para las columnas) */
.hey-cta-container {
    display: flex;
    flex-wrap: wrap; /* Para responsividad */
    gap: 40px; /* Espacio entre columnas */
    align-items: center; /* Centrar verticalmente el contenido de las columnas */
}

/* Columna Imagen */
.hey-cta-image-col {
    flex: 1 1 40%; /* Flex-grow, flex-shrink, flex-basis (aprox 40%) */
    min-width: 280px; /* Ancho mínimo para evitar que se comprima demasiado */
    text-align: center; /* Centrar imagen si es más pequeña que la columna */
}

.hey-cta-image {
    max-width: 100%;
    height: auto;
    display: block; /* Para evitar espacio extra debajo */
    margin: 0 auto; /* Centrar */
    border-radius: 8px; /* Suavizar esquinas de la imagen */
}

/* Columna Formulario */
.hey-cta-form-col {
    flex: 1 1 55%; /* Ocupa el resto del espacio (aprox 60%) */
    min-width: 300px; /* Ancho mínimo */
    padding: 20px; /* Padding interno opcional */
    /* background-color: #f8f9fa; */ /* Fondo gris muy claro si se quiere diferenciar */
    /* border-radius: 8px; */
}

.hey-cta-title {
    font-size: 26px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.3;
}

.hey-cta-product-name {
    font-size: 18px;
    color: #555;
    margin-bottom: 20px;
    font-weight: 500;
}

.hey-cta-price {
    margin-bottom: 25px;
    font-size: 18px;
    color: #444;
    line-height: 1.2;
}

.hey-cta-price-prefix {
    font-weight: 300;
    opacity: 0.8;
    margin-right: 5px;
}

.hey-cta-price-amount {
    font-size: 1.6em; /* Hacer el número más grande */
    font-weight: 700;
    color: #52bf31; /* Color corporativo */
    margin-right: 5px;
}

.hey-cta-price-suffix {
    font-weight: 300;
    opacity: 0.8;
    font-size: 0.9em;
}

/* Estilos específicos para el formulario CF7 dentro de esta sección */
.hey-cta-form .wpcf7-form {
    margin: 0; /* Resetear márgenes */
}

.hey-cta-form .wpcf7-form p {
    margin-bottom: 15px; /* Espacio entre campos */
}

.hey-cta-form .wpcf7-form-control {
    width: 100% !important;
    padding: 12px 15px;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box; /* Importante */
}
.hey-cta-form .wpcf7-form-control:focus {
    border-color: #52bf31;
    box-shadow: 0 0 0 2px rgba(82, 191, 49, 0.2);
    outline: none;
}

.hey-cta-section .hey-cta-form .wpcf7-form p.acceptance_renting {
    margin-top: -30px;
    margin-bottom: -20px;
}

.hey-cta-section .hey-cta-form .wpcf7-form .client-type .wpcf7-form-control, .hey-final-cta-section .hey-final-cta-form .wpcf7-form .client-type .wpcf7-form-control {
    padding: 0px;
}

/* Estilos Botón Submit (CF7) */
.hey-cta-form .wpcf7-submit {
    background-color: #52bf31; /* Color corporativo */
    color: #ffffff;
    font-weight: bold;
    font-size: 16px;
    padding: 14px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    width: 100%; /* Ocupa todo el ancho */
    text-transform: uppercase;
    margin-top: 10px; /* Espacio sobre el botón */
}

.hey-cta-form .wpcf7-submit:hover {
    background-color: #429b27; /* Verde más oscuro */
}
.hey-cta-form .wpcf7-submit:active {
    transform: scale(0.98); /* Efecto click */
}

/* Estilos para radio buttons (Tipo cliente) si se usan aquí */
.hey-cta-form .client-type { /* Reutiliza estilos si es el mismo formulario */
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
.hey-cta-form .client-type .wpcf7-list-item { flex: 1; margin: 0 5px !important; }
.hey-cta-form .client-type input[type="radio"] { display: none !important; }
.hey-cta-form .client-type .wpcf7-list-item-label {
    display: block; padding: 10px; background: #eee; border-radius: 4px; cursor: pointer;
    transition: all 0.3s ease; text-align: center; border: 1px solid #ddd; margin-left: 0 !important; font-size: 14px;
}
.hey-cta-form .client-type .wpcf7-list-item-label:hover { background: #e0e0e0; }
.hey-cta-form .client-type input[type="radio"]:checked + .wpcf7-list-item-label {
    background: white; color: #52bf31; font-weight: bold; border-color: #52bf31;
    box-shadow: 0 1px 4px rgba(82, 191, 49, 0.3);
}

/* Checkbox aceptación */
.hey-cta-form .acceptance_renting label { font-size: 13px; color: #666; }
.hey-cta-form .acceptance_renting span.wpcf7-list-item { margin: 0 !important; display: flex; align-items: flex-start; }
.hey-cta-form .acceptance_renting input[type="checkbox"] { margin-right: 8px; margin-top: 3px; width: auto !important; }


/* Responsive: Móviles */
@media (max-width: 768px) {
    .hey-cta-section {
        padding: 30px 15px;
        margin: 40px auto;
        border: none;
        box-shadow: none;
    }

    .hey-cta-container {
        flex-direction: column; /* Apilar columnas */
        gap: 30px;
    }

    /* Las columnas ocupan todo el ancho */
    .hey-cta-image-col,
    .hey-cta-form-col {
        flex-basis: 100%;
        width: 100%;
        padding: 0; /* Resetear padding de columna form */
    }

    .hey-cta-title {
        font-size: 22px;
        text-align: center;
    }

    .hey-cta-product-name {
        font-size: 17px;
        text-align: center;
        margin-bottom: 15px;
    }

    .hey-cta-price {
        text-align: center;
        margin-bottom: 20px;
        font-size: 17px;
    }

    .hey-cta-price-amount {
        font-size: 1.5em;
    }

    /* Ajustes menores al formulario en móvil */
    .hey-cta-form .wpcf7-submit {
        padding: 12px 25px;
        font-size: 15px;
    }
}

/* Opcional: Añadir un degradado sutil al fondo de la sección */
/* Descomenta y ajusta si lo deseas */
/*
.hey-cta-section {
    background: linear-gradient(135deg, #fdfdfd 0%, #f7f9f6 100%);
}
*/


@media (min-width: 1025px) {
    .hey-servicios-incluidos-section,
    .hey-equipamiento-destacado-section,
    .hey-cta-section,
    .hey-equipamiento-section,
    .hey-especificaciones-section,
    .car-rental-faq-section,
    .hey-como-funciona-section {
        max-width: 1500px!important;
    }
}





/* ==============================================================
   ESTILOS BOTONES FLOTANTES Y HEADER CTA (V4 - DEFINITIVO)
   ============================================================== */

/* --- Botón CTA en el Header --- */
.header-cta {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.header-cta.hide-on-scroll {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* --- Contenedor de Botones Flotantes --- */
#hey-floating-buttons-container {
    position: fixed;
    z-index: 999;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0s 0.3s linear, transform 0.3s ease;
}

#hey-floating-buttons-container.is-visible,
#hey-floating-buttons-container.is-visible-mobile {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, visibility 0s 0s linear, transform 0.3s ease;
}

/* --- Estilos comunes de los botones flotantes --- */
#boton-llamamos,
#boton-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    color: white;
    text-decoration: none;
}
#boton-llamamos:hover,
#boton-whatsapp:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.25);
}

/* --- Botón WhatsApp (solo visible en móvil) --- */
#boton-whatsapp {
    background-color: #25D366;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    font-size: 28px;
}

/* --- Botón ¿Te llamamos? --- */
#boton-llamamos {
    background-color: #52bf31;
}
#boton-llamamos i {
    margin-right: 8px;
}

/*
 * --- LÓGICA RESPONSIVE ---
 */

/* --- Estilos ESCRITORIO (min-width: 769px) --- */
@media (min-width: 769px) {
    #hey-floating-buttons-container {
        bottom: 35px;
        right: 35px;
    }
    #boton-whatsapp {
        display: none;
    }
    #boton-llamamos {
        border-radius: 7px;
        padding: 12px 25px;
        font-size: 18px;
    }
}

/* --- Estilos MÓVIL (max-width: 768px) --- */
@media (max-width: 768px) {
    #hey-floating-buttons-container {
        bottom: 25px;
        right: 20px;
    }
    #boton-whatsapp {
        display: flex;
    }
    #boton-llamamos {
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 8px;
    }
}

/*
 * --- LÓGICA DE VISIBILIDAD POR PÁGINA ---
 */

/* Por defecto, OCULTAR en páginas de blog en ESCRITORIO */
body.blog #hey-floating-buttons-container,
body.single-post #hey-floating-buttons-container,
body.archive #hey-floating-buttons-container {
    display: none !important;
}

/* Excepción: MOSTRAR en páginas de blog en MÓVIL */
@media (max-width: 768px) {
    body.blog #hey-floating-buttons-container,
    body.single-post #hey-floating-buttons-container,
    body.archive #hey-floating-buttons-container {
        display: flex !important;
    }
}

/* Excepción: Asegurar que en single-product ESCRITORIO SÍ se muestre (sujeto a JS) */
@media (min-width: 769px) {
    body.single-product #hey-floating-buttons-container {
        display: flex !important;
    }
}





/* ==============================================================
   ESTILOS POPUP TE LLAMAMOS
   ============================================================== */

/* Estilos del Popup */
#popup-llamamos {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Overlay oscuro */
#popup-llamamos .popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1001;
}

/* Contenido del Popup */
#popup-llamamos .popup-contenido {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    position: relative;
    z-index: 1002;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    max-width: 500px;
    width: 90%;
}

#popup-llamamos .popup-contenido .form-title {
    margin-top: 0;
    margin-bottom: 10px; /* Reducido el margen inferior del título */
    font-size: 26px; /* Título un poco más grande */
    font-weight: bold; /* Título en negrita */
}

#popup-llamamos .popup-contenido p { /* Estilo para el subtítulo */
    font-size: 15px; /* Subtítulo más pequeño */
    color: #555; /* Subtítulo en gris más claro */
    margin-bottom: 20px; /* Margen inferior para separar del formulario */
}

/* Estilos para el formulario dentro del popup */
#popup-llamamos .formulario-popup .wpcf7-submit {
    background-color: #ff7925;
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
    min-width: 100px;
    display: block; /* Botón en bloque para centrar */
    margin: 20px auto 0 auto; /* Centrar botón y añadir margen superior */
    text-align: center;
}

#popup-llamamos .formulario-popup .wpcf7-submit:hover {
    background-color: #e66a1e;
}

/* Estilo para el texto de aceptación de la política de privacidad */
#popup-llamamos .formulario-popup .acceptance_renting label {
    font-size: 14px; /* Texto de política de privacidad más pequeño */
}
#popup-llamamos .formulario-popup .acceptance_renting { /* Ajuste para alinear checkbox y texto */
    display: flex;
    margin-bottom: 15px; /* Espacio inferior */
}
#popup-llamamos .formulario-popup .acceptance_renting input[type="checkbox"] {
    margin-right: 8px; /* Separación entre checkbox y texto */
}
#popup-llamamos .formulario-popup .acceptance_renting a {
    color: #fff;
    text-decoration: underline;
}


/* Clases para mostrar/ocultar el popup */
.popup-llamamos-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.popup-llamamos-oculto {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Clase para evitar el scroll del body cuando el popup está abierto */
body.popup-abierto {
    overflow: hidden;
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    #popup-llamamos .popup-contenido {
        padding: 20px;
    }
    #popup-llamamos .popup-contenido .form-title {
        font-size: 20px;
    }
    #popup-llamamos .popup-contenido p {
        font-size: 14px;
    }
    #popup-llamamos .formulario-popup .wpcf7-submit {
        font-size: 14px;
        padding: 10px 20px;
    }
    #popup-llamamos .formulario-popup .acceptance_renting label {
        font-size: 13px;
    }
}

/* Estilo para el botón de cierre (X) */
#popup-llamamos .cerrar-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: transparent;
    border: none;
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #fff;
    transition: color 0.3s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#popup-llamamos .cerrar-popup:hover {
    color: #ebebeb;
}

.formulario-popup {
    margin-bottom: -25px;
}



/* ==============================================================
   ESTILOS BLOQUE MARCAS DISPONIBLES HEYrenting
   ============================================================== */

/* Contenedor principal del bloque */
.heyrenting-marcas-disponibles-block {
    margin-top: 40px;    /* Espacio arriba */
    margin-bottom: 40px; /* Espacio abajo */
    padding: 30px 20px; /* Padding interno */
    background-color: #f8f9fa; /* Fondo gris claro (opcional) */
    border-radius: 12px;   /* Bordes redondeados (opcional) */
}

.alignwide .heyrenting-marcas-disponibles-block {}
.alignfull .heyrenting-marcas-disponibles-block {
    max-width: none; width: 100%; border-radius: 0; border-left: none; border-right: none;
}

/* Título del bloque */
.heyrenting-marcas-titulo {
    text-align: center; /* Centrar título */
    font-size: 24px;   /* Tamaño del título */
    font-weight: 600;
    color: #333;       /* Color del título */
    margin-top: 0;     /* Quitar margen superior por defecto */
    margin-bottom: 25px; /* Espacio debajo del título */
}

/* Contenedor de los botones */
.heyrenting-marcas-botones-container {
    display: grid;
    /* Por defecto para escritorio, puedes mantener un auto-fit o un número fijo si prefieres */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Ajusta minmax según el tamaño deseado del botón en desktop */
    gap: 15px; /* Espacio uniforme entre botones */
    justify-content: center; /* Centra el grid si no ocupa todo el ancho */
}

/* Estilo de cada botón (enlace <a>) */
.heyrenting-marca-boton {
    display: flex; /* Usar flex para centrar contenido interno */
    flex-direction: column; /* Apilar logo y nombre (si se muestra) */
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    padding: 10px; /* Padding general */
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e0e0e0; /* Borde más sutil */
    border-radius: 7px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-height: 80px; /* Altura mínima para consistencia */
    min-width: 130px; /* Ancho mínimo */
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    color: #222;
}

/* Efecto Hover del botón */
.heyrenting-marca-boton:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border-color: #ccc;
}

/* Efecto Active (click) del botón */
.heyrenting-marca-boton:active {
    transform: scale(0.97); /* Efecto de presionar */
}

.heyrenting-marca-logo {
    display: block;
    max-width: 100px; /* Ancho máximo del logo */
    max-height: 50px; /* Alto máximo del logo */
    width: auto;      /* Permitir que se ajuste manteniendo proporción */
    height: auto;     /* Permitir que se ajuste manteniendo proporción */
    object-fit: contain; /* Asegura que todo el logo sea visible */
    margin-bottom: 5px; /* Pequeño espacio si se muestra el nombre debajo */
}

/* Estilo del texto de fallback (cuando no hay logo) */
.heyrenting-marca-nombre-fallback {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

/* Estilo del nombre visible (si decides mostrarlo siempre, descomenta en PHP) */
.heyrenting-marca-nombre-visible {
    display: block; /* Asegura que ocupe su propia línea */
    font-size: 13px; /* Tamaño del nombre */
    color: #555555;   /* Color del nombre */
    margin-top: 8px; /* Espacio entre el logo/fallback y el nombre */
    line-height: 1.2; /* Ajustar interlineado si es necesario */
    font-weight: 500; /* O el peso que prefieras */
    max-width: 100%; /* Evitar que se salga si es muy largo */
    overflow: hidden; /* Ocultar texto que desborde */
    text-overflow: ellipsis; /* Añadir puntos suspensivos (...) */
    white-space: nowrap; /* Evitar que el nombre se parta en dos líneas */
}

/* Ajustar el contenedor de botones si solo hay texto (fallback) */
.heyrenting-marca-boton.no-logo {
    /* Puedes darle estilos ligeramente diferentes si quieres */
    padding: 15px 20px;
    min-height: auto; /* Quitar altura mínima si es solo texto */
}

/* Opcional: Ocultar el nombre visible si NO hay logo (para evitar duplicidad) */
.heyrenting-marca-boton.no-logo .heyrenting-marca-nombre-visible {
    display: none;
}

/* Ajustar el estilo del fallback cuando no hay logo, para que parezca el principal */
.heyrenting-marca-boton.no-logo .heyrenting-marca-nombre-fallback {
    margin-bottom: 0; /* Quitar margen inferior ya que no habrá nada debajo */
    font-size: 14px; /* Quizás un poco más grande si es el único texto */
    font-weight: 500;
    color: #333;
}

.heyrenting-marca-logo-container {
    height: 60px; /* <<--- ALTURA FIJA para el área del logo (AJUSTA ESTE VALOR según necesites) */
    width: 100%;  /* Ocupa el ancho del botón */
    display: flex;
    align-items: center;     /* Centra el logo verticalmente DENTRO de este contenedor */
    justify-content: center; /* Centra el logo horizontalmente DENTRO de este contenedor */
    margin-bottom: 8px;      /* Espacio entre el área del logo y el nombre de abajo */
    overflow: hidden;        /* Evita que logos muy grandes se salgan (aunque object-fit ayuda) */
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .heyrenting-marcas-titulo { font-size: 22px; margin-bottom: 25px; }
    .heyrenting-marcas-botones-container {
        grid-template-columns: repeat(3, 1fr); /* ¡AQUÍ ESTÁ EL CAMBIO! 3 columnas de igual ancho */
        gap: 10px; /* Mantener o ajustar el gap para móvil */
    }
    .heyrenting-marca-boton { min-width: 110px; padding: 8px; }
    .heyrenting-marca-logo { max-width: 90px; max-height: 45px; }
}
@media (max-width: 480px) {
    .heyrenting-marcas-botones-container { gap: 10px; }
    .heyrenting-marca-boton { min-width: 100px; }
    .heyrenting-marca-logo { max-width: 80px; max-height: 40px; }
}


/* === INICIO ESTILOS FILTROS HEYRENTING === */

/* Forzar misma anchura para todos los selects del widget de atributos */
.heyrenting-attribute-filters .attribute-filter-group .heyrenting-attribute-select-url {
    width: 100%; /* Ocupa todo el ancho del contenedor LI */
    max-width: 100%; /* Asegura que no se desborde */
    box-sizing: border-box; /* Incluye padding/border en el ancho */
    margin-bottom: 5px; /* Pequeño espacio inferior antes del enlace 'Eliminar' */
}

/* Estilo base del enlace 'Eliminar filtro' (ya lo tienes, pero revisamos) */
.heyrenting-attribute-filters .attribute-filter-group .clear-attribute-filter {
    font-size: 0.75em;
    color: #515151;
    display: inline-block; /* Por defecto es inline-block */
    margin-top: 5px;
    background-color: #f3f3f3;
    text-decoration: underline;
}

/* --- AJUSTES PARA MÓVILES --- */
@media (max-width: 768px) { /* O el breakpoint que uses para móvil */

    /* Hacer que el select ocupe todo el ancho en móvil */
    .heyrenting-attribute-filters .attribute-filter-group .heyrenting-attribute-select-url {
        display: block; /* Asegura que sea un bloque */
        width: 100%;
    }

    /* Hacer que el enlace 'Eliminar filtro' sea un bloque y centrarlo en móvil */
    .heyrenting-attribute-filters .attribute-filter-group .clear-attribute-filter {
        display: block !important; /* Forzar bloque para que esté debajo */
        width: auto; /* Ancho automático */
        text-align: left; /* Alinear texto a la izquierda */
        margin-top: 8px; /* Más espacio superior en móvil */
        margin-left: 0; /* Resetear margen izquierdo */
        margin-right: 0; /* Resetear margen derecho */
        padding-left: 0px; /* Espacio a la izquierda */
        background-color:white;
    }

    /* Opcional: Añadir un poco más de margen inferior a cada grupo de filtro en móvil */
    .heyrenting-attribute-filters .attribute-filter-group {
        margin-bottom: 15px;
    }
}

/* === FIN ESTILOS FILTROS HEYRENTING === */





/* ==============================================================
   ESTILOS SUBMENU MARCAS HEYrenting (Enfoque Flexbox tipo Bloque)
   ============================================================== */

/* --- Contenedor Principal del Submenú (UL) --- */
.main-navigation ul ul.brands-submenu {
    display: flex !important;         /* Usar Flexbox */
    flex-wrap: wrap !important;      /* Permitir que los elementos pasen a la línea inferior */
    justify-content: flex-start;     /* Alinear items al inicio (izquierda) */
    gap: 10px !important;            /* Espacio uniforme entre items */
    padding: 15px !important;        /* Padding interno del submenú */
    list-style: none !important;     /* Quitar bullets */
    margin: 0 !important;            /* Resetear margen */
    background-color: #ffffff;       /* Fondo blanco (por defecto en GP, pero aseguramos) */
    /* Ancho - Se controla en Media Queries */
    width: auto !important;          /* Dejar que el contenido defina el ancho inicial */
    min-width: auto !important;      /* Sin ancho mínimo restrictivo */
    max-width: none !important;      /* Sin ancho máximo restrictivo */
    box-sizing: border-box;
    border: 1px solid #ededed;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* --- Item Individual (LI) - Actúa como la tarjeta del bloque --- */
.main-navigation ul ul.brands-submenu li.brand-item {
    flex: 1 1 100px; /* Base flexible (100px), puede crecer y encoger */
    min-width: 90px;  /* Ancho mínimo para evitar compresión excesiva */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start; /* Alinear contenido arriba */
    padding: 8px !important;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    margin: 0 !important; /* Resetear margen del LI */
    width: auto !important; /* Ancho definido por flex */
    box-sizing: border-box;
}

.main-navigation ul ul.brands-submenu li.brand-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.07);
    border-color: #ccc;
}

/* --- Enlace Interno (A) - Ocupa todo el LI --- */
.main-navigation ul ul.brands-submenu li.brand-item a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start; /* Alinear contenido del enlace arriba */
    text-decoration: none !important;
    color: inherit !important;
    width: 100% !important; /* Ocupa todo el LI */
    height: 100%; /* Ocupa toda la altura */
    padding: 0 !important; /* Quitar padding del enlace, ya está en el LI */
    background-color: transparent !important; /* Sin fondo en el enlace */
    box-sizing: border-box;
}
 .main-navigation ul ul.brands-submenu li.brand-item a:hover {
     background-color: transparent !important; /* Asegurar que no cambie el fondo en hover */
 }


/* --- Contenedor del Logo (DIV) - EXACTAMENTE COMO EL BLOQUE --- */
.main-navigation ul ul.brands-submenu li.brand-item .brand-logo-container {
    width: 100%;          /* Ocupa el ancho del LI */
    height: 40px;         /* ALTURA FIJA - **AJUSTA ESTE VALOR SI ES NECESARIO** */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 5px;  /* Espacio reducido bajo el logo */
    overflow: hidden;
    flex-shrink: 0;      /* No encoger el área del logo */
}

/* --- Imagen del Logo (IMG) - EXACTAMENTE COMO EL BLOQUE --- */
.main-navigation ul ul.brands-submenu li.brand-item img.brand-logo {
    display: block;
    max-width: 100%;
    max-height: 100%;     /* No puede ser más alto que el contenedor */
    width: auto;
    height: auto;
    object-fit: contain; /* Escalar manteniendo proporción, sin cortar */
    object-position: center;
}

/* --- Nombre de la Marca (SPAN) --- */
.main-navigation ul ul.brands-submenu li.brand-item .brand-name {
    display: block;
    font-size: 11px;      /* Tamaño más pequeño */
    color: #555;
    line-height: 1.2;
    font-weight: 400;
    margin-top: auto;     /* Empuja hacia abajo si hay espacio extra */
    padding-top: 3px;    /* Pequeño espacio arriba */
    width: 100%;          /* Ocupa el ancho */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;  /* Evitar salto de línea en el nombre */
}

/* --- Ajustes Específicos para Desktop (Menú Horizontal) --- */
@media (min-width: 769px) { /* Ajusta el breakpoint si tu tema usa otro */
    .main-navigation ul ul.brands-submenu {
        width: 640px !important; /* Ancho fijo o max-width para el desplegable */
        /* justify-content: center; */ /* Opcional: centrar filas si no llenan el ancho */
    }

    .main-navigation ul ul.brands-submenu li.brand-item {
         flex-basis: 110px; /* Ajustar base si quieres un tamaño más específico */
    }

    .main-navigation ul ul.brands-submenu li.brand-item .brand-logo-container {
         height: 45px; /* Ligeramente más alto en desktop */
    }
     .main-navigation ul ul.brands-submenu li.brand-item .brand-name {
         font-size: 12px;
    }
}

/* --- Ajustes Específicos para Mobile (Menú Desplegado/Vertical) --- */
@media (max-width: 768px) { /* Ajusta el breakpoint */
    .main-navigation.toggled ul ul.brands-submenu {
        justify-content: center;
        gap: 8px !important;
        padding: 10px !important;
        width: 100% !important;
        background-color: #f0f0f0 !important;

        /* --- INICIO: NUEVAS REGLAS PARA SCROLL EN MÓVIL --- */
        max-height: 45vh; /* Altura máxima del 45% de la altura de la pantalla. AJUSTA ESTE VALOR. */
        overflow-y: auto;   /* ¡La clave! Activa el scroll vertical si el contenido se desborda. */
        overflow-x: hidden; /* Oculta el scroll horizontal por si acaso. */

        /* Para un scroll más suave en iOS */
        -webkit-overflow-scrolling: touch;
        /* --- FIN: NUEVAS REGLAS PARA SCROLL --- */
    }

    .main-navigation.toggled ul ul.brands-submenu li.brand-item {
         flex-basis: calc(25% - 10px); /* Intentar 4 columnas restando el gap */
         min-width: 75px; /* Ancho mínimo más pequeño */
         padding: 5px !important;
         border-color: #ddd;
    }

    .main-navigation.toggled ul ul.brands-submenu li.brand-item .brand-logo-container {
         height: 35px; /* Altura menor en móvil */
         margin-bottom: 4px;
    }
     .main-navigation.toggled ul ul.brands-submenu li.brand-item .brand-name {
         font-size: 13px; /* Nombre aún más pequeño */
    }
}


/* ==============================================================
   ESTILOS SUBMENU "TIPOS" (Lista Vertical Grande)
   ============================================================== */

/* --- Contenedor Principal del Submenú "Tipos" (UL) --- */
#menu-item-1941 > ul.sub-menu {
    /* --- QUITAR FLEXBOX --- */
    /* display: flex !important; */
    /* flex-wrap: wrap !important; */
    /* justify-content: flex-start; */
    /* gap: 8px !important; */

    /* --- ESTILOS BASE --- */
    display: block !important;        /* Comportamiento de bloque por defecto */
    padding: 10px 0 !important;       /* Padding vertical, sin padding horizontal */
    list-style: none !important;
    margin: 0 !important;
    background-color: #ffffff;
    border: 1px solid #ededed;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra un poco más notable */
    /* Ancho se define en media queries */
    width: auto !important;
    min-width: 220px !important; /* Ancho mínimo un poco mayor */
    max-width: none !important;
    box-sizing: border-box;
    border-radius: 8px;
}

/* --- Item Individual (LI) - Reseteos y Espaciado --- */
#menu-item-1941 > ul.sub-menu > li.menu-item {
    display: block !important; /* Asegurar que es bloque */
    margin: 0 !important;
    padding: 0 !important;      /* Sin padding en el LI */
    width: 100% !important;     /* Ocupa todo el ancho */
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0; /* Línea separadora sutil */
}
#menu-item-1941 > ul.sub-menu > li.menu-item:last-child {
     border-bottom: none; /* Sin línea en el último */
}


/* --- Enlace (A) - Estilo más grande --- */
#menu-item-1941 > ul.sub-menu > li.menu-item > a {
    display: block !important;
    padding: 12px 20px !important; /* Más padding vertical y horizontal */
    background-color: transparent !important; /* Sin fondo por defecto */
    border: none !important;        /* Sin borde en el enlace */
    border-radius: 0 !important;    /* Sin bordes redondeados */
    text-align: left !important;    /* Texto alineado a la izquierda */
    color: #333 !important;
    font-size: 14px !important;     /* Tamaño de fuente un poco mayor */
    font-weight: 500 !important;     /* Peso de fuente normal o semi-bold */
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: 100% !important;
    height: 100%;
    box-sizing: border-box;
    line-height: 1.4;
    white-space: normal; /* Permitir saltos de línea */
}

#menu-item-1941 > ul.sub-menu > li.menu-item > a:hover {
    background-color: #f5f5f5 !important; /* Fondo gris muy claro en hover */
    color: #52bf31 !important; /* Color corporativo en hover */
}

/* --- Ajustes Específicos para Desktop (Menú Horizontal) --- */
@media (min-width: 769px) {
    #menu-item-1941 > ul.sub-menu {
         width: 250px !important; /* Ancho fijo o max-width deseado */
    }
    /* Los LI y A heredan los estilos base */
}

/* --- Ajustes Específicos para Mobile (Menú Desplegado/Vertical) --- */
@media (max-width: 768px) {
    .main-navigation.toggled #menu-item-1941 > ul.sub-menu {
        /* Hereda display:block */
        padding: 0 !important;      /* Sin padding vertical/horizontal en el UL */
        width: 100% !important;
        background-color: #f0f0f0 !important; /* Fondo gris claro */
        border: none !important;
        box-shadow: none !important;
        /* Añadir un borde superior si se quiere separar del padre */
        border-top: 1px solid #ddd !important;
    }

    .main-navigation.toggled #menu-item-1941 > ul.sub-menu > li.menu-item {
         border-bottom-color: #ddd; /* Hacer separador un poco más visible */
    }
     .main-navigation.toggled #menu-item-1941 > ul.sub-menu > li.menu-item:last-child {
         border-bottom: none;
    }

    .main-navigation.toggled #menu-item-1941 > ul.sub-menu > li.menu-item > a {
        padding: 14px 15px !important; /* Padding para móvil */
        font-size: 15px !important;
        font-weight: 500 !important;
        color: #333 !important; /* Asegurar color en móvil */
        background-color: transparent !important; /* Fondo transparente en móvil */
    }
     .main-navigation.toggled #menu-item-1941 > ul.sub-menu > li.menu-item > a:hover {
         background-color: rgba(255, 255, 255, 0.2) !important; /* Hover más sutil en móvil */
         color: #52bf31 !important;
     }
}



/* Estilo para el botón de envío cuando está deshabilitado por no seleccionar cuota */
.wpcf7-submit.disabled-cuota {
    /* background-color: #cccccc !important; */ /* <-- ELIMINADO O COMENTADO */
    /* color: #666666 !important; */ /* <-- ELIMINADO O COMENTADO */
    /* cursor: not-allowed !important; */ /* <-- MANTENER ESTO */
}

/* Quitar efecto hover/active cuando está deshabilitado */
.wpcf7-submit.disabled-cuota:hover,
.wpcf7-submit.disabled-cuota:active {
    /* background-color: #cccccc !important; */ /* <-- ELIMINADO O COMENTADO */
    transform: none !important;
    box-shadow: none !important;
}



/* ==============================================================
   ESTILOS CARRUSEL TESTIMONIOS HEYrenting (ESQUEMA DE COLOR ACTUALIZADO)
   ============================================================== */

/* --- A. ESTILOS DEL CONTENEDOR PRINCIPAL DEL BLOQUE --- */
.heyrenting-testimonials-block.heyrenting-testimonial-carousel-container {
    padding: 50px 0;
    margin-top: 40px;
    margin-bottom: 40px;
    clear: both;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8f9fa; /* FONDO GRIS CLARO GENERAL (YA LO TENÍAS) */
    border-top: 1px solid #e9ecef;
    border-bottom: 1px solid #e9ecef;
}

/* A1. Contenedor en PÁGINAS DE PRODUCTO */
.single-product .testimonials-on-product-page .heyrenting-testimonials-block.heyrenting-testimonial-carousel-container {
    /* El background-color ya está en la regla general. */
    /* Si el tema permite full-width, este será el color. */
}

/* A2. Contenedor en OTRAS PÁGINAS (Bloque Gutenberg) */
body:not(.single-product) .heyrenting-testimonials-block.heyrenting-testimonial-carousel-container {
    /* El background-color ya está en la regla general. */
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 12px;
}

/* --- B. TÍTULO DE LA SECCIÓN --- */
.heyrenting-testimonials-block .heyrenting-testimonials-title {
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    color: #333333; /* TÍTULO OSCURO (buen contraste sobre #f8f9fa) */
    margin-top: 0;
    margin-bottom: 40px;
    padding-bottom: 10px;
    position: relative;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.heyrenting-testimonials-block .heyrenting-testimonials-title::after {
    background-color: #52bf31; /* Línea verde HEYrenting */
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    border-radius: 2px;
}

/* --- C. CONTENEDOR INTERNO DEL CARRUSEL SLICK --- */
.heyrenting-testimonial-carousel {
    max-width: 1220px;
    margin: 0 auto;
    padding: 0 50px; /* Espacio para flechas */
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
    position: relative;
}
.heyrenting-testimonial-carousel.slick-initialized {
    opacity: 1;
    visibility: visible;
}
.heyrenting-testimonial-carousel .slick-list {
    overflow: hidden !important;
    margin: 0 -10px;
    padding: 15px 0;
}
.heyrenting-testimonial-carousel .slick-track { display: flex; }

/* --- D. SLIDE INDIVIDUAL Y TARJETA --- */
.heyrenting-testimonial-carousel .slick-slide {
    padding: 0 10px; box-sizing: border-box; height: auto;
    display: flex !important; align-items: stretch; min-height: 1px;
}
.heyrenting-testimonial-carousel .slick-slide > div {
    display: flex; flex-direction: column; height: 100%; width: 100%; min-height: 1px;
}
.heyrenting-testimonial-carousel .heyrenting-testimonial-card {
    display: flex; flex-direction: column; height: 100%;
    box-sizing: border-box; width: 100%; position: relative;
}

.heyrenting-testimonial-carousel .testimonial-card-top-content {
    background-color: #ffffff;
    color: #555555;
    border-radius: 8px;
    padding: 25px 20px;
    margin-bottom: 20px;
    position: relative;
    flex-grow: 1;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
}
.heyrenting-testimonial-carousel .testimonial-card-top-content::after {
    content: ''; position: absolute; bottom: -10px; left: 25px;
    width: 0; height: 0;
    border-left: 10px solid transparent; border-right: 10px solid transparent;
    border-top: 10px solid #ffffff; /* RABITO BLANCO */
}

.heyrenting-testimonial-carousel .testimonial-card-rating {
    margin-bottom: 12px; text-align: left;
}
.heyrenting-testimonial-carousel .testimonial-card-rating .star {
    font-size: 18px; color: #FFC107; /* Amarillo para estrellas llenas */
    margin-right: 2px;
}
.heyrenting-testimonial-carousel .testimonial-card-rating .star.empty {
    color: #dcdcdc; /* Gris más claro para estrellas vacías sobre fondo blanco */
}

body:not(.single-product) .heyrenting-testimonials-block .heyrenting-testimonial-carousel .testimonial-card-text {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important; /* Para asegurar que no herede una altura fija */
}
body:not(.single-product) .heyrenting-testimonials-block .heyrenting-testimonial-carousel .testimonial-card-top-content {
    height: auto !important; /* Que el bocadillo también pueda crecer */
    min-height: 0 !important; /* Quitar cualquier min-height restrictivo */
}

.heyrenting-testimonial-carousel .testimonial-card-text {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 10px;
    text-align: left;
    /* Asegurarse de que no haya max-height ni overflow: hidden aquí */
    /* max-height: none !important; /* Puedes probar esto si sigue cortándose */
    /* overflow: visible !important; /* Y esto también */
    flex-grow: 1;
}
.heyrenting-testimonial-carousel .testimonial-card-text p { margin-bottom: 0.5em; }
.heyrenting-testimonial-carousel .testimonial-card-text p:last-child { margin-bottom: 0; }

.heyrenting-testimonial-carousel .testimonial-read-more {
    display: inline-block; font-size: 14px; color: #52bf31; /* VERDE HEYRENTING */
    text-decoration: none; margin-top: 8px;
}
.heyrenting-testimonial-carousel .testimonial-read-more:hover { text-decoration: underline; }

.heyrenting-testimonial-carousel .testimonial-review-source-logo {
    position: absolute;
    bottom: 15px; /* O 12px como tenías */
    right: 15px;  /* O 12px como tenías */
    width: auto;
    height: 20px; /* O 18px como tenías */
    opacity: 0.7;
}

.heyrenting-testimonial-carousel .testimonial-card-author-info {
    display: flex; align-items: center; padding-top: 0;
    padding-left: 5px; /* Mantiene avatar un poco indentado */
}
.heyrenting-testimonial-carousel .testimonial-author-avatar img {
    display: block; border-radius: 50%; width: 40px; height: 40px;
    object-fit: cover; margin-right: 12px;
    border: 2px solid #e0e0e0;
}
.heyrenting-testimonial-carousel .testimonial-author-details { line-height: 1.3; }
.heyrenting-testimonial-carousel .testimonial-author-name {
    font-weight: 600; color: #333333; /* NOMBRE AUTOR OSCURO */
    font-size: 15px; font-style: normal; display: flex; align-items: center;
}
.heyrenting-testimonial-carousel .author-verified-check {
    display: inline-block; margin-left: 5px; color: #52bf31; /* CHECK VERDE */
    line-height: 1;
}
.heyrenting-testimonial-carousel .author-verified-check svg {
    width: 14px; height: 14px; vertical-align: middle;
}
.heyrenting-testimonial-carousel .testimonial-author-time {
    font-size: 12px; color: #777777; /* TIEMPO GRIS MEDIO */
    display: block;
}

/* --- E. FLECHAS SLICK (CON FONT AWESOME) --- */
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-arrow {
    z-index: 5; width: 40px; height: 40px;
    padding: 0;
    background-color: #ffffff !important; /* FONDO BLANCO */
    color: #52bf31 !important; /* ICONO VERDE HEYRENTING */
    border-radius: 50%;
    border: 1px solid #e0e0e0; /* Borde sutil gris */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease, box-shadow 0.3s ease;
    top: 50%; transform: translateY(-50%); position: absolute; cursor: pointer;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-arrow:hover {
    background-color: #f0f0f0 !important; /* Gris muy claro en hover */
    color: #429b27 !important; /* Verde más oscuro en hover */
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-arrow:active {
    transform: translateY(-50%) scale(0.90);
}

.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-prev { left: 0px; }
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-next { right: 0px; }

.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-arrow i.fa-solid {
    font-size: 18px; line-height: 1; display: block;
}

/* Neutralizar ::before */
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-arrow::before {
    content: "" !important; display: none !important;
}

/* --- F. PUNTOS SLICK --- */
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots {
    bottom: -20px; margin-top: 30px; position: relative;
    display: block; width: 100%; padding: 0;
    list-style: none; text-align: center;
    margin-left: auto; margin-right: auto;
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots li {
    display: inline-block; margin: 0 6px;
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots li button {
    font-size: 0; line-height: 0; display: block;
    width: 10px; height: 10px;
    padding: 0; cursor: pointer; color: transparent; border: 0; outline: none;
    background: #cccccc; /* PUNTOS INACTIVOS GRIS MEDIO */
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.2s ease;
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots li button:hover {
    background: #aaaaaa;
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots li.slick-active button {
    background: #52bf31; /* PUNTOS ACTIVOS VERDE HEYRENTING */
    transform: scale(1.25);
}
.heyrenting-testimonials-block .heyrenting-testimonial-carousel .slick-dots li button:before {
    content: none !important;
}

/* --- G. RESPONSIVE --- */
@media (max-width: 1200px) { /* 3 tarjetas */
    .heyrenting-testimonial-carousel { max-width: 980px; padding: 0 45px; }
    .heyrenting-testimonial-carousel .slick-arrow { top: calc(50% - 20px); } /* Ajustar si el bocadillo es muy alto */
}

@media (max-width: 992px) { /* 2 tarjetas */
    body:not(.single-product) .heyrenting-testimonials-block.heyrenting-testimonial-carousel-container {
        border-radius: 10px;
    }
    .heyrenting-testimonial-carousel { padding: 0 15px; }
    .heyrenting-testimonial-carousel .slick-list { margin: 0 -8px; padding: 10px 0; }
    .heyrenting-testimonial-carousel .slick-slide { padding: 0 8px; }
    .heyrenting-testimonial-carousel .slick-prev { left: -5px; } /* Ajuste para acercar más */
    .heyrenting-testimonial-carousel .slick-next { right: -5px; }
    .heyrenting-testimonial-carousel .slick-arrow { width: 36px; height: 36px; }
    .heyrenting-testimonial-carousel .slick-arrow i.fa-solid { font-size: 16px; }
    .heyrenting-testimonial-carousel .testimonial-card-text { max-height: 75px; font-size: 14px; }
}

@media (max-width: 767px) { /* 1 tarjeta */
    .heyrenting-testimonials-block.heyrenting-testimonial-carousel-container {
        padding: 30px 0 25px 0; margin-top: 30px; margin-bottom: 30px; border-radius: 0;
        /* Fondo general ya es #f8f9fa, no necesita cambio específico para móvil aquí */
    }
    .heyrenting-testimonials-block .heyrenting-testimonials-title {
        font-size: 22px; margin-bottom: 30px; /* color: #333; ya lo tiene */
    }
    .heyrenting-testimonial-carousel { padding: 0 10px; }
    .heyrenting-testimonial-carousel .slick-arrow { display: none !important; }
    .heyrenting-testimonial-carousel .slick-list { margin: 0 -5px; padding: 10px 0; }
    .heyrenting-testimonial-carousel .slick-slide { padding: 0 5px; }
    .heyrenting-testimonial-carousel .testimonial-card-top-content {
        padding: 20px 15px; min-height: 140px; /* Ajustar padding y min-height */
    }
    .heyrenting-testimonial-carousel .testimonial-card-text {
        font-size: 14px; max-height: 70px;
    }
    .heyrenting-testimonial-carousel .testimonial-google-logo { height: 18px; bottom: 12px; right: 12px; }
    .heyrenting-testimonial-carousel .testimonial-author-avatar img { width: 36px; height: 36px; }
    .heyrenting-testimonial-carousel .testimonial-author-name { font-size: 14px; color: #222; }
    .heyrenting-testimonial-carousel .author-verified-check svg { width: 13px; height: 13px; }
    .heyrenting-testimonial-carousel .testimonial-author-time { font-size: 11px; color: #666; }
    .heyrenting-testimonial-carousel .slick-dots { margin-top: 20px; bottom: -10px; }
    .heyrenting-testimonial-carousel .slick-dots li button { width: 9px; height: 9px; background: #b0b0b0; }
    .heyrenting-testimonial-carousel .slick-dots li.slick-active button { background: #52bf31; }
}



/* ==============================================================
   ESTILOS BANNER PROMOCIONAL REGALO (Página Producto)
   ============================================================== */
.heyrenting-gift-banner {
    background-color: #52bf31;
    color: #ffffff;
    padding: 20px 30px;
    margin-top: 0px; /* Mantenemos margen superior */
    margin-bottom: 30px; /* Mantenemos margen inferior */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    box-sizing: border-box; /* Incluye padding/border en el width/max-width */
    margin-left: auto;     /* Centra horizontalmente cuando max-width está activo */
    margin-right: auto;    /* Centra horizontalmente cuando max-width está activo */
    max-width: 1000px!important;
    height: 100px;
}

.heyrenting-gift-banner-content {
    display: flex;
    align-items: center;
    flex-grow: 1; /* Ocupa el espacio disponible */
}

.heyrenting-gift-banner-content i.fa-gift {
    font-size: 1.6em;      /* Tamaño del icono */
    margin-right: 15px;   /* Espacio a la derecha del icono */
    flex-shrink: 0;      /* Evitar que el icono se encoja */
}

.heyrenting-gift-banner-content span {
    font-size: 1.1em;     /* Tamaño del texto */
    font-weight: 600;     /* Peso de fuente */
}

.heyrenting-gift-banner-action {
    flex-shrink: 0; /* Evitar que el botón se encoja */
}

.heyrenting-gift-banner-button {
    background-color: #ffffff !important;
    color: #52bf31 !important;
    border: 1px solid #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease;
    font-size: 0.95em !important;
}

.heyrenting-gift-banner-button:hover {
    background-color: #f0f0f0; /* Gris claro al pasar el ratón */
    color: #429b27; /* Verde más oscuro */
    border-color: #f0f0f0;
}

.heyrenting-gift-banner-button:active {
    transform: scale(0.97); /* Efecto click */
}

.gift-arrow-desktop {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* --- Responsive para el banner --- */
@media (max-width: 768px) {
    .heyrenting-gift-banner {
        padding: 25px 20px;
        text-align: center;
        justify-content: center;
        width: 100%;        /* Ocupa todo el ancho */
        max-width: none;      /* Anula el max-width de escritorio */
        margin-left: 0;       /* Sin margen automático */
        margin-right: 0;      /* Sin margen automático */
        border-radius: 0;     /* Opcional: quitar bordes redondeados en móvil */
        height: auto;
    }

    .heyrenting-gift-banner-content {
        justify-content: center; /* Centrar icono y texto */
        margin-bottom: 10px; /* Espacio si el botón pasa abajo */
        flex-basis: 100%; /* Ocupar todo el ancho */
        align-items: flex-start;
    }

    .heyrenting-gift-banner-content i.fa-gift {
        font-size: 1.4em;
        margin-right: 10px;
    }

    .heyrenting-gift-banner-content span {
        font-size: 1em;
    }

    .heyrenting-gift-banner-action {
       flex-basis: 100%; /* Botón ocupa todo el ancho */
       text-align: center;
    }

    .heyrenting-gift-banner-button {
        width: auto; /* Ancho automático o 100% si prefieres */
        /* width: 100%; */
        padding: 10px 20px;
    }
}

@media(min-width: 768px) {
    .gift-arrow-desktop {
        opacity: 1;
        pointer-events: auto;
        margin-left: 5px;
    }
}

/* ==============================================================
   ESTILOS MENSAJE ERROR SELECCIÓN CUOTA
   ============================================================== */
#heyrenting-cuota-error-message {
    display: none; /* Oculto por defecto */
    color: #D8000C; /* Texto rojo oscuro */
    background-color: #FFD2D2; /* Fondo rojo claro */
    border: 1px solid #D8000C; /* Borde rojo oscuro */
    padding: 10px 15px;
    margin: 20px 0 15px 0; /* Margen arriba/abajo */
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 0.95em;
}

#heyrenting-cuota-error-message.visible {
    display: block; /* Mostrar cuando tenga la clase 'visible' */
}


/* ==============================================================
   ESTILOS ARCHIVO BLOG PERSONALIZADO HEYRENTING
   ============================================================== */

/* Contenedor principal del contenido del archivo */
.heyrenting-archive-container {
    max-width: 1200px; /* Ajusta el ancho máximo según tu diseño */
    margin: 20px auto;
    padding: 0 15px; /* Padding lateral */
}

/* Título del archivo */
.heyrenting-archive-container .page-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.heyrenting-archive-container .page-title {
    font-size: 28px; /* Ajusta según tu diseño */
    font-weight: 600;
    margin-bottom: 5px;
}

.heyrenting-archive-container .taxonomy-description {
    font-size: 16px;
    color: #555;
}

/* Grid de Posts */
.heyrenting-blog-archive-grid {
    display: grid;
    gap: 30px; /* Espacio entre tarjetas */
    /* Columnas por defecto (móvil primero) */
    grid-template-columns: 1fr;
}

/* Tarjeta de Post Individual */
.heyrenting-post-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden; /* Asegura que contenido respete bordes */
    display: flex;
    flex-direction: column; /* Apila elementos verticalmente */
    height: 100%; /* Ocupa toda la altura de la celda del grid */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 0; /* Resetear margen inferior por defecto de article */
}

.heyrenting-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

/* Contenedor de la Imagen */
.heyrenting-post-card .post-card-image {
    line-height: 0; /* Evitar espacio extra bajo la imagen */
}

.heyrenting-post-card .post-card-image a {
    display: block;
}

.heyrenting-post-card .post-card-image img {
    display: block;
    width: 100%;
    height: auto; /* Mantiene proporción */
    /* Si definiste un tamaño fijo con recorte: */
    /* height: 195px; */ /* O la altura que definiste */
    /* object-fit: cover; */
    border-bottom: 1px solid #eee; /* Línea bajo la imagen */
}

/* Contenedor del Contenido (Texto) */
.heyrenting-post-card .post-card-content {
    padding: 20px 25px;
    flex-grow: 1; /* Hace que esta sección crezca para llenar espacio */
    display: flex;
    flex-direction: column; /* Apilar header, summary, footer */
}

/* Título del Post */
.heyrenting-post-card .entry-header .entry-title {
    font-size: 21px; /* Tamaño del título de la tarjeta */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.4;
}
.heyrenting-post-card .entry-header .entry-title a {
    text-decoration: none;
    color: #333;
    transition: color 0.2s ease;
}
.heyrenting-post-card .entry-header .entry-title a:hover {
    color: #52bf31; /* Color corporativo en hover */
}

/* Metadatos (Fecha, Autor) */
.heyrenting-post-card .entry-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
    line-height: 1.3;
}
.heyrenting-post-card .entry-meta span {
    margin-right: 10px; /* Espacio entre meta items */
}
.heyrenting-post-card .entry-meta a {
    color: inherit; /* Hereda color del meta */
    text-decoration: none;
}
.heyrenting-post-card .entry-meta a:hover {
    color: #52bf31;
    text-decoration: underline;
}

/* Extracto */
.heyrenting-post-card .entry-summary {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px; /* Espacio antes del footer */
    flex-grow: 1; /* Permite que el extracto crezca */
}
.heyrenting-post-card .entry-summary p:last-child {
    margin-bottom: 0; /* Quitar margen inferior del último párrafo del extracto */
}

/* Footer de la Tarjeta (Botón Leer Más) */
.heyrenting-post-card .entry-footer {
    margin-top: auto; /* Empuja el footer hacia abajo */
    padding-top: 15px; /* Espacio sobre el botón */
    border-top: 1px solid #f0f0f0; /* Línea sutil */
}

.heyrenting-post-card .read-more-link {
    display: inline-block;
    padding: 6px 12px;
    background-color: #52bf31;
    color: #ffffff;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.heyrenting-post-card .read-more-link:hover {
    background-color: #429b27; /* Verde más oscuro */
    color: #ffffff;
}

/* --- Responsive para el Grid --- */

/* Tabletas (ej. 2 columnas) */
@media (min-width: 600px) {
    .heyrenting-blog-archive-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Escritorio (ej. 3 columnas) */
@media (min-width: 992px) {
    .heyrenting-blog-archive-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Ajustes Paginación (Opcional) */
.heyrenting-archive-container .navigation.pagination {
    margin-top: 40px;
    text-align: center;
    border-top: 1px solid #eee;
    padding-top: 20px;
}
.heyrenting-archive-container .nav-links .page-numbers {
    padding: 5px 10px;
    margin: 0 2px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #555;
}
.heyrenting-archive-container .nav-links .page-numbers.current,
.heyrenting-archive-container .nav-links .page-numbers:hover {
    background-color: #52bf31;
    color: #fff;
    border-color: #52bf31;
}


/* ==============================================================
   ESTILOS FOOTER PERSONALIZADO HEYRENTING (CPT + TAX) - LAYOUT FIX
   ============================================================== */

/* Contenedor principal del footer de GP (el que contiene todo) */
.site-info .inside-site-info {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    align-items: flex-start;
    /* Añadimos un gap entre filas (opcional, pero útil) */
    row-gap: 20px;
    /* Podemos añadir un borde superior aquí si queremos separar TODO el bloque inferior */
     border-top: 1px solid #eaeaea; /* <<<--- BORDE ÚNICO AQUÍ */
     margin-top: 30px; /* Espacio sobre el borde */
     padding-top: 30px; /* Espacio debajo del borde */

}

/* Contenedor de NUESTRO footer personalizado con columnas */
.site-info .heyrenting-custom-footer {
    width: 100%;
    flex-basis: 100%;
    order: 1; /* Primero nuestro footer */
    padding-bottom: 30px;
    margin-bottom: 30px;
    box-sizing: border-box;
}

/* Contenedor interno flex/grid para las columnas */
.site-info .inside-footer-columns {
    display: flex;
    flex-wrap: wrap; /* CLAVE: permitir que los elementos pasen a nueva línea */
    gap: 30px; /* Espacio entre columnas (horizontal y vertical cuando hacen wrap) */
    justify-content: space-between; /* Por defecto para escritorio */
}

/* Estilo de cada columna */
.site-info .footer-column {
    flex-grow: 1; /* Permitir que crezcan */
    flex-shrink: 1; /* Permitir que se encojan */
    flex-basis: calc(33.333% - 21px); /* Base para 3 columnas (ajusta el 21px según tu gap) */
                                   /* (gap * (num_cols - 1)) / num_cols  => (30px * 2) / 3 = 20px. */
                                   /* Si el gap es 30px, y quieres 3 columnas, entonces 30px * 2 / 3 = 20px de reducción */
    min-width: 180px; /* Ancho mínimo para evitar que se compriman demasiado */
    box-sizing: border-box;
}

/* --- INICIO: ESTILOS VISUALES (FALTANTES) --- */

/* Título de la Columna (SPAN) */
.site-info .footer-column-title {
    display: block;
    font-size: 1.1em; /* Tamaño del título */
    font-weight: bold; /* Negrita */
    margin-bottom: 15px; /* Espacio debajo */
    color: #333; /* Color oscuro */
    padding-bottom: 5px; /* Espacio para posible borde inferior */
    /* Opcional: Borde inferior sutil para el título */
    /* border-bottom: 1px solid #eee; */
}

/* Lista de enlaces dentro de la columna */
.site-info .footer-column-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.site-info .footer-column-list li {
    margin-bottom: 10px; /* Espacio entre enlaces */
}
.site-info .footer-column-list li:last-child {
    margin-bottom: 0; /* Sin espacio en el último */
}

/* Estilo del enlace o texto */
.site-info .footer-column-list li a,
.site-info .footer-column-list li span {
    color: #555; /* Color gris oscuro para enlaces */
    text-decoration: none;
    font-size: 15px; /* Tamaño del texto del enlace */
    transition: color 0.2s ease, text-decoration 0.2s ease;
    display: inline-block; /* Para que el hover no afecte a toda la línea */
}

/* Estilo hover para enlaces */
.site-info .footer-column-list li a:hover {
    color: #52bf31; /* Color corporativo */
    text-decoration: underline; /* Subrayado en hover */
}

/* --- FIN: ESTILOS VISUALES (FALTANTES) --- */


/* Barra del pie de página (Widget Block "Icons by...") */
.site-info .footer-bar {
     /* border-top: 1px solid #eaeaea; */ /* <<<--- COMENTAR O ELIMINAR */
     /* Mantenemos width, flex-basis, pero quitamos order por ahora */
     width: 100%;
     flex-basis: 100%;
     margin-top: 0; /* Resetear margen */
     padding-top: 0; /* Resetear padding */
     text-align: center; /* Centrado por defecto */
     box-sizing: border-box;
     font-size: 13px;
     color: #777;
     /* order: 2; <-- Quitamos order temporalmente */
}
.site-info .footer-bar a {
    color: #555; /* Color enlace */
    text-decoration: underline;
}
.site-info .footer-bar a:hover {
    color: #52bf31;
}

/* Barra de copyright */
.site-info .copyright-bar {
     /* Mantenemos width, flex-basis, pero quitamos order por ahora */
     width: 100%;
     flex-basis: 100%;
     margin-top: 0; /* Resetear margen */
     padding-top: 0; /* Resetear padding */
     text-align: center; /* Centrado por defecto */
     box-sizing: border-box;
     font-size: 14px;
     color: #666;
     /* order: 3; <-- Quitamos order temporalmente */
}
 .site-info .copyright-bar a { color: #555; text-decoration: none; }
 .site-info .copyright-bar a:hover { text-decoration: underline; }
 
@media (min-width: 769px) {

    /* El contenedor principal .inside-site-info sigue siendo flex y wrap */

    /* Nuestro footer personalizado sigue primero */
    .site-info .heyrenting-custom-footer {
        order: 1;
        /* El borde inferior ya está quitado */
        margin-bottom: 0; /* Quitar margen inferior antes del borde superior */
        padding-bottom: 60px; /* Quitar padding inferior antes del borde superior */
    }

    /* La barra de copyright ahora va PRIMERO en el orden visual de la fila inferior */
    .site-info .copyright-bar {
        width: auto;      /* <<< Ancho automático */
        flex-basis: auto; /* <<< Base automática */
        order: 2;         /* <<< Orden 2 (después de las columnas) */
        text-align: left; /* <<< Alinear a la izquierda */
        margin-right: auto; /* Empuja otros elementos a la derecha */
        /* Resetear márgenes/paddings verticales si afectan */
        margin-top: 0;
        padding-top: 0;
    }

    /* La barra del pie de página ("Icons by") va DESPUÉS */
    .site-info .footer-bar {
        width: auto;      /* <<< Ancho automático */
        flex-basis: auto; /* <<< Base automática */
        order: 3;         /* <<< Orden 3 (después del copyright) */
        text-align: right;/* <<< Alinear a la derecha */
        /* Resetear márgenes/paddings verticales si afectan */
        margin-top: 0;
        padding-top: 0;
    }

    /* Re-aplicamos el borde superior general al contenedor padre */
     .site-info .inside-site-info {
         border-top: 1px solid #eaeaea; /* <<< BORDE ÚNICO AQUÍ */
         margin-top: 30px; /* Espacio sobre el borde */
         padding-top: 30px; /* Espacio debajo del borde */
    }
}

/* --- Responsive (Combinado) --- */
@media (max-width: 768px) {
    /* Layout columnas */
    .site-info .footer-column {
        flex-basis: calc(50% - 8px); /* (gap 15px / 2 = 7.5px, redondeado a 8px) */
                                     /* O prueba con un porcentaje un poco menor si no caben: */
                                     /* flex-basis: 48%; */
        min-width: 140px;            /* Un min-width más pequeño para permitir que se encojan más */
                                     /* Ajusta este valor. Si es muy grande, forzará el apilamiento antes. */
        flex-grow: 0;                /* Importante para que la 3ra/4ta no se estire */
        box-sizing: border-box;
    }

    .site-info .inside-footer-columns {
        display: flex;
        flex-wrap: wrap;
        gap: 15px; /* Puedes reducir el gap para pantallas más pequeñas */
        justify-content: flex-start; /* O center si prefieres */
    }

    /* Estilos barras inferiores (esto ya estaba bien para el apilamiento) */
    .site-info .footer-bar,
    .site-info .copyright-bar {
         width: 100%;
         flex-basis: 100%;
         text-align: center;
         order: 0;
    }
    .site-info .footer-bar { order: 2; margin-top: 15px; padding-top: 0; margin-bottom: 5px; }
    .site-info .copyright-bar { order: 3; margin-top: 5px; padding-top: 0; padding-bottom: 10px; }

    /* Ajustes texto responsive (esto ya estaba bien) */
    .site-info .footer-column-title { font-size: 1em; }
    .site-info .footer-column-list li a,
    .site-info .footer-column-list li span { font-size: 14px; }
    .site-info .footer-bar { font-size: 12px; }
    .site-info .copyright-bar { font-size: 13px; }

    /* Borde superior y padding/margen (esto ya estaba bien) */
     .site-info .inside-site-info {
         border-top: 1px solid #eaeaea;
         margin-top: 20px;
         padding-top: 20px;
     }
     .site-info .heyrenting-custom-footer {
         margin-bottom: 0;
         padding-bottom: 30px;
         border-bottom: none;
     }
}

@media (max-width: 480px) {
    /* Layout columnas */
    .site-info .inside-footer-columns {
        flex-direction: column; /* Apilar verticalmente */
        gap: 50px; /* Espacio vertical entre columnas */
        justify-content: flex-start; /* Resetear por si estaba centrado */
    }
    .site-info .footer-column {
        flex-basis: 100%; /* Cada columna ocupa el 100% */
        min-width: 100%;
        margin-bottom: 0; /* El gap ya maneja el espaciado */
    }
    .site-info .footer-column:last-child {
         margin-bottom: 0;
    }
    /* Estilos barras inferiores */
    .site-info .footer-bar,
    .site-info .copyright-bar {
         margin-top: 10px;
         padding-top: 10px;
    }
}


/* ==============================================================
   ESTILOS REDES SOCIALES FOOTER PERSONALIZADO HEYRENTING
   ============================================================== */

/* Sección de Redes Sociales */
.site-info .hey-footer-social-section {
    width: 100%;
    padding: 20px 0; /* Espacio vertical */
    margin-bottom: 30px; /* Espacio antes de las columnas de enlaces */
    text-align: center; /* Centrar contenido */
    /* Opcional: borde superior si quieres separarlo del contenido de arriba */
    /* border-top: 1px solid #eee; */
    /* padding-top: 30px; */
}

/* Título "Síguenos en redes" */
.site-info .footer-social-title {
    display: block;
    font-size: 1.1em; /* Mismo tamaño que los títulos de columna */
    font-weight: bold;
    margin-bottom: 20px; /* Espacio debajo del título */
    color: #333;
}

/* Lista de iconos */
.site-info .footer-social-icons-list {
    display: flex;
    justify-content: center; /* Centrar iconos horizontalmente */
    flex-wrap: wrap;
    gap: 15px; /* Espacio entre iconos */
}

/* Cada icono (enlace) */
.site-info .footer-social-icon {
    display: inline-flex; /* Para que se comporte como bloque pero se alinee inline */
    align-items: center;
    justify-content: center;
    width: 40px;  /* Ancho del círculo/cuadrado */
    height: 40px; /* Alto del círculo/cuadrado */
    border-radius: 10px; /* Círculo. Cambia a 4px para cuadrado redondeado */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
    font-size: 18px; /* Tamaño del icono Font Awesome */

    /* Estilo por defecto (sin color, gris) */
    background-color: #f0f0f0; /* Fondo gris claro */
    color: #777; /* Icono gris oscuro */
    border: 1px solid #e0e0e0; /* Borde sutil */
}

.site-info .footer-social-icon:hover {
    transform: translateY(-3px) scale(1.05); /* Efecto elevación sutil */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --- Colores Hover Específicos por Red (Ejemplos) --- */
/* LinkedIn */
.site-info .footer-social-icon.social-icon-linkedin:hover {
    background-color: #0077B5; /* Color LinkedIn */
    color: #ffffff;
    border-color: #0077B5;
}
/* Facebook */
.site-info .footer-social-icon.social-icon-facebook:hover {
    background-color: #1877F2; /* Color Facebook */
    color: #ffffff;
    border-color: #1877F2;
}
/* Instagram */
.site-info .footer-social-icon.social-icon-instagram:hover {
    /* Instagram tiene degradado, simplificamos a un color o usamos degradado CSS */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #ffffff;
    border-color: transparent; /* Quitar borde si usamos degradado */
}
.site-info .footer-social-icon.social-icon-instagram:hover i {
    /* A veces el icono necesita color específico sobre degradado */
    color: #ffffff;
}

/* YouTube */
.site-info .footer-social-icon.social-icon-youtube:hover {
    background-color: #FF0000; /* Color YouTube */
    color: #ffffff;
    border-color: #FF0000;
}
/* Twitter (X) */
.site-info .footer-social-icon.social-icon-twitter:hover {
    background-color: #000000; /* Negro para X */
    color: #ffffff;
    border-color: #000000;
}
/* TikTok */
.site-info .footer-social-icon.social-icon-tiktok:hover {
    background-color: #000000; /* TikTok usa varios, negro es común */
    color: #ffffff;
    border-color: #000000;
}
/* WhatsApp */
.site-info .footer-social-icon.social-icon-whatsapp:hover {
    background-color: #25D366; /* Color WhatsApp */
    color: #ffffff;
    border-color: #25D366;
}
/* Email */
.site-info .footer-social-icon.social-icon-email:hover {
    background-color: #c71610; /* Un rojo genérico para email */
    color: #ffffff;
    border-color: #c71610;
}
 /* Phone */
.site-info .footer-social-icon.social-icon-phone:hover {
    background-color: #34B7F1; /* Un azul genérico para teléfono */
    color: #ffffff;
    border-color: #34B7F1;
}
/* Pinterest */
.site-info .footer-social-icon.social-icon-pinterest:hover {
    background-color: #E60023; /* Color Pinterest */
    color: #ffffff;
    border-color: #E60023;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .site-info .hey-footer-social-section {
        padding: 15px 0;
        margin-bottom: 25px;
    }
    .site-info .footer-social-title {
        font-size: 1em;
        margin-bottom: 15px;
    }
    .site-info .footer-social-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    .site-info .footer-social-icons-list {
        gap: 12px;
    }
}


.heyrenting-empresas {
  padding: 3rem 5%;
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 12px;
}

.empresa-button h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}


.empresas-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  padding: 24px 0;
}

.empresa-button {
  display: inline-block;
  text-align: center;
  padding: 10px 12px;
  font-size: 14px;
  text-decoration: none;
  border: 2px solid #52bf31;
  color: #52bf31;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  background-color: white;
  font-weight: 500;
}
@media(max-width:768px){
    
    .empresas-buttons {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 10px;
    }
    .empresas-button{
        font-size:18px;
    }
}
    .empresa-button:hover {
      background-color: #52bf31;
      color: white;
    }


/* ==============================================================
   ESTILOS BLOQUE MODELOS POR MARCA - HEYRENTING
   ============================================================== */

.heyrenting-modelos {
  padding: 3rem 5%;
  max-width: 1400px;
  margin: 40px auto; /* Margen superior e inferior estándar */
  background: #f8f9fa;
  border-radius: 12px;
}

/* Título de la sección del bloque (añadido para la Opción A de negrita) */
.heyrenting-modelos-block-title {
    font-weight: bold; /* O 700, 600 */
    /* text-align: center; es heredado de la clase text-align-center de GP */
    margin-bottom: 30px; /* Espacio debajo del título */
    font-size: 26px; /* Ajusta según tu diseño */
    color: #333;
}

.modelos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

a.modelo-card { /* Ahora el selector principal es a.modelo-card */
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e9ecef;
  text-decoration: none; /* Muy importante para quitar el subrayado del enlace */
  color: inherit; /* Para que el texto dentro herede colores, y no el azul de enlace por defecto */
}

a.modelo-card span {
    cursor: pointer;
}

a.modelo-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  color: inherit; /* Mantener el color heredado en hover */
}

.modelo-imagen-wrapper {
  /* Puedes añadir padding aquí si quieres un espacio alrededor de la imagen
     sin que afecte al texto o al "botón" */
  /* padding: 1rem; */
  width: 100%; /* Asegurar que ocupe el ancho para centrar la img */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modelo-imagen-wrapper img { /* Estilos para la imagen dentro del wrapper */
  height: 200px;
  width: auto;
  max-width: 90%;
  object-fit: contain;
  margin-top: 2rem; /* Margen superior de la imagen */
  margin-bottom: 1rem; /* Espacio entre la imagen y el nombre */
  transition: transform 0.3s ease;
}

a.modelo-card:hover .modelo-imagen-wrapper img { /* Efecto hover en la imagen */
  transform: scale(1.05);
}

span.modelo-nombre-display {
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
  margin: 0 1rem 0.5rem; /* Margen superior 0, horizontal, inferior */
  padding: 0; /* Resetear padding si lo tuviera */
  line-height: 1.3;
}

/* "Botón" (ahora un span estilizado) */
span.modelo-boton { /* Cambiado de a.modelo-boton a span.modelo-boton */
  background-color: #52bf31;
  color: white !important;
  text-align: center;
  padding: 0.9rem 1.5rem;
  border-radius: 8px;
  margin: 1rem 0 2rem;
  font-weight: 500;
  font-size: 1rem;
  transition: background-color 0.3s ease;
  text-decoration: none; /* Aunque es un span, por si acaso */
  display: inline-block;
  border: none;
  cursor: default; /* Cambiamos el cursor ya que no es un enlace clicable por sí mismo */
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .modelos-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Ajuste ligero para tablets */
  }
}

@media (max-width: 768px) {
  .heyrenting-modelos {
    padding: 2rem 3%;
  }
  .modelos-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  .heyrenting-modelos-block-title {
    font-size: 22px;
  }
  .modelo-imagen-wrapper img {
    height: 180px;
    margin-top: 1.5rem;
  }
  span.modelo-nombre-display {
    font-size: 1.1rem;
  }
  span.modelo-boton {
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 640px) {
  .modelos-grid {
    /* Cambiado de 1fr a auto-fill para mejor comportamiento si solo hay 1 o 2 items */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
  /* Si quieres forzar una columna en móviles muy pequeños: */
  /*
  .modelos-grid {
    grid-template-columns: 1fr;
  }
  */
}

/* ==============================================================
   FIN ESTILOS BLOQUE MODELOS POR MARCA
   ============================================================== */
   
   
/* ============================================================
   ESTILOS BLOQUE VENTAJAS Y CONSIDERACIONES - HEYRENTING
   ============================================================== */

.heyrenting-pros-cons-block {
    margin: 40px auto;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 2rem;
}

.pros-cons-section {
    margin-bottom: 2.5rem; /* Espacio entre la sección de ventajas y la de consideraciones */
}
.pros-cons-section:last-child {
    margin-bottom: 0;
}

.pros-cons-section .pros-cons-section-title { /* Nueva clase para los títulos de sección */
    font-size: 1.8rem; /* O el tamaño que desees */
    color: #333;
    margin-top: 0;
    margin-bottom: 1rem; /* Ajustado para que coincida con tu diseño original, si antes el <h3> no tenía clase explícita */
    font-weight: bold; /* El <strong> ya lo hace bold, pero puedes asegurarlo */
    line-height: 1.4;
    /* Otros estilos que tuvieras para los títulos de sección */
}

.pros-cons-section .pros-cons-section-title strong {
    font-weight: inherit; /* Hereda el peso del padre (h2, h3, h4, p) */
    /* O podrías quitar el <strong> del PHP y aplicar font-weight directamente a .pros-cons-section-title */
}

.pros-cons-intro {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 1.5rem; /* Espacio entre intro y lista */
}
.pros-cons-intro p:last-child {
    margin-bottom: 0;
}


ul.pros-cons-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Responsive 3 columnas */
    gap: 1.5rem; /* Espacio entre items */
}

ul.pros-cons-list li {
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e9ecef;
}

.item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-bottom: 0.75rem;
    font-size: 1.3rem; /* Tamaño del icono FontAwesome */
}

.item-icon.pros-icon {
    background-color: #e6f7f0; /* Fondo verde claro para check */
    color: #52bf31; /* Icono verde */
}

.item-icon.cons-icon {
    background-color: #fff0e6; /* Fondo naranja/ámbar claro para warning */
    color: #ff7925; /* Icono naranja/ámbar */
}

.item-point-title {
    font-size: 1.1rem; /* Ajusta según necesites */
    font-weight: bold; /* Ya está en el HTML con <strong>, pero podemos asegurarlo */
    color: #333;
    margin-top: 0;
    margin-bottom: 0.5rem; /* Espacio entre el título del punto y su texto */
    line-height: 1.3;
}
h4.item-point-title strong { /* Si mantienes el <strong> en PHP, puedes quitar font-weight de h4.item-point-title */
    font-weight: 600; /* O el peso que desees, ej: bold o 700 */
}

.item-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #454545;
}

.item-text p:last-child { /* Si el texto tiene párrafos debido a nl2br */
    margin-bottom: 0;
}

hr.pros-cons-separator {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 2.5rem auto; /* Espacio y centrado */
    max-width: 80%;
}

/* --- Responsive --- */
@media (max-width: 991px) { /* Para tablets, 2 columnas */
    ul.pros-cons-list {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 767px) { /* Para móviles, 1 columna o 2 si caben */
    .heyrenting-pros-cons-block {
        padding: 2rem;
    }
    .pros-cons-section .pros-cons-section-title {
        font-size: 1.5rem;
    }
    ul.pros-cons-list {
        /* Para una sola columna en móvil, descomenta la siguiente línea: */
        /* grid-template-columns: 1fr; */
        gap: 1rem;
    }
    ul.pros-cons-list li {
        padding: 1rem;
    }
    .item-icon {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    .item-point-title {
        font-size: 1rem;
    }
    .item-text {
        font-size: 0.9rem;
    }
    hr.pros-cons-separator {
        margin: 2rem auto;
    }
}


/* ============================================================
   ESTILOS BLOQUE ÍNDICE ENCICLOPEDIA MOTOR - HEYRENTING
   ============================================================== */

.heyrenting-encyclopedia-index {
    margin-top: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f8f9fa; /* Fondo suave para el bloque */
    border-radius: 8px;
}

.encyclopedia-index-title { /* Título H2 opcional del bloque */
    text-align: center;
    font-size: 2rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: #333;
}

/* Navegación Alfabética */
.encyclopedia-alphabet-nav {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e0e0e0;
    text-align: center; /* Centrar los botones de letras */
}

.encyclopedia-alphabet-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* Para que los items se pongan en línea */
    flex-wrap: wrap;    /* Permitir que pasen a la siguiente línea si no caben */
    gap: 8px;          /* Espacio entre botones */
    justify-content: center;
}

.encyclopedia-alphabet-nav li {
    margin: 0;
}

.encyclopedia-alphabet-nav a {
    display: inline-block;
    padding: 8px 12px;
    min-width: 40px; /* Ancho mínimo para cada botón de letra */
    text-align: center;
    background-color: #fff;
    color: #52bf31;
    border: 1px solid #52bf31;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.encyclopedia-alphabet-nav a:hover,
.encyclopedia-alphabet-nav a:focus {
    background-color: #52bf31;
    color: #fff;
    text-decoration: none;
}

/* Lista de Términos */
.encyclopedia-terms-list {
    /* No necesita mucho estilo aquí, las secciones internas lo manejan */
}

.encyclopedia-letter-section {
    margin-bottom: 2rem; /* Espacio entre secciones de letras */
    padding-top: 10px; /* Espacio para el ancla, por si la cabecera fija lo tapa */
}
.encyclopedia-letter-section:last-child {
    margin-bottom: 0;
}

.encyclopedia-letter-section .letter-heading { /* Título H3 para cada letra */
    font-size: 1.6rem;
    color: #444;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #52bf31;
    display: inline-block; /* Para que el borde se ajuste al texto */
}

ul.terms-for-letter {
    list-style: none;
    padding: 0;
    margin: 0;
    column-count: 4;
    column-gap: 2rem;
}

ul.terms-for-letter li {
    margin-bottom: 0.75rem;
    break-inside: avoid-column; /* Evitar que un item se parta entre columnas */
}

ul.terms-for-letter li a {
    text-decoration: none;
    color: #337ab7; /* Color de enlace estándar o tu color corporativo */
    font-size: 1rem;
    transition: color 0.2s ease;
}

ul.terms-for-letter li a:hover {
    color: #52bf31;
    text-decoration: underline;
}

/* --- Responsive para las columnas de términos --- */
@media (max-width: 991px) { /* Tablets */
    ul.terms-for-letter {
        column-count: 2;
        column-gap: 1.5rem;
    }
}

@media (max-width: 600px) { /* Móviles */
    .heyrenting-encyclopedia-index {
        padding: 1rem;
    }
    .encyclopedia-index-title {
        font-size: 1.5rem;
    }
    .encyclopedia-alphabet-nav ul {
        gap: 5px;
    }
    .encyclopedia-alphabet-nav a {
        padding: 6px 10px;
        min-width: 36px;
        font-size: 0.9rem;
    }
     .encyclopedia-letter-section .letter-heading {
        font-size: 1.4rem;
    }
    ul.terms-for-letter {
        column-count: 1; /* Una columna en móvil */
    }
    ul.terms-for-letter li a {
        font-size: 0.95rem;
    }
}

/* ============================================================
   ESTILOS BLOQUE LISTADO ENTRADAS BLOG HEY - HEYRENTING
   ============================================================== */

.heyrenting-blog-list-block {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.blog-list-title { /* Título opcional del bloque */
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    color: #333;
    font-weight: 600;
}

/* Grid de Posts (ya tienes estilos para .heyrenting-blog-archive-grid)
   Ahora añadimos las clases de columnas específicas */

.heyrenting-blog-archive-grid.hey-columns-1 {
    grid-template-columns: 1fr;
}
.heyrenting-blog-archive-grid.hey-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.heyrenting-blog-archive-grid.hey-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.heyrenting-blog-archive-grid.hey-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Ajustes responsivos para las columnas del bloque */
@media (max-width: 991px) { /* Tablets */
    .heyrenting-blog-archive-grid.hey-columns-3,
    .heyrenting-blog-archive-grid.hey-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) { /* Móviles */
    .heyrenting-blog-archive-grid.hey-columns-2,
    .heyrenting-blog-archive-grid.hey-columns-3,
    .heyrenting-blog-archive-grid.hey-columns-4 {
        grid-template-columns: 1fr;
    }
}


/* Paginación (estilos básicos, puedes mejorarlos) */
.heyrenting-blog-list-block .navigation.pagination {
    margin-top: 2.5rem;
    text-align: center;
    clear: both; /* Por si hay floats */
}

.heyrenting-blog-list-block .nav-links {
    display: inline-block; /* Para centrar el contenedor de los números */
}

.heyrenting-blog-list-block .nav-links .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #555;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    font-size: 0.95rem;
}

.heyrenting-blog-list-block .nav-links .page-numbers:hover,
.heyrenting-blog-list-block .nav-links .page-numbers:focus {
    background-color: #f0f0f0;
    border-color: #ccc;
    color: #333;
}

.heyrenting-blog-list-block .nav-links .page-numbers.current {
    background-color: #52bf31;
    border-color: #52bf31;
    color: #fff;
    font-weight: bold;
}

.heyrenting-blog-list-block .nav-links .dots {
    padding: 8px 6px;
    color: #777;
}


/* Estilos para la Tabla Comparativa - Sin Variables CSS */

/* Estilos base para el contenedor y la nota */
.tabla-comparacion-container {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    margin: 2rem 0;
    background: white;
    overflow: hidden;
}

.nota-tabla {
    font-size: 0.875rem;
    color: #4a5568; /* --text-light */
    text-align: center;
    margin: 1.5rem auto 0;
    max-width: 800px;
    line-height: 1.6;
}

/* Estilos base de la tabla (Vista Escritorio) */
.comparacion {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background: white;
    margin: 0 !important;
}

.comparacion th,
.comparacion td {
    border: 1px solid #e2e8f0; /* --border-color */
    padding: 1rem;
    vertical-align: middle;
    box-sizing: border-box;
    word-break: break-word;
}

/* Cabecera Escritorio */
.comparacion thead th {
    background: #f8f9fa;
    color: #3b3b3b;
    font-weight: bold;
    text-align: left;
    padding: 1.1rem 1rem;
}

.comparacion thead .col-heyrenting {
    background: #52bf31; /* --primary-color */
    color: white;
    position: relative;
    border-color: #52bf31; /* --primary-color */
    border-right: 1px solid rgba(255,255,255,0.3);
}
.comparacion thead .col-heyrenting::after {
    display: none;
}

/* Cuerpo Escritorio */
.comparacion tbody tr:hover td {
     background-color: #fdfdfd;
}

.comparacion .valor {
    text-align: right;
    font-weight: 500;
    color: #2d3748; /* --text-dark */
    padding-right: 1.5rem;
}

.comparacion .incluido {
    color: #52bf31; /* --primary-dark */
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 1.5rem;
}

.comparacion .incluido svg {
    flex-shrink: 0;
    color: #52bf31; /* --primary-color */
    width: 1.25rem;
    height: 1.25rem;
}

.detalle-cuota {
    font-size: 0.875em;
    color: #4a5568; /* --text-light */
    margin-top: 0.25rem;
    display: block;
}

.no-aplicable {
    color: #cbd5e0;
    font-size: 1.2rem;
    line-height: 1;
    text-align: center;
}

.valor-positivo {
    color: #38a169; /* --positive */
    font-weight: 500;
}

/* Pie de tabla Escritorio (SOLO PARA TABLA DE NÚMEROS) */
.comparacion:not(.tabla-explicaciones .comparacion) .fila-total td {
    background: #f8f9fa; /* --bg-total */
    font-weight: 600;
    padding: 1.1rem 1rem;
}
.comparacion:not(.tabla-explicaciones .comparacion) .total-renting {
    color: #52bf31; /* --primary-dark */
}
.comparacion:not(.tabla-explicaciones .comparacion) .total-compra {
    color: #e53e3e; /* --negative */
    text-align: right;
    padding-right: 1.5rem;
}
.comparacion:not(.tabla-explicaciones .comparacion) .fila-resumen td {
    background: #52bf31; /* --primary-color */
    color: white;
    text-align: center;
    font-size: 1.125rem;
    padding: 1.5rem;
    border: none !important;
}
.comparacion:not(.tabla-explicaciones .comparacion) .fila-resumen strong {
    font-weight: 700;
}


/* Anchos de columna Escritorio (TABLA DE NÚMEROS) */
.comparacion:not(.tabla-explicaciones .comparacion) .col-heyrenting,
.comparacion:not(.tabla-explicaciones .comparacion) .col-compra {
    width: 36%;
}
.comparacion:not(.tabla-explicaciones .comparacion) .col-concepto {
    width: 28%;
    max-width: 280px;
}


/* === INICIO: ESTILOS ESPECÍFICOS PARA TABLA DE EXPLICACIONES (Escritorio) === */
.tabla-explicaciones .comparacion thead .col-concepto,
.tabla-explicaciones .comparacion tbody td[data-label="Característica"] { /* Se aplica a la celda en tbody */
    font-weight: bold;
}

.tabla-explicaciones .comparacion thead .col-heyrenting,
.tabla-explicaciones .comparacion tbody td[data-label="HEYRENTING"] {
    background-color: #eaf7e8;
}
/* Cabecera HEYRENTING de tabla explicaciones */
.tabla-explicaciones .comparacion thead .col-heyrenting {
    background-color: #52bf31 !important; /* Mantenemos fondo verde principal */
    color: white !important; /* Texto blanco */
    border-right-color: rgba(255,255,255,0.3); /* Borde igual que en tabla de números */
}
/* Cabecera RENTING FINDERS de tabla explicaciones */
.tabla-explicaciones .comparacion thead .col-compra {
    /* Puedes añadir estilos aquí si quieres que sea diferente a la cabecera por defecto */
}


/* Ajustar anchos para la tabla de explicaciones */
.tabla-explicaciones .col-concepto { /* Característica */
    width: 30% !important; /* Usar !important para sobreescribir si es necesario */
    max-width: none !important;
}
.tabla-explicaciones .col-heyrenting { /* HEYRENTING */
    width: 35% !important;
}
.tabla-explicaciones .col-compra {
    width: 35% !important;
}

.tabla-explicaciones .comparacion td {
    text-align: left;
    vertical-align: top;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
.tabla-explicaciones .comparacion th {
    text-align: left;
}
.tabla-explicaciones .comparacion thead .col-heyrenting,
.tabla-explicaciones .comparacion thead .col-compra {
    text-align: center;
}
.tabla-explicaciones .comparacion td[data-label="HEYRENTING"] strong {
    color: #52bf31;
}
/* === FIN: ESTILOS ESPECÍFICOS PARA TABLA DE EXPLICACIONES (Escritorio) === */

.comparacion:not(.tabla-explicaciones .comparacion) tbody tr:first-child td[data-label="HEYRENTING"] strong::before {
    content: ''; /* Necesario para que se muestre el ::before */
    display: inline-block;
    width: 1.25em; /* Ajusta el tamaño según necesites, relativo al font-size de strong */
    height: 1.25em;
    margin-right: 0.5em; /* Espacio entre el icono y el texto */
    vertical-align: -0.25em; /* Ajuste fino para la alineación vertical con el texto */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* SVG del icono de check, URL-encoded y con el color de relleno verde (#52bf31) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2352bf31'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
}

.comparacion .incluido .valor-incluido-wrapper {
    display: inline-flex; /* Para alinear SVG y texto DENTRO del wrapper */
    align-items: center;  /* Alinear verticalmente SVG y texto */
    gap: 0.4em;           /* Espacio entre SVG y "INCLUIDO" */
    /* No necesita color o font-weight aquí si se hereda del td.incluido */
}

/* --- RESPONSIVE: MÓVIL (600px) - TABLA APILADA --- */
@media (max-width: 600px) {

    .tabla-comparacion-container {
         box-shadow: none;
         border-radius: 0;
         overflow-x: hidden; /* Sigue siendo bueno tenerlo */
    }

    .comparacion { /* Estilo MUY base para todas las tablas apiladas */
        display: block;
        width: 100%;
        border: none;
        font-size: 14px;
    }

    .comparacion thead { display: none; }
    .comparacion tbody, .comparacion tfoot { display: block; }

    .comparacion tr {
        display: flex; /* <<<--- CAMBIO IMPORTANTE: Hacer que el TR sea flex container */
        flex-direction: column; /* Apilar los TD verticalmente */
        width: 100%;
        margin-bottom: 1.25rem;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    .comparacion tr:last-child { margin-bottom: 0; }
    .comparacion:not(.tabla-explicaciones .comparacion) tfoot tr:last-child { margin-bottom: 0; }
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-resumen {
        margin-top: 1.25rem; border-radius: 8px; border: none; box-shadow: none;
    }


    /* ===================================================================== */
    /* === ESTILOS ESPECÍFICOS PARA TABLA DE NÚMEROS EN MÓVIL (APILADA NUEVA FORMA) === */
    /* ===================================================================== */
    .comparacion:not(.tabla-explicaciones .comparacion) td {
        display: flex; /* Convertimos el TD en un contenedor flex */
        justify-content: space-between; /* Para separar etiqueta y valor */
        align-items: center; /* Alinear verticalmente */
        width: 100% !important;
        padding: 0.7rem 1rem;
        position: relative;
        border: none;
        border-bottom: 1px solid #f0f0f0; /* Separador entre "sub-filas" dentro del card */
        box-sizing: border-box;
        background-color: white;
        min-height: auto;
        text-align: left; /* Por defecto para la etiqueta */
    }

    .comparacion:not(.tabla-explicaciones .comparacion) tr td:last-child {
        border-bottom: none; /* El último td dentro de un tr no necesita borde inferior */
    }

    /* 1. CELDA "CONCEPTO" - Actúa como encabezado del bloque/card */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="CONCEPTO"] {
        order: -1; /* <<<--- CLAVE: Mover la celda CONCEPTO al principio del flujo flex del TR */
        display: block; /* Lo queremos como un bloque simple, no flex aquí */
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        background-color: #f0f2f5;
        color: #2d3748;
        padding: 0.8rem 1rem;
        border-bottom: 1px solid #e2e8f0; /* Borde más fuerte */
    }
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="CONCEPTO"]::before {
        display: none; /* No mostrar "CONCEPTO:" como etiqueta lateral */
    }
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"] {
        padding: 0.8rem 1rem; /* Padding normal, sin indentación para ::before */
    }
    
    /* Estilo para el nuevo wrapper del valor "incluido" */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"] .valor-incluido-wrapper {
        display: inline-flex; /* Para alinear SVG y texto "INCLUIDO" */
        align-items: center;  /* Alinear verticalmente */
        gap: 0.3em;           /* Espacio entre SVG y texto */
        color: #222;       /* Color del texto "INCLUIDO" y el SVG por herencia */
        font-weight: bold;
        margin-left: auto;    /* ESTO EMPUJA EL WRAPPER A LA DERECHA */
        justify-content: flex-end;
    }

    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"] .valor-incluido-wrapper svg {
        width: 1.2em;           /* Ajusta según necesites */
        height: 1.2em;
        fill: currentColor; /* Hereda el color #52bf31 del wrapper */
        flex-shrink: 0;
    }

    /* 2. CELDAS "HEYRENTING" Y "COMPRA" (y sus variantes TOTAL/MES) */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"],
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA"],
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING TOTAL"],
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA TOTAL"],
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING MES"],
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA MES"] {
        display: flex;
        justify-content: space-between; /* Etiqueta a la izq, contenido/valor a la der */
        align-items: center;
    }
    
    /* La etiqueta ::before para estas celdas */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING TOTAL"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA TOTAL"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING MES"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA MES"]::before {
        content: attr(data-label);
        color: #4a5568;
        white-space: nowrap;
        margin-right: 0.5em; /* Espacio entre etiqueta y valor */
        /* No necesita position, width, transform porque ahora es un ítem flex */
    }
    
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING TOTAL"]::before,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING MES"]::before {
        color: #52bf31; /* Verde para la etiqueta HEYRENTING */
        font-weight: bold;
        font-size: 1.2em;
    }
    
    /* El contenido/valor DENTRO de las celdas HEYRENTING y COMPRA */
    /* Esto selecciona el primer hijo directo que no sea style/script o un <br> */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"] > *:not(style):not(script):not(br),
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA"] > *:not(style):not(script):not(br),
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING TOTAL"] > *:not(style):not(script):not(br),
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA TOTAL"] > *:not(style):not(script):not(br),
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING MES"] > *:not(style):not(script):not(br),
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA MES"] > *:not(style):not(script):not(br) {
        text-align: right; /* Por defecto, alinear el contenido del valor a la derecha */
        flex-grow: 1;      /* Para que ocupe el espacio */
        font-weight: bold;
    }
    
    /* El contenido/valor de las celdas HEYRENTING y COMPRA */
    /* Creamos un contenedor para el valor para poder usar flex-grow y text-align */
    .comparacion:not(.tabla-explicaciones .comparacion) td .valor-wrapper {
        text-align: right;
        flex-grow: 1;
        font-weight: 500;
    }
    
    /* Aplicamos esto al contenido directo si no está envuelto (como el <strong>) */
    /* Si tienes <strong>Sin entrada</strong>, el <strong> es el hijo directo */
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="HEYRENTING"] > strong {
        margin-left: auto; /* Empuja el strong a la derecha si el ::before está presente */
        text-align: right;
        font-weight: bold;
    }
    
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA"] > .valor,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA TOTAL"] > .total-compra,
    .comparacion:not(.tabla-explicaciones .comparacion) td[data-label="COMPRA MES"] > .total-compra {
        margin-left: auto; /* Empuja el .valor a la derecha */
        text-align: right;
    }
    
    .comparacion:not(.tabla-explicaciones .comparacion) tbody tr:first-child td[data-label="HEYRENTING"] > strong::before {
        content: ''; display: inline-block; width: 1.1em; height: 1.1em;
        margin-right: 0.4em; vertical-align: -0.15em;
        background-repeat: no-repeat; background-position: center; background-size: contain;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2352bf31'%3E%3Cpath fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z' clip-rule='evenodd' /%3E%3C/svg%3E");
    }
    
    /* Contenido de "Sin entrada" */
    .comparacion:not(.tabla-explicaciones .comparacion) tbody tr:first-child td[data-label="HEYRENTING"] > strong {
        display: inline-flex; /* Para alinear el ::before (icono) y el texto "Sin entrada" */
        align-items: center;
        /* margin-left: auto; ya no es necesario porque el td es flex y el ::before está oculto */
        justify-content: flex-end;
    }
    
    .comparacion:not(.tabla-explicaciones .comparacion) .no-aplicable {
        margin-left: auto; /* Empuja a la derecha */
        text-align: right;
        font-size: 1em;
        font-weight: 500;
        color: #cbd5e0; /* Para asegurar que se aplique */
    }

    /* tfoot para tabla de números */
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td[data-label="CONCEPTO"].total-label {
        order: -1; /* Mover concepto al principio */
        display: block;
        text-align: center; font-weight: bold; background-color: #e9ecef;
        color: #2d3748; padding: 0.8rem 1rem; border-bottom: 1px solid #d1d5db;
    }
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td[data-label="CONCEPTO"].total-label::before {
        display: none;
    }
    
    /* Para las celdas de total-renting y total-compra en el tfoot */
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-renting,
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-compra {
        /* Heredan display:flex y justify-content: space-between de los td del tbody */
        font-weight: 600;
    }
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-renting .detalle-cuota,
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-compra .detalle-cuota {
        display: block;
        text-align: right;
        font-size: 0.8em;
        color: #4a5568;
        margin-top: 0.1em;
        margin-left: auto; /* Asegurar que se pegue al valor principal si el valor es corto */
    }
    
    /* Para que el span .detalle-cuota se coloque debajo del valor principal si está envuelto */
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-renting > strong,
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-compra > strong {
        /* Si los totales están en strong y el detalle-cuota es hermano */
        display: block; /* Hace que el strong ocupe la línea */
        width: 100%;   /* Para que el text-align: right funcione en el strong */
        text-align: right;
    }
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-renting > .detalle-cuota,
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-total td.total-compra > .detalle-cuota {
        /* Si el detalle-cuota es hermano del strong, y el strong es block */
        text-align: right;
        width: 100%;
     }

    /* Fila resumen verde */
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-resumen td {
        order: -1; /* Única celda, siempre va primero */
        display: block; /* <--- ESTO ES BUENO, ASEGURA QUE ES UN BLOQUE */
        padding: 1.25rem 1rem !important; font-size: 1rem; color: white !important;
        background-color: #52bf31; text-align: center; border-bottom: none;
        /* Aseguramos que no herede justify-content de otros td si eran flex */
        justify-content: center; /* O text-align: center ya debería ser suficiente */
        align-items: center;
    }
    .comparacion:not(.tabla-explicaciones .comparacion) .fila-resumen td::before {
        display: none;
    }


    /* ===================================================================== */
    /* === ESTILOS PARA TABLA DE EXPLICACIONES EN MÓVIL (DEBEN SER LOS ORIGINALES QUE FUNCIONABAN) === */
    /* ===================================================================== */
    .tabla-explicaciones .comparacion td {
        display: block; /* Asegurar que sigue siendo bloque */
        width: 100% !important;
        padding: 0.8rem 1rem 0.8rem 40%; /* Padding original para la etiqueta a la izquierda */
        position: relative;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        min-height: 0; /* Ajustar o quitar si no es necesario */
        box-sizing: border-box;
        background-color: white;
        text-align: left; /* Importante: el contenido a la izquierda */
    }
    .tabla-explicaciones .comparacion tr td:last-child {
        border-bottom: none;
    }

    .tabla-explicaciones .comparacion td::before {
        content: attr(data-label);
        position: absolute; /* La etiqueta se posiciona a la izquierda */
        left: 1rem;
        top: 0.8rem; /* Alineada con el padding superior del td */
        transform: translateY(0); /* Sin transformación vertical */
        width: calc(40% - 1.5rem); /* Ancho de la etiqueta */
        padding-right: 0.5rem;
        font-weight: 600;
        text-align: left;
        font-size: 0.9em;
        color: #2d3748;
        line-height: 1.3;
        white-space: normal;
    }

    /* Caso especial para la celda "Característica" en la tabla de explicaciones */
    .tabla-explicaciones .comparacion td[data-label="Característica"] {
        text-align: center;
        padding: 0.8rem 1rem; /* Padding normal sin espacio para etiqueta */
        font-weight: bold;
        background-color: #f9f9f9;
    }
    .tabla-explicaciones .comparacion td[data-label="Característica"]::before {
        display: none; /* No mostrar "Característica:" como etiqueta lateral */
    }

    /* Coloreado para HEYRENTING en tabla de explicaciones */
    .tabla-explicaciones .comparacion td[data-label="HEYRENTING"] {
        background-color: #eaf7e8;
    }
    .tabla-explicaciones .comparacion td[data-label="HEYRENTING"]::before {
        color: #52bf31; /* Etiqueta HEYRENTING en verde */
    }
    .tabla-explicaciones .comparacion td[data-label="HEYRENTING"] strong {
        color: #52bf31; /* Strong dentro de HEYRENTING en verde */
    }
    
    /* Ajuste para la otra columna (ej. Renting Ibercaja) en tabla de explicaciones */
    /* Puedes añadir estilos específicos si es necesario, por ejemplo, para su etiqueta ::before */
    .tabla-explicaciones .comparacion td[data-label="Renting Ibercaja"]::before { /* O el data-label que uses */
        /* Estilos para la etiqueta de la otra entidad si quieres diferenciarla */
        color: #4a5568; /* Ejemplo: un gris estándar */
    }


    /* Resetear anchos de columnas para TODAS las tablas en móvil si no se hizo antes */
    .col-heyrenting,
    .col-compra,
    .col-concepto {
        width: auto !important;
        max-width: none !important;
    }

}


/* ==============================================================
   ESTILOS POPUP CON TESTIMONIOS - HEYrenting
   ============================================================== */

/* Wrapper principal del contenido del popup */
#popup-llamamos .popup-contenido-wrapper {
    background-color: #ffffff;
    padding: 0; /* Sin padding, las columnas lo manejarán */
    border-radius: 12px;
    text-align: left; /* Cambiado a left para layout de columnas */
    position: relative;
    z-index: 1002;
    box-shadow: 0 5px 15px rgba(0,0,0,0.25);
    max-width: 900px; /* Ancho máximo para el layout de dos columnas */
    width: 90%;
    display: flex; /* Por defecto para escritorio */
    flex-direction: row;
    max-height: 90vh; /* Limitar altura para que no se salga de pantalla */
    overflow: hidden; /* Evitar que el contenido desborde el wrapper */
}

/* Columnas dentro del popup */
#popup-llamamos .popup-col {
    padding: 25px;
    box-sizing: border-box;
    overflow-y: auto; /* Permitir scroll independiente en cada columna */
    height: auto; /* Permitir que crezca según contenido, hasta max-height del wrapper */
}

/* Columna de Testimonios (izquierda en escritorio) */
#popup-llamamos .popup-col-testimonials {
    flex-basis: 45%;
    background-color: #f8f9fa;
    border-right: 1px solid #e0e0e0;
    display: flex; /* Convertir en flex container */
    flex-direction: column; /* Apilar título y lista verticalmente */
    /* overflow-y: auto; */ /* QUITAMOS EL SCROLL DE LA COLUMNA COMPLETA */
    /* El scroll ahora estará en .popup-testimonials-list */
    padding: 25px; /* Mantenemos padding general de la columna */
    box-sizing: border-box;
}

#popup-llamamos .popup-testimonials-title { /* Título "Nuestros clientes lo tienen claro" */
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 20px;
    text-align: center;
    flex-shrink: 0; /* Evitar que el título se encoja */
}

#popup-llamamos .popup-testimonials-list {
    flex-grow: 1; /* Permite que la lista ocupe el espacio restante */
    overflow-y: auto; /* ¡AQUÍ VA EL SCROLL! */
    padding-right: 10px; /* Espacio para la barra de scroll si aparece, y un poco de margen */
    margin-right: -10px; /* Compensar el padding-right para que el contenido no se encoja */
    /* Altura máxima para mostrar aprox. 2 testimonios.
       Esto dependerá de la altura de cada .popup-testimonial-item-desktop.
       Necesitarás AJUSTAR este valor (ej. 350px, 400px, etc.) después de ver cómo queda.
       Calcula: (altura_de_un_testimonio + su_margen_inferior) * 2.
       Por ejemplo, si cada item mide unos 150px + 20px de margen = 170px. 170px * 2 = 340px.
    */
    max-height: 380px; /* <<<--- VALOR INICIAL, AJUSTAR DESPUÉS DE PROBAR */
}

#popup-llamamos .popup-testimonial-item-desktop {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #d0d0d0;
    /* Asegúrate de que los items no tengan un width que impida el scroll si la lista es estrecha */
    box-sizing: border-box;
}
#popup-llamamos .popup-testimonial-item-desktop:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

#popup-llamamos .popup-testimonial-card-top-content { /* Bocadillo en popup desktop */
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#popup-llamamos .popup-testimonial-card-top-content::after { /* Rabito */
    content: ''; position: absolute; bottom: -8px; left: 20px;
    width: 0; height: 0; border-left: 8px solid transparent;
    border-right: 8px solid transparent; border-top: 8px solid #ffffff;
}
#popup-llamamos .popup-testimonial-card-rating { margin-bottom: 8px; }
#popup-llamamos .popup-testimonial-card-rating .star { font-size: 15px; color: #FFC107; }
#popup-llamamos .popup-testimonial-card-text {
    font-size: 13px; line-height: 1.5; color: #555;
    /* Sin max-height, sin overflow hidden para mostrar todo */
}
#popup-llamamos .popup-testimonial-review-source-logo {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 16px;
    opacity: 0.7; /* Si quieres opacidad */
}
#popup-llamamos .popup-testimonial-card-author-info { align-items: center; padding-top: 5px; display: flex; }
#popup-llamamos .popup-testimonial-author-avatar { flex-shrink: 0; margin-right: 10px; }
#popup-llamamos .popup-testimonial-author-avatar img { display: block; border-radius: 50%; width: 32px; height: 32px; object-fit: cover; }
#popup-llamamos .popup-testimonial-author-name { font-size: 13px; color: #444; font-weight: 600; display: flex; align-items: center; }
#popup-llamamos .popup-testimonial-author-name .author-verified-check { margin-left: 4px; line-height: 1; }
#popup-llamamos .popup-testimonial-author-name .author-verified-check svg { width: 11px; height: 11px; vertical-align: middle; }

#popup-llamamos .popup-testimonial-author-details { line-height: 1.3; }


/* Columna del Formulario (derecha en escritorio) */
#popup-llamamos .popup-col-form {
    flex-basis: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px; /* Mantenemos padding general */
    box-sizing: border-box;
    overflow-y: auto; /* Permitir scroll en el form si es muy largo */
    background-color: #52bf31;
}
#popup-llamamos .popup-col-form-fullwidth { /* Si no hay testimonios, el form ocupa todo */
    flex-basis: 100%;
    max-width: 550px; /* Limitar ancho máximo del formulario solo */
    margin: 0 auto; /* Centrar */
    border-right: none; /* Sin borde si es fullwidth */
}
#popup-llamamos .popup-form-inner-content {
    width: 100%;
    max-width: 420px; /* Ancho máximo del contenido del formulario */
    margin: 0 auto; /* Centrar el contenido interno */
    text-align: center; /* Centrar título y párrafo del form */
}

#popup-llamamos .form-title { font-size: 22px; font-weight: bold; margin-bottom: 8px; color: #fff;}
#popup-llamamos .phone-option { margin-bottom: 12px; font-size: 16.5px;}
#popup-llamamos .popup-col-form p:not(.wpcf7-form-control-wrap):not(.acceptance_renting) { /* Párrafo descriptivo */
    font-size: 14.75px; color: #fff; margin-bottom: 18px;
}
#popup-llamamos .formulario-popup .wpcf7-submit {
    margin-top: 15px; /* Espacio antes del botón */
}

/* Sección de Testimonios para Móvil (carrusel) */
#popup-llamamos .popup-testimonials-mobile {
    display: none; /* Oculto en escritorio */
    padding: 20px 15px 30px; /* Padding para la sección móvil */
    background-color: #f0f0f0; /* Fondo ligeramente diferente para esta sección en móvil */
    width: 100%;
    box-sizing: border-box;
    border-top: 1px solid #ddd; /* Separador del formulario */
}
#popup-llamamos .popup-testimonials-title-mobile {
    font-size: 18px; font-weight: 600; color: #333;
    text-align: center; margin-bottom: 15px;
}
#popup-llamamos .popup-testimonial-carousel-mobile {
    /* Slick se inicializará aquí, padding/márgenes se controlan en Slick */
    padding: 0; /* Resetear padding si el de Slick no es suficiente */
}
/* Estilos de tarjeta para el carrusel móvil (pueden ser muy similares a los de escritorio o al bloque principal) */
.popup-testimonial-carousel-mobile .popup-testimonial-item-slide-mobile {
    padding: 0 8px; /* Espacio entre tarjetas del carrusel */
}
.popup-testimonial-carousel-mobile .popup-testimonial-card-mobile {
    display: flex; flex-direction: column; height: 100%;
}
.popup-testimonial-carousel-mobile .popup-testimonial-card-top-content-mobile {
    background-color: #ffffff; border: 1px solid #e9ecef; border-radius: 6px;
    padding: 15px; margin-bottom: 12px; position: relative; flex-grow: 1;
    min-height: 130px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.popup-testimonial-carousel-mobile .popup-testimonial-card-top-content-mobile::after {
    content: ''; position: absolute; bottom: -8px; left: 20px;
    width: 0; height: 0; border-left: 8px solid transparent;
    border-right: 8px solid transparent; border-top: 8px solid #ffffff;
}
.popup-testimonial-carousel-mobile .popup-testimonial-card-rating-mobile { margin-bottom: 8px; }
.popup-testimonial-carousel-mobile .popup-testimonial-card-rating-mobile .star { font-size: 14px; }
.popup-testimonial-carousel-mobile .popup-testimonial-card-text-mobile {
    font-size: 13px; line-height: 1.5; color: #555; max-height: 60px; overflow: hidden;
}
.popup-testimonial-carousel-mobile .popup-testimonial-review-source-logo-mobile {
    position: absolute; /* Puede que no necesites absolute aquí si el flujo es bueno */
    bottom: 8px;
    right: 8px;
    height: 14px;
    opacity: 0.7;
}
.popup-testimonial-carousel-mobile .popup-testimonial-card-author-info-mobile { display: flex; align-items: center; padding-top: 5px; }
.popup-testimonial-carousel-mobile .popup-testimonial-author-avatar-mobile img { width: 32px; height: 32px; margin-right: 8px; border-radius: 5px; }
.popup-testimonial-carousel-mobile .popup-testimonial-author-name-mobile { font-size: 13px; color: #444; }
.popup-testimonial-carousel-mobile .popup-testimonial-author-name-mobile .author-verified-check svg { width: 11px; height: 11px; vertical-align: middle; }

/* --- Responsive para el Popup --- */
@media (max-width: 768px) { /* Tablet y Móvil */
    #popup-llamamos .popup-contenido-wrapper {
        display: flex !important;
        flex-direction: column !important; /* Clave para apilar */
        width: 100%;
        height: 100%;
        max-height: 100%;
        overflow-y: auto; /* Scroll en el wrapper general */
        overflow-x: hidden;
        border-radius: 0;
        padding: 0;
    }
    
    #popup-llamamos .popup-col-form,
    #popup-llamamos .popup-testimonials-mobile {
        width: 100% !important; /* Ocupar todo el ancho */
        flex-basis: auto !important; /* Dejar que el contenido defina la altura */
        flex-grow: 0; /* No crecer más allá de su contenido */
        flex-shrink: 0; /* No encogerse si hay poco espacio (aunque con flex-direction: column es menos relevante) */
        box-sizing: border-box;
        padding: 0; /* Quitar padding de la columna en sí, se añade a los wrappers internos */
    }

    #popup-llamamos .popup-col {
        padding: 20px; /* Padding para las secciones internas */
        box-sizing: border-box;
        /* Quitar overflow-y: auto de las columnas individuales en móvil */
        /* overflow-y: visible; */ /* O simplemente quitar la propiedad */
        height: auto; /* Altura automática */
        max-height: none; /* Sin max-height para las columnas internas */
    }

    /* Columna de Testimonios de ESCRITORIO: OCULTARLA COMPLETAMENTE en móvil */
    #popup-llamamos .popup-col-testimonials {
        display: none !important;
    }
    
    #popup-llamamos .cerrar-popup {
        z-index: 1003; /* Por encima del contenido scrolleable */
    }

    /* Columna del Formulario: debe ocupar todo el ancho disponible y estar arriba */
    #popup-llamamos .popup-col-form {
        width: 100% !important;
        flex-basis: auto !important; /* Altura basada en contenido */
        order: 1; /* Formulario primero */
        padding: 20px 15px 15px 15px; /* Padding interno */
        /* overflow-y: visible; */ /* Ya no necesita scroll propio */
    }
    #popup-llamamos .popup-form-inner-content {
        padding: 20px 15px 15px 15px; /* Padding para el contenido del formulario */
        max-width: 100%; /* Asegurar que no se desborde */
        margin: 0 auto;
    }
    #popup-llamamos .form-title { font-size: 26px; }
    #popup-llamamos .phone-option { font-size: 18px; }
    #popup-llamamos .popup-col-form p:not(.wpcf7-form-control-wrap):not(.acceptance_renting) { font-size: 15px; margin-bottom: 15px; }

    /* Sección de Testimonios para MÓVIL (el carrusel) */
    #popup-llamamos .popup-testimonials-mobile {
        display: block !important; /* ASEGURAR QUE SE MUESTRE */
        width: 100% !important;
        flex-basis: auto !important; /* Altura basada en contenido */
        order: 2; /* Testimonios después del formulario */
        background-color: #f0f0f0;
        padding: 20px 0 0 0; /* Ajusta padding vertical */
        overflow: hidden; /* Para contener Slick */
        /* border-top: 1px solid #ddd; */ /* Opcional: quitar si el scroll del wrapper lo hace redundante */
    }
    #popup-llamamos .popup-testimonials-title-mobile {
        padding: 0 15px; /* Padding para el título si se desborda */
    }
    /* Ajustes para el carrusel Slick dentro del popup móvil */
    #popup-llamamos .popup-testimonial-carousel-mobile {
        padding: 0 10px; /* Padding lateral para el carrusel */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-list {
        margin: 0 -5px;
        padding-top: 10px;
        padding-bottom: 15px; /* Más espacio para los dots si es necesario */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-list {
        margin: 0 -5px; /* Compensar padding de slides */
        padding: 10px 0 15px 0; /* Espacio para sombra y puntos */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-track {
        display: flex !important; /* Esencial para el layout horizontal de Slick */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-slide {
        display: block !important; /* Slick necesita esto */
        float: left !important; /* Slick usa floats para posicionar slides horizontalmente */
        height: 100%;
        min-height: 1px;
        padding: 0 5px; /* El padding que ya tenías */
        box-sizing: border-box;
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .popup-testimonial-item-slide-mobile,
    #popup-llamamos .popup-testimonial-carousel-mobile .popup-testimonial-card-mobile {
        height: 100%; /* Hacer que la tarjeta ocupe toda la altura del slide */
        display: flex;
        flex-direction: column;
    }
    
    #popup-llamamos .popup-testimonial-carousel-mobile .popup-testimonial-card-rating-mobile {
        margin-bottom: 8px; /* Espacio debajo de las estrellas */
        text-align: left;   /* O center si lo prefieres para el carrusel móvil */
    }
    
    #popup-llamamos .popup-testimonial-carousel-mobile .popup-testimonial-card-rating-mobile .star {
        font-size: 14px; /* Tamaño de estrellas para el carrusel móvil */
        color: #FFC107;
        margin-right: 1px;
    }
    
    #popup-llamamos .popup-testimonial-carousel-mobile .popup-testimonial-card-rating-mobile .star.empty {
        color: #e0e0e0; /* Estrellas vacías un poco más claras para fondo de tarjeta blanca */
    }

    /* Puntos del carrusel móvil */
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots {
        position: relative;
        bottom: auto; /* Resetear para que esté en el flujo */
        margin-top: 20px; /* Espacio sobre los puntos */
        padding-bottom: 10px; /* Espacio debajo de los puntos */
        text-align: center;
        list-style: none;
        padding-left: 0; /* Quitar padding por defecto de ul */
        margin-left: auto;
        margin-right: auto;
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots li {
        display: inline-block;
        margin: 0 4px; /* Espacio entre puntos */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots li button {
        font-size: 0;
        line-height: 0;
        display: block;
        width: 8px; /* Tamaño del punto */
        height: 8px; /* Tamaño del punto */
        padding: 0;
        cursor: pointer;
        color: transparent;
        border: 0;
        outline: none;
        background: #b0b0b0; /* Color de punto inactivo */
        border-radius: 50%;
        transition: background-color 0.3s ease, transform 0.2s ease;
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots li button:hover {
        background: #888888; /* Color hover */
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots li.slick-active button {
        background: #52bf31; /* Color activo */
        transform: scale(1.3);
    }
    #popup-llamamos .popup-testimonial-carousel-mobile .slick-dots li button:before {
        content: "" !important; /* Asegurar que no haya pseudo-elementos por defecto de Slick */
        display: none !important;
    }
}


/* ==============================================================
   NUEVOS ESTILOS BLOQUE LISTA ICONOS HEYRENTING - MODERNO
   ============================================================== */

/* Contenedor Principal del Bloque */
.wp-block-heyrenting-icon-list {
    font-family: 'Inter', sans-serif; /* Usando Inter como en el HTML del plugin original */
    padding: 30px 20px; /* Padding base */
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    border-radius: 12px; /* Bordes más redondeados */
    /* background-color: #f8f9fa; */ /* Fondo gris muy claro, o el que definas en el editor */
}

/* Título de la Sección del Bloque */
.wp-block-heyrenting-icon-list .hey-icon-list-section-title {
    font-size: 26px; /* Tamaño de título moderno */
    font-weight: 600; /* Un poco menos pesado que bold */
    margin-top: 0;
    margin-bottom: 2em; /* Más espacio antes de los items */
    text-align: left; /* Alinear a la izquierda por defecto */
    color: #2c3e50; /* Un gris azulado oscuro para el título */
    line-height: 1.3;
}
.wp-block-heyrenting-icon-list.aligncenter .hey-icon-list-section-title {
    text-align: center;
}

/* Lista de Items */
ul.hey-icon-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 35px 30px; /* Espacio vertical generoso, horizontal para columnas */
}

/* Columnas (Móvil primero: 1 columna) */
ul.hey-icon-list-items.hey-icon-list-columns-1,
ul.hey-icon-list-items.hey-icon-list-columns-2,
ul.hey-icon-list-items.hey-icon-list-columns-3 {
    grid-template-columns: 1fr;
}

/* Columnas para Desktop */
@media (min-width: 768px) {
    ul.hey-icon-list-items.hey-icon-list-columns-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    ul.hey-icon-list-items.hey-icon-list-columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Item Individual */
li.hey-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff; /* Fondo blanco para cada tarjeta */
    padding: 25px;             /* Padding interno de la tarjeta */
    border-radius: 10px;        /* Bordes redondeados de la tarjeta */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra sutil */
    border: 1px solid #eef0f3; /* Borde muy ligero */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

li.hey-icon-list-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

/* Contenedor del Icono */
.hey-icon-list-icon-wrapper {
    flex-shrink: 0;
    width: 40px; /* Tamaño del círculo del icono */
    height: 40px;
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4em; /* Tamaño del símbolo dentro del círculo */
    transition: transform 0.2s ease-out;
}
/* li.hey-icon-list-item:hover .hey-icon-list-icon-wrapper {
    transform: scale(1.1);
} */

.hey-icon-list-icon-inner svg {
    width: 1em;
    height: 1em;
    display: block;
}
.hey-icon-list-icon-inner.is-arrow {
    font-weight: 600;
    font-size: 1.1em; /* Flecha un poco más grande */
}
.hey-icon-list-icon-inner.is-number .hey-icon-list-number {
    font-weight: 600; /* Números un poco más destacados */
    font-size: 1.1em;
}

/* Estilos para el icono de Cruz */
.hey-icon-list-icon-inner.is-cross svg {
    /* El color se hereda del wrapper (.hey-icon-list-icon-wrapper)
       que a su vez toma el color de la variable iconColor del bloque.
       Así que, por defecto, será blanco sobre fondo verde.
       Si quisieras un color específico para la cruz, podrías ponerlo aquí: */
    /* color: #e74c3c; */ /* Ejemplo: un color rojo para la cruz */
}

/* Si quieres que el círculo de fondo para la cruz sea diferente: */
/*
li.hey-icon-list-item .hey-icon-list-icon-wrapper.has-cross-icon {
    background-color: #ffdddd; // Ejemplo: fondo rojo claro
}
li.hey-icon-list-item .hey-icon-list-icon-wrapper.has-cross-icon .hey-icon-list-icon-inner.is-cross svg {
    color: #c0392b; // Ejemplo: icono rojo oscuro
}
*/

/* Contenido del Item (Título y Descripción) */
.hey-icon-list-content {
    flex-grow: 1;
    padding-top: 2px; /* Pequeño ajuste para alinear mejor con el círculo del icono */
}

.hey-icon-list-item-title {
    font-size: 18px; /* Tamaño de título de item */
    font-weight: 600; /* Semi-bold */
    margin-top: 0;
    margin-bottom: 0.4em;
    line-height: 1.4;
    color: #34495e; /* Un gris azulado para el título del item */
    text-transform: uppercase;
}

.hey-icon-list-item-description {
    font-size: 16px; /* Descripción ligeramente más grande para legibilidad */
    line-height: 1.75; /* Interlineado generoso */
    color: #5f6c7b; /* Gris más suave para la descripción */
}
.hey-icon-list-item-description p { /* Estilos para los párrafos dentro de la descripción */
    margin-top: 0;
    margin-bottom: 0.75em;
}
.hey-icon-list-item-description p:last-child {
    margin-bottom: 0;
}
.hey-icon-list-item-description strong {
    font-weight: 600; /* Para resaltar dentro de la descripción */
    color: #4a5568; /* Un poco más oscuro que el texto normal de descripción */
}
.hey-icon-list-item-description a {
    color: #52bf31; /* Enlaces con tu color primario */
    text-decoration: underline;
    font-weight: 500;
}
.hey-icon-list-item-description a:hover {
    color: #3f9225; /* Verde más oscuro en hover */
}

/* Ajustes responsivos para el padding y gaps */
@media (max-width: 767px) {
    .wp-block-heyrenting-icon-list {
        padding: 25px 15px;
    }
    ul.hey-icon-list-items {
        gap: 30px; /* Espacio vertical en móvil */
    }
    li.hey-icon-list-item {
        gap: 15px; /* Espacio icono-contenido en móvil */
        /* Si usabas tarjetas, quizás quieras quitar el padding/sombra aquí */
        /* padding: 0; box-shadow: none; background-color: transparent; */
    }
    .hey-icon-list-icon-wrapper {
        width: 44px;
        height: 44px;
        font-size: 1.1em;
    }
    .wp-block-heyrenting-icon-list .hey-icon-list-section-title {
        font-size: 22px;
        margin-bottom: 1.5em;
    }
    .hey-icon-list-item-title {
        font-size: 17px;
    }
    .hey-icon-list-item-description {
        font-size: 15px;
    }
}

/* Estilos para el editor */
.wp-block-heyrenting-icon-list .hey-icon-list-editor-wrapper ul.hey-icon-list-items.hey-icon-list-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.wp-block-heyrenting-icon-list .hey-icon-list-editor-wrapper ul.hey-icon-list-items.hey-icon-list-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
/* Asegurar que el RichText dentro del editor no tenga estilos extraños */
.wp-block-heyrenting-icon-list .rich-text.hey-icon-list-item-title,
.wp-block-heyrenting-icon-list .rich-text.hey-icon-list-item-description {
    margin: 0;
}
.wp-block-heyrenting-icon-list .hey-icon-list-item-editor-controls {
    position: absolute;
    top: -8px; /* Ajusta para que no tape mucho */
    right: -8px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.wp-block-heyrenting-icon-list li.hey-icon-list-item {
    position: relative; /* Para los controles de edición */
}


.vehicle-types-block {
  background: #52bf31;
  padding: 60px 20px;
  margin-top: 150px;
  border-radius: 12px;
}

.vehicle-types-container {
  max-width: 1400px;
  margin: 0 auto;
}
.vehicle-types-title {
  text-align: center;
  font-size: 32px;
  color: #fff;
  margin-bottom: 50px;
  font-weight: 700;
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
}

.vehicle-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 20px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform 0.2s ease;
  grid-column: span 2;
}
.vehicle-card:hover {
  transform: translateY(-5px);
}
.vehicle-card img {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 15px;
  display: block;
}
.vehicle-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}
.vehicle-content h3 {
  color: #0E2108;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 10px;
}
.vehicle-content p {
  color: #444;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 15px;
}
.vehicle-content a {
  background: #0E2108;
  color: white;
  padding: 10px 20px;
  border-radius: 7px;
  text-decoration: none;
  font-weight: 500;
  margin-top: auto;
}

/* Amplía los últimos 2 elementos */
.vehicle-card.wide {
  grid-column: span 3;
}

/* Responsive */
@media (max-width: 1200px) {
    .vehicle-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .vehicle-card {
        grid-column: span 1 !important;
    }
    .vehicle-card.wide {
        grid-column: span 2 !important;
    }
}

@media (max-width: 768px) {
    .vehicle-grid {
        grid-template-columns: 1fr;
    }
    .vehicle-card,
    .vehicle-card.wide {
        grid-column: span 1 !important;
    }
    .vehicle-types-block {
        margin-top: 100px;
    }
}

.phone-popup {
    color: #fff;
    border: 1px solid #fff;
    padding: 5px;
    border-radius: 7px;
    font-weight: bold;
    margin-left: 5px;
}

/* Estilos para los items en el InspectorControls */
.hey-icon-list-inspector-item {
    padding: 10px;
    border: 1px solid #e0e0e0;
    margin-bottom: 10px;
    border-radius: 4px;
    background-color: #fdfdfd;
}

.hey-icon-list-inspector-item .components-base-control__label { /* Etiqueta "Item X" */
    font-weight: bold;
    margin-bottom: 8px;
}

.hey-icon-list-inspector-item .inspector-item-title input[type="text"],
.hey-icon-list-inspector-item .inspector-item-description textarea {
    width: 100%;
    margin-bottom: 8px;
}
.hey-icon-list-inspector-item .components-button.is-destructive {
    display: block; /* Para que clear:both de hr funcione bien */
    margin-left: auto; /* Mover a la derecha */
}

/* Estilos para la previsualización en el editor */
.wp-block-heyrenting-icon-list.hey-icon-list-editor-preview {
    /* Puedes añadir estilos específicos para la previsualización aquí si es necesario */
    /* Por ejemplo, un borde para delimitar el área */
    border: 1px dashed #ccc;
    padding: 15px;
    background-color: #f9f9f9; /* Un fondo para que se distinga */
}
.wp-block-heyrenting-icon-list.hey-icon-list-editor-preview .hey-icon-list-items {
    /* Hereda estilos del frontend, pero puedes sobreescribir para el editor */
}

.car-rental-accordion-button {
    background-color: #f1f1f1!important;
}
.car-rental-accordion-button:hover {
    background-color: #52bf31!important;
}
.car-rental-accordion-content {
    padding-top: 25px!important;
}


/* ==============================================================
   ESTILOS CTA "ADELÁNTATE Y OBTÉN REGALO" (VERSIÓN MEJORADA)
   ============================================================== */

/* Wrapper principal del CTA (fuera del formulario) */
.hey-adelantate-cta-wrapper {
    background-color: #f8f9fa; /* Un gris muy claro, diferente al blanco y al verde */
    /* O si prefieres un color que destaque más sin ser el verde del form: */
    /* background-color: #fffbea; /* Un amarillo pálido suave */
    padding: 25px 20px;
    margin-top: 40px; /* Espacio sobre este bloque */
    margin-bottom: 30px; /* Espacio antes del formulario verde */
    border-radius: 12px; /* Bordes redondeados */
    /* Opcional: un borde sutil para definirlo */
    border: 1px solid #e7e7e7;
    /* Opcional: una sombra ligera */
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

/* Contenido interno del CTA */
.hey-adelantate-cta {
    color: #333333; /* Texto oscuro principal para buen contraste sobre fondo claro */
    text-align: center;
}

.hey-adelantate-cta-line1 {
    display: block;
    font-size: 1.3em; /* Tamaño de la primera línea */
    font-weight: 500;
    line-height: 1.3;
    color: #484848; /* Un gris ligeramente más suave que el negro puro */
}

.hey-adelantate-cta-line2 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6em; /* "REGALO" más grande */
    font-weight: bold;
    line-height: 1.3;
    margin-top: 5px;
    color: #222222; /* Texto principal de la línea 2 más oscuro */
}

.hey-adelantate-cta .gift-text-highlight {
    color: #52bf31; /* VERDE HEYrenting para la palabra REGALO */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.1); /* Sombra sutil si quieres */
}

.hey-adelantate-cta i.fa-gift {
    color: #52bf31; /* Icono de regalo VERDE HEYrenting */
    margin-left: 8px;
    font-size: 0.9em;
    vertical-align: middle;
}

.hey-adelantate-cta i.cta-arrow-down {
    display: block;
    font-size: 2em; /* Flecha grande */
    color: #52bf31; /* Flecha VERDE HEYrenting */
    margin-top: 15px;
    animation: bounceArrow 1.5s infinite;
}

/* La animación bounceArrow se mantiene igual */
@keyframes bounceArrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px); /* Un rebote un poco más pronunciado */
    }
    60% {
        transform: translateY(-5px);
    }
}

/* --- Responsive para el nuevo CTA --- */
@media (max-width: 768px) {
    .hey-adelantate-cta-wrapper {
        padding: 20px 15px;
        margin-top: 30px;
        margin-bottom: 25px;
        border-radius: 8px;
    }
    .hey-adelantate-cta-line1 {
        font-size: 1.2em;
    }
    .hey-adelantate-cta-line2 {
        font-size: 1.45em;
    }
    .hey-adelantate-cta i.cta-arrow-down {
        font-size: 1.8em;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .hey-adelantate-cta-line1 {
        font-size: 1.05em;
    }
    .hey-adelantate-cta-line2 {
        font-size: 1.35em;
    }
}



/* ==============================================================
   ESTILOS VARIANTE CTA CON IMAGEN PARA PÁGINA DE INICIO (CORREGIDO MÓVIL)
   ============================================================== */

.cta-home-variant {
    margin-top: 40px;
    margin-bottom: 40px;
    /* IMPORTANTE: Asegurar que el contenedor padre del bloque CTA no permita desbordamiento */
    overflow-x: hidden; /* Para evitar scroll horizontal causado por hijos "fullwidth" mal anulados */
}

.cta-home-variant .heyrenting-fullwidth-cta-block {
    background-color: #ffffff !important;
    padding: 40px 20px; /* Reducido padding lateral base un poco para más flexibilidad */
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important; /* Importante: que sea 100% de su contenedor padre (.cta-home-variant) */
    max-width: 1200px !important;
    box-sizing: border-box;
    position: relative;
    overflow-x: hidden !important; /* CAMBIO: Ocultar overflow interno del bloque también */
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
}

.cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-content {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.cta-home-variant .cta-home-form-column,
.cta-home-variant .cta-home-image-column {
    width: 100%;
    box-sizing: border-box;
}

.cta-home-variant .cta-home-image-column {
    order: 1;
    margin-bottom: 25px;
}
.cta-home-variant .cta-home-image-wrapper img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.cta-home-variant .cta-home-form-column {
    order: 2;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-title-paragraph {
    color: #333333 !important;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-description-paragraph {
    color: #555555 !important;
    margin-bottom: 25px;
    text-align: center;
}

.cta-home-variant .heyrenting-fullwidth-cta-block .wpcf7-form .wpcf7-submit {
    background-color: #52bf31 !important;
    color: #ffffff !important;
}
.cta-home-variant .heyrenting-fullwidth-cta-block .wpcf7-form .wpcf7-submit:hover {
    background-color: #429b27 !important;
}
.cta-home-variant .heyrenting-fullwidth-cta-block .acceptance_renting span.wpcf7-list-item label {
    color: #444444 !important;
}
.cta-home-variant .heyrenting-fullwidth-cta-block .acceptance_renting input[type="checkbox"] {
    accent-color: #52bf31;
}

/* --- ESTILOS PARA DESKTOP (LAYOUT DE 2 COLUMNAS) --- */
@media (min-width: 769px) {
    .cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 40px;
        text-align: left;
    }

    .cta-home-variant .cta-home-form-column {
        flex-basis: 50%;
        order: 1;
        max-width: none;
        margin-left: 50px;
        margin-right: 0;
    }

    .cta-home-variant .cta-home-image-column {
        flex-basis: 45%;
        order: 2;
        margin-bottom: 0;
    }

    .cta-home-variant .cta-home-image-wrapper img {
        max-width: 85%;
    }

    .cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-title-paragraph {
        text-align: left;
        font-size: 26px;
    }

    .cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-description-paragraph {
        text-align: left;
    }
}

/* --- AJUSTES RESPONSIVE PARA MÓVIL (DONDE OCURRE EL PROBLEMA) --- */
@media (max-width: 768px) {
    .cta-home-variant .heyrenting-fullwidth-cta-block {
        padding: 30px 15px; /* Padding base para móvil */
        /* Aseguramos que los márgenes que lo hacían fullwidth NO se apliquen */
        margin-left: 0 !important;  /* Si el contenedor padre ya centra, auto es mejor */
        margin-right: 0 !important; /* Si el contenedor padre ya centra, auto es mejor */
        width: 100% !important;     /* Ocupa el 100% de su contenedor padre */
        max-width: 100% !important; /* Sin un max-width fijo que pueda ser más grande que la pantalla */
        box-shadow: 0 3px 10px rgba(0,0,0,0.06);
        /* overflow-x: hidden !important; YA ESTÁ ARRIBA */
    }

    .cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-content {
        gap: 20px;
        /* width: 100%; */ /* Es flex, los hijos tomarán el ancho necesario */
        /* max-width: 100%; */
    }

    .cta-home-variant .heyrenting-fullwidth-cta-block .heyrenting-cta-title-paragraph {
        font-size: 22px;
    }

    /* Es importante que las columnas en móvil no tengan un flex-basis que sume más del 100%
       o que tengan un min-width que fuerce el desbordamiento.
       Al ser flex-direction: column, width: 100% es lo que queremos. */
    .cta-home-variant .cta-home-form-column,
    .cta-home-variant .cta-home-image-column {
        width: 100%; /* Asegurar que ocupen el 100% del contenedor flex (que es .heyrenting-cta-content) */
        max-width: 100%; /* Evitar que se pasen */
        flex-basis: auto; /* Permitir que la altura se ajuste al contenido */
    }
}



/* ==============================================================
   HERO INICIO - VIDEO ESCRITORIO / IMAGEN & GRADIENTE MÓVIL (JS)
   ============================================================== */

/* Estilos base para el bloque hero (comunes) */
#video-fondo { /* Tu .hero-block */
    position: relative;
    overflow: hidden;
}

/* Por defecto (escritorio), el span de overlay es blanco opaco debido a tu HTML:
   <span style="background-color:#FFF"></span>
   Y el texto del hero es oscuro: color: #3A3A3A; */

.hero-block h1.gb-text-3245f982,
.hero-block p.hero-subtitle {
    position: relative; /* Para asegurar que esté sobre cualquier capa de overlay */
    z-index: 2;
}

/* --- ESTILOS PARA MÓVIL (cuando la clase .hero-is-mobile-image está activa) --- */
@media (max-width: 768px) { /* Ajusta tu breakpoint si es diferente */

    #video-fondo.hero-is-mobile-image {
        background: linear-gradient(to bottom,
            #ffffff 10%,
            #e1f3da 20%,
            #aadca0 40%,
            #52bf31 100%
        ) !important;
        display: flex;
        flex-direction: column;
        min-height: auto !important;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    #video-fondo.hero-is-mobile-image video.wp-block-cover__video-background {
        display: none !important;
    }

    /* Hacemos transparente el span de overlay para que se vea el degradado del div padre */
    #video-fondo.hero-is-mobile-image span.wp-block-cover__background {
        background-color: transparent !important;
        /* Si este span tuviera opacidad por clases como has-background-dim-50,
           también podrías necesitar: opacity: 1 !important; para anularlo
           si el background-color:transparent no es suficiente.
           Pero tu HTML actual tiene has-background-dim-0, así que está bien. */
    }

    #video-fondo.hero-is-mobile-image .wp-block-cover__inner-container {
        padding-top: 50px;
        padding-bottom: 25px; /* Un poco menos de espacio antes de la imagen */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        order: 1;
        text-align: left;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Asegurar que el texto del H1 y subtítulo sean oscuros sobre el fondo blanco/degradado claro */
    #video-fondo.hero-is-mobile-image h1.gb-text-3245f982 {
        color: #333333 !important;
        font-size: 2.3em !important; /* Un poco más grande */
        line-height: 1.15 !important;
        margin-bottom: 10px !important; /* Menos espacio debajo del H1 */
    }

    #video-fondo.hero-is-mobile-image p.hero-subtitle {
        color: #555555 !important;
        font-size: 1.1em !important; /* Un poco más grande */
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
    }
    
    #video-fondo.hero-is-mobile-image a.hero-btn {
        display: inline-block; /* Cambiado a inline-block para que no ocupe todo el ancho */
        max-width: none;       /* Quitar max-width anterior */
        margin-left: auto;
        margin-right: auto;
        padding: 0.9rem 1.8rem !important; /* Padding ajustado */
    }

    img.hero-mobile-image-js {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: -50px;
        order: 2;
        border-radius: 0;
        object-fit: cover;
        min-height: 250px; /* Ajusta según la altura deseada de la imagen */
        position: relative; /* Para que z-index funcione si es necesario */
        z-index: 1; /* Por si el span de overlay se pone terco */
    }
}

/* --- ESTILOS PARA ESCRITORIO (cuando la clase .hero-is-desktop-video está activa) --- */
@media (min-width: 769px) { /* Ajusta tu breakpoint */

    #video-fondo.hero-is-desktop-video {
        background: none !important; /* Sin degradado en escritorio */
        min-height: 500px !important; /* Tu altura original de desktop */
         /* Asegura que la alineación del contenido de texto sea la original si la cambiaste para móvil */
        display: block; /* O el display original del bloque cover */
    }

    #video-fondo.hero-is-desktop-video video.wp-block-cover__video-background {
        display: block !important; /* O el display original que tuviera */
    }


    #video-fondo.hero-is-desktop-video span.wp-block-cover__background {
        /* El style="background-color:#FFF" inline del HTML volverá a tomar efecto aquí,
           dando el fondo blanco sobre el vídeo que tenías. */
    }

    #video-fondo.hero-is-desktop-video img.hero-mobile-image-js {
        display: none !important;
    }

    /* Restaurar colores de texto para escritorio si los cambiaste para móvil */
    #video-fondo.hero-is-desktop-video h1.gb-text-3245f982 {
        color: #3A3A3A !important; /* Tu color original de desktop */
        font-size: 3em !important; /* Tu tamaño original de desktop */
    }
    #video-fondo.hero-is-desktop-video p.hero-subtitle {
        color: #3A3A3A !important; /* Tu color original de desktop */
        font-size: 1.2em !important; /* Tu tamaño original de desktop */
    }
    #video-fondo.hero-is-desktop-video .wp-block-cover__inner-container {
        width: 100%; /* Ocupa el ancho disponible */
        max-width: none; /* Para que los paddings internos definan el ancho del contenido */
        margin-left: auto; /* Centrar si el hero-block es más ancho */
        margin-right: auto;
        padding-top: 60px;   /* Ajusta según necesites */
        padding-bottom: 60px;/* Ajusta según necesites */
        /* LA CLAVE: Aplicar los mismos paddings laterales que el texto de abajo */
        padding-left: 300px !important;  /* Asumiendo que el texto de abajo tiene esto */
        padding-right: 300px !important; /* Asumiendo que el texto de abajo tiene esto */
        box-sizing: border-box;
        text-align: left; /* Alineación del texto a la izquierda */
    }
    
    /* Ajustar el contenedor de columnas gb-element-c0a622ec si es necesario */
    #video-fondo.hero-is-desktop-video .gb-element-c0a622ec {
        max-width: none; /* Permitir que el contenido de GenerateBlocks se expanda */
        /* Si gb-element-c0a622ec tiene sus propios paddings, podrías necesitar resetearlos a 0
           para que los paddings del .wp-block-cover__inner-container sean los que dominen.
           padding-left: 0 !important;
           padding-right: 0 !important;
        */
    }
    /* Asegurar que el texto dentro de la columna no tenga márgenes extraños */
    #video-fondo.hero-is-desktop-video .hero-text { /* Tu .wp-block-column.hero-text */
        /* Si este div tiene paddings propios que interfieren con los 300px, resetéalos */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #video-fondo.hero-is-desktop-video h1.gb-text-3245f982 {
        color: #3A3A3A !important;
        font-size: 3em !important; /* O tu tamaño original */
        text-align: left;
    }
    #video-fondo.hero-is-desktop-video p.hero-subtitle {
        color: #3A3A3A !important;
        font-size: 1.2em !important; /* O tu tamaño original */
        text-align: left;
    }
    #video-fondo.hero-is-desktop-video a.hero-btn {
        display: inline-block; /* Para que no ocupe todo el ancho */
    }
}


/* ==============================================================
   ESTILOS "VER MÁS" BLOQUES DE MARCAS HEYrenting
   ============================================================== */

/* Contenedor general del bloque de marcas cuando tiene "Ver más" */
.heyrenting-marcas-wrapper {
    position: relative; /* Para posicionar el botón si fuera necesario, aunque no lo es con este layout */
}

.hey-marca-item-oculta.is-visible {
    display: flex !important; /* O el display que usen tus items de marca (flex, inline-flex, etc.) */
}

/* Botón "Ver más / Ver menos" */
.heyrenting-ver-mas-btn {
    display: block; /* Para que ocupe su propia línea */
    width: fit-content; /* Ancho ajustado al contenido */
    max-width: 100%;    /* Para que no se desborde en móviles */
    margin: 20px auto 0; /* Margen superior, centrado horizontal, sin margen inferior */
    padding: 10px 25px;
    font-size: 15px;
    font-weight: 500;
    color: #52bf31; /* Color de texto corporativo */
    background-color: #ffffff; /* Fondo blanco */
    border: 2px solid #52bf31; /* Borde con color corporativo */
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.heyrenting-ver-mas-btn:hover,
.heyrenting-ver-mas-btn:focus {
    background-color: #52bf31; /* Invertir colores en hover/focus */
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(82, 191, 49, 0.2);
    outline: none;
}

.heyrenting-ver-mas-btn:active {
    transform: translateY(1px);
}


/* ==============================================================
   ESTILOS BLOQUE HTML "CÓMO FUNCIONA HEYRENTING" (Tipo Carwow)
   (CON BOTÓN MOVIDO EN HTML PARA ORDEN EN MÓVIL)
   ============================================================== */

.heyrenting-como-funciona-bloque {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    margin: 40px auto;
    max-width: 1400px;
    border: 1px solid #e9ecef;
    overflow: hidden; /* Para asegurar bordes redondeados */
}

.heyrenting-bloque-columna {
    box-sizing: border-box;
}

/* --- Columna Izquierda (Imagen y Descripción) --- */
.heyrenting-bloque-columna-izquierda {
    flex: 1 1 50%;
    min-width: 290px;
    display: flex;
    flex-direction: column;
}

.heyrenting-bloque-imagen {
    width: 80%;
    height: auto;
    display: block;
    border-radius: 10px;
    margin-bottom: 20px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
}

.heyrenting-bloque-descripcion-precio {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #f0f0f0;
    margin-top: auto; /* Empuja hacia abajo */
    font-size: 15px;
}

.heyrenting-bloque-descripcion-precio p {
    margin: 0;
    color: #4a5568;
    flex-grow: 1;
    padding-right: 10px;
}

.heyrenting-bloque-descripcion-precio span {
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

/* --- Columna Derecha (Título y Lista) --- */
.heyrenting-bloque-columna-derecha {
    flex: 1 1 45%;
    min-width: 290px;
    display: flex;
    flex-direction: column;
    padding-left: 15px; /* Espacio si las columnas están muy juntas en escritorio */
}

.heyrenting-bloque-columna-derecha h2 {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.3;
}

ul.heyrenting-bloque-lista-ventajas {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex-grow: 1; /* Ocupa espacio disponible */
}

ul.heyrenting-bloque-lista-ventajas li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 18px;
    font-size: 16px;
    color: #34495e;
    line-height: 1.6;
}
ul.heyrenting-bloque-lista-ventajas li:last-child {
    margin-bottom: 0;
}

.heyrenting-bloque-icono-check {
    flex-shrink: 0;
    margin-right: 12px;
    margin-top: 3px;
}

.heyrenting-bloque-icono-check svg {
    color: #52bf31;
    display: block;
}

/* --- Botón CTA (Estilos para el botón que está DENTRO de la columna derecha en ESCRITORIO) --- */
/* Nota: Este botón se OCULTARÁ en móvil, y se mostrará el botón "hermano" */
.heyrenting-bloque-columna-derecha a.heyrenting-bloque-cta-boton {
    display: block;
    width: 100%;
    background-color: #ffffff;
    color: #52bf31;
    border: 2px solid #52bf31;
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
    margin-top: auto; /* Empuja al final de la columna */
    font-size: 17px;
    box-sizing: border-box;
}

.heyrenting-bloque-columna-derecha a.heyrenting-bloque-cta-boton:hover,
.heyrenting-bloque-columna-derecha a.heyrenting-bloque-cta-boton:focus {
    background-color: #52bf31;
    color: #ffffff;
    outline: none;
}
.heyrenting-bloque-columna-derecha a.heyrenting-bloque-cta-boton:active {
    transform: scale(0.98);
}


/* --- Botón CTA (Estilos para el botón que es HERMANO de las columnas, usado en MÓVIL) --- */
/* Se le añade la clase .heyrenting-boton-movil-final en el HTML */
a.heyrenting-bloque-cta-boton.heyrenting-boton-movil-final {

    width: 100%;
    background-color: #ffffff;
    color: #52bf31;
    border: 2px solid #52bf31;
    padding: 14px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
    font-size: 17px;
    box-sizing: border-box;
}

a.heyrenting-bloque-cta-boton.heyrenting-boton-movil-final:hover,
a.heyrenting-bloque-cta-boton.heyrenting-boton-movil-final:focus {
    background-color: #52bf31;
    color: #ffffff;
    outline: none;
}
a.heyrenting-bloque-cta-boton.heyrenting-boton-movil-final:active {
    transform: scale(0.98);
}


/* --- Responsive --- */
@media (min-width: 821px) {
    /* En escritorio, el botón que es HERMANO de las columnas se oculta (ya lo pusimos display:none por defecto arriba) */
    /* Y el botón que está DENTRO de la columna derecha se muestra (ya está display:block por defecto) */
}

@media (max-width: 820px) {
    .heyrenting-como-funciona-bloque {
        display: flex;
        flex-direction: column; /* Apilar verticalmente en orden HTML original */
        gap: 25px;
        padding: 25px;
        margin: 30px auto;
    }

    .heyrenting-bloque-columna-izquierda,
    .heyrenting-bloque-columna-derecha,
    .heyrenting-boton-movil-final { /* El botón ahora es un item flex directo */
        flex-basis: 100%;
        padding-left: 0;
        min-width: 0;
        width: 100%; /* Asegurar que ocupen todo el ancho disponible */
    }

    /* Orden visual en móvil */
    .heyrenting-bloque-columna-derecha { order: 1; } /* Título y lista primero */
    .heyrenting-bloque-columna-izquierda { order: 2; } /* Imagen y descripción después */
    .heyrenting-boton-movil-final {
        order: 3 !important; /* Botón (el hermano) al final de todo */
        display: block !important; /* <<<< Asegurar que este botón se muestre en móvil */
        margin-top: 10px; /* Espacio sobre el botón */
    }

    /* Ocultar el botón que está DENTRO de la columna derecha en móvil */
    .heyrenting-bloque-columna-derecha a.heyrenting-bloque-cta-boton {
        display: none !important; /* <<<< Ocultar el botón original de la columna derecha */
    }

    /* Ajustes de contenido en móvil */
    .heyrenting-bloque-columna-derecha h2 {
        font-size: 24px;
        text-align: left;
        margin-bottom: 20px;
    }

    ul.heyrenting-bloque-lista-ventajas li {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .heyrenting-bloque-imagen {
        width: 100%;
        max-width: 320px; /* O el máximo que prefieras para móvil */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }

    .heyrenting-bloque-descripcion-precio {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding-top: 10px;
        margin-top: 10px;
        border-top: 1px solid #f0f0f0;
    }

    .heyrenting-bloque-descripcion-precio p,
    .heyrenting-bloque-descripcion-precio span {
        padding-right: 0;
        font-size: 14px;
    }
}



/* ==============================================================
   ESTILOS BARRA NOTIFICACIÓN PRODUCTO ANIMADA - HEYRENTING (MARQUESINA CONTINUA)
   ============================================================== */

#heyrenting-product-notification-bar {
    background-color: #52bf31;
    color: #ffffff;
    /* Altura base a través de padding */
    padding-top: 10px;
    padding-bottom: 10px;
    /* Si usabas height fijo antes, considera cambiar a padding o min-height */
    /* height: 40px; */ /* Por ejemplo, si esta era tu altura original */
    min-height: 40px; /* Asegura una altura mínima para el contenido */
    width: 100%;
    position: sticky;
    top: 0; /* JS ajustará esto, pero es un buen default */
    z-index: 998;
    overflow: hidden;
    box-sizing: border-box;
    display: flex; /* Para centrar verticalmente el contenido si la altura aumenta */
    align-items: center; /* Centrar verticalmente */
    transition: padding-top 0.2s ease-in-out, padding-bottom 0.2s ease-in-out, min-height 0.2s ease-in-out; /* Transición suave para el cambio de altura */
}

.heyrenting-notification-bar-content {
    /* Este div ya no necesita ser flex, el wrapper interno lo será */
    width: 100%;
}

/* El wrapper que contiene los dos segmentos de texto */
.heyrenting-notification-text-wrapper {
    display: inline-block; /* Clave: permite que el wrapper tenga el ancho de su contenido */
    white-space: nowrap;   /* Evita que los spans se rompan en líneas */
    /* La animación se aplicará aquí */
    animation: heyrenting-true-marquee 20s linear infinite;
    will-change: transform; /* Sugerencia al navegador para optimizar la animación de transformación */
}

/* Cada segmento de texto individual */
.heyrenting-notification-text-segment {
    display: inline-block; /* Los spans ya son inline, pero inline-block da más control si se necesita padding */
    padding-right: 50px;   /* ESPACIO entre el final del primer texto y el inicio del segundo. AJUSTA ESTO. */
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}
.heyrenting-notification-text-segment:last-child {
    padding-right: 0; /* El último segmento no necesita padding a su derecha */
}


/* Animación para la marquesina continua */
@keyframes heyrenting-true-marquee {
    0% {
        transform: translateX(0%);
        /* El wrapper comienza con el primer texto visible.
           Si el wrapper es más ancho que la barra, parte del segundo texto
           o el padding ya estarán a la derecha, fuera de la vista. */
    }
    100% {
        transform: translateX(-100%);
        /* Mueve el wrapper hacia la izquierda una distancia igual a SU PROPIO ANCHO.
           Dado que el wrapper contiene el primer texto + padding + segundo texto,
           cuando el transform llega a -100%, el *inicio* del primer texto
           estará justo en el borde izquierdo del wrapper.
           Para que el *final* del primer texto (y el inicio del padding)
           llegue al borde izquierdo de la *barra de notificación*, necesitamos
           que el translateX sea -(ancho del primer segmento de texto + su padding-right).
           Esto es lo complicado con CSS puro si no conocemos el ancho exacto del texto.

           Con la técnica de duplicación, el translateX(-100%) del *wrapper*
           significa que se mueve una distancia igual al (texto1 + padding + texto2).
           Si el texto1+padding es lo que queremos que se desplace para que texto2
           ocupe el lugar de texto1, entonces translateX(-50%) sobre un wrapper
           que mide EL DOBLE del contenido visible es lo que se usa a menudo.

           Vamos a ajustar: la animación debe mover el wrapper una distancia
           igual al primer segmento MÁS su padding-right.
           Para simplificar, si asumimos que ambos segmentos tienen un ancho similar (TextWidth),
           y el padding es P, el wrapper mide (TextWidth + P + TextWidth).
           Queremos moverlo (TextWidth + P).
           Esto es aproximadamente -50% si el segundo TextWidth es igual al primero.
        */

        /* REVISIÓN DE LA ANIMACIÓN PARA EL EFECTO CONTINUO:
           La idea es que el wrapper se mueva hasta que el *segundo* segmento
           esté en la posición inicial del *primer* segmento.
           El wrapper tiene un ancho total W = (ancho_texto1 + padding_entre_textos + ancho_texto2).
           Queremos que el desplazamiento sea igual a (ancho_texto1 + padding_entre_textos).
           Si ancho_texto1 y ancho_texto2 son aproximadamente iguales, esto es cercano al 50% de W.
           Por lo tanto, la animación de -50% que tenías antes para el wrapper DEBERÍA ser correcta.
        */
        transform: translateX(-50%); /* Mantenemos el -50% que tenías para el wrapper */
    }
}


/* --- ESTILOS PARA ESCRITORIO (sin animación, texto centrado) --- */
@media (min-width: 769px) {
    #heyrenting-product-notification-bar .heyrenting-notification-text-wrapper {
        animation: none !important;
        transform: none !important;
        display: block !important; /* Para centrar */
        text-align: center !important;
        white-space: normal !important; /* Permitir ajuste */
    }

    #heyrenting-product-notification-bar .heyrenting-notification-text-segment {
        display: inline !important; /* O inline-block */
        padding-right: 0 !important; /* Quitar padding extra */
        white-space: normal !important;
    }
    #heyrenting-product-notification-bar .heyrenting-notification-text-segment[aria-hidden="true"] {
        display: none !important; /* Ocultar el duplicado */
    }
}

/* Responsive: Móviles */
@media (max-width: 768px) {
    #heyrenting-product-notification-bar {
        /* Padding base para móvil si es diferente al de escritorio */
        padding-top: 8px;
        padding-bottom: 8px;
        min-height: 36px; /* Altura mínima base en móvil */
    }
    .heyrenting-notification-text-wrapper {
        animation-duration: 11s; /* Ajusta duración */
    }
    .heyrenting-notification-text-segment {
        font-size: 14px;
    }
    body.single-product #heyrenting-product-notification-bar.is-actually-sticky-at-top {
        padding-top: 12px;    /* Aumentar padding superior */
        padding-bottom: 12px; /* Aumentar padding inferior */
        min-height: 50px;     /* Aumentar altura mínima si es necesario */
    }
    body.single-product #heyrenting-product-notification-bar.is-actually-sticky-at-top .heyrenting-notification-text-segment {
    font-size: 17px;
    }
}



/* ==============================================================
   ESTILOS BANNER FIJO INFERIOR PRODUCTO MÓVIL - HEYRENTING (Refinado)
   ============================================================== */
.hr-sticky-banner {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #52bf31;
    color: #fff;
    padding: 20px 15px 10px 15px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
    z-index: 999;
    box-sizing: border-box;
    height: 145px;
}

.hr-sticky-banner .hr-banner-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 10px;
}

/* Sección del Título del Vehículo */
.hr-sticky-banner .hr-banner-title-section {
    flex-grow: 1; /* Permitir que el título ocupe el espacio disponible */
}

.hr-sticky-banner .hr-banner-title {
    font-size: 23.5px; /* Ligeramente más pequeño para dar más espacio si es necesario */
    font-weight: 700;
    line-height: 1.25; /* Ajustar para que la primera línea coincida con "Desde:" */
    color: #ffffff; /* Asegurar que el título sea blanco */
    display: block;
    text-transform: uppercase;
}

/* Sección del Precio */
.hr-sticky-banner .hr-banner-price-section {
    text-align: right;
    line-height: 1.25; /* Igual que el título para ayudar a la alineación de la primera línea */
    flex-shrink: 0; /* Evitar que la sección de precio se encoja demasiado */
    /* Añadimos display flex para controlar los elementos internos de precio */
    display: flex;
    flex-direction: column; /* Apilar "Desde: [precio]" y "+IVA" verticalmente */
    align-items: flex-end; /* Alinear estos elementos a la derecha dentro de su columna */
}

.hr-sticky-banner .hr-banner-price {
    font-size: 18px; /* Mismo tamaño que el título para alineación visual de la primera línea */
    font-weight: bold;
    color: #ffffff;
    display: inline-block; /* Para que el span no ocupe todo el ancho y permita alinear el prefix */
    white-space: nowrap; /* Evitar que "Desde:" y el precio se separen */
}

.hr-sticky-banner .hr-banner-price-prefix {
    font-size: 17px; /* Un poco más pequeño que el precio */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85); /* Blanco un poco más tenue */
    margin-right: 4px;
    vertical-align: baseline; /* Intenta alinear con la base del texto del precio */
}

.hr-sticky-banner .hr-banner-iva {
    font-size: 11px; /* Tamaño pequeño para el IVA */
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85); /* Blanco un poco más tenue */
    display: block; /* Asegurar que esté en su propia línea debajo del precio */
    margin-top: 2px; /* Pequeño espacio entre el precio y el IVA */
}

/* Botón "Lo quiero" */
.hr-sticky-banner .hr-banner-button {
    display: block; /* Ocupa todo el ancho */
    width: 100%;
    background-color: #ff7925;
    color: #ffffff;
    text-align: center;
    padding: 10px 15px; /* Padding ajustado para el botón */
    border-radius: 12px; /* Bordes muy redondeados */
    text-decoration: none;
    font-size: 17px; /* Tamaño del texto del botón */
    font-weight: bold;
    transition: background-color 0.2s ease, transform 0.1s ease;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra sutil para el botón */
    /* Ya no necesita display:flex, align-items, justify-content, gap si no hay icono */
}

.hr-sticky-banner .hr-banner-button:hover {
    background-color: #e66a1e;
    transform: translateY(-1px);
}
.hr-sticky-banner .hr-banner-button:active {
    transform: translateY(0px) scale(0.98);
}

/* Eliminar estilos del icono del botón si aún existen */
.hr-sticky-banner .hr-banner-button .hr-button-icon {
    display: none !important;
}

/* Lógica de visibilidad en móvil (se mantiene igual) */
@media (max-width: 768px) {
    body.single-product.woocommerce-page .hr-sticky-banner {
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transform: translateY(100%);
        transition: opacity 0.3s ease-in-out, visibility 0s 0.3s linear, transform 0.3s ease-in-out;
    }

    body.single-product.woocommerce-page .hr-sticky-banner.hr-banner-visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        display: flex; /* Importante para que se muestre */
        transition-delay: 0s, 0s, 0s;
    }
}


.col-concepto-4wd-header {
    background-color: #52bf31 !important;
    color: #fff !important;
}
.col-heyrenting-4wd-header {
    background-color: #52bf31 !important;
    color: #fff !important;
    text-align: center !important;
}
.col-compra-4wd-header {
    background-color: #52bf31 !important;
    color: #fff !important;
    text-align: center !important;
}


/* ==============================================================
   LIGHTBOX PARA GALERÍA DE PRODUCTO MÓVIL - HEYRENTING
   ============================================================== */

#hey-gallery-lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Overlay oscuro semi-transparente */
    z-index: 10000; /* Muy alto para estar por encima de todo */
    display: flex; /* Usado por JS para mostrar/ocultar */
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0; /* Transición de opacidad */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear;
}

#hey-gallery-lightbox-modal.hey-lightbox-visible { /* Clase que podrías añadir con JS si prefieres controlar con CSS */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

/* El JS controla display:flex/none directamente, así que la clase .hey-lightbox-visible es opcional */
/* Si el JS usa display:flex, asegúrate que la transición de opacidad funcione bien con eso */
#hey-gallery-lightbox-modal:target, /* Si usaras anclas para abrir (no es el caso aquí) */
#hey-gallery-lightbox-modal[style*="display: flex"] { /* Cuando JS lo muestra */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}


.hey-lightbox-overlay { /* Si quisieras un overlay separado para clics, aunque el modal principal puede servir */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* No necesita background si el modal principal ya lo tiene */
    cursor: zoom-out; /* Cursor para indicar que se puede cerrar */
}

.hey-lightbox-content {
    position: relative; /* Para posicionar el botón de cierre */
    max-width: 95%;
    max-height: 95%;
    display: flex; /* Para centrar la imagen si es más pequeña que max-width/height */
    align-items: center;
    justify-content: center;
}

.hey-lightbox-content img {
    display: block;
    max-width: 100%;
    max-height: 100%; /* Llenará el .hey-lightbox-content manteniendo proporción */
    height: auto;
    width: auto;
    border-radius: 4px; /* Opcional: bordes redondeados para la imagen ampliada */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4); /* Sombra para destacar */
}

.hey-lightbox-close {
    position: absolute;
    top: -5px;  /* Ajusta para que esté ligeramente fuera o sobre la imagen */
    right: -5px; /* Ajusta */
    background-color: rgba(30, 30, 30, 0.8);
    color: white;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 28px;
    line-height: 36px; /* Para centrar la X verticalmente */
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0;
    display: flex; /* Para centrar la X */
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.hey-lightbox-close:hover {
    background-color: rgba(0, 0, 0, 1);
}

/* Ocultar en escritorio (puedes ajustar el breakpoint) */
@media (min-width: 769px) {
    #hey-gallery-lightbox-modal {
        /* display: none !important; */ /* El JS ya previene la apertura en escritorio */
    }
}




/* ==============================================================
   ESTILOS BLOQUE PROMO REGALOS HEYRENTING & POPUP
   ============================================================== */

/* --- Contenedor Principal del Bloque --- */
.wp-block-heyrenting-promo-regalos.hey-promo-regalos-container {
    display: flex;
    flex-wrap: wrap; /* Para móvil */
    background: linear-gradient(to left, #52bf31 50%, #ffffff 100%);
    color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    margin-top: 2rem;
    margin-bottom: 2rem;
    align-items: center;
    gap: 20px; /* Espacio entre columnas */
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Columna Izquierda (Logo y Texto Principal) */
.hey-promo-col-left {
    flex: 1 1 40%; /* Ajusta la proporción según necesites */
    min-width: 280px; /* Ancho mínimo para móvil */
    padding-right: 20px; /* Espacio si hay columna derecha */
    text-align: left;
}

.hey-promo-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 15px;
    display: block;
}

.hey-promo-main-title {
    font-size: 1.3em; /* Ajusta */
    font-weight: 300;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 2;
    color: #222; /* Asegurar color si RichText lo cambia */
}

.hey-promo-additional-text {
    font-size: 1.1em;
    margin-bottom: 5px;
    font-weight: 300;
    color: #e0e0e0;
}

.hey-promo-highlight-text {
    font-size: 2.2em; /* Ajusta */
    font-weight: 700;
    color: #222; /* Asegurar color si RichText lo cambia */
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

/* Columna Derecha (Grid de Regalos) */
.hey-promo-col-right {
    flex: 1 1 55%; /* Ajusta */
    min-width: 300px; /* Ancho mínimo */
}

.hey-promo-gifts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* Ajustado minmax para móvil */
    gap: 15px;
}

.hey-promo-gift-item {
    background-color: #ffffff;
    color: #333333;
    padding: 20px 15px; /* Aumentar padding vertical un poco */
    border-radius: 10px; /* Bordes más redondeados como en la imagen */
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Para espaciar texto y logo si tienen alturas variables */
    min-height: 120px; /* Altura mínima para más consistencia visual */
    box-shadow: 0 3px 8px rgba(0,0,0,0.08); /* Sombra un poco más notoria */
    border: 1px solid #e9ecef; /* Borde sutil */
}
.hey-promo-gift-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
    background-color: transparent;
    border-color: white;
    color: white;
}

.hey-gift-text {
    font-size: 0.9em; /* Ajusta si es necesario */
    margin-bottom: 12px; /* Más espacio antes del logo */
    display: block;
    line-height: 1.3;
    flex-grow: 1; /* Permitir que el texto ocupe espacio */
}
.hey-gift-text .hey-gift-brand {
    font-weight: 700;
    display: block; /* Marca en nueva línea si es muy largo */
    margin-top: 3px;
    text-transform: uppercase;
}

.hey-gift-logo {
    max-height: 40px; /* Ajusta según tus logos */
    max-width: 100px; /* Ajusta */
    width: auto;
    object-fit: contain;
    margin-top: auto; /* Empuja el logo hacia abajo si el texto es corto */
}

/* --- Estilos del Popup --- */
.hey-promo-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10010; /* Muy alto */
    display: flex; /* JS lo cambiará a flex/none */
    align-items: center;
    justify-content: center;
    opacity: 0; /* Transición */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear;
}
.hey-promo-popup-modal[style*="display: flex"] {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.hey-promo-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}

.hey-promo-popup-content-wrapper {
    position: relative;
    background-color: #ffffff;
    border-radius: 10px;
    width: 90%;
    max-width: 700px; /* Ancho del popup */
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    padding: 0; /* Padding se maneja en header/body */
}

.hey-promo-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 30px;
    line-height: 1;
    color: #888;
    cursor: pointer;
    padding: 5px;
    z-index: 10; /* Encima del contenido del popup */
}
.hey-promo-popup-close:hover {
    color: #333;
    background-color: transparent;
}

.hey-promo-popup-header {
    padding: 20px 25px 15px;
    text-align: center;
    border-bottom: 1px solid #eee;
}
.hey-promo-popup-logo {
    max-width: 150px;
    height: auto;
}

.hey-promo-popup-body {
    padding: 20px 25px 25px;
}

.hey-promo-popup-title {
    font-size: 1.8em;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
}
.hey-promo-popup-description {
    font-size: 1em;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.5;
    text-align: center;
}

.hey-promo-popup-highlight-bar {
    border: 1px solid #52bf31;
    color: #52bf31;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    margin: 25px 0;
}

.hey-promo-popup-steps-title,
.hey-promo-popup-gifts-title {
    font-size: 1.3em;
    font-weight: 600;
    color: #444;
    margin-top: 25px;
    margin-bottom: 10px;
    text-align: left;
}

ul.hey-promo-popup-steps-list {
    list-style: none;
    padding-left: 0;
    margin: 0 0 25px 0;
}
ul.hey-promo-popup-steps-list li {
    margin-bottom: 10px;
    font-size: 0.95em;
    color: #555;
    display: flex;
    align-items: flex-start;
}
.hey-popup-step-icon {
    display: inline-flex; /* Para poder usar width, height y centrar contenido */
    align-items: center;  /* Centrar el tick verticalmente dentro del círculo */
    justify-content: center; /* Centrar el tick horizontalmente */
    width: 22px;  /* Ancho del círculo (ajusta según necesites) */
    height: 22px; /* Alto del círculo (igual al ancho para un círculo perfecto) */
    border-radius: 50%; /* Hace que el span sea un círculo */
    background-color: #52bf31; /* Fondo del círculo con tu color verde */
    color: #ffffff; /* Color del tick (✓) blanco para contraste */
    font-weight: bold;
    font-size: 12px; /* Tamaño del tick (✓) dentro del círculo (ajusta) */
    line-height: 1;   /* Importante para un buen centrado vertical del tick */
    margin-right: 10px; /* Espacio entre el círculo y el texto del paso */
    flex-shrink: 0; /* Evita que el círculo se encoja si el texto es largo */
    /* Opcional: para un centrado perfecto del tick si line-height no es suficiente */
    /* padding-top: 1px;  */ /* Ajuste fino si el tick no está perfectamente centrado */
}

.hey-promo-popup-gifts-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive */
    gap: 10px;
    margin-bottom: 30px;
}
.hey-promo-popup-gift-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 0.9em;
}
.hey-promo-popup-gift-item span {
    color: #444;
}
.hey-promo-popup-gift-item img {
    max-height: 28px;
    max-width: 80px;
    width: auto;
    object-fit: contain;
    margin-left: 10px;
}

.hey-promo-popup-form-container .wpcf7-form p { margin-bottom: 15px; }
.hey-promo-popup-form-container .wpcf7-form input:not([type="submit"]):not([type="checkbox"]),
.hey-promo-popup-form-container .wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
.hey-promo-popup-form-container .wpcf7-form .wpcf7-submit {
    background-color: #ff7925;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;
}
.hey-promo-popup-form-container .wpcf7-form .wpcf7-submit:hover {
    background-color: #429b27;
}
.hey-promo-popup-form-container .wpcf7-form .wpcf7-acceptance { /* Ajuste para aceptación */
    font-size: 0.85em;
    color: #666;
}
.hey-promo-popup-form-container .wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
    margin-right: 5px;
    vertical-align: middle;
}

.hey-promo-popup-legal-text {
    font-size: 0.75em;
    color: #777;
    margin-top: 25px;
    line-height: 1.4;
    text-align: left;
}

.hey-promo-popup-scroll-to-form-container {
    text-align: center; /* Centrar el botón */
    margin-top: 20px; /* Espacio después de la lista de pasos */
    margin-bottom: 25px; /* Espacio antes del título de "Listado de regalos" */
}

.hey-promo-popup-scroll-button {
    background-color: #52bf31; /* Tu verde principal */
    color: #ffffff;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 1em;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    display: inline-block; /* Para que el text-align:center funcione en el contenedor */
}

.hey-promo-popup-scroll-button:hover {
    background-color: #429b27; /* Un verde más oscuro */
}

.hey-promo-popup-scroll-button:active {
    transform: scale(0.98);
}

/* Clase para evitar scroll del body */
body.hey-promo-popup-open {
    overflow: hidden;
}

.hey-promo-popup-form-title {
    font-size: 1.2em; /* Ajusta el tamaño según necesites */
    font-weight: 600; /* Semi-bold o bold */
    color: #fff;      /* Color de texto oscuro */
    text-align: center; /* Centrar el título */
    margin-bottom: 15px; /* Espacio antes de que empiece el formulario CF7 */
    margin-top: 25px; /* Espacio después de la lista de regalos, si es necesario */
}

/* Ajuste del contenedor del formulario para que el título esté bien espaciado */
.hey-promo-popup-form-container {
    margin-top: 20px; /* Añadir o ajustar el margen superior del contenedor del formulario */
    background-color: #52bf31;
    padding: 10px;
    border-radius: 12px;
}

.green-container {
    color: white;
}
.green-container a {
    color: white;
}

@media (min-width: 600px) and (max-width: 991px) {
    .hey-promo-gifts-grid {
         grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }
}

@media (min-width: 992px) { /* Ajusta este breakpoint si es necesario */
    .hey-promo-gifts-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* EXACTAMENTE 4 COLUMNAS DE IGUAL ANCHO */
        gap: 20px; /* Puedes ajustar el gap para escritorio si quieres */
        align-items: stretch; /* Asegura que todas las tarjetas en la fila tengan la misma altura */
    }

    .hey-promo-gift-item {
        min-height: 140px; /* Podrías querer una altura mínima mayor en escritorio */
        padding: 25px 15px;
    }
     .hey-gift-text {
        font-size: 1em; /* Texto un poco más grande en escritorio */
    }
    .hey-gift-logo {
        max-height: 45px; /* Logo un poco más grande en escritorio */
    }
    .hey-promo-popup-body .hey-promo-popup-gifts-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr); /* 4 columnas como en el bloque principal */
        gap: 15px; /* Espacio similar al del bloque principal */
        margin-bottom: 30px; /* Espacio antes del formulario */
    }

    .hey-promo-popup-body .hey-promo-popup-gift-item {
        /* Replicamos los estilos de .hey-promo-gift-item del bloque principal */
        background-color: #ffffff;
        color: #333333;
        padding: 20px 15px; /* Padding similar */
        border-radius: 10px;
        text-align: center;
        /* cursor: default; */ /* No necesitan ser clickables aquí si solo son informativos */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between; /* Para espaciar texto y logo */
        min-height: 120px; /* Altura mínima similar */
        box-shadow: 0 3px 8px rgba(0,0,0,0.08);
        border: 1px solid #e9ecef;
        /* Quitamos transiciones de hover si no son interactivos aquí */
        /* transition: none; */
    }

    .hey-promo-popup-body .hey-promo-popup-gift-item span { /* El texto que contiene "Bono combustible CEPSA" */
        font-size: 0.9em;
        margin-bottom: 12px;
        display: block;
        line-height: 1.3;
        flex-grow: 1; /* Para que ocupe espacio */
        color: #333; /* Asegurar color de texto */
    }

    .hey-promo-popup-body .hey-promo-popup-gift-item span strong {
        font-weight: 700;
        display: block;
        margin-top: 3px;
        color: #0d274d; /* O un azul oscuro si prefieres destacar la marca */
    }

    .hey-promo-popup-body .hey-promo-popup-gift-item img {
        max-height: 40px; /* Altura del logo similar al bloque principal */
        max-width: 100px;
        width: auto;
        object-fit: contain;
        margin-top: auto; /* Empuja hacia abajo */
    }
}

/* --- Responsive para el Bloque Principal y Popup --- */
@media (max-width: 768px) {
    .wp-block-heyrenting-promo-regalos.hey-promo-regalos-container {
        flex-direction: column;
        padding: 20px;
        gap: 25px;
        text-align: center;
        background: linear-gradient(to top, #52bf31 50%, #ffffff 100%);
        margin-top: 4rem;
    }
    .hey-promo-col-left {
        padding-right: 0;
        text-align: center;
        align-items: center; /* Centrar logo */
    }
    
    .hey-gift-text .hey-gift-brand {
        font-size: 16px;
    }
    .hey-promo-logo { margin-left: auto; margin-right: auto;}
    .hey-promo-main-title { font-size: 1.2em; }
    .hey-promo-highlight-text { font-size: 1.9em; }

    .hey-promo-gifts-grid {
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Esto podría dar 2 columnas en móviles anchos */
        gap: 10px;
    }
    .hey-promo-gift-item {
        padding: 15px 10px;
        min-height: 110px;
        border-radius: 8px; /* Bordes un poco menos redondeados en móvil */
    }
    .hey-gift-text {
        font-size: 0.85em;
        margin-bottom: 8px;
    }
    .hey-gift-logo {
        max-height: 30px;
    }

    /* Popup en móvil */
    .hey-promo-popup-content-wrapper {
        width: 100% !important;         /* Ocupa todo el ancho disponible */
        height: 100% !important;        /* Ocupa todo el alto disponible */
        max-width: 100% !important;     /* Anula cualquier max-width previo */
        max-height: 100% !important;    /* Anula cualquier max-height previo */
        border-radius: 0 !important;      /* Sin bordes redondeados para ocupar toda la pantalla */
        top: 0 !important;                /* Asegurar que empieza arriba */
        left: 0 !important;               /* Asegurar que empieza a la izquierda */
        transform: none !important;       /* Anular cualquier transformación que lo mueva */
        margin: 0 !important;             /* Sin márgenes */
        box-shadow: none !important;      /* Opcional: quitar sombra si ocupa toda la pantalla */
        overflow-y: auto;               /* Mantener scroll vertical si el contenido es largo */
    }
    .hey-promo-popup-modal {
        padding: 0 !important; /* Quitar padding del modal principal para que el wrapper se pegue a los bordes */
    }
    .hey-promo-popup-header {
        padding: 15px 15px 10px; /* Ajustar padding si es necesario */
        border-radius: 0; /* Si el wrapper no tiene, el header tampoco */
    }
    .hey-promo-popup-logo {
        max-width: 110px; /* Ajustar si es necesario */
    }
    .hey-promo-popup-body {
        padding: 15px; /* Ajustar padding */
    }
    .hey-promo-popup-title {
        font-size: 1.4em; /* Un poco más pequeño si es full screen */
    }
    .hey-promo-popup-description {
        font-size: 0.9em;
    }
    .hey-promo-popup-highlight-bar {
        font-size: 0.95em;
        padding: 10px 12px;
        margin: 15px 0;
        border-radius: 0; /* Opcional: quitar bordes redondeados a la barra también */
    }
    .hey-promo-popup-steps-title, .hey-promo-popup-gifts-title {
        font-size: 1.1em;
    }
    ul.hey-promo-popup-steps-list li {
        font-size: 0.85em;
    }
    .hey-promo-popup-body .hey-promo-popup-gifts-list {
        grid-template-columns: 1fr; /* Por defecto 1 columna en móvil */
        gap: 10px;
    }
    .hey-promo-popup-body .hey-promo-popup-gift-item {
        flex-direction: row; /* Elementos en fila en móvil para el popup */
        justify-content: space-between; /* Texto a la izq, logo a la der */
        align-items: center;
        padding: 12px 15px;
        min-height: auto; /* Altura automática en móvil */
        text-align: left; /* Texto alineado a la izquierda */
        border-radius: 6px;
    }
    .hey-promo-popup-gift-item img { max-height: 24px; }
    .hey-promo-popup-legal-text { font-size: 0.7em; }
    
    .hey-promo-popup-scroll-to-form-container {
        margin-top: 15px;
        margin-bottom: 20px;
    }
    .hey-promo-popup-scroll-button {
        padding: 9px 20px;
        font-size: 0.95em;
        width: 100%; /* Opcional: hacer que ocupe todo el ancho en móvil */
        box-sizing: border-box;
    }
    .hey-promo-popup-form-title {
        font-size: 1.1em;
        margin-bottom: 12px;
        margin-top: 20px;
    }
    .hey-promo-popup-close {
        top: 8px; /* Ajustar para que quede bien en el borde */
        right: 8px;
        /* Puedes cambiar el color si el fondo del header cambia */
        /* color: #fff; background-color: rgba(0,0,0,0.5); */
    }
}

@media (max-width: 400px) { /* Móviles más pequeños, forzar 1 o 2 columnas */
    .hey-promo-gifts-grid {
         /* Para asegurar 2 columnas bien espaciadas o 1 si es muy estrecho */
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}



/* ==============================================================
   ESTILOS PARA BLOQUE DE PROMOCIÓN INYECTADO EN PRODUCT COLLECTION
   ============================================================== */

li.wc-block-product.hey-promo-block-injected {
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #dbdbdb !important; /* Borde similar a las otras tarjetas */
    box-shadow: 1px 5px 12px -1px rgb(165 165 165 / 47%) !important; /* Sombra similar */
    background-color: transparent !important; /* El fondo lo dará el bloque interno */
    display: flex; /* Asegurar que el LI es flex */
    flex-direction: column; /* Su contenido se apilará verticalmente */
    height: 100%; /* Para que ocupe la altura de la fila del grid */
    border-radius: 8px; /* Mismo borde redondeado que los productos */
    overflow: hidden; /* Para que el contenido interno respete el borde redondeado */
}

/* Contenedor del bloque de promo DENTRO del LI */
li.wc-block-product.hey-promo-block-injected .wp-block-heyrenting-promo-regalos {
    height: 100%;
    display: flex;
    flex-direction: column; /* El contenido interno del bloque de promo también será vertical */
    margin: 0;
    border-radius: 0; /* Ya no necesita su propio borde redondeado si el LI lo tiene */
    overflow: hidden; /* Para controlar el contenido interno */
    /* El fondo degradado/color ya lo tiene el .hey-promo-regalos-container */
}

/* El .hey-promo-regalos-container dentro del LI inyectado */
li.wc-block-product.hey-promo-block-injected .hey-promo-regalos-container {
    padding: 20px 15px; /* Padding interno ajustado para la tarjeta */
    flex-grow: 1; /* Permitir que crezca para llenar el LI */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribuir espacio entre las dos "columnas" internas */
    height: 100%;
    gap: 10px; /* Reducir el gap interno para un look más compacto */
    border-radius: 0; /* Hereda del LI */
}

/* Columnas internas del bloque de promo cuando está inyectado */
li.wc-block-product.hey-promo-block-injected .hey-promo-col-left,
li.wc-block-product.hey-promo-block-injected .hey-promo-col-right {
    flex-basis: auto !important; /* Dejar que el contenido defina la altura inicial */
    width: 100% !important; /* Ocupan todo el ancho del contenedor padre */
    min-width: 0 !important;
    padding-right: 0 !important; /* Resetear padding derecho si lo tenía */
    text-align: center; /* Centrar contenido de ambas "columnas" */
}

li.wc-block-product.hey-promo-block-injected .hey-promo-col-left {
    /* No necesita mucho cambio, pero podemos ajustar márgenes */
    margin-bottom: 15px; /* Espacio antes de la sección de regalos */
}

li.wc-block-product.hey-promo-block-injected .hey-promo-logo {
    max-width: 130px; /* Ajusta el tamaño del logo */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

li.wc-block-product.hey-promo-block-injected .hey-promo-main-title {
    font-size: 1em;
    line-height: 2;
    margin-bottom: 3px;
    font-weight: 300;
}

li.wc-block-product.hey-promo-block-injected .hey-promo-highlight-text {
    font-size: 1.5em; /* Ajusta */
    line-height: 1.1;
    margin-bottom: 7px;
}

/* Grid de regalos dentro de la tarjeta inyectada */
li.wc-block-product.hey-promo-block-injected .hey-promo-gifts-grid {
    grid-template-columns: repeat(2, 1fr); /* Forzar 2 columnas para los regalos pequeños */
    gap: 8px; /* Espacio más pequeño entre los regalos */
    /* margin-top: auto; */ /* Empuja los regalos hacia abajo si hay espacio */
}

li.wc-block-product.hey-promo-block-injected .hey-promo-gift-item {
    padding: 10px 8px; /* Padding más pequeño para los items de regalo */
    min-height: auto; /* Altura automática para los items de regalo */
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

li.wc-block-product.hey-promo-block-injected .hey-gift-text {
    font-size: 0.75em; /* Texto de regalo más pequeño */
    margin-bottom: 6px;
}
li.wc-block-product.hey-promo-block-injected .hey-gift-text .hey-gift-brand {
    font-size: 16px; /* Ajustar tamaño de marca */
}

li.wc-block-product.hey-promo-block-injected .hey-gift-logo {
    max-height: 28px; /* Logos más pequeños */
    max-width: 70px;
}

/* Quitar efectos de hover que se aplican a las miniaturas de producto HEYrenting */
li.wc-block-product.hey-promo-block-injected .wp-block-heyrenting-promo-regalos:hover,
li.wc-block-product.hey-promo-block-injected:hover {
    transform: none !important;
    box-shadow: 1px 5px 12px -1px rgb(165 165 165 / 47%) !important; /* Mantener la misma sombra que los productos */
    border-color: #dbdbdb !important; /* Mantener el mismo borde */
}
/* Para el hover específico del contenido del bloque de promo (las tarjetas de regalo internas) */
li.wc-block-product.hey-promo-block-injected .hey-promo-gift-item:hover {
    transform: translateY(-2px); /* Efecto hover más sutil para los items internos */
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}


/* --- Visibilidad y no filtrado (se mantiene) --- */
li.wc-block-product.hey-promo-block-injected .heyrenting-product-thumbnail {
    display: none !important;
}
body.filtering-active ul.wc-block-product-template li.wc-block-product.hey-promo-block-injected,
.wc-block-product-collection.is-loading li.wc-block-product.hey-promo-block-injected {
     opacity: 1 !important;
}
li.wc-block-product.hey-promo-block-injected {
    position: relative;
    z-index: 1;
}

li.wc-block-product.hey-promo-block-injected .wp-block-heyrenting-promo-regalos.hey-promo-regalos-container {
    background: linear-gradient(to top, #52bf31 50%, #ffffff 100%) !important; /* TU NUEVO DEGRADADO */
}




/* ==============================================================
   ESTILOS PARA BLOQUE PROMO EN PÁGINA DE PRODUCTO
   ============================================================== */

/* Contenedor del bloque de promoción cuando está en la página de producto */
.single-product .hey-promo-on-product-page-wrapper {
    max-width: 1000px; /* Ancho máximo deseado en escritorio */
    margin-right: auto;
    margin-left: auto;
    margin-top: 40px; /* Espacio superior */
    margin-bottom: 40px; /* Espacio inferior */
}

/* Dentro de este wrapper, el bloque de promo ya debería ocupar el 100% del wrapper */
.single-product .hey-promo-on-product-page-wrapper .wp-block-heyrenting-promo-regalos.hey-promo-regalos-container {
    max-width: 100%; /* Asegurar que no exceda el wrapper */
    margin-left: 0;  /* Resetear márgenes si los tuviera para centrarse */
    margin-right: 0;
    margin-top: 1rem;
    /* El padding y border-radius ya los tiene por defecto el bloque */
}

/* Ajuste específico para el logo de HEYrenting DENTRO del bloque en la página de producto */
.single-product .hey-promo-on-product-page-wrapper .hey-promo-logo {
    max-width: 150px !important; /* Ajusta este valor según necesites */
    /* height: auto !important; */ /* Ya lo tiene, pero por si acaso */
}

/* Si la regla .woocommerce img está causando problemas con otros logos DENTRO
   de .hey-promo-gift-item cuando está en la página de producto, puedes ser más específico: */
.single-product .hey-promo-on-product-page-wrapper .hey-promo-gift-item .hey-gift-logo {
    /* Aquí podrías re-declarar max-height o lo que necesites para los logos de regalos
       si la regla general de .woocommerce img los está afectando negativamente.
       Pero los estilos que ya tienes para .hey-gift-logo deberían ser suficientes
       si son más específicos que ".woocommerce img". */
    max-height: 40px; /* Reafirmar el estilo si es necesario */
}

body.single-product .hey-promo-popup-modal[style*="display: flex"] .hey-promo-popup-logo {
    max-width: 120px !important; /* Un tamaño más pequeño, ajusta según necesites */
    /* Si necesitas forzar otros estilos, como márgenes, puedes hacerlo aquí también */
}


/* Ajustes responsivos para el wrapper en página de producto */
@media (max-width: 1024px) { /* Ajustar si tu límite de 1000px es para pantallas más pequeñas */
    .single-product .hey-promo-on-product-page-wrapper {
        max-width: 100%; /* O un porcentaje como 90% o 95% */
        padding-left: 15px; /* Añadir padding en pantallas más pequeñas para que no pegue a los bordes */
        padding-right: 15px;
        box-sizing: border-box;
    }
}



/* ==============================================================
   ESTILOS BADGE "MÁS VENDIDO" (GRADIENTE DE ESQUINA Y BORDE)
   ============================================================== */

/* Contenedor principal de la miniatura (asegurar overflow: hidden) */
.wc-block-product-template .wc-block-product .heyrenting-product-thumbnail {
    position: relative;
    overflow: hidden; /* Muy importante para que el gradiente no se desborde visiblemente */
}

/* Div que contendrá el gradiente */
.heyrenting-product-thumbnail .hey-bestseller-accent-bg {
    position: absolute;
    /* --- POSICIÓN DEL GRADIENTE ---
       Elige UNA esquina. Aquí hay ejemplos para las 4 esquinas.
       Descomenta el bloque de la esquina que prefieras y comenta los otros.
    */

    /* Ejemplo 1: Esquina Superior Izquierda */
    top: 0;
    left: 0;
    /*
    */

    /* Ejemplo 2: Esquina Superior Derecha */
    /*
    top: 0;
    right: 0;
    */

    /* Ejemplo 3: Esquina Inferior Izquierda */
    /*
    bottom: 0;
    left: 0;
    */

    /* Ejemplo 4: Esquina Inferior Derecha */
    /*
    bottom: 0;
    right: 0;
    */

    /* --- TAMAÑO DEL ÁREA DEL GRADIENTE --- */
    width: 250px;  /* Ancho del "círculo" del gradiente - AJUSTA ESTE VALOR */
    height: 250px; /* Alto del "círculo" del gradiente - AJUSTA ESTE VALOR */
                   /* (Debe ser igual al ancho para un efecto circular) */

    /* --- EL GRADIENTE RADIAL --- */
    background-image: radial-gradient(
        circle at top left,
        #52bf31 0%,
        rgba(82, 191, 49, 0.5) 40%,
        rgba(82, 191, 49, 0) 72%
    );
    
    /* Alternativa: un gradiente más pequeño y más denso en el centro */
    
    /*background-image: radial-gradient(
        circle at top left,
        #52bf31 0%,
        rgba(82, 191, 49, 0.6) 25%,
        rgba(82, 191, 49, 0) 55%
    );*/

    z-index: 0; /* Detrás del contenido de la tarjeta */
    pointer-events: none; /* Para que no interfiera con clics */
    
    /* Opcional: Efecto de entrada suave */
    opacity: 0;
    transform: scale(0.8); /* Inicia un poco más pequeño */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Mostrar y animar el gradiente cuando la tarjeta es bestseller */
.heyrenting-product-thumbnail.is-bestseller .hey-bestseller-accent-bg {
    opacity: 1; /* Opacidad final del gradiente */
    transform: scale(1);
}

/* Borde verde para la miniatura cuando es "Más Vendido" (SE MANTIENE IGUAL) */
.wc-block-product-template .wc-block-product .heyrenting-product-thumbnail.is-bestseller {
    border: 2px solid #52bf31 !important;
}

/* Ajustes para que el contenido esté por encima de la forma (SE MANTIENE IGUAL) */
.heyrenting-product-thumbnail .thumbnail-image-container,
.heyrenting-product-thumbnail .thumbnail-image,
.heyrenting-product-thumbnail .thumbnail-top,
.heyrenting-product-thumbnail .thumbnail-bottom {
    position: relative;
    z-index: 1;
}

.heyrenting-product-thumbnail .thumbnail-image {
    background-color: transparent !important;
}

/* Ajustes responsivos para el TAMAÑO del área del gradiente */
@media (max-width: 768px) {
    .heyrenting-product-thumbnail .hey-bestseller-accent-bg {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .heyrenting-product-thumbnail .hey-bestseller-accent-bg {
        width: 180px;
        height: 180px;
    }
}


img.card-distinction-badge[src$="etiqueta-c.webp"] {
    opacity: 0;
    visibility: hidden;
}

.seccion-frenado-emergencia {
  font-family: Arial, sans-serif;
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.contenedor-bloques-frenado {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.bloque-frenado {
  flex: 1 1 300px;
  padding: 20px;
  border-radius: 12px;
}

.bloque-con-abs {
  background-color: #ffffff;
  border: 1px solid #52bf31;
}

.titulo-con-abs {
  color: #53bf31;
  text-decoration: none;
  font-weight: bold;
}

.bloque-sin-abs {
  background-color: #fff0e6;
  border: 1px solid #ff7925;
}

.titulo-sin-abs {
  color: #ff7925;
  text-decoration: none;
  font-weight: bold;
}

.mensaje-final-frenado {
  margin-top: 20px;
  font-weight: bold;
}

/* Responsive: columna en pantallas pequeñas */
@media screen and (max-width: 768px) {
  .contenedor-bloques-frenado {
    flex-direction: column;
  }
}






/* 1. La sección principal */
.hey-related-products-v2 {
    padding: 60px 0;
    margin: 40px 0 -62px 0;
    background-color: #f8f9fa;
    clear: both;
}

/* 2. Contenedor interno que centra el contenido */
.hey-related-products-v2 .inside-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* 3. Título de la sección */
.hey-related-products-v2__title {
    text-align: center;
    font-size: 28px;
    margin-bottom: 40px;
    font-weight: 600;
}

/* 4. Nuestro propio grid */
.hey-related-products-v2__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas en escritorio */
    gap: 30px; /* Espacio entre productos */
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 5. Cada item del grid (ya no depende de .product) */
.hey-related-products-v2 .hey-related-product-item {
    position: relative;
    isolation: isolate; /* ¡Esta es la propiedad clave! */
    z-index: 1;         /* Refuerza el nuevo contexto de apilamiento */
    border-radius: 12px;
    overflow: hidden; 
}

.hey-related-product-item .heyrenting-product-thumbnail {
    z-index: auto; /* Dejamos que el padre (.hey-related-product-item) controle el apilamiento */
}


/* --- Responsive Media Queries --- */

@media (max-width: 1024px) {
    /* En tablets, 2 columnas */
    .hey-related-products-v2__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hey-related-products-v2 {
        padding: 60px 15px 100px 15px;
    }
    .hey-related-products-v2 .inside-container {
        padding-left: 0;
        padding-right: 0;
    }
    .hey-related-products-v2__title {
        font-size: 24px;
        margin-bottom: 30px;
    }
    /* En móviles, 1 columna */
    .hey-related-products-v2__grid {
        grid-template-columns: 1fr;
    }
}





/* --- Estilos para Widget de Artículos Relacionados HEYrenting (Estilo Tarjeta) --- */

/* Contenedor principal del widget */
.widget_heyrenting_related_posts_widget ul.heyrenting-related-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Usamos flexbox para gestionar los items */
    flex-direction: column; /* Apilamos los items verticalmente */
    gap: 12px; /* Espacio entre las tarjetas */
}

/* Elemento de la lista (<li>) - Ahora es solo un contenedor */
.widget_heyrenting_related_posts_widget li.related-post-item {
    margin: 0;
    padding: 0;
    border: none; /* Quitamos el borde inferior que teníamos antes */
    display: block; /* Aseguramos que el li ocupe todo el ancho */
}

/* El enlace (<a>) - ¡Esta es la clave! Lo convertimos en la tarjeta */
.widget_heyrenting_related_posts_widget li.related-post-item a {
    display: flex; /* Hacemos que el contenido interno (imagen y texto) se alinee */
    align-items: center; /* Centramos verticalmente el contenido */
    gap: 15px; /* Espacio entre la imagen y el texto */
    text-decoration: none;
    color: #333;
    
    /* --- Estilos de la tarjeta --- */
    background-color: #f8f9fa; /* Fondo gris claro */
    border: 1px solid #e9ecef; /* Borde sutil */
    border-radius: 8px; /* Bordes redondeados */
    padding: 12px; /* Relleno interno */
    width: 100%; /* Ocupa todo el ancho disponible */
    box-sizing: border-box; /* Asegura que el padding no añada ancho extra */
    transition: all 0.2s ease-in-out; /* Transición suave para hover */
}

/* Efecto Hover en la tarjeta (enlace) */
.widget_heyrenting_related_posts_widget li.related-post-item a:hover {
    color: #52bf31; /* Cambia el color del texto */
    border-color: #52bf31; /* Cambia el color del borde */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Añade una sombra sutil */
    transform: translateY(-2px); /* Eleva ligeramente la tarjeta */
}

/* Contenedor de la imagen */
.widget_heyrenting_related_posts_widget .related-post-thumbnail {
    flex-shrink: 0;
    width: 65px; /* Un poco más pequeño para dar más espacio al texto */
    height: 65px;
}

/* Imagen en sí */
.widget_heyrenting_related_posts_widget .related-post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px; /* Bordes redondeados para la imagen también */
    display: block;
}

/* Título del post relacionado */
.widget_heyrenting_related_posts_widget .related-post-title {
    font-weight: 600;
    line-height: 1.4;
    font-size: 15px;
    margin: 0; /* Aseguramos que no tenga márgenes extra */
}

.widget_heyrenting_related_posts_widget .widgettitle {
    font-size: var(--h2-font-size, 2em); /* Usa la variable de GeneratePress para el tamaño de h2 */
    line-height: var(--h2-line-height, 1.2); /* Usa la variable para la altura de línea */
    margin-bottom: 1em; /* Margen inferior típico para títulos de widget */
    text-transform: var(--h2-text-transform, none); /* Transformación de texto si la hay */
}


/*
 * --- Centrar la paginación del catálogo de productos (Versión Corregida) ---
 */
.paginacion-catalogo.wp-block-query-pagination {
    width: 100%;
    margin-top: 2em;
    margin-bottom: 2em;
    
    /* --- ESTA ES LA PARTE CORREGIDA --- */
    /* Aplicamos flexbox directamente al <nav> para alinear sus hijos (los enlaces y spans) */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Espacio entre cada elemento de la paginación */
}

/* 
 * Estilos para los enlaces y el número actual dentro de la paginación.
 * Esto es opcional pero mejora la apariencia.
*/
.paginacion-catalogo .page-numbers {
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

/* Estilo para los enlaces al pasar el ratón */
.paginacion-catalogo a.page-numbers:hover {
    border-color: #ddd;
    background-color: #f5f5f5;
}

/* Estilo para el número de página actual */
.paginacion-catalogo .page-numbers.current {
    background-color: #52bf31; /* Tu color verde corporativo */
    color: #ffffff;
    font-weight: bold;
    border-color: #52bf31;
}








/* ==============================================================
   AJUSTE RESPONSIVE "HEY ICON LIST" V2 - LAYOUT CON CSS GRID
   ============================================================== */

@media (max-width: 767px) {
    /* 1. Convertimos el <li> en un contenedor Grid */
    .wp-block-heyrenting-icon-list li.hey-icon-list-item {
        display: grid;
        /* Definimos 2 columnas: una para el icono, otra para el texto */
        grid-template-columns: auto 1fr;
        /* Definimos 2 filas: una para el título, otra para la descripción */
        grid-template-rows: auto auto;
        /* Nombramos las áreas del grid para posicionar los elementos */
        grid-template-areas:
            "icon title"
            "desc desc";
        /* Espaciado */
        column-gap: 15px; /* Espacio entre el icono y el título */
        row-gap: 10px;    /* Espacio entre la fila del título y la de la descripción */
        align-items: start; /* Alinear los items al inicio de su celda */
    }

    /* 2. Hacemos que el contenedor de contenido "desaparezca" para el layout,
       promoviendo a sus hijos (título y descripción) a ser items del grid. */
    .wp-block-heyrenting-icon-list li.hey-icon-list-item .hey-icon-list-content {
        display: contents;
    }

    /* 3. Posicionamos cada elemento en su área designada */
    .wp-block-heyrenting-icon-list li.hey-icon-list-item .hey-icon-list-icon-wrapper {
        grid-area: icon;
        /* Alinear el propio icono en el centro de su celda (verticalmente) */
        align-self: center;
    }

    .wp-block-heyrenting-icon-list li.hey-icon-list-item .hey-icon-list-item-title {
        grid-area: title;
    }

    .wp-block-heyrenting-icon-list li.hey-icon-list-item .hey-icon-list-item-description {
        grid-area: desc;
    }
}


/* ==============================================================
   ESTILOS BOTÓN LIMPIAR TODOS LOS FILTROS - HEYRENTING
   ============================================================== */

.widget_heyrenting_clear_filters_widget {
    /* Opcional: añadir un borde superior para separarlo del filtro de arriba */
    border-top: 1px solid #e0e0e0;
    padding-top: 20px;
    margin-top: 20px;
}

.heyrenting-clear-all-filters-button {
    display: block; /* Ocupa todo el ancho disponible */
    width: 100%;
    text-align: center;
    padding: 10px 15px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;

    /* Estilo por defecto (rojo/naranja para "acción destructiva") */
    background-color: #fff0e6; /* Fondo naranja muy pálido */
    color: #ff7925; /* Texto naranja */
    border: 1px solid #ff7925; /* Borde naranja */
}

.heyrenting-clear-all-filters-button:hover,
.heyrenting-clear-all-filters-button:focus {
    background-color: #ff7925; /* Fondo naranja sólido */
    color: #ffffff; /* Texto blanco */
    box-shadow: 0 2px 8px rgba(255, 121, 37, 0.3);
    outline: none;
}

.heyrenting-clear-all-filters-button:active {
    transform: translateY(1px);
    box-shadow: none;
}







/* ==============================================================
   ESTILOS INSIGNIA "MÁS VENDIDO" - V7 (Layout Flexbox en Móvil)
   ============================================================== */

/* --- A. Estilos base y de ESCRITORIO --- */

.vehicle-header-container {
    position: relative;
}

.hey-bestseller-badge-hero {
    /* Por defecto, la insignia está posicionada absolutamente para escritorio */
    position: absolute;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
}
.hey-bestseller-badge-hero::before {
    content: '\2605'; line-height: 1; display: block;
}
.hey-bestseller-badge-hero .badge-text {
    line-height: 1.2;
}

@media (min-width: 769px) {
    .hey-bestseller-badge-hero {
        top: 20px;
        right: 20px;
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffc107, #ff9800);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(255, 255, 255, 0.5);
        border: 2px solid #ffffff;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }
    .hey-bestseller-badge-hero::before {
        font-size: 24px;
        margin-bottom: 5px;
    }
    .hey-bestseller-badge-hero .badge-text {
        font-size: 12px;
        letter-spacing: 1px;
    }
    /* El contenedor flex de móvil no debe tener estilos en escritorio */
    .vehicle-mobile-header-row {
        position: static;
    }
}


/* --- B. ESTILOS PARA MÓVIL (max-width: 768px) --- */
@media (max-width: 768px) {
    /* 1. Posicionamos el nuevo contenedor flex */
    .vehicle-mobile-header-row {
        position: absolute;
        top: 75px; /* Misma altura que tenía el título */
        left: 15px;
        right: 15px;
        z-index: 3;
        
        /* La magia de Flexbox */
        display: flex;
        justify-content: space-between; /* Empuja los hijos a los extremos */
        align-items: center;           /* Los alinea verticalmente */
        gap: 15px;                     /* Espacio entre ellos */
    }

    /* 2. Reseteamos el posicionamiento del título, ahora es un item flex */
    .vehicle-mobile-header-row .vehicle-title-overlay {
        position: static; /* Ya no necesita ser absoluto */
        padding: 0;
        text-align: left;
        flex-grow: 1; /* Permite que ocupe el espacio disponible */
    }
    
    /* 3. Reseteamos el posicionamiento de la insignia, ahora es un item flex */
    .hey-bestseller-badge-hero {
        position: static; /* Ya no necesita ser absoluto */
        flex-shrink: 0;   /* Evita que se encoja */
        
        /* Mantenemos el estilo visual pero ajustado para móvil */
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: linear-gradient(145deg, #ffc107, #ff9800);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.4);
        border: 1px solid #ffffff;
    }

    .hey-bestseller-badge-hero::before {
        font-size: 18px;
        margin-bottom: 4px;
    }
    .hey-bestseller-badge-hero .badge-text {
        font-size: 10px;
        letter-spacing: 0.5px;
    }
}







/* ==============================================================
   ESTILOS BADGE "PRECIO ESTRELLA" (GRADIENTE DE ESQUINA)
   ============================================================== */

/* Div que contendrá el gradiente morado */
.heyrenting-product-thumbnail .hey-star-price-accent-bg {
    position: absolute;
    /* Posición en la esquina SUPERIOR DERECHA */
    top: 0;
    right: 0;
    
    width: 250px;
    height: 250px;
    
    /* Gradiente radial morado, anclado a 'top right' */
    background-image: radial-gradient(
        circle at top right,
        #B231BF 0%, /* Tu color morado */
        rgba(178, 49, 191, 0.5) 40%, /* Mismo color con 50% de opacidad */
        rgba(178, 49, 191, 0) 72%  /* Transparente al final */
    );
    
    z-index: 0;
    pointer-events: none;
    
    /* Misma animación de entrada que el de "Más Vendido" */
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

/* Mostrar y animar el gradiente cuando la tarjeta es "Precio Estrella" */
.heyrenting-product-thumbnail.is-star-price .hey-star-price-accent-bg {
    opacity: 1;
    transform: scale(1);
}

/* Opcional: Añadir un borde morado a la tarjeta si es "Precio Estrella" */
/* Puedes combinarlo con el verde si un producto tiene ambas marcas */
.wc-block-product-template .wc-block-product .heyrenting-product-thumbnail.is-star-price {
    border: 2px solid #B231BF !important;
}

/* Si un producto es AMBAS COSAS (Más Vendido Y Precio Estrella), podemos usar un borde degradado */
.wc-block-product-template .wc-block-product .heyrenting-product-thumbnail.is-bestseller.is-star-price {
    border: 2px solid transparent !important;
    background-image: linear-gradient(white, white), linear-gradient(to right, #52bf31, #B231BF);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

/* Ajustes responsivos para el tamaño del gradiente */
@media (max-width: 768px) {
    .heyrenting-product-thumbnail .hey-star-price-accent-bg {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 480px) {
    .heyrenting-product-thumbnail .hey-star-price-accent-bg {
        width: 180px;
        height: 180px;
    }
}








/* ==============================================================
   ESTILOS POPUP NEWSLETTER ENCICLOPEDIA - DISEÑO FINAL
   ============================================================== */

/* --- Contenedor Principal y Overlay --- */
.hey-encyclopedia-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10020;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s 0.3s linear;
}

.hey-encyclopedia-popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s, 0s;
}

.hey-encyclopedia-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Overlay oscuro semi-transparente */
    backdrop-filter: blur(3px);
}

/* --- Ventana del Popup --- */
.hey-encyclopedia-popup-content-wrapper {
    position: relative;
    background-color: #1E2B20;
    color: #ffffff;
    border-radius: 12px;
    padding: 0; /* Sin padding, las columnas lo manejan */
    width: 100%;
    max-width: 800px; /* Ancho aumentado para dos columnas */
    text-align: center;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    display: flex; /* LAYOUT DE DOS COLUMNAS */
    overflow: hidden; /* Muy importante para los bordes redondeados */
}

/* --- Columna del Banner (Izquierda) --- */
.hey-encyclopedia-popup-banner {
    flex: 0 0 40%; /* Ocupa el 40% del ancho y no se encoge */
    display: block;
}
.hey-encyclopedia-popup-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre todo el espacio de su contenedor */
}

/* --- Columna del Contenido (Derecha) --- */
.hey-encyclopedia-popup-main-content {
    flex: 1 1 60%; /* Ocupa el espacio restante */
    padding: 45px 35px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Botón de Cierre (X) --- */
.hey-encyclopedia-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: #cccccc; /* Un gris claro para la X */
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
    opacity: 0.8;
}
.hey-encyclopedia-popup-close:hover {
    color: #ffffff;
    transform: scale(1.1);
    opacity: 1;
    background-color: transparent;
}

/* --- Textos del Popup --- */
.hey-encyclopedia-popup-title {
    font-size: 30px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.hey-encyclopedia-popup-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0; /* Un blanco ligeramente más tenue */
    margin-bottom: 30px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* --- Formulario Contact Form 7 --- */
.hey-encyclopedia-popup-form .wpcf7-form {
    margin-top: 0;
}
.hey-encyclopedia-popup-form .wpcf7-form p {
    margin-bottom: 10px;
    font-size: 13px;
    text-align: left;
}

/* Input de Email */
.hey-encyclopedia-popup-form input[type="email"] {
    background-color: #ffffff;
    color: #222222;
    border-radius: 8px; /* Bordes más redondeados */
    padding: 14px 16px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}
.hey-encyclopedia-popup-form input[type="email"]::placeholder {
    color: #A8A8A8; /* Placeholder en gris claro */
}
.hey-encyclopedia-popup-form input[type="email"]:focus {
    border-color: #77D153; /* Borde verde brillante al hacer foco */
    outline: none;
}

.hey-acceptance-paragraph {
    margin-top: 15px;
}

/* Checkbox de Aceptación */
.hey-encyclopedia-popup-form .wpcf7-form-control-wrap.acceptance_renting {
    display: block;
    border: 1px solid #6c7a6f; /* Mismo borde que el input */
    padding: 12px 15px;
    border-radius: 8px; /* Mismos bordes redondeados */
    margin-top: 15px;
}

.hey-encyclopedia-popup-form .acceptance_renting .wpcf7-list-item-label {
    font-size: 14px;
    color: #e0e0e0;
    line-height: 1.5;
    text-align: left;
    display: flex;
    align-items: flex-start; /* Alinear arriba si el texto ocupa varias líneas */
}

/* Estilo del checkbox nativo */
.hey-encyclopedia-popup-form .acceptance_renting input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 3px 10px 0 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 1px solid #6c7a6f;
    border-radius: 0.25em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.hey-encyclopedia-popup-form .acceptance_renting input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em #77D153; /* Color del check */
    transform-origin: bottom left;
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.hey-encyclopedia-popup-form .acceptance_renting input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.hey-encyclopedia-popup-form .acceptance_renting a {
    color: #77D153; /* << Verde brillante para el enlace */
    text-decoration: underline;
    font-weight: 500;
}
.hey-encyclopedia-popup-form .acceptance_renting a:hover {
    text-decoration: none;
}

/* Botón de Envío */
.hey-encyclopedia-popup-form .wpcf7-submit {
    background-color: #52bf31;
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    padding: 14px 20px;
    width: 100%;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.15s;
}
.hey-encyclopedia-popup-form .wpcf7-submit:hover {
    background-color: #52bf31;
    transition: 0.15s;
    transform: scale(1.02);
    color: #ffffff;
}

/* --- Responsive --- */
@media(max-width: 600px) {
    .hey-encyclopedia-popup-content-wrapper {
        padding: 40px 20px;
    }
    .hey-encyclopedia-popup-title {
        font-size: 32px;
        text-align: left;
    }
    .hey-encyclopedia-popup-subtitle {
        font-size: 16px;
        text-align: left;
        max-width: 100%;
    }
    .hey-encyclopedia-popup-close {
        top: 5px;
    }
}

.popup-banner-mobile {
    display: none; /* Oculta por defecto */
}
.popup-banner-desktop {
    display: block; /* Muestra por defecto */
}

/* --- RESPONSIVE: MÓVIL (Layout Apilado) --- */
@media(max-width: 768px) {
    .hey-encyclopedia-popup-content-wrapper {
        flex-direction: column; /* Apilar banner y contenido */
        max-width: 400px; /* Ancho de popup para móvil */
        max-height: 90vh; /* Para que no se salga de la pantalla */
        overflow-y: auto; /* Permitir scroll si el contenido es largo */
    }

    .hey-encyclopedia-popup-banner {
        flex-basis: auto;
        order: 1;
        width: 100%;
    }
    

    .hey-encyclopedia-popup-main-content {
        order: 2;
        padding: 0 5px;
        padding-bottom: 10px;
        padding-top: 30px;
    }
    
    .popup-banner-mobile {
        display: block; /* Muestra en móvil */
        border-radius: 12px;
    }
    .popup-banner-desktop {
        display: none; /* Oculta en móvil */
    }
}