/* ar · #areas — "O que ela trata": a folha de contato das cinco áreas (Dra. Mallu Cerutti v2) */

.ar { --ar-lomb: 92px; --ar-gap: 10px; --ar-pad: 10px; }

/* ---------- abertura: título à esquerda, retrato grande sangrando à direita ---------- */
.ar-abre { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; position: relative; --ar-rw: min(640px, 44vw); }
.ar-abre__texto { padding-top: clamp(8px, 2vw, 32px); position: relative; z-index: 2; }
.ar-intro { margin-top: 28px; max-width: 24em; }

.ar-retrato {
  margin: 0; position: relative; z-index: 0; width: var(--ar-rw);
  margin-top: clamp(-40px, -2vw, -10px);
  margin-bottom: calc(var(--ar-rw) * -0.75);
}
.ar-retrato::before { top: 34%; width: 150%; }
.ar-retrato::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 30%; width: 92%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 1px solid color-mix(in oklab, #fff 70%, transparent); box-shadow: 0 0 0 18px color-mix(in oklab, #fff 14%, transparent); pointer-events: none; }
.ar-retrato img { display: block; width: 100%; height: auto; }
.ar-retrato__rec { position: absolute; left: -6px; top: 8%; writing-mode: vertical-rl; rotate: 180deg; translate: -100% 0; white-space: nowrap; }
.ar-retrato__rec::before { margin-bottom: 4px; }

/* ---------- a folha de contato: papel pétala, opaco, onde o retrato afunda ---------- */
.ar-folha {
  position: relative; z-index: 2; margin-top: 0;
  padding: 52px var(--ar-pad) var(--ar-pad);
  border-radius: 4px;
  background:
    linear-gradient(180deg in oklab, #fff7f9 0%, var(--petala) 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .8), 0 50px 90px -50px rgba(90, 15, 39, .6), 0 2px 6px -2px rgba(90, 15, 39, .18);
}
.ar-folha::before { content: ""; position: absolute; right: 18px; top: 19px; width: min(46%, 520px); height: 12px; background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--rosa-medio) 55%, transparent) 0 14px, transparent 14px 26px); -webkit-mask: linear-gradient(90deg, transparent, #000 18%); mask: linear-gradient(90deg, transparent, #000 18%); border-radius: 2px; }
.ar-folha__cont { position: absolute; left: 20px; top: 17px; margin: 0; font-variant-numeric: tabular-nums; }
.ar-folha__cont b { font-weight: 500; color: var(--magenta); margin-left: .5em; }

.ar-item { position: relative; border: 1px solid color-mix(in oklab, var(--vinho) 16%, transparent); border-radius: 3px; background: radial-gradient(120% 90% at 50% 20% in oklab, #fff3f5, var(--cha-claro)); }
.ar-item + .ar-item { margin-top: var(--ar-gap); }
.ar-cab { margin: 0; font: inherit; }
.ar-botao {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px;
  width: 100%; min-height: 72px; padding: 14px 18px 14px 20px; color: var(--tinta);
}
.ar-botao:focus-visible { outline: 2px solid var(--magenta); outline-offset: -4px; }
.ar-n { font-family: var(--f-titulo); font-weight: 300; font-size: 44px; line-height: 1; color: var(--framboesa); }
.ar-nome { font-family: var(--f-titulo); font-weight: 500; font-size: 25px; line-height: 1.08; }
.ar-nome i { font-style: normal; font-weight: 300; }
.ar-mais { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--framboesa) 50%, transparent); }
.ar-mais::before, .ar-mais::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: var(--framboesa); translate: -50% -50%; transition: rotate .5s var(--ease); }
.ar-mais::after { rotate: 90deg; }
.ar-item.is-aberta .ar-mais::after { rotate: 0deg; }
.ar-item.is-aberta { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 24px 40px -28px rgba(90, 15, 39, .6); background: linear-gradient(180deg in oklab, #fffafb, #fff1f4); }
.ar-item.is-aberta .ar-n { color: var(--magenta); }

/* painel aberto */
.ar-painel { position: relative; padding: 4px 22px 26px; }
.ar-painel__topo { position: relative; }
.ar-grande { display: none; }
.ar-rotulo { display: none; }
.ar-linha { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-suave); max-width: 36em; }
.ar-frase { margin-top: 22px; }
.ar-frase blockquote { font-size: clamp(22px, 1rem + .9vw, 30px); text-wrap: pretty; }
.ar-trechos { margin-top: 18px; display: grid; gap: 14px; }
.ar-trechos p { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta); max-width: 36em; padding-left: 18px; border-left: 1px solid color-mix(in oklab, var(--magenta) 45%, transparent); }
.ar-pe { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 22px; }
.ar-pe .wf-fonte { margin: 0; letter-spacing: .16em; }
.ar-pe__assina { display: flex; flex-direction: column; gap: 4px; }
.ar-pe .wf-assinatura { font-size: 40px; margin: 6px 0 0 -2px; }

/* com JS: só a área aberta mostra o painel */
.js .ar-item:not(.is-aberta) .ar-painel { display: none; }
/* flash de estúdio ao abrir */
.ar-painel::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(80% 80% at 40% 35% in oklab, #fffafb 0%, #fde9ee 70%, #f9d8e0 100%); opacity: 0; }
.ar-painel.ar-flash::after { animation: ar-flash 1.1s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes ar-flash { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }

/* ---------- computador: os quadros lado a lado, o aberto se alarga ---------- */
@media (min-width: 1180px) {
  .ar { --ar-lomb: 96px; }
  .js .ar-folha { display: flex; gap: var(--ar-gap); height: calc(var(--ar-h, 640px) + 52px + var(--ar-pad)); }
  .js .ar-item { flex: 0 0 var(--ar-lomb); min-width: 0; margin: 0; overflow: hidden; transition: flex-basis .9s var(--ease), border-color .4s ease, box-shadow .4s ease; }
  .js .ar-item.is-aberta { flex-basis: calc(var(--ar-lomb) + var(--ar-pw, 700px)); }
  .js .ar-cab { position: absolute; inset: 0 auto 0 0; width: calc(var(--ar-lomb) - 2px); z-index: 2; }
  .js .ar-botao { height: 100%; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; justify-items: center; align-items: start; gap: 16px; padding: 22px 0 18px; }
  .js .ar-n { font-size: 46px; }
  .js .ar-nome { writing-mode: vertical-rl; rotate: 180deg; align-self: end; white-space: nowrap; font-family: var(--f-texto); font-weight: 500; font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); }
  .js .ar-nome i { display: none; }
  .js .ar-item.is-aberta .ar-nome { color: var(--magenta); }
  .js .ar-item:not(.is-aberta) .ar-botao:hover { background: color-mix(in oklab, #fff 45%, transparent); }
  .js .ar-item.is-aberta .ar-cab { border-right: 1px solid color-mix(in oklab, var(--magenta) 28%, transparent); }
  .js .ar-item.is-aberta .ar-cab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--magenta); }
  .js .ar-folha .ar-item .ar-painel { display: block; position: absolute; top: 0; left: var(--ar-lomb); width: calc(var(--ar-pw, 700px) - 2px); min-height: 100%; padding: 40px 52px 38px 48px; visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
  .js .ar-item.is-aberta .ar-painel { visibility: visible; opacity: 1; transition: opacity .5s ease .3s, visibility 0s; }
  .js .ar-folha .ar-item.is-aberta .ar-painel { display: flex; flex-direction: column; }
  .js .ar-pe { margin-top: auto; padding-top: 26px; align-items: flex-end; }
  .js .ar-painel__topo { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 34px; align-items: start; }
  .js .ar-grande { display: block; font-family: var(--f-titulo); font-weight: 300; font-size: 188px; line-height: .74; letter-spacing: -.02em; color: var(--magenta); margin-top: 6px; }
  .js .ar-rotulo { display: block; margin: 0 0 14px; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(40px, 1rem + 2.2vw, 58px); line-height: .98; color: var(--tinta); text-wrap: balance; }
  .js .ar-linha { max-width: 30em; }
  .js .ar-frase { margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--linha); }
  .js .ar-trechos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 30px; margin-top: 24px; }
}

@media (max-width: 760px) {
  .ar-abre { grid-template-columns: 1fr; --ar-rw: min(330px, 84vw); }
  .ar-retrato { justify-self: center; margin-top: 54px; }
  .ar-folha { margin-inline: -20px; padding: 48px 8px 8px; border-radius: 0; }
  .ar-botao { gap: 12px; padding: 12px 12px 12px 14px; min-height: 64px; }
  .ar-n { font-size: 40px; min-width: 1.5em; }
  .ar-nome { font-size: 22px; }
  .ar-retrato__rec { writing-mode: horizontal-tb; rotate: none; translate: none; left: 0; top: -30px; }
  .ar-painel { padding: 0 14px 20px; }
  .ar-pe { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  .ar-abre { --ar-rw: min(440px, 42vw); }
  .ar-painel { padding: 0 26px 28px 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-item, .ar-painel, .ar-mais::before, .ar-mais::after { transition: none !important; }
  .ar-painel.ar-flash::after { animation: none; }
}

/* quadro estreito (1180–1360): o número abre a página por cima do nome, trechos numa coluna */
@media (min-width: 1180px) and (max-width: 1359px) {
  .js .ar-painel__topo { grid-template-columns: 1fr; }
  .js .ar-grande { font-size: 132px; margin: 0 0 18px; }
  .js .ar-trechos { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1179px) {
  .ar-retrato__rec { writing-mode: horizontal-tb; rotate: none; translate: none; left: 0; top: -30px; }
}