.elementor-264 .elementor-element.elementor-element-e1db5c8{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-264 .elementor-element.elementor-element-3fa9497{width:100%;max-width:100%;}/* Start custom CSS for html, class: .elementor-element-3fa9497 */:root {
    --naranja: #F6A24E;
    --negro: #010101;
    --crema: #F9F0E7;
    --blanco: #FFFFFF;
}

/* Base y Tipografía */
.catalogo-pro-container { width: 100%; background: var(--blanco); font-family: 'Poppins', sans-serif; }

/* Header */
.cat-intro { text-align: center; padding: 100px 20px 60px 20px; background: var(--crema); display: flex; flex-direction: column; align-items: center; }
.cat-main-title { font-family: 'Cinzel', serif; font-size: 42px; text-transform: uppercase; color: var(--negro); max-width: 900px; line-height: 1.1; margin-bottom: 20px; }
.cat-main-title span { color: var(--naranja); }
.cat-description { color: #555; font-size: 17px; line-height: 1.6; max-width: 700px; }

/* Layout Galería */
.cat-layout { display: flex; width: 100%; max-width: 1400px; margin: 0 auto; }
.cat-sidebar { width: 30%; padding: 40px; border-right: 1px solid #eee; }
.sticky-menu { position: sticky; top: 40px; }
.menu-title { font-family: 'Cinzel', serif; margin-bottom: 25px; font-size: 18px; font-weight: 700; color: var(--negro); }

/* Filtros - Corrección de color en estados de clic */
.nav-link { 
    display: block; 
    width: 100%; 
    text-align: left; 
    padding: 16px 20px; 
    margin-bottom: 8px;
    border: none; 
    background: #ffffff; 
    color: #444; 
    font-weight: 600; 
    font-size: 12px; 
    text-transform: uppercase; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    border-radius: 4px;
    outline: none !important; /* Quita el borde azul/rojo de enfoque */
}

/* Forzamos que el único color de resaltado sea el naranja */
.nav-link.active, 
.nav-link:active, 
.nav-link:focus { 
    background: var(--naranja) !important; 
    color: #fff !important; 
    box-shadow: none !important;
}

.nav-link:hover:not(.active) {
    background: #fdf2e9; /* Un naranja muy suave para el hover cuando no está activo */
    color: var(--naranja);
}

/* Galería Grid */
.cat-main-gallery { width: 100%; padding: 40px; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }

/* CAMBIO 1: Tarjetas más altas (Incrementado a 300px para lucir mejor los ladrillos) */
.item-card { 
    position: relative; 
    height: 250px; 
    cursor: pointer; 
    overflow: hidden; 
    border-radius: 8px; 
    background: transparent; 
    transition: 0.3s ease; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.item-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }

.item-card img { 
    width: auto; 
    height: auto; 
    object-fit: cover; 
    transition: 0.6s ease; 
}

.item-label { position: absolute; bottom: 0; left: 0; right: 0; background: var(--naranja); padding: 12px; text-align: center; }
.item-label span { color: #fff; font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; }

/* MODAL: DISEÑO SMARTPHONE */
/* --- ESTILOS DEL MODAL (LADRILLERA RIERA) --- */

.modal-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.9); 
    display: none; 
    z-index: 99999; 
    justify-content: center; 
    align-items: center; 
    backdrop-filter: blur(8px);
}

.modal-content { 
    width: 95%; 
    max-width: 800px; /* Ancho ideal para lucir la proporción 1920x1080 en pantallas grandes */
    background: #fff; 
    border-radius: 20px; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
    position: relative;
    max-height: 95vh; 
    overflow-y: auto;
    animation: slideUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.modal-body { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
}

/* Área de Imagen con proporción 1920x1080 */
.modal-image-side { 
    width: 100%; 
    aspect-ratio: 1920 / 1080; /* Proporción exacta solicitada */
    background: #fdfdfd; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0; 
    border-bottom: 1px solid #eee;
    overflow: hidden;
}
/* Estilos para los círculos de variantes */
.color-dot:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Ajuste del contenedor de la lista */
#variantes-list {
    padding: 5px 0;
    min-height: 40px;
}

.modal-image-side img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; /* La imagen llena todo el recuadro 1920x1080 */
    display: block;
}

/* Área de Información */
.modal-info-side { 
    width: 100%; 
    padding: 35px; 
    box-sizing: border-box; 
}

.modal-info-side h2 { 
    font-family: 'Cinzel', serif; 
    font-size: 26px; 
    margin-bottom: 15px; 
    color: var(--negro);
    border-bottom: 2px solid var(--naranja); 
    padding-bottom: 5px; 
}

.modal-specs p { 
    font-size: 16px; 
    color: #555; 
    line-height: 1.6; 
}

/* Sección de Variantes en texto */
#modal-variaciones-wrapper { 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 1px dotted #ccc; 
}

.variantes-info { 
    font-size: 14px; 
    color: #444; 
}

/* Botón de WhatsApp */
.btn-cta-wa { 
    display: block; 
    background: #25D366; 
    color: #fff; 
    padding: 18px; 
    text-align: center; 
    text-decoration: none; 
    border-radius: 8px; 
    font-weight: 700; 
    margin-top: 25px; 
    transition: 0.3s ease; 
}

.btn-cta-wa:hover { 
    background: #128c7e; 
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.btn-back-text { 
    display: block; 
    text-align: center; 
    margin-top: 20px; 
    color: #bbb; 
    font-size: 13px; 
    cursor: pointer; 
    text-decoration: underline; 
}

/* --- X DE CIERRE: CERO ROJO --- */
.modal-close { 
    position: absolute; 
    top: 15px; 
    right: 20px; 
    font-size: 40px; 
    border: none !important; 
    background: transparent !important; 
    cursor: pointer; 
    color: var(--negro); 
    z-index: 110; 
    outline: none !important; 
    transition: 0.3s ease;
    line-height: 1;
}

.modal-close:hover, 
.modal-close:active, 
.modal-close:focus { 
    color: var(--naranja) !important; /* Solo Naranja */
    transform: rotate(90deg); 
    background: transparent !important;
}

/* Animación de entrada */
@keyframes slideUp { 
    from { transform: translateY(40px); opacity: 0; } 
    to { transform: translateY(0); opacity: 1; } 
}

/* Ajustes para Móvil */
@media (max-width: 600px) {
    .modal-content { 
        width: 100%; 
        height: 100%; 
        max-height: 100vh; 
        border-radius: 0; 
    }
    .modal-info-side { padding: 25px; }
}

/* Animaciones */
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 900px) {
    .cat-layout { flex-direction: column; }
    .cat-sidebar { width: 100%; border-right: none; padding: 20px; }
    .cat-nav { display: flex; overflow-x: auto; gap: 10px; }
    .cat-main-gallery { width: 100%; padding: 20px; }
    .modal-content { max-width: 100%; width: 100%; height: 100%; border-radius: 0; max-height: 100vh; }
}/* End custom CSS */