/*
 * REDES DE CABLEADO - Estilos Adicionales del Sistema Visual
 * Integra fuentes tipográficas y elementos de alineación tipo plano técnico.
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* Reglas Generales */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Fuentes Monomapeadas para Datos Técnicos */
.font-mono-technical {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}

/* Fondo de Grilla Técnica de Precisión */
.technical-grid {
    background-image: radial-gradient(circle, #737781 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.05;
}

.technical-grid-bg {
    background-image: linear-gradient(#e2e2e5 1px, transparent 1px), linear-gradient(90deg, #e2e2e5 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Conectores Visuales Dotted Leader (Key/Value) */
.dotted-leader {
    flex-grow: 1;
    border-bottom: 1px dotted #c3c6d1;
    margin: 0 8px 4px 8px;
}

/* Efecto de Tarjetas de Proyectos en Blanco y Negro (Foco Técnico) */
.project-image {
    filter: grayscale(100%);
    transition: filter 0.4s ease, transform 0.4s ease;
}

.project-card:hover .project-image {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* Scrollbar Estilo Industrial */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

::-webkit-scrollbar-thumb {
    background: #00244a;
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: #fc7728;
}

/* Animación de Revelado */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease-out;
}

.scroll-reveal.active {
    opacity: 1;
    transform: translateY(0);
}