/**
 * main.css
 * Estilos globales de INCOLMER INGENIERÍA S.A.S.
 * Complementa las utilidades de Tailwind CSS con los efectos que requieren
 * pseudo-elementos y media queries (subrayado animado del menú, acento del
 * enlace activo, etc.), que no se pueden expresar con clases utilitarias.
 */

:root {
    --color-brand-gold: #D4AF37;
}

/* Base */
html {
    /* Tipografía fluida: el tamaño base se adapta al ancho del dispositivo.
       Como Tailwind usa rem, toda la interfaz escala proporcionalmente. */
    font-size: clamp(15px, calc(13px + 0.4vw), 18px);
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    /* Evita scroll horizontal causado por elementos decorativos fuera del flujo */
    overflow-x: hidden;
}

/* Navegación de escritorio: subrayado dorado animado */
#desktop-nav a {
    position: relative;
}

#desktop-nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -7px;
    height: 2px;
    width: 0;
    background: var(--color-brand-gold);
    border-radius: 9999px;
    transition: width .3s ease;
}

#desktop-nav a:hover::after,
#desktop-nav a.text-brand-gold::after {
    width: 100%;
}

/* Menú móvil: legibilidad y acento dorado en el enlace activo */
#mobile-menu a:not(:last-child) {
    font-size: 1.05rem;
    padding-top: .625rem;
    padding-bottom: .625rem;
}

#mobile-menu a.text-white {
    box-shadow: inset 3px 0 0 var(--color-brand-gold);
}

/* Logotipo: texto gris perla #9C9D95 con bisel (emboss) para fondos oscuros #101728 */
.text-metal {
    color: #9C9D95;
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.12),
        1px 1px 1px rgba(0, 0, 0, 0.85),
        0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Al pasar el cursor sobre el logotipo, el metal se vuelve dorado */
.group:hover .text-metal {
    color: #D4AF37;
    text-shadow:
        -1px -1px 1px rgba(255, 255, 255, 0.18),
        1px 1px 1px rgba(0, 0, 0, 0.85),
        0 2px 6px rgba(0, 0, 0, 0.5);
}