/* Ferramentas de Desenvolvimento Humano
   Mesma linguagem do mapa do diagnóstico: verde profundo, curvas de nível, vidro e fio dourado.
   Cada área é um capítulo: ícone no fio, nome e perguntas à esquerda, teste e aula no painel de vidro. */

.fer {
  --topo-h: 76px; --pad-area: clamp(36px, 5vw, 64px);
  position: relative; isolation: isolate; overflow: clip; color: var(--palha);
  padding: clamp(40px, 6vw, 72px) 0 clamp(90px, 10vw, 130px);
  background:
    linear-gradient(180deg, #121e15 0, rgba(18, 30, 21, 0) 300px),
    radial-gradient(55% 40% at 80% 18%, rgba(46, 125, 112, .5), transparent 65%),
    radial-gradient(45% 35% at 0% 70%, rgba(206, 160, 65, .1), transparent 70%),
    linear-gradient(170deg, #0f3f3a 0%, #0b2f2b 50%, #071e1b 100%);
}
.fer::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--grao-claro); background-size: 240px; opacity: .06; pointer-events: none; }
.fer__luz { position: absolute; z-index: -1; width: 60vmax; height: 60vmax; left: 78%; top: 24%; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(140, 210, 180, .14), transparent 60%); }
.fer .curvas--fer { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; stroke: rgba(247, 245, 237, .07); pointer-events: none; }

/* a foto do cabeçalho se dissolve também embaixo, sem emenda com esta seção */
.page-head--fer::after { -webkit-mask-image: linear-gradient(180deg, transparent 8%, #000 45%, transparent 98%); mask-image: linear-gradient(180deg, transparent 8%, #000 45%, transparent 98%); }

/* ---------- ponto fraco do diagnóstico ---------- */
.fer-foco {
  margin: 0 0 clamp(22px, 3vw, 34px); padding: clamp(20px, 3vw, 30px); border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 45%), rgba(12, 44, 38, .5);
  border: 1px solid rgba(226, 194, 116, .5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 40px 80px -50px rgba(2, 12, 10, .9);
}
.fer-foco__t { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.3; }
.fer-foco__t strong { color: var(--ouro-claro); font-weight: 500; }
.fer-foco__s { margin: 0; color: rgba(247, 245, 237, .85); }

/* ---------- atalhos das áreas (acompanham a rolagem) ---------- */
.fer-indice {
  position: sticky; top: calc(var(--topo-h) + 8px); z-index: 20; display: flex; gap: 6px; padding: 8px; margin: 0 0 clamp(8px, 2vw, 20px);
  overflow-x: auto; scrollbar-width: none; border-radius: 999px;
  background: rgba(10, 38, 33, .72); border: 1px solid rgba(247, 245, 237, .14);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.fer-indice::-webkit-scrollbar { display: none; }
.fer-indice a {
  flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-size: .95rem; font-weight: 600; color: rgba(247, 245, 237, .8); border: 1px solid transparent;
  transition: background-color .3s, color .3s, border-color .3s;
}
.fer-indice a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--ouro-claro); transition: background-color .3s; }
.fer-indice a.is-foco::before { background: var(--ouro-claro); }
.fer-indice a:hover { background: rgba(247, 245, 237, .07); color: var(--palha); }
.fer-indice a[aria-current='true'] { background: rgba(247, 245, 237, .12); border-color: rgba(226, 194, 116, .4); color: var(--palha); }
.fer-indice a[aria-current='true']::before { background: var(--ouro-claro); }
.fer-indice a:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 2px; }

/* ---------- lista de áreas com o fio dourado ---------- */
.fer-lista { position: relative; }
.fer-lista::before, .fer-lista::after {
  content: ''; position: absolute; left: 23px; width: 2px; top: calc(var(--pad-area) + 24px); bottom: 0; border-radius: 2px;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent); mask-image: linear-gradient(180deg, #000 88%, transparent);
}
.fer-lista::before { background: rgba(247, 245, 237, .12); }
.fer-lista::after { background: linear-gradient(180deg, var(--ouro-claro), var(--ouro) 70%, rgba(206, 160, 65, .4)); transform-origin: top; }
.mov .fer-lista::after { transform: scaleY(var(--p, 0)); }

.fer-area {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 22px;
  padding-block: var(--pad-area); scroll-margin-top: calc(var(--topo-h) + 84px);
}
.fer-area__no {
  grid-column: 1; grid-row: 1; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-claro);
  background: radial-gradient(circle at 35% 30%, #14504a, #0b2f2b 75%); border: 1px solid rgba(226, 194, 116, .5);
  box-shadow: 0 0 0 6px #0b2f2b; transition: transform .6s var(--suave), border-color .6s, box-shadow .6s, opacity .6s;
}
.mov .fer-area:not(.is-alcancada) .fer-area__no { opacity: .55; border-color: rgba(247, 245, 237, .22); }
.mov .fer-area.is-alcancada .fer-area__no { transform: scale(1.06); border-color: var(--ouro-claro); box-shadow: 0 0 0 6px #0b2f2b, 0 0 34px rgba(232, 200, 120, .4); }
.fer-ico { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fer-ico .tr { stroke-dasharray: 1; stroke-dashoffset: 0; }
.rv-pronto .fer-area.rv-espera:not(.is-in) .tr { stroke-dashoffset: 1; }
.rv-pronto .fer-area.is-in .tr { transition: stroke-dashoffset 1.5s cubic-bezier(.65, 0, .35, 1) .3s; }

.fer-area__cab { grid-column: 2; grid-row: 1; align-self: center; min-width: 0; }
.fer-selo { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 99px; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--ouro-claro); color: #10251a; }
.fer-area h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--palha); }
.fer-area__rot { margin: clamp(14px, 2vw, 22px) 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-claro); }
.fer-area__perg { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 44ch; }
.fer-area__perg li { font-family: var(--serif); font-size: 1.05rem; line-height: 1.4; color: rgba(247, 245, 237, .86); }

/* ---------- painel de vidro: teste em cima, aula embaixo ---------- */
.fer-vidro {
  grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; border-radius: 24px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02) 42%), rgba(12, 44, 38, .45);
  border: 1px solid rgba(247, 245, 237, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 50px 90px -46px rgba(2, 12, 10, .9);
  -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25);
  transition: border-color .5s, box-shadow .5s;
}
.fer-area--foco .fer-vidro { border-color: rgba(226, 194, 116, .55); box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 0 0 1px rgba(226, 194, 116, .2), 0 50px 90px -46px rgba(2, 12, 10, .9), 0 0 60px -20px rgba(226, 194, 116, .3); }
.fer-vazio { margin: 0; padding: clamp(22px, 3vw, 34px); color: rgba(247, 245, 237, .8); }

.fer-item { padding: clamp(22px, 3vw, 34px); transition: background-color .4s; }
.fer-item + .fer-item { border-top: 1px solid rgba(247, 245, 237, .14); }
.fer-item:hover { background: rgba(255, 255, 255, .04); }
.fer-item__ico {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-claro);
  border: 1px solid rgba(226, 194, 116, .4); background: rgba(247, 245, 237, .05); transition: background-color .4s, color .4s, transform .5s var(--suave);
}
.fer-item--aula .fer-item__ico { background: rgba(226, 194, 116, .14); }
.fer-item:hover .fer-item__ico { background: var(--ouro-claro); color: #10251a; transform: scale(1.06); }
.fer-item__svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fer-item__corpo { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fer-item__tipo { margin: 0 0 4px; display: flex; align-items: center; gap: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ouro-claro); }
.fer-item h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); line-height: 1.2; color: var(--palha); }
.fer-item__desc { margin: 0; color: rgba(247, 245, 237, .9); }
.fer-item__ben { margin: 0; font-size: .97rem; color: rgba(247, 245, 237, .74); }
.fer-item__ben strong { color: rgba(247, 245, 237, .92); }
.fer-item__base { margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(247, 245, 237, .12); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.fer-item__preco { font-family: var(--serif); font-size: 1.5rem; color: var(--ouro-claro); }
.fer-item__acao { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fer-btn {
  min-height: 44px; padding: 10px 20px; border-radius: 12px; font: inherit; font-weight: 600; color: var(--palha);
  background: transparent; border: 1px solid rgba(226, 194, 116, .5); cursor: not-allowed; opacity: .75;
}
.fer-item__breve { font-size: .8rem; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(226, 194, 116, .16); color: var(--ouro-claro); }

.fer-nota { margin: clamp(24px, 4vw, 48px) 0 0 66px; font-size: .95rem; color: rgba(247, 245, 237, .72); max-width: 70ch; }
.fer-nota a { color: var(--ouro-claro); }

/* ---------- computador: fio, texto da área e painel lado a lado ---------- */
@media (min-width: 1000px) {
  .fer-lista::before, .fer-lista::after { left: 31px; top: calc(var(--pad-area) + 32px); }
  .fer-area { grid-template-columns: 64px minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 4vw, 60px); row-gap: 0; }
  .fer-area__no { width: 64px; height: 64px; }
  .fer-area__cab { align-self: start; padding-top: 4px; }
  .fer-vidro { grid-column: 3; grid-row: 1; }
  .fer-nota { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fer *, .fer *::before, .fer *::after { transition: none !important; animation: none !important; }
}

/* ---------- acesso às ferramentas (área do aluno) ---------- */
.fer-acesso {
  display: flex; align-items: flex-start; gap: 16px; width: min(100%, 460px); margin: 0 0 clamp(14px, 2vw, 22px) auto; padding: clamp(18px, 2.4vw, 24px); border-radius: 20px;
  background: linear-gradient(155deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02) 45%), rgba(12, 44, 38, .55);
  border: 1px solid rgba(226, 194, 116, .55);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 30px 60px -44px rgba(2, 12, 10, .9);
}
.fer-acesso__ico {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; color: var(--ouro-claro);
  background: radial-gradient(circle at 35% 30%, #14504a, #0b2f2b 75%); border: 1px solid rgba(226, 194, 116, .5);
}
.fer-acesso__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fer-acesso h2 { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.2; color: var(--palha); }
.fer-acesso p { margin: 0 0 14px; font-size: .97rem; color: rgba(247, 245, 237, .84); }
.fer-acesso__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 12px; font-weight: 700; text-decoration: none;
  background: var(--ouro); color: #10251a; transition: background-color .25s, transform .25s var(--suave);
}
.fer-acesso__btn::after { content: '→'; margin-left: 8px; transition: transform .3s var(--suave); }
.fer-acesso__btn:hover { background: var(--ouro-claro); }
.fer-acesso__btn:hover::after { transform: translateX(4px); }
.fer-acesso__btn:focus-visible { outline: 3px solid var(--palha); outline-offset: 3px; }
@media (max-width: 640px) { .fer-acesso { margin-left: 0; } }

/* ---------- bloco dourado da Mentoria, no final ---------- */
.fer-mentoria { padding: 12px; margin-top: clamp(36px, 6vw, 72px); }
.fer-mentoria .serv { max-width: 980px; margin-inline: auto; }