/* 4 · co — Como funciona a consulta: uma carta numerada + P.S. */
.co{overflow:hidden}
.co-corpo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,4vw,64px);align-items:start}
.co-lado{position:relative;z-index:0}
.co-lado .wf-h2{margin-top:18px}
.co-intro{margin-top:20px;max-width:24em}
.co-foto{margin:clamp(28px,4vw,48px) calc(clamp(32px,4vw,64px) * -1 - 60px) 0 calc(var(--pad) * -1);position:relative;z-index:0}
.co-foto img{width:100%;aspect-ratio:810/834;object-fit:cover;object-position:50% 30%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 22%,#000 80%,transparent),linear-gradient(180deg,transparent,#000 20%,#000 70%,transparent);mask-composite:intersect}
.co-direita{position:relative;z-index:1;padding-top:clamp(110px,10.5vw,150px)}
.co-carta{padding:40px 48px 30px 40px}

/* o recado que chegou antes: bilhete preso na quina da carta */
.co-medo{position:absolute;z-index:2;top:0;right:clamp(-20px,-1vw,0px);width:min(400px,72%);margin:0;padding:20px 24px 16px 26px;isolation:isolate}
.co-medo-papel{position:absolute;inset:0;z-index:-1;transform:rotate(2.2deg);background:linear-gradient(160deg,#f7f0e6,#efe5d7 60%,#e9ddcc);box-shadow:0 1px 1px rgba(60,40,30,.07),0 12px 24px -12px rgba(60,40,30,.32)}
.co-medo-txt{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--tinta)}
.co-medo-txt p::before{content:"“"}.co-medo-txt p::after{content:"”"}
.co-medo figcaption{margin-top:8px;font-size:15px;font-weight:500;color:var(--tinta)}
.co-medo figcaption span{font-weight:400;color:var(--tinta-2)}
.co-carta .wf-cabeca{text-align:left;margin-bottom:22px;max-width:calc(100% - 300px)}

.co-momento{display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:20px;padding:22px 0;border-top:1px solid var(--filete)}
.co-momento:first-of-type{border-top:0;padding-top:4px}
.co-quando{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--mel);padding-top:4px;text-align:right}
.co-passos{list-style:none}
.co-passo{position:relative;padding-left:40px}
.co-passo+.co-passo{margin-top:26px}
.co-passo::before{content:counter(list-item);position:absolute;left:0;top:2px;font-family:var(--serif);font-size:15px;line-height:26px;width:26px;height:26px;text-align:center;border:1px solid color-mix(in oklab,var(--mel) 55%,transparent);border-radius:50%;color:var(--mel)}
.co-passo h3{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.6vw,23px);line-height:1.3;color:var(--tinta)}
.co-passo p{margin-top:8px;font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--tinta-2);max-width:34em}
.co-fala{font-style:italic;padding-left:14px;border-left:1px solid color-mix(in oklab,var(--tulipa) 40%,transparent)}
.co-fala q{quotes:"“" "”";color:var(--tinta)}
.co-fala cite{display:block;margin-top:2px;font-family:var(--sans);font-style:normal;font-size:15px}
/* gesto: o fio da margem se desenha de cima para baixo quando o passo assenta */
.co-passo::after{content:"";position:absolute;left:13px;top:34px;bottom:-18px;width:1px;background:color-mix(in oklab,var(--mel) 35%,transparent);transform-origin:top}
.co-passo:last-child::after{display:none}
.js .co-passo[data-rev]::after{transform:scaleY(0);transition:transform 1.4s var(--curva) .4s}
.js .co-passo[data-rev].visto::after{transform:none}

.co-abraco{margin-top:18px;padding-top:16px;border-top:1px solid var(--filete);display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--tinta)}
.co-tul{width:46px;height:42px;stroke-width:1.8;margin:0 0 4px 6px}

/* P.S. */
.co-ps{margin-top:clamp(64px,8vw,112px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,4vw,64px);align-items:start}
.co-ps-tit{font-family:var(--serif);font-size:clamp(22px,2vw,28px);line-height:1.25;color:var(--tinta);text-wrap:balance}
.co-ps-tit span{display:block;font-style:italic;color:var(--mel);font-size:1.5em;line-height:1.1}
.co-formas{margin-top:28px;border-top:1px solid var(--filete)}
.co-formas div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:13px 0;border-bottom:1px solid var(--filete)}
.co-formas dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--tinta-2);padding-top:3px}
.co-formas dd{font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--tinta)}
.co-perguntas{border-top:1px solid var(--filete)}
.co-perguntas details{border-bottom:1px solid var(--filete)}
.co-perguntas summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:58px;padding:12px 0;font-family:var(--serif);font-size:19px;color:var(--tinta)}
.co-perguntas summary::-webkit-details-marker{display:none}
.co-perguntas summary::after{content:"+";font-family:var(--sans);font-size:22px;color:var(--mel);transition:transform .3s var(--curva)}
.co-perguntas details[open] summary::after{transform:rotate(45deg)}
.co-perguntas{interpolate-size:allow-keywords}
.co-perguntas details::details-content{height:0;overflow:clip;transition:height .45s var(--curva),content-visibility .45s allow-discrete}
.co-perguntas details[open]::details-content{height:auto}
.co-perguntas details p{padding:0 0 18px;font-size:16px;line-height:1.6;color:var(--tinta-2);max-width:34em}
.co-onde{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 10px}
.co-fim{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
.co-fim p{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--tinta-2)}

@media (max-width:1100px) and (min-width:901px){
  .co-medo{width:min(360px,80%)}
  .co-carta .wf-cabeca{max-width:none;margin-top:60px}
}
@media (max-width:900px){
  .co-corpo,.co-ps{grid-template-columns:1fr}
  .co-foto{margin:24px calc(var(--pad) * -1) 0}
  .co-foto img{aspect-ratio:auto;height:340px;object-position:50% 28%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(180deg,transparent,#000 14%,#000 70%,transparent)}
  .co-direita{padding-top:0;margin-top:-34px}
  .co-medo{position:relative;top:auto;right:auto;width:auto;margin:0 6px -14px 22px}
  .co-carta{padding:30px 20px 20px 20px}
  .co-carta .wf-cabeca{max-width:none;text-align:right;margin-bottom:10px}
  .co-momento{grid-template-columns:1fr;row-gap:8px;padding:16px 0}
  .co-quando{text-align:left;padding-top:0}
  .co-passo{padding-left:36px}
  .co-passo h3{font-size:19px}
  .co-passo p{font-size:16.5px;line-height:1.55}
  .co-passo+.co-passo{margin-top:20px}
  .co-formas div{grid-template-columns:96px minmax(0,1fr);gap:12px}
  .co{padding-bottom:calc(var(--respiro) + 40px)}
}