/* ============================================================ GALERÍA DINÁMICA — Group SIE galeria.css ============================================================ Instrucciones: - Vincula este archivo en tu DESPUÉS del CSS principal. - Solo afecta la sección #galeria y el lightbox/modal. - El botón de WhatsApp también está aquí. ============================================================ */ /* ══════════════════════════════════════════════════ 1. SECCIÓN GALERÍA PRINCIPAL ══════════════════════════════════════════════════ */ #galeria { background: #0f0f0f; padding: 5rem 0 4rem; position: relative; overflow: hidden; } /* Textura de fondo sutil */ #galeria::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient( 0deg, transparent, transparent 40px, rgba(232,93,4,0.03) 40px, rgba(232,93,4,0.03) 41px ), repeating-linear-gradient( 90deg, transparent, transparent 40px, rgba(232,93,4,0.03) 40px, rgba(232,93,4,0.03) 41px ); pointer-events: none; z-index: 0; } #galeria .container { position: relative; z-index: 1; } /* ── Bloque de título ── */ .gal-title-block { text-align: center; margin-bottom: 2.5rem; } .gal-title-block .gal-eyebrow { font-family: 'Bruno Ace SC', cursive; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: #FF8C42; margin-bottom: 0.5rem; display: block; } .gal-title-block h2 { font-family: 'Anek Telugu', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 0.5rem; } .gal-title-block p { font-family: 'Montserrat', sans-serif; font-size: 0.88rem; color: rgba(255,255,255,0.45); } /* Línea decorativa debajo del título */ .gal-title-block::after { content: ""; display: block; width: 48px; height: 3px; background: #E85D04; margin: 1rem auto 0; border-radius: 2px; } /* ══════════════════════════════════════════════════ 2. BARRA DE FILTROS DINÁMICA ══════════════════════════════════════════════════ */ .gal-filter-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2.2rem; } .gal-filter-btn { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 1.1rem; border-radius: 100px; border: 1.5px solid rgba(255,255,255,0.15); background: transparent; color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.28s ease; white-space: nowrap; } .gal-filter-btn:hover { border-color: #E85D04; color: #E85D04; } .gal-filter-btn.active { background: #E85D04; border-color: #E85D04; color: #fff; box-shadow: 0 4px 14px rgba(232,93,4,0.35); } /* Contador de resultados */ .gal-count { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; color: rgba(255,255,255,0.3); text-align: center; margin-bottom: 1.5rem; letter-spacing: 0.06em; } .gal-count span { color: #FF8C42; font-weight: 700; } /* ══════════════════════════════════════════════════ 3. GRID DE IMÁGENES ══════════════════════════════════════════════════ */ .gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* Responsive */ @media (max-width: 1100px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 480px) { .gal-grid { grid-template-columns: 1fr; gap: 8px; } } /* ── Item individual ── */ .gal-item { position: relative; overflow: hidden; border-radius: 6px; cursor: pointer; background: #1a1a1a; aspect-ratio: 4 / 3; /* Animación de entrada */ opacity: 0; transform: translateY(16px) scale(0.98); transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.3s ease; } .gal-item.gal-visible { opacity: 1; transform: translateY(0) scale(1); } .gal-item.gal-hiding { opacity: 0; transform: scale(0.94); pointer-events: none; } /* Imagen */ .gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94), filter 0.4s ease; filter: brightness(0.88); /* Lazy loading mejorado */ will-change: transform; } /* Lazy placeholder */ .gal-item img[data-src]:not([src]) { background: #222; } .gal-item:hover img { transform: scale(1.09); filter: brightness(1); } .gal-item:hover { box-shadow: 0 8px 32px rgba(232,93,4,0.28); } /* Overlay en hover */ .gal-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.82) 0%, rgba(232,93,4,0.15) 55%, transparent 100% ); opacity: 0; transition: opacity 0.35s ease; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.1rem; } .gal-item:hover .gal-overlay { opacity: 1; } .gal-overlay-cat { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #FF8C42; margin-bottom: 0.2rem; } .gal-overlay-title { font-family: 'Anek Telugu', sans-serif; font-size: 0.92rem; font-weight: 800; color: #fff; line-height: 1.25; margin-bottom: 0.4rem; } .gal-overlay-icon { width: 32px; height: 32px; background: rgba(232,93,4,0.85); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #fff; margin-top: 0.3rem; transition: transform 0.25s ease; } .gal-item:hover .gal-overlay-icon { transform: scale(1.12); } /* Badge de categoría siempre visible (esquina) */ .gal-cat-badge { position: absolute; top: 0.6rem; left: 0.6rem; background: rgba(232,93,4,0.9); color: #fff; font-family: 'Montserrat', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 100px; backdrop-filter: blur(4px); z-index: 2; opacity: 0; transition: opacity 0.3s ease; } .gal-item:hover .gal-cat-badge { opacity: 1; } /* Estado vacío (sin imágenes en filtro) */ .gal-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: rgba(255,255,255,0.25); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; letter-spacing: 0.08em; } .gal-empty span { display: block; font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.4; } /* ══════════════════════════════════════════════════ 4. LIGHTBOX / MODAL ══════════════════════════════════════════════════ */ .gal-modal { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.96); display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .gal-modal.open { opacity: 1; pointer-events: all; } .gal-modal-inner { position: relative; max-width: 1000px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1rem; transform: scale(0.95); transition: transform 0.32s cubic-bezier(0.25,0.46,0.45,0.94); } .gal-modal.open .gal-modal-inner { transform: scale(1); } /* Imagen principal del modal */ .gal-modal-img-wrap { position: relative; width: 100%; max-height: 72vh; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 8px; overflow: visible; /* ← visible para que los botones no se corten */ border: 1px solid rgba(255,255,255,0.08); } .gal-modal-img-wrap img { max-width: 100%; max-height: 72vh; object-fit: contain; display: block; border-radius: 6px; transition: opacity 0.25s ease; } /* Botón cerrar */ .gal-modal-close { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; background: #E85D04; border: none; border-radius: 50%; color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.25s ease, transform 0.2s ease; z-index: 20; } .gal-modal-close:hover { background: #C44D00; transform: scale(1.1) rotate(90deg); } /* Botones prev/next — siempre dentro de la imagen, encima */ .gal-modal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(8px); border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: all 0.25s ease; z-index: 15; box-shadow: 0 2px 16px rgba(0,0,0,0.7); /* Elimina el texto heredado para usar solo SVG */ font-size: 0; } /* Flecha SVG gruesa centrada — prev */ .gal-modal-prev::after { content: ""; display: block; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; /* Ajuste fino de centrado visual */ margin-right: 2px; } /* Flecha SVG gruesa centrada — next */ .gal-modal-next::after { content: ""; display: block; width: 22px; height: 22px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; /* Ajuste fino de centrado visual */ margin-left: 2px; } .gal-modal-nav:hover { background: #E85D04; border-color: #E85D04; transform: translateY(-50%) scale(1.12); box-shadow: 0 4px 22px rgba(232,93,4,0.55); } /* Al hover cambia el color de la flecha SVG a blanco puro */ .gal-modal-prev:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); } .gal-modal-next:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); } /* Posición dentro de la imagen */ .gal-modal-prev { left: 12px; } .gal-modal-next { right: 12px; } @media (max-width: 820px) { .gal-modal-prev { left: 8px; } .gal-modal-next { right: 8px; } } @media (max-width: 480px) { .gal-modal-nav { width: 42px; height: 42px; } .gal-modal-prev::after, .gal-modal-next::after { width: 18px; height: 18px; } .gal-modal-prev { left: 6px; } .gal-modal-next { right: 6px; } } /* Info de la imagen */ .gal-modal-info { width: 100%; text-align: center; } .gal-modal-cat { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #FF8C42; margin-bottom: 0.3rem; } .gal-modal-title { font-family: 'Anek Telugu', sans-serif; font-size: clamp(1rem, 2.5vw, 1.4rem); font-weight: 800; color: #fff; margin-bottom: 0.35rem; } .gal-modal-desc { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.65; max-width: 560px; margin: 0 auto; } /* Contador */ .gal-modal-counter { font-family: 'Montserrat', sans-serif; font-size: 0.68rem; color: rgba(255,255,255,0.3); letter-spacing: 0.08em; margin-top: 0.25rem; } .gal-modal-counter span { color: #FF8C42; font-weight: 700; } /* Indicadores de puntos */ .gal-modal-dots { display: flex; gap: 6px; justify-content: center; margin-top: 0.5rem; flex-wrap: wrap; max-width: 280px; } .gal-modal-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; cursor: pointer; transition: all 0.25s ease; padding: 0; } .gal-modal-dot.active { background: #E85D04; transform: scale(1.4); } /* Loading spinner */ .gal-modal-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #111; } .gal-modal-spinner::after { content: ""; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,0.1); border-top-color: #E85D04; border-radius: 50%; animation: galSpin 0.75s linear infinite; } @keyframes galSpin { to { transform: rotate(360deg); } } /* ══════════════════════════════════════════════════ 5. BOTÓN FLOTANTE WHATSAPP ══════════════════════════════════════════════════ */ .whatsapp-float { position: fixed; bottom: 2rem; left: 2rem; z-index: 9990; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #25D366; border-radius: 50%; box-shadow: 0 6px 24px rgba(37,211,102,0.45); text-decoration: none; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.25s ease; animation: waPulse 2.8s ease infinite; } .whatsapp-float:hover { background: #1ebe5d; transform: translateY(-3px) scale(1.08); box-shadow: 0 10px 30px rgba(37,211,102,0.55); animation: none; } /* Ícono SVG */ .whatsapp-float .wa-icon { width: 30px; height: 30px; fill: #fff; flex-shrink: 0; } /* Texto siempre oculto */ .whatsapp-float .wa-text { display: none; } @media (max-width: 500px) { .whatsapp-float { width: 50px; height: 50px; bottom: 1.5rem; left: 1.5rem; } .whatsapp-float .wa-icon { width: 26px; height: 26px; } } @keyframes waPulse { 0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45); } 50% { box-shadow: 0 6px 30px rgba(37,211,102,0.7), 0 0 0 8px rgba(37,211,102,0.1); } } /* ══════════════════════════════════════════════════ 6. DIRECCIÓN / BLOQUE DIRECCIÓN ══════════════════════════════════════════════════ */ .gal-address-block { background: #161616; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; text-align: center; margin: 0 auto; max-width: 960px; border-radius: 0 0 10px 10px; margin-bottom: 2rem; } .gal-address-icon { font-size: 1.5rem; flex-shrink: 0; } .gal-address-text { font-family: 'Montserrat', sans-serif; font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.6; } .gal-address-text strong { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #FF8C42; margin-bottom: 0.25rem; } /* ══════════════════════════════════════════════════ 7. CLIENTES — logos reales (override del texto) ══════════════════════════════════════════════════ */ /* Corrige la opacidad 0 del CSS original para img reales */ #clientes .clients-logos img { max-width: 90px; height: 48px; object-fit: contain; filter: grayscale(100%); opacity: 0.5; transition: all 0.3s ease; width: auto; display: block; } #clientes .clients-logos img:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.08); } /* Oculta los span de texto cuando hay imágenes reales */ #clientes .clients-logos:has(img:not([style*="display:none"])) .client-logo-text { display: none; } /* ══════════════════════════════════════════════════ 8. FOOTER — solo Facebook ══════════════════════════════════════════════════ */ /* Oculta todos los sociales excepto el de Facebook */ .footer-social[aria-label="Instagram"], .footer-social[aria-label="LinkedIn"], .footer-social[aria-label="WhatsApp"] { display: none; } /* Estilo especial para el ícono de Facebook */ .footer-social[aria-label="Facebook"] { background: #1877F2; color: #fff; } .footer-social[aria-label="Facebook"]:hover { background: #1467d6; }