*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f7f4;color:#15231c;font-family:Inter,Arial,sans-serif}a{text-decoration:none;color:inherit}img{display:block;max-width:100%}.header{height:82px;position:fixed;z-index:100;top:0;left:0;right:0;display:flex;align-items:center;padding:0 4.5vw;background:rgba(8,16,12,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
.logo{display:flex;align-items:center;gap:10px;min-width:245px}.logo img{width:100px;height:35px;object-fit:contain}.logo-fallback{font:700 27px "Space Grotesk";color:#228648;display:none}.logo small{font-size:8px;line-height:1.25;letter-spacing:.11em;color:#b6beb8;max-width:125px}.header nav{display:flex;gap:26px;margin:auto}.header nav a{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:#d8ddd9;transition:.25s}.header nav a:hover{color:#228648}.contact-pill{font-size:10px;text-transform:uppercase;letter-spacing:.1em;border:1px solid #228648;padding:12px 16px}.contact-pill b{color:#228648}.hamburger{display:none;background:none;border:0;color:#fff;font-size:25px}.hero{height:100vh;min-height:720px;position:relative;overflow:hidden;background:#09110d;color:#fff}.hero-image{position:absolute;inset:0;background:url('../assets/products/image8.png') center 43%/cover no-repeat;filter:saturate(.94) brightness(1.08) contrast(1.03)}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(52,58,61,.98) 0%,rgba(52,58,61,.90) 27%,rgba(52,58,61,.58) 50%,rgba(52,58,61,.10) 78%,rgba(52,58,61,.03) 100%),linear-gradient(0deg,rgba(52,58,61,.30),rgba(52,58,61,.02) 58%,rgba(52,58,61,.10) 100%)}.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(139,197,63,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(139,197,63,.08) 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,black,transparent 75%)}.hero-content{position:absolute;z-index:2;left:8vw;top:50%;transform:translateY(-44%);max-width:650px}.eyebrow,.micro{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#aab5ad}.eyebrow{display:flex;gap:12px;align-items:center;margin-bottom:25px}.eyebrow span{width:34px;height:2px;background:#228648}.hero h1{font:600 clamp(64px,8vw,118px)/.84 "Space Grotesk";letter-spacing:-.065em;margin:0}
.hero h1 strong{color:#228648;font-weight:600}.hero-content>p{max-width:490px;color:#bdc6c0;line-height:1.7;font-size:16px;margin:30px 0}
.hero-buttons{display:flex;gap:12px}.btn{display:inline-flex;align-items:center;gap:20px;padding:15px 20px;text-transform:uppercase;letter-spacing:.1em;font-size:10px}
.btn.green{background:#228648;color:#0b120e}.btn.line{border:1px solid rgba(255,255,255,.35);color:#fff}.hero-tech{position:absolute;z-index:3;right:5vw;bottom:10vh;width:360px;display:grid;gap:8px}.tech-card{padding:14px 17px;border-left:2px solid #228648;background:rgba(7,15,11,.72);backdrop-filter:blur(10px);display:grid;grid-template-columns:40px 1fr;align-items:center}.tech-card span{color:#228648;font-size:9px}.tech-card b{font-size:10px;letter-spacing:.12em}.tech-card em{grid-column:2;color:#849088;font-style:normal;font-size:8px;letter-spacing:.12em;margin-top:4px}.hero-scroll{position:absolute;bottom:27px;left:8vw;right:8vw;color:#89948c;font-size:8px;letter-spacing:.18em;display:flex;align-items:center;gap:13px}.hero-scroll span{width:75px;height:1px;background:#228648}.side-label{font-size:9px;letter-spacing:.2em;color:#75827a}
.intro{padding:150px 8vw 130px;display:grid;grid-template-columns:18% 57% 25%;min-height:700px; color: #303538;}
.intro-main h2 strong{color: #228648;   text-shadow: 0 0 22px rgba(34,134,72,.20);}
.intro-main h2,.engineering h2,.products h2,.about h2,.transport h2,.contact h2{font:600 clamp(46px,6vw,88px)/.95 "Space Grotesk";letter-spacing:-.055em;margin:12px 0 30px}
.intro h2 span,.engineering h2 span,.products h2 span,.about h2 span,.transport h2 span,.contact h2 span{color:#718078}
.lead{font-size:18px;line-height:1.8;color:#5d6961;max-width:720px}.voltage-stack{align-self:end}.voltage-stack div{border-top:1px solid #cbd3cc;padding:15px 0}.voltage-stack b{font:600 34px "Space Grotesk";display:block}.voltage-stack span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#7c877f}.services{padding:130px 8vw;background:#303538;color:#fff}.service-heading{display:grid;grid-template-columns:18% 1fr}.service-heading h2{font:600 clamp(46px,6vw,88px)/.95 "Space Grotesk";letter-spacing:-.055em;margin:12px 0 70px}.service-heading h2 span{color:#8b9890}.service-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-auto-rows:350px;gap:12px}.service-card{position:relative;overflow:hidden;min-height:350px}.service-card.large{grid-row:span 2}.service-card.wide{grid-column:2 / 4}.service-card img{position:absolute;width:100%;height:100%;object-fit:cover;transition:transform .8s;filter:saturate(.8)}.service-card:hover img{transform:scale(1.06)}.shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,10,7,.93),rgba(4,10,7,.05) 70%)}.service-copy{position:absolute;inset:auto 27px 25px}.service-copy small{color:#228648;font-size:9px;letter-spacing:.15em}.service-copy h3{font:500 28px/1.02 "Space Grotesk";margin:8px 0 10px}.service-copy p{font-size:11px;line-height:1.6;color:#b2bcb5;max-width:570px;margin:0 0 15px}.service-copy a{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#228648}.engineering{padding:140px 8vw;background:#e9eee9}.engineering-top{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.engineering-text{padding-top:25px;color:#5f6c63;font-size:15px;line-height:1.8;max-width:590px}.spec-list{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #bec8c0;margin-top:30px}.spec-list span{padding:13px 0;border-bottom:1px solid #bec8c0;font-size:9px;text-transform:uppercase;letter-spacing:.1em}.schematic{height:460px;margin-top:85px;position:relative;border:1px solid #c3ccc4;background-image:linear-gradient(rgba(21,35,28,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(21,35,28,.05) 1px,transparent 1px);background-size:45px 45px}.schematic-line{position:absolute;left:17%;right:17%;top:50%;height:1px;background:#8fa097}.schematic-line:after{content:"";position:absolute;left:50%;top:-120px;width:1px;height:240px;background:#8fa097}.center-node{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:190px;height:105px;background:#f5f7f4;border:1px solid #8fa097;display:flex;align-items:center;justify-content:center;flex-direction:column}.center-node b{font:700 31px "Space Grotesk";color:#228648}.center-node span{font-size:8px;letter-spacing:.2em;margin-top:4px}.node{position:absolute;padding:10px 13px;border:1px solid #9eaaa1;background:#f5f7f4;font-size:8px;letter-spacing:.12em}.node1{left:10%;top:22%}.node2{left:47%;top:12%}.node3{right:10%;top:22%}.node4{left:10%;bottom:22%}.node5{left:47%;bottom:12%}.node6{right:10%;bottom:22%}.products{padding:140px 8vw;background:#f5f7f4}.products-head{display:grid;grid-template-columns:18% 1fr}.product-showcase{display:grid;grid-template-columns:1.5fr .75fr .75fr;grid-template-rows:260px 260px;gap:12px;margin-top:65px}.product-feature{grid-row:span 2;display:grid;grid-template-columns:1fr .8fr;background:#dfe6df}.product-image{overflow:hidden}.product-feature img{width:100%;height:100%;object-fit:cover;transition:.7s}.product-feature:hover img{transform:scale(1.04)}.product-info{padding:34px;display:flex;flex-direction:column}.product-info small,.product-tile small{font-size:8px;letter-spacing:.16em;color:#66736a}.product-info h3{font:500 39px/.98 "Space Grotesk";margin:auto 0 16px}.product-info p{font-size:11px;line-height:1.65;color:#68746c}.product-info a{font-size:9px;text-transform:uppercase;letter-spacing:.12em;margin-top:15px}.product-tile{position:relative;overflow:hidden;background:#101812;color:#fff}.product-tile img{width:100%;height:100%;object-fit:cover;opacity:.82;transition:.7s}.product-tile:hover img{transform:scale(1.07);opacity:.6}.product-tile>div{position:absolute;left:20px;bottom:18px}.product-tile h3{font:500 24px/.98 "Space Grotesk";margin:7px 0}.product-note{margin-top:25px;border-top:1px solid #ccd4cd;padding-top:18px;color:#6a756d;font-size:11px}.product-note a{color:#228648;text-transform:uppercase;letter-spacing:.1em;margin-left:12px}.transport{min-height:720px;display:grid;grid-template-columns:58% 42%;background:#303538;color:#fff}.transport-image{overflow:hidden}.transport-image img{width:100%;height:100%;object-fit:cover;filter:brightness(.68) saturate(.8)}.transport-panel{padding:110px 8vw 80px 70px;display:flex;flex-direction:column;justify-content:center}.transport-panel h2{margin-top:15px}.transport-panel>p:not(.micro){color:#89958d;line-height:1.8;font-size:14px;max-width:460px;margin-bottom:30px}.about{padding:140px 8vw;background:#f5f7f4}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.about-copy{padding-top:25px;color:#59665d;line-height:1.8;font-size:15px}.about-facts{display:grid;grid-template-columns:1fr 1fr;margin-top:40px}.about-facts div{border-top:1px solid #cbd3cc;padding-top:13px}.about-facts b{display:block;font:600 24px "Space Grotesk";color:#24342b}.about-facts span{font-size:8px;text-transform:uppercase;letter-spacing:.13em;color:#7a857d}.image-strip{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin-top:70px;height:300px}.image-strip img{width:100%;height:100%;object-fit:cover}.contact{min-height:680px;position:relative;overflow:hidden;padding:130px 8vw;background:#07100b;color:#fff}.contact-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,16,11,.98),rgba(7,16,11,.78)),url('../assets/products/image7.png') center/cover;opacity:.9}.contact>*:not(.contact-bg){position:relative;z-index:2}.contact-inner{margin-left:18%;max-width:900px}.contact h2{margin:0 0 45px}.mail{font:500 clamp(23px,3vw,43px) "Space Grotesk";border-bottom:1px solid #506057;padding-bottom:12px;display:inline-block}.mail b{color:#228648}.contact-data{display:flex;gap:30px;margin-top:40px;color:#89958d;font-size:9px;letter-spacing:.13em;text-transform:uppercase}footer{padding:25px 8vw;background:#050a07;color:#68736c;display:flex;justify-content:space-between;font-size:8px;letter-spacing:.13em;text-transform:uppercase}.reveal{opacity:0;transform:translateY(25px);transition:.8s}.reveal.visible{opacity:1;transform:none}@media(max-width:1000px){.header nav,.contact-pill{display:none}.hamburger{display:block;margin-left:auto}.logo{min-width:0}.hero-tech{right:4vw;width:300px}.service-grid{grid-template-columns:1fr 1fr}.service-card.large{grid-row:span 1}.service-card.wide{grid-column:1 / 3}.intro,.service-heading,.products-head,.engineering-top,.about-grid{grid-template-columns:1fr}.voltage-stack{margin-top:50px}.transport{grid-template-columns:1fr}.transport-image{height:430px}.transport-panel{padding:90px 8vw}.contact-inner{margin-left:0}}@media(max-width:650px){.hero-content{left:6vw;right:6vw}.hero h1{font-size:58px}.hero-tech{display:none}.intro,.services,.engineering,.products,.about,.contact{padding-left:6vw;padding-right:6vw}.service-grid,.product-showcase{display:block}.service-card,.service-card.large,.service-card.wide{height:360px;margin-bottom:10px}.product-feature{height:520px;margin-bottom:10px;display:block}.product-image{height:310px}.product-info{height:210px;padding:20px}.product-info h3{font-size:30px;margin:10px 0}.product-tile{height:310px;margin-bottom:10px}.image-strip{height:auto;grid-template-columns:1fr}.image-strip img{height:240px}.contact-data{flex-direction:column;gap:10px}.hero-buttons{flex-direction:column;align-items:flex-start}}



/* MEJORAS BULLSSYSTEMS */
.eyebrow {
    animation: entrarIzquierda 1s ease-out both;
}

@keyframes entrarIzquierda {
    from {
        opacity: 0;
        transform: translateX(-80px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


.btn.green {
    position: relative;
    overflow: hidden;
    background: transparent;
    border: 1px solid #228648;
    color: #fff;
    isolation: isolate;
}

.btn.green::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #228648;
    transform: scaleX(0);
    transform-origin: left;
    z-index: -1;
    animation: rellenarVerde 1s ease-out 0.4s forwards;
}

 

@keyframes rellenarVerde {
    to {
        transform: scaleX(1);
    }
}

/***********/
.tech-card {
    opacity: 0;
    transform: translateY(60px);
    animation: subirCard 0.7s ease-out forwards;
}

.tech-card:nth-child(1) {
    animation-delay: 0.5s;
}

.tech-card:nth-child(2) {
    animation-delay: 0.8s;
}

.tech-card:nth-child(3) {
    animation-delay: 1.7s;
}

@keyframes subirCard {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



nav a {
    position: relative;
    font-size: 14px;
}

nav a::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 0;
    height: 2px;
    background: #228648;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

nav a:hover::before {
    width: 100%;
}





.schematic .node img {
    width: 22px;
    height: 22px;
    display: block;
    margin: 0 auto 8px;
}



.schematic .node {
    transition: transform 0.35s ease-out;
    will-change: transform;
}



/* FOOTER */
/* ================================
   CONTACTO GEEP
================================ */

.contact-section {
    position: relative;
    min-height: 720px;
    padding: 90px 7%;
    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 12, 0.96),
            rgba(5, 17, 12, 0.88)
        ),
        url("../assets/products/image8.png") center/cover no-repeat;

    overflow: hidden;
}


/* Contenedor */

.contact-wrap {
    max-width: 1450px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 90px;
    align-items: center;
}


/* ================================
   IZQUIERDA
================================ */

.contact-info {
    color: #fff;
}

.contact-label {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-bottom: 35px;

    font-size: 11px;
    letter-spacing: 3px;
    color: #a9b5ae;
}

.contact-label span {
    width: 28px;
    height: 2px;
    background: #228648;
}


.contact-eyebrow {
    margin-bottom: 14px;

    font-size: 11px;
    letter-spacing: 3px;
    color: #b6c0ba;
}


.contact-info h2 {
    margin: 0;

    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.98;
    font-weight: 400;
    letter-spacing: -3px;
}

.contact-info h2 strong {
    color: #228648;
    font-weight: 500;
}


.contact-description {
    max-width: 600px;
    margin: 35px 0 42px;

    color: #c6cfca;
    font-size: 17px;
    line-height: 1.7;
}


/* Beneficios */

.contact-benefits {
    display: flex;
    gap: 42px;

    margin-bottom: 45px;
}

.benefit {
    display: flex;
    align-items: center;
    gap: 12px;

    color: #fff;
    font-size: 13px;
    line-height: 1.4;
}

.benefit-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #228648;
    border-radius: 50%;

    color: #228648;
    font-size: 20px;
}


/* Datos */

.contact-details {
    display: flex;
    align-items: center;
    gap: 38px;

    padding-top: 28px;

    border-top: 1px solid rgba(255,255,255,.18);

    color: #fff;
    font-size: 13px;
}

.contact-details a,
.contact-details div {
    display: flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    text-decoration: none;
}

.contact-details span {
    color: #228648;
    font-size: 20px;
}


/* ================================
   FORMULARIO
================================ */

.contact-form-card {
    padding: 42px;

    background: rgba(255,255,255,.97);

    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.28);
}

.contact-form-card h3 {
    margin: 0 0 8px;

    color: #14241b;

    font-size: 30px;
    font-weight: 600;
}

.contact-form-card > p {
    margin: 0 0 28px;

    color: #78847d;
    font-size: 15px;
}


.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}


.form-group {
    position: relative;
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #1c2922;

    font-size: 13px;
    font-weight: 600;
}


.form-group input,
.form-group select,
.form-group textarea {

    width: 100%;
    box-sizing: border-box;

    padding: 14px 15px;

    border: 1px solid #dce3df;
    border-radius: 8px;

    background: #fff;

    color: #27332d;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    border-color: #228648;

    box-shadow:
        0 0 0 3px rgba(139,197,63,.12);
}


.form-group textarea {
    min-height: 125px;
    resize: vertical;
}


.textarea-counter {
    position: absolute;
    right: 12px;
    bottom: 10px;

    color: #8c9891;
    font-size: 11px;
}


/* Botón */

.contact-submit {

    width: 100%;

    padding: 16px 20px;

    border: 0;
    border-radius: 8px;

    background: #228648;

    color: #102016;

    font-family: inherit;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.contact-submit:hover {

    background: #228648;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(139,197,63,.28);
}


.contact-submit span {
    margin-right: 8px;
}


/* Seguridad */

.form-security {

    margin-top: 16px;

    text-align: center;

    color: #89948e;

    font-size: 12px;
}

.form-security span {
    margin-right: 5px;
    color: #228648;
}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1000px) {

    .contact-section {
        padding: 70px 5%;
    }

    .contact-wrap {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-info h2 {
        font-size: clamp(44px, 8vw, 65px);
    }

}


@media (max-width: 600px) {

    .contact-section {
        padding: 60px 20px;
    }

    .contact-info h2 {
        font-size: 43px;
        letter-spacing: -2px;
    }

    .contact-description {
        font-size: 15px;
    }

    .contact-benefits {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-details {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-form-card {
        padding: 25px 20px;
        border-radius: 14px;
    }

    .contact-form-card h3 {
        font-size: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}

/* =========================================================
   GEEP — PRIMERA PANTALLA / DIRECCIÓN VISUAL CLARA
   Color institucional: #228648
   Solo se modifica HEADER + HERO por ahora.
   El resto del sitio conserva sus estilos actuales.
   ========================================================= */

/* MENÚ PRINCIPAL — BLANCO */
.header {
    background: rgba(255,255,255,.96);
    color: #15231c;
    border-bottom: 1px solid #e5e9e7;
    box-shadow: 0 4px 22px rgba(21,35,28,.06);
}

.logo-fallback {
    color: #228648;
}

.logo small {
    color: #657078;
}

.header nav a {
    color: #26332c;
}

.header nav a:hover {
    color: #228648;
}

.header nav a::before {
    background: #228648;
}

.contact-pill {
    border-color: #228648;
    color: #228648;
}

.contact-pill b {
    color: #228648;
}

.hamburger {
    color: #15231c;
}


/* PRIMERA PANTALLA — CLARA */
.hero {
    background: #f5f8f6;
    color: #15231c;
}

/* Se conserva la fotografía; cambia solamente el tratamiento visual */
.hero-image {
    filter: saturate(.88) brightness(1.04);
}

/* Sombra/velo claro en lugar del overlay oscuro */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.82) 35%,
            rgba(255,255,255,.42) 62%,
            rgba(255,255,255,.10) 100%
        ),
        linear-gradient(
            0deg,
            rgba(255,255,255,.28),
            transparent 55%
        );
}

.hero-grid {
    background-image:
        linear-gradient(rgba(34,134,72,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,134,72,.07) 1px, transparent 1px);
    mask-image: linear-gradient(90deg, black, transparent 78%);
}

.hero .eyebrow {
    color: #5f6d65;
}

.hero .eyebrow span {
    background: #228648;
}

.hero h1 {
    color: #15231c;
}

.hero h1 strong {
    color: #228648;
}

.hero-content > p {
    color: #526058;
}

.hero .btn.green {
    background: #228648;
    border-color: #228648;
    color: #fff;
}

.hero .btn.green::before {
    background: #176b39;
}

.hero .btn.line {
    border-color: rgba(21,35,28,.30);
    color: #24332b;
}

.hero .hero-tech .tech-card {
    border-left-color: #228648;
    background: rgba(255,255,255,.84);
    color: #15231c;
    box-shadow: 0 12px 35px rgba(21,35,28,.09);
}

.hero .tech-card span {
    color: #228648;
}

.hero .tech-card b {
    color: #15231c;
}

.hero .tech-card em {
    color: #69766f;
}

.hero .hero-scroll {
    color: #68756e;
}

.hero .hero-scroll span {
    background: #228648;
}

/* Al volver al inicio, el header permanece blanco */
@media (max-width: 1000px) {
    .header {
        background: rgba(255,255,255,.97) !important;
    }
}

.header.scrolled { background: rgba(255,255,255,.98); }

/* =========================================================
   GEEP — HERO DIRECCIÓN VISUAL APROBADA
   Referencia: grafito + blanco + verde #228648
   Solo HERO / HEADER. Resto del sitio sin cambios.
   ========================================================= */

.header {
    background: rgba(255,255,255,.98);
    color: #15231c;
    border-bottom: 1px solid rgba(21,35,28,.08);
    box-shadow: 0 5px 24px rgba(21,35,28,.07);
}

.header nav a {
    color: #26332c;
}

.header nav a:hover,
.contact-pill,
.contact-pill b {
    color: #228648;
}

.contact-pill {
    border-color: #228648;
}

.hero {
    background: #343a3d;
    color: #fff;
}

.hero-image {
    filter: saturate(.82) brightness(.96);
}

/* Grafito suave: recupera el protagonismo de la imagen sin volver al negro */
.hero-overlay {
    background:
        linear-gradient(90deg,
            rgba(52,58,61,.97) 0%,
            rgba(52,58,61,.88) 27%,
            rgba(52,58,61,.56) 50%,
            rgba(52,58,61,.10) 78%,
            rgba(52,58,61,.03) 100%),
        linear-gradient(0deg,
            rgba(52,58,61,.28),
            rgba(52,58,61,.02) 58%,
            rgba(52,58,61,.10) 100%);
}

.hero-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(90deg, black, transparent 78%);
}

.hero .eyebrow {
    color: rgba(255,255,255,.66);
}

.hero .eyebrow span,
.hero .hero-scroll span {
    background: #228648;
}

.hero h1 {
    color: #fff;
    text-shadow: 0 3px 18px rgba(0,0,0,.12);
}

.hero h1 strong {
    color: #228648;
    text-shadow: 0 0 22px rgba(34,134,72,.20);
}

.hero-content > p {
    color: rgba(255,255,255,.76);
}

/* Botón principal: verde GEEP con brillo muy sutil */
.hero .btn.green {
    background: #228648;
    border: 1px solid #228648;
    color: #fff;
    box-shadow: 0 7px 22px rgba(34,134,72,.22);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero .btn.green:hover {
    background: #279653;
    box-shadow: 0 10px 28px rgba(34,134,72,.30);
    transform: translateY(-1px);
}

.hero .btn.line {
    border: 1px solid rgba(255,255,255,.38);
    color: #fff;
    background: rgba(255,255,255,.035);
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.hero .btn.line:hover {
    border-color: rgba(255,255,255,.65);
    background: rgba(255,255,255,.08);
}

/* Flotantes: grafito para conservar protagonismo sobre la fotografía */
.hero .hero-tech .tech-card {
    border-left: 2px solid #228648;
    background: rgba(49,56,59,.90);
    color: #fff;
    box-shadow: 0 14px 38px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.07);
    backdrop-filter: blur(10px);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}

.hero .hero-tech .tech-card:hover {
    background: rgba(58,66,69,.94);
    box-shadow: 0 17px 42px rgba(0,0,0,.22), 0 0 18px rgba(34,134,72,.10);
    transform: translateX(-4px);
}

.hero .tech-card span {
    color: #65c98b;
}

.hero .tech-card b {
    color: #fff;
}

.hero .tech-card em {
    color: rgba(255,255,255,.55);
}

.hero .hero-scroll {
    color: rgba(255,255,255,.60);
}

@media (max-width: 650px) {
    .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(52,58,61,.94) 0%,
                rgba(52,58,61,.78) 68%,
                rgba(52,58,61,.32) 100%),
            linear-gradient(0deg, rgba(52,58,61,.45), transparent 70%);
    }
}


/* GEEP HERO — flotantes técnicos: iconos + números + flecha */
.hero .hero-tech .tech-card {
    grid-template-columns: 48px 1fr 24px;
    min-height: 70px;
    padding: 0 18px 0 0;
    border-left: 2px solid #228648;
}

.hero .tech-card .tech-num {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: 14px;
    color: #65c98b;
    font-size: 9px;
    background: linear-gradient(90deg, rgba(34,134,72,.24), rgba(34,134,72,.06));
    border-right: 1px solid rgba(34,134,72,.16);
}

.hero .tech-main {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 14px;
}

.hero .tech-main svg {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    fill: none;
    stroke: #a8d9b8;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 7px rgba(101,201,139,.12));
}

.hero .tech-main > div {
    min-width: 0;
}

.hero .tech-main b,
.hero .tech-main em {
    display: block;
    grid-column: auto;
}

.hero .tech-main b {
    font-size: 10px;
    letter-spacing: .12em;
}

.hero .tech-main em {
    margin-top: 5px;
    font-size: 8px;
    letter-spacing: .12em;
    color: rgba(255,255,255,.55);
    font-style: normal;
}

.hero .tech-card .tech-arrow {
    align-self: center;
    justify-self: end;
    color: rgba(255,255,255,.82);
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease, color .25s ease;
}

.hero .tech-card:hover .tech-arrow {
    transform: translateX(4px);
    color: #65c98b;
}

/* GEEP HERO — refinamiento visual */
.hero h1 strong {
    background: linear-gradient(105deg, #228648 0%, #228648 38%, #228648 72%, #228648 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 18px rgba(34,134,72,.18);
}
.btn.green {
    background: linear-gradient(105deg, #228648 0%, #228648 42%, #228648 78%, #228648 100%);
    box-shadow: 0 0 20px rgba(34,134,72,.20), inset 0 1px 0 rgba(255,255,255,.20);
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn.green:hover {
    filter: brightness(1.06);
    box-shadow: 0 0 28px rgba(34,134,72,.30), inset 0 1px 0 rgba(255,255,255,.25);
    transform: translateY(-1px);
}
.eyebrow span,.hero-scroll span { background:#228648; box-shadow:0 0 10px rgba(34,134,72,.30); }
.hero-grid { background-image:linear-gradient(rgba(34,134,72,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(34,134,72,.07) 1px,transparent 1px); }
.tech-card { border-left-color:#228648; background:rgba(52,58,61,.78); box-shadow:0 8px 25px rgba(0,0,0,.18); }
.tech-card span { color:#228648; }

/* =========================================================
   GEEP — AJUSTE FINAL HERO
   Imagen nítida + sombra grafito aprobada
   ========================================================= */
.hero-image {
    filter: saturate(.95) brightness(1.04) contrast(1.03);
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(45,51,54,.98) 0%,
            rgba(45,51,54,.90) 27%,
            rgba(45,51,54,.58) 50%,
            rgba(45,51,54,.10) 78%,
            rgba(45,51,54,.03) 100%
        ),
        linear-gradient(
            0deg,
            rgba(45,51,54,.30),
            rgba(45,51,54,.02) 58%,
            rgba(45,51,54,.10) 100%
        );
}

@media (max-width: 650px) {
    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(45,51,54,.96) 0%,
                rgba(45,51,54,.82) 68%,
                rgba(45,51,54,.16) 100%
            ),
            linear-gradient(
                0deg,
                rgba(45,51,54,.30),
                rgba(45,51,54,.02) 58%,
                rgba(45,51,54,.08) 100%
            );
    }
}

/* Cabecera compartida y página actual del menú. */
.header {
    height: 70px;
}

.header .logo img {
    width: 121.275px;
    height: 42.44625px;
}

.header nav a {
    position: relative;
    font-size: 15px;
    text-transform: none;
    font-weight: 700;
    color: #15231c;
}

.header nav a:hover,
.header nav a.active {
    color: #228648;
}

.header nav a.active::before {
    content: "";
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: #228648;
}

/* Contacto: verde corporativo de la portada. */
.contact-section { --contact-green: #228648; }
.contact-info h2 strong,.contact-label,.contact-benefits .benefit-icon,.contact-details span,.form-security span { color:var(--contact-green); }
.contact-label span { background:var(--contact-green); }
.contact-submit { background:var(--contact-green); color:#fff; }
.contact-submit:hover { background:#196b38; box-shadow:0 10px 25px rgba(34,134,72,.22); }
.contact-section .form-group input:focus,.contact-section .form-group select:focus,.contact-section .form-group textarea:focus { border-color:var(--contact-green); box-shadow:0 0 0 3px rgba(34,134,72,.14); }
.contact-captcha small { display:block; margin-top:8px; color:#58675e; line-height:1.5; }
.contact-feedback { padding:14px 18px; margin:18px 0; border-radius:8px; line-height:1.6; }
.contact-feedback ul { margin:0; padding-left:20px; }
.contact-feedback.error { color:#8b2020; background:#fff0f0; border:1px solid #edbcbc; }
.contact-feedback.success { color:#196b38; background:#e9f6ee; border:1px solid #a1d4b4; }
.contact-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.contact-submit:disabled { opacity:.65; cursor:wait; }
.contact-section .benefit-icon { border-color:var(--contact-green); color:var(--contact-green); }