/* ==========================================================================
   Boxti — Mapa estratégico (consultoria-tecnologica.html)
   Toggle "Sem orientação ↔ Com consultoria": no estado perdido, várias rotas
   se cruzam (caos, sem caminho claro); com a consultoria, a Box TI "analisa"
   e o caminho ideal se destaca (etapas numeradas, com brilho) enquanto as
   rotas ruins ficam apagadas/tracejadas.
   ========================================================================== */

.rota { margin-top: var(--space-7); }

/* Cabeçalho: bússola centralizada + hint logo abaixo */
.rota__head {
    text-align: center;
    margin-bottom: var(--space-6);
}

/* Bússola (controle) — gira perdida/vermelha; ao clicar, trava firme/verde */
.rota__compass {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: 7px 20px 7px 8px;
    border: 1px solid var(--color-card-border);
    border-radius: 999px;
    background-color: var(--color-card-bg);
    cursor: pointer;
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    color: #e5646a;
    margin-bottom: 0;
    transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.rota[data-state="guided"] .rota__compass {
    color: var(--color-lime);
    border-color: rgba(139, 197, 63, 0.5);
    box-shadow: var(--shadow-lime);
}
.rota__compass:hover { border-color: rgba(255, 255, 255, 0.25); }

.rota__compass-svg { width: 38px; height: 38px; flex-shrink: 0; }
.compass-ring { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 2; }
.compass-hub { fill: currentColor; }
.compass-needle { transform-box: fill-box; transform-origin: center; }
.compass-needle .needle-n { fill: currentColor; }
.compass-needle .needle-s { fill: rgba(255, 255, 255, 0.22); }

/* O giro "perdido" roda por CSS; a chegada suave à posição é feita no JS
   (congela o ângulo atual e anima até o destino pelo caminho mais curto). */
.rota[data-state="lost"] .compass-needle { animation: compass-lost 2.6s ease-in-out infinite; }

@keyframes compass-lost {
    0%   { transform: rotate(0deg); }
    12%  { transform: rotate(150deg); }
    28%  { transform: rotate(70deg); }
    44%  { transform: rotate(265deg); }
    60%  { transform: rotate(155deg); }
    76%  { transform: rotate(335deg); }
    88%  { transform: rotate(215deg); }
    100% { transform: rotate(360deg); }
}

.rota__compass-label { color: var(--color-white); }
.rota__compass-label--guided { display: none; }
.rota[data-state="guided"] .rota__compass-label--lost { display: none; }
.rota[data-state="guided"] .rota__compass-label--guided { display: inline; }

/* Palco do mapa */
.rota__stage {
    max-width: 680px;
    margin-inline: auto;
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(120% 120% at 50% 40%, rgba(43, 125, 214, 0.07), transparent 70%),
        var(--color-card-bg);
    overflow: hidden;
}
.rota__map { display: block; width: 100%; height: auto; }

/* Rotas (linhas) */
.rota__route {
    fill: none;
    stroke: rgba(150, 160, 172, 0.4);
    stroke-width: 2;
    stroke-linecap: round;
    transition: stroke 0.5s ease, stroke-width 0.5s ease, opacity 0.5s ease;
}

/* Estado COM consultoria: caminho ideal destacado, alternativas apagadas */
.rota[data-state="guided"] .rota__route--alt {
    stroke: rgba(150, 160, 172, 0.16);
    stroke-dasharray: 5 7;
}
.rota[data-state="guided"] .rota__route--best {
    stroke: url(#rotaGrad);
    stroke-width: 4.5;
    stroke-dasharray: 9 9;
    filter: drop-shadow(0 0 5px rgba(43, 125, 214, 0.5));
    animation: rotaFlow 1s linear infinite;
}
@keyframes rotaFlow { to { stroke-dashoffset: -18; } }

/* Nós */
.rota__node {
    fill: #16252f;
    stroke: rgba(150, 160, 172, 0.55);
    stroke-width: 2;
    transition: fill 0.5s ease, stroke 0.5s ease, opacity 0.5s ease;
}
.rota[data-state="guided"] .rota__node--alt { opacity: 0.28; }
.rota[data-state="guided"] .rota__node--best { stroke: var(--color-blue); fill: rgba(43, 125, 214, 0.2); }
.rota[data-state="guided"] .rota__node--end { stroke: var(--color-lime); fill: rgba(139, 197, 63, 0.18); }

.rota__label {
    fill: var(--color-text-secondary);
    font-size: 14px;
    font-weight: var(--fw-semibold);
    font-family: inherit;
}
.rota[data-state="guided"] .rota__label { fill: var(--color-white); }

/* Etiqueta "?" (só no estado perdido) */
.rota__q {
    fill: rgba(229, 100, 106, 0.8);
    font-size: 30px;
    font-weight: var(--fw-bold);
    font-family: inherit;
    transition: opacity 0.4s ease;
}
.rota[data-state="guided"] .rota__q { opacity: 0; }

/* Etapas numeradas (só no estado com consultoria) */
.rota__step { opacity: 0; transition: opacity 0.45s ease; }
.rota[data-state="guided"] .rota__step { opacity: 1; }
.rota__step circle { fill: var(--color-lime); }
.rota__step text { fill: #0A1520; font-size: 12px; font-weight: var(--fw-bold); font-family: inherit; }

/* Legenda (antes/depois) que troca com o estado */
.rota__legend { display: none; margin-top: var(--space-6); }
.rota[data-state="lost"] .rota__legend--lost,
.rota[data-state="guided"] .rota__legend--guided { display: block; animation: rotaFade 0.4s ease; }
@keyframes rotaFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rota__legend-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--color-white);
    margin: 0 0 var(--space-5);
}
.rota__legend-tag {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
}
.rota__legend--lost .rota__legend-tag { background-color: rgba(229, 72, 77, 0.15); color: #e5646a; }
.rota__legend--guided .rota__legend-tag { background-color: rgba(139, 197, 63, 0.18); color: var(--color-lime); }

.rota__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-6); }
.rota__list li { display: flex; gap: var(--space-3); line-height: var(--lh-snug); color: var(--color-text-secondary); }
.rota__list li::before { flex-shrink: 0; font-weight: var(--fw-bold); line-height: 1.45; }
.rota__list--lost li::before { content: "\00d7"; color: #e5646a; }
.rota__list--guided li::before { content: "\2713"; color: var(--color-lime); }

.rota__hint { text-align: center; font-size: var(--fs-small); color: var(--color-text-muted); margin-top: var(--space-3); margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .rota[data-state="guided"] .rota__route--best { animation: none; }
    .rota[data-state="lost"] .compass-needle { animation: none; }
}
@media (max-width: 620px) {
    .rota__list { grid-template-columns: 1fr; }
}