/* =====================================================
   IMPORTACIONES
===================================================== */

@import url("componentes.css?v=5");
@import url("animations.css?v=5");

/* =====================================================
   VARIABLES GLOBALES
===================================================== */

:root{
    --rojo-corona:#E3000F;
    --rojo-oscuro:#b8000d;
    --negro-intenso:#050505;
    --carbon:#151515;
    --blanco-puro:#FFFFFF;
    --gris-fondo:#f4f4f4;
    --gris-suave:#e8e8e8;
    --gris-texto:#4b4b4b;

    --fuente-principal:Arial, Helvetica, sans-serif;
    --radio:8px;
    --sombra:0 18px 45px rgb(0 0 0 / 16%);
    --transicion:.25s ease;
    --barra-height:42px;
    --header-main-height:160px;
    --header-height:calc(var(--barra-height) + var(--header-main-height));

    --container-width:1280px;
    --container-padding:1.5rem;

    color-scheme:light;
}

/* =====================================================
   RESET
===================================================== */

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

html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-height) + 22px);
    -webkit-text-size-adjust:100%;
}

body{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    overflow-x:hidden;
    padding-top:var(--header-height);
    font-family:var(--fuente-principal);
    background:var(--gris-fondo);
    color:var(--negro-intenso);
}

main{
    flex:1;
}

img,
picture,
svg,
video,
canvas{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    color:inherit;
}

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

ul,
ol{
    list-style:none;
}

:focus-visible{
    outline:3px solid rgb(227 0 15 / 38%);
    outline-offset:4px;
}

.container{
    width:min(var(--container-width), calc(100% - (var(--container-padding) * 2)));
    margin-inline:auto;
}

/* =====================================================
   BOTONES
===================================================== */

.btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:48px;
    padding:0 24px;
    border:2px solid transparent;
    border-radius:var(--radio);
    font-size:.95rem;
    font-weight:800;
    letter-spacing:.2px;
    line-height:1;
    text-transform:uppercase;
    transition:
        transform var(--transicion),
        background var(--transicion),
        border-color var(--transicion),
        color var(--transicion),
        box-shadow var(--transicion);
}

.btn:hover,
.btn:focus-visible{
    transform:translateY(-2px);
}

.btn--primary{
    background:var(--rojo-corona);
    color:var(--blanco-puro);
    box-shadow:0 14px 26px rgb(227 0 15 / 28%);
}

.btn--primary:hover,
.btn--primary:focus-visible{
    background:var(--rojo-oscuro);
}

.btn--secondary{
    border-color:rgb(255 255 255 / 70%);
    color:var(--blanco-puro);
}

.btn--secondary:hover,
.btn--secondary:focus-visible{
    background:var(--blanco-puro);
    color:var(--negro-intenso);
}

/* =====================================================
   HERO
===================================================== */

.hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:calc(100vh - var(--header-height));
    padding:clamp(72px, 9vw, 118px) 0;
    background:#050505;
    overflow:hidden;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg, rgb(5 5 5 / 86%) 0%, rgb(5 5 5 / 70%) 48%, rgb(5 5 5 / 48%) 100%);
    pointer-events:none;
}

.hero__container{
    position:static;
}

.hero__content{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
    max-width:860px;
}

.hero__subtitle,
.section__eyebrow{
    color:var(--rojo-corona);
    font-size:.86rem;
    font-weight:800;
    letter-spacing:2.6px;
    text-transform:uppercase;
}

.hero__title{
    max-width:760px;
    color:var(--blanco-puro);
    font-size:clamp(2.6rem, 5vw, 5rem);
    font-weight:900;
    line-height:1.06;
}

.hero__description{
    max-width:620px;
    color:#dedede;
    font-size:1.08rem;
    line-height:1.8;
}

.hero__buttons{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-top:6px;
}

.hero__image{
    position:absolute;
    inset:0;
    z-index:0;
}

.hero__image img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    border-radius:0;
    filter:brightness(.76) saturate(.9);
}

/* =====================================================
   SECCIONES
===================================================== */

.section{
    padding:clamp(76px, 9vw, 400px) 0;
    scroll-margin-top:calc(var(--header-height) + 22px);
}

.section--light{
    background:var(--gris-fondo);
}

.section--dark{
    background:var(--carbon);
    color:var(--blanco-puro);
}

.section__header{
    max-width:760px;
    margin-bottom:40px;
}

.section__title{
    max-width:760px;
    margin-top:14px;
    color:inherit;
    font-size:clamp(2rem, 4vw, 3.4rem);
    font-weight:900;
    line-height:1.12;
}

.section__text{
    max-width:760px;
    margin-top:18px;
    color:var(--gris-texto);
    font-size:1.04rem;
    line-height:1.8;
}

.section--dark .section__text,
.contact .section__text{
    color:#d7d7d7;
}

/* =====================================================
   SERVICIOS
===================================================== */

.services-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
}

.service-card{
    position:relative;
    min-height:245px;
    padding:28px;
    border:1px solid rgb(0 0 0 / 8%);
    border-bottom:4px solid var(--rojo-corona);
    border-radius:var(--radio);
    background:linear-gradient(145deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow:0 15px 35px rgb(0 0 0 / 9%);
    transition:
        transform var(--transicion),
        box-shadow var(--transicion),
        border-color var(--transicion);
}

.service-card:hover{
    transform:translateY(-8px);
    border-color:rgb(227 0 15 / 30%);
    box-shadow:0 22px 50px rgb(227 0 15 / 15%);
}

.service-card__icon{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:48px;
    height:48px;
    margin-bottom:22px;
    border-radius:var(--radio);
    background:rgb(227 0 15 / 10%);
    font-size:1.45rem;
}

.service-card h3{
    margin-bottom:12px;
    font-size:1.15rem;
    line-height:1.25;
}

.service-card p{
    color:var(--gris-texto);
    line-height:1.68;
}

/* =====================================================
   NOSOTROS
===================================================== */

.split-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, .78fr);
    align-items:start;
    gap:clamp(36px, 6vw, 78px);
}

.features-list{
    display:grid;
    gap:16px;
}

.features-list article{
    padding:24px;
    border:1px solid rgb(255 255 255 / 12%);
    border-radius:var(--radio);
    background:rgb(255 255 255 / 6%);
}

.features-list strong,
.features-list span{
    display:block;
}

.features-list strong{
    margin-bottom:8px;
    font-size:1.05rem;
}

.features-list span{
    color:#d7d7d7;
    line-height:1.65;
}

/* =====================================================
   FLOTILLA
===================================================== */

.fleet{
    display:grid;
    grid-template-columns:minmax(280px, .85fr) minmax(0, 1fr);
    align-items:center;
    gap:clamp(36px, 6vw, 78px);
}

.fleet__image{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:280px;
    padding:32px;
    border:1px solid rgb(0 0 0 / 8%);
    border-radius:var(--radio);
    background:linear-gradient(180deg, #ffffff 0%, #efefef 100%);
    box-shadow:0 16px 38px rgb(0 0 0 / 9%);
    overflow:hidden;
}

.fleet__image img{
    width:min(100%, 520px);
}

.fleet-reference-gallery{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    width:100%;
}

.fleet-reference-card{
    position:relative;
    min-width:0;
    overflow:hidden;
    min-height:170px;
    margin:0;
    border-radius:var(--radio);
    background:#151515;
    box-shadow:0 14px 30px rgb(0 0 0 / 14%);
}

.fleet-reference-card:first-child{
    grid-column:1 / -1;
}

.fleet-reference-card img{
    width:100%;
    height:100%;
    min-height:170px;
    object-fit:cover;
    transition:transform .5s ease;
}

.fleet-reference-card:first-child img{
    min-height:230px;
}

.fleet-reference-card:hover img{
    transform:scale(1.04);
}

.fleet-reference-card::after{
    content:"";
    position:absolute;
    inset:45% 0 0;
    background:linear-gradient(transparent, rgb(0 0 0 / 78%));
    pointer-events:none;
}

.fleet-reference-card figcaption{
    position:absolute;
    right:16px;
    bottom:15px;
    left:16px;
    z-index:1;
    color:var(--blanco-puro);
    font-size:.98rem;
    font-weight:800;
}

.clients-slider__control{
    position:absolute;
    top:50%;
    z-index:2;
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgb(255 255 255 / 35%);
    border-radius:50%;
    background:rgb(0 0 0 / 46%);
    color:var(--blanco-puro);
    font-size:2rem;
    line-height:1;
    cursor:pointer;
    transform:translateY(-50%);
    transition:background var(--transicion), transform var(--transicion);
}

.clients-slider__control:hover,
.clients-slider__control:focus-visible{
    background:var(--rojo-corona);
    transform:translateY(-50%) scale(1.06);
}

.clients-slider__control--prev{ left:18px; }

.clients-slider__control--next{ right:18px; }

.clients-slider__dots{
    position:absolute;
    bottom:18px;
    left:50%;
    z-index:3;
    display:flex;
    gap:7px;
    transform:translateX(-50%);
}

.clients-slider__dots button{
    width:9px;
    height:9px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgb(255 255 255 / 55%);
    cursor:pointer;
}

.clients-slider__dots button.activo{
    background:var(--rojo-corona);
    transform:scale(1.3);
}

.clients-slider{
    position:relative;
    padding:0 58px 42px;
}

.clients-slider__viewport{
    overflow:hidden;
    border-radius:var(--radio);
}

.clients-slider__track{
    display:flex;
    gap:20px;
    transition:transform .5s ease;
    will-change:transform;
}

.client-logo{
    display:flex;
    flex:-1 0 calc((100% - 40px) / 3);
    justify-content:center;
    align-items:center;
    min-height:220px;
    padding:26px;
    border:1px solid rgb(255 255 255 / 22%);
    border-top:4px solid var(--rojo-corona);
    border-radius:var(--radio);
    background:linear-gradient(145deg, #ffffff 0%, #f2f2f2 100%);
    box-shadow:0 18px 36px rgb(0 0 0 / 22%);
    transition:transform var(--transicion), box-shadow var(--transicion);
}

.client-logo:hover{
    transform:translateY(-6px);
    box-shadow:0 24px 44px rgb(0 0 0 / 30%);
}

.client-logo img{
    display:block;
    width:100%;
    max-width:290px;
    max-height:150px;
    object-fit:contain;
    transform:scale(1.1);
}

.clients-slider__dots{
    bottom:6px;
}

.fleet__stats{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:14px;
    margin-top:30px;
}

.fleet__stats div{
    min-height:118px;
    padding:22px;
    border:1px solid rgb(0 0 0 / 8%);
    border-bottom:4px solid var(--rojo-corona);
    border-radius:var(--radio);
    background:linear-gradient(145deg, #ffffff 0%, #f9f9f9 100%);
    box-shadow:0 12px 28px rgb(0 0 0 / 8%);
    transition:transform var(--transicion), box-shadow var(--transicion);
}

.fleet__stats div:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 38px rgb(227 0 15 / 12%);
}

.fleet__stats dt{
    margin-bottom:8px;
    color:var(--rojo-corona);
    font-size:1.65rem;
    font-weight:900;
    line-height:1;
}

.fleet__stats dd{
    color:var(--gris-texto);
    line-height:1.45;
}

/* =====================================================
   CONTACTO
===================================================== */

.contact{
    background:linear-gradient(135deg, #111111 0%, #222222 100%);
    color:var(--blanco-puro);
}

.contact__container{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(320px, .9fr);
    align-items:start;
    gap:clamp(34px, 6vw, 72px);
}

.contact__actions{
    display:grid;
    gap:14px;
}

.contact-link{
    display:grid;
    grid-template-columns:46px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon detail";
    gap:4px 16px;
    align-items:center;
    min-height:86px;
    padding:18px;
    border:1px solid rgb(255 255 255 / 12%);
    border-radius:var(--radio);
    background:rgb(255 255 255 / 7%);
    transition:
        transform var(--transicion),
        background var(--transicion),
        border-color var(--transicion);
}

.contact-link:hover,
.contact-link:focus-visible{
    background:var(--rojo-corona);
    border-color:var(--rojo-corona);
    transform:translateX(5px);
}

.contact-link span{
    grid-area:icon;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:50%;
    background:rgb(255 255 255 / 15%);
    font-size:1.1rem;
}

.contact-link strong{
    grid-area:title;
    font-size:1.05rem;
    line-height:1;
}

.contact-link small{
    grid-area:detail;
    color:#bcbcbc;
    font-size:.9rem;
    line-height:1;
}

.contact-link:hover small,
.contact-link:focus-visible small{
    color:rgb(255 255 255 / 85%);
}

.contact-map {
    margin-top: 10px;
    border-radius: var(--radio);
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 12%);
    box-shadow: 0 10px 25px rgb(0 0 0 / 25%);
    transition: border-color var(--transicion);
}

.contact-map:hover {
    border-color: var(--rojo-corona);
}

.contact-map iframe {
    display: block;
}

/* =====================================================
   AJUSTES RESPONSIVOS PARA NOSOTROS
===================================================== */

@media (max-width:1100px){
    .split-layout{
        grid-template-columns:minmax(0, 1fr) minmax(280px, .8fr);
        gap:36px;
    }

    .features-list article{
        padding:20px;
    }
}

@media (max-width:900px){
    .split-layout{
        grid-template-columns:1fr;
        gap:34px;
    }

    .split-layout > div:first-child{
        max-width:780px;
    }

    .features-list{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:14px;
    }

    .features-list article{
        min-width:0;
        padding:20px;
    }
}

@media (max-width:680px){
    .split-layout{
        gap:28px;
    }

    .features-list{
        grid-template-columns:1fr;
        gap:12px;
    }

    .features-list article{
        padding:18px;
    }

    .features-list span{
        line-height:1.55;
    }
}

/* =====================================================
   AJUSTES RESPONSIVOS PARA SERVICIOS
===================================================== */

@media (max-width:1200px){
    .services-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:18px;
    }

    .service-card{
        min-width:0;
        min-height:220px;
        padding:24px;
    }
}

@media (max-width:680px){
    .services-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .service-card{
        min-height:auto;
        padding:22px;
    }

    .service-card p{
        max-width:52ch;
    }
}

/* =====================================================
   AJUSTES RESPONSIVOS PARA FLOTILLA
===================================================== */

@media (max-width:1200px){
    .fleet{
        grid-template-columns:minmax(250px, .85fr) minmax(0, 1fr);
        gap:40px;
    }

    .fleet__image{
        min-width:0;
        padding:24px;
    }
}

@media (max-width:900px){
    .fleet{
        grid-template-columns:1fr;
        gap:34px;
    }

    .fleet__image,
    .fleet__content{
        width:100%;
    }

    .fleet__stats{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }
}

@media (max-width:680px){
    .fleet{
        gap:28px;
    }

    .fleet__image{
        padding:18px;
    }

    .fleet__stats{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:24px;
    }

    .fleet__stats div{
        min-height:auto;
        padding:18px;
    }
}

/* =====================================================
   AJUSTES RESPONSIVOS PARA CLIENTES
===================================================== */

@media (max-width:1200px){
    .clients-slider{
        padding-inline:50px !important;
    }

    .clients-slider .client-logo{
        min-height:200px;
    }
}

@media (max-width:900px){
    .clients.section{
        padding-block:78px;
    }

    .clients-slider{
        padding-inline:44px !important;
    }

    .clients-slider .client-logo{
        min-height:185px;
        padding:22px;
    }

    .clients-slider__control--prev{
        left:4px;
    }

    .clients-slider__control--next{
        right:4px;
    }
}

@media (max-width:680px){
    .clients.section{
        padding-block:64px;
    }

    .clients-slider{
        padding-inline:34px !important;
        padding-bottom:40px;
    }

    .clients-slider .client-logo{
        min-height:175px;
        padding:20px;
    }

    .clients-slider__control{
        width:34px;
        height:34px;
        font-size:1.55rem;
    }

    .clients-slider__control--prev{
        left:0;
    }

    .clients-slider__control--next{
        right:0;
    }
}

@media (max-width:460px){
    .clients-slider{
        padding-inline:30px !important;
    }

    .clients-slider .client-logo{
        min-height:155px;
        padding:16px;
    }

    .clients-slider .client-logo img{
        max-height:112px;
    }
}

/* =====================================================
   AJUSTES RESPONSIVOS PARA CONTACTO Y FOOTER
===================================================== */

@media (max-width:1200px){
    .footer__container{
        grid-template-columns:1.35fr 1fr;
        gap:30px;
    }
}

@media (max-width:900px){
    .contact__container{
        grid-template-columns:1fr;
        gap:34px;
    }

    .contact__container > div:first-child{
        max-width:760px;
    }

    .footer__container{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:30px;
    }
}

@media (max-width:680px){
    .contact__container{
        gap:28px;
    }

    .contact-link{
        min-height:78px;
        padding:16px;
    }

    .footer__container{
        grid-template-columns:1fr;
        gap:28px;
        padding-block:48px 40px;
    }

    .footer__bottom-container{
        flex-direction:column;
        align-items:flex-start;
    }
}

@media (max-width:460px){
    .contact-link{
        grid-template-columns:42px minmax(0, 1fr);
        gap:4px 12px;
        min-height:74px;
        padding:14px;
    }

    .contact-link span{
        width:42px;
        height:42px;
    }

    .footer__brand{
        grid-template-columns:56px minmax(0, 1fr);
    }

    .footer__logo{
        width:56px;
        height:56px;
    }

    .footer__logo img{
        width:42px;
    }
}

/* =====================================================
   MARQUEE DE CLIENTES – SCROLL INFINITO CSS
===================================================== */

.clients-marquee{
    position:relative;
    overflow:hidden;
    width:100%;
    padding:0;
}

/* Fade en los bordes para entrada/salida suave */
.clients-marquee::before,
.clients-marquee::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:100px;
    z-index:2;
    pointer-events:none;
}

.clients-marquee::before{
    left:0;
    background:linear-gradient(to right, var(--carbon), transparent);
}

.clients-marquee::after{
    right:0;
    background:linear-gradient(to left, var(--carbon), transparent);
}

.clients-marquee__track{
    display:flex;
    gap:20px;
    width:max-content;
    animation:marqueeInfinito 32s linear infinite;
}

/* Pausa al pasar el ratón */
.clients-marquee:hover .clients-marquee__track{
    animation-play-state:paused;
}

@keyframes marqueeInfinito{
    from{ transform:translateX(0); }
    to{   transform:translateX(-50%); }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion:reduce){
    .clients-marquee__track{
        animation:none;
    }
}