/*
 * La barra de dos caminos de la portada — 7-sep-2026.
 *
 * POR QUÉ EXISTE
 * La portada mide 28.000 píxeles: 24 pantallas en un móvil. Medido el 6-sep, en todo ese
 * recorrido **no hay nada fijo**: ni cabecera, ni menú, ni un botón para escribir. Lo único que
 * acompaña al visitante es el botón de cookies. Y el formulario de contacto empieza en la
 * pantalla 19,7 de 24.
 *
 * Además los dos públicos van mezclados: quien viene a traspasar su bar se traga seis pantallas
 * de locales en venta antes de ver una línea dirigida a él.
 *
 * Esta barra pone remedio a las dos cosas con tres elementos: en qué camino estás, cómo cambiar
 * de camino, y cómo hablar con alguien. Nada más.
 *
 * DÓNDE APARECE Y DÓNDE NO
 *   · Entra al pasar el primer bloque. Se entra a una portada limpia.
 *   · Se retira al llegar al formulario, para no tapar el botón de enviar.
 *   · En móvil va ABAJO, donde llega el pulgar, y se esconde al bajar para no robar pantalla.
 *   · Solo en la portada. En las fichas ya está la barra lateral con su formulario; en
 *     /compradores/ y /vendedores/ la página ya sabe quién eres.
 *
 * CRITERIO DE MOVIMIENTO (de `emil-design-eng`, consultado antes de escribir esto)
 *   · Todo por debajo de 300 ms, y la salida más rápida que la entrada.
 *   · Se anima SOLO `transform`. Nada de `top`, `height` ni `margin`: eso rehace el diseño de la
 *     página en cada fotograma y se nota en el móvil.
 *   · `prefers-reduced-motion` va junto a la animación, no como parche al final.
 */

.tn-barra-portada {
    position: fixed;
    z-index: 900;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--tn-brand, #1e3f80);
    box-shadow: 0 -6px 24px rgba(4, 22, 56, 0.18);
    /* Escondida hasta que el JavaScript decida. Si el JavaScript no llegara a correr, la barra
       no aparece nunca — mejor eso que aparecer donde no debe. */
    transform: translateY(120%);
    visibility: hidden;
    transition:
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.22s;
}

.tn-barra-portada.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition:
        transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

.tn-barra-portada__marca {
    display: none;
}

.tn-barra-portada__camino,
.tn-barra-portada__accion {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: var(--tn-boton-peso, 600);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: translateZ(0);
    transition:
        background-color 0.2s ease-out,
        color 0.2s ease-out,
        transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Al pulsar, el botón cede un poco. Es la diferencia entre un botón que responde y una imagen
   que no acusa el toque: 0,97 y 160 ms, que no se ve pero se nota. */
.tn-barra-portada__camino:active,
.tn-barra-portada__accion:active {
    transform: scale(0.97);
}

/* Los caminos: el que NO está activo se ve, pero apagado. Que se vea es lo importante: es la
   señal de «esto también es para ti» al que se ha equivocado de camino. */
.tn-barra-portada__camino {
    background: transparent;
    color: #cddcf2;
}

.tn-barra-portada__camino:hover,
.tn-barra-portada__camino:focus-visible {
    color: #ffffff;
}

.tn-barra-portada__camino.is-activo {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

.tn-barra-portada__accion {
    flex: 0 0 auto;
    padding-right: 16px;
    padding-left: 16px;
    background: #ffffff;
    color: var(--tn-brand, #1e3f80);
}

.tn-barra-portada__accion:hover,
.tn-barra-portada__accion:focus-visible {
    background: #eef3fb;
    color: #14305f;
}

/* El botón de cookies vive en la esquina de abajo a la izquierda, justo donde entra la barra en
   el móvil. Se sube mientras la barra está puesta; si no, quedan uno encima del otro. */
body.tn-barra-puesta .cky-btn-revisit-wrapper {
    transform: translateY(-64px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
    /* En pantalla grande sube arriba: ahí no molesta y es donde se busca una navegación. */
    .tn-barra-portada {
        top: 0;
        bottom: auto;
        gap: 12px;
        padding: 10px 24px;
        box-shadow: 0 6px 24px rgba(4, 22, 56, 0.16);
        transform: translateY(-120%);
    }

    /* 🔴 Esta línea parece redundante y NO lo es. En móvil la barra se esconde hacia abajo
       (`translateY(120%)`) y en pantalla grande hacia arriba (`-120%`), así que aquí hay que
       repetir el estado visible: sin ella, la regla de este bloque ganaba a la de fuera y la
       barra se quedaba escondida arriba con la clase puesta.
       Medido en la web real: `is-visible` aplicada y el navegador calculando
       `translateY(-74,4px)`, o sea escondida. No había error en consola ni nada roto a la vista;
       simplemente no se veía. */
    .tn-barra-portada.is-visible {
        transform: translateY(0);
    }

    /* Cuando hay sesión abierta, WordPress pone su propia barra arriba del todo. Sin esto, la
       nuestra se le mete debajo y los botones salen cortados. Solo lo ve quien tiene sesión —o
       sea, el fundador y quien trabaje en la web—, que es justo quien la revisa.

       🔴 La altura NO se escribe aquí a mano, y por un motivo medido: esa barra **se parte en dos
       filas** cuando no le caben los menús, y pasa de 32 a 64 píxeles. Con el 32 fijo, los menús
       del panel se montaban encima del logo. La mide el JavaScript y la deja en esta variable; si
       el JavaScript no llegara a correr, el valor por defecto (0) deja la barra arriba del todo,
       que es lo correcto para un visitante sin sesión. */
    body.admin-bar .tn-barra-portada {
        top: var(--tn-barra-desde-arriba, 32px);
    }

    .tn-barra-portada__marca {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        margin-right: 8px;
        color: #ffffff;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        text-decoration: none;
    }

    /* El isotipo se enseña a un tercio de su tamaño real para que no se vea pastoso en pantallas
       finas. `height` manda y el ancho se ajusta solo: si algún día se cambia el archivo por otro
       de proporción distinta, no se deforma.
       Empezó en 32 px y se subió a 40: a 32, al lado de unos botones de 200 px de ancho, el logo
       se veía tan pequeño que la izquierda de la barra parecía un hueco vacío. */
    .tn-barra-portada__marca img {
        display: block;
        width: auto;
        height: 40px;
    }

    .tn-barra-portada__camino {
        flex: 0 0 auto;
        padding-right: 18px;
        padding-left: 18px;
        font-size: 0.86rem;
    }

    /* El botón de hablar se va al extremo opuesto: separado de los caminos, para que no se lea
       como una tercera pestaña. */
    .tn-barra-portada__accion {
        margin-left: auto;
    }

    body.tn-barra-puesta .cky-btn-revisit-wrapper {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tn-barra-portada,
    .tn-barra-portada__camino,
    .tn-barra-portada__accion,
    body.tn-barra-puesta .cky-btn-revisit-wrapper {
        transition: none;
    }

    .tn-barra-portada__camino:active,
    .tn-barra-portada__accion:active {
        transform: none;
    }
}

/* (El caso de 768-782 px, donde la barra de WordPress mide 46, ya no necesita regla propia:
   la altura se mide en vivo.) */