/* =========================================
   VARIABLES & RESET
========================================= */
:root {
    --primary: #005b96;
    --secondary: #e63946;
    --dark: #1d3557;
    --light: #f1faee;
    --gray: #6c757d;
    --bg: #ffffff;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--dark);
    line-height: 1.6;
    background-color: var(--bg);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center { text-align: center; }
.mt-4 { margin-top: 2rem; }
.bg-light { background-color: #f8f9fa; }
.subtitle { color: var(--gray); font-size: 1.1rem; margin-bottom: 30px; }

/* =========================================
   TYPOGRAPHY & BUTTONS
========================================= */
h1, h2, h3 { color: var(--dark); margin-bottom: 15px; }
h2 { font-size: 2.2rem; margin-bottom: 30px; text-align: center; }

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 91, 150, 0.3);
}

.btn-primary:hover { background-color: #004573; transform: translateY(-2px); }

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover { background-color: var(--primary); color: #fff; }

.btn-sm {
    padding: 8px 15px;
    font-size: 0.9rem;
}

/* =========================================
   NAVBAR & HERO
========================================= */
.navbar {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Separación corregida para el logo y el botón Call Now */
.nav-content { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;
}

.logo { font-size: 1.5rem; font-weight: 800; color: var(--dark); }

.hero {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(241,250,238,1) 0%, rgba(255,255,255,1) 100%);
}

.hero-logo { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; margin-bottom: 20px; }
.hero h1 { font-size: 3rem; line-height: 1.2; }
.hero p { font-size: 1.2rem; color: var(--gray); max-width: 600px; margin: 0 auto 30px; }

/* =========================================
   SERVICES
========================================= */
#services { padding: 80px 0; }
.service-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px;
}
.service-card {
    background: #fff; padding: 40px 30px; border-radius: 10px; text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); transition: var(--transition);
}
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.icon-box {
    width: 70px; height: 70px; margin: 0 auto 20px;
    background: var(--light); border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 2rem; color: var(--primary);
}
.service-card:nth-child(2) .icon-box { color: var(--secondary); }

/* =========================================
   OUR RECENT WORK (GALERÍA)
========================================= */
.work-gallery { padding: 60px 0; background: #fff; }
.gallery-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 30px; }
.tab-btn {
    padding: 10px 25px; border: 2px solid var(--primary); background: transparent;
    color: var(--primary); border-radius: 25px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.tab-btn.active, .tab-btn:hover { background: var(--primary); color: #fff; }
.grid-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; }
.gallery-item {
    position: relative; border-radius: 8px; overflow: hidden; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); height: 250px; background: #000;
}
/* Se agregó object-position: center para forzar el recorte perfectamente al centro */
.gallery-item img, .gallery-item video {
    width: 100%; height: 100%; object-fit: cover; object-position: center; transition: var(--transition); opacity: 0.9;
}
.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.05); opacity: 1; }
.video-item .play-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 3rem; color: rgba(255,255,255,0.8); pointer-events: none;
}

/* =========================================
   LIGHTBOXES (Modales)
========================================= */
.lightbox {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9);
    display: flex; justify-content: center; align-items: center; z-index: 2000;
    opacity: 0; visibility: hidden; transition: var(--transition);
}
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox img { max-width: 90%; max-height: 90%; border-radius: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }

/* Ajuste para que los videos verticales y horizontales se vean bien */
.video-wrapper { 
    width: 90%; 
    max-width: 800px; 
    display: flex; 
    justify-content: center; 
}
.video-wrapper video { 
    width: 100%; 
    max-height: 80vh; 
    object-fit: contain; 
    border-radius: 5px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.5); 
}

.close-lightbox, .close-video {
    position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #fff; cursor: pointer; z-index: 2001;
}

/* =========================================
   REVIEWS & CONTACT
========================================= */
#reviews { padding: 80px 0; }
#contact { padding: 80px 0; background: #fff; }
.contact-info i { font-size: 1.5rem; color: var(--primary); margin-right: 10px; }
.contact-info a { color: var(--dark); text-decoration: none; font-weight: 600; font-size: 1.2rem; }
.contact-info a:hover { color: var(--primary); }

/* =========================================
   FOOTER
========================================= */
footer { background: var(--dark); color: #fff; padding: 30px 0; }
.footer-content p { opacity: 0.8; font-size: 0.9rem; }

/* =========================================
   BOTÓN FLOTANTE SMS
========================================= */
.floating-container { position: fixed; bottom: 30px; right: 30px; z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; }
.floating-options {
    display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(20px); transition: var(--transition);
}
.floating-container.active .floating-options { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.float-opt { display: flex; align-items: center; gap: 10px; text-decoration: none; justify-content: flex-end; }
.lang-label {
    background: #fff; color: var(--dark); padding: 5px 12px; border-radius: 20px;
    font-size: 0.85rem; font-weight: 600; box-shadow: 0 4px 10px rgba(0,0,0,0.1); white-space: nowrap;
}
.mini-btn {
    width: 45px; height: 45px; border-radius: 50%; background: var(--primary); color: #fff;
    display: flex; justify-content: center; align-items: center; font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: var(--transition);
}
.mini-btn:hover { background: #004573; transform: scale(1.1); }
.main-float-btn {
    width: 60px; height: 60px; border-radius: 50%; background: var(--secondary); color: #fff;
    display: flex; justify-content: center; align-items: center; font-size: 1.8rem;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4); cursor: pointer; transition: var(--transition);
}
.main-float-btn .close-icon { display: none; }
.floating-container.active .main-float-btn { background: var(--dark); transform: rotate(90deg); }
.floating-container.active .main-float-btn .show-icon { display: none; }
.floating-container.active .main-float-btn .close-icon { display: block; }

/* =========================================
   RESPONSIVE DESIGN (MÓVILES)
========================================= */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .floating-container { bottom: 20px; right: 20px; }
    
    /* Configuración de galería en móvil: 2 columnas, altura simétrica y corte al centro */
    .grid-gallery { 
        grid-template-columns: repeat(2, 1fr); 
        gap: 10px; 
    }
    .gallery-item { 
        height: 200px; 
    }
}

@media (max-width: 480px) {
    .logo { font-size: 1.1rem; }
    
    /* Altura más adaptada para pantallas muy pequeñas */
    .gallery-item { 
        height: 160px; 
    }
}