/* ==================================================================
   01 · HERO  (widget fp-hero)

   Copiado do lab (lab/home/secoes/hero/hero.css), que fica congelado como
   referencia aprovada. A partir daqui, este arquivo e o que vale.

   Titulo a esquerda; coluna da direita aberta pelo marquee dos cinco
   servicos em contorno; F saindo pela base a esquerda. Sem o marquee
   (paginas internas), ver o fim do arquivo.

   Contorno neutro quer dizer disponivel; contorno na cor de destaque quer
   dizer escolhido. Aqui, sobre o papel, o destaque e o vermelho.
   ================================================================== */

.hero{
  position:relative;
  overflow:clip;
  height:100svh;
  min-height:40rem;
  background:var(--paper);
  color:var(--fg);
}

.hero__grade{
  position:relative;
  z-index:2;
  height:100%;
  container-type:inline-size;
  display:grid;
  /* As tres variaveis com valor padrao sao os controles do widget no
     Elementor: proporcao das colunas, respiro no topo e tamanho do F. */
  grid-template-columns:minmax(0,var(--col-e,1fr)) minmax(0,var(--col-d,1fr));
  column-gap:var(--gutter);
  align-content:start;
  align-items:start;
  padding-top:calc(var(--topo) + var(--respiro, clamp(1rem,4.5vh,3.75rem)));
  /* Usadas pelos filhos, onde cqw e a largura util desta caixa.
     O divisor e a largura, em em, que cabe numa linha do titulo: quanto
     maior, menor o corpo. Com 9.6, o titulo da home (17 palavras) fica em
     seis linhas parelhas e por volta de 73px numa tela de 1920, e a maior
     palavra ("WooCommerce", quase 7 em) cabe folgada na coluna. Os outros
     dois limites seguram o corpo em tela baixa e em tela muito larga. */
  --fs-h1:min(calc((100cqw - var(--gutter)) / 2 / 9.6), 9.5vh, 5.7rem);
  --lh-h1:.93;
  --chapeu-mb:clamp(1rem,2.6vh,1.75rem);
  --fs-mq:clamp(2rem,min(3.7vw,6.8vh),4.5rem);
}

.hero__titulo{grid-column:1}
/* Chapeu: a linha pequena acima do titulo. E so uma linha de apoio, nao um
   titulo do documento. */
.hero__chapeu{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.75rem;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin-bottom:var(--chapeu-mb);
}
/* O H1 da pagina. "balance" reparte as palavras entre as linhas, em vez de
   deixar uma linha curta no meio; onde o navegador nao souber equilibrar,
   a quebra normal continua valendo. */
.hero__h1{
  font-family:var(--font-display);
  font-weight:900;
  font-size:var(--fs-h1);
  line-height:var(--lh-h1);
  letter-spacing:-.042em;
  color:var(--navy);
  text-wrap:balance;
}

/* A coluna da direita comeca de modo que o marquee fique centrado na
   terceira linha do titulo. */
.hero__lado{
  grid-column:2;
  min-width:0;
  margin-top:calc(1.05rem + var(--chapeu-mb) + 2 * var(--lh-h1) * var(--fs-h1) + (var(--lh-h1) * var(--fs-h1) - 1.3 * var(--fs-mq)) / 2);
}

/* ---- marquee ------------------------------------------------------- */

.marquee{
  --fade:clamp(1.5rem,3.2vw,3.5rem);
  position:relative;
  /* Sangra ate a borda direita da tela; o que passar e recortado pela
     secao. */
  margin-right:calc(-1 * (var(--margem) + max(0px, (100vw - var(--max)) / 2)));
  overflow:hidden;
  padding-block:.15em;
  font-size:var(--fs-mq);
  line-height:1;
  /* Esmaece so na borda da coluna; nunca passa por tras do titulo. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade));
  mask-image:linear-gradient(90deg,transparent 0,#000 var(--fade));
}
.marquee__faixa{
  display:flex;
  width:max-content;
  animation:marquee var(--mq-dur,90s) linear infinite;
}
.marquee:hover .marquee__faixa,.marquee:focus-within .marquee__faixa{animation-play-state:paused}
.parado .marquee__faixa{animation:none}
@keyframes marquee{to{transform:translateX(-50%)}}

.marquee__trilho{
  --mq-vao:.8em;
  display:flex;
  gap:var(--mq-vao);
  padding-right:var(--mq-vao);
}
/* A Outfit desenha letras como W, R e D com contornos sobrepostos; so com
   traco, as linhas internas aparecem. O traco e pintado antes e o miolo da
   letra, na cor do fundo, cobre essas linhas e a metade de dentro do traco.
   Por isso o traco tem o dobro da espessura que se ve. */
.marquee__item{
  --traco:clamp(1.25px,.1vw,2px);
  display:block;
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:.01em;
  text-transform:uppercase;
  white-space:nowrap;
  -webkit-text-fill-color:var(--paper);
  -webkit-text-stroke:calc(2 * var(--traco)) var(--navy);
  paint-order:stroke fill;
  transition:-webkit-text-stroke-color .35s var(--ease-out);
}
.marquee__item:hover,.marquee__item:focus-visible{-webkit-text-stroke-color:var(--red)}
.marquee__item:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}

/* ---- texto de apoio ----------------------------------------------- */

.hero__apoio{
  margin-top:clamp(1.25rem,3.6vh,2.5rem);
  max-width:46ch;
  font-size:var(--t-lead);
  line-height:1.45;
  color:var(--navy);
  text-wrap:pretty;
}
.hero__cta{margin-top:clamp(1.5rem,4.5vh,3.25rem)}
.hero__prova{
  margin-top:clamp(1.25rem,3.4vh,2.25rem);
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono-sm);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---- F -------------------------------------------------------------
   So o F do simbolo (f_background.svg), sem brilho. A haste alinha com a
   margem da caixa (a margem vazia do SVG a esquerda e 33.84 de 645.22).
   O topo e calculado em hero.js. */
.marca-f{
  /* --fw-hero vem do controle "Tamanho do F" no widget. */
  --fw:var(--fw-hero, min(48vw,100vh));
  position:absolute;
  z-index:1;
  pointer-events:none;
  top:64%;
  width:var(--fw);
  aspect-ratio:645.22 / 630;
  left:calc(var(--margem) + max(0px, (100% - var(--max)) / 2) - var(--fw) * 33.84 / 645.22);
}
.marca-f img{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* ------------------------------------------------------------------
   Abaixo de 1100px
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .hero{height:auto;min-height:0;padding-bottom:52vw}
  .hero__grade{
    height:auto;
    grid-template-columns:minmax(0,1fr);
    padding-top:calc(var(--topo) + 1.5rem);
    --fs-h1:min(9.43vw, 100cqw / 9.6, 4.56rem);
    --fs-mq:clamp(2rem,10vw,3.5rem);
  }
  .hero__lado{grid-column:1;margin-top:clamp(1.75rem,6vw,2.5rem)}
  /* Na tela estreita o marquee vai de borda a borda; nao ha titulo ao
     lado para proteger. */
  .marquee{margin-inline:calc(-1 * var(--margem));-webkit-mask-image:none;mask-image:none}
  .marca-f{--fw:92vw}
}

/* ------------------------------------------------------------------
   Sem marquee (chave "Mostrar o marquee" desligada): paginas internas

   Aprovado no lab (lab/especialista, 2026-09-18). Mesmas pecas, outra
   composicao:
     - titulo maior: divisor 8.4 em vez de 9.6. O 9.6 foi feito para as 17
       palavras do H1 da home; com um H1 de 9 palavras ele deixava um vao
       de 210px ate o F, a 1440;
     - a coluna da direita comeca numa linha de leitura: a linha de base da
       primeira linha do apoio e a da quarta linha do H1 (--linha-apoio),
       como a home faz com o marquee. Na Outfit o ascendente mede 1em e o
       descendente .26em; numa linha de altura L a linha de base fica a
       (L - 1.26)/2 + 1 do topo da linha, em em.
   ------------------------------------------------------------------ */
.hero--sem-marquee .hero__grade{
  --fs-h1:min(calc((100cqw - var(--gutter)) / 2 / 8.4), 12.5vh, 7.5rem);
  --fs-apoio:var(--t-lead);
  --lh-apoio:1.45;
}
.hero--sem-marquee .hero__lado{
  --linha-apoio:4;
  margin-top:calc(.75rem * 1.4 + var(--chapeu-mb)
    + (var(--linha-apoio) - 1) * var(--lh-h1) * var(--fs-h1)
    + ((var(--lh-h1) - 1.26) / 2 + 1) * var(--fs-h1)
    - ((var(--lh-apoio) - 1.26) / 2 + 1) * var(--fs-apoio));
}
.hero--sem-marquee .hero__apoio{
  margin-top:0;
  font-size:var(--fs-apoio);
  line-height:var(--lh-apoio);
}

@media (max-width:1099.98px){
  .hero--sem-marquee .hero__grade{--fs-h1:min(10.8vw, 100cqw / 8.4, 5.2rem)}
  .hero--sem-marquee .hero__lado{margin-top:clamp(1.75rem,6vw,2.5rem)}
}

/* ------------------------------------------------------------------
   Cortina: a secao seguinte (Servicos na home, Definicao nas paginas
   internas) sobe por cima do hero preso.

   Quem fica preso e o involucro do widget, e nao a secao: a secao ocupa
   o involucro inteiro e nao teria para onde andar. O limite do sticky e o
   container do Elementor, por isso os dois widgets precisam estar no mesmo
   container, um depois do outro. As classes sao postas pelo JS da secao
   que cobre, so quando a cortina cabe (desktop com altura minima).
   ------------------------------------------------------------------ */
.cortina .fp-cortina-hero{position:sticky;top:0;z-index:1}