/* O RODAPE DE RETORNO das telas de ferramenta.
 *
 * Por que existe: 50 das 72 telas nao devolviam ninguem. Quem terminava o
 * calculo e baixava o memorial fechava a aba.
 *
 * A VERSAO DE 14/09/2026, a pedido do dono, e adaptada do rodape de
 * HydroPol2D-docs, que e dele. De la vieram tres ideias, e nenhum pixel:
 *
 *   1. fundo escuro com um desenho animado por tras, em vez de faixa lisa;
 *   2. as redes sociais como fileira de icones, com o icone subindo no hover;
 *   3. a marca e o texto a esquerda, as redes a direita.
 *
 * O QUE MUDOU NA ADAPTACAO. La o desenho sao linhas de fluxo, porque o
 * produto e hidrologico. Aqui o rodape aparece em 105 ferramentas de sete
 * areas, entao o desenho nao pode ser de uma delas: e a grade de prancha com
 * duas curvas de diagrama, que e o que TODO produto do catalogo produz.
 * E a cor e o verde da marca, nao o azul.
 *
 * Gerado por scripts/dev/rodape-produtos.mjs. A marcacao de cada tela sai de
 * la; aqui e so a aparencia. */

.ep-retorno {
  position: relative;
  overflow: hidden;
  /* SEM PADDING LATERAL: a calha e do `.ep-retorno-dentro`, que a calcula
     igual as paginas do site. Os 24px que estavam aqui SOMAVAM com ela, e o
     rodape ficava 24px a direita de todo o resto - visivel abaixo de 1440px,
     onde o `max-width` do contentor ja nao absorvia a diferenca. */
  padding: 44px 0 34px;
  background: #0b1310;
  color: #e7efec;
  font-family: var(--ep-fonte);
}

/* O fio de luz no topo, que separa o rodape do produto sem usar borda dura. */
.ep-retorno::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 3;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(85 214 170 / 38%), transparent);
}

/* ── o desenho de fundo ─────────────────────────────────────────────────── */

.ep-retorno-fundo {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.ep-retorno-tracado { width: 100%; height: 100%; opacity: .9; }
.ep-retorno-tracado path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* A espessura nao acompanha o esticamento do viewBox. Sem isto a curva
   * engorda em tela larga e some em tela estreita. */
  vector-effect: non-scaling-stroke;
}

.ep-retorno-base { stroke: rgb(85 214 170 / 16%); stroke-width: 1.2; }
.ep-retorno-momento {
  stroke: rgb(143 232 200 / 42%);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgb(85 214 170 / 22%));
  animation: ep-retorno-brilho 11s ease-in-out infinite alternate;
}
.ep-retorno-flecha {
  stroke: rgb(85 214 170 / 26%);
  stroke-width: 1.5;
  animation: ep-retorno-deriva 19s ease-in-out infinite alternate;
}
/* O tracejado que anda e a unica coisa em movimento continuo. Ele sugere
 * calculo correndo, que e o que a ferramenta faz enquanto a pessoa digita. */
.ep-retorno-marcha {
  stroke: rgb(175 235 215 / 40%);
  stroke-width: 1.1;
  stroke-dasharray: 3 14;
  animation: ep-retorno-marcha 9s linear infinite;
}

@keyframes ep-retorno-deriva {
  from { transform: translate(0, 0); }
  to { transform: translate(-10px, 2px); }
}
@keyframes ep-retorno-brilho {
  from { opacity: .7; filter: drop-shadow(0 0 5px rgb(85 214 170 / 16%)); }
  to { opacity: 1; filter: drop-shadow(0 0 11px rgb(85 214 170 / 32%)); }
}
@keyframes ep-retorno-marcha {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -120; }
}

/* A grade de prancha, que e o papel do projeto. Ela some para baixo pela
 * mascara, senao briga com o texto. */
.ep-retorno-grade {
  position: absolute;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgb(143 232 200 / 4%) 1px, transparent 0),
    linear-gradient(90deg, rgb(143 232 200 / 4%) 1px, transparent 0);
  background-size: 58px 58px;
  mask-image: linear-gradient(180deg, rgb(255 255 255 / 30%), transparent);
  -webkit-mask-image: linear-gradient(180deg, rgb(255 255 255 / 30%), transparent);
}

/* ── o conteudo ─────────────────────────────────────────────────────────── */

/* Grade e nao flex solto.
 *
 * Com `flex` as duas colunas negociavam a largura pelo conteudo, e a da
 * esquerda - que tem a frase mais longa - ficava com uns 250 px e quebrava a
 * cada quatro palavras. Aqui a esquerda tem largura minima declarada e a
 * direita pega o que sobra. A nota de responsabilidade desce para uma faixa
 * propria, abaixo das duas, porque ela e do rodape inteiro e nao das redes. */
/* A GEOMETRIA E A DO SITE, e nao um `max-width` proprio.
 *
 * Era `max-width: 1280px; margin: 0 auto`, herdado de quando este rodape
 * existia so nas telas de produto - que sao aplicacoes de largura cheia e nao
 * tem contentor de conteudo. Desde 15/09/2026 ele e o rodape das paginas do
 * site tambem, e la o contentor e 1180px mais a calha.
 *
 * A DIFERENCA ERA VISIVEL: em 1440px o conteudo da pagina comecava em 130px e
 * o do rodape em 80px. Cinquenta pixels de degrau na ultima faixa da tela, que
 * foi exatamente o que o dono viu - "ta faltando as margens corretas".
 *
 * `1180 + 2 * calha` com `padding-inline: calha` e a mesma conta de todas as
 * paginas: a caixa cresce com a janela ate 1180 de conteudo, e a calha nunca
 * fica menor que 20px nem maior que 56px. */
.ep-retorno-dentro {
  --calha: clamp(20px, 4vw, 56px);
  --max: 1180px;

  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(340px, 1fr) auto;
  gap: 26px 48px;
  align-items: start;
  max-width: calc(var(--max) + 2 * var(--calha));
  padding-inline: var(--calha);
  margin-inline: auto;
}
/* `min-width: 0` numa celula de grade nao e enfeite: o padrao e `auto`, e
 * com ele um link longo - "WhatsApp (44) 99895-3627" - impede a coluna de
 * encolher e empurra a fileira de redes para fora em tela estreita. */
.ep-retorno-esquerda { min-width: 0; }

/* O limite de medida e do PARAGRAFO, e nao da coluna. Preso na coluna ele
 * encolhia junto a fileira de links, e "WhatsApp (44) 99895-3627" caia
 * sozinho numa terceira linha. */
.ep-retorno-sobre { max-width: 56ch; }

.ep-retorno-marca {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: #fff;
}
/* O simbolo EP em SVG, na versao clara. O azulejo de menta com "EP" escrito
   saiu daqui; o porque esta em app/components/marca.tsx. Nas 105 telas de
   produto isto e um `<img src="/marca/ep-simbolo-claro.svg">`, escrito por
   scripts/dev/rodape-produtos.mjs - la nao ha React para desenhar inline. */
.ep-retorno-selo {
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: 30px;
}

/* O CREDITO DO DONO, pedido em 15/09/2026. Fica entre a marca e o
 * paragrafo, em menta e semibold: nao e descricao do produto, e assinatura de
 * quem fez. Em cinza junto do resto ele desaparecia na parede de texto. */
.ep-retorno-credito {
  margin: -4px 0 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: -.005em;
  color: #8fe8c8;
}

.ep-retorno-sobre { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: #9db3ab; }

.ep-retorno-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.ep-retorno-links a {
  color: #8fe8c8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ep-retorno-links a:hover { text-decoration: underline; }
.ep-retorno-links a:focus-visible { outline: 2px solid #8fe8c8; outline-offset: 3px; border-radius: 3px; }

.ep-retorno-copy { display: block; font-size: 12px; color: #6b807a; }

.ep-retorno-direita { justify-self: end; }

/* ── as redes ───────────────────────────────────────────────────────────── */

.ep-retorno-redes { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.ep-retorno-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(231 239 236 / 82%);
  transition: transform 220ms ease, color 220ms ease, filter 220ms ease;
}
.ep-retorno-redes svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.ep-retorno-redes a:hover {
  color: #8fe8c8;
  filter: drop-shadow(0 0 9px rgb(85 214 170 / 55%));
  transform: translateY(-3px) scale(1.1);
}
.ep-retorno-redes a:focus-visible { outline: 2px solid #8fe8c8; outline-offset: 4px; border-radius: 4px; }

/* ERA A NOTA DE RESPONSABILIDADE TECNICA, em 11,5px cinza - tamanho de aviso
 * legal, que e o que ela era. O dono trocou o texto pelo convite de contato em
 * 15/09/2026, e convite em letra de rodape de contrato nao convida ninguem.
 *
 * Subiu para 13px e clareou. Continua com a linha em cima, que e o que separa
 * a faixa do resto - sem ela o convite cola no copyright e le como legenda
 * dele. */
.ep-retorno-nota {
  grid-column: 1 / -1;
  max-width: 88ch;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgb(143 232 200 / 12%);
  font-size: 13px;
  line-height: 1.6;
  color: #9db3ab;
}

@media (max-width: 860px) {
  .ep-retorno { padding: 34px 0 28px; }
  .ep-retorno-dentro { grid-template-columns: 1fr; gap: 20px; }
  .ep-retorno-direita { justify-self: start; }
}

/* Quem pediu menos movimento nao ve nenhum. As curvas continuam, paradas. */
@media (prefers-reduced-motion: reduce) {
  .ep-retorno-tracado path { animation: none; }
  .ep-retorno-redes a { transition: none; }
}

/* Os tres documentos legais e a identificacao de quem vende.
   LINHA PROPRIA, embaixo do copyright: na faixa de "continuar no site" eles
   transformariam um convite em lista de cartorio. Menores e mais apagados
   que os outros links de proposito - quem procura Termos procura, e quem
   nao procura nao deve tropecar neles. */
.ep-retorno-legais {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
}
.ep-retorno-legais a {
  color: rgb(231 239 236 / 62%);
  text-decoration: none;
  font-size: 12px;
  border-bottom: 1px solid transparent;
}
.ep-retorno-legais a:hover,
.ep-retorno-legais a:focus-visible { color: #fff; border-bottom-color: #55d6aa; }

.ep-retorno-identificacao {
  display: block;
  margin-top: 6px;
  color: rgb(231 239 236 / 45%);
  font-size: 11.5px;
}