* {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 30px
        }

        body {
            margin: 0;
            background: #f2f1ec;
            color: #202728;
            font-family: Arial, Helvetica, sans-serif
        }

        a {
            color: inherit;
            text-decoration: none
        }

        header {
            background: #151c1e;
            color: #fff;
            padding: 24px 6%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #ffffff20
        }

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

        .mark {
            font-size: 32px;
            font-weight: 900;
            background: #e94432;
            padding: 3px 12px;
            transform: skew(-8deg)
        }

        .logo small {
            font-size: 9px;
            letter-spacing: 4px;
            display: block;
            margin-bottom: 3px
        }

        .logo strong {
            font-size: 23px;
            letter-spacing: 2px
        }

        nav {
            display: flex;
            gap: 30px;
            align-items: center;
            font-size: 13px;
            font-weight: bold
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 25px;
            background: #e94432;
            color: white;
            padding: 18px 24px;
            font-size: 13px;
            font-weight: bold;
            transition: .2s
        }

        .btn:hover {
            background: #ba3023
        }

        .btn.line {
            background: transparent;
            border: 1px solid #ffffff60
        }

        .btn.line:hover {
            background: #ffffff12
        }

        .hero {
            background: #151c1e;
            color: white;
            min-height: 650px;
            padding: 72px 6%;
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 35px;
            align-items: center;
            overflow: hidden;
            position: relative
        }

        .hero:before {
            content: '';
            background: #e94432;
            position: absolute;
            right: -325px;
            top: -60px;
            width: 450px;
            height: 900px;
            transform: rotate(24deg)
        }

        .eyebrow {
            font-size: 10px;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .eyebrow:before {
            content: '';
            width: 25px;
            height: 3px;
            background: #e94432
        }

        h1 {
            font-size: clamp(44px, 5.2vw, 74px);
            font-weight: 900;
            line-height: .98;
            letter-spacing: -4px;
            margin: 28px 0
        }

        h1 span {
            color: #fa5947
        }

        p {
            font-size: 15px;
            line-height: 1.75
        }

        .hero p {
            max-width: 450px;
            color: #b8c2c4
        }

        .actions {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 30px
        }

        .hero-foot {
            font-size: 10px;
            letter-spacing: 1px;
            color: #bbc3c5;
            margin-top: 35px
        }

        .visual {
            position: relative;
            z-index: 1
        }

        .visual svg {
            width: 100%;
            filter: drop-shadow(0 22px 10px #0006)
        }

        .visual-label {
            display: block;
            text-align: right;
            font-size: 9px;
            letter-spacing: 2px;
            color: #aab8bc;
            margin-top: 15px
        }

        .brands {
            background: #fff;
            display: flex;
            gap: 45px;
            align-items: center;
            padding: 25px 6%;
            border-bottom: 1px solid #ddd
        }

        .brands span {
            font-size: 9px;
            line-height: 1.6;
            color: #697579;
            letter-spacing: 1px
        }

        .brands strong {
            font-size: 23px;
            color: #485255
        }

        .brands em {
            font-size: 12px;
            color: #777;
            font-style: normal
        }

        section {
            padding: 82px 6%
        }

        .section-top {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 30px;
            margin-bottom: 38px
        }

        h2 {
            font-size: clamp(34px, 4vw, 53px);
            letter-spacing: -2px;
            line-height: 1.08;
            margin: 18px 0 0
        }

        .section-top p {
            max-width: 340px;
            color: #687476;
            font-size: 14px;
            margin: 0
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            background: #d2d5d0;
            gap: 1px;
            border: 1px solid #d2d5d0
        }

        article {
            background: #f2f1ec;
            padding: 32px;
            min-height: 250px;
            display: flex;
            flex-direction: column
        }

        article small {
            color: #ba372a;
            font-weight: bold;
            font-size: 10px;
            letter-spacing: 1.3px
        }

        h3 {
            font-size: 23px;
            letter-spacing: -.6px;
            margin: 30px 0 12px
        }

        article p {
            font-size: 14px;
            color: #637073;
            margin: 0
        }

        article a {
            font-size: 12px;
            font-weight: bold;
            margin-top: auto;
            padding-top: 25px;
            align-self: start
        }

        article a:hover {
            color: #e94432
        }

        .dark {
            background: #222c30;
            color: #fff
        }

        .dark p {
            color: #b4c0c3
        }

        .dark small {
            color: #ff7665
        }

        .contact {
            background: #e94432;
            color: #fff;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 65px
        }

        .contact .eyebrow:before {
            background: white
        }

        .contact p {
            max-width: 370px;
            color: #ffe1dc
        }

        .contact .btn {
            background: #182124;
            margin-top: 15px
        }

        .details {
            border-top: 1px solid #ffffff60
        }

        .row {
            border-bottom: 1px solid #ffffff60;
            padding: 24px 0;
            display: flex;
            justify-content: space-between;
            gap: 20px;
            align-items: center
        }

        .row small {
            display: block;
            font-size: 9px;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin-bottom: 10px
        }

        .row strong {
            font-size: 25px
        }

        .row>a {
            font-size: 25px
        }

        .row p {
            margin: 0;
            font-size: 14px
        }

        footer {
            padding: 30px 6%;
            background: #151c1e;
            color: #a3b2b6;
            font-size: 11px;
            display: flex;
            justify-content: space-between;
            gap: 25px
        }

        footer strong {
            color: white;
            font-size: 15px;
            letter-spacing: 2px
        }

        .float {
            position: fixed;
            bottom: 22px;
            right: 22px;
            z-index: 5;
            padding: 16px 22px;
            border-radius: 40px;
            background: white;
            border: 1px solid #ddd;
            box-shadow: 0 5px 25px #0002;
            font-size: 13px;
            font-weight: bold
        }

        .float b {
            color: #13824a;
            margin-right: 7px
        }

        a:focus-visible {
            outline: 3px solid #ffb34d;
            outline-offset: 5px
        }

        @media(min-width:1500px) {

            header,
            .hero,
            .brands,
            section,
            footer {
                padding-left: calc((100vw - 1320px)/2);
                padding-right: calc((100vw - 1320px)/2)
            }
        }

        @media(max-width:850px) {
            .hero {
                grid-template-columns: 1fr;
                padding-top: 50px;
                padding-bottom: 35px
            }

            .visual {
                max-width: 510px;
                margin: 0 auto;
                width: 100%
            }

            .visual svg {
                max-height: 300px
            }

            .hero:before {
                right: -420px
            }

            .brands {
                gap: 25px;
                flex-wrap: wrap
            }

            .grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .section-top {
                flex-direction: column;
                align-items: start
            }

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

            nav>a:not(.btn) {
                display: none
            }

            section {
                padding-top: 60px;
                padding-bottom: 60px
            }
        }

        @media(max-width:520px) {
            header {
                padding-top: 18px;
                padding-bottom: 18px
            }

            .logo strong {
                font-size: 19px
            }

            .mark {
                font-size: 27px
            }

            nav .btn {
                padding: 13px;
                font-size: 11px
            }

            h1 {
                font-size: 46px;
                letter-spacing: -2.8px
            }

            .hero .eyebrow {
                font-size: 8px
            }

            .actions .btn {
                padding: 16px 19px
            }

            .grid {
                grid-template-columns: 1fr
            }

            article {
                min-height: 235px
            }

            .brands span {
                width: 100%
            }

            .brands strong {
                font-size: 18px
            }

            .brands {
                gap: 18px
            }

            .visual-label {
                font-size: 7px
            }

            .row strong {
                font-size: 22px
            }

            footer {
                flex-direction: column;
                padding-bottom: 100px
            }

            .float {
                bottom: 14px;
                right: 14px
            }
        }

.hero .trayectoria { margin: 22px 0 0; color: #e3e8e9; font-size: 14px; font-weight: 600; }
.hero .trayectoria + h1 { margin-top: 18px; }

/* Portada fotográfica: imagen suave y texto con buen contraste. */
.hero {
    isolation: isolate;
    grid-template-columns: 1fr;
}
.hero::before {
    content: "";
    position: absolute;
    inset: -10px;
    width: auto;
    height: auto;
    background: url("imagenes/portada.jpg") center 48% / cover no-repeat;
    transform: none;
    filter: blur(2px) saturate(.65);
    z-index: -2;
    pointer-events: none;
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(13, 22, 26, .96) 0%, rgba(13, 22, 26, .88) 32%, rgba(13, 22, 26, .55) 66%, rgba(13, 22, 26, .43) 100%);
    z-index: -1;
    pointer-events: none;
}
.hero > div { max-width: 680px; }
.hero p { color: #d4dcdf; }
.hero .hero-foot { color: #d4dcdf; }
@media (max-width: 850px) {
    .hero::before { right: -10px; background-position: 60% center; }
    .hero::after { background: rgba(13, 22, 26, .83); }
}

/* Marcas de lubricantes: franja secundaria y discreta. */
.lubricantes {
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #e8e8e2;
    border-top: 1px solid #d2d5d0;
}
.lubricantes h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .6px;
    color: #626e71;
}
.lubricantes-marcas {
    display: flex;
    align-items: center;
    gap: 50px;
    color: #465458;
}
.lubricantes-marcas > span {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}
.lubricantes-marcas small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    letter-spacing: 3px;
}
@media (max-width: 520px) {
    .lubricantes { flex-direction: column; align-items: flex-start; gap: 20px; }
    .lubricantes-marcas { gap: 38px; }
    .lubricantes-marcas > span { font-size: 21px; }
}


/* Fondo fotográfico de la sección de contacto. */
.contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #172124;
}
.contact::before {
    content: "";
    position: absolute;
    inset: -8px;
    background: url("imagenes/taller-2.jpeg") center 48% / cover no-repeat;
    filter: blur(1.5px) saturate(.65);
    z-index: -2;
    pointer-events: none;
}
.contact::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 25, 29, .92), rgba(15, 25, 29, .78));
    z-index: -1;
    pointer-events: none;
}
.contact .eyebrow::before { background: #f45a47; }
.contact p { color: #e0e6e8; }
.contact .btn { background: #e94432; }
.contact .btn:hover { background: #ba3023; }
.contact .row small { color: #d7dfe2; }
@media (max-width: 850px) {
    .contact::after { background: rgba(15, 25, 29, .88); }
}