/* ===================================
   Sistema Responsive Fluido Automático
   Se adapta automáticamente sin necesidad de editar código
   =================================== */

/* Variables CSS Fluidas que se ajustan automáticamente al viewport */
:root {
    /* Tipografía fluida con clamp() - min, preferido, max */
    --text-xs: clamp(0.75rem, 1.5vw + 0.5rem, 0.875rem);
    --text-sm: clamp(0.875rem, 2vw + 0.5rem, 1rem);
    --text-base: clamp(1rem, 2.5vw + 0.5rem, 1.125rem);
    --text-lg: clamp(1.125rem, 3vw + 0.5rem, 1.5rem);
    --text-xl: clamp(1.5rem, 4vw + 0.5rem, 2rem);
    --text-2xl: clamp(2rem, 5vw + 0.5rem, 3rem);
    --text-3xl: clamp(2.5rem, 6vw + 0.5rem, 4.5rem);
    
    /* Espaciados fluidos */
    --space-xs: clamp(0.25rem, 1vw, 0.5rem);
    --space-sm: clamp(0.5rem, 2vw, 1rem);
    --space-md: clamp(1rem, 3vw, 2rem);
    --space-lg: clamp(2rem, 4vw, 3rem);
    --space-xl: clamp(3rem, 6vw, 5rem);
    
    /* Contenedor fluido */
    --container-width: min(95%, 1400px);
    --container-padding: clamp(1rem, 5vw, 3rem);
}

/* ===================================
   Aplicar tipografía fluida automática
   =================================== */

/* Títulos */
h1,
.hero-title,
.slide-title {
    font-size: var(--text-3xl) !important;
    line-height: 1.2;
}

h2,
.section-title {
    font-size: var(--text-2xl) !important;
    line-height: 1.3;
}

h3,
.service-card h3,
.feature-item h3 {
    font-size: var(--text-xl) !important;
    line-height: 1.4;
}

/* Textos */
p,
.slide-text,
.section-subtitle {
    font-size: var(--text-base) !important;
    line-height: 1.6;
}

small,
.text-small {
    font-size: var(--text-sm) !important;
}

/* ===================================
   Espaciados fluidos automáticos
   =================================== */

.section {
    padding: var(--space-xl) 0;
}

.card,
.service-card,
.feature-item {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

/* ===================================
   Hero Slider Fluido
   =================================== */

.hero-slider {
    height: clamp(600px, 100vh, 900px);
    min-height: 100vh;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Eliminar cualquier margen entre header y hero */
.header + .hero-slider,
.header + section,
#hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
}

.slide-content {
    padding: var(--space-lg);
    max-width: var(--container-width);
}

/* Botón de teléfono del hero */
.hero-phone-button {
    font-size: var(--text-lg) !important;
    padding: var(--space-sm) var(--space-md) !important;
}

.hero-phone-cta p {
    font-size: var(--text-base) !important;
}

/* Botones generales */
.btn {
    font-size: var(--text-base) !important;
    padding: var(--space-sm) var(--space-lg) !important;
}

/* ===================================
   Grids Automáticos
   Responsive sin media queries
   =================================== */

/* Grid automático para servicios */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-md);
}

/* Grid automático para features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: var(--space-md);
}

/* Grid automático para galería */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    gap: var(--space-md);
}

/* ===================================
   Contenedor Fluido
   =================================== */

.container {
    width: var(--container-width) !important;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    margin-left: auto;
    margin-right: auto;
}

/* ===================================
   Imágenes Responsive Automáticas
   =================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.responsive-image {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ===================================
   Flexbox Responsive
   =================================== */

.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.flex-responsive > * {
    flex: 1 1 min(100%, 300px);
}

/* ===================================
   Botones flotantes con tamaño fluido
   =================================== */

.floating-btn {
    width: clamp(45px, 5vw, 60px);
    height: clamp(45px, 5vw, 60px);
}



/* ===================================
   Logo fluido
   =================================== */

.logo {
    height: clamp(60px, 10vw, 120px) !important;
}

.header.scrolled .logo {
    height: clamp(50px, 8vw, 90px) !important;
}

/* ===================================
   Slider controls fluidos
   =================================== */

.slider-btn {
    width: clamp(35px, 4vw, 50px);
    height: clamp(35px, 4vw, 50px);
}

.slider-btn svg {
    width: clamp(18px, 2vw, 28px);
    height: clamp(18px, 2vw, 28px);
}

/* ===================================
   Dots del slider
   =================================== */

.dot {
    width: clamp(8px, 1vw, 12px);
    height: clamp(8px, 1vw, 12px);
}

/* ===================================
   Galería responsive automática
   =================================== */

.gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)) !important;
    gap: var(--space-md) !important;
}

/* Asegurar que los items ocultos NO se muestren - PRIORIDAD MÁXIMA */
.gallery-item.hidden {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Items visibles deben mostrarse */
.gallery-item:not(.hidden) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===================================
   Footer fluido
   =================================== */

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: var(--space-lg);
}

.footer-logo {
    height: clamp(80px, 12vw, 140px);
}

/* ===================================
   Formularios fluidos
   =================================== */

.form-group input,
.form-group textarea,
.form-group select {
    font-size: var(--text-base) !important;
    padding: var(--space-sm);
}

/* Grid de contacto responsive automático */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)) !important;
    gap: var(--space-lg) !important;
}

.contact-info,
.contact-form {
    padding: var(--space-lg) !important;
}

.info-item {
    padding: var(--space-md) !important;
    gap: var(--space-sm) !important;
}

.info-icon {
    width: clamp(40px, 5vw, 50px) !important;
    height: clamp(40px, 5vw, 50px) !important;
    min-width: clamp(40px, 5vw, 50px) !important;
}

/* ===================================
   Ajustes solo para móvil muy pequeño
   =================================== */

@media (max-width: 375px) {
    :root {
        --text-3xl: clamp(1.75rem, 8vw, 2.5rem);
    }
    
    .hero-phone-button {
        padding: var(--space-xs) var(--space-sm) !important;
    }
}

/* ===================================
   Utilidades
   =================================== */

/* FORZAR DROPDOWN MÓVIL VISIBLE */
@media (max-width: 768px) {
    .dropdown.active .dropdown-menu {
        max-height: 1000px !important;
        height: auto !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
    }
    
    .dropdown.active .dropdown-menu li {
        display: block !important;
    }
    
    .dropdown.active .dropdown-menu a {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Ocultar en móvil */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
    
    /* Asegurar que TODOS los grids sean de 1 columna en móvil */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    /* Forzar que contact-grid sea 1 columna */
    .contact-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Hero sections responsive */
    .contact-hero,
    .about-hero,
    .gallery-hero,
    .page-hero {
        padding: 4rem 0 3rem !important;
    }
    
    /* Info items en móvil */
    .info-item {
        flex-direction: row !important;
        text-align: left !important;
    }
    
    /* Formularios en móvil */
    .contact-form,
    .contact-info {
        padding: 2rem !important;
    }
}

/* Ocultar en desktop */
@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }
    
    .show-desktop {
        display: block !important;
    }
}

/* Texto centrado en móvil */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

/* Stack en móvil */
@media (max-width: 768px) {
    .stack-mobile {
        flex-direction: column !important;
    }
    
    .stack-mobile > * {
        width: 100% !important;
    }
}