/* ========================================================================== VARIABLES Y CONFIGURACIÓN GLOBAL ========================================================================== */ :root { /* Colores */ --color-primary: #F5333F; --color-primary-rgb: 245, 51, 63; --color-white: #fff; --color-black: #333; --color-gray-light: #f8f9fa; --color-gray-medium: #999; --color-gray-dark: #666; /* Espaciados */ --grid-column-gap-projects: 80px; --grid-row-gap-projects: 100px; --padding-button: 10px 12px 7px 12px; --border-radius-pill: 999px; --border-radius-standard: 8px; /* Transiciones */ --transition-standard: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-long: all 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* Dimensiones */ --max-grid-width: 1400px; /* Tamaños de proyectos e imágenes */ --gallery-item-width: 195px; --gallery-item-height: 255px; --project-item-max-width: 255px; --project-item-min-width: 180px; /* Sombras */ --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.05); --shadow-medium: 0 4px 15px rgba(0, 0, 0, 0.1); --shadow-strong: 0 8px 25px rgba(0, 0, 0, 0.15); /* Fuentes */ --font-family-base: "Helvetica Neue", sans-serif; --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-off-canvas-tittle: 22px; } /* ========================================================================== RESET PARA CONTENEDORES PRINCIPALES ========================================================================== */ .rw-loop-grid, .rw-loop-grid__main-content, .rw-custom-grid, .rw-loop-grid__bottom-controls, .rw-loop-grid__category-filters, .rw-loop-grid-categories, .rw-loop-grid-categorys-list-wrapper, .rw-loop-grid__tab-controls { box-sizing: border-box; margin: 0; padding: 0; border: none; background: transparent; background-color: transparent; background-image: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================================== LAYOUT Y GRID PRINCIPAL ========================================================================== */ /* Contenedor principal */ .rw-loop-grid { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } /* Contenido principal */ .rw-loop-grid__main-content { position: relative; width: 100%; max-width: var(--max-grid-width); margin: 0 auto; padding-bottom: 140px; } /* Modo de carga de contenido */ .rw-loop-grid__main-content.tab-switching { pointer-events: none; transition: opacity 0.3s ease; } /* Grid personalizado - Base flexible */ .rw-custom-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-row-gap-projects) var(--grid-column-gap-projects); justify-content: center; align-items: start; width: 100%; max-width: var(--max-grid-width); margin: 0 auto; } .elementor-67 .elementor-element.elementor-element-4c02832 .rw-loop-grid__grid--wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 80px!important; justify-items: center!important; padding-left:104px !important; padding-right: 104px !important; } /* Grid wrapper optimizado */ .rw-loop-grid__grid--wrapper { display: flex; flex-wrap: wrap; gap: var(--grid-row-gap-projects) var(--grid-column-gap-projects); justify-content: flex-start; align-items: center; align-content: flex-start; width: 100%; max-width: var(--max-grid-width); margin: 0 auto; min-height: 600px; position: relative; } /* Ajuste: asegurar que en pantallas <=1280px la imagen y su wrapper ocupen 100% del ancho */ /* ========================================================================== COMPONENTES DE PROYECTO Y GALERÍA - BASE ========================================================================== */ /* Enlaces de proyectos */ .rw-custom-grid .project-item-link, .rw-loop-grid__grid--wrapper .project-item-link { width: 100%; max-width: none; min-width: auto; display: flex; flex-direction: column; align-items: center;; text-decoration: none; color: inherit; margin: 0; padding: 0; position: relative; } /* Items del grid (proyectos) - Configuración base */ .rw-custom-grid .project-item, .rw-loop-grid__grid--wrapper .project-item { width: 100%; height: auto; max-width: var(--project-item-max-width); min-width: var(--project-item-min-width); margin: 0; padding: 0; position: relative; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; /* Add smooth transition for positioning to avoid 'jumps' when grid recalculates */ transition: transform 0.3s ease-out, opacity 0.3s ease-out; } /* Items de galería - Configuración base */ .rw-custom-grid .gallery-item, .rw-loop-grid__grid--wrapper .gallery-item { position: relative; overflow: visible; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; perspective: 1400px; z-index: 1; transform-style: preserve-3d; transition: transform 0.3s ease; } .rw-custom-grid .gallery-item { height: 300px; width: 100%; } .rw-loop-grid__grid--wrapper .gallery-item { flex: 0 0 var(--gallery-item-width); width: var(--gallery-item-width); height: var(--gallery-item-height); } /* Estado hover galería */ .gallery-item:hover { z-index: 99999; transform: translateY(-5px); } /* ========================================================================== IMÁGENES DE PROYECTO ========================================================================== */ /* Imágenes de proyecto - Base */ .project-item .project-item__image, .project-item .tab-image { width: auto; height: auto; max-width: var(--project-item-max-width); max-height: 320px; min-width: var(--project-item-min-width); min-height: 120px; object-fit: cover; display: block; margin: 0 auto; position: relative; } /* Variaciones por proporción */ .project-item.landscape .project-item__image, .project-item.landscape .tab-image { max-width: var(--project-item-max-width); max-height: 170px; } .project-item.portrait .project-item__image, .project-item.portrait .tab-image { max-width: 200px; max-height: 280px; } .project-item.square .project-item__image, .project-item.square .tab-image { max-width: var(--project-item-max-width); max-height: var(--project-item-max-width); } /* Estados de las tab images */ .project-item .tab-image[data-tab="visual"]:not([style*="display"]) { display: block; position: relative; opacity: 1; z-index: 1; } .project-item .tab-image[data-tab="conceptual"]:not([style*="display"]), .project-item .tab-image[data-tab="technical"]:not([style*="display"]) { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 0; pointer-events: none; } .project-item .tab-image[style*="display: block"], .project-item .tab-image:not([style*="display: none"]) { position: relative; top: auto; left: auto; opacity: 1; z-index: 1; } /* Cross-fade overlay image used during tab switches */ .project-item { /* ensure positioning context for absolute overlays */ position: relative; } .project-item .tab-image-crossfade { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 600ms ease-in-out; } /* Borde rojo corporativo para la vista Technical */ /* Aplica tanto a las imágenes visibles como a los overlays usados en cross-fade, y también cuando hay filtros activos */ .project-item .tab-image[data-tab="technical"]:not([style*="display: none"]), .project-item .tab-image[style*="display: block"][data-tab="technical"], .project-item .tab-image[data-tab="technical"].tab-image-crossfade, .project-item .tab-image-crossfade[data-tab="technical"] { box-sizing: border-box; border: 1px solid #F5333F; /* borde rojo corporativo */ } /* Asegurar que durante la animación de entrada / crossfade el borde permanezca visible */ .project-item.entering .tab-image[data-tab="technical"], .project-item.entering .tab-image-crossfade[data-tab="technical"] { box-sizing: border-box; border: 1px solid #F5333F; } /* Cuando filtros están activos la estructura puede añadir clases; reforzamos la regla para los estados comunes donde las imágenes siguen siendo visibles */ .rw-loop-grid.filters-open .project-item .tab-image[data-tab="technical"]:not([style*="display: none"]), .rw-loop-grid.filters-open .project-item .tab-image-crossfade[data-tab="technical"] { box-sizing: border-box; border: 1px solid #F5333F; } /* When updating DOM we temporarily disable transitions to prevent duplicated fades */ .rw-no-transition .tab-image, .rw-no-transition .tab-image-crossfade { transition: none !important; } /* Smooth entry animation for new items to avoid positioning jumps */ .project-item.entering { opacity: 0; transform: translateY(10px); } .project-item.entering.show { opacity: 1; transform: translateY(0); } /* Ensure tab-image elements keep their space during display toggles to reduce reflow */ .project-item .tab-image[style*="display: none"] { /* keep dimensions while hidden to avoid reflow */ position: absolute; left: -9999px; visibility: hidden; opacity: 0; } .project-item .tab-image[style*="display: block"] { position: relative; left: auto; visibility: visible; opacity: 1; } .project-item .tab-image[style*="display: none"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 0; pointer-events: none; } /* ========================================================================== OVERLAYS DE PROYECTO ========================================================================== */ .project-item__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background-color: rgba(var(--color-primary-rgb), 0); opacity: 0; transition: opacity 0.3s ease, background-color 0.3s ease; z-index: 10; } .project-item:hover .project-item__overlay { opacity: 1; background-color: rgba(var(--color-primary-rgb), 1); } .project-item__content { padding: 10px; text-align: center; color: var(--color-white); opacity: 1; width: 100%; } .project-item__title { margin: 0 0 10px 0; font-size: var(--font-size-lg); font-weight: 600; color: var(--color-white); line-height: 1.2; } .project-item__meta { display: flex; justify-content: center; align-items: center; font-size: var(--font-size-sm); color: var(--color-white); line-height: 1.3; } /* ========================================================================== COMPONENTE: GALLERY ITEM - ESTRUCTURA 3D ========================================================================== */ /* 🎯 ESTRUCTURA 3D COMPLETA - TODOS LOS CONTEXTOS */ .gallery-card, .rw-loop-grid__grid--wrapper .gallery-card { position: relative; width: 100%; height: 100%; min-height: 220px; display: block; transform-style: preserve-3d; } /* 🎯 CAPAS CON PROPIEDADES 3D - TODOS LOS CONTEXTOS */ .gallery-card .card-layer, .rw-loop-grid__grid--wrapper .gallery-card .card-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-primary); background-repeat: no-repeat; background-size: cover; background-position: center; transform-style: preserve-3d; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: transform, opacity; transition: var(--transition-long); border-radius: 0; border: 1px solid white; } /* 🎯 POSICIONAMIENTO INICIAL - TODOS LOS CONTEXTOS */ .gallery-card .card-back-2, .rw-loop-grid__grid--wrapper .gallery-card .card-back-2 { z-index: 1; transform: translateZ(-30px) rotate(0deg) scale(0.987); opacity: 1; } .gallery-card .card-back-1, .rw-loop-grid__grid--wrapper .gallery-card .card-back-1 { z-index: 2; transform: translateZ(-15px) rotate(0deg) scale(0.994); opacity: 1; } .gallery-card .card-front, .rw-loop-grid__grid--wrapper .gallery-card .card-front { z-index: 3; transform: translateZ(0) rotate(0deg) scale(1); } /* 🎯 GALLERY ITEM HOVER BASE - SIN MOVIMIENTO VERTICAL */ .gallery-item:hover, .rw-loop-grid__grid--wrapper .gallery-item:hover { z-index: 999 !important; /* 🚫 Sin translateY - solo z-index */ } /* 🎯 EFECTOS HOVER 3D - TODOS LOS CONTEXTOS */ .gallery-item:hover .card-back-2, .rw-loop-grid__grid--wrapper .gallery-item:hover .card-back-2 { transform: translateZ(-60px) rotate(-8deg) scale(0.98) !important; opacity: 0.98 !important; } .gallery-item:hover .card-back-1, .rw-loop-grid__grid--wrapper .gallery-item:hover .card-back-1 { transform: translateZ(-30px) rotate(-4deg) scale(0.99) !important; opacity: 0.99 !important; } .gallery-item:hover .card-front, .rw-loop-grid__grid--wrapper .gallery-item:hover .card-front { transform: translateZ(0) rotate(0deg) scale(1) !important; } /* 🎯 CONTENIDO CENTRADO EN TARJETAS - TODOS LOS CONTEXTOS */ .gallery-card .gallery-content, .rw-loop-grid__grid--wrapper .gallery-card .gallery-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--color-white); z-index: 4; pointer-events: none; } /* 🎯 LÍNEAS DE TEXTO - TODOS LOS CONTEXTOS */ .gallery-line { display: inline-block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: inherit !important; line-height: 1 !important; word-break: break-word !important; } .project-item__overlay .meta-separator, .project-item__media .project-item__overlay .meta-separator { display: inline-block !important; width: auto !important; height: auto !important; padding: 0 !important; color: var(--color-white) !important; line-height: 1 !important; } .rw-loop-grid__grid--wrapper .gallery-line { width: 100%; display: block; word-break: break-word; } .gallery-line--title, .rw-loop-grid__grid--wrapper .gallery-line--title { font-size: var(--font-size-lg); font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500; margin-bottom: 6px; line-height: 1.1; } .gallery-line--meta, .rw-loop-grid__grid--wrapper .gallery-line--meta { font-size: var(--font-size-sm); font-weight: 500; opacity: 0.95; } /* 🎯 AJUSTES ESPECÍFICOS PARA GRID FILTRADO */ .rw-loop-grid__grid--wrapper .gallery-line--title { font-size: var(--font-size-md); margin-bottom: 4px; } .rw-loop-grid__grid--wrapper .gallery-line--meta { font-size: var(--font-size-xs); } /* 🎯 OVERRIDE CUALQUIER CONFLICTO DE TRANSFORM */ .rw-custom-grid .gallery-item:hover, .rw-loop-grid__grid--wrapper .gallery-item:hover { transform: none !important; z-index: 999 !important; } /* ========================================================================== BARRA DE CONTROLES INFERIOR ========================================================================== */ /* Contenedor sticky */ .rw-loop-grid__bottom-controls { position: sticky; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 36px 0px; z-index: 120; transition: transform 0.25s ease, opacity 0.25s ease; width:100%; } /* ========================================================================== FILTROS DE CATEGORÍAS - CON !important PARA SOBRESCRIBIR ESTILOS INLINE ========================================================================== */ .rw-loop-grid-categories { display: flex !important; flex-direction: row !important; /* 🎯 MANTENER HORIZONTAL */ flex-wrap: nowrap !important; align-items: center !important; width: 100% !important; margin: 0 !important; font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 12px; background: transparent !important; z-index:1000!important; } /* Lista de categorías - CON !important para forzar layout horizontal */ .rw-loop-grid-categorys-list-wrapper { display: flex !important; flex-direction: row !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; width: auto !important; max-width: 100% !important; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: transparent !important; background-color: transparent !important; will-change: contents !important; position: relative !important; } /* Botón de categoría - CON !important para evitar estilos inline */ .rw-loop-grid-category-list-button { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; padding: var(--padding-button) !important; border: 1px solid var(--color-primary) !important; border-radius: var(--border-radius-pill) !important; background-color: var(--color-white) !important; color: var(--color-primary) !important; font-size: var(--font-size-xs) !important; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500 !important; text-decoration: none !important; transition: var(--transition-standard) !important; white-space: nowrap !important; cursor: pointer !important; flex-shrink: 0 !important; flex-grow: 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; float: none !important; will-change: transform, opacity !important; } /* Estado hover/activo de categorías */ .rw-loop-grid-category-list-button:hover, .rw-loop-grid-category-list-button.selected { background-color: var(--color-primary) !important; color: var(--color-white) !important; border-color: var(--color-primary) !important; } /* Visibilidad controlada */ .rw-category-visible { display: inline-flex !important; opacity: 1 !important; transform: translateY(0) !important; } .rw-category-hidden { display: none !important; opacity: 0 !important; transform: translateY(-8px) !important; } .rw-categories-expanded .rw-category-hidden { display: inline-flex !important; transition: opacity 0.4s ease-out, transform 0.4s ease-out, background-color 0.3s ease, color 0.3s ease !important; } /* En mobile (≤420px), cuando se abre el panel de filtros, mostrar TODAS las categorías */ @media (max-width: 720px) { .rw-loop-grid.filters-open .rw-category-hidden { display: inline-flex !important; opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Ocultar los botones +/- en mobile (no se necesitan) */ .rw-loop-grid.filters-open .rw-categories-expand-btn, .rw-loop-grid.filters-open .rw-categories-collapse-btn { display: none !important; } } /* Botones expandir/contraer - TODOS con !important */ .rw-categories-expand-btn, .rw-categories-collapse-btn { align-items: center !important; justify-content: center !important; width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border: none !important; border-radius: 50% !important; background-color: transparent !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; color: transparent !important; font-size: 0 !important; line-height: 0 !important; cursor: pointer !important; transition: var(--transition-standard) !important; white-space: nowrap !important; flex-shrink: 0 !important; margin: 0 0 0 8px !important; outline: none !important; user-select: none !important; text-decoration: none !important; overflow: hidden !important; } /* Ocultar SVG interno (se usa background-image) */ .rw-categories-expand-btn svg, .rw-categories-collapse-btn svg, .rw-categories-expand-btn *, .rw-categories-collapse-btn * { display: none !important; } /* Estado normal - expandir */ .rw-categories-expand-btn { display: inline-flex !important; background-image: url("data:image/svg+xml;utf8,") !important; } /* Hover - expandir */ .rw-categories-expand-btn:hover { background-image: url("data:image/svg+xml;utf8,") !important; } /* Estado normal - contraer */ .rw-categories-collapse-btn { display: none !important; background-image: url("data:image/svg+xml;utf8,") !important; } /* Hover - contraer */ .rw-categories-collapse-btn:hover { background-image: url("data:image/svg+xml;utf8,") !important; } /* Visibilidad en estado expandido */ .rw-categories-expanded .rw-categories-expand-btn { display: none !important; } .rw-categories-expanded .rw-categories-collapse-btn { display: inline-flex !important; } /* Media query para móvil */ @media (max-width: 767px) { .rw-loop-grid-categorys-list-wrapper { justify-content: center !important; width: 100% !important; } .rw-loop-grid-category-list-button { padding: 13px 12px 10px !important; font-size: 11px !important; } .rw-categories-expand-btn, .rw-categories-collapse-btn { min-height: 32px !important; padding: 0 10px !important; } .rw-categories-expand-btn .expand-icon, .rw-categories-collapse-btn .collapse-icon { font-size: 18px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; line-height: 1 !important; } /* Asegurar que el SVG interno no provoque desplazamiento de línea */ .rw-categories-expand-btn .expand-icon svg, .rw-categories-collapse-btn .collapse-icon svg { display: block !important; width: 12px !important; height: 12px !important; } } /* ========================================================================== CONTROLES DE PESTAÑAS ========================================================================== */ /* Contenedor de controles */ .rw-loop-grid__tab-controls { display: flex; align-items: center; flex-shrink: 0; } /* Wrapper de botones */ .tabs-buttons { display: flex; gap: 0; align-items: center; justify-content: flex-end; } /* Botones de pestañas */ .tabs-buttons .tab-btn { padding: var(--padding-button) !important; border: 1px solid var(--color-primary) !important; background: var(--color-white) !important; background-color: var(--color-white) !important; color: var(--color-primary) !important; cursor: pointer; font-size: var(--font-size-xs) !important; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; display: inline-flex; align-items: center; gap: 8px; transition: var(--transition-standard); border-radius: var(--border-radius-pill) !important; outline: none; transform: scale(1); flex-shrink: 0; white-space: nowrap; } /* Estados hover/activo de pestañas */ .tabs-buttons .tab-btn:hover { background: var(--color-primary) !important; background-color: var(--color-primary) !important; color: var(--color-white) !important; border-color: var(--color-primary) !important; } .tabs-buttons .tab-btn.active { background: var(--color-primary) !important; background-color: var(--color-primary) !important; color: var(--color-white) !important; border-color: var(--color-primary) !important; } .tabs-buttons .tab-btn:not(.active) { background: var(--color-white) !important; background-color: var(--color-white) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; box-shadow: none; } /* Control de visibilidad inicial: Visual visible por defecto, resto oculto */ .tabs-buttons .tab-btn[data-tab="visual"] { display: inline-flex; } .tabs-buttons .tab-btn[data-tab="conceptual"], .tabs-buttons .tab-btn[data-tab="technical"] { display: none; } /* JavaScript puede sobreescribir con estilos inline */ .tabs-buttons .tab-btn[style*="display: none"] { display: none !important; } .tabs-buttons .tab-btn[style*="display: inline-flex"] { display: inline-flex !important; } /* Pseudo-elementos para los iconos de ojo */ .tabs-buttons .tab-btn[data-tab="visual"]::after, .tabs-buttons .tab-btn[data-tab="conceptual"]::after, .tabs-buttons .tab-btn[data-tab="technical"]::after { content: ""; display: inline-block; width: 22px; height: 14px; margin-left: 10px; background-repeat: no-repeat; background-size: 22px 14px; background-position: center center; vertical-align: middle; transform: translateY(-1px); background-image: url("data:image/svg+xml;utf8,"); } /* Cambiar SVG a blanco en hover */ .tabs-buttons .tab-btn:hover::after, .tabs-buttons .tab-btn.active::after { background-image: url("data:image/svg+xml;utf8,"); } /* ========================================================================== NUEVOS ESTILOS CON CLASES ÚNICAS - Botones de Vista ========================================================================== */ /* Wrapper de botones de vista */ .rw-view-tabs-wrapper { display: flex; gap: 0; align-items: center; justify-content: flex-end; } /* Botones de vista (Visual, Conceptual, Técnico) - Clases únicas sin conflictos */ .rw-view-tab-button { padding: var(--padding-button) !important; border: 1px solid var(--color-primary) !important; background-color: var(--color-white) !important; color: var(--color-primary) !important; cursor: pointer !important; font-size: var(--font-size-xs) !important; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: background-color 0.2s ease, color 0.2s ease !important; border-radius: var(--border-radius-pill) !important; outline: none !important; flex-shrink: 0 !important; white-space: nowrap !important; font-weight: 500 !important; text-decoration: none !important; } /* Estado activo de botones de vista */ .rw-view-tab-button.active { background-color: var(--color-white) !important; color: var(--color-primary) !important; border-color: var(--color-primary) !important; } /* Estados hover de botones de vista */ .rw-view-tab-button:hover { background-color: var(--color-primary) !important; color: var(--color-white) !important; border-color: var(--color-primary) !important; } /* Control de visibilidad inicial: Visual visible, resto oculto */ .rw-view-tab-button[data-tab="visual"] { display: inline-flex !important; } .rw-view-tab-button[data-tab="conceptual"], .rw-view-tab-button[data-tab="technical"] { display: none !important; } /* JavaScript puede sobreescribir con estilos inline */ .rw-view-tab-button[style*="display: none"] { display: none !important; } .rw-view-tab-button[style*="display: inline-flex"] { display: inline-flex !important; } /* Iconos de ojo para botones de vista */ .rw-view-tab-button[data-tab="visual"]::after, .rw-view-tab-button[data-tab="conceptual"]::after, .rw-view-tab-button[data-tab="technical"]::after { content: ""; display: inline-block; width: 22px; height: 14px; margin-left: 10px; background-repeat: no-repeat; background-size: 22px 14px; background-position: center center; vertical-align: middle; transform: translateY(-1px); background-image: url("data:image/svg+xml;utf8,"); } /* Cambiar SVG a blanco en hover y active */ .rw-view-tab-button:hover::after { background-image: url("data:image/svg+xml;utf8,"); } /* ========================================================================== BOTÓN CARGAR MÁS ========================================================================== */ .rw-loop-grid__load-more { padding: var(--padding-button); border-radius: var(--border-radius-pill); background-color: var(--color-white); } /* ========================================================================== OFFCANVAS Y LIGHTBOX ========================================================================== */ /* Base del offcanvas */ .rw-projects-offcanvas, .rw-offcanvas { position: fixed; inset: 0; width: 100%; height: 100vh; background-color: rgba(217, 217, 217, 1); z-index: 99999; overflow: hidden; /* El scroll va en el inner */ /* 🎯 ESTADO INICIAL - OCULTO ABAJO */ opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(100%); /* 🎯 TRANSICIÓN MODIFICADA - INCLUYE TRANSFORM */ transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.8s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); } /* 🎯 ESTADO ACTIVO - VISIBLE ARRIBA */ .rw-projects-offcanvas.active, .rw-offcanvas.active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } /* Inner - contenedor con scroll */ .rw-projects-offcanvas__inner { width: 100%; height: 100%; position: relative; overflow-y: auto; overflow-x: hidden; } /* Header del offcanvas - sticky dentro del inner */ .rw-offcanvas-header { position: sticky; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px 40px 40px; max-width: 1592px; margin: 0 auto; width: 100%; box-sizing: border-box; background-color: rgba(217, 217, 217, 1); z-index: 100; flex-shrink: 0; } .rw-offcanvas-logo { /* sustituir texto por imagen via CSS */ display: inline-block !important; width: 125px !important; /* ancho exigido */ height: 24px !important; /* alto exigido */ background-image: url("https://ohlab.rwdesarrollos.es/wp-content/uploads/2025/07/ohlab.svg") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; /* ocultar el texto visible pero mantenerlo en el DOM para lectores */ text-indent: -9999px !important; overflow: hidden !important; white-space: nowrap !important; line-height: 0 !important; /* evitar altura extra por texto */ } .rw-offcanvas-title { font-size: var(--font-size-off-canvas-tittle); font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500; color: var(--color-black); text-align: center; flex: 1; margin: 0px 80px 0px 0px; } .rw-offcanvas-close, .rw-lightbox-close { width: 38px; height: 38px; background: transparent; border: none; border-radius: 50%; color: transparent; font-size: 0; line-height: 0; cursor: pointer; display: flex !important; align-items: center; justify-content: center; transition: all 0.2s ease; flex: 0 0 auto; padding: 0; overflow: hidden; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; } /* Ocultar cualquier contenido hijo (span, etc.) */ .rw-offcanvas-close *, .rw-lightbox-close * { display: none !important; } .rw-offcanvas-close:hover, .rw-lightbox-close:hover { background-image: url("data:image/svg+xml;utf8,"); } /* Botones de expandir / contraer categorías (icons SVG) */ .rw-categories-expand-btn, .rw-categories-collapse-btn { width: 38px; height: 38px; background: transparent; border: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; background-repeat: no-repeat; background-position: center; background-size: contain; cursor: pointer; } /* Ocultar SVG interno pequeño (se usa el background) */ .rw-categories-expand-btn svg, .rw-categories-collapse-btn svg { display: none !important; } /* Estado normal - expandir */ .rw-categories-expand-btn { background-image: url("data:image/svg+xml;utf8,"); } /* Estado normal - contraer */ .rw-categories-collapse-btn { background-image: url("data:image/svg+xml;utf8,"); } /* Hover - expandir */ .rw-categories-expand-btn:hover { background-image: url("data:image/svg+xml;utf8,"); } /* Hover - contraer */ .rw-categories-collapse-btn:hover { background-image: url("data:image/svg+xml;utf8,"); } /* Contenedor de contenido scrollable */ .rw-projects-offcanvas__content { width: 100%; max-width: 1592px; margin: 0 auto; padding: 180px 80px 40px 80px; box-sizing: border-box; } /* Reducir padding lateral en pantallas pequeñas */ @media (max-width: 834px) { .rw-projects-offcanvas__content { padding-left: 20px !important; padding-right: 20px !important; } } /* Project Grid dentro de offcanvas */ .rw-project-grid { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; gap: 40px 32px; margin-bottom: 0; width: 100%; max-width: 1316px; margin: 0 auto; padding: 0; box-sizing: border-box; } /* Footer del offcanvas */ .rw-offcanvas-footer { position: relative; width: 100%; padding: 0px 40px 40px 40px; text-align: center; background: transparent; } /* Asegurar que footer esté encima para que botones sean clickables */ .rw-offcanvas-footer { z-index: 1010; /* más alto que overlays estándar */ pointer-events: auto; } /* Ocultar navegación del lightbox (flechas y su caja) en mobile: no deben verse ni ocupar espacio */ @media (max-width: 767px) { .rw-lightbox-nav, .rw-lightbox-prev, .rw-lightbox-next { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* Evitar pseudo-elementos que se posicionen encima del footer dentro del offcanvas */ .rw-projects-offcanvas::before, .rw-projects-offcanvas::after, .rw-projects-offcanvas__inner::before, .rw-projects-offcanvas__inner::after { content: none !important; display: none !important; pointer-events: none !important; } /* OVERRIDES ESPECÍFICOS PARA RW-OFFCANVAS - alta especificidad y !important - Forzar grid de 2 columnas dentro del offcanvas - Asegurar que el footer esté encima y los overlays no tapen botones - Añadir padding-bottom al inner para evitar solapamientos */ .rw-offcanvas .rw-project-grid, .rw-projects-offcanvas .rw-project-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 40px 32px !important; } .rw-offcanvas .rw-offcanvas-projects-grid, .rw-projects-offcanvas .rw-offcanvas-projects-grid { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .rw-offcanvas .rw-offcanvas-footer, .rw-projects-offcanvas .rw-offcanvas-footer { position: relative !important; z-index: 9999999 !important; /* forzar por encima */ pointer-events: auto !important; background: transparent !important; } /* Bajar z-index y quitar interacción de overlays dentro del offcanvas */ .rw-offcanvas .rw-projects-offcanvas__loader, .rw-offcanvas .rw-lightbox-overlay, .rw-projects-offcanvas__loader, .rw-lightbox-overlay { z-index: 1 !important; pointer-events: none !important; } /* Evitar que cualquier elemento posicionado absolutamente dentro del offcanvas se coloque encima del footer por accidente */ .rw-offcanvas [style*="position:absolute"], .rw-offcanvas [style*="position: fixed"] { z-index: 2 !important; } /* Ocultar navegación del lightbox en mobile (más específico) */ @media (max-width: 767px) { .rw-lightbox .rw-lightbox-nav, .rw-lightbox .rw-lightbox-prev, .rw-lightbox .rw-lightbox-next, .rw-lightbox-nav, .rw-lightbox-prev, .rw-lightbox-next { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .rw-lightbox .rw-lightbox-nav img, .rw-lightbox-nav img { display: none !important; } } .rw-back-button { display: inline-block; padding: 16px 45px 7px; border: 1px solid var(--color-black); border-radius: 100px; color: var(--color-black); font-size: 30px; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .rw-back-button:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Ocultar botón close original */ .rw-projects-offcanvas__close, .rw-projects-offcanvas__close-icon, .rw-offcanvas .rw-projects-offcanvas__close, .rw-offcanvas .rw-projects-offcanvas__close-icon { display: none; visibility: hidden; opacity: 0; pointer-events: none; } /* Header de galería */ .rw-offcanvas-gallery-title { font-size: 28px; font-weight: 600; margin: 0 0 10px 0; color: var(--color-black); } .rw-offcanvas-categories { font-size: var(--font-size-sm); color: var(--color-gray-dark); } .rw-offcanvas-categories-label { font-weight: 500; } .rw-offcanvas-categories-list { color: var(--color-primary); font-weight: 500; } /* Grid de proyectos en offcanvas */ .rw-offcanvas-projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 20px; } .rw-offcanvas-project-item { background: var(--color-white); border: 1px solid #eee; border-radius: var(--border-radius-standard); overflow: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-light); } .rw-offcanvas-project-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-strong); } /* Imágenes de proyectos en offcanvas */ .rw-offcanvas-project-image-wrapper { width: 100%; height: 200px; overflow: hidden; position: relative; } .rw-offcanvas-project-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .rw-offcanvas-project-item:hover .rw-offcanvas-project-image { transform: scale(1.05); } .rw-offcanvas-project-no-image { background: var(--color-gray-light); display: flex; align-items: center; justify-content: center; } .rw-offcanvas-project-placeholder { color: var(--color-gray-medium); font-size: var(--font-size-sm); text-align: center; padding: 20px; } /* Grid de imágenes en offcanvas */ .rw-offcanvas-images-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; } .rw-offcanvas-image-item { aspect-ratio: 4/3; overflow: hidden; border-radius: var(--border-radius-standard); transition: transform 0.3s ease; cursor: pointer; } .rw-offcanvas-image-item:hover { transform: translateY(-3px); } .rw-offcanvas-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .rw-offcanvas-image-item:hover .rw-offcanvas-image { transform: scale(1.05); } /* Estados y feedback */ .rw-projects-offcanvas__loader { text-align: center; padding: 40px; } .rw-projects-offcanvas__loader .spinner { display: inline-block; width: 50px; height: 50px; border: 3px solid rgba(var(--color-primary-rgb), 0.3); border-radius: 50%; border-top-color: var(--color-primary); animation: spin 1s ease-in-out infinite; margin-bottom: 15px; } .rw-projects-offcanvas__error { text-align: center; padding: 40px; color: var(--color-primary); } .rw-offcanvas-no-projects { text-align: center; padding: 40px 20px; color: var(--color-gray-dark); } .rw-offcanvas-no-projects p { font-size: var(--font-size-lg); margin: 0 0 10px 0; } .rw-offcanvas-no-projects small { font-size: var(--font-size-sm); color: var(--color-gray-medium); line-height: 1.4; } /* Estilos para galería legacy */ .rw-projects-offcanvas__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; } .rw-projects-offcanvas__item { overflow: hidden; border-radius: var(--border-radius-standard); box-shadow: var(--shadow-light); } .rw-projects-offcanvas__image { width: 100%; height: auto; object-fit: cover; display: block; } /* Lightbox */ .rw-lightbox { position: fixed; inset: 0; background: rgba(217, 217, 217, 1); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; } .rw-lightbox.active { opacity: 1; visibility: visible; pointer-events: auto; } .rw-lightbox-overlay { position: absolute; inset: 0; cursor: pointer; } .rw-lightbox-header { position: absolute; top: 0; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; z-index: 10; background: transparent; max-width: 1592px; margin: 0 auto; box-sizing: border-box; padding: 24px 40px 40px; } .rw-lightbox-logo { /* sustituir texto por imagen via CSS */ display: inline-block !important; width: 125px !important; /* ancho exigido */ height: 24px !important; /* alto exigido */ background-image: url("https://ohlab.rwdesarrollos.es/wp-content/uploads/2025/07/ohlab.svg") !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; /* ocultar el texto visible pero mantenerlo en el DOM para lectores */ text-indent: -9999px !important; overflow: hidden !important; white-space: nowrap !important; line-height: 0 !important; /* evitar altura extra por texto */ } /* Lightbox container ajustado para dar espacio al header */ .rw-lightbox-container { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top:16px; } .rw-lightbox-content { width: 100%; max-width: 1200px; background: transparent; display: flex; flex-direction: column; margin: 0 auto; padding-top: 80px; min-height: 100vh; box-sizing: border-box; } .rw-lightbox-image-wrapper { width: 100%; background: transparent; display: flex; align-items: center; justify-content: center; padding: 10px; min-height: auto; flex: 1 1 auto; } .rw-lightbox-image { max-width: 100%; max-height: 75vh; object-fit: contain; display: block; background: var(--color-white); } .rw-lightbox-info { padding: 30px 40px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; min-height: 80px; flex: 0 0 auto; } /* Botones de navegación dentro del info (ocultos en desktop) */ .rw-lightbox-info-nav { display: none; background: transparent; border: none; cursor: pointer; padding: 0; flex: 0 0 36px; width: 36px; height: 36px; align-items: center; justify-content: center; transition: opacity 0.2s ease; } .rw-lightbox-info-nav svg { display: block; width: 100%; height: 100%; } .rw-lightbox-info-nav:hover { opacity: 0.6; } .rw-lightbox-info-nav:focus { outline: none; background: transparent !important; -webkit-tap-highlight-color: transparent; } /* Estado deshabilitado con blur */ .rw-lightbox-info-nav.disabled { opacity: 0.3; pointer-events: none; filter: blur(0.5px); } .rw-lightbox-info-center { display: flex; align-items: center; justify-content: center; gap: 15px; flex: 1 1 auto; min-height: 24px; } .rw-lightbox-project-title { font-size: 14px; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 400; margin: 0; color: #000; } .rw-lightbox-separator { color: var(--color-gray-medium); font-size: var(--font-size-sm); } .rw-lightbox-link { color: #000; font-size: var(--font-size-sm); font-family: "NeueHelveticaPro55Roman", Arial, sans-serif; font-weight: 400; transition: all 0.2s ease; white-space: nowrap; } .rw-lightbox-link:hover { color: #000; } .rw-lightbox-link::after, .rw-lightbox-link::before { content: ""; display: none; } /* Flechas circulares para el lightbox — integrado y listo para la variante "solid" */ /* Contenedor para alinear las flechas con el header */ .rw-lightbox-content { position: relative; max-width: 1592px; margin: 0 auto; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } /* Botones circulares (mantén tus reglas .rw-lightbox-nav) */ .rw-lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: transparent; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 9999; transition: all 0.2s ease; padding: 0; font-size: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } /* Imagen del icono - ocultar si existe */ .rw-lightbox-nav img { display: none; } /* Posicionamiento lateral - alineado con el max-width del header (1592px) */ .rw-lightbox-prev { left: max(40px, calc((100vw - 1592px) / 2 + 40px)); background-image: url("data:image/svg+xml;utf8,"); } .rw-lightbox-next { right: max(40px, calc((100vw - 1592px) / 2 + 40px)); background-image: url("data:image/svg+xml;utf8,"); } /* Hover - fondo blanco */ .rw-lightbox-prev:hover { background-image: url("data:image/svg+xml;utf8,"); } .rw-lightbox-next:hover { background-image: url("data:image/svg+xml;utf8,"); } /* Focus - mantener SVG con fondo blanco */ .rw-lightbox-prev:focus { outline: none; background-image: url("data:image/svg+xml;utf8,"); } .rw-lightbox-next:focus { outline: none; background-image: url("data:image/svg+xml;utf8,"); } /* Disabled/hidden */ .rw-lightbox-nav.hidden, .rw-lightbox-nav[disabled] { opacity: 0.32; pointer-events: none; } /* Responsive */ @media (max-width: 520px) { .rw-lightbox-nav { width: 42px; height: 42px; } .rw-lightbox-nav img { width: 18px; height: 18px; } .rw-lightbox-prev { left: 12px; } .rw-lightbox-next { right: 12px; } } /* Evitar scroll en body */ body.offcanvas-active, body.lightbox-active { overflow: hidden; } /* ========================================================================== ANIMACIONES Y UTILIDADES ========================================================================== */ @keyframes fadeInTab { from { opacity: 0; transform: translateX(10px) scale(0.9); } to { opacity: 1; transform: translateX(0) scale(1); } } @keyframes spin { to { transform: rotate(360deg); } } /* Accesibilidad */ .tabs-buttons .tab-btn:focus { /* Remove focus outline on mouse click to avoid visual double-border */ outline: none; } /* Keep an accessible focus indicator for keyboard users */ .tabs-buttons .tab-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* Tablets grandes (hasta 1200px) */ @media (max-width: 1280px) { :root { --grid-column-gap-projects: 800px; --grid-row-gap-projects: 30px; --gallery-item-width: 180px; --gallery-item-height: 255px; --project-item-max-width: 105px; } .elementor-67 .elementor-element.elementor-element-4c02832 .rw-loop-grid__grid--wrapper{ gap: 80px!important; } .rw-loop-grid__grid--wrapper { min-height: 500px; } .rw-loop-grid__grid--wrapper .project-item.landscape .project-item__image, .rw-loop-grid__grid--wrapper .project-item.landscape .tab-image { max-width: 235px; max-height: 157px; } .rw-loop-grid__grid--wrapper .project-item.portrait .project-item__image, .rw-loop-grid__grid--wrapper .project-item.portrait .tab-image { max-width: 185px; max-height: 259px; } .rw-loop-grid__grid--wrapper .project-item.square .project-item__image, .rw-loop-grid__grid--wrapper .project-item.square .tab-image { max-width: 235px; max-height: 235px; } .rw-custom-grid { grid-template-columns: repeat(3, 1fr); } } /* Tablets (768px - 1023px): 2 columnas, proporciones naturales de imagen */ @media (min-width: 768px) and (max-width: 1023px) { /* corrige el gap de 800px heredado del bloque 1280px */ :root { --grid-column-gap-projects: 30px; --project-item-max-width: none; --project-item-min-width: 0; } .rw-loop-grid__grid--wrapper { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 60px 30px !important; align-items: center !important; grid-auto-rows: auto !important; } .rw-loop-grid__grid--wrapper .project-item { overflow: visible !important; max-width: 100% !important; min-width: 0 !important; width: 100% !important; height: auto !important; max-height: none !important; } .rw-loop-grid__grid--wrapper .project-item .project-item__image, .rw-loop-grid__grid--wrapper .project-item .tab-image { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; min-height: 0 !important; min-width: 0 !important; object-fit: fill !important; } .rw-loop-grid__grid--wrapper .project-item-link { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; align-items: flex-start !important; box-sizing: border-box !important; } } /* Móvil (hasta 767px) */ @media (max-width: 767px) { :root { --grid-column-gap-projects: 20px; --grid-row-gap-projects: 40px; } .rw-loop-grid__main-content { padding-bottom: 180px; } .rw-loop-grid__bottom-controls { flex-direction: column; gap: 15px; padding: 15px 0; align-items: stretch; } .rw-loop-grid__category-filters { order: 2; } .rw-loop-grid__tab-controls { order: 1; justify-content: center; } .rw-custom-grid { grid-template-columns: 1fr; } .tabs-buttons { justify-content: center; flex-wrap: wrap; } .tabs-buttons .tab-btn { min-width: 80px; } .gallery-card { min-height: 180px; } .gallery-line--title { font-size: var(--font-size-md); } .gallery-line--meta { font-size: var(--font-size-xs); } .rw-categories-expand-btn, .rw-categories-collapse-btn { min-height: 32px; padding: 0 10px; } .rw-categories-expand-btn .expand-icon, .rw-categories-collapse-btn .collapse-icon { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; } .rw-categories-expand-btn .expand-icon svg, .rw-categories-collapse-btn .collapse-icon svg { display: block; width: 12px; height: 12px; } .rw-loop-grid-categorys-list-wrapper { justify-content: center; width: 100%; } .rw-loop-grid__grid--wrapper { min-height: 300px; display: grid !important; grid-template-columns: 1fr !important; align-items: start !important; grid-auto-rows: auto !important; justify-items: center; } .rw-loop-grid__grid--wrapper .gallery-item { overflow: visible !important; max-width: 100% !important; min-width: 0 !important; width: 80% !important; max-height: none !important; } .rw-loop-grid__grid--wrapper .project-item { overflow: visible !important; max-width: 100% !important; min-width: 0 !important; width: 80% !important; max-height: none !important; } .rw-loop-grid__grid--wrapper .project-item-link { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 !important; align-items: center !important; box-sizing: border-box !important; } /* Móvil 1 col: cada imagen ocupa el 100% del ancho, altura estrictamente proporcional */ .rw-loop-grid__grid--wrapper .project-item .project-item__image, .rw-loop-grid__grid--wrapper .project-item .tab-image { width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; min-height: 0 !important; min-width: 0 !important; display: block !important; margin: 0 !important; object-fit: fill !important; } w-loop-grid__grid--wrapper .gallery-item { /*height: 180px;*/ } .rw-loop-grid__grid--wrapper .project-item .tab-image img { max-width: 280px; } .rw-offcanvas-logo, .rw-lightbox-logo { font-size: var(--font-size-md); } .rw-offcanvas-title { font-size: var(--font-size-sm); margin: 0 15px; display: none; } .rw-offcanvas-close, .rw-lightbox-close { width: 40px; height: 40px; font-size: var(--font-size-sm); display: flex !important; } .rw-offcanvas-content { padding: 180px 20px 20px 20px; } .rw-project-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 60px 45px; max-width: 90%; } .rw-offcanvas-footer { padding: 20px 20px 80px 20px;; } .rw-back-button { padding: 20px; font-size: 20px; padding: 25px 25px 22px; line-height: 28px; } .rw-projects-offcanvas__inner { /*padding: 20px;*/ } .rw-projects-offcanvas__content-wrapper { padding: 15px; } .rw-offcanvas-projects-grid { grid-template-columns: 1fr; } .rw-offcanvas-images-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; } .rw-lightbox-content { max-width: 90%; margin: 0 auto; } .rw-lightbox-image { max-height: 60vh; } .rw-lightbox-info { padding: 20px; gap: 10px; margin-top: 15px; } /* Ocultar flechas grandes del header en mobile */ .rw-lightbox-nav { display: none !important; } } /* Móviles pequeños (hasta 480px) */ @media (max-width: 480px) { .rw-offcanvas-title { font-size: 13px; margin: 0 10px; } .rw-project-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 40px 30px; max-width: 95%; } .rw-back-button { padding: 20px; font-size: 20px; padding: 25px 25px 22px; line-height: 28px; } .rw-offcanvas-images-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .rw-lightbox-content { max-width: 95%; margin: 10px; min-height: calc(100vh - 20px); display: flex; flex-direction: column; } .rw-lightbox-image-wrapper { flex: 1 1 auto; } .rw-lightbox-info { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; padding: 20px 15px; width: 100%; min-height: 76px; flex: 0 0 auto; } /* Mostrar flechas de navegación en mobile */ .rw-lightbox-info-nav { display: flex !important; flex: 0 0 36px; } /* Centrar el contenido entre las flechas */ .rw-lightbox-info-center { flex-direction: column; gap: 0px; flex: 1 1 auto; } .rw-lightbox-separator { display: none !important; } } /* NUEVO: asegurar que el overlay coincida con la imagen */ .project-item__media { position: relative; display: inline-block; width: 100%; line-height: 0; /* evita espacio extra debajo de las imágenes */ } /* Aseguramos que las imágenes dentro del wrapper ocupen su propio tamaño y sean bloques */ .project-item__media .project-item__image { display: block; width: 100%; height: auto; max-width: none; /* respetar reglas superiores si existen */ object-fit: cover; /* mantener comportamiento de recorte si aplica */ } /* El overlay se posiciona respecto al wrapper media (coincidirá con la imagen visible) */ .project-item__media .project-item__overlay, .project-item__media .project-item__overlay .project-item__content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; /* evita interferir si se usan links sobre la imagen */ } /* Reservar estilos visuales previos (mantener opacidad/colores definidos ya en el archivo) */ .project-item__media .project-item__overlay { background-color: rgba(var(--color-primary-rgb), 0); opacity: 0; transition: opacity 0.3s ease, background-color 0.3s ease; z-index: 10; } .project-item__media:hover .project-item__overlay { opacity: 1; background-color: rgba(var(--color-primary-rgb), 1); } /* Asegurar que el contenido del overlay esté por encima y visible */ .project-item__media .project-item__overlay .project-item__content { position: absolute; inset: 0; display: flex; /* Centrar vertical y horizontalmente */ flex-direction: column; align-items: center; justify-content: center; pointer-events: none; z-index: 60; /* forzar por encima */ padding: 10px !important; color: var(--color-white) !important; text-align: center !important; } /* Título: 18px y peso 500 (preciso) */ .project-item__media .project-item__overlay .project-item__title, .project-item__overlay .project-item__title { font-size: 18px !important; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500 !important; line-height: 1.2 !important; margin: 0 0 6px 0 !important; color: var(--color-white) !important; } /* Meta (ubicación + categoría): 14px 400, siempre visible y en una sola línea */ .project-item__media .project-item__overlay .project-item__meta, .project-item__overlay .project-item__meta { /* Usar todo el ancho del overlay y repartir espacio entre hijos */ display: flex !important; /* Permitir que el contenido haga wrap cuando no quepa */ flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 0.5em !important; font-family: "NeueHelveticaPro55Roman", Arial, sans-serif; font-size: 14px !important; font-weight: 400 !important; color: var(--color-white) !important; width: 100% !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; margin: 0 !important; } /* Partes de la meta recortables independientemente */ .project-item__media .project-item__overlay .project-item__location, .project-item__media .project-item__overlay .project-item__categories, .project-item__overlay .project-item__location, .project-item__overlay .project-item__categories { display: inline-block !important; min-width: 0 !important; /* Permitir wrap y mostrar en varias líneas si no cabe */ overflow: visible !important; text-overflow: clip !important; white-space: normal !important; color: var(--color-white) !important; } /* Alinear ubicación a la izquierda y categorías a la derecha; el separador no crece */ .project-item__overlay .project-item__location { /*padding-left: 8px !important;*/ } .project-item__overlay .project-item__categories { /* padding-right: 8px!important;*/ } .project-item__overlay .meta-separator { flex: 0 0 auto !important; white-space: nowrap !important; } /* Si el meta hace wrap, forzamos el separador a su propia línea centrada Esto produce visualmente: línea1 = ubicación, línea2 = separador, línea3 = categorías */ .project-item__overlay .project-item__meta .meta-separator { /* comportamiento por defecto ya definido; añadimos reglas para cuando el contenedor wrappee */ display: inline-block !important; } /* En dispositivos donde típicamente ocurre wrap, hacemos que el separador ocupe toda la línea */ @media (max-width: 720px) { .project-item__overlay .project-item__meta { flex-direction: column !important; align-items: center !important; gap: 6px !important; } .project-item__overlay .project-item__meta .meta-separator { display: block !important; width: 100% !important; text-align: center !important; margin: 0 !important; padding: 0 !important; } } /* En pantallas pequeñas permitimos wrap para que no se corten datos importantes */ @media (max-width: 720px) { .project-item__overlay .project-item__meta{ flex-direction: column !important; gap: 0.25em !important; align-items: center !important; justify-content: center !important; } .project-item__overlay .project-item__location, .project-item__overlay .project-item__categories { white-space: normal !important; text-overflow: clip !important; overflow: visible !important; } } /* Separador claro y visible */ .project-item__media .project-item__overlay .meta-separator, .project-item__overlay .meta-separator { color: var(--color-white) !important; line-height: 1 !important; } /* Asegurar contraste cuando overlay aparece */ .project-item__media .project-item__overlay, .project-item__overlay { transition: background-color 0.3s ease, opacity 0.3s ease; } @media (max-width: 1023px) { /* Desactivar transiciones 3D para evitar animaciones en tablet/móvil */ .gallery-card .card-layer, .rw-loop-grid__grid--wrapper .gallery-card .card-layer { transition: none !important; will-change: auto !important; } /* Renderizar las capas en el "estado final" del hover (sin necesidad de interactuar) */ .gallery-card .card-back-2, .rw-loop-grid__grid--wrapper .gallery-card .card-back-2 { transform: translateZ(-60px) rotate(-8deg) scale(0.98) !important; opacity: 0.98 !important; z-index: 1 !important; } .gallery-card .card-back-1, .rw-loop-grid__grid--wrapper .gallery-card .card-back-1 { transform: translateZ(-30px) rotate(-4deg) scale(0.99) !important; opacity: 0.99 !important; z-index: 2 !important; } .gallery-card .card-front, .rw-loop-grid__grid--wrapper .gallery-card .card-front { transform: translateZ(0) rotate(0deg) scale(1) !important; z-index: 3 !important; } } /* Mobile info: oculto por defecto en desktop */ .project-item__mobile-info { display: none; } /* Mostrar mobile-info y ocultar overlay en tablet y móvil — centrado del contenido */ @media (min-width: 768px) and (max-width: 1023px), (max-width: 767px) { .rw-loop-grid .project-item__overlay { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .rw-loop-grid .project-item__mobile-info { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100% !important; box-sizing: border-box; padding: 24px 12px 0 12px !important; margin: 0 auto; color: var(--color-black); } .rw-loop-grid .project-item__mobile-info .project-item__title { font-size: 18px; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif; font-weight: 500; margin: 0 0 6px 0; line-height: 1.2; color: var(--color-black); width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rw-loop-grid .project-item__mobile-info .project-item__meta { display: inline-flex; align-items: center; justify-content: center; gap: 0.25em; font-size: 14px; font-family: "NeueHelveticaPro55Roman", Arial, sans-serif; font-weight: 400; color: var(--color-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } .rw-loop-grid .project-item__mobile-info .project-item__location, .rw-loop-grid .project-item__mobile-info .project-item__categories { display: inline-block; max-width: 48%; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Contenedor de filtros wrapper */ .rw-loop-grid__filters-wrapper { display: flex; align-items: center; gap: 12px; flex: 1; } /* Botón filtrar oculto por defecto en desktop */ .rw-filter-toggle-btn { display: none; } /* Solo en pantallas muy pequeñas: mostrar botón y ocultar filtros por defecto */ @media (max-width: 720px) { /* Estilos completos del botón Filtrar */ .rw-filter-toggle-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--color-primary) !important; background-color: var(--color-white) !important; color: var(--color-primary) !important; font-family: "NeueHelveticaPro63ExtendedMedium", Arial, sans-serif !important; line-height: 1 !important; font-size: var(--font-size-xs) !important; font-weight: 500 !important; white-space: nowrap !important; cursor: pointer !important; transition: var(--transition-standard) !important; flex-shrink: 0 !important; order: 2 !important; } /* Cuando muestra texto "Filtrar" - forma de píldora */ .rw-filter-toggle-btn:not([aria-expanded="true"]) { border-radius: var(--border-radius-pill) !important; padding: 13px 12px 10px !important; min-width: auto !important; } /* Cuando está abierto (muestra SVG) - completamente redondo */ .rw-filter-toggle-btn[aria-expanded="true"] { border-radius: 50% !important; width: 44px !important; height: 44px !important; padding: 0 !important; } /* Hover del botón */ .rw-filter-toggle-btn:hover, .rw-filter-toggle-btn[aria-expanded="true"] { background-color: var(--color-primary) !important; color: var(--color-white) !important; border-color: var(--color-primary) !important; } /* Estilos para el SVG dentro del botón */ .rw-filter-toggle-btn .collapse-icon { display: inline-flex; align-items: center; justify-content: center; } .rw-filter-toggle-btn svg { width: 12px; height: 12px; display: block; } .rw-filter-toggle-btn svg path { stroke: currentColor; } /* Wrapper de filtros en columna para mobile */ .rw-loop-grid__filters-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; flex: 1 !important; } /* Filtros: order 1 para que aparezcan arriba */ .rw-loop-grid__category-filters { display: none !important; order: 1 !important; } /* Cuando se abre, mostrar filtros ENCIMA del botón */ .rw-loop-grid.filters-open .rw-loop-grid__category-filters { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; } /* Wrapper interno de categorías en fila horizontal */ .rw-loop-grid.filters-open .rw-loop-grid-categorys-list-wrapper { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; width: 100% !important; flex-wrap: wrap !important; } /* Botones de categoría con ancho automático (no se estiran) */ .rw-loop-grid.filters-open .rw-loop-grid-category-list-button { width: auto !important; flex-shrink: 0 !important; justify-content: center !important; } /* Mantener barra de controles en fila con espacio entre elementos */ .rw-loop-grid__bottom-controls { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: flex-end !important; gap: 12px !important; } /* Tab controls siempre abajo alineados */ .rw-loop-grid__tab-controls { align-self: flex-end !important; } } /* Asegurar ocultado fuera de móvil */ @media (min-width: 721px) { .rw-loop-grid__bottom-controls .rw-filter-toggle-btn { display: none !important; } } /* Override mobile: quitar max-width aplicado por la variable para las imágenes de proyecto */ @media (max-width: 767px) { .project-item .project-item__image, .project-item .tab-image { max-width: none !important; /* conservar comportamiento de recorte/alto */ width: 100% !important; height: auto !important; object-fit: cover !important; } } /* OCULTAR botones + / - en mobile con máxima prioridad */ @media (max-width: 720px) { .rw-loop-grid__category-filters .rw-categories-expand-btn, .rw-loop-grid__category-filters .rw-categories-collapse-btn, .rw-loop-grid.filters-open .rw-loop-grid__category-filters .rw-categories-expand-btn, .rw-loop-grid.filters-open .rw-loop-grid__category-filters .rw-categories-collapse-btn, .rw-loop-grid-categories .rw-categories-expand-btn, .rw-loop-grid-categories .rw-categories-collapse-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; } .rw-lightbox_nav{ display: none !important; } } /* Ajuste: reducir padding lateral del overlay para que entren ubicación y categoría */ .project-item__content, .project-item__media .project-item__overlay .project-item__content { padding: 6px 8px !important; /* menos padding lateral para evitar que el texto se corte */ } .rw-lightbox-separator.hidden, .rw-lightbox-link.hidden { display: none !important; } /* Ocultar separador del lightbox en mobile */ @media (max-width: 767px) { .rw-lightbox-separator { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* Mostrar solo logo y botón cerrar del lightbox cuando se abre (mobile) y ocultar únicamente el título dentro del header (sin tocar el título bajo la imagen) */ @media (max-width: 767px) { /* Mostrar logo del lightbox */ .rw-lightbox.active .rw-lightbox-logo { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Mostrar botón de cierre del lightbox */ .rw-lightbox.active .rw-lightbox-close { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* SOLO ocultar títulos que estén dentro del header; dejar visible el .rw-lightbox-project-title fuera del header */ .rw-lightbox.active .rw-lightbox-header .rw-lightbox-title, .rw-lightbox.active .rw-lightbox-header .rw-lightbox-project-title { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* Mostrar solo logo y botón cerrar del lightbox cuando se abre (mobile) y ocultar únicamente el título dentro del header (sin tocar el título bajo la imagen) */ @media (max-width: 767px) { .rw-lightbox.active .rw-lightbox-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 24px 16px 40px; background: transparent !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } /* Mostrar logo del lightbox */ .rw-lightbox.active .rw-lightbox-logo { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* Mostrar botón de cierre del lightbox */ .rw-lightbox.active .rw-lightbox-close { display: flex !important; visibility: visible !important; opacity: 1 !important; } /* SOLO ocultar títulos que estén dentro del header; dejar visible el .rw-lightbox-project-title fuera del header */ .rw-lightbox.active .rw-lightbox-header .rw-lightbox-title, .rw-lightbox.active .rw-lightbox-header .rw-lightbox-project-title { display: none !important; visibility: hidden !important; opacity: 0 !important; } } /* Offcanvas header layout */ .rw-offcanvas-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 40px 40px; /* 🎯 SINCRONIZADO: mismo padding que lightbox */ z-index: 10; background-color: rgba(217, 217, 217, 1); /* Mismo fondo que offcanvas */ max-width: 1592px; margin: 0 auto; box-sizing: border-box; padding: 24px 40px 40px; } /* ------------------------------------------------------------------------- OVERRIDES FINALES (alta especificidad) - colocados al final para prioridad - Forzar 2 columnas en el grid del offcanvas - Asegurar que el footer esté siempre encima y clickable - Quitar overlays o elementos que tapen el footer - Ocultar navegación del lightbox en mobile ------------------------------------------------------------------------- */ /* Grid del offcanvas: comportamiento solicitado - Pantallas grandes (default) hasta 834px: 4 columnas - <= 834px: 2 columnas (incluye móviles) - Alineación horizontal: centrar items en cada celda */ #rw-projects-offcanvas .rw-project-grid, .rw-offcanvas#rw-projects-offcanvas .rw-project-grid, #rw-projects-offcanvas .rw-offcanvas-projects-grid, .rw-offcanvas#rw-projects-offcanvas .rw-offcanvas-projects-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; /* default: 4 columnas */ gap: 80px 48px !important; align-items: center !important; justify-items: center !important; /* centrar horizontalmente cada celda */ align-items: center !important; width: 100% !important; max-width: 1316px; } /* A partir de 834px hacia abajo, usar 2 columnas */ @media (max-width: 834px) { #rw-projects-offcanvas .rw-project-grid, #rw-projects-offcanvas .rw-offcanvas-projects-grid, .rw-offcanvas#rw-projects-offcanvas .rw-project-grid, .rw-offcanvas#rw-projects-offcanvas .rw-offcanvas-projects-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 32px 20px !important; justify-items: stretch !important; /* <-- esta es la clave */ padding: 0px!important; } } /* Evitar que el contenido quede bajo el footer: asegurar padding-bottom y scroll interno */ #rw-projects-offcanvas .rw-projects-offcanvas__inner, .rw-offcanvas#rw-projects-offcanvas .rw-projects-offcanvas__inner { padding-bottom: 180px !important; /* espacio para footer */ /*max-height: calc(100vh - 80px) !important;*/ box-sizing: border-box !important; } /* Forzar que el footer esté en el flujo y por encima */ #rw-projects-offcanvas .rw-offcanvas-footer, .rw-offcanvas#rw-projects-offcanvas .rw-offcanvas-footer { position: relative !important; margin-top: 245px !important; z-index: 10 !important; /* 🎯 Suficiente para estar sobre el contenido */ pointer-events: auto !important; background: transparent !important; } /* Ocultar/neutralizar overlays y loaders que puedan tapar el footer */ #rw-projects-offcanvas .rw-projects-offcanvas__loader, #rw-projects-offcanvas .rw-lightbox-overlay, .rw-projects-offcanvas__loader, .rw-lightbox-overlay, #rw-projects-offcanvas .rw-projects-offcanvas__loader .spinner { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; z-index: 1 !important; } /* Si existen pseudo elementos insertados por otras reglas, anularlos */ #rw-projects-offcanvas::before, #rw-projects-offcanvas::after, #rw-projects-offcanvas .rw-projects-offcanvas__inner::before, #rw-projects-offcanvas .rw-projects-offcanvas__inner::after { content: none !important; display: none !important; pointer-events: none !important; } /* Mostrar navegación del lightbox en mobile: asegurar que las flechas sean visibles y clicables (en algunos contextos previas reglas las ocultaban y rompían la navegación en pantallas pequeñas) */ @media (max-width: 767px) { /* Ocultar botones visuales en mobile; la navegación táctil por swipe sigue activa */ #rw-projects-offcanvas .rw-lightbox-nav, .rw-lightbox .rw-lightbox-nav, .rw-lightbox-nav, .rw-lightbox-prev, .rw-lightbox-next { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } /* ------------------------------------------------------------------------- Overrides para asegurar que cada celda del grid deje a su contenido usar el 100% del ancho disponible. Esto contrarresta reglas con max-width o con flex-basis fijos. ------------------------------------------------------------------------- */ /* Cuando el wrapper está en grid (Elementor u overrides), forzamos que la celda deje al contenido estirarse */ .rw-custom-grid > .project-item-link, .rw-loop-grid__grid--wrapper > .project-item-link, .rw-loop-grid__grid--wrapper > .project-item { width: 100% !important; max-width: 100% !important; flex: 1 1 auto !important; } /* El enlace interior y el propio .project-item deben usar box-sizing border-box y no limitar el ancho interno */ .rw-custom-grid .project-item-link, .rw-loop-grid__grid--wrapper .project-item-link, .rw-custom-grid .project-item, .rw-loop-grid__grid--wrapper .project-item { box-sizing: border-box !important; padding: 0 !important; margin: 0 !important; } /* Forzar que las imágenes ocupen el 80% del ancho en 1 columna (≤767px) */ @media (max-width: 767px) { .rw-custom-grid .project-item .project-item__image, .rw-loop-grid__grid--wrapper .project-item .project-item__image, .rw-custom-grid .project-item .tab-image, .rw-loop-grid__grid--wrapper .project-item .tab-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: cover !important; margin: auto !important; } } /* Si hay reglas específicas por proporción que restringen max-width, las anulamos aquí */ .rw-loop-grid__grid--wrapper .project-item.landscape .project-item__image, .rw-loop-grid__grid--wrapper .project-item.portrait .project-item__image, .rw-loop-grid__grid--wrapper .project-item.square .project-item__image { max-width: 100% !important; } @media (max-width: 834px) { .elementor-67 .elementor-element.elementor-element-4c02832 .rw-loop-grid__grid--wrapper{ padding-left: 0px!important; padding-right: 0px!important; gap: 80px!important; } } .rw-project-item { overflow: hidden; cursor: pointer; transition: all 0.3s ease; position: relative; } .rw-project-item img { width: 100%; height: auto; object-fit: cover; display: block; transition: filter 0.3s ease; } /* Overlay blanco semi-transparente */ .rw-project-item-overlay { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.178); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; z-index: 1; } .rw-project-item:hover .rw-project-item-overlay { opacity: 1; } /* SVG del "+" como elemento real */ .rw-project-item-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIuNSIgeT0iLjUiIHdpZHRoPSIzNyIgaGVpZ2h0PSIzNyIgcng9IjE4LjUiIHN0cm9rZT0id2hpdGUiLz48cGF0aCBkPSJNMjUgMTkuMDAwNUwxMyAxOS4wMDA1IiBzdHJva2U9IndoaXRlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48cGF0aCBkPSJNMTkgMTMuMDAwNVYyNS4wMDA1IiBzdHJva2U9IndoaXRlIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiLz48L3N2Zz4="); background-size: contain; background-repeat: no-repeat; opacity: 0; transition: opacity 0.3s ease, background-image 0.2s ease; z-index: 2; cursor: pointer; } /* 🎯 Mostrar icono al hacer hover sobre el contenedor */ .rw-project-item:hover .rw-project-item-icon { opacity: 1; } /* 🎯 Cambiar a rojo al hacer hover sobre el propio icono */ .rw-project-item-icon:hover { background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHZpZXdCb3g9IjAgMCAzOCAzOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIuNSIgeT0iLjUiIHdpZHRoPSIzNyIgaGVpZ2h0PSIzNyIgcng9IjE4LjUiIGZpbGw9IiNGNTMzM0YiIHN0cm9rZT0iI0Y1MzMzRiIvPjxwYXRoIGQ9Ik0yNSAxOS4wMDA1TDEzIDE5LjAwMDUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjxwYXRoIGQ9Ik0xOSAxMy4wMDA1VjI1LjAwMDUiIHN0cm9rZT0id2hpdGUiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIvPjwvc3ZnPg=="); } /* Offcanvas header layout: aplicar solo entre 1280px y 835px */ @media (min-width: 835px) and (max-width: 1280px) { .rw-offcanvas-header { display: flex; align-items: center; gap: 12px; justify-content: space-between; padding: 16px 40px 40px; /* 🎯 SINCRONIZADO: mismo padding que lightbox */ max-width: 1592px; /* coherencia con la declaración principal */ margin: 0 auto; /* 🎯 AÑADIDO: Centrar horizontalmente */ width: 100%; /* 🎯 AÑADIDO: Ocupar todo el ancho disponible */ box-sizing: border-box; /* 🎯 AÑADIDO: Incluir padding en el ancho */ } } @media (max-width: 834px) { .rw-offcanvas-header { padding: 24px 15px 15px 15px !important; /* 🎯 SINCRONIZADOS: mismo padding en móvil pequeño */ } .rw-lightbox-header { padding: 24px 15px 15px 15px !important; /* 🎯 SINCRONIZADOS: mismo padding que offcanvas */ } }