@font-face {
    font-family: 'Tangerine';
    src: url('../fuentes/Tangerine-Regular.ttf');
}
        :root {
            --primary-dark: #0a2533;    /* Azul Corporativo de tu logo */
            --accent-gold: #c9a555;     /* Dorado LPS */
            --accent-blue-light: #78a3c0; /* Azul Acero */
            --bg-light: #f8f9fa;
            --white: #ffffff;
        }

        body {
            font-family: 'Tangerine';
            background-color: var(--primary-dark);
            color: var(--white);
            scroll-behavior: smooth;
            overflow-x: hidden;
        }
        

        /* NAVBAR ANIMADO */
        .navbar {
            background-color: rgba(10, 37, 51, 0.98) !important;
            padding: 15px 0;
            border-bottom: 1px solid rgba(201, 165, 85, 0.2);
        }
        .nav-link {
            color: var(--white) !important;
            margin: 0 15px;
            position: relative;
            font-weight: 500;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0; height: 2px; bottom: 0; left: 0;
            background-color: var(--accent-gold);
            transition: 0.3s;
        }
        .nav-link:hover::after { width: 100%; }
        .nav-link:hover { color: var(--accent-gold) !important; }

        /* HERO SECTION */
        #intro {
            padding: 180px 0 100px;
            background: linear-gradient(135deg, #0a2533 0%, #163a4d 100%);
        }
        .hero-badge {
            color: var(--accent-gold);
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 25px;
            border: 1px solid var(--accent-gold);
            font-size: 1.3em;
        }
        .hero-title { font-size: 3.5rem; font-weight: 700; line-height: 1.1; }
        .hero-title span { color: var(--accent-gold); }
        .arqui{
            font-size: 1.4em;
        }

        #semblanza{
             background-color: var(--white); color: var(--primary-dark); padding: 100px 0; 
        }

       
.badge{
    margin:6px 7px 6px 7px;
}

/* TRAYECTORIA INTERACTIVA - DISEÑO ESCALONADO CON CONECTORES */
#resume { 
    background-color: var(--white); 
    color: var(--primary-dark); 
    padding: 100px 0; 
}

.timeline-container {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Línea Vertical Central */
.timeline-container::after {
    content: '';
    position: absolute;
    width: 4px;
    background: #e9ecef;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    width: 50%;
    opacity: 0;
    transform: translateY(40px);
    transition: 0.8s all ease;
    z-index: 1;
}

/* Efecto de escalonamiento: margen negativo para solapar */
.timeline-item:not(:first-child) {
    margin-top: -80px; /* Ajusta este valor para controlar qué tanto se enciman */
}

.timeline-item.active {
    opacity: 1;
    transform: translateY(0);
}

.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.right {
    left: 50%;
    text-align: left;
}

/* Conectores Horizontales */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px; /* Distancia entre tarjeta y línea central */
    height: 2px;
    background: var(--accent-gold);
    z-index: 0;
}

.timeline-item.left::before {
    right: 0;
}

.timeline-item.right::before {
    left: 0;
}

.timeline-card {
    background: var(--white);
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-top: 5px solid var(--accent-gold);
    position: relative;
    display: inline-block; /* Para que la tarjeta no use el 100% si no es necesario */
    text-align: left;
    width: 100%;
}

.timeline-item.left .timeline-card {
    border-top: none;
    border-right: 5px solid var(--accent-gold);
}

.timeline-item.right .timeline-card {
    border-top: none;
    border-left: 5px solid var(--accent-gold);
}

/* Ajuste para móviles */
@media (max-width: 768px) {
    .timeline-container::after {
        left: 20px;
    }
    .timeline-item {
        width: 100%;
        left: 0 !important;
        padding-left: 50px;
        text-align: left !important;
        margin-top: 20px !important; /* Quitar solapamiento en móvil */
    }
    .timeline-item::before {
        left: 20px;
        width: 30px;
    }
}







        /* SECCIÓN PORTAFOLIO PDF */
        #portafolio { background-color: #f1f3f5; color: var(--primary-dark); padding: 100px 0; }
        .pdf-box {
            background: var(--white);
            border-radius: 15px;
            padding: 30px;
            text-align: center;
            border: 1px solid #dee2e6;
            transition: 0.3s;
            height: 100%;
        }
        .pdf-box:hover {
            border-color: var(--accent-gold);
            transform: translateY(-10px);
        }
        .pdf-icon { font-size: 3.5rem; color: #dc3545; margin-bottom: 20px; }
        .btn-view {
            background-color: var(--accent-gold);
            color: var(--primary-dark);
            font-weight: 700;
            border: none;
            padding: 10px 25px;
            border-radius: 25px;
            text-decoration: none;
            display: inline-block;
            margin-top: 15px;
        }

        /* ECOSISTEMA TECNOLÓGICO */
        #tech { padding: 100px 0; background-color: var(--primary-dark); }
        .tech-pill {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(201, 165, 85, 0.2);
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            text-align: center;
            transition: 0.3s;
        }
        .tech-pill:hover { background: var(--accent-gold); transform: translateY(-5px); }
        .tech-pill:hover span { color: var(--primary-dark); }
        .tech-pill img { height: 50px; filter: grayscale(1); transition: 0.3s; margin-bottom: 10px; }
        .tech-pill:hover img { filter: grayscale(0) brightness(0); }
        .tech-pill span { display: block; font-size: 0.85rem; font-weight: 600; color: var(--accent-gold); }

        @media (max-width: 768px) {
            .timeline-container::after { left: 31px; }
            .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding-left: 70px; }
        }