/* ===== at · Capítulo 3 · Do que a gente pode conversar ===== */
.at-malha{background:
  radial-gradient(circle at 10% 8% in oklab, #f4e4b8 0%, transparent 44%),
  radial-gradient(circle at 92% 22% in oklab, #f1d3dc 0%, transparent 42%),
  radial-gradient(circle at 78% 92% in oklab, #f2e2bd 0%, transparent 44%),
  radial-gradient(circle at 12% 78% in oklab, #ddd8e2 0%, transparent 46%),
  var(--papel)}

/* abertura: o título e um recordatório de narração */
.at-cap{margin-bottom:clamp(30px,4vw,54px)}
.at-cap-l{display:flex;flex-direction:column;gap:18px;align-self:stretch}
.at-abre{font-size:16px;max-width:27em;align-self:flex-start}

.at-pag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g)}
.at-topo,.at-lin-c,.at-pil,.at-fim{display:contents}
.at-sec .pn-in{container-type:inline-size}
.at-q{grid-column:1/-1;margin-top:0}

/* conteúdo do requadro */
.at-c{position:relative;height:100%;padding:34px 20px 20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* o nome do assunto vai numa etiqueta presa ao traço de cima, como as do hero */
.at-r{position:absolute;left:calc(var(--lt) + 10px);top:calc(var(--tl) - 14px);margin:0;white-space:nowrap}
.at-q h3{font-family:var(--f-titulo);font-weight:400;font-size:clamp(1.6rem,7.6cqw,2.3rem);line-height:1.05;letter-spacing:-.012em;text-wrap:balance}
.at-q h3 em{font-style:normal;color:var(--pink)}
.at-p{font-size:16px;line-height:1.48;color:var(--tinta-suave);max-width:29em}
/* legenda do requadro: os nomes, em letra de gibi, sob um fio de tinta */
.at-l{display:flex;flex-wrap:wrap;gap:5px 16px;margin-top:auto;padding-top:12px;border-top:2px solid var(--tinta);align-self:stretch;
  font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:13.5px;line-height:1.25}
.at-l li{display:flex;align-items:baseline;gap:7px}
.at-l li::before{content:"";flex:none;width:7px;height:7px;background:var(--pink);border:1.5px solid var(--tinta);transform:translateY(-1px) rotate(45deg)}

/* ela */
.at-foto{order:-1;aspect-ratio:1/1.08;--tr:9px;--bl:8px;margin-bottom:22px}
.at-foto .pn-in{background:#a8a2a8}
.at-fundo{position:absolute;inset:-10%;background:
  radial-gradient(circle at 20% 16% in oklab, #dcd6cf 0%, transparent 52%),
  radial-gradient(circle at 86% 28% in oklab, #b8b0c4 0%, transparent 50%),
  radial-gradient(circle at 16% 84% in oklab, #e2b7c6 0%, transparent 48%),
  #a8a2a8}
.at-foto .ret{--ret-o:.24;--ret-t:7px;--ret-g:linear-gradient(118deg,#000 0%,#555 30%,#fff 60%)}
.at-foto img{position:absolute;left:50%;top:0;width:96cqw;max-width:none;transform:translate(-50%,-19%)}
.at-quem{position:absolute;left:-7px;right:26px;bottom:-18px;font-size:15px;pointer-events:auto}

/* ansiedade: linhas de foco */
.at-ans .pn-in{background:
  radial-gradient(circle at 96% 8% in oklab, #f6d9a0 0%, transparent 52%),
  radial-gradient(circle at 0% 100% in oklab, #f3e7c8 0%, transparent 55%),
  var(--papel-claro)}
.at-raios{position:absolute;inset:0;opacity:.36;
  background:repeating-conic-gradient(from 3deg at 94% 10%, var(--tinta) 0 .55deg, transparent .55deg 4.6deg);
  -webkit-mask:radial-gradient(circle at 94% 10%, transparent 0 12%, #000 13%, transparent 60%);
          mask:radial-gradient(circle at 94% 10%, transparent 0 12%, #000 13%, transparent 60%)}

/* humor: o requadro partido em dois, o pesado em cima e o acelerado embaixo */
.at-hum{color:var(--papel)}
.at-hum .pn-in{background:
  linear-gradient(170deg, transparent 0 calc(50% - 2px), var(--tinta) calc(50% - 2px) calc(50% + 2px), #e9e5ee calc(50% + 2px)),
  radial-gradient(circle at 100% 0% in oklab, #45283c 0%, transparent 60%),
  radial-gradient(circle at 0% 40% in oklab, #2d2738 0%, transparent 58%),
  var(--tinta)}
.at-hum .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(200deg,#000 0%,#777 14%,#fff 34%)}
.at-vel{position:absolute;left:0;right:0;bottom:0;height:42%;opacity:.5;
  background:repeating-linear-gradient(170deg, transparent 0 8px, var(--tinta) 8px 9.4px, transparent 9.4px 21px);
  -webkit-mask:linear-gradient(to left,#000 0%,transparent 62%);mask:linear-gradient(to left,#000 0%,transparent 62%)}
.at-hum h3{display:contents}
.at-hum h3 span{display:block;font-family:var(--f-titulo);font-size:clamp(1.45rem,12.4cqw,2.3rem);line-height:1.05;letter-spacing:-.012em}
.at-hum-1 em{color:#ff6ea6!important}
.at-hum-2{margin-top:auto;color:var(--tinta)}
.at-hum .at-l{margin-top:0;color:var(--tinta);flex-direction:column}
.at-hum .at-c{min-height:350px}

.at-inf .pn-in{background:
  radial-gradient(circle at 100% 0% in oklab, #f1dca6 0%, transparent 58%),
  radial-gradient(circle at 0% 100% in oklab, #f6dbe3 0%, transparent 52%),
  var(--papel-claro)}
.at-inf .ret{--ret-o:.24;--ret-t:11px;--ret-g:linear-gradient(210deg,#000 0%,#777 16%,#fff 40%)}

/* atenção: as estrelas escapam do requadro */
.at-ate .pn-in{background:
  radial-gradient(circle at 0% 100% in oklab, #efc6d2 0%, transparent 64%),
  var(--papel-claro)}
.at-ate .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(40deg,#000 0%,#777 16%,#fff 40%)}
.at-est{position:absolute;fill:var(--mel);stroke:var(--tinta);stroke-width:1.7;stroke-linejoin:round;overflow:visible;
  transition:transform .9s var(--pop),opacity .4s;transition-delay:calc(var(--d,0s) + .45s)}
.at-est-1{width:34px;height:34px;right:-12px;top:-17px;rotate:14deg}
.at-est-2{width:19px;height:19px;right:32px;top:5px;rotate:-10deg;stroke-width:2.2}
.at-est-3{width:13px;height:13px;right:10px;top:27px;stroke-width:2.6}
.at-ate[data-entra]:not(.visto) .at-est{opacity:0;transform:translate(-46px,40px) scale(.4) rotate(-50deg)}

/* laudo: papel timbrado e carimbo */
.at-lau .pn-in{background:
  repeating-linear-gradient(0deg, transparent 0 25px, rgba(23,19,26,.09) 25px 26px),
  var(--mel-claro)}
.at-carimbo{position:absolute;right:8px;bottom:9px;width:50px;height:50px;rotate:-14deg;fill:none;stroke:var(--pink-sombra);stroke-width:2.6;opacity:.8}
.at-carimbo circle+circle{stroke-width:1.2}
.at-carimbo path{fill:var(--pink-sombra);stroke:none}

/* dependências: o nó que vira fio */
.at-dep .pn-in{background:
  radial-gradient(circle at 100% 0% in oklab, #cfc9d8 0%, transparent 60%),
  radial-gradient(circle at 0% 100% in oklab, #ebe7ef 0%, transparent 50%),
  var(--papel-claro)}
.at-dep .ret{--ret-o:.22;--ret-t:7px;--ret-g:linear-gradient(230deg,#000 0%,#777 16%,#fff 38%)}
.at-no,.at-etq{flex:1 1 52px;min-height:52px;max-height:128px;width:100%;overflow:visible}
.at-no path{fill:none;stroke:var(--tinta);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset 1.5s var(--ease);transition-delay:calc(var(--d,0s) + .5s)}
.at-dep[data-entra]:not(.visto) .at-no path{stroke-dashoffset:1}

/* personalidade e psicoses: a etiqueta em branco */
.at-per .pn-in{background:
  radial-gradient(circle at 0% 0% in oklab, #efc6d2 0%, transparent 56%),
  radial-gradient(circle at 100% 100% in oklab, #f4e4b8 0%, transparent 55%),
  var(--papel-claro)}
.at-per .ret{--ret-o:.2;--ret-t:7px;--ret-g:linear-gradient(130deg,#000 0%,#777 14%,#fff 34%)}
.at-etq{rotate:-5deg;transform-origin:80% 50%;transition:rotate .9s var(--pop);transition-delay:calc(var(--d,0s) + .5s)}
.at-per[data-entra]:not(.visto) .at-etq{rotate:9deg}
.at-etq-s{fill:var(--tinta)}
.at-etq-f{fill:var(--papel-claro);stroke:var(--tinta);stroke-width:3;stroke-linejoin:round}
.at-etq circle{fill:var(--rosado);stroke:var(--tinta);stroke-width:2.6}
.at-etq-l{fill:none;stroke:var(--tinta);stroke-width:2.4;stroke-linecap:round}
.at-etq-t{fill:none;stroke:var(--parede);stroke-width:3;stroke-linecap:round;stroke-dasharray:1 7}

.sem-js .at-est,.sem-js .at-etq{opacity:1!important;transform:none!important}
.sem-js .at-no path{stroke-dashoffset:0!important}

/* momentos de risco: requadro em tinta, sóbrio; o aviso é uma coluna de papel */
.at-ris{color:var(--papel)}
.at-ris .pn-in{background:
  radial-gradient(circle at 60% 0% in oklab, #45283c 0%, transparent 56%),
  radial-gradient(circle at 0% 100% in oklab, #2d2738 0%, transparent 58%),
  var(--tinta)}
.at-ris .ret{--ret-o:.14;--ret-t:7px;--ret-g:linear-gradient(40deg,#000 0%,#777 10%,#fff 26%)}
.at-ris-g{position:relative;display:grid;grid-template-columns:minmax(0,1fr)}
.at-ris h3 em{color:#ff6ea6}
.at-ris .at-p{color:#ddd5db}
.at-ris .at-c{padding-bottom:30px}
.at-crise{position:relative;background:var(--papel-claro);color:var(--tinta);padding:36px 20px 24px;clip-path:polygon(0 14px,100% 0,100% 100%,0 100%)}
.at-crise-t{font-family:var(--f-titulo);font-size:25px;line-height:1.1}
.at-crise-p{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px;margin-top:14px}
.at-crise-v{font-family:var(--f-balao);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:14px}
.at-crise a{display:flex;align-items:baseline;gap:10px;min-height:58px;padding:11px 16px 7px;border:3px solid var(--tinta);text-decoration:none;background:#fff;box-shadow:4px 4px 0 var(--tinta);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.at-crise a b{font-family:var(--f-titulo);font-weight:400;font-size:36px;line-height:1}
.at-crise a span{font-size:15.5px;font-weight:500;color:var(--tinta-suave)}
.at-crise a:hover,.at-crise a:focus-visible{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.at-crise :focus-visible{outline-color:var(--tinta)}

/* fim da página: o olhar dela e a chamada */
.at-olhar{aspect-ratio:354/128}
.at-olhar .pn-in{background:var(--parede)}
.at-olhar img{position:absolute;left:-7cqw;top:50%;width:124cqw;max-width:none;transform:translateY(-88cqw)}
.at-cta .pn-in{background:
  radial-gradient(circle at 12% 0% in oklab, #de3a78 0%, transparent 55%),
  radial-gradient(circle at 96% 100% in oklab, #9c1848 0%, transparent 56%),
  var(--pink)}
.at-cta .ret{--ret-o:.22;--ret-t:7px;--ret-g:linear-gradient(140deg,#000 0%,#777 18%,#fff 40%)}
.at-cta-c{position:relative;height:100%;padding:22px 20px 26px;color:#fff;display:flex;flex-direction:column;gap:18px}
.at-cta-t{font-family:var(--f-titulo);font-size:clamp(1.35rem,2.3vw,1.85rem);line-height:1.14;text-wrap:balance}
.at-cta-s{font-size:14.5px;margin-top:6px}
.at-cta :focus-visible{outline-color:var(--tinta)}

/* celular: o requadro alto do humor ao lado de dois pequenos empilhados */
.at-hum,.at-ate,.at-lau{grid-column:auto}
.at-hum{grid-row:span 2}
.at-ans{order:1}.at-inf{order:2}.at-hum{order:3}.at-ate{order:4}.at-lau{order:5}.at-dep{order:6}.at-per{order:7}.at-ris{order:8}.at-olhar{order:9}.at-cta{order:10}
.at-hum .at-c,.at-ate .at-c,.at-lau .at-c{padding:32px 14px 16px}
.at-ate h3,.at-lau h3{font-size:clamp(1.25rem,13cqw,1.6rem)}
.at-ate .at-l,.at-lau .at-l{flex-direction:column}
.at-ate .at-l,.at-hum .at-l{font-size:12.5px}
.at-lau .at-p{font-size:14.5px}
.at-ans{--tl:6px;--br:8px}
.at-inf{--tl:8px;--bl:7px;margin-top:-4px}
.at-hum{--tr:8px;--rb:12px;margin-top:2px}
.at-ate{--tl:8px;--lb:12px;margin-left:-12px;margin-top:2px}
.at-ate .at-c{padding-left:24px}
.at-ate .at-r{left:calc(var(--lt) + 16px)}
.at-lau{--br:7px;margin-top:4px}
.at-dep{--tl:7px;--tr:0px;--br:8px;margin-top:4px}
.at-per{--tl:8px;--bl:7px}
.at-ris{--tr:9px;--bl:7px;margin-top:4px}
.at-olhar{--tl:7px;--br:8px;margin-top:-7px}
.at-cta{--tl:8px;--br:8px;margin-top:-8px}

@media (min-width:600px) and (max-width:999px){
  .at-pag{max-width:640px;margin:0 auto}
  .at-foto{aspect-ratio:1/.9}
}

/* ================= desktop: a página montada ================= */
@media (min-width:1000px){
  .at-cap-l{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:48px}
  .at-cap h2{flex:none;max-width:11em}
  .at-abre{align-self:flex-end;max-width:21.5em;font-size:17px;padding:16px 20px 15px;rotate:1.3deg;margin:0 6px 12px 0}

  .at-pag{display:flex;flex-direction:column}
  .at-q{order:0!important;margin:0;grid-column:auto}
  .at-topo{display:grid;gap:var(--g);grid-template-columns:minmax(0,33fr) minmax(0,42fr) minmax(0,25fr);grid-template-rows:auto auto;
    grid-template-areas:"foto ans hum" "foto inf hum"}
  .at-foto{grid-area:foto}.at-ans{grid-area:ans}.at-hum{grid-area:hum}.at-inf{grid-area:inf}
  .at-lin-c{display:grid;gap:var(--g);grid-template-columns:minmax(0,24fr) minmax(0,33fr) minmax(0,43fr);margin-top:2px}
  .at-pil{display:flex;flex-direction:column;gap:calc(var(--g) + 6px);min-width:0}
  .at-pil .at-q{flex:1}
  .at-fim{display:grid;gap:var(--g);grid-template-columns:minmax(0,31fr) minmax(0,69fr);margin-top:-8px}

  .at-c{padding:44px 34px 26px;gap:12px}
  .at-r{left:calc(var(--lt) + 22px);top:calc(var(--tl) - 15px);font-size:13px}
  .at-q h3{font-size:clamp(1.8rem,7.2cqw,2.7rem)}
  .at-l{font-size:14px}

  .at-foto{aspect-ratio:auto;margin:0;--tl:9px;--tr:0px;--rb:20px;--bl:0px;--br:9px}
  .at-foto img{width:max(114cqw,430px);top:auto;bottom:0;transform:translate(-50%,4%)}
  .at-quem{left:-13px;right:46px;bottom:30px;font-size:16px;padding:14px 18px 13px}

  .at-ans{margin-left:-10px;--lt:10px;--tl:0px;--tr:7px;--rb:9px;--bl:0px;--br:10px}
  .at-ans .at-c{padding:44px 46px 26px 42px;min-height:300px}
  .at-inf{margin-left:-20px;margin-top:-2px;--lt:10px;--tl:10px;--tr:0px;--rt:9px;--rb:18px;--bl:9px;--br:9px}
  .at-inf .at-c{padding:52px 56px 34px 44px;min-height:300px}
  .at-hum{margin-left:-18px;--lt:18px;--tl:7px;--tr:0px;--rb:0px;--bl:9px;--br:9px}
  .at-hum .at-c{padding:50px 28px 28px 42px}
  .at-hum h3 span{font-size:clamp(1.7rem,12.6cqw,2.5rem)}
  .at-hum .at-l{font-size:14px}

  .at-ate{--tl:9px;--tr:5px;--lb:0px;--rb:8px;margin:0}
  .at-ate .at-r{left:calc(var(--lt) + 22px)}
  .at-lau{--rt:8px;--rb:16px;--br:0px}
  .at-ate .at-c,.at-lau .at-c{padding:40px 34px 22px 28px}
  .at-ate h3,.at-lau h3{font-size:clamp(1.45rem,9.6cqw,1.9rem)}
  .at-ate .at-l{font-size:13.5px}
  .at-lau .at-p{font-size:15.5px;padding-right:62px}
  .at-est-1{width:44px;height:44px;right:-16px;top:-20px}
  .at-est-2{width:24px;height:24px;right:44px;top:12px}
  .at-est-3{width:15px;height:15px;right:20px;top:42px}
  .at-carimbo{width:60px;height:60px;right:26px;bottom:12px}
  .at-dep{margin-left:-16px;--lt:16px;--tl:5px;--tr:0px;--br:10px;--rb:14px}
  .at-dep .at-c{padding:48px 44px 28px 44px}
  .at-per{margin:0 0 0 -14px;--lt:14px;--tl:0px;--tr:7px;--bl:10px;--br:0px}
  .at-per .at-c{padding:48px 38px 28px 48px}

  .at-ris{--tl:0px;--tr:10px;--bl:8px;--br:0px;margin-top:2px}
  .at-ris-g{grid-template-columns:minmax(0,56fr) minmax(0,44fr);align-items:stretch}
  .at-ris .at-c{padding:60px 44px 50px 48px;justify-content:center}
  .at-ris h3{font-size:clamp(2.1rem,4.6cqw,3.3rem)}
  .at-ris .at-p{font-size:17.5px;max-width:31em}
  .at-crise{padding:40px 48px 40px 74px;clip-path:polygon(34px 0,100% 0,100% 100%,0 100%);display:flex;flex-direction:column;justify-content:center}
  .at-crise-t{font-size:30px}
  .at-crise-p{margin-top:18px;gap:12px 14px}
  .at-crise a b{font-size:40px}
  .at-crise a span{font-size:16.5px}

  .at-olhar{aspect-ratio:auto;min-height:196px;--tl:8px;--tr:0px;--rb:20px;--bl:0px;--br:0px}
  .at-olhar img{left:-12cqw;width:150cqw;transform:translateY(-110cqw)}
  .at-cta{margin-left:-20px;--lt:20px;--tl:0px;--tr:0px;--bl:0px;--br:9px}
  .at-cta-c{flex-direction:row;align-items:center;justify-content:space-between;padding:30px 44px 30px 62px;gap:30px}
  .at-cta .bt{flex:none}
}