/* ============================================================ KATARAS EXCAVACIONES — galeria.css Depende de Swiper CSS (importar vía CDN en el ) ============================================================ */ /* ============================================================ SECCIÓN GALERÍA ============================================================ */ .galeria-section { padding: 96px 0; background: var(--color-dark); position: relative; overflow: hidden; } /* Patrón diagonal de fondo — textura metálica/industrial */ .galeria-section::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient( -55deg, transparent, transparent 24px, rgba(255, 255, 255, .018) 24px, rgba(255, 255, 255, .018) 25px ); pointer-events: none; } /* Manchas de color de fondo */ .galeria-section::after { content: ''; position: absolute; bottom: -120px; right: -120px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(245, 168, 0, .08) 0%, transparent 70%); pointer-events: none; } /* ── Encabezado: override para fondo oscuro ── */ .galeria-section .section-tag { color: var(--color-dark); background: var(--color-yellow); } .galeria-section .section-title { color: #fff; } .galeria-section .section-title .highlight { color: var(--color-yellow); } .galeria-section .section-title .highlight::after { background: var(--color-yellow); opacity: .3; } .galeria-section .section-description { color: rgba(255, 255, 255, .62); } .galeria-section .section-description strong { color: rgba(255, 255, 255, .9); } /* ============================================================ SLIDER CONTAINER ============================================================ */ .galeria-slider-container { position: relative; margin-bottom: 56px; /* Sangría lateral para que las flechas de nav tengan espacio */ padding: 0 0 48px; } /* ============================================================ SWIPER — OVERRIDES ============================================================ */ .galeria-swiper { overflow: visible !important; padding-bottom: 4px !important; } /* ============================================================ GALERÍA ITEM (CARD) ============================================================ */ .galeria-item { background: #111827; border-radius: 6px; overflow: hidden; border: 1.5px solid rgba(255, 255, 255, .07); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; height: 100%; display: flex; flex-direction: column; } .swiper-slide-active .galeria-item, .galeria-item:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(0, 0, 0, .45); border-color: rgba(245, 168, 0, .35); } /* ── Contenedor de imagen ── */ .galeria-imagen { position: relative; overflow: hidden; aspect-ratio: 4/3; flex-shrink: 0; } .galeria-imagen img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); } .galeria-item:hover .galeria-imagen img { transform: scale(1.07); } /* ── Overlay al hover ── */ .galeria-overlay { position: absolute; inset: 0; background: rgba(27, 62, 150, .72); display: flex; align-items: center; justify-content: center; opacity: 0; cursor: pointer; transition: opacity .3s ease; backdrop-filter: blur(2px); } .galeria-item:hover .galeria-overlay { opacity: 1; } .overlay-content { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; transform: translateY(10px); transition: transform .3s ease; } .galeria-item:hover .overlay-content { transform: translateY(0); } .overlay-content i { font-size: 2rem; color: var(--color-yellow); filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); } .overlay-content span { font-family: var(--font-body); font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: #fff; } /* ── Franja de acento superior en la imagen ── */ .galeria-imagen::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--color-yellow); z-index: 1; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .galeria-item:hover .galeria-imagen::before { transform: scaleX(1); } /* ── Info del proyecto ── */ .galeria-info { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .galeria-titulo { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .03em; color: #fff; line-height: 1.1; transition: color .2s ease; } .galeria-item:hover .galeria-titulo { color: var(--color-yellow); } .galeria-detalles { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; } .galeria-detalles span { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: .72rem; font-weight: 600; color: rgba(255, 255, 255, .5); text-transform: uppercase; letter-spacing: .07em; } .galeria-detalles span i { font-size: .65rem; color: var(--color-yellow); } .detalle-ubicacion { color: rgba(255, 255, 255, .7) !important; } /* ============================================================ SWIPER — NAVEGACIÓN (flechas personalizadas) ============================================================ */ .swiper-button-prev, .swiper-button-next { width: 48px !important; height: 48px !important; background: var(--color-blue); border-radius: 4px; border: 2px solid rgba(255, 255, 255, .1); top: 40% !important; transition: background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .swiper-button-prev { left: -20px !important; } .swiper-button-next { right: -20px !important; } /* Ocultar el ícono por defecto de Swiper */ .swiper-button-prev::after, .swiper-button-next::after { display: none !important; } /* Usar nuestros íconos FontAwesome */ .swiper-button-prev i, .swiper-button-next i { font-size: 1rem; color: #fff; transition: color .22s ease; } .swiper-button-prev:hover, .swiper-button-next:hover, .swiper-button-prev:focus, .swiper-button-next:focus { background: var(--color-yellow); border-color: var(--color-yellow); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245, 168, 0, .3); outline: none; } .swiper-button-prev:hover i, .swiper-button-next:hover i { color: var(--color-dark); } /* Estado deshabilitado */ .swiper-button-disabled { opacity: .35 !important; cursor: not-allowed !important; } /* ============================================================ SWIPER — PAGINACIÓN (bullets) ============================================================ */ .swiper-pagination { bottom: 0 !important; } .swiper-pagination-bullet { width: 8px !important; height: 8px !important; background: rgba(255, 255, 255, .25) !important; opacity: 1 !important; border-radius: 2px !important; transition: width .25s ease, background .25s ease !important; } .swiper-pagination-bullet-active { background: var(--color-yellow) !important; width: 24px !important; border-radius: 2px !important; } /* ============================================================ CTA FINAL ============================================================ */ .galeria-cta { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; padding: 32px 40px; background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .1); border-left: 5px solid var(--color-yellow); border-radius: 6px; } .galeria-cta .cta-text { font-size: clamp(.9rem, 1.2vw, 1.05rem); color: rgba(255, 255, 255, .8); font-weight: 500; } .galeria-cta .cta-text i { color: var(--color-yellow); margin-right: 6px; } .btn-whatsapp-gallery { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; background: var(--color-yellow); color: var(--color-dark); font-family: var(--font-body); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: .07em; text-decoration: none; border-radius: 4px; border: 2px solid var(--color-yellow); white-space: nowrap; position: relative; overflow: hidden; transition: color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; } .btn-whatsapp-gallery::before { content: ''; position: absolute; inset: 0; background: #fff; transform: translateY(100%); transition: transform .28s cubic-bezier(.4,0,.2,1); z-index: 0; } .btn-whatsapp-gallery > * { position: relative; z-index: 1; } .btn-whatsapp-gallery:hover, .btn-whatsapp-gallery:focus { color: var(--color-blue); border-color: #fff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(245, 168, 0, .3); outline: none; } .btn-whatsapp-gallery:hover::before, .btn-whatsapp-gallery:focus::before { transform: translateY(0); } .btn-whatsapp-gallery i { font-size: 1rem; } /* ============================================================ MODAL DE IMAGEN (implementación básica, activado por JS) ============================================================ */ .galeria-modal { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(2, 2, 2, .92); align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; backdrop-filter: blur(6px); } .galeria-modal.open { display: flex; animation: modalFadeIn .25s ease; } .galeria-modal-img { max-width: 90vw; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 32px 80px rgba(0, 0, 0, .7); border: 2px solid rgba(245, 168, 0, .3); } .galeria-modal-close { position: absolute; top: 20px; right: 24px; width: 40px; height: 40px; background: var(--color-yellow); border: none; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--color-dark); transition: background .2s ease, transform .2s ease; } .galeria-modal-close:hover { background: #fff; transform: rotate(90deg); } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1100px) { .swiper-button-prev { left: 0 !important; } .swiper-button-next { right: 0 !important; } } @media (max-width: 768px) { .galeria-section { padding: 72px 0; } .galeria-slider-container { padding-bottom: 40px; } .swiper-button-prev, .swiper-button-next { display: none !important; } .galeria-cta { flex-direction: column; align-items: flex-start; padding: 24px; gap: 16px; } .btn-whatsapp-gallery { width: 100%; justify-content: center; } } @media (max-width: 480px) { .galeria-detalles { gap: 4px 8px; } }