/* ==========================================
   BASE & RESET SEGURO
   ========================================== */
html,
body {
    background-color: #f8f9fa;
    color: #282828;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-size-adjust: 100%;
    /* Previene zoom raro en móviles */
}

/* Degradado del Hero */
.hero-bg {
    background: linear-gradient(135deg, #1a1a1a 0%, #282828 60%, #1f1510 100%);
}

/* Mejora de nitidez para textos en modo oscuro */
nav a,
nav span {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Efecto hover suave en las tarjetas */
.niche-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.niche-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.08);
}

/* ==========================================
   COMPONENTES
   ========================================== */
.input-premium {
    width: 100%;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #282828;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 16px !important;
    /* Evita que el iPhone haga zoom al tipear */
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

.input-premium:focus {
    outline: none;
    border-color: #f0712c;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Scrollbars estéticas */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f8f9fa;
}

::-webkit-scrollbar-thumb {
    background: #f0712c;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

/* ==========================================
   OPTIMIZACIÓN PARA MÓVILES (< 768px)
   ========================================== */
@media (max-width: 768px) {

    /* --- 1. Reducción de Espacios (Paddings y Margins) --- */
    section {
        padding-top: 2rem !important;
        /* Aún menos espacio vertical */
        padding-bottom: 2rem !important;
    }

    .hero-bg {
        padding-top: 5rem !important;
        /* Ajuste para el header fijo */
        padding-bottom: 2.5rem !important;
    }

    /* Reducción de márgenes inferiores en contenedores */
    .mb-10 {
        margin-bottom: 1.5rem !important;
    }

    .mb-16 {
        margin-bottom: 2rem !important;
    }

    .mb-24 {
        margin-bottom: 2.5rem !important;
    }

    .py-16 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .py-24 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    /* --- 2. Tipografía: Ajuste de "Gigantismo" --- */
    h1 {
        font-size: 1.6rem !important;
        /* Título principal más compacto */
        line-height: 1.2 !important;
    }

    /* El bloque naranja del hero */
    h1 span.inline {
        font-size: 1.3rem !important;
        padding: 0.15rem 0.3rem !important;
        line-height: 1.4 !important;
    }

    h2 {
        font-size: 1.4rem !important;
        /* Subtítulos proporcionados */
        line-height: 1.3 !important;
    }

    /* Párrafos base */
    p.text-lg,
    p.text-xl {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* --- 3. Corrección del Pill "Soluciones ERP" cortado (Imagen 1) --- */
    .inline-flex.items-center.gap-2.py-1\.5.px-4.rounded-full {
        padding: 0.25rem 0.75rem !important;
        /* Reducir padding interno */
        font-size: 0.65rem !important;
        /* Letra más pequeña */
        white-space: normal !important;
        /* Permitir que baje de línea si es necesario */
        max-width: 100%;
        /* Asegurar que no exceda el contenedor */
        text-align: center;
    }


    /* Reducir el botón específico de la caja negra "La evolución natural" */
    .mt-12.bg-\[\#282828\] button {
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
    }

    /* --- 5. Corrección del Menú Móvil (Imagen 3) --- */
    #menu-desplegable {
        padding: 1.5rem 1.5rem !important;
        /* Menos padding general */
        gap: 0.75rem !important;
        /* Menor espacio entre links */
    }

    .link-movil {
        font-size: 1rem !important;
        /* Tamaño de letra normal, no gigante */
        padding-bottom: 0.5rem !important;
        border-bottom-width: 1px !important;
        border-color: rgba(255, 255, 255, 0.05) !important;
        /* Línea separadora sutil */
    }

    /* Botón dentro del menú móvil */
    #menu-desplegable button {
        margin-top: 1rem !important;
        padding: 0.7rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* --- 6. Ajuste de la caja negra "La evolución natural" (Imagen 2) --- */
    .mt-12.bg-\[\#282828\] {
        padding: 2rem 1.5rem !important;
        /* Reducir el padding interno masivo */
        border-radius: 1.5rem !important;
        /* Borde un poco menos curvo */
    }
}

/* --- 4. Botones Ergonómicos (Imagen 2) --- */
.btn-solid,
button[onclick*="openDiagModal"] {
    padding: 0.6rem 1rem !important;
    /* Padding vertical muy reducido */
    font-size: 0.8rem !important;
    /* Fuente más pequeña */
    border-radius: 999px !important;
    /* Asegurar bordes redondos perfectos */
    height: auto !important;
    /* Prevenir alturas forzadas */
    min-height: 44px;
    /* Altura táctil estándar de Apple/Google */
}






/* Rotación de flecha sincronizada con el ID */
#accordion-bim-final:checked~div label #arrow-ui {
    transform: rotate(180deg);
}

/* Control de despliegue forzado por CSS */
#accordion-bim-final:checked~div .max-h-0 {
    max-height: 4000px !important;
    opacity: 1 !important;
    margin-top: 1.5rem !important;
}