/* atendimento · depois do treino, papel claro */
.at-secao{
  position:relative;isolation:isolate;overflow:clip;
  background:linear-gradient(in oklab 180deg, #f4ede4 0%, #efe6da 100%);
  color:#1c1a1c;padding:var(--respiro) var(--margem);
  font-family:var(--f-texto);font-weight:300;
}
.at-fundo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.at-m{position:absolute;border-radius:50%}
.at-m1{width:70vmax;height:52vmax;right:-22vmax;top:-20vmax;opacity:.3;
  background:radial-gradient(closest-side in oklab, #c9c3cf 0%, color-mix(in oklab, #c9c3cf 0%, transparent) 100%);
  animation:at-deriva 32s ease-in-out infinite alternate}
.at-m2{width:60vmax;height:40vmax;left:-20vmax;bottom:-16vmax;opacity:.35;
  background:radial-gradient(closest-side in oklab, #f2cfb0 0%, color-mix(in oklab, #f2cfb0 0%, transparent) 100%);
  animation:at-deriva 38s ease-in-out infinite alternate-reverse}
@keyframes at-deriva{to{transform:translate(-5vmax,4vmax) scale(1.06)}}

.at-in{
  max-width:var(--conteudo);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"cab cab" "tempos tempos" "mesa acao";
  gap:0 clamp(40px,6vw,104px);
}
.at-cab{grid-area:cab;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 64px;align-items:end}
.at-cab .at-kicker{grid-column:1/-1}
.at-kicker{margin:0;font-size:14px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#4a4248;display:flex;align-items:center;gap:14px}
.at-kicker::before{content:"";width:34px;height:2px;border-radius:2px;background:#b8725a}
.at-titulo{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(44px,5.2vw,88px);line-height:.88;color:#1c1a1c}
.at-titulo span{display:block}
.at-titulo .at-t2{color:#94543f}
.at-lead{margin:0;max-width:26em;font-size:clamp(18px,1.35vw,21px);line-height:1.55;color:#1c1a1c;text-wrap:pretty}

/* três tempos numa raia de pista horizontal */
.at-tempos{grid-area:tempos;list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.at-tempo{display:block}
.at-n{
  display:flex;align-items:center;height:78px;padding-left:22px;
  font-family:var(--f-titulo);font-weight:500;font-size:58px;line-height:1;color:#fffaf3;padding-top:6px;
  background:
    linear-gradient(#fffaf3,#fffaf3) left top / 4px 100% no-repeat,
    linear-gradient(180deg, transparent 0 calc(50% - .5px), rgb(255 250 243 / .55) calc(50% - .5px) calc(50% + .5px), transparent 0),
    linear-gradient(180deg, rgb(255 250 243 / .8) 0 1px, transparent 1px calc(100% - 1px), rgb(255 250 243 / .8) 0),
    linear-gradient(180deg, #b8725a, #a8644d);
}
.at-n{position:relative;isolation:isolate;box-shadow:inset 0 -6px 12px -8px rgb(60 24 16 / .5)}
.at-n::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");border-radius:inherit}
.at-tempo:first-child .at-n{border-radius:3px 0 0 3px}
.at-tempo:last-child .at-n{border-radius:0 3px 3px 0}
.at-tempo > div{padding:26px 40px 0 0}
.at-tempo h3{margin:0 0 8px;font-family:var(--f-titulo);font-weight:500;font-size:clamp(28px,2.4vw,36px);line-height:1;color:#1c1a1c}
.at-tempo p{margin:0;font-size:18px;line-height:1.55;color:#4a4248;max-width:24em;text-wrap:pretty}

.at-acao{grid-area:acao;align-self:center;margin:clamp(64px,6vw,96px) 0 0}
.at-acao-t{margin:0;font-family:var(--f-titulo);font-weight:600;font-size:clamp(44px,4.8vw,80px);line-height:.9;color:#1c1a1c}
.at-acao-t span{display:block;color:#94543f}
.at-acao-txt{margin:18px 0 28px;font-size:clamp(18px,1.3vw,20px);line-height:1.55;color:#4a4248;max-width:24em}
.at-fone{margin:22px 0 0;font-family:var(--f-titulo);font-weight:500;font-size:30px;letter-spacing:.06em;color:#1c1a1c}
.at-end{margin:4px 0 0;font-size:16px;color:#4a4248}

/* mesa: foto + folha de protocolo por cima da parte de baixo */
.at-mesa{grid-area:mesa;position:relative;margin-top:clamp(64px,6vw,96px)}
.at-foto{ /* foto impressa, com margem de papel, debaixo da folha */
  margin:0 0 0 auto;width:84%;aspect-ratio:4/5;position:relative;
  padding:12px 12px 12px;background:#fbf7f1;border-radius:3px;rotate:1.6deg;
  box-shadow:0 1px 0 rgb(28 26 28 / .05), 0 30px 60px -30px rgb(60 40 30 / .55);
}
.at-foto img{display:block;width:100%;height:100%;border-radius:2px;object-fit:cover;object-position:50% 12%;filter:saturate(.9) contrast(1.03) sepia(.1)}
.at-foto::after{content:"";position:absolute;inset:12px;border-radius:2px;pointer-events:none;background:linear-gradient(160deg, rgb(242 207 176 / .35), rgb(201 195 207 / .15) 50%, rgb(148 84 63 / .18));mix-blend-mode:soft-light}

.at-folha{
  position:relative;z-index:2;width:78%;margin-top:-30%;
  background:#fbf7f1;border-radius:3px;padding:30px 32px 30px;
  rotate:-1.4deg;
  box-shadow:0 1px 0 rgb(28 26 28 / .05), 0 26px 50px -24px rgb(60 40 30 / .45);
}
.at-folha::before{ /* canto dobrado */
  content:"";position:absolute;right:0;top:0;width:34px;height:34px;border-radius:0 3px 0 3px;
  background:linear-gradient(225deg, #efe6da 0 50%, #e8dccd 50% 100%);
  box-shadow:-2px 2px 4px -2px rgb(60 40 30 / .25);
}
.at-folha-cab{margin:0;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--f-titulo);font-weight:500;font-size:36px;line-height:1;color:#1c1a1c}
.at-carimbo{
  font-size:18px;letter-spacing:.16em;text-transform:uppercase;color:#94543f;
  border:2px solid currentColor;outline:1px solid currentColor;outline-offset:3px;border-radius:4px;
  padding:6px 10px 3px;rotate:-7deg;margin-right:26px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='t'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23t)'/%3E%3C/svg%3E");
}
.at-folha-sub{margin:10px 0 18px;font-size:17px;line-height:1.5;color:#4a4248}
.at-lista{list-style:none;margin:0;padding:0}
.at-lista li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:start;padding:11px 0;border-top:1px dashed rgb(74 66 72 / .25);font-size:18px;line-height:1.4}
.at-lista svg{width:26px;height:26px;margin-top:-1px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.at-lista rect{stroke:rgb(74 66 72 / .45);stroke-width:1.4}
.at-lista path{stroke:#94543f;stroke-width:2.4;stroke-dasharray:20;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--curva)}
.js .at-lista path{stroke-dashoffset:20}
.js .at-lista li.on path{stroke-dashoffset:0}
.js .at-carimbo{opacity:0;scale:1.4;transition:opacity .3s ease, scale .45s cubic-bezier(.3,1.6,.5,1)}
.js .at-folha.on .at-carimbo{opacity:1;scale:1}

@media (max-width:980px){
  .at-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "tempos" "mesa" "acao"}
  .at-cab{grid-template-columns:minmax(0,1fr)}
  .at-mesa{max-width:620px;width:100%;justify-self:center}
  .at-acao{margin-top:64px}
}
@media (max-width:900px){
  /* no celular a raia fica em pé, à esquerda */
  .at-tempos{grid-template-columns:minmax(0,1fr)}
  .at-tempo{display:grid;grid-template-columns:64px minmax(0,1fr);gap:0 18px}
  .at-n{height:auto;align-items:flex-start;justify-content:center;padding:14px 0 0;font-size:48px;
    background:
      linear-gradient(#fffaf3,#fffaf3) left top / 100% 4px no-repeat,
      linear-gradient(90deg, transparent 0 calc(50% - .5px), rgb(255 250 243 / .55) calc(50% - .5px) calc(50% + .5px), transparent 0),
      linear-gradient(90deg, rgb(255 250 243 / .8) 0 1px, transparent 1px calc(100% - 1px), rgb(255 250 243 / .8) 0),
      linear-gradient(90deg, #b8725a, #a8644d);}
  .at-tempo:first-child .at-n{border-radius:3px 3px 0 0}
  .at-tempo:last-child .at-n{border-radius:0 0 3px 3px}
  .at-tempo > div{padding:16px 0 30px}
}
@media (max-width:520px){
  .at-foto{width:86%;margin-right:8px;padding:8px}
  .at-foto::after{inset:8px}
  .at-folha{width:96%;margin-top:-24%;padding:24px 20px;rotate:-1deg}
  .at-folha-cab{font-size:30px}
  .at-carimbo{font-size:15px;margin-right:18px}
  .at-lista li{font-size:17.5px}
  .at-acao .at-btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .js .at-lista path{stroke-dashoffset:0}
  .js .at-carimbo{opacity:1;scale:1}
}