/* Cabecera
   ---------------------------------------------------------------------------
   Sustituye a la barra negra de 2015, montada con float y display:table.

   Colores tomados del propio logo: dorado #fab300 (el del isotipo es #F0B010),
   blanco sobre negro azulado #0f1216, el mismo que ya usan ayuda, vehículos y
   contacto.

   Reparto de responsabilidades:
   - <header class="cabecera"> ocupa el hueco de 80px en el flujo, igual que la
     cabecera antigua, para no mover ni un píxel del contenido de las páginas.
   - .cabecera-barra va fija por encima. Al ir fija, encogerla al hacer scroll
     no arrastra el contenido.
   - En la portada el hueco se anula: la barra se superpone a la foto del hero,
     que es lo que hacía antes .home .header. */

.cabecera {
    height: 80px;
}

.cabecera--portada {
    height: 0;
}

.cabecera-barra {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    height: 80px;
    background: rgba(15, 18, 22, .88);
    /* El desenfoque es lo que hace que la foto del hero se lea por detrás sin
       comerse el contraste del menú. */
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    transition: height .22s ease, background-color .22s ease, box-shadow .22s ease;
}

/* Los navegadores sin backdrop-filter recibirían un fondo semitransparente sin
   desenfoque, y el texto del hero se leería por detrás. Ahí va opaco. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .cabecera-barra,
    .cabecera-barra--fija {
        background: #0f1216;
    }
}

/* Al bajar encoge y aparece la sombra, pero sigue siendo cristal: se vuelve un
   poco mas opaca para no perder contraste y deja intuir lo que pasa por debajo,
   que es la gracia del efecto. Antes se volvia solida y lo perdia justo cuando
   hay contenido detras. */
.cabecera-barra--fija {
    height: 64px;
    background: rgba(15, 18, 22, .82);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
}

.cabecera-interior {
    display: flex;
    align-items: center;
    gap: 28px;
    width: min(1240px, 92%);
    height: 100%;
    margin: 0 auto;
}

/* Variante del flujo de reserva: la barra se queda arriba y se va con el
   scroll. Al no ir fija tampoco tiene sentido que encoja, asi que se anula
   tambien el estado compacto. */
.cabecera--estatica .cabecera-barra,
.cabecera--estatica .cabecera-barra--fija {
    position: static;
    height: 80px;
    box-shadow: none;
}

.cabecera--estatica .cabecera-barra--fija .cabecera-logo img {
    width: 180px;
}

/* Sin barra fija, el hueco reservado sobra. */
.cabecera--estatica {
    height: auto;
}

/* --------------------------------------------------------------------- logo */

.cabecera-logo {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
}

.cabecera-logo picture,
.cabecera-logo img {
    display: block;
}

.cabecera-logo img {
    width: 180px;
    height: auto;
    transition: width .22s ease;
}

.cabecera-barra--fija .cabecera-logo img {
    width: 150px;
}

/* ---------------------------------------------------------------------- menú */

.cabecera-nav {
    flex: 1 1 auto;
}

.cabecera-nav ul {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* style.css decora todo li con viñeta y sangría. */
.cabecera li::before {
    content: none;
}

.cabecera li {
    position: static;
    padding: 0;
}

.cabecera-nav a {
    position: relative;
    display: block;
    padding: 10px 14px;
    color: rgba(255, 255, 255, .74);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: .2px;
    text-decoration: none;
    /* La barra antigua ponía el menú en mayúsculas; en minúscula se lee mejor
       y caben las seis entradas sin apretarlas. */
    text-transform: none;
    transition: color .16s ease;
}

.cabecera-nav a:hover,
.cabecera-nav a:focus-visible {
    color: #fff;
    text-decoration: none;
}

/* Subrayado dorado de la sección en la que estás. Se dibuja siempre y se revela
   con scaleX para que la animación no obligue a recalcular la maqueta. */
.cabecera-nav a::after {
    position: absolute;
    right: 14px;
    bottom: 2px;
    left: 14px;
    height: 2px;
    background: #fab300;
    border-radius: 2px;
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .2s ease;
}

.cabecera-nav a:hover::after {
    transform: scaleX(1);
}

.cabecera-nav .cabecera-nav--activa {
    color: #fff;
}

.cabecera-nav .cabecera-nav--activa::after {
    transform: scaleX(1);
}

/* ----------------------------------------------------------------- acciones */

.cabecera-acciones {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 16px;
}

.cabecera-idioma {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .6px;
}

.cabecera-idioma a {
    color: rgba(255, 255, 255, .5);
    text-decoration: none;
    transition: color .16s ease;
}

.cabecera-idioma a:hover,
.cabecera-idioma a:focus-visible {
    color: #fff;
    text-decoration: none;
}

.cabecera-idioma .cabecera-idioma--activo,
.cabecera-idioma .cabecera-idioma--activo:hover {
    color: #fab300;
}

.cabecera-idioma span {
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .22);
}

.cabecera-cta {
    display: inline-block;
    padding: 11px 22px;
    background: #fab300;
    border-radius: 100px;
    color: #14181d;
    /* Heredaba Raleway, que no se carga en el sitio, asi que caia en
       Arial. Montserrat ya viene descargada. */
    font-family: 'Montserrat', sans-serif;
    font-size: 14.5px;
    /* Solo hay 400 y 700: con 800 la engorda el navegador. */
    font-weight: 700;
    letter-spacing: .1px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .16s ease, transform .16s ease;
}

.cabecera-cta:hover,
.cabecera-cta:focus-visible {
    background: #ffc42e;
    color: #14181d;
    text-decoration: none;
    transform: translateY(-1px);
}

/* En la portada el botón sobra mientras el buscador está a la vista: serían la
   misma acción dos veces y le quitaría peso al formulario. Se oculta solo en la
   barra; el del panel de móvil se queda, porque ahí el formulario no se ve. */
.cabecera--sin-cta .cabecera-barra .cabecera-cta {
    display: none;
}

/* Cuando aparece, entra deslizándose para que no dé un salto seco. */
.cabecera--con-buscador .cabecera-barra .cabecera-cta {
    animation: cabecera-cta-entra .26s ease;
}

@keyframes cabecera-cta-entra {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabecera--con-buscador .cabecera-barra .cabecera-cta {
        animation: none;
    }
}

/* --------------------------------------------------- botón de menú en móvil */

.cabecera-boton-menu {
    touch-action: manipulation;
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    cursor: pointer;
}

.cabecera-boton-menu span {
    /* Si el toque cae en una raya, el destino del evento es el span y en
       moviles el click se pierde: que el boton entero sea el objetivo. */
    pointer-events: none;
    display: block;
    width: 18px;
    height: 2px;
    margin: 3px auto;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

/* Las tres barras se convierten en aspa cuando el panel está abierto. */
.cabecera-boton-menu[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.cabecera-boton-menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.cabecera-boton-menu[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* ------------------------------------------------------------ panel de móvil */

.cabecera-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: min(360px, 88vw);
    padding: 96px 26px 32px;
    background: #0f1216;
    box-shadow: -18px 0 46px rgba(0, 0, 0, .4);
    transform: translateX(100%);
    transition: transform .26s ease;
}

/* hidden pierde efecto en cuanto se declara un display, así que se refuerza. */
.cabecera-panel[hidden] {
    display: none;
}

.cabecera-panel--abierto {
    transform: none;
}

.cabecera-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cabecera-panel a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .82);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
}

.cabecera-panel a:hover,
.cabecera-panel .cabecera-nav--activa {
    color: #fab300;
    text-decoration: none;
}

.cabecera-panel-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

.cabecera-panel-pie .cabecera-cta {
    flex: 1 1 auto;
    padding: 14px 22px;
    font-size: 16px;
    text-align: center;
}

.cabecera-panel-pie a {
    border-bottom: 0;
    padding: 0;
}

.cabecera-velo {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 997;
    background: rgba(6, 8, 10, .6);
    opacity: 0;
    transition: opacity .26s ease;
}

.cabecera-velo--visible {
    opacity: 1;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
    .cabecera-nav a {
        padding: 10px 10px;
        font-size: 14px;
    }

    .cabecera-interior {
        gap: 18px;
    }
}

@media (max-width: 900px) {
    /* Por debajo de este ancho el menú horizontal no cabe: pasa al panel. */
    .cabecera-nav,
    .cabecera-acciones .cabecera-idioma {
        display: none;
    }

    .cabecera-boton-menu {
    touch-action: manipulation;
        display: block;
    }

    .cabecera-interior {
        justify-content: space-between;
    }

    .cabecera-logo img {
        width: 158px;
    }

    .cabecera-barra--fija .cabecera-logo img {
        width: 140px;
    }
}

@media (max-width: 480px) {
    .cabecera-cta {
        padding: 10px 16px;
        font-size: 13.5px;
    }

    .cabecera-logo img {
        width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cabecera-barra,
    .cabecera-logo img,
    .cabecera-nav a,
    .cabecera-nav a::after,
    .cabecera-cta,
    .cabecera-panel,
    .cabecera-velo,
    .cabecera-boton-menu span {
    /* Si el toque cae en una raya, el destino del evento es el span y en
       moviles el click se pierde: que el boton entero sea el objetivo. */
    pointer-events: none;
        transition: none;
    }
}