/* ============================================================
   INSTITUTO LOBO DO SERTAO — Sistema visual
   Paleta extraida do logo: preto absoluto, sol vermelho, creme.
   ============================================================ */

:root{
  /* --- Cor --- */
  --preto:        #000000;
  --breu:         #0A0A0A;   /* fundo base    */
  --breu-alto:    #121110;   /* secao elevada */
  --carvao:       #1C1A18;   /* borda / card  */

  --sol:          #E2231A;   /* vermelho do sol  */
  --sol-claro:    #FF4438;   /* brilho / hover   */

  --creme:        #F2EDE3;   /* texto principal  */
  --creme-meio:   #C9C2B6;   /* texto secundario */
  --creme-fraco:  #8A847A;   /* legenda / meta   */

  /* --- Tipografia ---
     Anton:   condensada, macica, caixa alta. A letra de cartaz de cordel.
              E dela que vem a cara cangaceira do site.
     Archivo: grotesca robusta para o texto corrido e os numeros. */
  --display: "Anton", "Arial Narrow", "Haettenschweiler", sans-serif;
  --sans:    "Archivo", -apple-system, "Segoe UI", Roboto, sans-serif;
  /* A serifa entra so nas palavras-chave. O contraste entre a
     condensada bruta e a serifa inclinada e o que da, ao mesmo
     tempo, forca e autoridade — uma fonte so nao faz as duas. */
  --serifa:  "Instrument Serif", Georgia, "Times New Roman", serif;

  /* --- Ritmo --- */
  --gut:      clamp(20px, 5vw, 40px);
  --secao:    clamp(72px, 11vw, 140px);
  --max:      1160px;
  --max-txt:  680px;

  --raio:     14px;
  --borda:    1px solid var(--carvao);
  --transicao: 260ms cubic-bezier(.2,.7,.3,1);
}

/* ============================================================
   Base
   ============================================================ */

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--breu);
  color:var(--creme);
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  font-variation-settings:"wdth" 94;
  line-height:1.62;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; }

::selection{ background:var(--sol); color:#fff; }

/* ------------------------------------------------------------
   Grao de filme.
   Uma camada fina de ruido por cima de tudo. E o que faz o preto
   parecer papel e nao tela — tira a cara de modelo pronto.
   ------------------------------------------------------------ */
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:300;
  pointer-events:none;
  opacity:.075;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* Fica fora da tela e só aparece quando recebe o foco. É o
   primeiro elemento da página: quem usa teclado ou leitor de tela
   salta o menu inteiro em vez de tabular item por item. */
.pular{
  position:absolute;
  top:-120px; left:16px;
  z-index:200;
  padding:14px 26px;
  background:var(--sol);
  color:#fff;
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  border-radius:0 0 var(--raio) var(--raio);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
  transition:top 180ms ease;
}
.pular:focus{ top:0; }

/* O <main> recebe foco por programa (tabindex="-1") quando o link
   e usado, mas nao deve desenhar contorno por isso. */
main:focus{ outline:none; }

a:focus-visible,button:focus-visible{
  outline:2px solid var(--sol-claro);
  outline-offset:3px;
  border-radius:4px;
}

/* ============================================================
   Tipografia
   ============================================================ */

/* Os brados: Anton, caixa alta, entrelinha curta.
   Condensada e pesada o bastante para funcionar como cartaz. */
h1,h2{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  /* Entrelinha nunca abaixo de 1: em portugues os acentos
     da caixa alta (A~, E/, C,) sobem alto e batem na linha
     de cima se a caixa da linha for menor que a letra. */
  line-height:1.0;
  letter-spacing:.004em;
  margin:0;
  text-wrap:balance;
}

h1{ font-size:clamp(44px, 7.4vw, 92px); line-height:.98; }
h2{ font-size:clamp(32px, 5.2vw, 62px); line-height:1.0; }

/* A MISTURA: a palavra que carrega o sentido sai da caixa alta
   condensada e vira serifa inclinada, em caixa mista. E o unico
   lugar onde a segunda fonte aparece — por isso funciona. */
h1 em, h2 em{
  font-family:var(--serifa);
  font-style:italic;
  font-weight:400;
  text-transform:none;
  font-size:1.16em;
  line-height:.9;
  letter-spacing:-.015em;
  color:var(--sol);
}

/* Titulo de cartao: Archivo. Anton em tudo cansaria e
   atrapalharia a leitura em texto miudo. */
h3{
  font-family:var(--sans);
  font-weight:700;
  font-variation-settings:"wdth" 92;
  font-size:clamp(19px, 2.1vw, 23px);
  line-height:1.22;
  letter-spacing:-.012em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; text-wrap:pretty; }

/* Etiqueta de secao — caixa alta e tracking aberto, como o "INSTITUTO" do logo */
.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--sol);
  margin:0 0 22px;
}
.etiqueta::before{
  content:"";
  width:26px;
  height:1px;
  background:var(--sol);
  flex:none;
}

.subtitulo{
  max-width:var(--max-txt);
  color:var(--creme-meio);
  font-size:clamp(16px,1.9vw,19px);
  margin-top:20px;
}

/* Numeros — Archivo 800 em largura cheia, tabular, nunca serifado.
   Formas geometricas regulares, sem nenhuma inclinacao. */
.numero{
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:"wdth" 100;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  letter-spacing:-.035em;
  line-height:1;
}

/* ============================================================
   Layout
   ============================================================ */

.env{
  width:100%;
  max-width:var(--max);
  margin-inline:auto;
  padding-inline:var(--gut);
}

section{ padding-block:var(--secao); position:relative; }
.fundo-alto{ background:var(--breu-alto); }

.cabecalho-secao{ max-width:var(--max-txt); margin-bottom:clamp(40px,6vw,68px); }

/* ============================================================
   Botoes
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  border-radius:100px;
  border:1px solid transparent;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:transform var(--transicao), background var(--transicao),
             border-color var(--transicao), box-shadow var(--transicao);
}
.btn svg{ flex:none; }

.btn-sol{
  background:var(--sol);
  color:#fff;
  box-shadow:0 8px 30px -10px rgba(226,35,26,.75);
}
.btn-sol:hover{
  background:var(--sol-claro);
  transform:translateY(-2px);
  box-shadow:0 14px 38px -12px rgba(255,68,56,.85);
}

.btn-linha{
  background:transparent;
  color:var(--creme);
  border-color:#2E2A26;
}
.btn-linha:hover{
  border-color:var(--creme-fraco);
  transform:translateY(-2px);
}

/* ============================================================
   Cabecalho
   ============================================================ */

.topo{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  transition:background var(--transicao), border-color var(--transicao);
  border-bottom:1px solid transparent;
}
.topo.preso{
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--carvao);
}

.topo-linha{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.marca{ display:flex; align-items:center; gap:13px; flex:none; }
/* A marca de verdade, recortada do logo (sem o texto).
   O preto dela ja virou transparencia no proprio arquivo,
   entao ela assenta em qualquer fundo. */
.marca-selo{
  height:44px;
  width:auto;
  flex:none;
}

/* O logo inteiro, no rodape */
.marca-cheia{ display:block; }
.marca-cheia img{
  width:100%;
  max-width:230px;
  height:auto;
}
.marca-texto{ display:flex; flex-direction:column; line-height:1; }
.marca-texto b{
  font-family:var(--display);
  font-size:19px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.012em;
  white-space:nowrap;
}
.marca-texto span{
  font-size:8.5px;
  font-weight:600;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--creme-fraco);
  margin-top:5px;
}

.menu{ display:flex; align-items:center; gap:32px; flex:none; }
.menu a{
  font-size:13.5px;
  font-weight:500;
  color:var(--creme-meio);
  position:relative;
  white-space:nowrap;
  flex:none;
  transition:color var(--transicao);
}
.menu a::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-6px;
  height:1px;
  background:var(--sol);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--transicao);
}
.menu a:hover{ color:var(--creme); }
.menu a:hover::before{ transform:scaleX(1); }

.topo-acao{ display:flex; align-items:center; gap:14px; flex:none; }
.topo-acao .btn{ padding:12px 22px; font-size:13.5px; }

/* Botao sanduiche */
.sanduiche{
  display:none;
  width:44px; height:44px;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid var(--carvao);
  border-radius:11px;
}
.sanduiche span{
  display:block;
  width:18px; height:1.5px;
  background:var(--creme);
  position:relative;
  transition:background 140ms;
}
.sanduiche span::before,.sanduiche span::after{
  content:"";
  position:absolute;
  left:0;
  width:18px; height:1.5px;
  background:var(--creme);
  transition:transform var(--transicao);
}
.sanduiche span::before{ top:-6px; }
.sanduiche span::after{ top:6px; }
.sanduiche.aberto span{ background:transparent; }
.sanduiche.aberto span::before{ transform:translateY(6px) rotate(45deg); }
.sanduiche.aberto span::after{ transform:translateY(-6px) rotate(-45deg); }

/* Gaveta do celular */
.gaveta{
  position:fixed;
  inset:76px 0 auto 0;
  z-index:99;
  background:rgba(10,10,10,.98);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--carvao);
  padding:8px var(--gut) 30px;
  display:none;
  flex-direction:column;
  text-align:center;
}
.gaveta.aberta{ display:flex; }
.gaveta a{
  padding:17px 0;
  font-size:15px;
  font-weight:500;
  color:var(--creme-meio);
  border-bottom:1px solid var(--carvao);
}
.gaveta a:last-of-type{ border-bottom:0; }
.gaveta .btn{ margin-top:20px; }

/* ============================================================
   Heroi
   ============================================================ */

.heroi{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:130px 90px;
  overflow:hidden;
  background:var(--preto);
}

/* A paisagem: sol, serra e mandacarus, num arquivo so */
.heroi-cena{
  position:absolute;
  left:0; right:0; bottom:0;
  height:min(88%, 780px);
  background-image:url("../img/marca/sertao.svg");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  pointer-events:none;
  z-index:0;
}

/* Veu que costura o heroi com a proxima secao */
.heroi-veu{
  position:absolute;
  inset:auto 0 0 0;
  height:140px;
  background:linear-gradient(to bottom, transparent, var(--breu) 94%);
  z-index:2;
  pointer-events:none;
}

.heroi .env{ position:relative; z-index:3; }
.heroi-texto{ max-width:960px; }



.heroi-frase{
  max-width:600px;
  margin-top:26px;
  font-size:clamp(16.5px,2vw,19.5px);
  color:var(--creme-meio);
}

.heroi-acoes{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:40px;
}

.heroi-selo{
  display:inline-flex;
  align-items:center;
  gap:11px;
  margin-bottom:26px;
  padding:8px 16px 8px 10px;
  border:1px solid var(--carvao);
  border-radius:100px;
  background:rgba(255,255,255,.02);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--creme-meio);
}
.heroi-selo i{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--sol);
  box-shadow:0 0 0 4px rgba(226,35,26,.18);
  flex:none;
  font-style:normal;
}

/* ============================================================
   DUAS OPCOES DE TOPO
   ------------------------------------------------------------
   A paisagem desenhada saiu. No lugar, duas propostas:

   .heroi--foto   foto real, nitida, com sombra so do lado do
                  texto (em vez de escurecer a foto inteira)

   .heroi--marca  a marca de verdade, grande e discreta ao
                  fundo, com o brilho do sol por tras
   ============================================================ */

/* ---------- OPCAO 1: foto real ---------- */

.heroi--foto .heroi-foto{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 32%;
  background-repeat:no-repeat;
  pointer-events:none;
  /* sem filtro: a foto entra nitida e colorida */
}

/* A sombra nasce do lado do texto e morre antes da foto.
   Assim a imagem continua viva e o texto continua legivel. */
.heroi--foto .heroi-sombra{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(6,6,6,.96) 0%,
      rgba(6,6,6,.90) 26%,
      rgba(6,6,6,.60) 48%,
      rgba(6,6,6,.18) 68%,
      rgba(6,6,6,.30) 100%),
    linear-gradient(to bottom,
      rgba(6,6,6,.72) 0%,
      transparent 24%,
      transparent 62%,
      var(--breu) 100%);
}

/* um toque do vermelho da marca, para a foto nao ficar neutra */
.heroi--foto .heroi-tinta{
  position:absolute;
  inset:0;
  pointer-events:none;
  mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 76% 42%,
    rgba(226,35,26,.30), transparent 62%);
}

/* ---------- OPCAO 2: a marca ao fundo ---------- */

.heroi--marca .heroi-brilho{
  position:absolute;
  left:68%; top:52%;
  width:min(150vw, 1200px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(226,35,26,.34) 0%,
    rgba(226,35,26,.20) 40%,
    rgba(140,22,15,.10) 64%,
    transparent 78%);
}

.heroi--marca .heroi-marca{
  position:absolute;
  right:-6%;
  top:50%;
  transform:translateY(-50%);
  width:min(62vw, 760px);
  aspect-ratio:770/740;
  background-image:url("../img/marca/logo-marca.png");
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
  opacity:.5;
  pointer-events:none;
}

.heroi--marca .heroi-veu{
  height:100%;
  background:
    linear-gradient(95deg,
      rgba(8,8,8,.94) 0%,
      rgba(8,8,8,.80) 34%,
      rgba(8,8,8,.30) 58%,
      transparent 80%),
    linear-gradient(to bottom, transparent 72%, var(--breu) 100%);
}

/* no celular as duas recuam: o texto manda */
@media (max-width:820px){
  .heroi--foto .heroi-foto{ background-position:center 28%; }
  .heroi--foto .heroi-sombra{
    background:linear-gradient(to bottom,
      rgba(6,6,6,.84) 0%,
      rgba(6,6,6,.78) 46%,
      rgba(6,6,6,.88) 72%,
      var(--breu) 100%);
  }
  .heroi--marca .heroi-marca{
    right:auto; left:50%;
    transform:translate(-50%,-50%);
    width:min(115vw, 620px);
    opacity:.26;
  }
  .heroi--marca .heroi-veu{
    background:linear-gradient(to bottom,
      rgba(8,8,8,.78) 0%,
      rgba(8,8,8,.70) 55%,
      var(--breu) 100%);
  }
}

/* ============================================================
   Numeros
   ============================================================ */

.faixa-numeros{
  border-block:var(--borda);
  background:var(--breu-alto);
  padding-block:clamp(44px,6vw,64px);
}
.numeros{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,4vw,40px);
}
.num-item{ text-align:center; }
.num-item .numero{
  display:block;
  font-size:clamp(40px,6.4vw,62px);
  color:var(--creme);
}
.num-item .numero i{
  font-style:normal;
  color:var(--sol);
  font-size:.6em;
  vertical-align:.18em;
  margin-right:2px;
}
.num-item small{
  display:block;
  margin-top:12px;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--creme-fraco);
}

/* No celular tres numeros lado a lado nao cabem: a 390px sobram
   ~100px por coluna e "+5.000" precisa de ~129px, o que empurrava
   a home inteira para o lado. Aqui eles viram lista, com o numero
   e o rotulo na mesma linha, separados por fio. */
@media (max-width:640px){
  .numeros{
    grid-template-columns:1fr;
    gap:0;
  }
  .num-item{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:baseline;
    gap:14px;
    text-align:left;
    padding-block:18px;
    border-top:var(--borda);
  }
  .num-item:first-child{ border-top:0; padding-top:0; }
  .num-item:last-child{ padding-bottom:0; }
  .num-item .numero{ font-size:clamp(34px,10vw,46px); }
  .num-item small{ margin-top:0; letter-spacing:.14em; }
}

/* ============================================================
   Parede de clientes
   ------------------------------------------------------------
   Texto de um lado, grade 3x3 de logos do outro. O texto nao
   fica em cima da grade por acaso: quem le da esquerda para a
   direita recebe primeiro a afirmacao ("eles confiam") e so
   depois a prova (os logos). Invertido, a prova chega sem
   contexto.

   Os logos vao todos para um tom claro unico. Marca colorida
   com fundo branco em cima de preto parece adesivo colado, e
   quinze cores brigando entre si viram colcha de retalhos. A
   cor da marca acende so quando o dedo passa por cima — ali ela
   vira recompensa, nao ruido.
   ============================================================ */

.clientes{
  display:grid;
  grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(40px,6vw,88px);
  align-items:center;
}

.clientes-dizer h2{ margin:0; }
.clientes-dizer .subtitulo{ margin-top:18px; max-width:30ch; }

.clientes-parede{
  display:grid;
  /* minmax(0,1fr) e nao 1fr: "1fr" carrega um minimo automatico
     do tamanho do conteudo, entao uma imagem de 299px de largura
     natural empurra a coluna para 299px e a grade estoura o
     container. Com minmax(0,...) a coluna pode encolher. */
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2.6vw,30px);
}

.cliente{
  display:grid;
  place-items:center;
  /* altura igual para todos: logo largo e logo alto ocupam a
     mesma caixa, senao a grade fica desalinhada */
  aspect-ratio:16/7;
  padding:clamp(10px,1.6vw,18px);
  border-radius:10px;
  transition:background var(--transicao);
}

.cliente img{
  /* "--escala" permite acertar um logo que, pelo formato do
     arquivo, aparece maior ou menor que os vizinhos. Logo largo
     e baixo encolhe demais; logo quadrado preenche. O olho le
     isso como "essa marca e mais importante", o que nao e
     verdade — e so geometria. Padrao 1, ajustar caso a caso. */
  --escala:1;
  max-width:calc(100% * var(--escala));
  max-height:calc(100% * var(--escala));
  width:auto; height:auto;
  object-fit:contain;
  /* tira a cor e clareia: funciona tanto para logo escuro
     quanto para logo claro, sem precisar de arte diferente */
  filter:grayscale(1) brightness(0) invert(1) opacity(.62);
  transition:filter var(--transicao), transform var(--transicao);
}

.cliente:hover{ background:rgba(255,255,255,.04); }
.cliente:hover img{
  filter:none;
  transform:scale(1.04);
}

/* Quem prefere menos movimento na tela nao recebe o zoom */
@media (prefers-reduced-motion:reduce){
  .cliente:hover img{ transform:none; }
}

@media (max-width:900px){
  .clientes{
    grid-template-columns:1fr;
    gap:clamp(32px,5vw,44px);
  }
  .clientes-dizer .subtitulo{ max-width:48ch; }
}

@media (max-width:420px){
  /* a 3 colunas num celular estreito cada logo fica ilegivel */
  .clientes-parede{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   Grades de cartao
   ============================================================ */

.grade{ display:grid; gap:clamp(16px,2.2vw,22px); }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }

.cartao{
  background:var(--breu-alto);
  border:var(--borda);
  border-radius:var(--raio);
  padding:clamp(26px,3vw,34px);
  display:flex;
  flex-direction:column;
  transition:border-color var(--transicao), transform var(--transicao);
}
.cartao:hover{
  border-color:#2E2A26;
  transform:translateY(-3px);
}
.fundo-alto .cartao{ background:var(--breu); }

.cartao h3{ margin-bottom:12px; }
.cartao p{ color:var(--creme-meio); font-size:15.5px; line-height:1.62; }

/* Icone em traco — nunca emoji */
.icone{
  width:46px; height:46px;
  flex:none;
  margin-bottom:20px;
  display:grid;
  place-items:center;
  border:1px solid var(--carvao);
  border-radius:12px;
  background:rgba(226,35,26,.05);
}
.icone svg{
  width:22px; height:22px;
  stroke:var(--sol);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Cartao numerado — consequencias */
.cartao-num .ordem{
  font-family:var(--sans);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:13px;
  color:var(--sol);
  display:inline-grid;
  place-items:center;
  width:30px; height:30px;
  border:1px solid rgba(226,35,26,.4);
  border-radius:50%;
  margin-bottom:18px;
}

/* ============================================================
   Sintomas — a dor
   ============================================================ */

.sintomas{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--carvao);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
}
.sintoma{
  background:var(--breu-alto);
  padding:clamp(24px,3vw,32px);
  text-align:center;
}
.sintoma svg{
  width:26px; height:26px;
  margin:0 auto 16px;
  stroke:var(--sol);
  stroke-width:1.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.sintoma b{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--creme);
  line-height:1.4;
}

/* ============================================================
   Keiler
   ============================================================ */

.keiler{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,68px);
  align-items:center;
}
.keiler-foto{
  position:relative;
  border-radius:var(--raio);
  overflow:hidden;
  border:var(--borda);
  background:var(--breu-alto);
  aspect-ratio:4/5;
}
.keiler-foto img{
  width:100%; height:100%;
  object-fit:cover;
  /* o retrato novo vai da coxa para cima; ancorar no alto
     mantem o rosto dentro do quadro em qualquer tamanho */
  object-position:center 16%;
}

/* Retrato ainda nao enviado — desenha as iniciais no lugar */
.keiler-foto.vazia{
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(226,35,26,.22), transparent 68%),
    var(--breu-alto);
}
.keiler-foto.vazia::after{
  content:attr(data-iniciais);
  font-family:var(--display);
  font-size:clamp(34px,7vw,52px);
  color:var(--creme-meio);
  letter-spacing:.04em;
  background:none;
  position:static;
  inset:auto;
}
.keiler-foto::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), transparent 48%);
  pointer-events:none;
}
.keiler-assinatura{
  margin-top:30px;
  padding-top:24px;
  border-top:var(--borda);
}
.keiler-assinatura b{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:23px;
  text-transform:uppercase;
  letter-spacing:.015em;
}
.keiler-assinatura span{
  font-size:12.5px;
  color:var(--creme-fraco);
  letter-spacing:.06em;
}

.citacao{
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(22px,3vw,34px);
  line-height:1.06;
  letter-spacing:.006em;
  color:var(--creme);
  margin:28px 0;
  padding-left:22px;
  border-left:2px solid var(--sol);
}

/* ============================================================
   O livro — duas faces que giram
   ------------------------------------------------------------
   Um lado apresenta Keiler como coautor. Ao clicar na foto, o
   quadro gira e mostra o livro; o texto ao lado troca junto.
   Clicar de novo volta.

   Os dois textos ficam na MESMA celula de grade, empilhados.
   Assim a altura da secao e sempre a do maior e a pagina nao
   da um salto quando o texto troca.
   ============================================================ */

.livro{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(40px,6vw,86px);
  align-items:center;
}

/* ---------- o quadro que gira ---------- */

.virador{
  position:relative;
  perspective:1800px;
}

.virador-caixa{
  position:relative;
  aspect-ratio:4/5;
  transform-style:preserve-3d;
  transition:transform 900ms cubic-bezier(.3,.85,.3,1);
}
.livro.virado .virador-caixa{ transform:rotateY(180deg); }

.virador-face{
  position:absolute;
  inset:0;
  border-radius:var(--raio);
  overflow:hidden;
  border:var(--borda);
  background:var(--breu-alto);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.virador-face img{ width:100%; height:100%; object-fit:cover; display:block; }
.virador-verso{ transform:rotateY(180deg); }

/* a area clicavel cobre o quadro inteiro */
.virador-gatilho{
  position:absolute;
  inset:0;
  z-index:4;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:var(--raio);
}
.virador-gatilho:focus-visible{
  outline:2px solid var(--sol-claro);
  outline-offset:4px;
}

/* o convite para clicar */
.virador-dica{
  position:absolute;
  left:50%;
  bottom:-15px;
  transform:translateX(-50%);
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 18px;
  border-radius:100px;
  background:rgba(14,13,12,.95);
  border:1px solid var(--carvao);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--creme-meio);
  white-space:nowrap;
  pointer-events:none;
  transition:border-color var(--transicao), color var(--transicao);
}
.virador-dica i{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--sol);
  box-shadow:0 0 0 4px rgba(226,35,26,.2);
  font-style:normal;
  flex:none;
}
.virador-gatilho:hover ~ .virador-dica{
  border-color:rgba(226,35,26,.5);
  color:var(--creme);
}

/* ---------- os dois textos, empilhados ---------- */

.livro-textos{ display:grid; }
.livro-lado{
  grid-area:1 / 1;
  transition:opacity 420ms ease, transform 480ms cubic-bezier(.2,.7,.3,1);
}
.livro-lado--obra{
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
}
.livro.virado .livro-lado--keiler{
  opacity:0;
  visibility:hidden;
  transform:translateY(-14px);
}
.livro.virado .livro-lado--obra{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* ---------- pecas dos dois lados ---------- */

.livro-selo{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  padding:9px 17px;
  border:1px solid rgba(226,35,26,.45);
  border-radius:100px;
  background:rgba(226,35,26,.10);
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sol);
}
.livro-selo svg{
  width:15px; height:15px;
  stroke:var(--sol); stroke-width:1.8; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
}

/* o titulo do capitulo dele */
.livro-capitulo{
  margin:26px 0 0;
  padding:18px 0 18px 22px;
  border-left:2px solid var(--sol);
}
.livro-capitulo small{
  display:block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--creme-fraco);
  margin-bottom:8px;
}
.livro-capitulo b{
  display:block;
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(18px,2.3vw,25px);
  line-height:1.1;
  letter-spacing:.012em;
  color:var(--creme);
}

.livro-ficha{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:26px;
}
.livro-ficha span{
  padding:9px 16px;
  border:var(--borda);
  border-radius:100px;
  background:var(--breu);
  font-size:13px;
  color:var(--creme-meio);
}

/* preco e compra, so no lado do livro */
.livro-oferta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:clamp(16px,2.4vw,28px);
  margin-top:clamp(26px,3.4vw,34px);
  padding-top:clamp(22px,3vw,28px);
  border-top:var(--borda);
}
.livro-preco{
  font-family:var(--sans);
  font-weight:800;
  font-variation-settings:"wdth" 100;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-size:clamp(34px,4.4vw,46px);
  line-height:1;
  letter-spacing:-.03em;
  color:var(--creme);
}
.livro-preco i{
  font-style:normal;
  font-size:.46em;
  color:var(--sol);
  vertical-align:.5em;
  margin-right:4px;
}
.livro-nota{
  font-size:14px;
  line-height:1.4;
  color:var(--creme-meio);
  max-width:20ch;
}
.livro-oferta .btn{ margin-left:auto; }

@media (max-width:640px){
  .livro-oferta{ justify-content:center; text-align:center; }
  .livro-oferta .btn{ margin-left:0; width:100%; }
  .livro-nota{ max-width:none; }
  .livro-capitulo{
    border-left:0;
    padding:18px 0 0;
    border-top:2px solid var(--sol);
    text-align:center;
  }
}

/* quem pediu menos movimento nao ve o giro: a troca e seca */
@media (prefers-reduced-motion:reduce){
  .virador-caixa{ transition:none !important; }
}

/* ============================================================
   Metodo — pilares e valores
   ============================================================ */

.pilares{
  display:grid;
  gap:1px;
  background:var(--carvao);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
}
.pilar{
  background:var(--breu);
  padding:clamp(24px,3vw,30px) clamp(24px,3vw,34px);
  display:flex;
  align-items:flex-start;
  gap:22px;
  transition:background var(--transicao);
}
.pilar:hover{ background:var(--breu-alto); }
.pilar .ordem{
  font-family:var(--sans);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  color:var(--sol);
  display:inline-grid;
  place-items:center;
  width:32px; height:32px;
  flex:none;
  border:1px solid rgba(226,35,26,.38);
  border-radius:50%;
  margin-top:2px;
}
.pilar div b{ display:block; font-size:17px; font-weight:600; margin-bottom:5px; }
.pilar div p{ color:var(--creme-meio); font-size:15px; }

.valores{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(32px,4vw,44px);
}
.valor{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:11px 18px;
  border:1px solid var(--carvao);
  border-radius:100px;
  background:var(--breu-alto);
  font-size:13.5px;
  font-weight:500;
  color:var(--creme-meio);
  transition:border-color var(--transicao), color var(--transicao);
}
.valor::before{
  content:"";
  width:5px; height:5px;
  border-radius:50%;
  background:var(--sol);
  flex:none;
}
.valor:hover{ border-color:rgba(226,35,26,.45); color:var(--creme); }

/* ============================================================
   Entregas
   ============================================================ */

.entregas{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:2px;
  background:var(--carvao);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
}
.entrega{
  background:var(--breu-alto);
  padding:20px clamp(20px,2.4vw,28px);
  display:flex;
  align-items:center;
  gap:15px;
  font-size:15.5px;
  font-weight:500;
}
.entrega svg{
  width:19px; height:19px;
  flex:none;
  stroke:var(--sol);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ============================================================
   Alcateia — declaracao da marca, com a paisagem ao fundo
   ============================================================ */

.declaracao{
  position:relative;
  overflow:hidden;
  background:var(--preto);
  min-height:min(82vh, 760px);
  display:flex;
  align-items:center;
  text-align:center;
  padding-block:clamp(90px,12vw,150px);
}

.declaracao-cena{
  position:absolute;
  inset:0;
  background-image:url("../img/marca/sertao.svg");
  background-repeat:no-repeat;
  background-position:center 62%;
  background-size:cover;
  pointer-events:none;
}

/* O veu escurece a paisagem o bastante para o texto ficar legivel */
.declaracao-veu{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      var(--breu) 0%,
      rgba(10,10,10,.60) 26%,
      rgba(10,10,10,.42) 50%,
      rgba(10,10,10,.72) 78%,
      var(--breu) 100%);
}

.declaracao .env{ position:relative; z-index:2; }
.declaracao-texto{ max-width:760px; margin-inline:auto; }
.declaracao .etiqueta{ justify-content:center; }

.declaracao .subtitulo{ margin-inline:auto; }

/* Os bordoes da casa */
/* Empilhados, um por linha. Em fila eles precisavam de 822px
   e so tinham 760 — quebravam em 2+1 e o terceiro herdava um
   divisor solto na frente. Empilhado tambem le melhor: vira
   credo, nao legenda. */
.bordoes{
  list-style:none;
  margin:clamp(36px,5vw,52px) auto 0;
  padding:0;
  max-width:560px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
}
.bordoes li{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(15px,1.7vw,19px);
  line-height:1.2;
  letter-spacing:.02em;
  color:var(--creme);
  text-align:center;
  padding:15px 8px;
  border-top:1px solid rgba(226,35,26,.42);
}
.bordoes li:first-child{ border-top:0; }

/* ============================================================
   Chamada final
   ============================================================ */

.chamada{
  position:relative;
  background:var(--preto);
  text-align:center;
  overflow:hidden;
}
.chamada-sol{
  position:absolute;
  left:50%; top:58%;
  width:min(120vw,900px);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,
    rgba(226,35,26,.26) 0%,
    rgba(226,35,26,.12) 46%,
    transparent 70%);
  pointer-events:none;
}
.chamada .env{ position:relative; z-index:2; }
.chamada h2{ max-width:16ch; margin-inline:auto; }
.chamada .subtitulo{ margin-inline:auto; text-align:center; }
.chamada .heroi-acoes{ justify-content:center; }

/* ============================================================
   Rodape
   ============================================================ */

.rodape{
  background:var(--breu-alto);
  border-top:var(--borda);
  /* a folga de baixo reserva espaco para o botao flutuante */
  padding-block:clamp(48px,6vw,70px) 96px;
}
.rodape-grade{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));
  gap:clamp(30px,5vw,60px);
}
.rodape h4{
  margin:0 0 18px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--creme-fraco);
}
.rodape-lista{ display:flex; flex-direction:column; gap:12px; }
.rodape-lista a,.rodape-lista span{
  font-size:14.5px;
  color:var(--creme-meio);
  transition:color var(--transicao);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.rodape-lista a:hover{ color:var(--sol); }
.rodape-lista svg{
  width:16px; height:16px;
  flex:none;
  stroke:var(--creme-fraco);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.rodape-sobre p{
  color:var(--creme-meio);
  font-size:14.5px;
  max-width:38ch;
  margin-top:18px;
}
/* Onde o Instituto fica. Endereço no rodapé é o que o Google usa
   para entender que a empresa é de Feira de Santana, e é o que
   quem contrata procura antes de mandar mensagem. */
.rodape-endereco{
  margin-top:20px;
  display:grid;
  gap:5px;
  font-style:normal;
  font-size:13.5px;
  line-height:1.5;
  color:var(--creme-fraco);
}
.rodape-endereco strong{
  color:var(--creme-meio);
  font-weight:700;
}

.rodape-fim a{
  color:var(--creme-fraco);
  text-decoration:none;
  transition:color var(--transicao);
}
.rodape-fim a:hover{ color:var(--sol); }

.rodape-fim{
  margin-top:clamp(40px,5vw,56px);
  padding-top:26px;
  border-top:var(--borda);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  font-size:12.5px;
  color:var(--creme-fraco);
}

/* ============================================================
   Prosa
   ------------------------------------------------------------
   Para as páginas que são só texto — política de privacidade e
   o que vier depois. Coluna estreita de propósito: texto legal
   largo ninguém lê. Sem nenhum enfeite das outras seções.
   ============================================================ */

.prosa{
  max-width:var(--max-txt);
  color:var(--creme-meio);
  font-size:16px;
  line-height:1.72;
}
.prosa > * + *{ margin-top:18px; }

.prosa h2{
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.12;
  margin-top:clamp(44px,5vw,64px);
  color:var(--creme);
}
.prosa h2:first-child{ margin-top:0; }

.prosa h3{
  font-family:var(--sans);
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--creme);
  margin-top:30px;
}

.prosa strong{ color:var(--creme); font-weight:700; }

.prosa a{
  color:var(--creme);
  text-decoration:underline;
  text-decoration-color:var(--sol);
  text-underline-offset:3px;
  text-decoration-thickness:2px;
}
.prosa a:hover{ color:var(--sol); }

.prosa ul{ list-style:none; padding:0; }
.prosa li{
  position:relative;
  padding-left:22px;
  margin-top:10px;
}
.prosa li::before{
  content:"";
  position:absolute;
  left:2px; top:.68em;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--sol);
}

/* A data da última revisão, no pé da página */
.prosa-data{
  margin-top:clamp(48px,6vw,72px);
  padding-top:22px;
  border-top:var(--borda);
  font-size:13px;
  color:var(--creme-fraco);
}

/* ============================================================
   Faixa de clientes (antes do rodape)
   ------------------------------------------------------------
   Fila que desliza de lado, com setas. Ultima coisa antes do
   contato: quem ja confiou.

   Nao anda sozinha de proposito. Carrossel automatico arranca a
   marca da frente de quem estava lendo, e a pessoa que queria
   conferir um nome especifico se irrita. Aqui quem manda e o
   dedo — seta, arrasto ou teclado.
   ============================================================ */

.faixa-clientes{
  background:var(--breu-alto);
  border-top:var(--borda);
  padding-block:clamp(40px,5vw,60px);
}
.faixa-clientes .etiqueta{
  justify-content:center;
  margin-bottom:clamp(24px,3vw,34px);
}

.faixa-palco{
  position:relative;
  display:flex;
  align-items:center;
  gap:clamp(6px,1.4vw,16px);
}

.faixa-trilho{
  list-style:none;
  margin:0;
  padding:0;
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:clamp(28px,4vw,60px);
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x proximate;
  /* esconde a barra de rolagem sem tirar a rolagem */
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.faixa-trilho::-webkit-scrollbar{ display:none; }

/* Cada marca numa plaquinha clara, na cor original.
   ------------------------------------------------------------
   A primeira versao pintava tudo de branco, como a referencia.
   Ficou bom para logo de desenho simples e DESTRUIU os de
   desenho detalhado: UNINASSAU, Atacadao Sao Roque e Teiu
   viraram manchas brancas sem forma, porque o vazado interno
   sumia junto.

   Soltar a cor sobre o fundo escuro tambem nao servia. Medi o
   brilho dos 25: oito ficam abaixo de 90 numa escala de 255 —
   Kumon (32), Tupperware (42), Prefeitura de Feira (40) e
   Embasa (68) sao praticamente pretos e sumiriam.

   A plaquinha clara resolve os dois: a marca vem na cor dela,
   com o desenho inteiro, e o fundo claro garante contraste
   independente de a marca ser escura ou clara. */

.faixa-item{
  flex:0 0 auto;
  scroll-snap-align:center;
  display:grid;
  place-items:center;
  /* altura e respiro viram variaveis para a imagem poder
     calcular o limite dela em medida ABSOLUTA — porcentagem nao
     funciona aqui (ver a nota na regra da imagem) */
  --altura:clamp(76px,9vw,98px);
  --respiro:clamp(12px,1.5vw,18px);
  width:clamp(140px,17vw,186px);
  height:var(--altura);
  padding:var(--respiro);
  border-radius:12px;
  background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,
             0 10px 26px -18px rgba(0,0,0,.9);
  transition:transform var(--transicao), box-shadow var(--transicao);
}
.faixa-item:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,
             0 16px 34px -18px rgba(226,35,26,.5);
}
.faixa-item img{
  /* Limite de altura em medida ABSOLUTA, nao em porcentagem.
     Dentro de uma grade com place-items:center o item nao e
     esticado, entao a area da grade nao tem altura definida — e
     qualquer porcentagem de altura (height:100% ou max-height:
     100%) e tratada como automatica e simplesmente ignorada. Foi
     assim que o logo quadrado do Natura saiu com 139px de altura
     dentro de uma caixa de 62px, cortado.
     Subtraindo o respiro da altura da plaquinha, a conta e
     absoluta e o navegador obedece. */
  max-width:100%;
  max-height:calc(var(--altura) - 2 * var(--respiro));
  width:auto;
  height:auto;
  object-fit:contain;
  /* cor original, sem filtro nenhum */
}

.faixa-seta{
  flex:none;
  width:40px; height:40px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:var(--borda);
  background:rgba(255,255,255,.03);
  color:var(--creme-meio);
  cursor:pointer;
  transition:background var(--transicao), color var(--transicao),
             border-color var(--transicao), opacity var(--transicao);
}
.faixa-seta svg{
  width:20px; height:20px;
  fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.faixa-seta:hover{
  background:rgba(226,35,26,.14);
  border-color:rgba(226,35,26,.5);
  color:var(--creme);
}
/* seta que nao leva a lugar nenhum nao fica clicavel */
.faixa-seta[disabled]{
  opacity:.25;
  cursor:default;
  pointer-events:none;
}

/* As bordas somem num degrade, para a fila parecer continuar
   em vez de ser cortada no meio de um logo. */
.faixa-trilho{
  /* degrade curto nas pontas: com plaquinha, apagar demais faz
     o cartao parecer rasgado em vez de continuar */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
          mask-image:linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent);
}

@media (prefers-reduced-motion:reduce){
  .faixa-trilho{ scroll-behavior:auto; }
  .faixa-item img:hover{ transform:none; }
}

@media (max-width:640px){
  .faixa-seta{ display:none; }   /* no celular o dedo arrasta */
  .faixa-trilho{
    gap:34px;
    -webkit-mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
            mask-image:linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  }
}

/* ============================================================
   Botao flutuante de WhatsApp
   ============================================================ */

.zap{
  position:fixed;
  right:20px; bottom:20px;
  z-index:90;
  width:56px; height:56px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--sol);
  box-shadow:0 10px 30px -8px rgba(226,35,26,.7);
  transform:translateY(22px) scale(.86);
  opacity:0;
  pointer-events:none;
  transition:transform var(--transicao), opacity var(--transicao),
             background var(--transicao);
}
.zap.visivel{ transform:none; opacity:1; pointer-events:auto; }
.zap:hover{ background:var(--sol-claro); }
.zap svg{ width:27px; height:27px; fill:#fff; }

/* ============================================================
   Revelacao ao rolar
   ============================================================ */

/* ============================================================
   Submenu do cabecalho (a ideia de mega-menu da Febracis,
   na escala certa para o tamanho deste site)
   ============================================================ */

.menu-item{ position:relative; display:flex; align-items:center; }

.menu-item > a.tem-seta::after{
  content:"";
  display:inline-block;
  width:5px; height:5px;
  margin-left:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--transicao);
  opacity:.75;
}
.menu-item:hover > a.tem-seta::after{ transform:translateY(0) rotate(45deg); }

.submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translate(-50%,10px);
  min-width:250px;
  padding:10px;
  background:rgba(14,13,12,.97);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:var(--borda);
  border-radius:var(--raio);
  box-shadow:0 26px 60px -24px rgba(0,0,0,.95);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}
/* a ponte invisivel evita o menu fechar quando o mouse desce */
.menu-item::after{
  content:"";
  position:absolute;
  top:100%; left:0; right:0;
  height:18px;
}
.menu-item:hover .submenu,
.menu-item:focus-within .submenu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.submenu a{
  display:block;
  padding:11px 14px;
  border-radius:9px;
  font-size:14px;
  font-weight:500;
  color:var(--creme-meio);
  white-space:nowrap;
  transition:background var(--transicao), color var(--transicao);
}
.submenu a::before{ display:none; }
.submenu a:hover{ background:rgba(226,35,26,.12); color:var(--creme); }
.submenu a b{
  display:block;
  font-weight:600;
  color:var(--creme);
  font-size:14px;
}
.submenu a small{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--creme-fraco);
  font-weight:400;
}

/* O item da pagina em que a pessoa esta */
.menu a.aqui{ color:var(--creme); }
.menu a.aqui::before{ transform:scaleX(1); }

/* ============================================================
   Heroi das paginas internas
   ============================================================ */

.heroi-pagina{
  position:relative;
  overflow:hidden;
  background:var(--preto);
  padding-block:clamp(130px,16vw,190px) clamp(56px,7vw,86px);
  border-bottom:var(--borda);
}
/* O heroi das paginas internas e mais baixo: a sombra precisa
   subir mais cedo para o titulo nao encostar na foto. */
.heroi-pagina.heroi--foto .heroi-sombra{
  background:
    linear-gradient(100deg,
      rgba(6,6,6,.96) 0%,
      rgba(6,6,6,.92) 30%,
      rgba(6,6,6,.66) 52%,
      rgba(6,6,6,.28) 72%,
      rgba(6,6,6,.40) 100%),
    linear-gradient(to bottom,
      rgba(6,6,6,.88) 0%,
      rgba(6,6,6,.42) 34%,
      rgba(6,6,6,.58) 72%,
      var(--breu) 100%);
}
.heroi-pagina.heroi--foto .heroi-foto{ background-position:center 38%; }
.heroi-pagina.heroi--foto .heroi-tinta{
  background:radial-gradient(ellipse at 78% 46%, rgba(226,35,26,.26), transparent 60%);
}
/* Faixa do topo mais alta, para foto com gente em pe caber.
   Medido: com 632px de faixa so 67% da foto aparecia e os
   rostos ficavam cortados; a partir de ~800px o grupo cabe. */
.heroi-pagina--alto{
  min-height:min(88vh, 840px);
  display:flex;
  align-items:flex-end;
  padding-block:clamp(150px,18vw,210px) clamp(44px,5vw,64px);
}
/* nessa faixa a sombra sobe menos, para nao comer os rostos */
.heroi-pagina--alto.heroi--foto .heroi-sombra{
  background:
    linear-gradient(100deg,
      rgba(6,6,6,.94) 0%,
      rgba(6,6,6,.86) 26%,
      rgba(6,6,6,.52) 46%,
      rgba(6,6,6,.14) 66%,
      rgba(6,6,6,.22) 100%),
    linear-gradient(to bottom,
      rgba(6,6,6,.70) 0%,
      rgba(6,6,6,.20) 30%,
      rgba(6,6,6,.34) 62%,
      var(--breu) 100%);
}

.heroi-pagina .env{ position:relative; z-index:3; }
.heroi-pagina h1{ font-size:clamp(40px,6.6vw,78px); }
.heroi-pagina .subtitulo{ margin-top:22px; }

/* Caminho de pao: onde a pessoa esta no site */
.trilha{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  margin:0 0 20px;
  padding:0;
  list-style:none;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--creme-fraco);
  font-weight:600;
}
.trilha li{ display:flex; align-items:center; gap:9px; }
.trilha li + li::before{
  content:"";
  width:12px; height:1px;
  background:var(--sol);
  flex:none;
}
.trilha a{ color:var(--creme-fraco); transition:color var(--transicao); }
.trilha a:hover{ color:var(--sol); }
.trilha [aria-current]{ color:var(--creme-meio); }

/* ============================================================
   Cartao de contato e sub-itens da gaveta
   ============================================================ */

/* O valor em destaque dentro do cartao de contato */
.cartao-destaque{
  margin-top:auto;
  padding-top:18px;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(17px,2vw,21px);
  letter-spacing:.012em;
  line-height:1.1;
  color:var(--sol);
  word-break:break-word;
  transition:color var(--transicao);
}
a.cartao:hover .cartao-destaque{ color:var(--sol-claro); }

/* O e-mail e longo demais para caixa alta condensada */
.cartao-destaque[data-email-texto]{
  text-transform:none;
  font-family:var(--sans);
  font-weight:700;
  font-size:clamp(14px,1.5vw,16px);
  letter-spacing:0;
}

/* Os cartoes que sao link precisam empurrar o destaque para baixo */
a.cartao{ justify-content:flex-start; }
a.cartao p:not(.cartao-destaque){ flex:1 0 auto; }

/* Sub-itens do menu no celular */
.gaveta .gaveta-sub{
  font-size:13.5px;
  color:var(--creme-fraco);
  padding:13px 0;
}
.gaveta .gaveta-sub::before{
  content:"";
  display:inline-block;
  width:14px; height:1px;
  background:var(--sol);
  vertical-align:middle;
  margin-right:9px;
  opacity:.8;
}

/* ============================================================
   Galeria de fotos de evento
   ------------------------------------------------------------
   As fotos entram levemente dessaturadas, para conversarem com
   o preto e o vermelho da marca. Ao passar o mouse, voltam a
   cor cheia e crescem de leve.
   ============================================================ */

/* Tres colunas: a galeria mostra A SALA (imersao, atencao e
   anotacao). O palco ja aparece no topo da pagina — repetir a
   mesma foto em dois lugares da pagina salta aos olhos. */
.galeria{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,2vw,20px);
}

.foto{
  position:relative;
  margin:0;
  aspect-ratio:3/2;
  border-radius:var(--raio);
  overflow:hidden;
  border:var(--borda);
  background:var(--breu-alto);
}
.foto img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.28) contrast(1.04);
  transform:scale(1.005);
  transition:transform 700ms cubic-bezier(.2,.7,.3,1), filter 500ms ease;
}
.foto:hover img{
  filter:none;
  transform:scale(1.045);
}

.foto figcaption{
  position:absolute;
  inset:auto 0 0 0;
  padding:52px clamp(18px,2.2vw,24px) clamp(16px,2vw,20px);
  background:linear-gradient(to top, rgba(0,0,0,.88) 12%, rgba(0,0,0,.45) 55%, transparent);
  font-size:14.5px;
  font-weight:500;
  line-height:1.35;
  color:var(--creme);
  pointer-events:none;
}
.foto figcaption b{
  display:block;
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(15px,1.7vw,18px);
  letter-spacing:.015em;
  margin-bottom:3px;
}
.foto figcaption span{
  color:var(--creme-meio);
  font-size:13.5px;
}

/* ============================================================
   Declaracao com foto de evento no lugar da paisagem
   ============================================================ */

.declaracao--foto .declaracao-cena{
  background-image:url("../img/eventos/auditorio-lotado-larga.jpg");
  background-position:center 38%;
  filter:grayscale(.42) contrast(1.06);
}
.declaracao--foto .declaracao-veu{
  background:
    radial-gradient(ellipse at 50% 58%, rgba(226,35,26,.26), transparent 68%),
    linear-gradient(to bottom,
      var(--breu) 0%,
      rgba(10,10,10,.80) 26%,
      rgba(10,10,10,.76) 58%,
      rgba(10,10,10,.92) 84%,
      var(--breu) 100%);
}

/* Fundo de foto numa secao comum */
.secao-foto{
  position:relative;
  overflow:hidden;
  background:var(--preto);
}
.secao-foto .fundo-foto{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 42%;
  background-repeat:no-repeat;
  filter:grayscale(.45) contrast(1.05);
  pointer-events:none;
}
.secao-foto .fundo-veu{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(to bottom,
    var(--breu) 0%,
    rgba(10,10,10,.86) 24%,
    rgba(10,10,10,.84) 62%,
    var(--breu) 100%);
}
.secao-foto .env{ position:relative; z-index:2; }

/* ============================================================
   Video com fachada
   ------------------------------------------------------------
   Mostra so a capa e o botao de play. O player do YouTube pesa
   cerca de 1,5 MB e so carrega quando a pessoa clica. Sem isso,
   uma pagina com seis videos abriria com 9 MB nas costas.
   ============================================================ */

.videos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,3vw,32px);
}

.video-item{ margin:0; }

.video{
  position:relative;
  display:block;
  width:100%;
  padding:0;
  aspect-ratio:16/9;
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
  background:var(--breu-alto);
  cursor:pointer;
}

/* ---------- Video em pe (9:16) ----------
   O quadro muda de proporcao e ganha um limite de altura: video
   em pe num monitor largo fica absurdamente alto se deixar solto.
   Centralizado na coluna, para nao parecer desalinhado. */
/* Quando o navegador nao da conta do formato. Melhor dizer do
   que deixar a pessoa encarando um retangulo preto. */
.video-erro{
  display:grid;
  place-items:center;
  height:100%;
  margin:0;
  padding:24px;
  text-align:center;
  font-size:14px;
  line-height:1.5;
  color:var(--creme-meio);
  background:var(--breu-alto);
}

.video--em-pe{
  aspect-ratio:9/16;
  /* Largura DEFINIDA, altura vinda da proporcao. A primeira
     versao usava width:auto + max-height e o quadro media 0x0:
     sem largura nem altura definidas o navegador resolve para
     zero e o video sumia da pagina. 304px a 9:16 da 540px de
     altura, que e o teto que queremos num monitor largo. */
  width:min(100%, 304px);
  margin-inline:auto;
}
/* no celular ele pode ocupar a largura toda, que ja e estreita */
@media (max-width:640px){
  .video--em-pe{
    width:100%;
    max-height:none;
  }
}

.video img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.3) contrast(1.05);
  transform:scale(1.004);
  transition:transform 700ms cubic-bezier(.2,.7,.3,1), filter 500ms ease;
}
.video:hover img,
.video:focus-visible img{
  filter:none;
  transform:scale(1.045);
}

/* o botao de play */
.video::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.18), rgba(0,0,0,.42));
  pointer-events:none;
  transition:background var(--transicao);
}
.video:hover::after{ background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.06), rgba(0,0,0,.3)); }

.video-play{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:clamp(58px,7vw,74px);
  height:clamp(58px,7vw,74px);
  border-radius:50%;
  background:var(--sol);
  display:grid;
  place-items:center;
  box-shadow:0 14px 40px -10px rgba(226,35,26,.8);
  pointer-events:none;
  z-index:2;
  transition:transform var(--transicao), background var(--transicao);
}
.video:hover .video-play{
  transform:translate(-50%,-50%) scale(1.09);
  background:var(--sol-claro);
}
.video-play svg{
  width:44%;
  height:44%;
  fill:#fff;
  margin-left:8%;
}

/* quando o player de verdade entra */
.video.tocando{ cursor:default; }
.video.tocando::after{ display:none; }
.video iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.video-legenda{
  margin-top:16px;
  padding-inline:2px;
}
.video-legenda b{
  display:block;
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(17px,2vw,21px);
  line-height:1.1;
  letter-spacing:.012em;
  color:var(--creme);
}
.video-legenda span{
  display:block;
  margin-top:7px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--creme-meio);
}

/* ============================================================
   Eventos
   ============================================================ */

.evento-cartao{
  display:flex;
  flex-direction:column;
  background:var(--breu-alto);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
  transition:border-color var(--transicao), transform var(--transicao);
}
.evento-cartao:hover{ border-color:#2E2A26; transform:translateY(-3px); }

.evento-arte{
  aspect-ratio:16/9;
  background:
    radial-gradient(circle at 50% 62%, rgba(226,35,26,.30), transparent 68%),
    var(--preto);
  position:relative;
  overflow:hidden;
}
.evento-arte img{ width:100%; height:100%; object-fit:cover; }

.evento-corpo{
  padding:clamp(22px,2.6vw,30px);
  display:flex;
  flex-direction:column;
  flex:1;
}

.evento-selo{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  margin-bottom:14px;
  padding:6px 13px;
  border-radius:100px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.evento-selo--proximo{
  background:rgba(226,35,26,.14);
  border:1px solid rgba(226,35,26,.45);
  color:var(--sol);
}
.evento-selo--realizado{
  background:rgba(255,255,255,.04);
  border:var(--borda);
  color:var(--creme-fraco);
}

.evento-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin:14px 0 18px;
  font-size:13.5px;
  color:var(--creme-meio);
}
.evento-meta span{ display:inline-flex; align-items:center; gap:8px; }
.evento-meta svg{
  width:15px; height:15px;
  flex:none;
  stroke:var(--sol);
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.evento-cartao p{ color:var(--creme-meio); font-size:15px; line-height:1.6; }
.evento-cartao .btn{ margin-top:auto; align-self:flex-start; }
.evento-corpo > p + .btn{ margin-top:22px; }

/* A ficha do evento, na pagina dele */
.ficha{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--carvao);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
}
.ficha div{
  background:var(--breu-alto);
  padding:clamp(20px,2.4vw,26px);
}
.ficha dt{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--creme-fraco);
  margin-bottom:9px;
}
.ficha dd{
  margin:0;
  font-family:var(--display);
  text-transform:uppercase;
  font-size:clamp(17px,2vw,21px);
  line-height:1.12;
  letter-spacing:.012em;
  color:var(--creme);
}

/* ============================================================
   Depoimentos
   ============================================================ */

.depoimentos{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(18px,2.4vw,24px);
}

.depoimento{
  display:flex;
  flex-direction:column;
  background:var(--breu-alto);
  border:var(--borda);
  border-radius:var(--raio);
  overflow:hidden;
  transition:border-color var(--transicao), transform var(--transicao);
}
.depoimento:hover{ border-color:#2E2A26; transform:translateY(-3px); }
.fundo-alto .depoimento{ background:var(--breu); }

/* quando o depoimento tem video, ele manda na composicao */
.depoimento .video{ border:0; border-radius:0; }

.depoimento-corpo{
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  flex:1;
}

/* as aspas grandes, em vermelho */
.depoimento blockquote{
  margin:0 0 24px;
  font-size:clamp(16px,1.9vw,18.5px);
  line-height:1.58;
  color:var(--creme);
  position:relative;
  padding-top:34px;
}
.depoimento blockquote::before{
  content:"\201C";
  position:absolute;
  top:-14px; left:-4px;
  font-family:Georgia, serif;
  font-size:76px;
  line-height:1;
  color:var(--sol);
  opacity:.55;
}

.depoimento-pessoa{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto;
  padding-top:20px;
  border-top:var(--borda);
}
.depoimento-rosto{
  width:48px; height:48px;
  flex:none;
  border-radius:50%;
  overflow:hidden;
  border:1px solid var(--carvao);
  background:
    radial-gradient(circle at 50% 40%, rgba(226,35,26,.26), transparent 70%),
    var(--breu-alto);
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-size:17px;
  letter-spacing:.02em;
  color:var(--creme-meio);
}
.depoimento-rosto img{ width:100%; height:100%; object-fit:cover; }

.depoimento-pessoa b{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--creme);
  line-height:1.25;
}
/* So a linha de cargo e empresa, que vem logo depois do nome.
   Antes isto era ".depoimento-pessoa span" e pegava TODOS os spans
   do bloco - inclusive o circulo das iniciais, que perdia o
   display:grid, encolhia para 13px e clareava. O circulo tem
   especificidade menor e perdia a disputa. */
.depoimento-pessoa b + span{
  display:block;
  margin-top:3px;
  font-size:13px;
  color:var(--creme-fraco);
  line-height:1.35;
}

/* ============================================================
   MOVIMENTO
   ------------------------------------------------------------
   Regra da casa: movimento serve para guiar o olho, nunca para
   chamar atencao para si. Nada pisca, nada gira, nada salta.
   Quem pediu menos movimento no sistema (prefers-reduced-motion)
   recebe a pagina inteira parada.
   ============================================================ */

/* ------------------------------------------------------------
   1. Revelacao em cadencia
   Os filhos de uma grade entram em sequencia, nao todos juntos.
   ------------------------------------------------------------ */

.revela{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 760ms cubic-bezier(.2,.7,.3,1),
             transform 760ms cubic-bezier(.2,.7,.3,1);
}
.revela.dentro{ opacity:1; transform:none; }

/* cada cartao entra um pouquinho depois do anterior */
.cadencia > *{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 700ms cubic-bezier(.2,.7,.3,1),
             transform 700ms cubic-bezier(.2,.7,.3,1);
}
.cadencia.dentro > *{ opacity:1; transform:none; }
.cadencia.dentro > *:nth-child(1){ transition-delay:0ms; }
.cadencia.dentro > *:nth-child(2){ transition-delay:90ms; }
.cadencia.dentro > *:nth-child(3){ transition-delay:180ms; }
.cadencia.dentro > *:nth-child(4){ transition-delay:270ms; }
.cadencia.dentro > *:nth-child(5){ transition-delay:360ms; }
.cadencia.dentro > *:nth-child(6){ transition-delay:450ms; }
.cadencia.dentro > *:nth-child(7){ transition-delay:540ms; }
.cadencia.dentro > *:nth-child(8){ transition-delay:630ms; }

/* ------------------------------------------------------------
   2. Parallax
   O fundo anda mais devagar que o texto. E o que da a sensacao
   de profundidade — de que a paisagem esta longe.
   ------------------------------------------------------------ */

[data-parallax]{
  will-change:transform;
  transition:none;
}

/* a cena do heroi fica maior que a area, para sobrar margem de
   deslocamento sem mostrar borda vazia */
.heroi-cena,
.declaracao-cena,
.secao-foto .fundo-foto{
  top:-12%;
  height:124%;
}
.heroi-cena{ top:auto; bottom:-12%; height:min(100%, 880px); }

/* ------------------------------------------------------------
   3. Barra de progresso da leitura
   ------------------------------------------------------------ */

.progresso{
  position:fixed;
  inset:0 0 auto 0;
  height:2px;
  z-index:110;
  background:transparent;
  pointer-events:none;
}
.progresso i{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(to right, var(--sol-claro), var(--sol));
  box-shadow:0 0 12px rgba(226,35,26,.65);
  transition:width 90ms linear;
}

/* ------------------------------------------------------------
   4. Voltar ao topo
   ------------------------------------------------------------ */

.ao-topo{
  position:fixed;
  right:20px; bottom:86px;
  z-index:90;
  width:46px; height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(18,17,16,.9);
  border:1px solid var(--carvao);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transform:translateY(16px) scale(.86);
  opacity:0;
  pointer-events:none;
  transition:transform var(--transicao), opacity var(--transicao),
             border-color var(--transicao);
}
.ao-topo.visivel{ transform:none; opacity:1; pointer-events:auto; }
.ao-topo:hover{ border-color:var(--sol); }
.ao-topo svg{
  width:19px; height:19px;
  stroke:var(--creme);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ------------------------------------------------------------
   5. Foto em tela cheia (a galeria que abre)
   ------------------------------------------------------------ */

.holofote{
  position:fixed;
  inset:0;
  z-index:400;
  display:none;
  place-items:center;
  background:rgba(4,4,4,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity 280ms ease;
}
.holofote.aberto{ display:grid; }
.holofote.mostrando{ opacity:1; }

.holofote-quadro{
  position:relative;
  width:min(92vw, 1180px);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  transform:scale(.97);
  transition:transform 320ms cubic-bezier(.2,.7,.3,1);
}
.holofote.mostrando .holofote-quadro{ transform:none; }

.holofote img{
  max-width:100%;
  max-height:76vh;
  width:auto;
  border-radius:var(--raio);
  border:1px solid var(--carvao);
}

.holofote-legenda{
  text-align:center;
  max-width:60ch;
}
.holofote-legenda b{
  display:block;
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:400;
  font-size:clamp(16px,2vw,21px);
  letter-spacing:.015em;
  color:var(--creme);
}
.holofote-legenda span{
  display:block;
  margin-top:5px;
  font-size:14px;
  color:var(--creme-fraco);
}

.holofote-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px; height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(20,18,17,.85);
  border:1px solid var(--carvao);
  transition:background var(--transicao), border-color var(--transicao);
}
.holofote-btn:hover{ background:var(--sol); border-color:var(--sol); }
.holofote-btn svg{
  width:20px; height:20px;
  stroke:var(--creme);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.holofote-antes{ left:-62px; }
.holofote-depois{ right:-62px; }

.holofote-fechar{
  position:fixed;
  top:22px; right:22px;
  width:46px; height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(20,18,17,.85);
  border:1px solid var(--carvao);
  transition:background var(--transicao), border-color var(--transicao);
}
.holofote-fechar:hover{ background:var(--sol); border-color:var(--sol); }
.holofote-fechar svg{
  width:19px; height:19px;
  stroke:var(--creme);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
}

/* dica de que a foto abre */
.foto{ cursor:zoom-in; }
.foto::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid transparent;
  border-radius:inherit;
  transition:border-color var(--transicao);
  pointer-events:none;
}
.foto:hover::after{ border-color:rgba(226,35,26,.5); }

/* ------------------------------------------------------------
   5b. Movimento guiado pela rolagem, em CSS puro

   Navegador moderno anima isto no compositor: mais macio que
   JavaScript e sem custo a cada rolagem. Onde nao houver
   suporte (Safari, Firefox), o main.js faz o mesmo na mao.
   ------------------------------------------------------------ */

@supports (animation-timeline: view()) {

  /* o fundo desliza enquanto a secao atravessa a tela */
  [data-parallax]{
    animation:desliza-fundo linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes desliza-fundo{
    from{ transform:translate3d(0, calc(var(--px, 12%) * -1), 0); }
    to  { transform:translate3d(0, var(--px, 12%), 0); }
  }

  /* a barra de progresso acompanha a pagina inteira */
  .progresso i{
    width:100%;
    transform:scaleX(0);
    transform-origin:0 50%;
    transition:none;
    animation:enche-barra linear both;
    animation-timeline:scroll(root block);
  }
  @keyframes enche-barra{
    from{ transform:scaleX(0); }
    to  { transform:scaleX(1); }
  }

}

/* Os DOIS BOTOES ficam de fora da tecnica nova, de proposito.
   Eles sao funcao, nao enfeite: se a linha do tempo falhar em
   algum navegador, o botao de WhatsApp sumiria da tela. Enfeite
   pode falhar; botao de contato, nao. Eles continuam no
   JavaScript, que funciona em todo navegador. */

/* ------------------------------------------------------------
   6. Quem pediu menos movimento recebe tudo parado
   ------------------------------------------------------------ */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .revela,
  .cadencia > *{ opacity:1 !important; transform:none !important; }
  [data-parallax]{ transform:none !important; animation:none !important; }
  .progresso i{ animation:none !important; transform:scaleX(0) !important; }
  .ao-topo,.zap{ animation:none !important; }
}

/* ============================================================
   TEMPERO
   ------------------------------------------------------------
   O preto chapado deixava as secoes do meio sem vida. Quatro
   camadas resolvem isso sem usar nenhuma imagem nova:

   1. brasa   — o sol da marca insinuado na borda da secao
   2. costura — fio que separa uma secao da outra
   3. cartao  — deixa de ser caixa lisa e ganha volume
   4. numero  — o algarismo grande vira elemento de desenho

   Regra: nada disso pode competir com o texto. Tudo fica
   abaixo de 12% de opacidade, menos onde o dedo passa.
   ============================================================ */

/* ---------- 1. A brasa ----------
   Um claro vermelho muito baixo, nascendo da borda da secao.
   E o mesmo sol do logo, so que quase apagado — da a sensacao
   de que tem luz atras da pagina. */

.fundo-alto{ position:relative; }

.fundo-alto::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:min(52%, 460px);
  pointer-events:none;
  z-index:0;
  background:radial-gradient(74% 130% at 50% 118%,
    rgba(226,35,26,.13) 0%,
    rgba(226,35,26,.06) 42%,
    transparent 72%);
}

/* nas secoes de fundo escuro a brasa nasce em cima, do lado */
section:not(.fundo-alto):not(.heroi):not(.chamada):not(.declaracao):not(.secao-foto):not(.heroi-pagina){
  position:relative;
}
section:not(.fundo-alto):not(.heroi):not(.chamada):not(.declaracao):not(.secao-foto):not(.heroi-pagina)::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:min(46%, 400px);
  pointer-events:none;
  z-index:0;
  background:radial-gradient(60% 120% at 82% -14%,
    rgba(226,35,26,.11) 0%,
    rgba(226,35,26,.05) 44%,
    transparent 70%);
}

/* o conteudo sempre acima da brasa */
section > .env{ position:relative; z-index:1; }

/* ---------- 2. A costura ----------
   Fio finissimo entre secoes, com um ponto vermelho no meio.
   Sem ele, secao de fundo igual vira um bloco so. */

.fundo-alto{
  border-top:1px solid transparent;
  border-image:linear-gradient(to right,
    transparent 0%,
    rgba(226,35,26,.30) 28%,
    rgba(226,35,26,.55) 50%,
    rgba(226,35,26,.30) 72%,
    transparent 100%) 1;
  border-bottom:0;
  border-left:0;
  border-right:0;
}

/* ---------- 3. O cartao ganha volume ----------
   Antes: retangulo liso. Agora: luz no topo, sombra embaixo e
   uma brasa que acende do lado de dentro quando o dedo passa. */

.cartao{
  position:relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(255,255,255,0) 38%),
    var(--breu-alto);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,
             0 18px 40px -30px rgba(0,0,0,.9);
  overflow:hidden;
}
.fundo-alto .cartao{
  background:
    linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 38%),
    var(--breu);
}

/* o fio de luz no topo do cartao */
.cartao::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(to right,
    transparent, rgba(255,255,255,.16) 24%,
    rgba(255,255,255,.16) 76%, transparent);
  pointer-events:none;
}

/* a brasa que acende por dentro, no canto do icone */
.cartao::after{
  content:"";
  position:absolute;
  inset:auto auto -40% -20%;
  width:70%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(226,35,26,.26) 0%, rgba(226,35,26,.10) 45%, transparent 70%);
  opacity:0;
  transition:opacity 420ms ease;
  pointer-events:none;
}
.cartao:hover{
  border-color:rgba(226,35,26,.38);
  transform:translateY(-4px);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,
             0 26px 56px -28px rgba(226,35,26,.45);
}
.cartao:hover::after{ opacity:1; }

/* o icone acompanha */
.cartao:hover .icone{
  border-color:rgba(226,35,26,.4);
  background:rgba(226,35,26,.12);
}
.icone{ transition:border-color var(--transicao), background var(--transicao); }

/* ---------- 4. O numero vira desenho ----------
   Nos cartoes numerados o algarismo sai do circulinho apagado e
   ganha peso: grande, vazado, atras do titulo. */

.cartao-num .ordem{
  position:relative;
  z-index:1;
}
.cartao-num::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(to right,
    rgba(226,35,26,.5) 0%, rgba(226,35,26,.18) 38%, transparent 72%);
}

/* ---------- Os pilares tambem ---------- */

.pilar{ position:relative; }
.pilar::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:var(--sol);
  transform:scaleY(0);
  transform-origin:50% 0;
  transition:transform 420ms cubic-bezier(.2,.7,.3,1);
}
.pilar:hover::after{ transform:scaleY(1); }
.pilar:hover .ordem{
  border-color:rgba(226,35,26,.75);
  background:rgba(226,35,26,.12);
}
.pilar .ordem{ transition:border-color var(--transicao), background var(--transicao); }

/* ---------- As entregas ---------- */

.entrega{
  position:relative;
  transition:background var(--transicao), color var(--transicao);
}
.entrega:hover{ background:rgba(226,35,26,.07); color:var(--creme); }
.entrega svg{ transition:transform var(--transicao); }
.entrega:hover svg{ transform:scale(1.18); }

/* ---------- O grao um pouco mais presente ---------- */
body::after{ opacity:.09; }

/* ============================================================
   Telas medias
   ============================================================ */

/* O botao do evento so sai quando o cabecalho realmente nao cabe.
   MEDIDO em 08/10/2026, com o botao "Autogestao Empresarial" (200px):
     1440px -> 50px de folga entre o menu e o bloco de acao
     1180px -> 62px de folga, menu numa linha so
     1024px -> o bloco termina em 1044px, ESTOURA 20px a borda
   Por isso o corte fica em 1100 e nao em 1260: entre 1101 e 1260
   o botao cabia e estava sendo escondido a toa. */
@media (max-width:1100px){
  .topo-acao .btn-linha{ display:none; }
}
@media (max-width:1260px){
  .menu{ gap:26px; }
}

@media (max-width:980px){
  .menu{ display:none; }
  .topo-acao .btn-linha{ display:none; }
  .sanduiche{ display:flex; }

  /* O botao vira so o icone, para caber ao lado do sanduiche */
  .topo-zap span{ display:none; }
  .topo-acao .topo-zap{
    width:44px; height:44px;
    padding:0;
    border-radius:50%;
    gap:0;
  }

  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:repeat(2,1fr); }
  .galeria{ grid-template-columns:repeat(2,1fr); }
  .sintomas{ grid-template-columns:repeat(2,1fr); }
  .ficha{ grid-template-columns:repeat(2,1fr); }

  .keiler{ grid-template-columns:1fr; }
  .livro{ grid-template-columns:1fr; }
  .virador{ max-width:440px; margin-inline:auto; }

  .keiler-foto{ max-width:440px; margin-inline:auto; }

  .rodape-grade{ grid-template-columns:1fr 1fr; }
  .rodape-sobre{ grid-column:1 / -1; }
}

/* ============================================================
   Celular — tudo centralizado
   ============================================================ */

@media (max-width:640px){
  body{ font-size:16px; }
  html{ scroll-padding-top:74px; }
  .topo-linha{ height:68px; }
  .gaveta{ top:68px; }

  /* No celular o sol desce e suaviza, para o texto respirar em cima dele */
  .heroi-sol{
    top:76%;
    width:150vw;
    background:
      radial-gradient(circle at 50% 50%,
        rgba(226,35,26,.38) 0%,
        rgba(226,35,26,.32) 44%,
        rgba(226,35,26,.22) 64%,
        rgba(140,22,15,.12) 78%,
        transparent 88%);
  }

  .heroi{ text-align:center; padding-block:112px 80px; }
  .heroi-texto{ margin-inline:auto; }
  .heroi-frase{ margin-inline:auto; }
  .heroi-acoes{ justify-content:center; flex-direction:column; align-items:stretch; }
  .heroi-acoes .btn{ width:100%; }
  .heroi-selo{ margin-inline:auto; }

  .cabecalho-secao{ text-align:center; margin-inline:auto; }
  .cabecalho-secao .etiqueta{ justify-content:center; }
  .subtitulo{ margin-inline:auto; }

  .g2,.g3,.g4{ grid-template-columns:1fr; }
  .galeria{ grid-template-columns:1fr; }
  .videos{ grid-template-columns:1fr; }
  .holofote-antes{ left:6px; }
  .holofote-depois{ right:6px; }
  .holofote-quadro{ width:96vw; }
  .ao-topo{ right:16px; bottom:80px; width:42px; height:42px; }
  .depoimentos{ grid-template-columns:1fr; }
  .ficha{ grid-template-columns:1fr; }
  .sintomas{ grid-template-columns:1fr; }
  .entregas{ grid-template-columns:1fr; }

  .cartao{ text-align:center; align-items:center; }
  .cartao .icone{ margin-inline:auto; }
  .cartao-num .ordem{ margin-inline:auto; }

  .pilar{ flex-direction:column; align-items:center; text-align:center; gap:14px; }

  .valores{ justify-content:center; }
  .entrega{ justify-content:center; }

  .citacao{
    border-left:0;
    padding-left:0;
    padding-top:20px;
    border-top:2px solid var(--sol);
    text-align:center;
  }
  .keiler-assinatura{ text-align:center; }

  .rodape{ text-align:center; }
  .rodape-grade{ grid-template-columns:1fr; gap:38px; }
  .rodape-lista{ align-items:center; }
  .rodape-sobre p{ margin-inline:auto; }
  .rodape-fim{ justify-content:center; text-align:center; flex-direction:column; }
  .marca-texto b{ font-size:15.5px; }

  .zap{ right:16px; bottom:16px; }
}