/* =========================================================
   SMART TOUCH - HOJA DE ESTILOS COMPLETA
   ========================================================= */

@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap");

:root {
    --brand-celeste: #14b9e4;  
    --brand-negro:   #1c1c1b;  
    --brand-gris:    #c1cacd;  
    --white: #ffffff;
    
    /* Sombras Tech */
    --shadow-sm: 0 5px 15px rgba(28, 28, 27, 0.05);
    --shadow-hover: 0 15px 35px rgba(20, 185, 228, 0.25);
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--brand-negro);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

/* ========================================================
   1. NAVBAR (MENÚ)
   ======================================================== */
.navbar {
    padding: 15px 0;
    transition: all 0.3s;
}

/* Estado Inicial (Transparente) */
.navbar:not(.affix) {
    background: transparent;
}
.navbar:not(.affix) .navbar-brand img {
    /* Invierte color del logo si es negro para verlo en fondo oscuro */
    filter: brightness(0) invert(1);
}
.navbar:not(.affix) .nav-link {
    color: var(--white) !important;
}
.navbar:not(.affix) .nav-link:hover {
    color: var(--brand-celeste) !important;
}

/* Estado Scroll (Fondo Blanco) */
.navbar.affix {
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
    padding: 10px 0;
}
.navbar.affix .navbar-brand img {
    filter: none; 
}
.navbar.affix .nav-link {
    color: var(--brand-negro);
}
.navbar.affix .nav-link:hover {
    color: var(--brand-celeste);
}

.navbar-toggler { border: none; outline: none; }


/* ========================================================
   2. HEADER PARALLAX
   ======================================================== */
.header {
    height: 100vh;
    min-height: 600px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    background-color: #000;
}
.header::after {
    content: "";
    position: absolute;
    top: -10%; left: -10%; width: 120%; height: 120%;
    /* Asegúrate de que la imagen exista en assets/imgs/header.jpg */
    background: url(../imgs/header.jpg) center/cover no-repeat;
    z-index: 0;
    /* Variable para efecto JS */
    transform: translate(var(--mouse-x, 0), var(--mouse-y, 0)) scale(1.1);
}
.header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(28, 28, 27, 0.8), rgba(20, 185, 228, 0.3));
    z-index: 1;
    pointer-events: none;
}
.hero-content-parallax {
    position: relative;
    z-index: 2;
    transform: translate(calc(var(--mouse-x, 0) * -0.5), calc(var(--mouse-y, 0) * -0.5));
}
.header .title {
    font-size: 4.5rem;
    font-weight: 800;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 5px;
    letter-spacing: -2px;
}
.header .subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: var(--brand-celeste);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Icono Mouse Animado */
.mouse-icon {
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 16px; height: 40px; width: 24px;
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 10;
}
.mouse-icon .wheel {
    position: relative; border-radius: 10px; background: var(--brand-celeste);
    width: 2px; height: 6px; top: 4px; margin: 0 auto;
    animation: drop 1.5s infinite;
}
@keyframes drop {
    0% { top: 5px; opacity: 0; }
    30% { top: 10px; opacity: 1; }
    100% { top: 20px; opacity: 0; }
}


/* ========================================================
   3. SECCIONES GENERALES & TARJETAS
   ======================================================== */
.section { padding: 80px 0; }
.bg-light { background-color: #f8f9fa !important; }

.section-title { font-size: 2rem; font-weight: 700; color: var(--brand-negro); }
.divider { height: 4px; width: 60px; background: var(--brand-celeste); margin: 25px auto; border-radius: 4px; }
.section-subtitle { color: var(--brand-gris); font-weight: 500; }

/* Tarjetas de Servicio ("Nosotros") */
.service-card {
    border: 1px solid #eee; box-shadow: var(--shadow-sm); transition: all 0.4s ease;
    border-radius: 15px; height: 100%; background: var(--white); position: relative; overflow: hidden;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 40px rgba(20, 185, 228, 0.2); border-color: transparent; }
.service-card::after {
    content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 4px;
    background: var(--brand-celeste); transition: width 0.4s ease;
}
.service-card:hover::after { width: 100%; }

.number-icon {
    font-size: 3rem; font-weight: 800; color: #e9ecef; display: block; margin-bottom: 10px; transition: color 0.3s;
}
.service-card:hover .number-icon { color: var(--brand-celeste); }


/* ========================================================
   4. PRODUCTOS Y FILTROS
   ======================================================== */
.filters { margin-bottom: 40px; }
.filter-btn {
    display: inline-block; padding: 8px 25px; margin: 5px; border-radius: 50px;
    color: var(--brand-negro); font-weight: 600; text-decoration: none; transition: all 0.3s;
    background: var(--white); border: 1px solid var(--brand-gris); cursor: pointer;
}
.filter-btn.active, .filter-btn:hover {
    background: var(--brand-celeste); color: var(--white); border-color: var(--brand-celeste);
    box-shadow: 0 5px 15px rgba(20, 185, 228, 0.4);
}

.card-inner {
    position: relative; overflow: hidden; border-radius: 15px; box-shadow: var(--shadow-sm);
    background: var(--white); transition: transform 0.3s, box-shadow 0.3s; border: 1px solid #f1f1f1;
}
.product-item { margin-bottom: 30px; }
.product-item:hover .card-inner { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

/* Efecto Zoom Imagen */
.product-item img { width: 100%; display: block; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.product-item:hover img { transform: scale(1.08); }

/* Hover Overlay (Celeste) */
.content-holder {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 185, 228, 0.92); opacity: 0; transition: opacity 0.3s;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
}
.product-item:hover .content-holder { opacity: 1; }

/* Botones dentro del hover */
.links-holder a {
    display: inline-flex; width: 45px; height: 45px; background: var(--white);
    border-radius: 50%; justify-content: center; align-items: center; margin: 0 5px; transition: transform 0.2s;
}
.links-holder a:hover { transform: scale(1.1); }
.text-holder { position: absolute; bottom: 20px; width: 100%; text-align: center; color: var(--white); }


/* ========================================================
   5. SECTORES
   ======================================================== */
.sector-card {
    border: none; border-radius: 15px; overflow: hidden; transition: all 0.3s; background: var(--white); box-shadow: var(--shadow-sm);
}
.sector-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.sector-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(20, 185, 228, 0.85);
    display: flex; justify-content: center; align-items: center; opacity: 0; transition: all 0.3s;
}
.sector-card:hover .sector-overlay { opacity: 1; }
.sector-overlay i { color: var(--white); font-size: 2.5rem; }


/* ========================================================
   6. CONTACTO (CORRECCIÓN MAPA)
   ======================================================== */
.contact-section { 
    position: relative; 
    padding: 100px 0; 
    overflow: hidden; /* Mantiene todo contenido dentro de la sección */
}

/* EL ARREGLO DEL MAPA */
.map-background {
    position: absolute; /* Lo saca del flujo para ponerlo al fondo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Ocupa todo el alto de .contact-section */
    z-index: 0;     /* Nivel inferior */
}

.map-background iframe { 
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%); 
    opacity: 0.6; 
}

/* Tarjeta Flotante (Formulario) */
.contact-card-float {
    position: relative; 
    z-index: 2; /* Nivel superior para estar sobre el mapa */
    background: rgba(255, 255, 255, 0.98); 
    padding: 40px; 
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); 
    border-top: 5px solid var(--brand-celeste);
}

.form-control {
    background: #fdfdfd; border: 1px solid #e1e1e1; border-radius: 8px; padding: 12px; margin-bottom: 15px;
}
.form-control:focus { background: var(--white); border-color: var(--brand-celeste); box-shadow: 0 0 0 3px rgba(20, 185, 228, 0.1); }

.btn-primary {
    background: var(--brand-celeste); border: none; padding: 12px; font-weight: 600; border-radius: 50px;
}
.btn-primary:hover { background: #11a2c9; }


/* ========================================================
   7. SOCIAL & FOOTER
   ======================================================== */
.social-btn {
    width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); transition: transform 0.3s;
}
.social-btn:hover { transform: scale(1.1); }

.floating-chat {
    position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column-reverse; gap: 10px;
}
.btn-whatsapp { background-color: #25D366; width: 60px; height: 60px; }
.btn-facebook { background-color: #1877F2; }
.btn-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }


/* ========================================================
   8. GALERÍA MODAL
   ======================================================== */
.modal-backdrop.show { opacity: 0.8; background-color: #000; }
#galleryModal .modal-content { box-shadow: none; background-color: transparent; border: none; }
#galleryModal .modal-body { 
    background: var(--white); border-radius: 10px; padding: 20px; 
    box-shadow: 0 20px 60px rgba(0,0,0,0.2); position: relative; 
}

.gallery-image-container { 
    position: relative; overflow: hidden; border-radius: 8px; display: flex; justify-content: center; 
}
.gallery-main-img { 
    max-height: 80vh; object-fit: contain; margin: auto; display: block; cursor: pointer; 
}

/* Flechas de Navegación */
.gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    background-color: var(--brand-negro); color: var(--white);
    width: 60px; height: 60px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; font-weight: bold; text-decoration: none; z-index: 100;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; user-select: none;
}
.gallery-arrow:hover { 
    background-color: var(--brand-celeste); color: var(--white); 
    transform: translateY(-50%) scale(1.1); text-decoration: none; 
}

.gallery-control-prev { left: -30px; }
.gallery-control-next { right: -30px; }

@media (max-width: 768px) {
    .gallery-control-prev { left: 10px; }
    .gallery-control-next { right: 10px; }
    .gallery-arrow { width: 45px; height: 45px; font-size: 1.5rem; opacity: 0.8; }
}

.gallery-close-btn {
    position: absolute; top: 5px; right: 15px; font-size: 3rem; color: var(--brand-negro);
    z-index: 10; transition: all 0.3s; opacity: 0.8; line-height: 1; background: none; border: none;
}
.gallery-close-btn:hover { color: var(--brand-celeste); opacity: 1; }

/* Variables CSS JS */
:root { --mouse-x: 0px; --mouse-y: 0px; }