/*
 * CONTENTMINDS - LANDING PAGE OS FIXES
 * Soluciona peculiaridades estructurales en iOS (Safari), MagicOS (Honor) y otras capas móviles.
 */

/* =========================================
   1. FIXES UNIVERSALES DE SISTEMA (MagicOS & iOS)
   ========================================= */
html {
    -webkit-text-size-adjust: 100%; /* Previene el zoom automático de fuentes al rotar el móvil en iOS */
    text-size-adjust: 100%;
    color-scheme: light dark; /* Evita que el "Modo Oscuro Inteligente" de MagicOS/MIUI invierta colores a la fuerza y vuelva textos invisibles */
}

body {
    -webkit-tap-highlight-color: transparent; /* Quita el molesto recuadro gris al tocar enlaces en móviles */
    overscroll-behavior-y: none; /* Evita el "rebote" elástico que muestra el fondo blanco al hacer scroll rápido en Safari y Honor */
}

/* =========================================
   2. REGLAS ESTRICTAS PARA BOTONES Y ENLACES (Safari)
   ========================================= */
button, a.btn-primary, a.btn-secondary {
    touch-action: manipulation; /* Elimina el lag de 300ms al tocar botones en pantallas táctiles */
    -webkit-appearance: none;
    appearance: none;
    /* Safari a veces ignora el border-radius de Tailwind en etiquetas <a> que actúan como botones */
    -webkit-border-radius: 0.75rem; /* Fuerza redondeo equivalente a rounded-xl */
}

/* =========================================
   3. ESTABILIDAD DEL HEADER Y NOTCH (Dynamic Island)
   ========================================= */
/* Soluciona el parpadeo del header sticky en iOS al hacer scroll rápido */
header.sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    /* Añade espacio seguro para el notch o cámaras en pantalla en iOS y Android */
    padding-top: env(safe-area-inset-top, 0);
    will-change: transform; /* Fuerza aceleración por hardware en MagicOS para evitar tirones */
}

/* Contenedor del menú desplegable móvil */
#mobile-menu {
    max-width: 100vw !important;
    overflow-x: hidden;
    /* Asegura compatibilidad del difuminado de fondo en navegadores WebKit */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* =========================================
   4. PREVENCIÓN DE DESBORDAMIENTO (Anti-Clipping)
   ========================================= */
h1, h2, h3, p, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

/* El título principal se ajusta agresivamente en pantallas muy estrechas (ej. iPhone SE o Galaxy Z Flip cerrados) */
@media (max-width: 380px) {
    .hero-title {
        font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
        line-height: 1.15 !important;
        letter-spacing: -0.02em;
    }
}

/* =========================================
   5. FIX PARA IMÁGENES DENTRO DE FLEXBOX
   ========================================= */
/* En motores derivados de Huawei/Honor, las imágenes en flexbox colapsan si no tienen min-width explícito */
.service-icon-box {
    flex-shrink: 0;
    min-width: 72px; /* Garantiza que la caja no se aplaste */
}

.service-icon-box img {
    flex-shrink: 0;
    min-width: 0;
    min-height: 0;
    transform: translateZ(0); /* Evita bordes pixelados en renders de Android */
}