/* CSS CRÍTICO para eliminar espacios beige y optimizar mobile COMPLETAMENTE */

/* ===================
   ELIMINACIÓN TOTAL DE ESPACIOS BEIGE
====================== */

/* Override CRÍTICO para body y html */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    overflow-x: hidden !important;
}

/* Body padding MÍNIMO */
body {
    padding-top: 60px !important; /* Reducido drásticamente */
}

body.logged-in {
    padding-top: 60px !important;
}

/* ===================
   HEADER ULTRA COMPACTO
====================== */

.modern-header {
    padding: 10px 0 !important; /* Aumentado de 5px */
    min-height: 80px !important; /* Aumentado de 60px */
    height: 80px !important; /* Aumentado de 60px */
    background-color: rgba(17, 17, 17, 1) !important;
}

.modern-header.scrolled {
    padding: 8px 0 !important; /* Aumentado de 3px */
    min-height: 70px !important; /* Aumentado de 55px */
    height: 70px !important; /* Aumentado de 55px */
}

/* ===================
   HERO SECTION - ELIMINACIÓN TOTAL DE ESPACIOS
====================== */

.hero-section {
    margin-top: 0 !important; /* ELIMINAR margin negativo */
    padding: 0 !important; /* ELIMINAR padding completamente */
    padding-top: 0px !important; /* Eliminado completamente el padding-top */
    padding-bottom: 40px !important; /* Aumentado de 20px a 40px para más espacio */
    min-height: calc(130vh - 80px) !important; /* Aumentado de 120vh a 130vh */
    height: auto !important; /* No forzar altura */
    background-attachment: fixed !important;
    background-position: center top !important;
    background-size: cover !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Container del hero SIN padding extra */
.hero-section .container {
    padding: 0 15px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1200px !important;
}

/* ===================
   MOBILE CRÍTICO - ESPACIOS MÍNIMOS
====================== */

@media (max-width: 991.98px) {
    body,
    body.logged-in {
        padding-top: 75px !important; /* Ajustado al nuevo header */
    }
    
    .modern-header {
        padding: 8px 0 !important; /* Aumentado de 3px */
        min-height: 75px !important; /* Aumentado de 55px */
        height: 75px !important; /* Aumentado de 55px */
    }
    
    .hero-section {
        margin-top: 0 !important;
        padding: 0px 0 15px 0 !important; /* Eliminado el padding-top completamente */
        min-height: calc(110vh - 75px) !important; /* Aumentado de 100vh a 110vh para tablet */
        background-attachment: scroll !important; /* Mejor para mobile */
    }
    
    .hero-title {
        font-size: 2.6rem !important; /* Aumentado aún más */
        margin: 5px 0 10px 0 !important;
        line-height: 1.1 !important;
    }
    
    .hero-subtitle {
        font-size: 1.4rem !important; /* Aumentado aún más */
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
    }
    
    .hero-text {
        font-size: 1.2rem !important; /* Aumentado aún más */
        margin: 0 0 15px 0 !important;
        line-height: 1.3 !important;
    }
    
    .hero-buttons-container {
        margin-top: 15px !important;
    }
}

@media (max-width: 768px) {
    body,
    body.logged-in {
        padding-top: 70px !important; /* Ajustado al nuevo header */
    }
    
    .modern-header {
        padding: 6px 0 !important; /* Aumentado de 2px */
        min-height: 70px !important; /* Aumentado de 50px */
        height: 70px !important; /* Aumentado de 50px */
    }
    
    .hero-section {
        padding: 0px 0 12px 0 !important; /* Eliminado padding-top completamente */
        min-height: calc(105vh - 70px) !important; /* Aumentado de 100vh a 105vh para mobile */
    }
    
    .hero-title {
        font-size: 2.4rem !important; /* Aumentado más */
        margin: 3px 0 8px 0 !important;
    }
    
    .hero-subtitle {
        font-size: 1.3rem !important; /* Aumentado más */
        margin: 0 0 6px 0 !important;
    }
    
    .hero-text {
        font-size: 1.1rem !important; /* Aumentado más */
        margin: 0 0 12px 0 !important;
    }
}

@media (max-width: 576px) {
    body,
    body.logged-in {
        padding-top: 65px !important; /* Ajustado al nuevo header */
    }
    
    .modern-header {
        padding: 5px 0 !important; /* Aumentado de 1px */
        min-height: 65px !important; /* Aumentado de 45px */
        height: 65px !important; /* Aumentado de 45px */
    }
    
    .hero-section {
        padding: 0px 0 10px 0 !important; /* Eliminado padding-top completamente */
        min-height: calc(100vh - 65px) !important; /* Ajustado al nuevo header */
    }
    
    .hero-section .container {
        padding: 0 10px !important;
    }
    
    .hero-title {
        font-size: 2.2rem !important; /* Aumentado significativamente */
        margin: 2px 0 6px 0 !important;
    }
    
    .hero-subtitle {
        font-size: 1.2rem !important; /* Aumentado significativamente */
        margin: 0 0 5px 0 !important;
    }
    
    .hero-text {
        font-size: 1rem !important; /* Aumentado significativamente */
        margin: 0 0 10px 0 !important;
    }
    
    .hero-buttons-container {
        margin-top: 10px !important;
    }
    
    .hero-btn {
        font-size: 1rem !important; /* Aumentado más de 0.9rem */
        padding: 12px 20px !important; /* Aumentado el padding */
        margin: 3px !important;
    }
}

/* ===================
   ELIMINACIÓN DE COLORES BEIGE/CREMA
====================== */

/* Forzar fondo del hero section a ser de la imagen, no beige */
.hero-section {
    background-color: #000 !important; /* Negro de fallback, no beige */
}

/* Eliminar cualquier background beige de containers */
.container,
.container-fluid,
.row,
.col-lg-10,
[class*="col-"] {
    background-color: transparent !important;
}

/* Override para section padding que pueda estar causando espacios */
section {
    padding: 20px 0 !important; /* Mínimo para secciones */
}

.section-padding {
    padding: 15px 0 !important;
}

/* ===================
   PRODUCTOS SECTION AJUSTADA
====================== */

.site-logo {
    height: 65px !important; /* Aumentado de 50px */
    transition: all 0.3s ease !important;
}

.scrolled .site-logo {
    height: 55px !important; /* Aumentado de 45px */
}

@media (max-width: 991.98px) {
    .site-logo {
        height: 60px !important; /* Aumentado de 45px */
    }
    
    .scrolled .site-logo {
        height: 50px !important; /* Aumentado de 40px */
    }
}

@media (max-width: 768px) {
    .site-logo {
        height: 55px !important; /* Aumentado de 40px */
    }
    
    .scrolled .site-logo {
        height: 45px !important; /* Aumentado de 35px */
    }
}

@media (max-width: 576px) {
    .site-logo {
        height: 50px !important; /* Aumentado de 35px */
    }
    
    .scrolled .site-logo {
        height: 40px !important; /* Aumentado de 30px */
    }
}

/* ===================
   OVERRIDE ABSOLUTO - ELIMINACIÓN DE ESPACIOS
====================== */

/* Si hay algún estilo causando espacios, eliminarlo */
* {
    box-sizing: border-box !important;
}

/* Eliminar cualquier margin o padding problemático */
.hero-section .row,
.hero-section .col-lg-10 {
    margin: 0 !important;
    padding: 0 5px !important;
}

/* Asegurar que no haya scroll horizontal */
html {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Override para cualquier clase que esté agregando espacios */
.glow-effect {
    margin: 0 !important;
    padding: 0 !important;
}

.mt-5 {
    margin-top: 1rem !important; /* Reducir drasticamente */
}

/* ===================
   PRODUCTOS SECTION AJUSTADA
====================== */

.modern-products {
    padding: 20px 0 !important; /* Reducir espacio entre secciones */
    margin: 0 !important;
}

.section-title {
    margin-bottom: 15px !important; /* Reducir espacio del título */
    padding-bottom: 10px !important;
}

.section-title h2 {
    margin-bottom: 8px !important;
}

.section-title p {
    margin-bottom: 0 !important;
}