/* 1. RESET PROFESIONAL: Obliga a todos los elementos a calcular su tamaño correctamente */
*, ::before, ::after {
    box-sizing: border-box; /* Evita que el padding ensanche los contenedores */
    margin: 0;
    padding: 0;
}

/* 2. CONTENCIÓN GLOBAL: Evita el scroll horizontal (el enemigo #1) */
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Corta cualquier cosa que intente salirse a la derecha */
    position: relative;
    width: 100%;
    -webkit-font-smoothing: antialiased; /* Mejora la lectura de la letra */
}

/* 3. IMÁGENES RESPONSIVAS: Nunca serán más grandes que su contenedor */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
    display: block; /* Quita espacios extraños debajo de las imágenes */
}

/* 4. TEXTO INTELIGENTE: Evita que los títulos gigantes rompan el diseño en móviles */
h1, h2, h3, h4, h5, h6, p, span {
    overflow-wrap: break-word; /* Rompe palabras demasiado largas si es necesario */
    word-wrap: break-word;
    hyphens: auto;
}

/* 5. FIX DE CONTENEDORES (Tailwind + Custom) */
.max-w-7xl, .max-w-5xl, .max-w-4xl {
    width: 100% !important;
    padding-left: 1.5rem;  /* Margen de seguridad para que el texto no pegue al borde */
    padding-right: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* 6. ESTÉTICA DIGITALIA (Consistencia de marca) */
.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* 7. TIPOGRAFÍA DINÁMICA (Para que tus 8xl no se vean gigantes en celular) */
@media (max-width: 768px) {
    .text-8xl { font-size: 3.5rem !important; line-height: 1; }
    .text-7xl { font-size: 3rem !important; }
    .text-6xl { font-size: 2.5rem !important; }
    
    /* Ajuste de paddings en móviles para que nada se sienta apretado */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Forzar que las columnas se apilen siempre en móvil */
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }
}

/* 8. EL EFECTO MESH GRADIENT (Optimizado) */
.dynamic-mesh {
    background: linear-gradient(-45deg, #0f172a, #2e1065, #4c1d95, #1e1b4b);
    background-size: 400% 400%;
    animation: meshGradient 15s ease infinite;
}
@keyframes meshGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 1. REGLA MAESTRA DE CONTENCIÓN */
/* Forzamos al HTML y al Body a ser una caja cerrada */
html, body {
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important; /* Corta cualquier cosa que sobresalga */
    position: relative;
}

/* 2. FIX DE TIPOGRAFÍA RESPONSIVA */
/* Tus títulos 8xl son el problema principal en móvil. 
   Aquí los forzamos a un tamaño que quepa en un iPhone. */
@media (max-width: 768px) {
    /* El título del Hero del Index */
    .text-6xl, .text-7xl, .text-8xl {
        font-size: 3.2rem !important; /* Aproximadamente 50px */
        line-height: 1 !important;
        letter-spacing: -0.05em !important;
        display: block;
        width: 100%;
    }

    /* Evitar que palabras como "PUBLICIDAD" se salgan */
    h1, h2, h3, span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: manual !important;
    }
}

/* 3. FIX DE SECCIONES CON "WATERMARKS" (Textos de fondo) */
/* Secciones que tienen el texto gigante de fondo como 'SOLUTIONS' o 'WORKS' */
header, section {
    width: 100%;
    max-width: 100vw;
    overflow: hidden !important; /* Obligatorio para que el watermark no estire el sitio */
    position: relative;
}

/* 4. AJUSTE DE BOTONES EN MÓVIL (Tu imagen 3 muestra el botón roto) */
@media (max-width: 640px) {
    .flex.flex-wrap, .flex.flex-col {
        width: 100% !important;
    }
    
    /* El botón naranja de tu imagen 3 que se ve deformado */
    a.bg-orange-500, a.bg-black {
        width: 100% !important; /* En móvil, que ocupen todo el ancho para que el texto no se amontone */
        display: block !important;
        text-align: center;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        white-space: normal !important; /* Permite que el texto baje de línea si es muy largo */
    }
}

/* 5. FIX DE CONTENEDORES TAILWIND */
.max-w-7xl, .max-w-6xl, .max-w-5xl {
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}

@media (max-width: 768px) {
    /* Ajuste quirúrgico para los títulos masivos */
    .text-6xl, .text-7xl, .text-8xl, h1 {
        /* Usamos 'vw' (viewport width) para que la letra 
           se adapte exacto al ancho del celular */
        font-size: 13vw !important; 
        line-height: 0.9 !important;
        letter-spacing: -0.05em !important;
        
        /* BLOQUEO DE CORTES: Esto evita el "DI-SEÑO" */
        word-break: normal !important;
        overflow-wrap: normal !important;
        white-space: normal !important;
        hyphens: none !important;
    }

    /* Forzamos a que cada punto (.) genere un salto natural si no cabe */
    h1 span, h1 {
        display: inline-block;
        width: auto;
    }
}

@media (max-width: 768px) {
    /* CLASE PARA TÍTULOS DE PÁGINAS INTERNAS (Servicios, Contacto) */
    .title-responsive {
        font-size: 10vw !important; /* Un poco más pequeño que el Hero */
        line-height: 1 !important;
        display: block;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    /* FIX PARA EL BOTÓN NARANJA (Captura 3) */
    /* Evita que el botón se deforme y que el texto se encime */
    a.btn-responsive, button.btn-responsive {
        width: 100% !important;
        display: block !important;
        white-space: normal !important; /* Permite que el texto baje de renglón */
        padding: 1.25rem 1rem !important; /* Más espacio vertical para el texto doble */
        font-size: 14px !important; /* Tamaño fijo legible */
        line-height: 1.2 !important;
        text-align: center;
    }

    /* ELIMINAR ESPACIO BLANCO A LA DERECHA (Captura 2) */
    /* El watermark "PHYSICAL" o "SOLUTIONS" es el culpable */
    section, header, main {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
}