/* Caminhos · trocar, reduzir, retirar ou manter (prefixo cm-) */
.cm-secao { background: var(--hd-papel); padding: var(--wf-secao) var(--wf-margem); overflow: hidden; }
.cm-dentro { max-width: var(--wf-largura); margin: 0 auto; }

/* abertura: o título atravessa a página; as frases dela vêm em duas colunas */
.cm-h2 { margin-top: 1.4rem; font-size: clamp(2.5rem, .7rem + 5.6vw, 5.4rem); line-height: .96; letter-spacing: -.022em; text-wrap: balance; }
.cm-abre-texto { margin-top: clamp(1.8rem, 4vw, 3.4rem); padding-top: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--hd-fio); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 6vw, 6rem); color: var(--hd-tinta-suave); }
.cm-epoca p { font-family: var(--hd-serifa); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.2; color: var(--hd-tinta); text-wrap: pretty; max-width: 20em; }
.cm-epoca footer, .cm-secao cite { font-style: normal; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.cm-epoca footer { margin-top: .9rem; }
.cm-epoca footer::before, .cm-secao cite::before { content: "— "; }
.cm-secao cite { white-space: nowrap; }
.cm-abre-corpo { display: grid; gap: 1rem; max-width: 33em; }
.cm-ponte { font-weight: 500; color: var(--hd-tinta); }

/* palco: sem caixa; a forma fica no papel, com a luz por trás, como no hero */
.cm-palco { position: relative; isolation: isolate; margin-top: clamp(2.5rem, 6vw, 5rem); }
.cm-malha { position: absolute; inset: -18% -30%; z-index: -1; pointer-events: none; }
.cm-malha i { position: absolute; border-radius: 50%; filter: blur(60px); }
.cm-malha i:nth-child(1) { width: 46%; aspect-ratio: 1; left: 38%; top: 2%; background: radial-gradient(closest-side, var(--hd-nevoa), transparent); background: radial-gradient(closest-side in oklab, var(--hd-nevoa), color-mix(in oklab, var(--hd-nevoa) 0%, transparent)); opacity: .85; }
.cm-malha i:nth-child(2) { width: 44%; aspect-ratio: 1; left: 22%; bottom: 0; background: radial-gradient(closest-side, var(--hd-pessego), transparent); background: radial-gradient(closest-side in oklab, var(--hd-pessego), color-mix(in oklab, var(--hd-pessego) 0%, transparent)); opacity: .8; transition: opacity 1.4s, transform 1.6s var(--wf-curva); }
[data-cm="retirar"] .cm-malha i:nth-child(2) { opacity: .45; }
[data-cm="reduzir"] .cm-malha i:nth-child(2) { transform: scale(.86); }

/* sem JS: os quatro em lista, cada um com a sua forma pequena */
.cm-figura { display: none; }
.cm-textos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.8rem, 4vw, 3.4rem) clamp(1.6rem, 5vw, 5rem); }
.cm-caminho { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.cm-caminho > div { display: grid; gap: .75rem; }
.cm-num { font-size: var(--wf-mini); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--hd-tinta-suave); }
.cm-caminho h3 { font-family: var(--hd-serifa); font-weight: 400; font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.8rem); line-height: 1.02; letter-spacing: -.015em; }
.cm-caminho p { color: var(--hd-tinta-suave); }
.cm-caminho h3 + p { color: var(--hd-tinta); font-size: 1.06em; }
.cm-mini { -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); width: 5rem; aspect-ratio: 1; background: url("../img/gel-0.webp") 39% 46% / 205% no-repeat; }
.cm-mini-reduzir { background-image: url("../img/gel-1.webp"); background-size: 150%; background-position: 34% 44%; }
.cm-mini-retirar { background-image: url("../img/cm-contorno.webp"); background-position: 38% 58%; }
.cm-mini-manter { background-image: url("../img/gel-5.webp"); background-position: 38% 58%; }
.cm-nota { margin-top: clamp(1.6rem, 3vw, 2.4rem); padding-top: 1.1rem; border-top: 1px solid var(--hd-fio); font-size: var(--wf-mini); line-height: 1.55; color: var(--hd-tinta-suave); max-width: 46em; }

/* com JS: seletor à esquerda, forma grande no meio, um texto por vez à direita */
.cm-vivo .cm-palco { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "sel fig txt" "sel fig nota"; grid-template-rows: 1fr auto; column-gap: clamp(1rem, 2.4vw, 2.5rem); align-items: center; }
.cm-sel { grid-area: sel; position: relative; z-index: 2; }
.cm-escolha { font-size: var(--wf-mini); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--hd-tinta-suave); margin-bottom: 1rem; max-width: 16em; line-height: 1.5; }
.cm-seletor { display: grid; counter-reset: cm; border-top: 1px solid var(--hd-fio); }
.cm-vivo .cm-figura { grid-area: fig; display: block; }
.cm-vivo .cm-textos { grid-area: txt; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-self: end; position: relative; z-index: 2; }
.cm-vivo .cm-nota { grid-area: nota; align-self: start; position: relative; z-index: 2; }
.cm-vivo .cm-caminho > .cm-mini { display: none; }
.cm-vivo .cm-palco { margin-top: clamp(1rem, 2vw, 2rem); }
.cm-vivo .cm-caminho h3 { font-size: clamp(2.1rem, 1.3rem + 2vw, 3.3rem); }
.cm-vivo .cm-caminho h3 + p { font-family: var(--hd-serifa); font-size: clamp(1.3rem, 1.15rem + .5vw, 1.55rem); line-height: 1.28; }
.cm-vivo .cm-caminho { grid-area: 1 / 1; grid-template-columns: minmax(0, 1fr); align-content: end; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .5s var(--wf-curva), transform .7s var(--wf-curva), visibility 0s .5s; }
.cm-vivo .cm-caminho.cm-ativo { opacity: 1; visibility: visible; transform: none; transition-delay: .18s, .18s, 0s; }
.cm-caminho:focus-visible { outline-offset: 10px; border-radius: 12px; }

.cm-aba { counter-increment: cm; appearance: none; border: 0; border-bottom: 1px solid var(--hd-fio); background: none; width: 100%; padding: .5rem 0 .6rem; min-height: 3.6rem; display: flex; align-items: baseline; gap: .8rem; cursor: pointer; text-align: left; font-family: var(--hd-serifa); font-weight: 400; font-size: clamp(2.3rem, .9rem + 3.1vw, 4.2rem); line-height: 1; letter-spacing: -.02em; color: var(--hd-tinta-suave); transition: color .4s, padding .7s var(--wf-curva); -webkit-tap-highlight-color: transparent; }
.cm-aba::after { content: "0" counter(cm); margin-left: auto; font-family: var(--hd-sem); font-style: normal; font-size: var(--wf-mini); font-weight: 500; letter-spacing: .14em; color: var(--hd-tinta-suave); }
.cm-aba::before { content: ""; align-self: center; width: .3em; height: .3em; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--hd-ambar) 55%, var(--hd-laranja)); box-shadow: 0 0 0 .13em color-mix(in oklab, var(--hd-ambar) 28%, transparent); transform: scale(0); margin-left: -1.1rem; margin-right: -.3em; opacity: 0; transition: transform .7s var(--wf-curva), opacity .4s, margin .7s var(--wf-curva); }
.cm-aba:hover { color: var(--hd-tinta); padding-left: .35rem; }
.cm-aba[aria-selected="true"] { color: var(--wf-laranja-texto); font-style: italic; padding-left: 0; }
.cm-aba[aria-selected="true"]::before { transform: none; opacity: 1; margin-left: 0; margin-right: 0; }

/* a forma */
.cm-forma { position: relative; aspect-ratio: 1; margin: -20% -30% -30%; pointer-events: none; }
.cm-luz { position: absolute; left: 14%; top: 22%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--hd-ambar) 55%, transparent), transparent); filter: blur(40px); opacity: .45; transition: opacity 1.2s, transform 1.4s var(--wf-curva); }
.cm-g { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 44.5% 72%; translate: 5.5% 0; transition: opacity 1s var(--wf-curva), transform 1.3s var(--wf-curva), filter 1s; }
.cm-g-cheia { transform: scale(.93); }
.cm-g-menor { transform: scale(.86); }
.cm-g-hoje { transform: scale(1.02); }
.cm-g-contorno { transform: scale(1.02); }
[data-cm="trocar"] .cm-g-cheia { opacity: 1; transform: none; }
[data-cm="reduzir"] .cm-g-menor { opacity: 1; transform: scale(.72); }
[data-cm="reduzir"] .cm-g-contorno { opacity: .8; transform: none; }
[data-cm="reduzir"] .cm-luz { opacity: .28; transform: scale(.8); }
[data-cm="retirar"] .cm-g-contorno { opacity: 1; transform: none; }
[data-cm="retirar"] .cm-g-hoje { filter: blur(14px); }
[data-cm="retirar"] .cm-luz { opacity: .7; transform: translateY(8%) scale(.9); }
[data-cm="manter"] .cm-g-hoje { opacity: 1; transform: none; }
[data-cm="manter"] .cm-luz { opacity: .38; transform: translateY(8%); }

.cm-legenda { position: relative; display: grid; justify-items: center; text-align: center; font-family: var(--hd-serifa); font-style: italic; font-size: 1.15rem; letter-spacing: .03em; color: var(--hd-tinta-suave); }
.cm-legenda::before { content: ""; width: 1px; height: 1.8rem; background: var(--hd-laranja); margin-bottom: .7rem; opacity: .7; }
.cm-legenda span { grid-area: 2 / 1; opacity: 0; transition: opacity .6s; }
[data-cm="trocar"] .cm-legenda [data-cm-de="trocar"], [data-cm="reduzir"] .cm-legenda [data-cm-de="reduzir"], [data-cm="retirar"] .cm-legenda [data-cm-de="retirar"], [data-cm="manter"] .cm-legenda [data-cm-de="manter"] { opacity: 1; transition-delay: .3s; }

/* as quatro formas pequenas: mostram onde você está e também trocam o caminho (toque ou arraste) */
.cm-figura { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.cm-trilha { position: relative; z-index: 2; display: flex; justify-content: center; gap: .2rem; margin-top: .9rem; }
.cm-trilha .cm-mini { width: 3.25rem; cursor: pointer; opacity: .42; transform: scale(.78); transition: opacity .6s, transform .8s var(--wf-curva); }
.cm-trilha .cm-mini:hover { opacity: .8; }
[data-cm="trocar"] .cm-trilha .cm-mini-trocar, [data-cm="reduzir"] .cm-trilha .cm-mini-reduzir, [data-cm="retirar"] .cm-trilha .cm-mini-retirar, [data-cm="manter"] .cm-trilha .cm-mini-manter { opacity: 1; transform: none; }

/* fecho */
.cm-voz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: center; }
.cm-voz img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--hd-papel-claro), 0 0 0 4px color-mix(in oklab, var(--hd-laranja) 55%, transparent), 0 14px 24px -14px rgba(42, 33, 29, .5); }
.cm-fecho { margin-top: clamp(3.5rem, 8vw, 7rem); padding-top: clamp(1.6rem, 3vw, 2.6rem); border-top: 1px solid var(--hd-fio); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.6rem, 5vw, 5rem); align-items: end; }
.cm-fecho-frase p { font-family: var(--hd-serifa); font-size: clamp(2.3rem, 1.2rem + 4vw, 4.8rem); line-height: 1; letter-spacing: -.02em; text-wrap: balance; }
.cm-fecho-frase em { font-style: italic; color: var(--wf-laranja-texto); }
.cm-fecho-lado { display: grid; gap: 1.5rem; justify-items: start; color: var(--hd-tinta-suave); max-width: 30em; }

@media (max-width: 1020px) {
  .cm-abre-texto, .cm-fecho { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cm-textos { grid-template-columns: minmax(0, 1fr); }
  .cm-vivo .cm-palco { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sel" "fig" "txt" "nota"; grid-template-rows: none; }
  .cm-escolha { max-width: none; margin-bottom: .8rem; }
  .cm-seletor { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; padding: .3rem; border-radius: 999px; background: color-mix(in oklab, var(--hd-nevoa) 42%, var(--hd-papel-claro)); }
  .cm-aba { justify-content: center; align-items: center; min-height: 3rem; padding: 0; border: 0; border-radius: 999px; font-size: clamp(1.2rem, .7rem + 2.2vw, 1.7rem); letter-spacing: 0; color: var(--hd-tinta); transition: color .4s, background .4s, box-shadow .4s; }
  .cm-aba:hover { padding-left: 0; }
  .cm-aba::before, .cm-aba::after { display: none; }
  .cm-aba[aria-selected="true"] { background: var(--hd-papel-claro); box-shadow: 0 6px 16px -8px rgba(42, 33, 29, .45); }
  .cm-forma { max-width: 38rem; margin: -14% auto -22%; }
  .cm-malha { inset: 0 -20%; }
  .cm-malha i:nth-child(1) { width: 90%; left: 30%; top: 0; }
  .cm-malha i:nth-child(2) { width: 90%; left: 0; top: 22%; bottom: auto; }
  .cm-vivo .cm-textos { margin-top: 2rem; }
  /* no celular o texto escolhido ocupa só a própria altura (sem vão reservado para o mais longo) */
  .cm-vivo .cm-caminho { align-content: start; display: none; transition: none; transform: none; }
  .cm-vivo .cm-caminho.cm-ativo { display: grid; animation: cm-chega .7s var(--wf-curva) both; }
  .cm-vivo .cm-palco { margin-top: clamp(2rem, 5vw, 3rem); }
}
@keyframes cm-chega { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 620px) {
  .cm-forma { margin: -14% -22% -24%; }
}
@media (max-width: 400px) {
  .cm-fecho .wf-botao { white-space: nowrap; padding-inline: 1.2rem; gap: .6rem; font-size: .95rem; }
}