/* Intuitu Labs · estilos só da página Contato (contato.html). Base em intuitu.css. */

.ct{min-height:100vh;min-height:100svh;padding:148px 0 clamp(96px,10vw,140px)}
.ct-rib{top:46%;height:58%;z-index:0;filter:drop-shadow(0 30px 40px rgba(163,159,252,.25))}
.ct-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"intro card" "aside card";grid-template-rows:auto 1fr;gap:0 clamp(40px,6vw,96px);align-items:start}
.ct-intro{grid-area:intro}
.ct-aside{grid-area:aside}
.ct-card{grid-area:card}

/* ---------- Lado: título, contato direto, como começa ---------- */
.ct-ht{font-size:clamp(46px,5.3vw,84px);line-height:.98}
.ct-lede{margin-top:28px}
.ct-mail{--r:999px;--glass-bg:rgba(255,255,255,.52);display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin-top:44px;padding:8px 8px 8px 10px}
.ct-mail-ic{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--creme)}
.ct-mail a{font:500 clamp(17px,1.5vw,20px)/1.2 var(--display);letter-spacing:-.02em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.ct-mail a:hover{text-decoration:underline;text-underline-offset:4px}
.ct-copy{flex:none;position:relative;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;color:var(--ink);background:rgba(255,255,255,.6);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);transition:background-color .3s}
.ct-copy:hover{background:#fff}
.ct-copy .ic{grid-area:1/1;transition:transform .5s var(--spring),opacity .3s}
.ct-copy .i-ok{opacity:0;transform:scale(.4);color:#3E7B5B;stroke-width:2.2}
.ct-copy.done .i-copy{opacity:0;transform:scale(.4)}
.ct-copy.done .i-ok{opacity:1;transform:none}

.ct-how{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;margin-top:44px;max-width:520px}
.ct-how p{font-size:16px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.ct-how p b{font-weight:600;color:var(--ink)}
/* mini prévia: uma página se montando dentro do navegador */
.ct-mini .brw{border-radius:10px}
.ct-mini .brw .bar{height:18px}
.ct-mini .brw .bar::before{left:7px;width:5px;height:5px;margin-top:-2.5px;box-shadow:8px 0 0 #E0D9CB,16px 0 0 #E0D9CB}
.ct-mini .brw .bar span{font-size:7.5px;padding:2px 8px;border-radius:4px}
.ct-mini .scr{background:#FDFBF6}
.mk{position:absolute;display:block;border-radius:3px}
.mk-hero{left:6%;right:6%;top:7%;height:38%;border-radius:5px;background:linear-gradient(120deg,#FDD4B1,#FEB559 30%,#9EB093 55%,#85ACD4 75%,#A39FFC)}
.mk-t1{left:6%;top:52%;width:58%;height:7%;background:var(--ink)}
.mk-t2{left:6%;top:63%;width:40%;height:5%;background:rgba(31,58,46,.25)}
.mk-btn{right:6%;top:53%;width:20%;height:13%;border-radius:999px;background:var(--dot)}
.mk-c1,.mk-c2,.mk-c3{top:75%;width:27%;height:18%;border-radius:4px;background:rgba(31,58,46,.08)}
.mk-c1{left:6%}.mk-c2{left:36.5%}.mk-c3{left:67%}
@keyframes mkIn{0%,6%{opacity:0;transform:translateY(8px) scale(.94)}16%,86%{opacity:1;transform:none}96%,100%{opacity:0;transform:none}}
html.motion .mk{animation:mkIn 6s var(--ease) infinite both}
html.motion .mk-t1{animation-delay:.25s}
html.motion .mk-t2{animation-delay:.4s}
html.motion .mk-btn{animation-delay:.6s}
html.motion .mk-c1{animation-delay:.8s}
html.motion .mk-c2{animation-delay:.92s}
html.motion .mk-c3{animation-delay:1.04s}

/* ---------- Formulário em vidro claro ---------- */
.ct-card{--r:36px;--glass-bg:rgba(255,255,255,.5);padding:clamp(26px,3.2vw,44px)}
.ct-form{display:grid;gap:24px}
.ct-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 18px}
.fld{min-width:0;margin:0;padding:0;border:0}
.fld label,.fld legend{display:block;padding:0;margin-bottom:10px;font:500 15px/1.3 var(--text);color:var(--ink)}
.fld .opt{font-weight:400;color:var(--ink-3)}
.fld input,.fld textarea{display:block;width:100%;margin:0;font:400 17px/1.45 var(--text);color:var(--ink);border:0;border-radius:16px;outline:0;
  background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(31,58,46,.14),inset 0 2px 4px rgba(31,58,46,.04);
  transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
.fld input{height:56px;padding:0 18px}
.fld textarea{min-height:150px;padding:15px 18px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-4);opacity:1}
.fld input:hover,.fld textarea:hover{background:rgba(255,255,255,.8)}
.fld input:focus-visible,.fld textarea:focus-visible{background:#fff;outline:0;box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 5px rgba(113,151,251,.28)}
.err{display:none;align-items:flex-start;gap:7px;margin-top:9px;font:500 14.5px/1.4 var(--text);color:#A2391B}
.err::before{content:"";flex:none;width:7px;height:7px;margin-top:.45em;border-radius:50%;background:currentColor}
.fld.bad .err{display:flex}
.fld.bad input,.fld.bad textarea{background:rgba(255,246,241,.88);box-shadow:inset 0 0 0 1.5px #C2542F}
.fld.bad input:focus-visible,.fld.bad textarea:focus-visible{box-shadow:inset 0 0 0 1.5px #C2542F,0 0 0 5px rgba(252,157,103,.3)}

/* chips selecionáveis */
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip>span{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:0 16px 0 14px;border-radius:999px;font:500 16px/1 var(--text);color:var(--ink);
  background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(31,58,46,.14);
  transition:background-color .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .5s var(--spring)}
.chip:hover>span{background:rgba(255,255,255,.9)}
.chip input:active+span{transform:scale(.96)}
.chip input:checked+span{background:var(--ink);color:var(--creme);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -14px rgba(31,58,46,.7)}
.chip input:focus-visible+span{outline:2px solid var(--ink);outline-offset:3px}
.fld.bad .chip>span{box-shadow:inset 0 0 0 1.5px rgba(194,84,47,.55)}
.fld.bad .chip input:checked+span{box-shadow:none}

/* ações */
.ct-act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:4px}
.ct-send{position:relative}
.ct-send .spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(250,247,239,.35);border-top-color:var(--creme);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ct-send[aria-busy="true"]{cursor:progress;background:#2C4A3D}
.ct-send[aria-busy="true"] .spin{display:block}
.ct-send[aria-busy="true"] .i-go{display:none}
html.still .ct-send .spin{animation:none!important;border-color:var(--creme);border-top-color:transparent}
.ct-draft{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink-3)}
.ct-draft[hidden]{display:none}
.ct-draft .ic{width:16px;height:16px;color:#3E7B5B;stroke-width:2.2}
.ct-clear{min-height:44px;padding:0 6px;border:0;background:none;font:500 14px/1 var(--text);color:var(--ink-2);text-decoration:underline;text-underline-offset:4px;cursor:pointer;border-radius:8px}
.ct-clear[hidden]{display:none}
.ct-clear:hover{color:var(--ink)}

/* resumo de erros e aviso de prévia */
.ct-sum,.ct-note{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-lg);padding:18px 20px}
.ct-sum[hidden],.ct-note[hidden]{display:none}
/* campo-isca para robôs: fora da tela, fora do teclado e do leitor de tela */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-ok{display:flex;gap:14px;align-items:flex-start;border-radius:var(--r-lg);padding:18px 20px;background:rgba(255,255,255,.85);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 0 0 1px rgba(62,123,91,.25),0 20px 40px -26px rgba(31,58,46,.4)}
.ct-ok[hidden]{display:none}
.ct-ok-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#9EB093,#3E7B5B)}
.ct-ok-ic .ic{stroke-width:2.2}
.ct-ok p{font-size:16px;line-height:1.55;color:var(--ink)}
.ct-ok .ct-ok-t{font:600 18px/1.3 var(--display);margin-bottom:2px}
html.motion .ct-ok:not([hidden]){animation:noteIn .7s var(--ease) both}
.ct-sum{background:rgba(255,240,232,.86);box-shadow:inset 0 0 0 1px rgba(194,84,47,.3);color:#7E2D14}
.ct-sum .ic{margin-top:1px;color:#C2542F}
.ct-sum-t{font:600 16px/1.4 var(--text)}
.ct-sum ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:2px 14px}
.ct-sum a{display:inline-flex;align-items:center;min-height:32px;font-size:15px;color:#7E2D14;text-underline-offset:3px}
.ct-note{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px rgba(255,255,255,.95),0 0 0 1px rgba(113,151,251,.25),0 20px 40px -26px rgba(31,58,46,.4)}
.ct-note-ic{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#85ACD4,#A39FFC)}
.ct-note p{font-size:16px;line-height:1.55;color:var(--ink)}
.ct-note p a{text-underline-offset:3px;overflow-wrap:anywhere}
.ct-mailto{margin-top:14px;min-height:48px;padding:0 20px;font-size:15px;background:rgba(255,255,255,.8)}
@keyframes noteIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes nudge{0%,100%{transform:none}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
html.motion .ct-note:not([hidden]),html.motion .ct-sum:not([hidden]){animation:noteIn .7s var(--ease) both}
html.motion .ct-card.nudge{animation:nudge .5s var(--ease)}

/* ---------- Responsivo ---------- */
@media (max-width:1023px){
  .ct-grid{grid-template-columns:1fr;grid-template-areas:"intro" "card" "aside";grid-template-rows:auto;gap:40px}
  .ct-intro,.ct-aside{max-width:640px}
  .ct-card{max-width:760px}
  .ct-rib{top:18%;height:40%}
}
@media (max-width:679px){
  .ct{padding:116px 0 88px}
  .ct-ht{font-size:clamp(40px,11.6vw,56px)}
  .ct-lede{margin-top:20px}
  .ct-mail{margin-top:0;width:100%}
  .ct-mail a{font-size:16px;flex:1;min-width:0}
  .ct-how{grid-template-columns:104px minmax(0,1fr);gap:16px;margin-top:30px}
  .ct-how p{font-size:15px}
  .ct-card{--r:28px;padding:22px 18px 24px;margin-inline:-6px}
  .ct-row{grid-template-columns:1fr}
  .ct-form{gap:20px}
  .chip-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .chip:nth-child(n+3){grid-column:1/-1}
  .chip>span{width:100%;padding:0 14px 0 13px;font-size:15.5px}
  .ct-send{width:100%;justify-content:center}
  .ct-note{flex-direction:column;padding:18px}
}