/* Seção 3 · areas (#areas) — prefixo ar- */
.ar {
  display: grid;
  grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr);
  gap: clamp(40px, 6vw, 112px);
  align-items: start;
}
.ar-cabeca { position: relative; }
.ar-titulo { max-width: 10ch; }
.ar-lead { margin: clamp(18px, 2.2vw, 28px) 0 0; max-width: 40ch; }
.ar-acao { display: grid; justify-items: start; gap: 12px; margin-top: clamp(26px, 3vw, 40px); }
.ar-onde { margin: 0; font-size: var(--t-mini); color: var(--texto); }

.ar-lista { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid rgb(166 45 88 / .2); }
.ar-area {
  --ar-cor: var(--eva-rosa);
  position: relative;
  display: grid; grid-template-columns: clamp(64px, 5.6vw, 84px) minmax(0, 10.5rem) minmax(0, 1fr);
  grid-template-areas: "peca titulo corpo";
  gap: 0 clamp(18px, 2.2vw, 34px);
  align-items: start;
  padding: clamp(20px, 2vw, 28px) clamp(8px, 1.2vw, 20px);
  border-bottom: 1.5px solid rgb(166 45 88 / .2);
  isolation: isolate;
}
.ar-area::before {
  content: ""; position: absolute; inset: 6px -6px; z-index: -1; border-radius: 22px;
  background: color-mix(in oklab, var(--ar-cor) 30%, transparent);
  opacity: 0; transition: opacity .4s var(--curva);
}
.ar-area:hover::before { opacity: 1; }
.ar-area[data-cor="amarelo"] { --ar-cor: var(--eva-amarelo); }
.ar-area[data-cor="menta"] { --ar-cor: var(--eva-menta); }
.ar-area[data-cor="lilas"] { --ar-cor: var(--eva-lilas); }
.ar-area[data-cor="pessego"] { --ar-cor: var(--eva-pessego); }
.ar-peca { grid-area: peca; --peca: clamp(56px, 4.8vw, 72px); margin-top: -2px; transform: rotate(-4deg); transition: transform .5s var(--curva-quique); }
.js .ar-peca[data-rev="peca"].wf-visto { transform: rotate(-4deg); }
.ar-area:nth-child(2n) .ar-peca, .js .ar-area:nth-child(2n) .ar-peca[data-rev="peca"].wf-visto { transform: rotate(3.5deg); }
.ar-area:hover .ar-peca, .js .ar-area:hover .ar-peca[data-rev="peca"].wf-visto { transform: rotate(0) translateY(-4px) scale(1.04); }

.ar-corpo { grid-area: corpo; }
.ar-h3 { grid-area: titulo; margin: .5rem 0 0; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.45rem, 1.9vw, 1.9rem); line-height: 1.05; text-wrap: balance; letter-spacing: -.02em; color: var(--tinta); }
.ar-corpo > p { margin: 0; max-width: 52ch; font-size: 1rem; line-height: 1.6; color: var(--texto-forte); }
.ar-citacao { margin: 0 0 .8rem; }
.ar-citacao p { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.2rem, 1.45vw, 1.42rem); line-height: 1.22; letter-spacing: -.01em; color: var(--bordo-escuro); text-wrap: pretty; }
.ar-citacao footer { margin-top: .35rem; font-size: var(--t-mini); letter-spacing: .08em; text-transform: uppercase; font-weight: 500; color: rgb(84 77 71 / .9); }
.ar-citacao footer::before { content: "— "; }
.ar-tags { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ar-tags li { padding: .32rem .7rem; border-radius: 9px; background: var(--ar-cor); box-shadow: var(--sombra-eva); font-family: var(--f-titulo); font-weight: 600; font-size: .92rem; letter-spacing: .02em; color: var(--bordo-escuro); }
.ar-mais { grid-area: peca; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 2px; border-radius: 12px; border: 1.5px dashed rgb(166 45 88 / .45); font-family: var(--f-titulo); font-weight: 600; font-size: 1.4rem; color: var(--bordo); }
.ar-h3--mini { font-size: var(--t-h3); margin-top: .55rem; }
.ar-area--metodos { border-bottom: 0; }
.ar-area--metodos .ar-corpo > p { color: var(--texto); }

@media (max-width: 960px) {
  .ar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .ar-area { grid-template-columns: 58px minmax(0, 1fr); grid-template-areas: "peca titulo" "corpo corpo"; gap: 14px 16px; padding: 22px 0; }
  .ar-peca { --peca: 54px; }
  .ar-h3 { margin: 0; align-self: center; }
  .ar-mais { width: 40px; height: 40px; }
  .ar-acao .wf-botao { width: 100%; }
  .ar-acao { justify-items: stretch; }
  .ar .wf-rotulo { font-size: var(--t-mini); }
}