/* 04 temas · "A língua do trade". Esfera de temas em CSS 3D + JS (sem WebGL).
   Sem JS ou com reduced-motion: nuvem estática (desktop) / grade de 2 colunas (celular).
   Com JS e >= 768 px: .tm-stage.is-3d (esfera). Com JS no celular: grade de 2 colunas.
   Todo seletor começa com .sec--temas. */

.sec--temas { overflow: clip; }

/* ---------- Composição ---------- */
.sec--temas .tm {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "orb" "card";
}
.sec--temas .tm-head { grid-area: head; }
.sec--temas .tm-orb { grid-area: orb; display: flex; flex-direction: column; min-width: 0; }
.sec--temas .tm-card { grid-area: card; }

@media (min-width: 1024px) {
  .sec--temas .tm {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "head  head"
      "orb   card";
    column-gap: clamp(36px, 4vw, 72px);
  }
  /* cabeçalho editorial: título à esquerda, lead à direita alinhado à base do título */
  .sec--temas .tm-head {
    max-width: none; display: grid; align-items: end;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(36px, 4vw, 72px);
  }
  .sec--temas .tm-head .eyebrow { grid-column: 1 / -1; justify-self: start; }
  .sec--temas .tm-head .h2 { grid-column: 1; }
  .sec--temas .tm-head .lead { grid-column: 2; margin-top: 0; padding-bottom: .5em; }
  .sec--temas .tm-card { align-self: start; margin-top: clamp(28px, 3vw, 44px); }
}

/* ---------- Palco ---------- */
.sec--temas .tm-stage {
  position: relative; isolation: isolate;
  margin-top: clamp(28px, 5vw, 44px);
}
@media (min-width: 1024px) {
  .sec--temas .tm-stage { margin-top: clamp(28px, 3vw, 44px); }
}

/* ondas orgânicas (a "duna" do manual) com fluxo de pontos subindo: o A em movimento */
.sec--temas .tm-flow {
  position: absolute; z-index: 0; pointer-events: none;
  left: -14%; width: 128%; top: 30%; height: 72%;
  max-width: none; overflow: visible;
}
.sec--temas .tm-flow path { fill: none; vector-effect: non-scaling-stroke; }
.sec--temas .tm-flow__lines path { stroke: rgba(0, 45, 52, .14); stroke-width: 1; }
.sec--temas .tm-flow__lines path:nth-child(2n) { stroke: rgba(126, 90, 58, .2); }
.sec--temas .tm-flow__dots path {
  stroke: var(--earth); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: .1 22; opacity: .5;
}
.sec--temas .tm-stage.is-live .tm-flow__dots path { animation: temas-flow 5.5s linear infinite; }
.sec--temas .tm-stage.is-live .tm-flow__dots path + path { animation-duration: 7.5s; }
@keyframes temas-flow { to { stroke-dashoffset: -88.4; } }

.sec--temas .tm-glow, .sec--temas .tm-rise { display: none; }

/* núcleo: o símbolo oficial (nuvem/grade: marca d'água atrás dos temas) */
.sec--temas .tm-core {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  display: grid; place-items: center; color: var(--sand);
}
.sec--temas .tm-core svg { width: min(64%, 400px); height: auto; aspect-ratio: 66.23 / 53.13; }

/* ---------- Lista de temas: nuvem (padrão) ---------- */
.sec--temas .tm-list {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; align-content: center;
  gap: 2px 4px; padding-block: clamp(12px, 3vw, 36px);
}
.sec--temas .tm-t {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 4px 2px; border-radius: 999px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sec--temas .tm-t__pill {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .56em 1.05em; border-radius: 1.4em;
  background: var(--white); color: var(--ink);
  border: 1px solid rgba(0, 45, 52, .16);
  font-size: .94rem; font-weight: 600; line-height: 1.2; text-align: left; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(0, 45, 52, .05), 0 10px 22px -14px rgba(0, 45, 52, .4);
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s var(--ease);
}
.sec--temas .tm-t__a { width: 1.05em; height: auto; aspect-ratio: 66.23 / 53.13; flex: none; color: var(--gold-soft); }
.sec--temas .tm-t:hover .tm-t__pill { border-color: var(--teal); box-shadow: 0 1px 1px rgba(0, 45, 52, .05), 0 16px 28px -14px rgba(0, 45, 52, .55); }

/* os 3 de maior engajamento: maiores e em terroso */
.sec--temas .tm-t.is-top .tm-t__pill {
  background: var(--earth); border-color: var(--earth); color: var(--white);
  font-size: 1.06rem; font-weight: 700; padding: .62em 1.15em;
}
.sec--temas .tm-t.is-top:hover .tm-t__pill { border-color: var(--teal-deep); }

/* tema selecionado */
.sec--temas .tm-t[aria-current="true"] .tm-t__pill {
  background: var(--teal-deep); border-color: var(--teal-deep); color: var(--white);
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--teal-deep), 0 18px 34px -14px rgba(0, 45, 52, .65);
}
.sec--temas .tm-t.is-top[aria-current="true"] .tm-t__pill {
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--earth), 0 18px 34px -14px rgba(0, 45, 52, .65);
}

/* foco visível no "pill" (o botão é a área de toque, maior que o pill) */
.sec--temas .tm-t:focus-visible { outline: none; }
.sec--temas .tm-t:focus-visible .tm-t__pill { outline: 2px solid var(--teal); outline-offset: 4px; }
.sec--temas .tm-t.is-top:focus-visible .tm-t__pill { outline-color: var(--teal-deep); }

/* ---------- Celular (< 768 px): grade de 2 colunas (com JS, reduced-motion e sem JS) ---------- */
@media (max-width: 767px) {
  .sec--temas .tm-stage:not(.is-3d) .tm-list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px; padding-block: 6px 10px;
  }
  .sec--temas .tm-stage:not(.is-3d) .tm-list > li { display: flex; min-width: 0; }
  .sec--temas .tm-stage:not(.is-3d) .tm-t { display: flex; flex: 1; width: 100%; min-height: 46px; padding: 0; border-radius: 16px; }
  .sec--temas .tm-stage:not(.is-3d) .tm-t__pill {
    flex: 1; min-width: 0; min-height: 46px; justify-content: center;
    padding: .45em .7em; border-radius: 16px;
    font-size: .85rem; line-height: 1.2; text-align: center; white-space: normal; text-wrap: balance;
  }
  .sec--temas .tm-stage:not(.is-3d) .tm-t.is-top .tm-t__pill { font-size: .88rem; padding: .45em .7em; }
  .sec--temas .tm-stage:not(.is-3d) .tm-core svg { width: 92%; }
}

/* ---------- Modo esfera (JS, >= 768 px) ---------- */
.sec--temas .tm-stage.is-3d {
  height: 560px;
  touch-action: pan-y; cursor: grab;
  -webkit-user-select: none; user-select: none;
}
@media (min-width: 1024px) { .sec--temas .tm-stage.is-3d { height: clamp(600px, 47vw, 700px); } }
.sec--temas .tm-stage.is-3d.is-dragging { cursor: grabbing; }

.sec--temas .is-3d .tm-glow {
  display: block; position: absolute; z-index: 0; left: 50%; top: 50%;
  width: var(--orb-d, 70%); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle at 38% 32%, rgba(255, 255, 255, .98) 0, rgba(255, 255, 255, .7) 28%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle at 50% 50%, rgba(236, 229, 218, .9) 0, rgba(236, 229, 218, .55) 48%, rgba(236, 229, 218, 0) 71%);
}

/* partículas subindo do A: energia em fluxo ascendente (o "A em movimento" do manual) */
.sec--temas .is-3d .tm-rise {
  display: block; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  z-index: 9; pointer-events: none;
}
.sec--temas .tm-p {
  position: absolute; left: 0; top: 0;
  width: var(--sz, 4px); height: var(--sz, 4px); margin: calc(var(--sz, 4px) / -2) 0 0 calc(var(--sz, 4px) / -2);
  border-radius: 50%; background: var(--teal); opacity: 0;
  animation: temas-rise var(--dur, 9s) cubic-bezier(.35, .1, .55, 1) var(--delay, 0s) infinite;
  animation-play-state: paused;
}
.sec--temas .tm-p.is-earth { background: var(--earth); }
.sec--temas .tm-stage.is-live .tm-p { animation-play-state: running; }
@keyframes temas-rise {
  0%   { transform: translate(var(--x0), var(--y0)) scale(.4); opacity: 0; }
  16%  { opacity: var(--o, .6); }
  55%  { transform: translate(var(--xm), var(--ym)) scale(1); }
  80%  { opacity: var(--o, .6); }
  100% { transform: translate(var(--x1), var(--y1)) scale(.6); opacity: 0; }
}

/* o A no centro: acima dos traços de trás, abaixo dos temas da frente (que são afastados dele pelo JS) */
.sec--temas .is-3d .tm-core {
  inset: auto; left: 50%; top: 50%; z-index: 10; transform: translate(-50%, -54%);
  width: clamp(64px, 15%, 104px); color: var(--teal-deep);
  filter: drop-shadow(0 14px 18px rgba(0, 45, 52, .22));
}
.sec--temas .is-3d .tm-core svg { width: 100%; }
.sec--temas .is-3d .tm-core::after { /* sombra de apoio: base larga */
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -16%; height: 14%;
  border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 45, 52, .22), rgba(0, 45, 52, 0));
}

.sec--temas .is-3d .tm-list { position: absolute; inset: 0; display: block; padding: 0; z-index: auto; }
.sec--temas .is-3d .tm-list > li { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sec--temas .is-3d .tm-t {
  position: absolute; left: 0; top: 0;
  width: max-content; min-height: 54px; /* na escala mínima clicável (0,86) o alvo segue >= 46 px */
  transform: translate(-50%, -50%); will-change: transform, opacity;
}
/* frente: pill opaco; ao passar para trás ele encolhe num traço sem texto (e volta a crescer na frente) */
.sec--temas .is-3d .tm-t__pill {
  transform-origin: 50% 50%;
  transition: transform .35s var(--ease), background-color .3s, color .3s, border-color .3s, box-shadow .3s;
}
.sec--temas .is-3d .tm-t__pill > * { transition: opacity .25s .12s; }
.sec--temas .is-3d .tm-t.is-back { pointer-events: none; }
.sec--temas .is-3d .tm-t.is-back .tm-t__pill {
  transform: scale(.17, .2);
  background: rgba(8, 62, 69, .55); border-color: transparent; box-shadow: none;
}
.sec--temas .is-3d .tm-t.is-top.is-back .tm-t__pill { background: rgba(126, 90, 58, .62); }
.sec--temas .is-3d .tm-t.is-back .tm-t__pill > * { opacity: 0; transition: none; } /* some na hora: atrás nunca há texto */

/* ---------- Dica + pausa ---------- */
.sec--temas .tm-ctrl {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 16px;
  min-height: 44px; margin-top: 6px; position: relative; z-index: 3;
}
.sec--temas .tm-hint {
  display: inline-flex; align-items: center; gap: .65em;
  font-size: .86rem; line-height: 1.35; color: var(--muted-light); text-wrap: balance;
}
.sec--temas .tm-hint[hidden] { display: none; }
.sec--temas .tm-hint::before {
  content: ""; flex: none; width: 22px; height: 8px; border-radius: 999px;
  border: 1.5px solid var(--earth);
  background: radial-gradient(circle at 50% 50%, var(--earth) 0 2px, transparent 2.5px);
}
.sec--temas .tm-pause {
  flex: none; display: inline-flex; align-items: center; gap: .6em;
  min-height: 44px; padding: 0 1.05em; border-radius: 999px;
  border: 1px solid rgba(0, 45, 52, .22); background: var(--white);
  font-size: .86rem; font-weight: 600; color: var(--ink);
  transition: border-color .2s, background-color .2s;
}
.sec--temas .tm-pause:hover { border-color: var(--teal); }
.sec--temas .tm-pause[hidden] { display: none; }
.sec--temas .tm-pause__ico { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; flex: none; }
.sec--temas .tm-pause.is-paused .tm-pause__ico {
  width: 0; height: 0; border-right: 0;
  border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

/* ---------- Painel do tema ---------- */
.sec--temas .tm-card {
  position: relative; margin-top: 22px;
  background: var(--white); border: 1px solid var(--paper-line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: 0 1px 2px rgba(0, 45, 52, .06), 0 30px 60px -36px rgba(0, 45, 52, .45);
}
.sec--temas .tm-card::before { /* fio terroso de destaque: liga o painel à esfera */
  content: ""; position: absolute; left: clamp(20px, 2.6vw, 32px); top: -1px; width: 64px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--earth);
}
.sec--temas .tm-card__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.sec--temas .tm-card__kicker { color: var(--muted-light); display: inline-flex; align-items: baseline; gap: .8em; }
.sec--temas .tm-card__idx { font-family: var(--f-display); font-size: 1.2rem; letter-spacing: .06em; color: var(--earth); }
.sec--temas .tm-card .demo-tag { color: var(--muted-light); }

.sec--temas .tm-card__head { margin-top: 18px; min-height: 2.6em; }
.sec--temas .tm-card__name { color: var(--ink); font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.5rem); }
.sec--temas .tm-card__badge {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--earth);
}
.sec--temas .tm-card__badge svg { width: 1.15em; height: auto; aspect-ratio: 66.23 / 53.13; }
.sec--temas .tm-card__badge[hidden] { display: none; }

.sec--temas .tm-card__block { margin-top: 20px; }
.sec--temas .tm-card__lbl { color: var(--muted-light); font-size: .7rem; margin-bottom: 10px; }
.sec--temas .tm-bubble {
  position: relative; background: var(--teal-deep); color: var(--white);
  border-radius: 18px 18px 18px 4px; padding: 14px 18px 15px;
  font-size: 1.02rem; line-height: 1.5;
}
.sec--temas .tm-bubble::after { /* rabinho de mensagem */
  content: ""; position: absolute; left: -7px; bottom: 0; width: 14px; height: 14px;
  background: var(--teal-deep); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.sec--temas .tm-card__pratica { padding-left: 14px; border-left: 2px solid var(--earth); color: var(--ink); font-weight: 500; line-height: 1.5; }

.sec--temas .tm-card__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--paper-line);
}
.sec--temas .tm-card__cta p { font-size: .95rem; font-weight: 600; color: var(--ink); }

@media (min-width: 1024px) {
  .sec--temas .tm-bubble { min-height: calc(1.5em * 3 + 29px); }
  .sec--temas .tm-card__pratica { min-height: 3em; }
}
@media (max-width: 479px) {
  .sec--temas .tm-card__cta .btn { width: 100%; }
}