/* ---------- contato · noite ---------- */
.ct-secao{
  position:relative;overflow:clip;isolation:isolate;
  background:linear-gradient(180deg in oklab, #2b2534 0%, #231e2a 34%, #1c1922 66%, #16141a 100%);
  color:var(--creme);font-family:var(--f-texto);font-weight:300;
  padding:clamp(110px,10vw,160px) var(--margem) 0;
}
/* céu: lavanda funda no alto, um resto de pêssego no horizonte, a luz do ponto */
.ct-ceu{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(closest-side, rgb(242 207 176 / .20), rgb(242 207 176 / .06) 55%, transparent) 33% calc(100% - 13vw) / 64vw 34vw no-repeat,
    radial-gradient(closest-side, rgb(201 148 79 / .10), transparent) 70% 100% / 120vw 22vw no-repeat,
    radial-gradient(closest-side, rgb(46 40 56 / .95), transparent) 12% 0% / 90vw 46vw no-repeat;
}
/* o horizonte do hero, agora à noite: serra baixa com um fio de pêssego */
.ct-serra{position:absolute;left:0;right:0;bottom:0;width:100%;height:27vw;z-index:-1;pointer-events:none}
.ct-serra-fundo{fill:url(#ct-chao)}
.ct-serra-luz{fill:none;stroke:rgb(242 207 176 / .22);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ct-in{
  max-width:var(--conteudo);margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  grid-template-areas:"texto fig";
  column-gap:clamp(24px,4vw,64px);align-items:end;
}
.ct-texto{grid-area:texto;align-self:start;position:relative;z-index:3;padding-bottom:calc(20.2vw + 64px)}
.ct-rotulo{
  margin:0 0 22px;display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--creme-2);
}
.ct-rotulo::before{content:"";width:34px;height:2px;border-radius:2px;background:var(--ouro)}
.ct-titulo{
  margin:0;font-family:var(--f-titulo);font-weight:600;
  font-size:clamp(48px,6.1vw,104px);line-height:.88;letter-spacing:-.005em;
}
.ct-l{display:block;overflow:hidden;padding:.12em 0 .06em;margin:-.12em 0 -.06em}
.ct-l > span{display:block}
.ct-nw{white-space:nowrap}
.ct-l1{color:var(--creme)}
.ct-l2{color:var(--pessego)}
.ct-cep{margin:20px 0 0;font-family:var(--f-titulo);font-weight:500;font-size:24px;letter-spacing:.08em;color:var(--creme-2)}
.ct-apoio{margin:24px 0 0;max-width:30em;font-size:19px;line-height:1.55;color:#ddd3d2}
.ct-acoes{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.ct-btn-wa{background:var(--pessego);color:var(--grafite);font-weight:400;box-shadow:0 14px 34px -14px rgb(242 207 176 / .45)}
.ct-btn-wa:hover,.ct-btn-wa:focus-visible{transform:translateY(-2px);background:#f7dcc3}
.ct-btn-mapa{color:var(--creme);border:1px solid rgb(246 236 225 / .34)}
.ct-btn-mapa:hover,.ct-btn-mapa:focus-visible{background:rgb(246 236 225 / .08);border-color:var(--pessego)}
.ct-acoes .btn:focus-visible,.ct-insta a:focus-visible{outline:2px solid var(--pessego);outline-offset:3px}
.ct-insta{margin:22px 0 0;font-size:18px}
.ct-insta a{color:var(--creme);text-decoration:none;border-bottom:1px solid rgb(242 207 176 / .4);padding-bottom:2px}
.ct-insta a span{color:var(--pessego)}
.ct-insta a:hover{border-color:var(--pessego)}

/* figura: ela, grande, na luz do ponto */
.ct-figura{grid-area:fig;margin:0 calc(-1 * var(--margem)) 0 0;position:relative;z-index:1;align-self:end}
.ct-figura img{
  display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg, #000 66%, rgb(0 0 0 / .4) 82%, transparent 94%);
  mask-image:linear-gradient(180deg, #000 66%, rgb(0 0 0 / .4) 82%, transparent 94%);
}

/* mapa: a última curva, desenhada */
.ct-mapa{position:absolute;left:0;right:0;bottom:0;aspect-ratio:1440/440;z-index:2;pointer-events:none}
.ct-pista{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ct-cel{display:none}
.ct-p{fill:none;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:1000 1000;stroke-dashoffset:0}
.ct-p1,.ct-p3,.ct-p5{stroke:#fffaf3}
.ct-p2,.ct-p4{stroke:#94543f}
.ct-larga .ct-p1{stroke-width:100;opacity:.92}
.ct-larga .ct-p2{stroke-width:96}
.ct-larga .ct-p3{stroke-width:50;opacity:.6}
.ct-larga .ct-p4{stroke-width:46}
.ct-larga .ct-p5{stroke-width:2.5;opacity:.55}
.ct-cel .ct-p1{stroke-width:56;opacity:.92}
.ct-cel .ct-p2{stroke-width:52}
.ct-cel .ct-p3{stroke-width:28;opacity:.6}
.ct-cel .ct-p4{stroke-width:24}
.ct-cel .ct-p5{stroke-width:1.6;opacity:.55}
.ct-marcas{fill:none;stroke:#fffaf3;stroke-width:2.5;opacity:.75}
.ct-cel .ct-marcas{stroke-width:1.6}
.ct-anel{fill:none;stroke:rgb(255 244 228 / .55);stroke-width:1.5}
.ct-nucleo{fill:#fff8ee}
.ct-fio{stroke:var(--ouro);stroke-width:1.5;fill:none;stroke-dasharray:1000;stroke-dashoffset:0}
.ct-halo,.ct-anel{transform-box:fill-box;transform-origin:center}
.ct-placa{
  position:absolute;margin:0;right:calc(66.8% + 30px);top:34.1%;transform:translateY(-50%);
  font-family:var(--f-titulo);font-weight:500;font-size:clamp(20px,1.75vw,26px);letter-spacing:.06em;white-space:nowrap;color:var(--creme);
  display:flex;align-items:center;gap:12px;
}
.ct-placa::after{content:"";width:22px;height:1.5px;background:var(--ouro)}

/* gesto: a curva se desenha até o ponto; o ponto pulsa devagar */
.js .ct-l > span{transform:translateY(105%)}
.js .ct-titulo.ct-tit-on .ct-l > span{transform:none;transition:transform 1.05s var(--curva)}
.js .ct-titulo.ct-tit-on .ct-l + .ct-l > span{transition-delay:.12s}
.js .ct-p{stroke-dashoffset:1000}
.js .ct-fio{stroke-dashoffset:1000}
.js .ct-ponto,.js .ct-marcas{opacity:0}
.js .ct-placa{opacity:0}
.js .ct-secao.ct-on .ct-p{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--curva) .15s}
.js .ct-secao.ct-on .ct-ponto{opacity:1;transition:opacity .9s ease 1.8s}
.js .ct-secao.ct-on .ct-marcas{opacity:.75;transition:opacity .8s ease .9s}
.js .ct-secao.ct-on .ct-fio{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--curva) 2.1s}
.js .ct-secao.ct-on .ct-placa{opacity:1;transition:opacity .9s ease 2.2s}
.ct-secao.ct-on .ct-halo{animation:ct-pulso 4.2s ease-in-out 2.6s infinite}
.ct-secao.ct-on .ct-anel{animation:ct-anel 4.2s ease-out 2.6s infinite}
.ct-secao.ct-pausa .ct-halo,.ct-secao.ct-pausa .ct-anel{animation-play-state:paused}
@keyframes ct-pulso{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.18);opacity:.7}}
@keyframes ct-anel{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(3.2);opacity:0}}

@media (max-width:1100px) and (min-width:901px){
  .ct-apoio{font-size:18px}
  .ct-btn-wa span{white-space:nowrap}
}

@media (max-width:900px){
  .ct-secao{padding-top:clamp(84px,18vw,120px)}
  /* o horizonte do hero, agora à noite: serra baixa com um fio de pêssego */
.ct-serra{position:absolute;left:0;right:0;bottom:0;width:100%;height:27vw;z-index:-1;pointer-events:none}
.ct-serra-fundo{fill:url(#ct-chao)}
.ct-serra-luz{fill:none;stroke:rgb(242 207 176 / .22);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ct-in{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "fig"}
  .ct-texto{padding-bottom:0}
  .ct-titulo{font-size:clamp(44px,12.6vw,72px)}
  .ct-cep{font-size:21px}
  .ct-apoio{font-size:18px}
  .ct-acoes .btn{flex:1 1 auto;justify-content:center}
  .ct-figura,.ct-mapa{grid-area:fig;margin-inline:calc(-1 * var(--margem));justify-self:stretch}
  .ct-figura{margin-top:8px;padding-top:34.9%}
  .ct-figura img{width:100%;transform:translateX(-5%)}
  .ct-serra{height:58vw}
  .ct-mapa{position:relative;inset:auto;aspect-ratio:390/560;align-self:end}
  .ct-larga{display:none}
  .ct-cel{display:block}
  .ct-placa{right:auto;left:calc(10.77% - 1px);top:18.6%;transform:translateY(-100%);font-size:21px;gap:0}
  .ct-placa::after{display:none}
}

@media (min-width:600px) and (max-width:900px){
  .ct-figura,.ct-mapa{width:min(560px,100%);margin-inline:0;justify-self:center}
  .ct-serra{height:44vw}
}

@media (prefers-reduced-motion: reduce){
  .js .ct-l > span{transform:none}
  .js .ct-p,.js .ct-fio{stroke-dashoffset:0}
  .js .ct-ponto,.js .ct-placa{opacity:1}
  .js .ct-marcas{opacity:.75}
}