/* Selene Studio · Contato (/contato). Page styles on top of /site/site.css, drawn in Doop (frames "Contato · …",
   x 18400): the title and the other ways to reach us on the left, the form card on the right, its error and
   sent states, and the phone layout below 960 px. The page ends at the footer: it has its own form, so it
   skips the waitlist call. */

/* The current page lights up in the footer (not in the kit yet). */
.rd-col a[aria-current="page"]{color:var(--signal)}
/* Without the closing call, the footer starts at the horizon line itself. */
.rd-linha{border-top:1px solid var(--border)}

/* Page top: the same paper, with a soft light behind the title. */
:root{--pg-luz:radial-gradient(40% 560px at 20% 0,#fff 0%,rgb(255 255 255 / 0) 100%),radial-gradient(70% 420px at 50% -60px,rgb(37 88 232 / .07) 0%,rgb(37 88 232 / 0) 100%)}
html.dark{--pg-luz:radial-gradient(40% 560px at 20% 0,rgb(255 255 255 / .05) 0%,rgb(255 255 255 / 0) 100%),radial-gradient(70% 420px at 50% -60px,rgb(38 105 254 / .16) 0%,rgb(38 105 254 / 0) 100%)}
.ct-pg{position:relative;padding:152px 0 112px}
.ct-pg::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:640px;background:var(--pg-luz);pointer-events:none}
@media (min-width:960px) and (max-width:1295px){.ct-pg{zoom:var(--z,1)}}

.ct-grid{display:grid;grid-template-columns:400px 1fr;column-gap:80px;align-items:start}
.ct-cab h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.ct-cab .lead{margin-top:20px;font-size:17px}

/* other ways to reach us */
.caminhos{list-style:none;padding:0;margin-top:40px;display:grid;gap:28px}
.cm{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.cm h2{font:600 16px/1.35 var(--sans);padding-top:1px}
.cm p{margin-top:4px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.mail-linha{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.cm .mail-linha a{color:var(--signal);font-weight:500;text-decoration:none}
.cm .mail-linha a:hover{text-decoration:underline;text-underline-offset:3px}
.copiar{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border-radius:6px;background:var(--muted);color:var(--muted-fg);font:500 12px/1 var(--sans);transition:background-color .2s var(--ease),color .2s var(--ease)}
.copiar:hover{color:var(--fg)}
.copiar svg{width:12px;height:12px}
.copiar.feito{background:var(--success-soft);color:var(--success)}
.ir{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font:500 15px/1.4 var(--sans);color:var(--signal);text-decoration:none}
.ir svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.ir:hover svg{transform:translateX(2px)}

/* the form card */
.ct-card{background:var(--card);border-radius:24px;box-shadow:var(--raised);padding:32px;scroll-margin-top:24px}
.ct-duas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ct-form>.ct-campo{margin-top:20px}
.ct-campo label{display:block;font:500 14px/20px var(--sans);margin-bottom:8px}
.ct-campo .field{width:100%}
.ct-sel{position:relative}
.ct-sel select{-webkit-appearance:none;appearance:none;padding-right:40px;line-height:1.2;cursor:pointer}
.ct-sel select:invalid{color:var(--faint)}
.ct-sel option{color:var(--fg)}
.ct-sel svg{position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;color:var(--faint);pointer-events:none}
textarea.field{display:block;height:176px;min-height:120px;padding:11px 14px;line-height:1.5;resize:vertical}
.field[aria-invalid="true"],.field[aria-invalid="true"]:focus{box-shadow:0 0 0 1px var(--danger),0 0 0 4px rgb(180 35 24 / .14)}
.field.treme{animation:treme .34s var(--ease)}
@media (prefers-reduced-motion:reduce){.field.treme{animation:none}}
.ct-erro{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:13px;line-height:1.4;color:var(--danger)}
.ct-erro svg{width:14px;height:14px;flex:none;margin-top:1px}
/* "Privacidade e dados" points to the privacy channel of the legal pages */
.ct-dica{margin-top:8px;font-size:13px;line-height:1.45;color:var(--muted-fg)}
.ct-dica a{color:var(--signal);font-weight:500;text-decoration:none}
.ct-dica a:hover{text-decoration:underline;text-underline-offset:3px}
.ct-sob{display:flex;justify-content:space-between;gap:16px;margin-top:8px;font-size:13px;color:var(--faint)}
.ct-sob .perto{color:var(--warning)}
.ct-pe{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.ct-pe p{font-size:13px;line-height:1.5;color:var(--muted-fg);max-width:340px}
.ct-pe a{color:var(--signal);font-weight:500;text-decoration:none}
.ct-pe a:hover{text-decoration:underline;text-underline-offset:3px}
.ct-enviar svg{width:16px;height:16px}
.ct-enviar:disabled{cursor:default;opacity:.85}

/* sent: takes the form's place at the same height, so nothing below jumps */
.ct-ok{display:flex;flex-direction:column;justify-content:center;padding:0 16px}
.ct-ok[hidden]{display:none}
.ok-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:99px;background:var(--success-soft);color:var(--success)}
.ok-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ct-ok h2{margin-top:20px;font:500 32px/1.12 var(--display);letter-spacing:-.018em}
.ct-ok h2:focus{outline:0}
.ct-ok>p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--muted-fg)}
.ct-ok>p b{font-weight:500;color:var(--fg);overflow-wrap:anywhere}
.resumo{margin-top:24px;padding:16px 18px;border-radius:14px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--border)}
.resumo .chip{background:var(--muted);color:var(--fg)}
.resumo p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--muted-fg);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ok-acoes{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:28px}
.ok-acoes .ir{margin-top:0}
@media (prefers-reduced-motion:no-preference){
  .ct-ok.entra{animation:ct-entra .32s cubic-bezier(.23,1,.32,1)}
  .ct-ok.entra .ok-ico{animation:ct-pop .36s cubic-bezier(.23,1,.32,1)}
  .ct-ok.entra .ok-ico path{stroke-dasharray:1;stroke-dashoffset:1;animation:ct-traco .42s .16s cubic-bezier(.65,0,.35,1) forwards}
}
@keyframes ct-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ct-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes ct-traco{to{stroke-dashoffset:0}}

/* phones and narrow windows: the form first, the other ways below it */
@media (max-width:959px){
  :root{--pg-luz:radial-gradient(130% 380px at 30% 0,#fff 0%,rgb(255 255 255 / 0) 100%)}
  html.dark{--pg-luz:radial-gradient(130% 380px at 30% 0,rgb(255 255 255 / .06) 0%,rgb(255 255 255 / 0) 100%)}
  .ct-pg{padding:92px 0 72px}
  .ct-pg::before{height:420px}
  /* stretch, not the desktop's start, so every block takes the full column */
  .ct-grid{display:flex;flex-direction:column;align-items:stretch}
  .ct-grid>*,.caminhos{min-width:0}
  .ct-lado{display:contents}
  .ct-cab{order:1}
  .ct-card{order:2;margin-top:28px;padding:20px;border-radius:18px;scroll-margin-top:16px}
  .caminhos{order:3;margin-top:40px;gap:24px}
  .ct-cab h1{font-size:36px}
  .ct-cab .lead{margin-top:14px;font-size:16px}
  .ct-duas{grid-template-columns:1fr}
  .ct-form>.ct-campo{margin-top:16px}
  textarea.field{height:160px;padding:12px 14px;line-height:1.45}
  .ct-sel svg{width:18px;height:18px;margin-top:-9px}
  .ct-pe{flex-direction:column-reverse;align-items:stretch;gap:12px;margin-top:20px;padding-top:0;border-top:0}
  .ct-pe p{max-width:none;text-align:center}
  .ct-enviar{width:100%}
  .copiar{height:28px;padding:0 10px;border-radius:8px;font-size:13px}
  .copiar svg{width:13px;height:13px}
  .ct-ok{padding:4px 0}
  .ct-ok h2{margin-top:18px;font-size:28px;line-height:1.15}
  .ct-ok>p{margin-top:8px;font-size:16px}
  .ok-ico{width:44px;height:44px}
  .ok-ico svg{width:22px;height:22px}
  .resumo{margin-top:20px;padding:14px 16px}
  .ok-acoes{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px}
  .ok-acoes .btn{width:100%}
  .ok-acoes .ir{justify-content:center}
}

/* A field people never see, for the form-filling robots (worker/site/contact.ts). */
.ct-mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}