/* /contato (rascunho, 2026-10-10). Figma: desktop 29:1719 (1440), celular 54:2627 (390). */

.ct-topo .miolo{display:flex;gap:calc(96 * var(--px));align-items:flex-start;padding:calc(200 * var(--px)) calc(96 * var(--px)) calc(120 * var(--px));}
.ct-texto{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(20 * var(--px));}
.ct-chamada{font-size:calc(48 * var(--px));}
.ct-titulo{font-size:calc(140 * var(--px));line-height:.96;}
.ct-lead{color:var(--escuro);font-size:calc(18 * var(--px));line-height:1.5;letter-spacing:-.03em;}
.ct-canais{display:flex;flex-direction:column;gap:calc(14 * var(--px));padding-top:calc(32 * var(--px));}
.ct-canais>div{display:flex;gap:calc(24 * var(--px));align-items:flex-start;}
.ct-canais dt{width:calc(110 * var(--px));flex-shrink:0;color:var(--escuro);}
.ct-canais dd{font-size:calc(16 * var(--px));line-height:1.5;letter-spacing:-.03em;color:var(--branco);}
.ct-canais a[href]{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em;transition:text-decoration-color .3s var(--ease);}
.ct-canais a[href]:hover{text-decoration-color:currentColor;}

/* Typeform de contato (12/10): ocupa a coluna do antigo formulário */
.ct-typeform{width:calc(560 * var(--px));flex-shrink:0;min-height:620px;border-radius:calc(4 * var(--px));overflow:hidden;position:relative;z-index:4;}
.js .ct-typeform{animation:sobeCarrega 1.1s var(--ease) both .2s;}
@media (max-width:767px){ .ct-typeform{width:100%;} }

/* Formulário (antigo, fora da página desde 12/10; as regras ficam para quando ele voltar ligado ao HubSpot) */
.ct-form{width:calc(560 * var(--px));flex-shrink:0;background:var(--claro);color:var(--escuro);border-radius:calc(4 * var(--px));
  padding:calc(40 * var(--px));display:flex;flex-direction:column;gap:calc(18 * var(--px));position:relative;z-index:4;}
.ct-campo{display:flex;flex-direction:column;gap:calc(8 * var(--px));min-width:0;border:0;}
.ct-linha{display:flex;gap:calc(16 * var(--px));}
.ct-linha>.ct-campo{flex:1 0 0;}
.ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=tel],.ct-form select,.ct-form textarea{
  width:100%;height:calc(52 * var(--px));background:var(--branco);border:1px solid var(--escuro);border-radius:0;
  padding:0 calc(16 * var(--px));font:inherit;font-size:calc(15 * var(--px));line-height:1.5;letter-spacing:-.03em;color:var(--escuro);}
.ct-form textarea{height:calc(120 * var(--px));padding-top:calc(14 * var(--px));resize:vertical;}
.ct-form ::placeholder{color:var(--escuro);opacity:1;}
.ct-form select{-webkit-appearance:none;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23141414'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right calc(16 * var(--px)) center;background-size:calc(10 * var(--px)) auto;}
.ct-form input:focus-visible,.ct-form select:focus-visible,.ct-form textarea:focus-visible{outline:2px solid var(--laranja);outline-offset:1px;}
.ct-form input:user-invalid,.ct-form textarea:user-invalid{border-color:#c0261b;box-shadow:inset 0 0 0 1px #c0261b;}

/* "O que você precisa?": escolha rápida em pílulas */
.ct-opcoes{gap:calc(10 * var(--px));padding:0;margin:0;}
.ct-opcoes legend{padding:0;margin-bottom:calc(10 * var(--px));}
.ct-pilulas{display:flex;flex-wrap:wrap;gap:calc(8 * var(--px));}
.ct-pilulas label{position:relative;cursor:pointer;}
.ct-pilulas input{position:absolute;opacity:0;width:1px;height:1px;}
.ct-pilulas span{display:block;border:1px solid var(--escuro);border-radius:999px;padding:calc(7 * var(--px)) calc(14 * var(--px));
  font-weight:700;font-size:calc(12 * var(--px));line-height:1.25;letter-spacing:-.03em;transition:background .2s,color .2s;}
.ct-pilulas label:hover span{background:rgba(20,20,20,.06);}
.ct-pilulas input:checked+span{background:var(--escuro);color:var(--branco);}
.ct-pilulas input:focus-visible+span{outline:2px solid var(--laranja);outline-offset:2px;}

.ct-envio{display:flex;gap:calc(16 * var(--px));align-items:center;}
.ct-botao{background:var(--escuro);color:var(--branco);border-radius:999px;padding:calc(18 * var(--px)) calc(30 * var(--px));
  font-size:calc(14 * var(--px));line-height:1.25;letter-spacing:-.03em;flex-shrink:0;transition:transform .3s var(--ease);}
.ct-botao:hover{transform:translateY(-2px);}
.ct-botao:focus-visible{outline:2px solid var(--laranja);outline-offset:2px;}
.ct-envio p{flex:1 0 0;min-width:0;}

/* dentro da coluna de texto, que é sticky (e portanto posicionada): à direita dos canais */
.ct-adesivo{right:0;bottom:calc(-24 * var(--px));--w:150 !important;}
.ct-texto a[data-pendente]{cursor:default;}

/* O que acontece depois */
.ct-depois .miolo{display:flex;flex-direction:column;gap:calc(40 * var(--px));padding:calc(120 * var(--px)) calc(96 * var(--px));}
.ct-depois h2{font-size:calc(36 * var(--px));color:var(--laranja);}
.ct-passos{display:flex;gap:calc(16 * var(--px));}
.ct-passos li{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:calc(12 * var(--px));position:relative;
  padding:calc(28 * var(--px)) calc(12 * var(--px)) calc(32 * var(--px)) 0;}
.ct-passos h3{font-size:calc(40 * var(--px));line-height:1;}
.ct-passos p{font-size:calc(16 * var(--px));line-height:1.5;letter-spacing:-.03em;}

.ct-num{color:var(--laranja);}

/* ---------- Rolagem (11/10) ----------
   Topo: os textos e os canais entram em sequência quando a página abre; no desktop o texto fica parado
   ao lado enquanto o formulário passa. "O que acontece depois" fica preso (--p): o fio cresce de um
   passo para o outro e cada passo acende quando o fio chega nele. */
.js .ct-texto>*,.js .ct-canais>div{animation:sobeCarrega 1s var(--ease) both;}
.js .ct-texto>:nth-child(2){animation-delay:.08s;} .js .ct-texto>:nth-child(3){animation-delay:.16s;}
.js .ct-canais>div:nth-child(1){animation-delay:.3s;} .js .ct-canais>div:nth-child(2){animation-delay:.36s;}
.js .ct-canais>div:nth-child(3){animation-delay:.42s;} .js .ct-canais>div:nth-child(4){animation-delay:.48s;}
.js .ct-form{animation:sobeCarrega 1.1s var(--ease) both .2s;}
.ct-texto{position:sticky;top:calc(120 * var(--px));}
.js .ct-depois-trilho>.percurso{display:block;height:100svh;}
.js .ct-depois-trilho .ct-depois{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;}
.ct-depois h2{--k:clamp(0, var(--p,1) / .12, 1);opacity:calc(.35 + .65 * var(--k));}
.ct-passos li{--k:clamp(0, (var(--p,1) - var(--inicio,0)) / .2, 1);}
.ct-passos li:nth-child(1){--inicio:.1;} .ct-passos li:nth-child(2){--inicio:.36;} .ct-passos li:nth-child(3){--inicio:.62;}
.ct-passos li::before,.ct-passos li::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--branco);}
.ct-passos li::before{opacity:.2;}
.ct-passos li::after{height:2px;top:-.5px;transform:scaleX(var(--k));transform-origin:left;}
.ct-passos li>*{opacity:calc(.25 + .75 * var(--k));translate:0 calc((1 - var(--k)) * 18 * var(--px));}

/* ---------- Celular (quadro de 390) ---------- */
@media (max-width:767px){
  .ct-topo .miolo{flex-direction:column;gap:calc(28 * var(--px));padding:calc(112 * var(--px)) calc(24 * var(--px)) calc(72 * var(--px));}
  .ct-texto{flex:none;width:100%;}
  .ct-chamada{font-size:calc(26 * var(--px));}
  .ct-titulo{font-size:calc(64 * var(--px));}
  .ct-lead{font-size:calc(16 * var(--px));}
  .ct-canais>div{gap:calc(16 * var(--px));}
  .ct-form{width:100%;padding:calc(40 * var(--px)) calc(20 * var(--px));}
  .ct-linha{flex-direction:column;}
  .ct-linha>.ct-campo{flex:none;}
  .ct-form input[type=text],.ct-form input[type=email],.ct-form input[type=tel],.ct-form select{height:calc(48 * var(--px));font-size:16px;}
  .ct-form textarea{height:calc(110 * var(--px));padding-top:calc(12 * var(--px));font-size:16px;}
  .ct-pilulas label:nth-child(4) span{padding-left:calc(10 * var(--px));padding-right:calc(10 * var(--px));}
  .ct-envio{flex-wrap:wrap;}
  .ct-botao{padding:calc(18 * var(--px)) calc(20 * var(--px));}

  .ct-depois .miolo{gap:calc(28 * var(--px));padding:calc(72 * var(--px)) calc(24 * var(--px));}
  .ct-depois h2{font-size:calc(26 * var(--px));}
  .ct-texto{position:relative;top:auto;}
  .js .ct-depois-trilho>.percurso{height:90svh;}
  .ct-passos{flex-direction:column;}
  .ct-passos li{flex:none;width:100%;}
  .ct-passos h3{font-size:calc(32 * var(--px));}
}

@media (prefers-reduced-motion: reduce){
  .js .ct-texto>*,.js .ct-canais>div,.js .ct-form{animation:none;}
  .js .ct-depois-trilho .ct-depois{position:relative;min-height:0;display:block;}
}