/* ===== 5. consulta — como é a primeira consulta ===== */
.cs{background:var(--marfim)}
.cs-malha{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cs-malha i{position:absolute;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);animation:cs-deriva 34s ease-in-out infinite alternate}
.cs-malha i:nth-child(1){--c:color-mix(in oklab,var(--rosa) 55%,transparent);width:60vmax;height:60vmax;right:-22vmax;top:-18vmax}
.cs-malha i:nth-child(2){--c:color-mix(in oklab,var(--creme) 95%,transparent);width:55vmax;height:55vmax;left:-20vmax;top:30%;animation-duration:39s;animation-delay:-8s}
.cs-malha i:nth-child(3){--c:color-mix(in oklab,var(--caramelo) 26%,transparent);width:46vmax;height:46vmax;left:30vw;bottom:-24vmax;animation-duration:28s}
@keyframes cs-deriva{to{transform:translate3d(-3vw,2vh,0) scale(1.08)}}

/* topo */
.cs-topo{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:2rem clamp(2rem,1rem + 4vw,6rem);align-items:end}
.cs-tit{margin-top:1.4rem}
.cs-tit .f{max-width:11em}
.cs-intro{color:var(--texto-suave);max-width:24em;padding-bottom:.5rem}

/* os passos em escada */
.cs-passos{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(1.25rem,.5rem + 2vw,2.5rem);row-gap:clamp(3rem,2rem + 3vw,5rem);margin-top:clamp(3.5rem,2rem + 5vw,7rem)}
.cs-lista{display:contents;list-style:none}
.cs-passo{position:relative;z-index:1;isolation:isolate;padding-left:2.6rem;max-width:34rem}
.cs-p1{grid-column:1 / span 5;grid-row:1}
.cs-p2{grid-column:3 / span 5;grid-row:2}
.cs-p3{grid-column:5 / span 4;grid-row:3}
.cs-p3 .cs-ecos{position:absolute;left:calc(100% + clamp(1.25rem,.5rem + 2vw,2.5rem));top:3.4rem;width:min(22rem,30vw);margin:0;border-top:0;padding:0 0 0 1.4rem;border-left:1px solid var(--areia)}
.cs-p4{grid-column:7 / span 6;grid-row:4;margin-top:clamp(0rem,6vw,6rem)}
.cs-foto{margin:0;border-radius:var(--raio);overflow:hidden;box-shadow:var(--sombra)}
.cs-foto img{width:100%;height:100%;object-fit:cover}
.cs-foto{position:relative}
.cs-foto-escuta{grid-column:8 / span 5;grid-row:1 / span 2;align-self:start;aspect-ratio:4/5;margin-top:-2rem}
.cs-vidro{position:absolute;left:1rem;right:1rem;bottom:1rem;padding:1.1rem 1.3rem;border-radius:calc(var(--raio) - 4px);background:color-mix(in oklab,var(--marfim) 76%,transparent);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);font-family:var(--f-titulo);font-weight:300;font-size:clamp(1.25rem,1rem + .7vw,1.65rem);line-height:1.2;color:var(--cafe)}
.cs-vidro q{quotes:"“" "”"}
.cs-vidro span{display:block;margin-top:.45rem;font-family:var(--f-texto);font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.cs-leg{position:absolute;left:1rem;bottom:1rem;padding:.35rem .8rem;border-radius:99px;background:color-mix(in oklab,var(--marfim) 80%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:var(--t-mini);color:var(--texto-suave)}
.cs-foto-conforto{grid-column:1 / span 5;grid-row:4;align-self:start;margin-top:clamp(4rem,8vw,8rem);aspect-ratio:4/3}

.cs-num{position:relative;height:1.2rem;font-size:0;color:transparent}
.cs-num::after{content:attr(data-n);position:absolute;z-index:-1;left:-.06em;top:-.42em;top:-2.6rem;font-family:var(--f-titulo);font-size:clamp(6.5rem,4rem + 5.5vw,11rem);font-weight:800;letter-spacing:-.06em;line-height:1;color:color-mix(in oklab,var(--areia) 62%,transparent);pointer-events:none}
.cs-passo h3{font-family:var(--f-titulo);font-weight:800;font-size:clamp(2.2rem,1.4rem + 2.4vw,3.6rem);line-height:.95;letter-spacing:-.035em;color:var(--cafe);margin:.25rem 0 .9rem}
.cs-passo > p:not(.cs-num){color:var(--texto-suave);max-width:28em}
.cs-passo q{quotes:"“" "”";color:var(--cafe);font-weight:600}

.cs-ecos{display:grid;gap:1.1rem;margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--areia)}
.cs-ecos p,.cs-eco-medo{font-family:var(--f-titulo);font-weight:300;font-size:clamp(1.25rem,1rem + .6vw,1.55rem);line-height:1.25;color:var(--madeira)}
.cs-ecos q,.cs-eco-medo q{color:var(--madeira);font-weight:300}
.cs-ecos span,.cs-eco-medo span{display:block;margin-top:.3rem;font-family:var(--f-texto);font-size:var(--t-mini);letter-spacing:.06em;text-transform:uppercase;color:var(--texto-suave)}
.cs-eco-medo{margin-top:1.6rem;padding-top:1.3rem;border-top:1px solid var(--areia)}

/* o fio e o ponto de luz */
.cs-fio{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.cs-fio path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cs-fio-base{stroke:var(--areia);stroke-width:1.5}
.cs-fio-luz{stroke:var(--caramelo);stroke-width:2}
.cs-marca{position:absolute;left:0;top:.2rem;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:var(--marfim);border:1.5px solid var(--areia);z-index:1;transition:border-color .5s,background .5s}
.cs-passo.cs-acesa .cs-marca{border-color:var(--caramelo);background:var(--champanhe)}
.cs-ponto{position:absolute;left:0;top:0;z-index:2;width:21px;height:21px;margin:-10.5px 0 0 -10.5px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#fff 0 32%,var(--champanhe) 52%,rgba(240,220,192,0) 100%);
  box-shadow:0 0 0 1px rgba(102,70,49,.18),0 0 22px 6px rgba(157,127,95,.45);transform:translate(var(--x,0px),var(--y,0px));opacity:0;transition:opacity .6s}
.cs-ponto.on{opacity:1}

/* fecho */
.cs-fecho{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 3rem;margin-top:clamp(4rem,2.5rem + 4vw,7rem);padding-top:2rem;border-top:1px solid var(--areia)}
.cs-part{color:var(--texto-suave);max-width:30em}
.cs-part strong{display:block;font-family:var(--f-titulo);font-weight:800;font-size:clamp(1.7rem,1.2rem + 1.4vw,2.6rem);line-height:1;letter-spacing:-.03em;color:var(--cafe);margin-bottom:.5rem}
.cs-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}

@media (max-width:980px){
  .cs-topo{grid-template-columns:minmax(0,1fr)}
  .cs-p1{grid-column:1 / span 7}
  .cs-p2{grid-column:2 / span 8}
  .cs-p3{grid-column:3 / span 9}
  .cs-p3 .cs-ecos{position:static;width:auto;margin-top:1.6rem;padding:1.3rem 0 0;border-left:0;border-top:1px solid var(--areia)}
  .cs-p4{grid-column:4 / span 9;margin-top:0}
  .cs-foto-escuta{grid-column:8 / span 5;grid-row:1}
  .cs-foto-conforto{grid-column:4 / span 7;grid-row:5;justify-self:start;margin-top:0}
}
@media (max-width:640px){
  .cs-passos{grid-template-columns:minmax(0,1fr);row-gap:2.8rem}
  .cs-p1,.cs-p2,.cs-p3,.cs-p4{grid-column:1;grid-row:auto;padding-left:2.3rem}
  .cs-passo{margin-left:.5rem}
  .cs-foto-escuta{grid-column:1;grid-row:auto;width:78%;justify-self:end}
  .cs-foto-conforto{grid-column:1;grid-row:auto;margin:0 0 0 2.8rem;justify-self:start;width:calc(100% - 2.8rem)}
  .cs-foto-escuta{margin-top:0;width:86%}
  .cs-vidro{left:.7rem;right:.7rem;bottom:.7rem;padding:.9rem 1rem}
  .cs-fecho{flex-direction:column;align-items:flex-start}
}
