/* ================================================================
   TRAZABILIDAD.CSS — enlaces cruzados entre secciones, etiquetas de
   servicio, accesibilidad básica (skip-link) y contraste de texto.
   Se referencia en Views/Shared/_Layout.cshtml (global), después de
   site.css. Depende de tokens.css. Se puede fusionar en site.css.
   ================================================================ */

/* ── Contraste: variantes de texto para dorado y azul chispa ──
   El color puro sobre blanco da ~3,5:1 / ~4:1; mezclado con navy
   supera 4,5:1 (AA) sin cambiar el color de iconos ni fondos. */
:root {
    --gold-text: color-mix(in srgb, var(--gold) 72%, var(--navy));
    --spark-text: color-mix(in srgb, var(--spark) 72%, var(--navy));
}

.eyebrow {
    color: var(--spark-text)
}

.hero-path.is-primary .hero-path-index {
    color: var(--spark-text)
}

.team-role,
.team-credential strong,
.id-card-value.accent,
.id-back-label,
.sector-num,
.svc-index,
.svc-tag,
.caso-tag,
.paso-dot {
    color: color-mix(in srgb, var(--accent, var(--spark)) 72%, var(--navy))
}

/* ── Skip-link (solo visible con teclado) ── */
.skip-link {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: 1000;
    background: var(--navy);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: top .2s ease;
}

    .skip-link:focus {
        top: 12px
    }

/* ── Anclas: que el header fijo no tape el destino ── */
[id^="svc-"], [id^="caso-"], #casos, #david, #gustavo, #hector {
    scroll-margin-top: 96px
}

/* ── Enlaces cruzados dentro de tarjetas de servicio y casos ── */
.svc-link, .caso-link {
    --link: color-mix(in srgb, var(--accent, var(--blue)) 72%, var(--navy));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .6px;
    line-height: 1.4;
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--link) 45%, transparent);
    padding-bottom: 2px;
    transition: gap .2s ease, color .2s ease;
}

    .svc-link:hover, .caso-link:hover {
        gap: 10px;
        color: var(--navy)
    }

.svc-link-arrow {
    transition: transform .2s ease
}

.svc-link:hover .svc-link-arrow, .caso-link:hover .svc-link-arrow {
    transform: translateX(2px)
}

/* ── Home: qué servicios cubre cada área ── */
.categoria-meta {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .8px;
    color: rgba(255,255,255,.78);
    margin-top: 1px
}

/* ── Equipo: "Lidera servicios 01 02 03 04" ── */
.team-services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
}

    .team-services span {
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--ink-soft);
        margin-right: 4px
    }

    .team-services a {
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 500;
        color: color-mix(in srgb, var(--accent, var(--spark)) 72%, var(--navy));
        background: color-mix(in srgb, var(--accent, var(--spark)) 10%, white);
        border: 1px solid color-mix(in srgb, var(--accent, var(--spark)) 28%, var(--line));
        border-radius: 6px;
        padding: 3px 8px;
        text-decoration: none;
        transition: background .2s ease, transform .2s ease;
    }

        .team-services a:hover {
            background: color-mix(in srgb, var(--accent, var(--spark)) 20%, white);
            transform: translateY(-1px)
        }

/* ── Proyectos: etiquetas de servicio en el header y enlaces de respaldo ── */
.trace-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px
}

.trace-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--navy);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px 6px 6px;
    text-decoration: none;
    box-shadow: 0 8px 18px -14px rgba(6,27,72,.25);
    transition: transform .2s ease, border-color .2s ease;
}

    .trace-tag span {
        font-family: var(--mono);
        font-size: 10.5px;
        font-weight: 500;
        color: var(--gold-text);
        background: color-mix(in srgb, var(--gold) 14%, white);
        border-radius: 999px;
        padding: 3px 9px
    }

    .trace-tag:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--gold) 45%, var(--line))
    }

.respaldo-link {
    display: inline-flex;
    gap: 6px;
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .6px;
    color: var(--gold-text);
    text-decoration: none;
    border-bottom: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent);
    padding-bottom: 2px;
    transition: gap .2s ease
}

    .respaldo-link:hover {
        gap: 10px;
        color: var(--navy)
    }

/* ── Enlace al sitio real de cada caso (Servicios) ── */
.caso-ext {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-2);
    text-decoration: underline;
    text-underline-offset: 3px
}

    .caso-ext:hover {
        color: var(--navy)
    }

.caso-card .caso-ext + .caso-link {
    margin-top: 10px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ── BANNER DE DIAGNÓSTICO (Inicio) y enlace secundario en los cierres ── */
.dx-banner {
    padding: 72px 0;
    background: var(--mist);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft)
}

.dx-banner-inner {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
    align-items: center
}

.dx-banner h2 {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15;
    letter-spacing: -.3px;
    color: var(--navy);
    margin: 14px 0 12px
}

.dx-banner p {
    color: var(--ink-soft);
    max-width: 520px;
    margin-bottom: 22px
}

.dx-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--navy);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
    padding: 15px 28px;
    border-radius: 10px;
    transition: background .2s ease, transform .2s ease
}

    .dx-banner-btn:hover {
        background: var(--blue);
        transform: translateY(-2px)
    }

.dx-banner-paths {
    display: grid;
    gap: 10px
}

.dx-banner-path {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 16px;
    font-weight: 600;
    font-size: 14px;
    color: var(--navy);
    box-shadow: inset 3px 0 0 var(--bp, var(--spark));
    transition: border-color .2s ease, transform .2s ease
}

    .dx-banner-path:hover {
        border-color: var(--bp, var(--spark));
        transform: translateX(3px)
    }

    .dx-banner-path small {
        display: block;
        font-weight: 400;
        font-size: 12.5px;
        color: var(--ink-soft)
    }

    .dx-banner-path.p-gold {
        --bp: var(--gold)
    }

    .dx-banner-path.p-blue {
        --bp: var(--blue)
    }

.cta-final-alt {
    margin-top: 18px;
    font-size: 13.5px;
    color: rgba(255,255,255,.72)
}

    .cta-final-alt a {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px
    }

@media (max-width: 820px) {
    .dx-banner-inner {
        grid-template-columns: 1fr;
        gap: 26px
    }
}

@media (prefers-reduced-motion: reduce) {
    .dx-banner-btn, .dx-banner-path {
        transition: none
    }

    .skip-link, .svc-link, .caso-link, .team-services a, .trace-tag, .respaldo-link {
        transition: none
    }
}