/* =============================================================================
   SNIPPET: Responsive móvil seguro (Regla 08)
   Pegar al final de styles.css o fusionar con estilos existentes.
   Adaptar: .hero, .hero-grid, .hero-ctas, .mobile-menu, ruta de bg del hero.
   Documentación: 0000 Reglas/08-RESPONSIVE-SIN-ROOMPER-DISENO.md
   ============================================================================= */

/* --- Variables (no poner border-radius en 0 aquí — MOB-005) --- */
/* NO reducir ni eliminar padding/márgenes de .container / secciones */
:root {
    --header-offset: calc(5rem + env(safe-area-inset-top, 0px));
}

@media (min-width: 768px) {
    :root {
        --header-offset: calc(5.625rem + env(safe-area-inset-top, 0px));
    }
}

/* --- Base anti-desborde horizontal (sin tocar padding lateral del layout) --- */
html {
    scroll-padding-top: var(--header-offset);
    overflow-x: hidden; /* MOB-007: no usar clip aquí */
}

body {
    overflow-x: hidden;
}

.header {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Contenedores: mantener padding horizontal; nunca padding-inline: 0 */
.container,
.section-container,
.header-container {
    min-width: 0;
    box-sizing: border-box;
}

/* --- Hero móvil (MOB-001, MOB-008, MOB-009) — adaptar .hero / .hero-section --- */
@media (max-width: 991px) {
    .hero,
    .hero-section {
        min-height: auto;
        height: auto;
        align-items: flex-start;
        overflow-x: clip;
        overflow-y: visible;
        padding-top: calc(var(--header-offset) + 1rem);
    }

    /* Capa blur: no usar inset negativo en móvil */
    .hero-bg {
        inset: 0;
        transform: scale(1.04);
    }

    .hero .container,
    .hero-section .container,
    .hero-grid,
    .hero-container,
    .hero-content,
    .hero-image-container,
    .hero-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-ctas,
    .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.55rem;
    }

    .hero-ctas .btn,
    .hero-buttons .btn {
        flex: 1 1 calc(50% - 0.3rem);
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        text-wrap: balance;
    }

    /* Animaciones laterales no deben empujar fuera del viewport */
    .reveal-from-left,
    .reveal-from-right {
        transform: translateY(20px);
    }

    .hero-bg-accent {
        display: none;
    }
}

@media (max-width: 380px) {
    .hero-ctas,
    .hero-buttons {
        flex-direction: column;
    }

    .hero-ctas .btn,
    .hero-buttons .btn {
        flex: 1 1 100%;
        width: 100%;
    }
}

@media (min-width: 992px) {
    .hero-bg {
        inset: -24px;
        transform: scale(1.06);
    }
}

/* Proyectos con bg en .hero (no capa .hero-bg): descomentar y adaptar ruta */
/*
@media (max-width: 1023px) {
    .hero {
        background-image: linear-gradient(...), url('../assets/img/hero-bg.jpg');
        background-size: cover;
        background-position: center;
    }
}
*/

/* --- Menú móvil seguro (MOB-004) --- */
.mobile-menu {
    max-width: 100vw;
    height: 100dvh;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu.active {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

/* --- Tabs / carruseles horizontales: no expandir el documento --- */
.services-tabs {
    max-width: 100%;
}