/* BLYO · Contato, rodapé e efeitos gerais da página (prefixo cr-)
   Carrega depois do estilo.css: aqui ficam a linha de leitura do topo, a faixa menta do contato
   com o rastro e a prévia do recado, e o rodapé com a assinatura grande. */

/* ---------- Topo: linha menta com o quanto da página já foi lido ---------- */

.cr-progresso {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--menta);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.topo.menu-aberto .cr-progresso { visibility: hidden; }

/* ---------- Contato: o texto à esquerda, o rastro e a prévia do recado à direita ---------- */

/* as linhas vazias em cima e embaixo centralizam o texto na altura do palco */
.contato__grade {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(560px, 40vw));
  grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". palco" "texto palco" "acoes palco" ". palco";
  column-gap: clamp(40px, 6vw, 104px);
  row-gap: 0;
  align-items: start;
}
.contato__texto { grid-area: texto; container-type: inline-size; }
.cr-palco { grid-area: palco; }
.cr-acoes { grid-area: acoes; }
/* a linha mais longa do título ("como a sua equipe") tem umas 8,2 vezes a altura da letra:
   o tamanho acompanha a coluna para ela nunca quebrar no meio */
.contato h2 { font-size: min(clamp(36px, 5.4vw, 82px), 11.8cqi); }

/* o título entra por linhas, como as outras frases grandes do site */
.js .cr-titulo .linha > span { transform: translate3d(0, 112%, 0); transition: transform 1s var(--entra) calc(var(--i) * 110ms); }
.js .cr-titulo.visivel .linha > span { transform: none; }

/* enquanto o WhatsApp e o e-mail não estão preenchidos, o aviso fica à vista e com cara de pendência */
.contato .contato__falta {
  max-width: 46ch;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1.5px dashed rgba(16, 46, 40, .6);
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}
.contato .contato__falta b { font-weight: 650; }
.contato .contato__falta[hidden] { display: none; }

/* o palco: o desenho do rastro fica no fundo, a conversa e o assunto do e-mail por cima */
.cr-palco {
  --cr-conversa: 338px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: 58%;
}
.cr-rastro {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
/* na faixa menta o rastro inverte: contornos verde-escuros e o "o" cheio em petróleo */
.cr-rastro .rastro__tinta use { stroke: var(--positivo); }
.cr-rastro .rastro__destaque use { stroke: var(--petroleo); }
.cr-rastro .rastro__cheio { fill: var(--petroleo); }

/* a conversa no WhatsApp: cabeçalho petróleo, fundo marfim e a sombra dura de impressão */
.cr-zap {
  position: relative;
  z-index: 2;
  width: min(var(--cr-conversa), 100%);
  overflow: hidden;
  border: 1.5px solid var(--petroleo);
  border-radius: 12px;
  background: var(--marfim);
  color: var(--petroleo);
  box-shadow: 9px 11px 0 var(--petroleo);
  font-size: 15px;
  line-height: 1.38;
}
.cr-zap__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  background: var(--petroleo);
  color: var(--marfim);
}
.cr-zap__foto {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--musgo);
}
.cr-zap__foto svg { width: 20px; height: auto; fill: var(--menta); }
.cr-zap__quem { display: grid; line-height: 1.22; }
.cr-zap__quem b { font-size: 15px; font-weight: 650; }
.cr-zap__quem small { font-size: 13px; color: var(--suave-escuro); }

.cr-zap__conversa { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 6px; }
.cr-zap__dia {
  align-self: center;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--papel);
  font-size: 13px;
  font-weight: 560;
  color: var(--suave-claro);
}
.cr-zap__balao {
  align-self: flex-end;
  max-width: 90%;
  padding: 8px 10px 7px 12px;
  border-radius: 10px 3px 10px 10px;
  background: var(--ok-fundo);
}
.cr-zap__hora {
  float: right;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 6px 0 -3px 12px;
  font-size: 13px;
  line-height: 1.2;
  color: var(--suave-claro);
}
.cr-zap__visto { width: 18px; height: 11px; fill: none; stroke: var(--positivo); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }

.cr-zap__escreve { display: flex; align-items: center; gap: 8px; padding: 8px 12px 12px; }
.cr-zap__campo {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 42px;
  border-radius: 21px;
  background: var(--papel);
}
.cr-zap__dica { position: absolute; left: 16px; top: 0; line-height: 42px; color: var(--suave-claro); }
/* a linha onde o recado é digitado: corta nas bordas como um campo de texto de verdade */
.cr-zap__linha { position: absolute; left: 16px; right: 12px; top: 0; bottom: 0; overflow: hidden; }
.cr-zap__fita { position: absolute; left: 0; top: 0; line-height: 42px; white-space: pre; clip-path: inset(0 100% 0 0); }
.cr-zap__cursor { position: absolute; left: 0; top: 11px; width: 2px; height: 20px; background: var(--positivo); opacity: 0; }
.cr-zap__enviar {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--positivo);
}
.cr-zap__enviar svg { width: 19px; height: 19px; margin-left: 2px; fill: var(--papel); }

/* o assunto do e-mail, um papel menor preso embaixo da conversa: encosta na borda de baixo dela
   e sobra para a esquerda, até onde o palco deixa */
.cr-email {
  position: relative;
  z-index: 3;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: -12px;
  margin-left: max(0px, 100% - min(var(--cr-conversa), 100%) - 222px);
  padding: 11px 16px 11px 13px;
  border: 1.5px solid var(--petroleo);
  border-radius: 6px;
  background: var(--papel);
  color: var(--petroleo);
  box-shadow: 5px 6px 0 var(--petroleo);
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.cr-email svg { flex: none; width: 22px; height: 16px; fill: none; stroke: var(--positivo); stroke-width: 1.6; stroke-linejoin: round; }
.cr-email small { font-size: 15px; color: var(--suave-claro); }
.cr-email b { font-weight: 650; }

/* entrada: a conversa sobe, o recado é digitado no campo, sai como balão e ganha os dois vistos;
   o assunto do e-mail chega por último */
@media (prefers-reduced-motion: no-preference) {
  .js .cr-zap { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .55s var(--ease), transform .9s var(--entra); }
  .js .cr-palco.cr-entrou .cr-zap { opacity: 1; transform: none; }

  .js .cr-zap__dica { transition: opacity .18s linear; }
  .js .cr-palco.cr-digitando .cr-zap__dica { opacity: 0; }
  .js .cr-palco.cr-digitando .cr-zap__cursor { opacity: 1; }
  .js .cr-palco.cr-enviou .cr-zap__fita { opacity: 0; transition: opacity .2s linear .12s; }
  .js .cr-palco.cr-enviou .cr-zap__dica { opacity: 1; transition-delay: .3s; }
  .js .cr-palco.cr-enviou .cr-zap__enviar { animation: cr-aperta .4s var(--ease) both; }

  .js .cr-zap__balao { opacity: 0; transform: translate3d(0, 16px, 0) scale(.9); transform-origin: 100% 100%; transition: opacity .25s var(--ease), transform .6s var(--entra); }
  .js .cr-palco.cr-enviou .cr-zap__balao { opacity: 1; transform: none; transition-delay: .2s; }
  .js .cr-zap__visto path + path { stroke-dashoffset: 1; transition: stroke-dashoffset .3s var(--ease); }
  .js .cr-palco.cr-enviou .cr-zap__visto path + path { stroke-dashoffset: 0; transition-delay: .8s; }

  .js .cr-email { opacity: 0; transform: translate3d(-22px, 12px, 0) rotate(-7deg); transition: opacity .45s var(--ease), transform .85s var(--entra); }
  .js .cr-palco.cr-enviou .cr-email { opacity: 1; transform: rotate(-2deg); transition-delay: .95s; }
}
@keyframes cr-aperta { 40% { transform: scale(.84); } 100% { transform: none; } }

/* ---------- Rodapé: a linha de atalhos e a assinatura grande fechando a página ---------- */

.rodape {
  padding: clamp(40px, 7vh, 72px) 0 calc(clamp(14px, 2.6vh, 28px) + env(safe-area-inset-bottom));
  font-size: 15px;
}
.cr-rodape__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.cr-rodape__desc, .cr-rodape__direitos { color: var(--suave-escuro); }
.cr-rodape__nav { display: flex; flex-wrap: wrap; margin-right: auto; }
.rodape .cr-rodape a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-left: 0;
  padding: 0 10px;
  border-radius: 4px;
  color: var(--marfim);
  font-weight: 520;
  text-decoration: none;
  transition: background-color .2s;
}
.rodape .cr-rodape a:hover { background: rgba(244, 240, 216, .09); text-decoration: none; }
.rodape .cr-rodape .cr-rodape__falar { color: var(--menta); }
.cr-rodape__subir span { display: inline-block; transition: transform .3s var(--ease); }
.cr-rodape__subir:hover span { transform: translateY(-3px); }

.cr-gigante { display: block; width: 100%; height: auto; margin-top: clamp(28px, 6vh, 64px); color: var(--marfim); }
.cr-gigante__o { fill: var(--menta); }
.cr-gigante__eco path { fill: none; stroke: var(--menta); stroke-width: 2.5px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* as letras sobem de baixo da linha do rodapé, uma depois da outra; o "o" vem na diagonal
   e deixa três contornos onde passou */
@media (prefers-reduced-motion: no-preference) {
  .js .cr-gigante__letra { transform: translate(0, 150px); transition: transform 1.15s var(--entra) calc(var(--k) * 90ms); }
  .js .cr-gigante.cr-chegou .cr-gigante__letra { transform: none; }
  .js .cr-gigante__o { opacity: 0; transform: translate(-60px, 60px); transition: opacity .2s linear .5s, transform 1s var(--entra) .5s; }
  .js .cr-gigante.cr-chegou .cr-gigante__o { opacity: 1; transform: none; }
  .js .cr-gigante__eco { opacity: 0; transition: opacity .25s linear; }
  .js .cr-gigante.cr-chegou .cr-gigante__eco { opacity: 1; transition-delay: calc(.5s + var(--t, 0s)); }
}

/* ---------- Computador estreito ---------- */

@media (min-width: 900px) and (max-width: 1199px) {
  .contato__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
  .cr-palco { --cr-conversa: 304px; padding-top: 64%; }
}

/* ---------- Celular e tablet: o palco fica entre o texto e os botões ---------- */

@media (max-width: 899px) {
  .contato__grade {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "texto" "palco" "acoes";
    row-gap: clamp(36px, 8vw, 56px);
  }
  .cr-acoes .contato__acoes { margin-top: 0; }
  .cr-palco { width: min(100%, 540px); align-items: flex-start; padding-top: 44%; }
  .cr-rastro { left: auto; right: 0; width: 66%; }
  .cr-zap { width: min(var(--cr-conversa), 100% - 10px); }
  .cr-email { align-self: flex-end; margin-left: 0; margin-right: 6px; }
}

@media (max-width: 599px) {
  .cr-gigante__eco path { stroke-width: 1.6px; }
  .cr-rodape__linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
  .cr-rodape__desc { grid-column: 1 / -1; }
  .cr-rodape__nav { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 -10px; }
}

/* ---------- Movimento reduzido: tudo no estado final ---------- */

@media (prefers-reduced-motion: reduce) {
  .js .cr-titulo .linha > span { transform: none; }
}