/* =============================================================================
   📱 RESPONSIVE FIXES — IRONION SARL
   Correcciones de layout responsive para todos los breakpoints.
   NO modifica diseño visual, colores ni tipografía. Solo layout/posición.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   🌐 GLOBAL — Prevenir scroll horizontal en todos los dispositivos
   ───────────────────────────────────────────────────────────────────────────── */

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video, svg, iframe {
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────────
   📦 CONTAINER — Padding lateral adaptativo
   ───────────────────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    padding-left: max(16px, var(--grid-gutter, 24px));
    padding-right: max(16px, var(--grid-gutter, 24px));
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🎬 NAVBAR — Responsive adaptativo (tablet + mobile)
   ───────────────────────────────────────────────────────────────────────────── */

/* Asegurar que el toggle siempre tenga posición relativa correcta */
.navbar-premium .container {
    position: relative;
}

/* TABLET (768px - 1023px): ocultar la nav y mostrar hamburguesa */
@media (max-width: 1023px) {
    .mobile-menu-toggle {
        display: flex !important;
        flex-shrink: 0;
    }

    .navbar-nav {
        display: flex;
        position: fixed;
        top: 0;
        right: -100%;
        width: min(320px, 85vw);
        height: 100vh;
        background: rgba(11, 13, 15, 0.98);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 48px 32px;
        gap: 8px;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5);
        z-index: 1500;
        overflow-y: auto;
    }

    .navbar-nav.active {
        right: 0;
    }

    .navbar-nav li {
        width: 100%;
        text-align: center;
    }

    .navbar-link {
        font-size: 18px;
        display: block;
        padding: 14px 16px;
        width: 100%;
    }

    /* Botón Devis dentro del menú móvil */
    .navbar-nav .btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    /* Dropdown dentro del menú móvil: siempre visible, sin animación */
    .navbar-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none !important;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        min-width: unset;
        width: 100%;
        margin-top: 4px;
        padding: 4px 0;
        box-shadow: none;
        pointer-events: auto;
    }

    .navbar-nav .dropdown-menu::before {
        display: none;
    }

    .navbar-nav li:hover::after {
        display: none;
    }

    /* Ocultar el triángulo dropdown-toggle en móvil */
    .navbar-nav .dropdown-toggle::after {
        display: none;
    }

    .dropdown-item {
        text-align: center;
        white-space: normal;
    }

    /* Overlay oscuro detrás del menú */
    .navbar-nav.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🦸 HERO SECTION — Tamaños y paddings mobile-first
   ───────────────────────────────────────────────────────────────────────────── */

/* Evitar que el hero quede pegado a la barra de navegación */
.hero-premium {
    padding-top: var(--header-height, 72px);
    min-height: 100svh; /* usar svh para mejor soporte en móviles */
    min-height: 100vh; /* fallback */
}

/* CTAs del hero: apilados verticalmente en móvil */
@media (max-width: 767px) {
    .hero-content {
        max-width: 100%;
        padding: 16px 0;
    }

    .hero-headline {
        font-size: clamp(28px, 8vw, 44px);
        word-break: break-word;
        hyphens: auto;
    }

    .hero-description {
        font-size: 15px;
        max-width: 100%;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-ctas .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .hero-scroll-indicator {
        bottom: 20px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hero-headline {
        font-size: clamp(36px, 6vw, 56px);
    }

    .hero-ctas {
        flex-wrap: wrap;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🎴 SERVICE CARDS EN GRID — Alturas fijas problemáticas en mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Los card con height: 400px inline se deben adaptar */
    .card-premium.card-image[style*="height: 400px"] {
        height: 260px !important;
    }

    /* Grids con minmax que desbordan en pantallas pequeñas */
    [style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: repeat(auto-fit, minmax(300px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
        grid-template-columns: 1fr !important;
    }

    [style*="grid-template-columns: repeat(auto-fit, minmax(250px"] {
        grid-template-columns: 1fr !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    [style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📊 STATS GRID — Adaptación mobile
   ───────────────────────────────────────────────────────────────────────────── */

.stats-grid {
    gap: var(--space-24, 24px);
}

@media (max-width: 479px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-number {
        font-size: 40px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🦶 FOOTER — Adaptación tablets y mobile
   ───────────────────────────────────────────────────────────────────────────── */

/* Footer grid corregido para mobile: la versión inline puede desbordarse */
@media (max-width: 767px) {
    /* Footer grid inline con minmax(250px) */
    footer [style*="grid-template-columns: repeat(auto-fit, minmax(250px"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-32, 32px) !important;
    }

    footer [style*="padding: var(--space-80)"] {
        padding-top: var(--space-48, 48px) !important;
        padding-bottom: var(--space-32, 32px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    footer [style*="grid-template-columns: repeat(auto-fit, minmax(250px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--space-32, 32px) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🌟 CTA SECTIONS — Glow div que desborda en mobile
   ───────────────────────────────────────────────────────────────────────────── */

/* El div de glow con width/height fijos de 600px desborda en mobile */
@media (max-width: 767px) {
    [style*="width: 600px"][style*="height: 600px"] {
        width: min(400px, 90vw) !important;
        height: min(400px, 90vw) !important;
    }

    /* CTA card padding reducido */
    .card-premium[style*="padding: var(--space-64)"] {
        padding: var(--space-32, 32px) !important;
    }

    /* CTA flex en columna */
    [style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] {
        flex-direction: column;
        align-items: stretch;
    }

    [style*="display: flex"][style*="justify-content: center"][style*="flex-wrap: wrap"] .btn {
        width: 100%;
        justify-content: center;
    }

    /* Texto h1/h2 en secciones CTA */
    [style*="font-size: var(--text-h1)"] {
        font-size: clamp(24px, 6vw, var(--text-h1, 64px));
        word-break: break-word;
    }

    [style*="font-size: var(--text-h2)"] {
        font-size: clamp(22px, 5.5vw, var(--text-h2, 44px));
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📄 PÁGINAS DE SERVICIOS — Padding del hero doble
   ───────────────────────────────────────────────────────────────────────────── */

/* La sección hero de servicios tiene: padding-top en main (80px) + 
   padding: calc(var(--header-height) + 80px) en la propia sección.
   Corregimos para que no haya doble padding */
main[style*="padding-top: 80px"] > section:first-child[style*="padding: calc(var(--header-height)"] {
    padding-top: var(--space-80, 80px) !important;
}

main[style*="padding-top: 80px"] > section:first-child[style*="padding: 6rem 0"] {
    padding-top: 4rem !important;
}

/* Hero pages de realisations */
@media (max-width: 767px) {
    main[style*="padding-top: 80px"] > section:first-child {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Hero de realisations — botones de CTA */
    section [style*="display: flex"][style*="gap: 16px"] {
        flex-direction: column;
        gap: 12px !important;
    }

    section [style*="display: flex"][style*="gap: 16px"] .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🖼️ PÁGINAS DE REALISACIONES — Grid de galería y beneficios
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    /* Galería de imágenes */
    [style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
        grid-template-columns: 1fr !important;
    }

    /* Cards de galería con height fija */
    .card-premium[style*="height: 250px"] {
        height: 200px !important;
    }

    /* Sección técnica con minmax(350px) */
    [style*="grid-template-columns: repeat(auto-fit, minmax(350px"] {
        grid-template-columns: 1fr !important;
        gap: var(--space-32, 32px) !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    [style*="grid-template-columns: repeat(auto-fit, minmax(280px"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📝 PÁGINAS CONTACT Y DEVIS — Formularios responsive
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    input, textarea, select {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🔘 FLOATING BUTTONS — No tapar contenido critical en mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    #floating-buttons {
        bottom: 16px;
        right: 16px;
        gap: 10px;
    }

    #floating-buttons a {
        width: 52px !important;
        height: 52px !important;
    }

    #floating-buttons svg:first-child {
        width: 26px !important;
        height: 26px !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📑 SECTION TITLES — Clamp para evitar overflow en mobile
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .section-title {
        font-size: clamp(20px, 5vw, 2rem);
        word-break: break-word;
    }

    h1 {
        font-size: clamp(24px, 7vw, var(--text-h1, 36px));
        hyphens: auto;
        word-break: break-word;
    }

    h2 {
        font-size: clamp(20px, 5.5vw, var(--text-h2, 28px));
        word-break: break-word;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📑 PROJETS.HTML (Portfolio) — Filter bar y grids responsive
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 479px) {
    .filter-bar {
        gap: 8px;
    }

    .filter-btn {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📐 SIDEBAR LAYOUT (Páginas de servicios)
   ───────────────────────────────────────────────────────────────────────────── */

/* El aside con position sticky puede crear problemas en mobile */
@media (max-width: 899px) {
    aside .card-premium[style*="position: sticky"] {
        position: static !important;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   🏠 INDEX — Sección de capacidades técnicas
   ───────────────────────────────────────────────────────────────────────────── */

/* .card-premium dentro de la sección capacidades con textos largos */
@media (max-width: 767px) {
    .card-premium h3,
    .card-premium h4 {
        word-break: break-word;
        hyphens: auto;
    }

    .card-premium p {
        word-break: break-word;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   📌 HAMBURGER MENU — Icono correcto y animación X funcional
   ───────────────────────────────────────────────────────────────────────────── */

/* Tamaño táctil mínimo y alineación del botón */
.mobile-menu-toggle {
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0;
    flex-direction: column;
    gap: 5px;
}

/* Las 3 líneas: tamaño fijo para que la animación X funcione bien */
.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center center;
    flex-shrink: 0;
}

/* Animación X — aplica en todos los breakpoints donde aparece el toggle */
@media (max-width: 1023px) {
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}

/* Cuando el menú está activo, prevenir scroll del body */
body.menu-open {
    overflow: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   🗂️ PORTFOLIO — Cards visibles inmediatamente sin esperar scroll
   ───────────────────────────────────────────────────────────────────────────── */

/* El grid de portfolio usa .stagger-children que requiere IntersectionObserver.
   En projets.html queremos que los proyectos sean visibles al cargar. */
#portfolio-grid.stagger-children > * {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
}

#portfolio-grid {
    opacity: 1 !important;
    transform: none !important;
}