/* ATOM · 02 oque · "O que é (e o que não é)"
   Tema claro. Todo seletor começa com .sec--oque.
   Peças: abertura assimétrica · "O vazio no meio" (diagrama SVG com botões reais) ·
   "A ATOM não é" (linhas editoriais com rota) · fechamento sobre a duna com o A em movimento. */

.sec--oque {
  --oq-line: rgba(0, 45, 52, .14);
  --oq-ring: rgba(0, 45, 52, .3);
  padding-bottom: 0;
  overflow: clip;
}

/* ---------- ondas finas atrás do título ---------- */
.sec--oque .oque-waves {
  position: absolute; top: 0; right: 0; z-index: -1;
  width: min(100%, 980px); height: clamp(240px, 34vw, 470px);
  pointer-events: none; opacity: .7;
  -webkit-mask-image: linear-gradient(to left, #000 40%, transparent);
          mask-image: linear-gradient(to left, #000 40%, transparent);
}
.sec--oque .oque-waves path { fill: none; stroke: var(--earth); stroke-width: 1; opacity: .3; vector-effect: non-scaling-stroke; }
.sec--oque .oque-waves path:nth-child(odd) { stroke: var(--teal); opacity: .2; }

/* ---------- abertura ---------- */
.sec--oque .oque-head { position: relative; display: grid; gap: 26px; }
.sec--oque .oque-head__title .h2 { max-width: 21ch; }
.sec--oque .oque-head__lead {
  margin-top: 0; padding-left: 20px; border-left: 2px solid var(--earth);
  color: var(--muted-light); max-width: 52ch;
}
@media (min-width: 1080px) {
  .sec--oque .oque-head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 36px; }
  .sec--oque .oque-head__title { grid-column: 1 / span 9; }
  .sec--oque .oque-head__lead { grid-column: 7 / span 6; }
}

/* ---------- peça 1: o vazio no meio ---------- */
.sec--oque .oque-venn {
  margin-top: clamp(56px, 9vw, 128px);
  display: grid; gap: 26px;
  grid-template-areas: "intro" "stage" "cards";
}
.sec--oque .oque-venn__intro { grid-area: intro; }
.sec--oque .oque-venn__stage { grid-area: stage; }
.sec--oque .oque-venn__cards { grid-area: cards; }
/* tablet e notebook pequeno (iPad, 1024): painel AO LADO do diagrama, tudo na mesma dobra */
@media (min-width: 768px) and (max-width: 1079px) {
  .sec--oque .oque-venn {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "intro intro" "stage cards";
    column-gap: clamp(28px, 4vw, 48px); row-gap: 30px; align-items: center;
  }
}
@media (min-width: 1080px) {
  .sec--oque .oque-venn {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "stage intro" "stage cards";
    column-gap: clamp(40px, 5vw, 84px); row-gap: 34px; align-items: start;
  }
  .sec--oque .oque-venn__intro { padding-top: 28px; }
  .sec--oque .oque-venn__stage { align-self: center; }
}

.sec--oque .oque-venn__h { color: var(--ink); }
.sec--oque .oque-venn__p { margin-top: 12px; color: var(--muted-light); max-width: 42ch; font-size: 1.04rem; }
.sec--oque .oque-venn__hint {
  margin-top: 14px; display: flex; align-items: center; gap: 10px;
  font-size: .84rem; color: var(--muted-light);
}
/* sem JS não há interação: as dicas só aparecem com a peça armada */
.sec--oque:not(.oque--venn-on) .oque-venn__hint { display: none; }
.sec--oque .oque-venn__hint .is-mouse { display: none; }
@media (hover: hover) and (pointer: fine) {
  .sec--oque .oque-venn__hint .is-touch { display: none; }
  .sec--oque .oque-venn__hint .is-mouse { display: inline; }
}
.sec--oque .oque-venn__hint::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--earth);
  background: radial-gradient(circle, var(--earth) 0 3px, transparent 3.5px);
}

/* palco do diagrama: SVG decorativo + botões HTML reais posicionados em % */
/* o viewBox (0 46 640 512) já corta o respiro vazio em cima e embaixo dos círculos */
.sec--oque .oque-venn__stage {
  position: relative; width: 100%; max-width: 660px; margin-inline: auto;
  aspect-ratio: 640 / 512; container-type: inline-size;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
@media (max-width: 767px) {
  /* celular: sem o diagrama (página mais curta). Ficam o título, o texto e o cartão "O meio" */
  .sec--oque .oque-venn__stage, .sec--oque .oque-venn__hint { display: none; }
  .sec--oque .oque-venn { gap: 22px; grid-template-areas: "intro" "cards"; }
}
.sec--oque .oque-venn__stage.is-pointing { cursor: pointer; }
.sec--oque .oque-venn__svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
          mask-composite: intersect;
}

.sec--oque .oque-venn__dunes path { fill: none; stroke: var(--earth); stroke-width: 1; opacity: .2; }
.sec--oque .oque-venn__c {
  fill: rgba(0, 45, 52, .025); stroke: var(--oq-ring); stroke-width: 1.4;
  transition: fill .5s var(--ease), stroke .5s var(--ease), stroke-width .5s var(--ease);
}
.sec--oque .oque-venn__flows path {
  fill: none; stroke: var(--teal); stroke-width: 1; stroke-linecap: round; opacity: .22;
  vector-effect: non-scaling-stroke; transition: opacity .5s;
}
.sec--oque .oque-venn__flows path:nth-child(3n) { stroke: var(--earth); opacity: .3; }
.sec--oque .oque-venn__parts circle { fill: var(--earth); }
.sec--oque .oque-venn__parts circle:nth-child(even) { fill: var(--teal); }
.sec--oque .oque-venn__core {
  fill: url(#oque-core-fill); fill-opacity: 1;
  stroke: var(--earth); stroke-opacity: 0; stroke-width: 1.6; stroke-dasharray: 5 6;
  transition: fill-opacity .5s var(--ease), stroke-opacity .5s var(--ease);
}

/* estado: centro (ATOM) selecionado → os fluxos convergem mais visíveis */
.sec--oque .oque-venn[data-active="core"] .oque-venn__flows path { opacity: .34; }
/* estado: um círculo selecionado → o meio aparece como vazio tracejado */
.sec--oque .oque-venn:not([data-active="core"]) .oque-venn__core { fill-opacity: 0; stroke-opacity: .9; }
.sec--oque .oque-venn:not([data-active="core"]) .oque-venn__c { stroke: rgba(0, 45, 52, .2); }
.sec--oque .oque-venn[data-active="ops"] .oque-venn__c--ops,
.sec--oque .oque-venn[data-active="emp"] .oque-venn__c--emp,
.sec--oque .oque-venn[data-active="cur"] .oque-venn__c--cur {
  fill: rgba(126, 90, 58, .12); stroke: var(--earth); stroke-width: 2.6;
}
/* prévia imediata do hover (antes de confirmar) */
.sec--oque .oque-venn__stage[data-hover="ops"] .oque-venn__c--ops,
.sec--oque .oque-venn__stage[data-hover="emp"] .oque-venn__c--emp,
.sec--oque .oque-venn__stage[data-hover="cur"] .oque-venn__c--cur { stroke: var(--earth); }

/* botões dos círculos */
.sec--oque .oque-venn__btn {
  position: absolute; z-index: 2; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-width: 44px; min-height: 44px; width: max-content; max-width: 31%;
  padding: 8px 10px; border-radius: 14px; text-align: center; color: var(--ink);
  transition: color .3s, background-color .3s;
}
/* posições em % do viewBox 0 46 640 512 (rótulos em y 195.6, 439.2; centro em y 276) */
.sec--oque .oque-venn__btn--ops { left: 28.2%; top: 29.22%; }
.sec--oque .oque-venn__btn--emp { left: 71.8%; top: 29.22%; }
.sec--oque .oque-venn__btn--cur { left: 50%; top: 76.8%; }
.sec--oque .oque-venn__n { font-size: .66rem; font-weight: 700; letter-spacing: .18em; line-height: 1; color: var(--earth); }
.sec--oque .oque-venn__name {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .02em; line-height: .95;
  font-size: clamp(16px, 2.2vw, 27px); font-size: clamp(16px, 4.6cqi, 27px);
  text-wrap: balance; padding-top: .06em;
}
.sec--oque .oque-venn__name::after {
  content: ""; display: block; width: 22px; height: 2px; margin: 7px auto 0; border-radius: 2px;
  background: var(--earth); transform: scaleX(0); transition: transform .45s var(--ease);
}
.sec--oque .oque-venn__btn[aria-checked="true"] { color: var(--earth); }
.sec--oque .oque-venn__btn[aria-checked="true"] .oque-venn__name::after { transform: scaleX(1); }
@media (hover: hover) { .sec--oque .oque-venn__btn:hover { color: var(--earth); } }

/* botão do centro: o símbolo oficial */
.sec--oque .oque-venn__core-btn {
  position: absolute; z-index: 3; left: 50%; top: 44.92%; width: 15.5%; min-width: 48px; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold);
  transition: color .5s var(--ease), opacity .5s, transform .5s var(--ease);
}
.sec--oque .oque-venn__core-btn svg { width: 64%; height: auto; margin-top: -4%; }
.sec--oque .oque-venn:not([data-active="core"]) .oque-venn__core-btn { color: var(--teal); }
@media (hover: hover) { .sec--oque .oque-venn__core-btn:hover { transform: translate(-50%, -50%) scale(1.08); } }
.sec--oque .oque-venn__core-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--teal); }
.sec--oque .oque-venn__btn:focus-visible { outline-offset: 0; }

/* painel (aria-live): sem JS os 4 cartões aparecem em sequência; com JS, um por vez no mesmo lugar */
.sec--oque .oque-card { border-top: 2px solid var(--ink); padding-top: 20px; }
.sec--oque .oque-card + .oque-card { margin-top: 40px; }
.sec--oque .oque-venn__cards.is-live { display: grid; }
.sec--oque .oque-venn__cards.is-live > .oque-card {
  grid-area: 1 / 1; margin-top: 0; visibility: hidden; opacity: 0; transform: translateY(10px);
  transition: opacity .3s, transform .45s var(--ease), visibility 0s .3s;
}
.sec--oque .oque-venn__cards.is-live > .oque-card.is-on {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity .45s .06s, transform .6s var(--ease) .06s, visibility 0s;
}
.sec--oque .oque-card__k {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-family: var(--f-body); font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--earth);
}
.sec--oque .oque-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--earth); flex: none; }
.sec--oque .oque-card__t {
  margin-top: 10px; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.85rem, 1.3rem + 1.8vw, 3rem); line-height: .95; color: var(--ink); padding-top: .06em;
}
.sec--oque .oque-card__dl { margin: 18px 0 0; }
.sec--oque .oque-card__row {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px;
  padding: 15px 0; border-top: 1px solid var(--oq-line);
}
.sec--oque .oque-card__row::before {
  content: ""; grid-row: span 2; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%;
}
.sec--oque .oque-card__row--tem::before { background: var(--earth); box-shadow: inset 0 0 0 4px var(--paper); border: 1.5px solid var(--earth); }
.sec--oque .oque-card__row--falta::before { border: 1.5px dashed var(--earth); }
.sec--oque .oque-card__row dt { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--earth); }
.sec--oque .oque-card__row dd { margin: 4px 0 0; font-size: 1.06rem; font-weight: 500; line-height: 1.45; color: var(--ink); }
@media (max-width: 767px) {
  /* cartão mais compacto no celular: "O que tem / O que falta" cabe acima da barra fixa */
  .sec--oque .oque-card { padding-top: 16px; }
  .sec--oque .oque-card__dl { margin-top: 12px; }
  .sec--oque .oque-card__row { padding: 12px 0; column-gap: 12px; grid-template-columns: 22px minmax(0, 1fr); }
  .sec--oque .oque-card__row dd { font-size: 1rem; line-height: 1.42; }
  .sec--oque .oque-sum li { padding: 9px 0; }
}
.sec--oque .oque-card__go {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; margin-top: 6px;
  font-weight: 700; color: var(--earth);
}
.sec--oque .oque-card__go::after { content: "→"; transition: transform .35s var(--ease); }
.sec--oque .oque-card__go:hover::after { transform: translateX(4px); }
.sec--oque .oque-card__go[hidden] { display: none; }

/* cartão do centro: a "equação" */
.sec--oque .oque-sum { margin-top: 14px; }
.sec--oque .oque-sum li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; align-items: baseline;
  padding: 11px 0; border-top: 1px solid var(--oq-line);
}
.sec--oque .oque-sum li:first-child { border-top: 0; }
.sec--oque .oque-sum__op { grid-row: span 2; font-family: var(--f-display); font-size: 1.7rem; line-height: 1; color: var(--earth); text-align: center; }
.sec--oque .oque-sum__w { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.55rem, 1.2rem + .9vw, 2.05rem); line-height: 1; color: var(--ink); padding-top: .06em; }
.sec--oque .oque-sum__d { grid-column: 2; margin-top: 3px; font-size: .95rem; line-height: 1.4; color: var(--muted-light); }
.sec--oque .oque-sum__eq {
  display: grid; grid-template-columns: 26px auto minmax(0, 1fr); column-gap: 10px; align-items: center;
  margin-top: 4px; padding-top: 16px; border-top: 2px solid var(--ink);
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.4rem); line-height: 1; color: var(--ink);
}
.sec--oque .oque-sum__eq > span:last-child { padding-top: .06em; }
.sec--oque .oque-sum__a { width: 40px; height: auto; color: var(--teal); }

/* ---------- peça 2: a ATOM não é ---------- */
.sec--oque .oque-nao {
  --pl: 34px; --rl: 10px;
  margin-top: clamp(88px, 12vw, 172px);
  display: grid; gap: 30px;
}
@media (min-width: 768px) { .sec--oque .oque-nao { --pl: 50px; --rl: 14px; } }
@media (max-width: 767px) { .sec--oque .oque-nao { margin-top: 64px; gap: 22px; } }
@media (min-width: 1080px) {
  .sec--oque .oque-nao { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 84px); align-items: start; }
  .sec--oque .oque-nao__head { position: sticky; top: calc(var(--nav-h) + 36px); }
}
.sec--oque .oque-nao__h {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.6rem, 1.5rem + 3.6vw, 4.8rem); line-height: .92; padding-top: .08em; color: var(--ink);
}
.sec--oque .oque-nao__p { margin-top: 14px; max-width: 34ch; font-size: 1.06rem; color: var(--muted-light); }
.sec--oque .oque-nao__hint { margin-top: 12px; font-size: .84rem; color: var(--muted-light); }
/* sem JS todas as linhas ficam abertas e não há acordeão: sem dica e sem ícone +/− */
.sec--oque:not(.oque--armed) .oque-nao__hint,
.sec--oque:not(.oque--armed) .oque-nao__pm { display: none; }

.sec--oque .oque-nao__body { position: relative; padding-left: var(--pl); padding-bottom: 40px; }
.sec--oque .oque-nao__route { position: absolute; left: var(--rl); top: 0; bottom: 34px; width: 2px; }
.sec--oque .oque-nao__route::before {
  content: ""; position: absolute; inset: 0; opacity: .6;
  background: repeating-linear-gradient(to bottom, var(--earth) 0 6px, transparent 6px 13px);
}
.sec--oque .oque-nao__dot {
  position: absolute; left: 50%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--earth); box-shadow: 0 0 0 5px rgba(126, 90, 58, .2);
  transform: translateY(var(--y, 46px)); transition: transform .65s var(--ease);
}
.sec--oque .oque-nao__end { position: absolute; left: 50%; bottom: -30px; width: 26px; height: auto; transform: translateX(-50%); color: var(--teal); }

.sec--oque .oque-nao__list { border-top: 1px solid var(--oq-line); }
.sec--oque .oque-nao__item { position: relative; isolation: isolate; border-bottom: 1px solid var(--oq-line); }
/* estação da rota */
.sec--oque .oque-nao__item::before {
  content: ""; position: absolute; top: 40px; left: calc(var(--rl) + 1px - var(--pl) - 5px);
  width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--earth);
}
/* faixa de destaque (hover/foco) */
.sec--oque .oque-nao__item::after {
  content: ""; position: absolute; inset: 0 0 0 -12px; z-index: -1; border-radius: 12px;
  background: var(--sand); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease);
}
.sec--oque .oque-nao__item:has(.oque-nao__row:focus-visible)::after,
.sec--oque .oque-nao__item.is-hot::after { transform: scaleX(1); }
@media (hover: hover) { .sec--oque .oque-nao__item:hover::after { transform: scaleX(1); } }

.sec--oque .oque-nao__row {
  position: relative; width: 100%; text-align: left;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px;
  grid-template-areas: "n not pm" ". is is";
  column-gap: 12px; row-gap: 12px; align-items: start;
  padding: 22px 2px 22px 0; border-radius: 10px;
}
@media (min-width: 768px) {
  .sec--oque .oque-nao__row {
    grid-template-columns: 32px minmax(0, 5fr) minmax(0, 6fr) 44px;
    grid-template-areas: "n not is pm"; column-gap: 22px; align-items: center; padding: 26px 8px 26px 0;
  }
}
.sec--oque .oque-nao__n { grid-area: n; padding-top: .9em; font-size: .72rem; font-weight: 700; letter-spacing: .14em; line-height: 1; color: var(--earth); }
@media (min-width: 768px) { .sec--oque .oque-nao__n { padding-top: 0; } }
.sec--oque .oque-nao__not { grid-area: not; display: block; min-width: 0; }
.sec--oque .oque-nao__w {
  display: inline; font-family: var(--f-display); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(1.95rem, 1.45rem + 1.5vw, 2.75rem); line-height: 1.02; color: var(--muted-light);
  --strike: 100%; --sw: 3px;
  background: linear-gradient(var(--earth), var(--earth)) no-repeat 0 50% / var(--strike) var(--sw);
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
  transition: background-size .9s var(--ease), color .3s;
}
.sec--oque .oque-nao__item.is-hot .oque-nao__w { --sw: 4px; }
.sec--oque .oque-nao__why { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.4; color: var(--muted-light); }
.sec--oque .oque-nao__is { grid-area: is; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sec--oque .oque-nao__lab {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; color: var(--earth);
}
.sec--oque .oque-nao__is .oque-nao__lab::after { content: "→"; letter-spacing: 0; transition: transform .4s var(--ease); }
.sec--oque .oque-nao__item.is-hot .oque-nao__is .oque-nao__lab::after { transform: translateX(5px); }
.sec--oque .oque-nao__txt { font-size: 1.08rem; font-weight: 600; line-height: 1.38; color: var(--ink); text-wrap: pretty; }
.sec--oque .oque-nao__pm {
  grid-area: pm; justify-self: end; position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(0, 45, 52, .28); transition: border-color .3s, background-color .3s;
}
.sec--oque .oque-nao__pm::before, .sec--oque .oque-nao__pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px;
  border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease);
}
.sec--oque .oque-nao__pm::after { transform: rotate(90deg); }
.sec--oque .oque-nao__item.is-open .oque-nao__pm { border-color: var(--earth); background: var(--earth); }
.sec--oque .oque-nao__item.is-open .oque-nao__pm::before,
.sec--oque .oque-nao__item.is-open .oque-nao__pm::after { background: var(--white); }
.sec--oque .oque-nao__item.is-open .oque-nao__pm::after { transform: rotate(0deg); }
.sec--oque .oque-nao__item.is-open::before { background: var(--earth); }
/* celular: linhas mais compactas (página mais curta). Com o acordeão armado, a linha fechada mostra só
   o que a ATOM não é; o "Na ATOM" e o "Na prática" aparecem juntos quando a linha abre */
@media (max-width: 767px) {
  .sec--oque .oque-nao__row { padding-block: 16px; row-gap: 10px; }
  .sec--oque .oque-nao__item::before { top: 33px; }
  .sec--oque .oque-nao__txt { font-size: 1rem; }
  .sec--oque.oque--armed .oque-nao__item:not(.is-open) .oque-nao__is { display: none; }
}

/* "na prática": sem JS fica aberto; com JS (oque--armed) vira acordeão */
.sec--oque .oque-nao__proof { display: grid; grid-template-rows: 1fr; }
.sec--oque .oque-nao__proof-in { overflow: hidden; min-height: 0; }
.sec--oque .oque-nao__proof p {
  display: grid; gap: 6px; margin: 0 0 22px calc(24px + 12px); padding: 14px 16px 15px;
  background: var(--white); border: 1px solid var(--oq-line); border-left: 3px solid var(--earth); border-radius: 4px 12px 12px 4px;
  font-size: .98rem; line-height: 1.5; color: var(--ink);
}
@media (min-width: 768px) { .sec--oque .oque-nao__proof p { margin-left: calc(32px + 22px); margin-right: calc(44px + 22px + 8px); } }
.sec--oque.oque--armed .oque-nao__proof {
  grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .55s var(--ease), visibility 0s .55s;
}
.sec--oque.oque--armed .oque-nao__item.is-open .oque-nao__proof {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .55s var(--ease), visibility 0s;
}
/* risco desenhado quando a lista entra na tela */
.sec--oque.oque--armed .oque-nao__item:not(.is-struck) .oque-nao__w { --strike: 0%; }

/* ---------- fechamento: duna + A em movimento ---------- */
.sec--oque .oque-close {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(40px, 5vw, 80px);
  padding-block: clamp(48px, 8vw, 132px) clamp(72px, 9vw, 148px);
}
.sec--oque .oque-close__bg { position: absolute; inset: 0; z-index: -2; background: var(--paper); }
.sec--oque .oque-close__bg picture, .sec--oque .oque-close__bg img { width: 100%; height: 100%; }
.sec--oque .oque-close__bg img {
  object-fit: cover; object-position: 50% 62%; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
}
.sec--oque .oque-close__in { display: grid; gap: 22px; }
.sec--oque .oque-close__art { position: relative; height: clamp(210px, 62vw, 340px); margin-inline: calc(var(--gutter) * -1); }
.sec--oque .oque-close__flow { position: absolute; inset: 0; width: 100%; height: 100%; }
.sec--oque .oque-close__lines path { fill: none; stroke: var(--teal); stroke-width: 1.1; opacity: .26; vector-effect: non-scaling-stroke; }
.sec--oque .oque-close__lines path:nth-child(even) { stroke: var(--earth); opacity: .3; }
.sec--oque .oque-close__parts circle { fill: var(--earth); }
.sec--oque .oque-close__parts circle:nth-child(3n) { fill: var(--teal); }
.sec--oque .oque-close__a { color: var(--teal); }
.sec--oque .oque-close__q p {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .005em;
  font-size: clamp(2.7rem, 1.2rem + 5.4vw, 7.1rem); line-height: .9; padding-top: .08em;
  color: var(--ink); text-wrap: balance; max-width: 15ch;
}
.sec--oque .oque-close__txt { display: grid; gap: clamp(24px, 3vw, 34px); }
.sec--oque .oque-close__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.sec--oque .oque-close__note { max-width: 40ch; font-size: .96rem; color: var(--muted-light); }
@media (max-width: 479px) { .sec--oque .oque-close__cap .btn { width: 100%; } }
@media (max-width: 767px) {
  /* celular: o fecho fica só com a citação e o CTA sobre a duna (o A em movimento já abre a seção) */
  .sec--oque .oque-close { margin-top: 0; padding-block: 64px 56px; }
  .sec--oque .oque-close__art { display: none; }
}
@media (min-width: 1080px) {
  .sec--oque .oque-close__in { position: static; gap: 30px; }
  .sec--oque .oque-close__art { position: absolute; inset: 0; z-index: -1; height: auto; margin: 0; }
  .sec--oque .oque-close__q p { max-width: 13.5ch; }
  /* nota embaixo do botão: o bloco de texto fica estreito, à esquerda */
  .sec--oque .oque-close__cap { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec--oque .oque-close__note { max-width: 36ch; }
  /* linhas e partículas não passam por cima do texto: somem na faixa do texto e nascem perto do A.
     --oq-txt = borda direita do bloco de texto (margem do .wrap + largura da citação, que acompanha a fonte) */
  .sec--oque .oque-close__flow {
    --oq-txt: calc(max(var(--gutter), (100vw - 1240px) / 2) + min(560px, 116px + 25.4vw));
    -webkit-mask-image: linear-gradient(to right, transparent var(--oq-txt), #000 calc(var(--oq-txt) + 220px));
            mask-image: linear-gradient(to right, transparent var(--oq-txt), #000 calc(var(--oq-txt) + 220px));
  }
}

/* loops (ondas e partículas) rodam por JS só com a seção na tela e sem movimento reduzido */