:root {
    --azul-uniforme: #0d1b3e;
    --amarillo-vega: #ffcc00;
    --rojo-detalle: #cc0000;
    --blanco: #ffffff;
    --gris-panel: #162447;
}

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

body { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--azul-uniforme); 
    color: var(--blanco); 
    line-height: 1.6; 
    overflow-x: hidden; 
    width: 100%;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* HEADER COMPACTO */
header { background: #000; position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #222; }
.header-container { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; max-width: 1100px; margin: 0 auto; }
.logo-img { height: 50px; width: auto; max-width: 100%; }
.main-nav { margin-right: 20px; } 
.border-red { height: 4px; background: var(--rojo-detalle); width: 100%; }

nav ul { list-style: none; display: flex; gap: 20px; }
.nav-link { color: var(--blanco); text-decoration: none; font-weight: 800; font-size: 0.8rem; text-transform: uppercase; }
.nav-link:hover { color: var(--amarillo-vega); }

/* TITULOS */
.title-yellow { color: var(--amarillo-vega); text-transform: uppercase; font-weight: 900; margin-bottom: 15px; font-size: 1.5rem;}
.color-red { color: var(--rojo-detalle); margin-right: 8px; }
.red-line { height: 3px; background: var(--rojo-detalle); width: 50px; margin-top: 15px; margin-bottom: 20px;}

/* HERO */
.hero-section { padding: 80px 0; text-align: center; background: linear-gradient(rgba(13,27,62,0.9), rgba(13,27,62,0.9)), url('taller.jpg') center/cover; }
.badge { background: var(--rojo-detalle); padding: 5px 12px; font-weight: bold; border-radius: 2px; font-size: 0.7rem; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 15px 0; font-weight: 900; }

/* TRAYECTORIA */
.trayectoria-premium { padding: 70px 0; background: var(--gris-panel); border-bottom: 1px solid var(--rojo-detalle); }
.grid-2 { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; }
.lead { font-size: 1.2rem; font-weight: 800; border-left: 5px solid var(--rojo-detalle); padding-left: 15px; margin-bottom: 20px; }
.punto { margin-bottom: 10px; font-weight: 700; color: #cbd5e1; display: flex; align-items: center; }
.punto i { color: var(--rojo-detalle); margin-right: 10px; }

.stats-grid { display: grid; gap: 15px; }
.stat-box { background: var(--azul-uniforme); padding: 25px; border-radius: 4px; border: 1px solid #1f2d5a; text-align: center; }
.stat-box.red-accent { border-top: 5px solid var(--rojo-detalle); }
.stat-box.yellow-accent { border-top: 5px solid var(--amarillo-vega); }
.stat-num { font-size: 2.5rem; font-weight: 900; color: var(--blanco); display: block; }
.stat-desc { font-size: 0.7rem; text-transform: uppercase; color: var(--amarillo-vega); }

/* SVG CARRO */
.svg-wrapper { background: #050a18; border: 1px solid var(--gris-panel); padding: 30px; border-radius: 8px; margin: 30px 0; overflow-x: auto; }
.carro-svg { min-width: 600px; width: 100%; height: auto;}
.car-outline { fill: none; stroke: var(--amarillo-vega); stroke-width: 2.5; }
.punto-fijo { fill: var(--rojo-detalle); stroke: rgba(204,0,0,0.3); stroke-width: 15; cursor: pointer; }
.texto-hover { fill: var(--blanco); font-weight: 800; font-size: 14px; opacity: 0; pointer-events: none; text-anchor: middle; }
.hotspot:hover .texto-hover { opacity: 1; }
.info-panel { background: var(--gris-panel); padding: 30px; border-radius: 5px; border-bottom: 5px solid var(--rojo-detalle); }

/* CONTACTO */
.contacto-grid { display: grid; grid-template-columns: 2fr 1.2fr; gap: 30px; background: var(--gris-panel); padding: 40px; border-radius: 8px; border: 1px solid #1f2d5a; }
input, select, textarea { width: 100%; padding: 12px; margin-bottom: 15px; background: var(--azul-uniforme); border: 1px solid #1f2d5a; color: #fff; border-radius: 4px; }
.btn-submit { background: var(--amarillo-vega); color: var(--azul-uniforme); border: none; padding: 15px; width: 100%; font-weight: 900; text-transform: uppercase; cursor: pointer; transition: 0.3s; }
.btn-submit:hover { background: var(--rojo-detalle); color: #fff; }

.mapa-google { width: 100% !important; height: 250px; border-radius: 4px; margin-top: 15px; }

.whatsapp-btn { position: fixed; bottom: 30px; right: 30px; background: #25d366; color: white; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 1000; text-decoration: none; }

/* MEDIA QUERY OPTIMIZADA PARA MOVIL */
@media (max-width: 768px) {
    .header-container { flex-direction: column; padding: 8px; }
    .logo-img { height: 35px; }
    .main-nav { margin-right: 0; margin-top: 10px; }
    nav ul { flex-direction: row; gap: 15px; font-size: 0.7rem; }
    .nav-link { font-size: 0.7rem; }
    
    .grid-2, .contacto-grid { grid-template-columns: 1fr; gap: 20px; }
    .contacto-grid { padding: 20px; }
}