/*==================================================
=              BARRA SUPERIOR                      =
==================================================*/

#header{
    position:fixed;
    inset:0 0 auto 0;
    width:100%;
    z-index:1000;
}

.barra-superior{
    display:flex;
    align-items:center;
    width:100%;
    height:var(--barra-height);
    overflow:hidden;
    contain:paint;
    background:var(--rojo-corona);
    color:var(--blanco-puro);
    border-bottom:1px solid rgb(255 255 255 / 12%);
    user-select:none;
}

.barra-track{
    display:flex;
    width:max-content;
    will-change:transform;
    animation:barraInfinita var(--barra-duration, 28s) linear infinite;
}

.barra-contenido{
    display:flex;
    align-items:center;
    flex-shrink:0;
}

.barra-item{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    padding-inline:32px;
    white-space:nowrap;
    font-size:.95rem;
    font-weight:700;
}

.barra-item::after{
    content:"\2022";
    margin-left:32px;
    color:rgb(255 255 255 / 45%);
}

.barra-item:last-child::after{
    content:none;
}

/*==================================================
=                    HEADER                        =
==================================================*/

.header-principal{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    height:var(--header-main-height);
    padding:14px 35px;
    background:linear-gradient(180deg, #fff 0%, #fcfcfc 55%, #f4f4f4 100%);
    border-bottom:1px solid rgb(0 0 0 / 8%);
    box-shadow:
        0 8px 20px rgb(0 0 0 / 10%),
        0 2px 4px rgb(0 0 0 / 6%);
}

.header-principal::after{
    content:"";
    position:absolute;
    inset:auto 0 0;
    width:100%;
    height:3px;
    background:var(--rojo-corona);
}

.logo-contenedor{
    display:flex;
    align-items:center;
    min-width:180px;
}

.logo-compuesto{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:220px;
    user-select:none;
    will-change:transform;
}

.logo-compuesto:hover{
    filter:drop-shadow(0 6px 12px rgb(0 0 0 / 15%));
}

.logo-cuerpo,
.logo-carretera{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.logo-cuerpo{
    position:relative;
    z-index:2;
    will-change:transform;
}

.logo-carretera{
    position:relative;
    z-index:1;
    margin-top:13px;
}

.ruedas-contenedor{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:3;
    will-change:transform;
}

.rueda{
    position:absolute;
    bottom:25px;
    width:24px;
    height:auto;
    transform-origin:center;
    will-change:transform;
}

.rueda-1{
    left:25px;
}

.rueda-2{
    left:53px;
}

.rueda-3{
    right:14px;
}

/*==================================================
=                  NAVEGACION                      =
==================================================*/

.navegacion{
    position:relative;
    z-index:10;
    display:flex;
    align-items:center;
    padding-block:10px;
}

.navegacion ul{
    display:flex;
    align-items:center;
    gap:34px;
}

.navegacion a{
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding-block:8px;
    font-size:15px;
    font-weight:800;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--negro-intenso);
    transition:
        color var(--transicion),
        transform var(--transicion);
}

.navegacion a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:100%;
    height:4px;
    border-radius:50px;
    background:linear-gradient(90deg, #c40011, var(--rojo-corona), #ff4d4d);
    opacity:.9;
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:
        transform var(--transicion),
        opacity var(--transicion);
}

.navegacion a:hover,
.navegacion a:focus-visible,
.navegacion a.activo,
.navegacion a[aria-current="page"]{
    color:var(--rojo-corona);
}

.navegacion a:hover::after,
.navegacion a:focus-visible::after,
.navegacion a.activo::after,
.navegacion a[aria-current="page"]::after{
    transform:translateX(-50%) scaleX(1);
}

/*==================================================
=               BOTON HAMBURGUESA                 =
==================================================*/

.boton-hamburguesa{
    display:none;
    flex-direction:column;
    justify-content:space-between;
    width:34px;
    height:24px;
    padding:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:1001;
}

.boton-hamburguesa span{
    width:100%;
    height:3px;
    border-radius:50px;
    background:var(--negro-intenso);
    transition:
        transform .35s ease,
        opacity .25s ease,
        background-color .3s ease;
}

.boton-hamburguesa.activo span:nth-child(1){
    transform:translateY(10px) rotate(45deg);
    background:var(--rojo-corona);
}

.boton-hamburguesa.activo span:nth-child(2){
    opacity:0;
}

.boton-hamburguesa.activo span:nth-child(3){
    transform:translateY(-11px) rotate(-45deg);
    background:var(--rojo-corona);
}

/*==================================================
=                    FOOTER                        =
==================================================*/

.footer{
    background:#0d0d0d;
    color:var(--blanco-puro);
}

.footer__container{
    display:grid;
    grid-template-columns:minmax(260px, 1.6fr) minmax(170px, .8fr) minmax(210px, .9fr) minmax(240px, 1fr);
    align-items:start;
    gap:36px;
    padding:64px 0 54px;
}

.footer__brand{
    display:grid;
    grid-template-columns:74px minmax(0, 1fr);
    align-items:center;
    gap:16px 18px;
}

.footer__logo{
    display:flex;
    justify-content:center;
    align-items:center;
    width:74px;
    height:74px;
    border:1px solid rgb(255 255 255 / 12%);
    border-radius:var(--radio);
    background:rgb(255 255 255 / 6%);
    transition:
        transform var(--transicion),
        background var(--transicion),
        border-color var(--transicion);
}

.footer__logo:hover,
.footer__logo:focus-visible{
    transform:translateY(-3px);
    background:rgb(255 255 255 / 10%);
    border-color:rgb(227 0 15 / 45%);
}

.footer__logo img{
    width:58px;
    height:auto;
}

.footer__title{
    font-size:1.55rem;
    line-height:1.15;
}

.footer__text{
    grid-column:1 / -1;
    max-width:520px;
    color:#d1d1d1;
    font-size:.97rem;
    line-height:1.75;
}

.footer__subtitle{
    position:relative;
    display:inline-block;
    margin-bottom:18px;
    padding-bottom:10px;
    font-size:1rem;
    font-weight:800;
    letter-spacing:.4px;
}

.footer__subtitle::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:48px;
    height:3px;
    border-radius:50px;
    background:var(--rojo-corona);
}

.footer__list{
    display:grid;
    gap:12px;
    color:#d1d1d1;
    font-size:.96rem;
    line-height:1.55;
}

.footer__list a{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    transition:
        color var(--transicion),
        transform var(--transicion);
}

.footer__list a:hover,
.footer__list a:focus-visible{
    color:var(--blanco-puro);
    transform:translateX(4px);
}

.footer__contact{
    font-style:normal;
}

.footer__bottom{
    border-top:1px solid rgb(255 255 255 / 9%);
    background:rgb(0 0 0 / 22%);
}

.footer__bottom-container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:20px 0;
    color:#bcbcbc;
    font-size:.9rem;
    line-height:1.6;
}

.footer__bottom strong{
    color:var(--blanco-puro);
}

.mensaje-error{
    padding:16px;
    background:#fff3f3;
    color:#9b000a;
    border:1px solid rgb(227 0 15 / 22%);
    border-radius:var(--radio);
}