*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f3f4f7;
    color:#1f2933;
}

/* ================= NAVBAR ================= */
.navbar{
    background:#ffffff;
    border-bottom:3px solid #c62828;
    padding:18px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo{
    font-weight:800;
    font-size:18px;
    color:#0d47a1;
    letter-spacing:0.6px;
}

.navbar nav a{
    margin-left:28px;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    color:#1f2933;
    position:relative;
    padding-bottom:6px;
    transition:.3s;
}

/* subrayado elegante */
.navbar nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:3px;
    background:#c62828;
    transition:.3s;
}

.navbar nav a:hover::after{
    width:100%;
}

.navbar nav a:hover{
    color:#0d47a1;
}

/* ================= HERO ================= */
.hero{
    margin:40px;
    padding:70px;
    border-radius:24px;
    background:linear-gradient(135deg,#0d47a1,#c62828);
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
}

.hero-content h1{
    font-size:38px;
    font-weight:800;
    line-height:1.25;
}

/* ❌ quitamos amarillo, ✔ azul claro elegante */
.hero-content span{
    display:block;
    color:#bbdefb;
    font-weight:800;
    margin-top:6px;
}

.hero-content p{
    margin-top:18px;
    max-width:520px;
    line-height:1.6;
    font-size:15px;
    color:#f1f5f9;
}

.hero-image img{
    max-width:420px;
}

/* ================= TECHNOLOGY ================= */
.technology{
    padding:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:30px;
}

.tech-card{
    background:#ffffff;
    border-top:5px solid #0d47a1;
    border-radius:18px;
    padding:28px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.tech-card:hover{
    transform:translateY(-8px);
    border-top:5px solid #c62828;
}

.tech-card img{
    width:100%;
    max-height:160px;
    object-fit:contain;
    margin-bottom:10px;
}

.tech-card h3{
    color:#0d47a1;
    font-size:18px;
    font-weight:700;
    margin-bottom:8px;
}

.tech-card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* ================= FOOTER ================= */
.footer{
    background:#1f2933;
    color:white;
    padding:60px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:30px;
}

.footer h4{
    margin-bottom:12px;
    color:#c62828;
    font-weight:700;
}

.footer p{
    font-size:14px;
    line-height:1.6;
    color:#e5e7eb;
}
/* ================= HEADER PRINCIPAL ================= */
.header{
    position: sticky;   /* ✅ AQUÍ */
    top: 0;
    z-index: 9999;

    background:#ffffff;
    border-bottom:1px solid #e5e7eb;
}


.header-container{
    max-width:1400px;
    margin:auto;
    padding:22px 60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* LOGO */
.brand{
    font-size:22px;
    font-weight:800;
    letter-spacing:1px;
}

.brand-black{
    color:#111827;
}

.brand-purple{
    color:#6d5dfc; /* mismo morado del index */
    margin:0 6px;
}

/* MENU */
.menu{
    display:flex;
    align-items:center;
    gap:32px;
}

.menu a{
    text-decoration:none;
    font-weight:500;
    font-size:15px;
    color:#111827;
    transition:.2s;
}

.menu a:hover{
    color:#6d5dfc;
}

/* ACTIVO */
.menu a::after {
    display: none;
}


/* BOTÓN NOSOTROS */
.btn-outline{
    padding:8px 18px;
    border:1.8px solid #6d5dfc;
    border-radius:22px;
    color:#6d5dfc !important;
    font-weight:600;
}

.btn-outline:hover{
    background:#6d5dfc;
    color:#ffffff !important;
}
/* ===== ANIMACIONES GENERALES ===== */
@keyframes fadeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* HERO */
.hero-content {
    animation: fadeSlideLeft 1s ease forwards;
}

.hero-image {
    animation: fadeSlideRight 1s ease forwards;
}
.tech-card {
    transition: all 0.4s ease;
    cursor: pointer;
}

.tech-card img {
    transition: transform 0.4s ease;
}

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

.tech-card:hover img {
    transform: scale(1.08);
}
/* SCROLL ANIMATION */
.tech-card {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s ease;
}

.tech-card.show {
    opacity: 1;
    transform: translateY(0);
}
.menu a {
    position: relative;
}

.menu a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 3px;
    background: #7c3aed;
    left: 0;
    bottom: -6px;
    transition: width 0.3s ease;
}

.menu a:hover::after,
.menu a.active::after {
    width: 100%;
}
.logo-text{
    font-family:'Poppins', sans-serif;
    font-size:20px;
    font-weight:600;        /* ⬅️ más cuerpo */
    letter-spacing:0.3px;  /* ⬅️ hace la letra más “ancha” */
    color:#111827;

    /* mejora visual */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.logo-text span{
    color:#6d5dfc;
    font-weight:700;        /* ⬅️ Rugerio un poco más fuerte */
}
/* ================= TECNOLOGÍA EN EL TRANSPORTE ================= */

.tech-text-section {
    padding: 80px 0 70px;
    background: #f8fafc;
}

/* CONTENEDOR */
.tech-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center; /* 🔑 CLAVE: TODO AL CENTRO */
}

/* TÍTULO */
.tech-title {
    font-family: 'Poppins', sans-serif;
    font-size: 36px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 14px;
    line-height: 1.25;
}

/* SUBTÍTULO */
.tech-highlight {
    font-size: 17px;
    font-weight: 500;
    color: #334155;
    margin-bottom: 20px;
}

/* TEXTO PRINCIPAL */
.tech-text {
    font-size: 15.5px;
    color: #475569;
    line-height: 1.55;
    margin-bottom: 14px;
}

/* TEXTO FINAL */
.tech-pillars {
    margin-top: 18px;
    font-size: 15.5px;
    font-weight: 700;
    color: #0f172a;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .tech-title {
        font-size: 30px;
    }

    .tech-highlight {
        font-size: 16px;
    }

    .tech-text,
    .tech-pillars {
        font-size: 15px;
    }
}
.top-bar {
    height: 24px;              /* 🔴 más delgada */
    background: #696060;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;           /* menos padding */
    font-size: 11px;           /* texto más fino */
}

@media (max-width: 768px) {

    .top-bar{
        justify-content:center;
        font-size:10px;
        padding:0 10px;
    }

    .header-container{
        flex-direction:column;
        gap:6px;
        padding:10px 20px;
    }

    .brand,
    .logo-text{
        text-align:center;
        font-size:18px;
    }

    .menu{
        gap:16px;
        flex-wrap:wrap;
        justify-content:center;
    }

    .menu a{
        font-size:14px;
        padding:6px 8px;
    }
}
/* ================= UNIDADES TECNOLÓGICAS ================= */

.tech-units-intro {
    background: #f8fafc;
    padding: 60px 0 20px;
}

/* CONTENEDOR PRINCIPAL */
.tech-units {
    background: #9b1418;
    padding: 80px 20px 60px;
    text-align: center;
}

/* TÍTULO */
.units-title {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 50px;
    font-family: 'Poppins', sans-serif;
}

/* GRID */
.units-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 35px;
}

/* TARJETA */
.unit-card {
    background: #7f1014;
    border-radius: 22px;
    padding: 40px 30px;
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.25);
    transition: all .35s ease;
}

/* HOVER */
.unit-card:hover {
    transform: translateY(-12px);
    background: #8f1318;
}

/* NÚMERO */
.unit-card h4 {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 6px;
}

/* SUBTÍTULO */
.unit-card span {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
    opacity: .9;
}

/* LISTA */
.unit-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.unit-card ul li {
    font-size: 14px;
    margin-bottom: 10px;
}

/* TEXTO INFERIOR */
.units-foot {
    margin-top: 45px;
    font-size: 14px;
    color: #ffffff;
    opacity: .9;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .units-title {
        font-size: 28px;
    }

    .unit-card h4 {
        font-size: 32px;
    }
}
.unit-number {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: 1px;
}