/*
 * Visibilidad por ruta de audiencia
 *
 * El estado vive en data-route del elemento raíz: 'neutral', 'negocios' o
 * 'industria'. Ocultar con display:none también retira el elemento del árbol
 * de accesibilidad y del orden de foco, que es lo que corresponde: el visitante
 * no debe poder tabular hasta contenido que no está viendo.
 *
 * El contenido oculto permanece en el DOM y por tanto sigue siendo indexable.
 */

/* Estado neutral: se ve todo menos lo que solo aplica con ruta elegida */
[data-route="neutral"] [data-route-only="elegida"] {
    display: none !important;
}

/* Ruta de negocios */
[data-route="negocios"] [data-route-only="industria"],
[data-route="negocios"] [data-route-only="neutral"] {
    display: none !important;
}

/* Ruta industrial */
[data-route="industria"] [data-route-only="negocios"],
[data-route="industria"] [data-route-only="neutral"] {
    display: none !important;
}

/* ---------- Selector de ruta en la apertura ---------- */
.route-chooser {
    margin-top: 2.1rem;
    padding-top: 1.7rem;
    border-top: 1px solid var(--c-line-strong);
}

.route-chooser-label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--c-on-dark-muted);
}

.route-chooser-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.9rem;
}

/* La capa de contenido del hero no intercepta el puntero; estos botones sí */
.route-chooser-actions .btn {
    pointer-events: auto;
}

/* Cada ruta lleva su propio acento, el mismo que la identifica en todo el sitio.
   La industria va primera y toma el botón sólido; negocios el de contorno. */
.btn-route-industry-primary {
    background-color: var(--c-secondary);
    color: var(--c-on-accent);
}

.btn-route-industry-primary:hover {
    background-color: #d401b2;
}

.btn-route-business-alt {
    background-color: transparent;
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.btn-route-business-alt:hover {
    background-color: var(--c-accent);
    color: var(--c-on-accent);
}

/* ---------- Barra de contexto ---------- */
/* Aparece bajo el header cuando hay ruta elegida: recuerda dónde está el
   visitante y deja siempre a mano el cambio, para que la segmentación no
   se sienta como una puerta cerrada. */
.route-bar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: 100%;
    z-index: 999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    padding: 0.6rem 4%;
    background-color: var(--c-surface-2);
    border-bottom: 1px solid var(--c-line);
    font-size: 0.85rem;
}

.route-bar-state {
    color: var(--c-on-dark-muted);
}

.route-bar-current {
    font-weight: 700;
    color: var(--c-on-dark);
}

[data-route="industria"] .route-bar-current {
    color: var(--c-secondary);
}

[data-route="negocios"] .route-bar-current {
    color: var(--c-accent);
}

.route-bar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.route-bar-btn {
    min-height: 32px;
    padding: 0.25rem 0.2rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--c-line-strong);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--c-on-dark);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.route-bar-btn:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.route-bar-btn--reset {
    color: var(--c-on-dark-muted);
    font-weight: 600;
}

/* Altura real de la barra, declarada como variable porque todo lo que va
   debajo debe compensarla: el destino de los anclajes y la apertura. En
   pantallas angostas la barra envuelve en dos líneas y mide más. */
:root {
    --route-bar-h: 0px;
}

[data-route="negocios"],
[data-route="industria"] {
    --route-bar-h: 52px;
}

[data-route="negocios"] .home-content>[id],
[data-route="industria"] .home-content>[id] {
    scroll-margin-top: calc(var(--header-h) + var(--route-bar-h) + 8px);
}

[data-route="negocios"] .carousel-overlay,
[data-route="industria"] .carousel-overlay {
    padding-top: calc(var(--header-h) + var(--route-bar-h));
}

@media (max-width: 640px) {
    [data-route="negocios"],
    [data-route="industria"] {
        --route-bar-h: 80px;
    }

    .route-chooser-actions .btn {
        width: 100%;
    }

    .route-bar {
        gap: 0.35rem 0.8rem;
        padding: 0.5rem 5%;
        font-size: 0.8rem;
    }
}