/* ==========================================================================
   RESET Y CONFIGURACIÓN BASE
   ========================================================================== */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    background-color: #0b0b0b;
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/* TOP BAR */
.top-bar {
    background-color: #000000;
    border-bottom: 1px solid #1c1c1c;
    font-size: 11px;
    padding: 10px 0;
}
.top-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contact-info span { margin-right: 20px; color: #aaa; white-space: nowrap; }
.text-green, .contact-info i { color: #4CAF50; }
.language-switcher { display: flex; gap: 15px; color: #aaa; cursor: pointer; }
.lang-link.active { color: #4CAF50; font-weight: bold; }
.lang-link img { vertical-align: middle; margin-right: 4px; }

/* NAVBAR HEADER */
header {
    background-color: #000000;
    padding: 20px 0;
    border-bottom: 1px solid #111;
}
.header-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo-area { display: flex; align-items: center; gap: 20px; }
.main-logo { height: 95px; width: auto; }

.brand-name { 
    font-size: 26px; 
    font-weight: 900; 
    border-left: 4px solid #4CAF50; 
    padding-left: 20px; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: #ffffff;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

nav ul { display: flex; list-style: none; gap: 22px; margin: 0; padding: 0; }
nav a { font-weight: 600; font-size: 12px; color: #bbb; text-decoration: none; text-transform: uppercase; transition: color 0.2s; }
nav a.active, nav a:hover { color: #4CAF50; }
.btn-quote { background-color: #3b7a44; color: #fff; padding: 10px 18px; border-radius: 4px; text-decoration: none; font-size: 11px; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
.btn-quote:hover { background-color: #458e4f; }

/* HERO PRINCIPAL */
.hero { background-color: #0b0b0b; width: 100%; position: relative; }
.hero-overlay { padding: 60px 0; }

.hero-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
}

/* TEXTOS HERO */
.hero-text { width: 100%; text-align: left; }
.hero-subtitle { color: #4CAF50; font-weight: bold; font-size: 13px; display: block; margin-bottom: 10px; letter-spacing: 1px; }
.hero-text h1 { font-size: 38px; font-weight: 800; line-height: 1.2; margin-bottom: 20px; color: #fff; }
.hero-text p { color: #ccc; font-size: 14px; line-height: 1.6; margin-bottom: 35px; }

.hero-features-clean { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; width: 100%; }
.feature-block { display: flex; gap: 12px; align-items: start; }
.feature-block i { font-size: 18px; margin-top: 3px; flex-shrink: 0; }
.feature-block h4 { font-size: 13px; font-weight: bold; color: #fff; margin: 0 0 4px 0; }
.feature-block p { color: #888; font-size: 12px; margin: 0; line-height: 1.3; }

/* TARJETAS DE PRODUCTO */
.hero-product-display { 
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
    width: 100%;
}
.product-showcase-card { 
    background-color: #121212; 
    border: 1px solid #222; 
    border-radius: 8px; 
    overflow: hidden;
    width: 320px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}
.card-img-container {
    width: 100%;
    height: 155px;
    background-color: #000;
}
.card-img-container img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
    display: block;
}
.card-text-container { padding: 15px; text-align: left; }
.card-text-container h3 { font-size: 13px; color: #4CAF50; font-weight: bold; margin: 0 0 5px 0; }
.card-text-container p { color: #aaa; font-size: 11px; margin: 0; line-height: 1.4; }

/* BARRA DE ESTADÍSTICAS */
.stats-clean-bar {
    background-color: #161616;
    padding: 25px 0;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
}
.stats-container {
    width: 95%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.stat-box { display: flex; align-items: center; gap: 15px; }
.stat-box i { font-size: 24px; color: #4CAF50; }
.stat-box h3 { font-size: 22px; font-weight: 800; margin: 0; color: #fff; }
.stat-box p { font-size: 12px; color: #888; margin: 2px 0 0 0; }

/* SECCIÓN LOGÍSTICA */
.page-section { padding: 60px 0; background-color: #0b0b0b; width: 100%; }
.section-container { width: 90%; max-width: 1000px; margin: 0 auto; text-align: left; }
.section-container-wide { width: 95%; max-width: 1400px; margin: 0 auto; }
.section-title { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 30px; text-align: left; }

.logistics-uniform-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    width: 100%;
}
.logistics-item { 
    background: #121212; 
    border: 1px solid #222; 
    border-radius: 6px; 
    overflow: hidden;
}
.logistics-img-wrapper { 
    width: 100%; 
    height: 190px;
    background-color: #000;
}
.logistics-img-wrapper img { 
    width: 100%; 
    height: 100%; 
    object-fit: contain; 
    display: block;
}
.logistics-meta { padding: 15px; background: #121212; text-align: left; }
.logistics-meta h3 { font-size: 13px; color: #fff; font-weight: bold; margin: 0; }

/* SECCIONES COMPLEMENTARIAS */
.about-section, .certifications-section { background-color: #0b0b0b; }
.oem-section, .contact-section { background-color: #111111; }
.page-section p { color: #ccc; font-size: 14px; line-height: 1.7; margin: 0; }

.contact-form { display: flex; flex-direction: column; gap: 15px; margin-top: 25px; max-width: 600px; }
.contact-form input, .contact-form textarea { background: #1a1a1a; border: 1px solid #333; padding: 12px; color: #fff; border-radius: 4px; font-family: inherit; font-size: 14px; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #4CAF50; outline: none; }
.btn-submit { background-color: #3b7a44; color: #fff; padding: 12px; border: none; border-radius: 4px; font-weight: bold; cursor: pointer; transition: background 0.2s; font-size: 13px; }
.btn-submit:hover { background-color: #458e4f; }