/* ==========================================================================
   Vanitelli Consultoria de Franquias — sistema visual escuro (página de vendas)
   --------------------------------------------------------------------------
   Base: Origin (fundo quase preto, serifa fina gigante, botão limpo, aurora
   no topo) + Linear / Raycast / Cursor (cartões um tom mais claros com borda
   fina, grade de blocos, tiles de número, parede de depoimentos, 100px de ar).
   Cores da Vanitelli: navy como base do escuro, verde como única cor de ação.
   Fontes: Montserrat (títulos e todo o resto) e Instrument Serif só na
   palavra de destaque dentro do título (h1/h2 em), sempre em itálico.
   ========================================================================== */

:root{
  --navy:#0f1325;
  --verde:#84bc25;
  --verde-claro:#9bd234;
  --verde-escuro:#374c1f;
  --branco:#ffffff;

  --canvas:#05060d;
  --sup:#0a0c14;
  --sup-2:#0f121c;
  --sup-3:#151926;
  --linha:rgba(237,243,255,.11);
  --linha-forte:rgba(237,243,255,.20);
  --texto:#edf3ff;
  --texto-2:rgba(237,243,255,.68);
  --texto-3:rgba(237,243,255,.46);
  --verde-tint:rgba(132,188,37,.12);
  --verde-tint-2:rgba(132,188,37,.22);

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;

  --topo:72px;
  --largura:1180px;
  --raio:22px;
  --raio-bt:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topo) + 24px);background:var(--canvas)}
body{
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.6;
  color:var(--texto);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--verde);color:var(--navy)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px;border-radius:6px}
strong,b{font-weight:700;color:var(--texto)}

/* ------------------------------------------------------------ tipografia */
h1,h2{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:1;text-wrap:balance;color:var(--texto)}
h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.015em;line-height:1.25;color:var(--texto)}
h1 em,h2 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;color:var(--verde)}

.t-hero{font-size:clamp(46px,7vw,92px);line-height:.98}
.t-secao{font-size:clamp(36px,5vw,62px);line-height:1.02}
.t-sub{font-size:clamp(28px,3.4vw,40px);line-height:1.08}
.t-bloco{font-size:clamp(24px,2.6vw,30px);line-height:1.1}

.olho{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;row-gap:6px;
  font-size:13.2px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--verde);margin-bottom:20px;
}
.olho::before{content:"";width:8px;height:8px;border-radius:99px;background:var(--verde);box-shadow:0 0 12px var(--verde)}

.texto{font-size:clamp(16px,1.6vw,17.5px);line-height:1.7;color:var(--texto-2);max-width:60ch;text-wrap:pretty}
.texto + .texto{margin-top:12px}
.texto-g{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--texto-2);max-width:54ch;text-wrap:pretty}
.texto-forte{color:var(--texto);font-weight:600}
.frase{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,26px);line-height:1.25;color:var(--texto);letter-spacing:-.01em;text-wrap:pretty}
.frase-verde{color:var(--verde)}
.mini{font-size:13.5px;line-height:1.55;color:var(--texto-3)}

/* --------------------------------------------------------------- estrutura */
.env{width:100%;max-width:var(--largura);margin:0 auto;padding:0 28px}
.secao{padding:108px 0}
.secao-m{padding:76px 0}
.secao-p{padding:48px 0}
@media (max-width:760px){.secao{padding:68px 0}.secao-m{padding:52px 0}.secao-p{padding:36px 0}}
.faixa{background:#031026;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.fundo-2{background:var(--sup)}

.cabeca{max-width:820px}
.cabeca .texto-g{margin-top:22px}
.cabeca-c{max-width:780px;margin:0 auto;text-align:center}
.cabeca-c .olho{justify-content:center}
.cabeca-c .texto-g{margin:22px auto 0}
.espaco{margin-top:56px}
.espaco-p{margin-top:28px}
.centro{text-align:center}

.duas{display:grid;gap:36px;grid-template-columns:1fr}
@media (min-width:960px){.duas{grid-template-columns:5fr 6fr;gap:40px 80px;align-items:start}}
.duas > *{min-width:0}
.duas .texto{max-width:none}

.lideranca-topo{margin-bottom:48px}
.lideranca{align-items:center}
.lideranca-nome{margin-top:0;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--verde);font-weight:700}
.lideranca .texto-g{margin-top:14px;max-width:none;font-size:clamp(12.6px,1.4vw,15.4px)}
.lideranca-redes{display:flex;gap:12px;margin-top:26px}
.lideranca-redes a{width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(237,243,255,.08);color:var(--texto);transition:background-color .2s ease,color .2s ease}
.lideranca-redes a:hover{background:var(--verde);color:var(--navy)}
.lideranca-redes svg{width:20px;height:20px}
.lideranca-foto{display:flex;justify-content:center}
.lideranca-foto img{width:100%;max-width:480px;height:auto;display:block}

/* celular com fotos do escritório, na seção "Centrados no seu negócio" do Sobre */
.centrados-negocio{align-items:center}
.celular-fotos{display:flex;justify-content:center}
.celular-fotos .telefone{width:100%;max-width:300px;aspect-ratio:1080/1920;height:auto}
.carrossel-tela{position:relative}
.carrossel-tela img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.2s ease}
.carrossel-tela img.ativa{opacity:1;position:relative}
@media (max-width:959px){.celular-fotos .telefone{max-width:260px}}

.grade{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.g5{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}}
.grade > *{min-width:0}

/* ----------------------------------------------------------------- botões */
.bt{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 24px;
  border-radius:var(--raio-bt);border:1px solid transparent;font-family:var(--sans);font-weight:700;font-size:15px;
  letter-spacing:-.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.bt:active{transform:scale(.98)}
.bt .seta{transition:transform .18s ease}
.bt:hover .seta{transform:translateX(4px)}
.bt-p{padding:11px 18px;font-size:13.5px}
.bt-g{padding:18px 30px;font-size:16px}
.bt-verde{background:var(--verde);color:var(--navy)}
.bt-verde:hover{background:var(--verde-claro);box-shadow:0 0 0 1px rgba(132,188,37,.4),0 16px 40px -18px rgba(132,188,37,.8);transform:translateY(-1px)}
.bt-branco{background:var(--texto);color:var(--navy)}
.bt-branco:hover{background:#fff;transform:translateY(-1px)}
.bt-vazio{background:rgba(237,243,255,.04);color:var(--texto);border-color:var(--linha-forte)}
.bt-vazio:hover{background:rgba(237,243,255,.09);border-color:rgba(237,243,255,.4)}
.bt-link{background:transparent;color:var(--verde);padding:6px 0;border-radius:0}
.bt-link:hover{color:var(--verde-claro)}
.botoes{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.hero-foto .botoes{gap:14px}
.botoes.centro,.cabeca-c .botoes{justify-content:center}
@media (max-width:560px){.botoes{flex-direction:column;align-items:stretch}.botoes .bt{width:100%;white-space:normal;text-align:center;line-height:1.25}}

/* chips de prova embaixo do botão */
.prova{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}
.prova span{
  display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;
  border:1px solid var(--linha);background:rgba(237,243,255,.03);font-size:12.5px;font-weight:600;color:var(--texto-2);
}
.prova span::before{content:"";width:6px;height:6px;border-radius:99px;background:var(--verde)}
.centro .prova,.cabeca-c .prova{justify-content:center}

/* -------------------------------------------------------------- cabeçalho */
.topo{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--topo);display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s ease,border-color .25s ease;
}
/* no topo da pagina, o header se funde com o hero (sem fundo proprio); ao
   rolar (ou com o menu do celular aberto), ele "se solta" e vira uma barra
   solida para continuar legivel sobre qualquer conteudo. Ver .rolado no JS
   no fim de cada pagina (window.scrollY). */
.topo.rolado,.topo.aberto{
  background:rgba(3,16,38,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--linha);
}
/* estrutura do topo: menu à esquerda, logo no centro (posição absoluta, para
   ficar centrado de verdade mesmo com os dois grupos de larguras diferentes)
   e menu + redes à direita. Cada grupo de páginas fica dentro de uma pílula. */
.topo .env{display:flex;align-items:center;gap:14px;position:relative}
.marca{display:flex;align-items:center;flex-shrink:0;position:absolute;left:50%;transform:translateX(-50%)}
.marca img{height:30px;width:auto}
.menu{
  display:flex;align-items:center;gap:2px;
  background:rgba(237,243,255,.045);border:1px solid var(--linha);border-radius:999px;padding:5px 6px;
}
.menu-esq{margin-right:auto}
.menu-dir{margin-left:auto}
.menu a{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  color:var(--texto-2);text-decoration:none;padding:9px 13px;border-radius:999px;white-space:nowrap;
  transition:color .2s,background-color .2s;
}
.menu a:hover{color:var(--texto);background:rgba(237,243,255,.07)}
.menu a.ativo{background:var(--verde);color:var(--navy)}
.topo .bt{margin-left:8px;flex-shrink:0}
/* redes no topo: dois quadrados só com a logo, cada um no degradê da sua
   rede (o do Instagram é o oficial; o do WhatsApp sai do verde da marca).
   Símbolo branco, como nas duas marcas. */
.topo-redes{display:flex;gap:8px;margin-left:8px;flex-shrink:0}
.topo-redes a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;color:#fff;flex-shrink:0;
  transition:transform .18s ease,filter .18s ease,box-shadow .18s ease;
}
.topo-redes a:hover{transform:translateY(-1px);filter:brightness(1.06)}
.topo-redes svg{width:20px;height:20px}
.topo-redes .zap{background:var(--verde)}
.topo-redes .zap:hover{box-shadow:0 8px 22px -8px rgba(132,188,37,.8)}
.topo-redes .insta{background:var(--verde)}
.topo-redes .insta:hover{box-shadow:0 8px 22px -8px rgba(132,188,37,.8)}
.abrir-menu{
  display:none;margin-left:auto;background:rgba(237,243,255,.04);border:1px solid var(--linha-forte);color:var(--texto);
  border-radius:var(--raio-bt);padding:9px 14px;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:12.5px;letter-spacing:.08em;
}
/* faixa estreita (entre o celular e a tela cheia): o logo centrado quase
   encosta na pílula da direita, então aperta um pouco os dois */
@media (min-width:981px) and (max-width:1120px){
  .marca img{height:24px}
  .menu a{padding:8px 9px;font-size:10.5px;letter-spacing:.05em}
  .topo .env{gap:10px}
}

/* no celular o header cresce e os dois menus empilham embaixo da linha do
   logo (com dois <nav>, o antigo painel "position:fixed" faria um cobrir o
   outro). A ordem coloca logo/redes/botão na primeira linha. */
@media (max-width:980px){
  .menu,.topo > .env > .bt{display:none}
  .abrir-menu{display:block;margin-left:0}
  .topo{height:auto}
  /* aberto vira fundo sólido: com o painel translúcido o hero aparecia por
     trás dos links */
  .topo.aberto{background:var(--canvas);backdrop-filter:none;-webkit-backdrop-filter:none}
  .topo .env{flex-wrap:wrap;min-height:var(--topo);gap:10px}
  .marca{position:static;transform:none;order:1;margin-right:auto}
  .topo-redes{order:2}
  .abrir-menu{order:3}
  .topo.aberto .menu{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;
    background:none;border:0;border-radius:0;padding:0;
  }
  .topo.aberto .menu-esq{order:4;margin:6px 0 0;border-top:1px solid var(--linha);padding-top:10px}
  .topo.aberto .menu-dir{order:5;margin:0 0 14px}
  .topo.aberto .menu a{padding:13px 12px;font-size:13px;border-radius:10px}
}
/* sem padding no corpo: o hero comeca em y=0 e passa POR BAIXO do header fixo,
   entao o gradiente/aurora do hero e o fundo do header sao a mesma coisa. */
.corpo{padding-top:0}

/* -------------------------------------------------------------------- hero */
.hero{position:relative;padding:calc(var(--topo) + 64px) 0 72px;overflow:hidden}
@media (max-width:760px){.hero{padding:calc(var(--topo) + 28px) 0 48px}}
.aurora::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 78% -10%,rgba(132,188,37,.22),transparent 60%),
    radial-gradient(700px 480px at 12% 110%,rgba(55,76,31,.28),transparent 60%),
    linear-gradient(180deg,rgba(15,19,37,.45),var(--canvas) 88%);
}
.aurora::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(237,243,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(237,243,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 20%,#000 20%,transparent 75%);
}
.hero > .env{position:relative}
.hero .t-hero{max-width:13em}
.hero .texto-g{margin-top:28px}
.hero-c{text-align:center}
.hero-c .t-hero{margin:0 auto;font-size:clamp(44px,5.6vw,76px)}
.hero-c .texto-g{margin-left:auto;margin-right:auto;font-size:clamp(17.4px,1.92vw,21.1px)}
.hero-c .olho{justify-content:center}

/* faixa de tiles logo abaixo do hero (o "visual do produto") */
.vitrine{position:relative;margin-top:64px}
@media (max-width:760px){.vitrine{margin-top:40px}}

/* -------------------------------------------------------------- tiles */
.tile{
  position:relative;background:var(--branco);border:1px solid rgba(15,19,37,.1);border-radius:var(--raio);padding:28px;
  display:flex;flex-direction:column;min-height:100%;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease,background-color .25s ease;
}
.tile:hover{border-color:rgba(15,19,37,.26);transform:translateY(-2px)}
.tile::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(15,19,37,.12),transparent);opacity:.6}
.tile h3{font-size:19px;color:var(--navy)}
.tile p{margin-top:10px;font-size:15px;line-height:1.6;color:color-mix(in srgb,var(--navy) 66%,var(--branco));text-wrap:pretty}
.tile .pe{margin-top:auto;padding-top:22px}
/* botao dentro do tile pode quebrar linha: com nowrap ele estourava a borda
   do tile estreito (visto no tile verde "7/7" das entregas). */
.tile .pe .bt{white-space:normal;line-height:1.3;text-align:center;max-width:100%}
.tile .frase{font-size:clamp(18px,1.9vw,21px);margin-top:12px}
.tile-2{background:var(--sup-2)}
.tile-verde{background:linear-gradient(160deg,rgba(132,188,37,.22),rgba(132,188,37,.06) 60%,var(--branco));border-color:rgba(132,188,37,.5)}
.tile-verde::before{background:linear-gradient(90deg,transparent,rgba(132,188,37,.8),transparent)}
.tile-cheio{background:var(--verde);color:var(--navy);border-color:transparent}
.tile-cheio h3,.tile-cheio p,.tile-cheio .frase,.tile-cheio strong{color:var(--navy)}
.tile-cheio p{opacity:.85}
.tile-g{padding:36px}
@media (max-width:560px){.tile,.tile-g{padding:22px}}

.ico{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:rgba(132,188,37,.16);color:var(--verde-escuro);margin-bottom:18px;flex-shrink:0;
}
.ico svg{width:20px;height:20px}
.tile-cheio .ico{background:rgba(15,19,37,.16);color:var(--navy)}

.num{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  background:var(--verde);border:1px solid transparent;color:var(--navy);font-weight:800;font-size:14px;margin-bottom:18px;
  font-variant-numeric:tabular-nums;
}
.selo{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;background:rgba(15,19,37,.05);border:1px solid rgba(15,19,37,.12);color:color-mix(in srgb,var(--navy) 70%,var(--branco));align-self:flex-start;
}
.selo-verde{background:rgba(132,188,37,.16);border-color:rgba(132,188,37,.45);color:var(--verde-escuro)}

/* "ler mais" dentro do tile — mantém o texto completo sem pesar a página */
.mais{margin-top:14px}
.mais summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--verde-escuro);letter-spacing:.02em;
}
.mais summary::-webkit-details-marker{display:none}
.mais summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.mais[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.mais p{margin-top:12px;font-size:14.5px;line-height:1.65;color:color-mix(in srgb,var(--navy) 66%,var(--branco))}
.mais p + p{margin-top:10px}

/* ------------------------------------------------------------ números */
.stat{
  background:#031026;border:1px solid var(--linha);border-radius:var(--raio);padding:26px 26px 24px;position:relative;overflow:hidden;
}
.stat .n{font-family:var(--sans);font-weight:800;font-size:clamp(38px,4.6vw,56px);line-height:1;color:var(--texto);letter-spacing:-.045em;font-variant-numeric:tabular-nums;position:relative}
.stat .n i{font-style:normal;color:var(--verde)}
.stat .un{display:block;margin-top:10px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);position:relative}
.stat p{margin-top:8px;font-size:14px;line-height:1.45;color:var(--texto-2);position:relative}

/* ------------------------------------------------------------ passos */
.passos{display:grid;gap:16px;grid-template-columns:1fr;counter-reset:p}
@media (min-width:700px){.passos{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.passos{grid-template-columns:repeat(5,1fr)}}
.passo{background:var(--branco);border:1px solid rgba(15,19,37,.1);border-radius:18px;padding:24px 22px;position:relative}
.passo .n{font-family:var(--sans);font-weight:800;font-size:30px;line-height:1;color:var(--verde);letter-spacing:-.04em;margin-bottom:16px}
.passo h3{font-size:16.5px;color:var(--navy)}
.passo p{margin-top:10px;font-size:14px;line-height:1.55;color:color-mix(in srgb,var(--navy) 66%,var(--branco))}

/* --------------------------------------------- antes / depois (contraste) */
.contraste{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:860px){.contraste{grid-template-columns:1fr 1fr}}
.contraste .tile h3{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde-escuro)}
.contraste .tile-verde h3{color:var(--verde-escuro)}
.lista{list-style:none;margin-top:18px}
.lista li{position:relative;padding-left:32px;margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--texto-2);text-wrap:pretty}
.lista li::before{
  content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border-radius:99px;background:var(--verde-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2384bc25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat;
}
.lista-x li::before{
  background:rgba(237,243,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23edf3ff' stroke-opacity='.55' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/10px no-repeat;
}
.lista-x li{color:var(--texto-3)}
/* dentro de um .tile (agora sempre claro), a lista precisa do par escuro —
   fora de um tile (ex.: pergunta errada/certa em fundo verde do CTA), a lista
   já vem com as cores certas de outro jeito. */
.tile .lista li{color:color-mix(in srgb,var(--navy) 66%,var(--branco))}
.tile .lista li::before{background-color:rgba(132,188,37,.18)}
.tile .lista-x li::before{background:rgba(15,19,37,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1325' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/10px no-repeat;}
.tile .lista-x li{color:color-mix(in srgb,var(--navy) 50%,var(--branco))}

/* -------------------------------------------------------- depoimentos */
.depo{
  display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);padding:28px;
}
.depo blockquote{font-family:var(--serif);font-size:clamp(19px,1.9vw,22px);line-height:1.35;color:var(--texto);letter-spacing:-.01em;text-wrap:pretty}
.depo blockquote::before{content:"\201C";color:var(--verde);margin-right:2px}
.depo .resultado{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 12px;border-radius:999px;background:var(--verde-tint);color:var(--verde);font-size:12px;font-weight:700;letter-spacing:.04em;align-self:flex-start}
.depo .quem{margin-top:auto;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--linha);margin-top:22px}
.depo .quem b{display:block;font-size:14px}
.depo .quem span{display:block;font-size:12.5px;color:var(--texto-3);margin-top:2px}
.depo .marca-cliente{background-color:rgba(237,243,255,.7)}

/* --------------------------------------------------------------- FAQ */
.faqs{display:grid;gap:0 56px;grid-template-columns:1fr}
@media (min-width:960px){.faqs{grid-template-columns:1fr 1fr}}
.faq{border-top:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;font-weight:700;font-size:16px;color:var(--texto);line-height:1.35;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:10px;height:10px;border-right:2px solid var(--verde);border-bottom:2px solid var(--verde);transform:translateY(-70%) rotate(45deg);transition:transform .25s ease}
.faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--verde)}
.faq p{padding:0 44px 24px 0;font-size:15px;line-height:1.65;color:var(--texto-2);text-wrap:pretty}

/* ------------------------------------------------------------- logos */
.marquee{overflow:hidden;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,#031026,rgba(0,0,0,0))}
.marquee::after{right:0;background:linear-gradient(270deg,#031026,rgba(0,0,0,0))}
.marquee-trilho{display:flex;width:max-content;animation:correr var(--dur,50s) linear infinite}
.marquee:hover .marquee-trilho{animation-play-state:paused}
@keyframes correr{to{transform:translateX(-50%)}}
.marquee-grupo{display:flex;flex-shrink:0;align-items:center}
.marca-cliente{
  display:block;flex-shrink:0;margin:0 34px;background-color:rgba(237,243,255,.5);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
  transition:background-color .25s;
}
.marca-cliente:hover{background-color:var(--texto)}
.grade-marcas{display:grid;gap:34px 28px;align-items:center;justify-items:center;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.grade-marcas .marca-cliente{margin:0}

/* --------------------------------------------------------- formulário */
.campo{width:100%;padding:14px 16px;border:1px solid var(--linha-forte);border-radius:var(--raio-bt);font:inherit;font-size:15px;background:rgba(237,243,255,.04);color:var(--texto);transition:border-color .2s,box-shadow .2s}
.campo:focus{outline:0;border-color:var(--verde);box-shadow:0 0 0 4px var(--verde-tint)}
.campo::placeholder{color:var(--texto-3)}
select.campo option{background:var(--sup-2);color:var(--texto)}
textarea.campo{resize:vertical;min-height:120px}
.form{display:flex;flex-direction:column;gap:12px}
.form .bt{margin-top:6px}

/* --------------------------------------------------------- painel CTA */
.painel{
  position:relative;overflow:hidden;border-radius:calc(var(--raio) + 8px);padding:clamp(44px,6vw,88px) clamp(24px,5vw,72px);
  background:var(--sup);border:1px solid var(--linha);text-align:center;
}
.painel::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 400px at 50% 0%,rgba(132,188,37,.22),transparent 65%)}
.painel > *{position:relative}
.painel .t-secao{max-width:16em;margin:0 auto}
.painel .lista{display:inline-grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 28px;text-align:left;margin-top:30px}
.painel .lista li{margin-top:6px}

/* ------------------------------------------------------------- rodapé */
.rodape{background:#031026;border-top:1px solid var(--linha);padding:40px 0 24px;font-size:14.5px;color:var(--texto-2)}
.rodape a{color:var(--texto-2);text-decoration:none;transition:color .2s}
.rodape a:hover{color:var(--texto)}
.rodape-grade{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.rodape-paginas-servicos{display:flex;flex-wrap:wrap;column-gap:17px;row-gap:24px}
.rodape-paginas-servicos>div{min-width:160px}
.rodape h4{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--texto);margin-bottom:10px}
.rodape ul{list-style:none}
.rodape li{margin-top:6px}
.rodape img{height:22px;width:auto;margin-bottom:10px}
.rodape-fim{margin-top:24px;padding-top:16px;border-top:1px solid var(--linha);display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between;font-size:13px;color:var(--texto-3)}

.rodape-fale{padding-bottom:32px;margin-bottom:32px;border-bottom:1px solid var(--linha)}
.rodape-fale h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,38px);color:var(--texto);margin-bottom:22px;letter-spacing:-.01em}
.rodape-fale h2 em{font-style:italic;color:var(--verde)}
.rodape-contato{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.rodape-card{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;background:var(--sup-2);border:1px solid var(--linha);transition:border-color .2s ease,transform .2s ease}
.rodape-card:hover{border-color:var(--linha-forte);transform:translateY(-2px)}
.rodape-ico{width:44px;height:44px;border-radius:999px;background:rgba(132,188,37,.14);color:var(--verde);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.rodape-ico svg{width:20px;height:20px}
.rodape-card strong{display:block;font-size:15px;color:var(--texto);font-weight:700}
.rodape-card .valor{display:block;margin-top:2px;font-size:14px;color:var(--verde)}
.rodape-parceiros .logos{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:2px}
.rodape-parceiros img{height:28px;width:auto;margin-bottom:0;opacity:.85;transition:opacity .2s ease}
.rodape-parceiros img:hover{opacity:1}
.rodape-parceiros .logo-acsp{height:38px}
.rodape-parceiros .logo-ibia{height:30px;filter:brightness(0) invert(1)}

/* -------------------------------------------------------- aparecer */
.js .surge{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.js .surge.visivel{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .surge{opacity:1;transform:none;transition:none}.marquee-trilho{animation:none}html{scroll-behavior:auto}}

/* --------------------------------------------------------- celular */
@media (max-width:560px){
  .env{padding:0 20px}
  .olho{letter-spacing:.16em;font-size:10.5px}
  .t-hero{font-size:clamp(40px,12vw,52px)}
  .painel{padding:36px 22px}
}

/* retoques 02/09: contraste alinhado à esquerda dentro do hero; rótulo curto no celular */
.vitrine .contraste{text-align:left}
.vitrine .contraste .tile h3{text-align:left}
@media (max-width:560px){.olho{font-size:10px;letter-spacing:.12em}.olho::before{width:6px;height:6px}}

/* ==========================================================================
   Tons de seção — depois do hero a página alterna BRANCO e AZUL, quebrando
   a sequência de preto (as seções têm alturas diferentes, então os blocos
   saem de tamanhos diferentes sozinhos):
     .sec-clara → branco, texto navy
     .sec-navy  → azul (navy) da marca
     .sec-verde → aurora verde ao fundo (o "horizonte" da abertura)
   Sem classe, a seção fica no preto do canvas.
   ========================================================================== */
.sec-clara{background:var(--branco);color:var(--navy)}
.sec-navy{position:relative;background:var(--navy)}
.sec-navy::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(237,243,255,.22),transparent);
}
.sec-verde{position:relative;background:var(--canvas);overflow:hidden}
/* horizonte verde: a assinatura da abertura, agora dentro da página */
.sec-verde::before{
  content:"";position:absolute;left:50%;bottom:-58%;width:150%;aspect-ratio:2/1;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(132,188,37,.20),rgba(132,188,37,.06) 45%,transparent 70%);
  box-shadow:0 -1px 0 0 rgba(155,210,52,.5),0 0 90px 10px rgba(132,188,37,.18);
}
.sec-verde > *{position:relative;z-index:1}
.sec-verde .tile-verde{background:linear-gradient(160deg,rgba(132,188,37,.18),rgba(132,188,37,.05) 60%,var(--sup));border-color:rgba(132,188,37,.32)}

/* fundos de imagem bem sutis, só nas seções realmente quase-pretas (fundo
   escuro puro, sem tom de sec-navy/sec-clara/sec-verde): início do site,
   método, nossas soluções e franqueadores. O rodapé é #031026 chapado, sem
   foto (pedido do Fred). */
.hero.aurora,#metodo,#solucoes,#franqueadores,#depoimentos-expansao{
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
#depoimentos-expansao{background-color:#031026;background-image:linear-gradient(rgba(3,16,38,.8),rgba(3,16,38,.8)),url(images/fundos/depoimentos-expansao.jpg?v=cbaa0499)}
#depoimentos-expansao .depo{background:#fff;border-color:transparent}
#depoimentos-expansao .depo blockquote{color:var(--navy)}
#depoimentos-expansao .depo blockquote::before{color:var(--verde-escuro)}
#depoimentos-expansao .depo .resultado{background:rgba(132,188,37,.16);color:var(--verde-escuro)}
#depoimentos-expansao .depo .resultado-forte{background:var(--verde);color:#fff}
#depoimentos-expansao .depo .quem{border-color:rgba(15,19,37,.1)}
#depoimentos-expansao .depo .quem b{color:var(--navy)}
#depoimentos-expansao .depo .quem span{color:color-mix(in srgb,var(--navy) 55%,var(--branco))}
#sinais-gestao{background:#031026}
.hero.aurora{background-image:linear-gradient(rgba(3,16,38,.65),rgba(3,16,38,.65)),url(images/fundos/hero.jpg?v=6b816f84)}
#metodo:not(.sec-clara){background-image:linear-gradient(rgba(3,16,38,.85),rgba(3,16,38,.85)),url(images/fundos/metodo.jpg?v=729f8c9f)}
#solucoes{background-image:linear-gradient(rgba(3,16,38,.85),rgba(3,16,38,.85)),url(images/fundos/nossas-solucoes.jpg?v=0efa2ee7)}
#franqueadores{background-image:linear-gradient(rgba(3,16,38,.85),rgba(3,16,38,.85)),url(images/fundos/franqueador.jpg?v=9091bb8b)}
.hero.aurora,#metodo:not(.sec-clara),#solucoes,#franqueadores{background-color:#031026}

/* celular não baixa as fotos de fundo (peso) — o véu escuro já deixava a
   imagem quase uma textura, então a cor sólida por baixo fica bem parecida */
@media (max-width:560px){
  .hero.aurora,#metodo:not(.sec-clara),#solucoes,#franqueadores,#depoimentos-expansao{background-image:none}
}

/* o painel final continua sendo o momento mais forte da página, com luz
   verde em vez de bloco verde */
.painel-verde{background:var(--verde);border-color:transparent}
.painel-verde::before{background:radial-gradient(760px 420px at 50% 110%,rgba(255,255,255,.35),transparent 68%)}
.painel-verde .olho{color:var(--navy)}
.painel-verde .olho::before{background:var(--navy);box-shadow:none}
.painel-verde h2,.painel-verde h2 em,.painel-verde .frase-verde{color:var(--navy)}
.painel-verde .texto-g{color:color-mix(in srgb,var(--navy) 75%,var(--branco))}
.painel-verde .bt-verde{background:var(--navy);color:var(--texto)}
.painel-verde .bt-verde:hover{background:#1a2140}

/* ---- tudo o que vive dentro de uma seção BRANCA precisa inverter ---- */
.sec-clara h1,.sec-clara h2,.sec-clara h3,.sec-clara h4,.sec-clara strong,.sec-clara b{color:var(--navy)}
.sec-clara h1 em,.sec-clara h2 em{color:var(--verde-escuro)}
.sec-clara .texto,.sec-clara .texto-g,.sec-clara .tile p,.sec-clara .passo p,.sec-clara .lista li,.sec-clara .faq p,.sec-clara .mais p,.sec-clara .stat p,.sec-clara .mini{color:color-mix(in srgb,var(--navy) 66%,var(--branco))}
.sec-clara .frase{color:var(--navy)}
.sec-clara .olho{color:var(--verde-escuro)}
.sec-clara .olho::before{background:var(--verde);box-shadow:none}
.sec-clara .tile{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .tile::before{background:linear-gradient(90deg,transparent,rgba(15,19,37,.12),transparent)}
.sec-clara .tile:hover{border-color:rgba(15,19,37,.26)}
.sec-clara .tile-verde{background:linear-gradient(160deg,rgba(132,188,37,.22),rgba(132,188,37,.06) 60%,#fff);border-color:rgba(132,188,37,.5)}
.sec-clara .ico{background:rgba(132,188,37,.16);color:var(--verde-escuro)}
.sec-clara .n-serif{color:var(--verde-escuro)}
.sec-clara .selo{background:rgba(15,19,37,.05);border-color:rgba(15,19,37,.12);color:color-mix(in srgb,var(--navy) 70%,var(--branco))}
.sec-clara .selo-verde{background:rgba(132,188,37,.16);border-color:rgba(132,188,37,.45);color:var(--verde-escuro)}
.sec-clara .mais summary{color:var(--verde-escuro)}
.sec-clara .passo,.sec-clara .stat{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .passo .n{color:var(--verde)}
.sec-clara .stat .n{color:var(--navy)}
.sec-clara .stat .un{color:var(--verde-escuro)}
.sec-clara .lista li::before{background-color:rgba(132,188,37,.18)}
.sec-clara .lista-x li::before{background:rgba(15,19,37,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f1325' stroke-opacity='.5' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/10px no-repeat}
.sec-clara .lista-x li{color:color-mix(in srgb,var(--navy) 50%,var(--branco))}
.sec-clara .contraste .tile h3{color:var(--verde-escuro)}
.sec-clara .contraste .tile-verde h3{color:var(--verde-escuro)}
.sec-clara .depo{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .depo blockquote{color:var(--navy)}
.sec-clara .depo blockquote::before{color:var(--verde-escuro)}
.sec-clara .depo .resultado{background:rgba(132,188,37,.16);color:var(--verde-escuro)}
.sec-clara .depo .quem{border-color:rgba(15,19,37,.1)}
.sec-clara .depo .quem span{color:color-mix(in srgb,var(--navy) 55%,var(--branco))}
.sec-clara .depo .marca-cliente{background-color:rgba(15,19,37,.55)}
#depoimentos.sec-clara .depo{background:#031026;border-color:transparent}
#depoimentos.sec-clara .depo blockquote{color:var(--texto)}
#depoimentos.sec-clara .depo blockquote::before{color:var(--verde)}
#depoimentos.sec-clara .depo .resultado{background:rgba(132,188,37,.16);color:var(--verde)}
#depoimentos.sec-clara .depo .quem{border-color:var(--linha)}
#depoimentos.sec-clara .depo .quem b{color:var(--texto)}
#depoimentos.sec-clara .depo .quem span{color:var(--texto-3)}
#depoimentos.sec-clara .depo .marca-cliente{background-color:rgba(237,243,255,.7)}
.sec-clara .faq{border-color:rgba(15,19,37,.12)}
.sec-clara .faq summary{color:var(--navy)}
.sec-clara .faq summary::after{border-color:var(--verde-escuro)}
.sec-clara .faq summary:hover{color:var(--verde-escuro)}
.sec-clara .marca-cliente{background-color:rgba(15,19,37,.5)}
.sec-clara .marca-cliente:hover{background-color:var(--navy)}
.sec-clara .bt-vazio{background:transparent;color:var(--navy);border-color:rgba(15,19,37,.28)}
.sec-clara .bt-vazio:hover{background:rgba(15,19,37,.06);border-color:var(--navy)}
.sec-clara .bt-branco{background:var(--navy);color:var(--texto)}
.sec-clara .prova span{border-color:rgba(15,19,37,.14);background:#fff;color:color-mix(in srgb,var(--navy) 70%,var(--branco))}
.sec-clara .case{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .case .case-topo{border-color:rgba(15,19,37,.08)}
.sec-clara .case dt{color:var(--verde-escuro)}
.sec-clara .case dd{color:color-mix(in srgb,var(--navy) 68%,var(--branco))}
.sec-clara .case .resultado{background:rgba(132,188,37,.16);color:var(--verde-escuro)}
.sec-clara .case .case-pe{color:color-mix(in srgb,var(--navy) 50%,var(--branco))}
#cases .case{background:#fff}
#cases .case .case-topo{border-color:rgba(15,19,37,.08)}
#cases .case .case-topo b{color:var(--navy)}
#cases .case dt{color:var(--verde-escuro)}
#cases .case dd{color:color-mix(in srgb,var(--navy) 68%,var(--branco))}
#cases .case .resultado{background:rgba(132,188,37,.16);color:var(--verde-escuro)}
#cases .case .case-pe{color:color-mix(in srgb,var(--navy) 50%,var(--branco))}
.sec-clara .artigo-card{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .artigo-card .tema,.sec-clara .artigo-card .ler{color:var(--verde-escuro)}
.sec-clara .artigo-card p{color:color-mix(in srgb,var(--navy) 66%,var(--branco))}
.sec-clara .artigo p,.sec-clara .artigo .lista li{color:color-mix(in srgb,var(--navy) 78%,var(--branco))}
.sec-clara .artigo p strong{color:var(--navy)}
.sec-clara .artigo h2,.sec-clara .artigo h3{color:var(--navy)}
.sec-clara .artigo .destaque{background:var(--navy);border-left-color:var(--verde)}
.sec-clara .artigo .destaque p{color:var(--texto)}
.sec-clara .artigo .meta{color:color-mix(in srgb,var(--navy) 55%,var(--branco))}
.sec-clara .campo{background:#fff;border-color:rgba(15,19,37,.2);color:var(--navy)}
.sec-clara .campo::placeholder{color:rgba(15,19,37,.48)}
.sec-clara .campo:focus{border-color:var(--verde-escuro);box-shadow:0 0 0 4px rgba(132,188,37,.2)}
.sec-clara select.campo option{background:#fff;color:var(--navy)}
.sec-clara .estado.ok{color:var(--verde-escuro)}
.sec-clara .relacionados a{background:#fff;border-color:rgba(15,19,37,.1);color:var(--navy)}
.sec-clara .painel{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .painel-verde{background:var(--verde);border-color:transparent}
.sec-verde .tile-verde{background:linear-gradient(160deg,rgba(132,188,37,.18),rgba(132,188,37,.05) 60%,var(--sup));border-color:rgba(132,188,37,.32)}

/* ------------------------------------------------------- medida de leitura
   Quatro colunas de 226px davam 19 caracteres por linha nos cartões de texto
   longo (o confortável é 45-75). Onde o cartão é texto corrido, a grade vai
   a duas colunas; onde é frase curta (entregas, números), continua 4. */
@media (min-width:960px){
  #por-que-franquear .grade.g4{grid-template-columns:repeat(2,1fr);gap:18px}
  #internacionalizacao .grade.g4{grid-template-columns:repeat(2,1fr);gap:18px}
}
#por-que-franquear .tile p,#internacionalizacao .tile p{font-size:15.5px;line-height:1.65;max-width:60ch}


/* ==========================================================================
   Conversão: foto no hero, depoimento em destaque, cases, WhatsApp fixo,
   barra do celular, página de artigos.
   ========================================================================== */
.hero-foto{display:grid;gap:40px;grid-template-columns:1fr;align-items:center;text-align:left}
.hero-foto .olho{justify-content:flex-start}
.hero-foto .t-hero{margin:0;max-width:11em}
.hero-foto .texto-g{margin-left:0}
.hero-foto .texto-g{font-size:clamp(17.4px,1.92vw,21.1px)}
.hero-foto .prova{justify-content:flex-start}
.hero-foto .botoes{justify-content:flex-start}
@media (min-width:960px){.hero-foto{grid-template-columns:1.15fr .85fr;gap:56px}}
.retrato{position:relative;border-radius:calc(var(--raio) + 6px);overflow:hidden;border:1px solid var(--linha-forte);background:var(--sup);aspect-ratio:4/5;max-height:640px;justify-self:center;width:100%;max-width:460px}
.retrato img{width:100%;height:100%;object-fit:cover;object-position:center top}
.retrato::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,11,20,.92))}
.retrato figcaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:1}
.retrato figcaption b{display:block;font-size:17px;color:var(--texto)}
.retrato figcaption span{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-top:4px}
.retrato .selo{position:absolute;top:18px;left:18px;z-index:1;background:rgba(9,11,20,.6);backdrop-filter:blur(8px)}

.depo-grande{display:grid;gap:28px;grid-template-columns:1fr;align-items:center;background:var(--sup);border:1px solid var(--linha);border-radius:calc(var(--raio) + 6px);padding:clamp(26px,4vw,48px)}
@media (min-width:900px){.depo-grande{grid-template-columns:1fr auto;gap:48px}}
.depo-grande blockquote{font-family:var(--serif);font-size:clamp(24px,3vw,38px);line-height:1.15;letter-spacing:-.02em;color:var(--texto);text-wrap:pretty}
.depo-grande blockquote::before{content:"\201C";color:var(--verde)}
.depo-grande .quem{margin-top:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.depo-grande .quem b{font-size:15px}.depo-grande .quem span{font-size:13px;color:var(--texto-3)}
.depo-grande .grande-n{text-align:center;padding:22px 28px;border-radius:var(--raio);background:var(--verde-tint);border:1px solid rgba(132,188,37,.3);min-width:200px}
.depo-grande .grande-n b{display:block;font-size:clamp(40px,5vw,64px);font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--verde)}
.depo-grande .grande-n span{display:block;margin-top:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-2)}

.case{display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.case .case-topo{padding:26px 28px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--linha)}
.case .case-topo b{font-size:16px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.case .case-topo .resultado{display:inline-flex;padding:7px 12px;border-radius:999px;background:var(--verde-tint);color:var(--verde);font-size:12px;font-weight:700;white-space:nowrap}
.case dl{padding:6px 28px 26px;margin:0}
.case dt{margin-top:18px;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.case dd{margin:6px 0 0;font-size:15px;line-height:1.6;color:var(--texto-2);text-wrap:pretty}
.case .case-pe{margin-top:auto;padding:0 28px 24px;font-size:12.5px;color:var(--texto-3)}

.video{position:relative;border-radius:calc(var(--raio) + 6px);overflow:hidden;border:1px solid var(--linha-forte);background:#000;aspect-ratio:16/9}
.video video{width:100%;height:100%;display:block;object-fit:cover}

/* WhatsApp fixo (todas as telas) e barra de ação no celular */
.zap-fixo{position:fixed;right:22px;bottom:22px;z-index:60;width:56px;height:56px;border-radius:999px;background:var(--verde);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 32px -8px rgba(132,188,37,.7);transition:transform .2s}
.zap-fixo:hover{transform:scale(1.06)}
.zap-fixo svg{width:28px;height:28px}
.barra-cel{display:none}
@media (max-width:760px){
  .zap-fixo{display:none}
  .barra-cel{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(9,11,20,.9);backdrop-filter:blur(14px);border-top:1px solid var(--linha)}
  .barra-cel .bt{padding:13px 10px;font-size:14px;white-space:normal;line-height:1.2}
  body{padding-bottom:78px}
}

/* artigos */
.artigos-grade{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:700px){.artigos-grade{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.artigos-grade{grid-template-columns:repeat(3,1fr)}}
.artigo-card{display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s,transform .25s}
.artigo-card:hover{border-color:var(--linha-forte);transform:translateY(-3px)}
.artigo-card .capa{aspect-ratio:16/10;background:linear-gradient(160deg,var(--sup-3),var(--sup));position:relative;overflow:hidden}
.artigo-card .capa img{width:100%;height:100%;object-fit:cover;display:block}
.artigo-card .capa .n{position:absolute;left:16px;top:14px;font-family:var(--serif);font-size:44px;line-height:1;color:var(--verde);letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.5)}
.artigo-card .miolo{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.artigo-card .tema{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--verde);margin-bottom:10px}
.artigo-card h3{font-size:19px;line-height:1.25}
.artigo-card p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--texto-2);text-wrap:pretty}
.artigo-card .ler{margin-top:auto;padding-top:18px;font-size:13.5px;font-weight:700;color:var(--verde);display:inline-flex;align-items:center;gap:8px}

.artigo{max-width:760px;margin:0 auto}
.artigo .capa-artigo{border-radius:calc(var(--raio) + 6px);overflow:hidden;border:1px solid var(--linha);aspect-ratio:16/8;margin-bottom:44px}
.artigo .capa-artigo img{width:100%;height:100%;object-fit:cover;display:block}
.artigo h2{font-size:clamp(28px,3.4vw,38px);margin:52px 0 16px;line-height:1.08}
.artigo h3{font-size:20px;margin:32px 0 10px}
.artigo p{font-size:17.5px;line-height:1.75;color:var(--texto-2);margin-top:16px;text-wrap:pretty}
.artigo p strong{color:var(--texto)}
.artigo .lista{margin-top:18px}.artigo .lista li{font-size:16.5px;margin-top:12px}
.artigo .destaque{margin:36px 0;padding:26px 30px;border-left:3px solid var(--verde);background:var(--sup);border-radius:0 var(--raio) var(--raio) 0}
.artigo .destaque p{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.3vw,26px);line-height:1.3;color:var(--texto)}
.artigo .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--texto-3);margin:22px 0 0}
.artigo-hero .t-hero{font-size:clamp(38px,5.4vw,64px)}
.relacionados{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:700px){.relacionados{grid-template-columns:repeat(3,1fr)}}
.relacionados a{display:block;padding:18px 20px;border:1px solid var(--linha);border-radius:16px;background:var(--sup);text-decoration:none;color:var(--texto);font-weight:700;font-size:15px;line-height:1.3;transition:border-color .2s}
.relacionados a:hover{border-color:var(--verde)}
.relacionados a span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--verde);margin-bottom:8px;font-weight:700}

/* rodapé: redes e legal */
.redes{display:flex;gap:10px;flex-wrap:wrap}
.redes a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;border:1px solid var(--linha);color:var(--texto-2);transition:color .2s,border-color .2s}
.redes a:hover{color:var(--texto);border-color:var(--linha-forte)}
.redes svg{width:17px;height:17px}

/* formulário: mensagem de estado */
.estado{display:none;margin-top:12px;padding:14px 16px;border-radius:var(--raio-bt);font-size:14.5px;font-weight:600}
.estado.ok{display:block;background:rgba(132,188,37,.16);color:var(--verde-escuro);border:1px solid rgba(132,188,37,.4)}
.estado.erro{display:block;background:rgba(220,60,60,.1);color:#b23a3a;border:1px solid rgba(220,60,60,.3)}

/* correções: texto de artigo e campos de formulário dentro de seção clara */

/* espaço do vídeo no topo da Home (16:9), no lugar do retrato */
.video-hero{position:relative;border-radius:calc(var(--raio) + 6px);overflow:hidden;border:1px solid var(--linha-forte);background:#000;aspect-ratio:16/9;width:100%;align-self:center;box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.video-hero video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.video-hero .selo{position:absolute;top:16px;left:16px;z-index:1;background:rgba(9,11,20,.65);backdrop-filter:blur(8px);pointer-events:none}
@media (min-width:960px){.hero-foto{grid-template-columns:1fr 1fr;gap:56px}}
/* título do topo com vídeo: mais largura para não quebrar em cinco linhas */
.hero-foto .t-hero{max-width:none;font-size:clamp(44px,5.6vw,76px)}
@media (min-width:960px){.hero-foto{grid-template-columns:1.08fr .92fr;gap:48px}}
/* vídeo vertical (o institucional atual é 9:16): mostra inteiro, centralizado */
.video-hero.vertical,.video.vertical{aspect-ratio:9/16;max-height:560px;width:auto;max-width:100%;margin:0 auto;justify-self:center}
.video-hero.vertical video,.video.vertical video{object-fit:cover}
@media (max-width:959px){.video-hero.vertical{max-height:70vh}}

/* ==========================================================================
   Vídeo vertical dentro de um smartphone, alinhado com a coluna do texto
   (topo no rótulo "Consultoria especializada…", base nos selos de prova).
   ========================================================================== */
@media (min-width:960px){
  /* .env-larga: só o banner da Home usa essa largura maior (1340px em vez de
     1180px), para o título caber com fonte grande do lado do celular. O resto
     do site continua com 1180px. */
  .env-larga{max-width:1340px}
  /* O celular agora manda na largura (e não na altura da coluna de texto):
     largura fixa com a proporção de tela de um Pro Max (9:19,5), e a linha
     do hero cresce para caber. Antes ele era esticado pela altura do texto,
     o que o deixava estreito. */
  .hero-foto{align-items:center;grid-template-columns:1fr .62fr;gap:36px}
  /* Título com duas linhas de tamanhos diferentes: "Se entrarmos no seu
     negócio," (linha 1, +40% do tamanho anterior) e "aperte o cinto." (linha
     2, em destaque, +45%) — pedido do Fred para o texto ocupar mais espaço
     e chegar mais perto da altura do vídeo ao lado. A coluna de texto ficou
     mais larga (o vídeo mais estreito) para caber esse tanto de letra. */
  .hero-foto .t-hero .l1{font-size:clamp(50px,5.6vw,67px)}
  .hero-foto .texto-g{max-width:620px}
  .hero-foto .t-hero em{font-size:clamp(52px,5.9vw,70px)}
  .video-hero.vertical{aspect-ratio:auto;height:auto;max-height:none;position:relative;min-height:0;
    display:flex;justify-content:center;
    background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
  /* tela 1080x1920 (9:16). A 1150px de altura o hero passava de 1350px e os
     botões caíam abaixo da dobra num notebook; 720px devolve o hero para
     ~930px e o aparelho continua largo (405px) por causa da proporção. */
  .video-hero.vertical .telefone{position:static;transform:none;height:720px;width:auto;max-width:100%;aspect-ratio:1080/1920}
}
@media (max-width:959px){
  .video-hero.vertical{aspect-ratio:auto;height:auto;max-height:none;display:grid;justify-items:center;
    background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}
  .video-hero.vertical .telefone{height:auto;width:min(100%,420px);aspect-ratio:1080/1920}
}
.telefone{
  position:relative;max-width:100%;border-radius:48px;background:#0b0d16;
  border:1px solid rgba(237,243,255,.2);
  box-shadow:0 46px 100px -34px rgba(0,0,0,.95),0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 9px #171b2a,inset 0 0 0 10px rgba(237,243,255,.08);
  padding:12px;
}
.telefone .tela{position:relative;width:100%;height:100%;border-radius:38px;overflow:hidden;background:#000}
.telefone .tela video{width:100%;height:100%;object-fit:cover;display:block;background:#000;cursor:pointer}

/* ---- controles próprios do vídeo (sem a barra nativa do navegador)
   O vídeo abre tocando sozinho e sem som (navegador só deixa assim).
   O botão do meio liga/desliga o som; clicar no vídeo pausa e despausa,
   mostrando um aviso que some sozinho — não existe botão fixo de pausa. */
.video-som{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:62px;height:62px;border-radius:50%;border:1px solid rgba(237,243,255,.25);cursor:pointer;
  background:rgba(9,11,20,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:opacity .25s ease,transform .2s ease,background-color .2s ease;
}
.video-som svg{width:24px;height:24px}
.video-som:hover{transform:translate(-50%,-50%) scale(1.07);background:rgba(9,11,20,.75)}
/* com o som ligado o botão fica discreto, mas continua ali para silenciar */
.tela.com-som .video-som{opacity:.3}
.tela.com-som:hover .video-som,.video-som:focus-visible{opacity:1}

.video-aviso{
  position:absolute;left:50%;top:50%;z-index:2;width:78px;height:78px;border-radius:50%;
  background:rgba(9,11,20,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.7);
}
.video-aviso svg{width:30px;height:30px}
.video-aviso.mostrar{animation:aviso-some .7s ease forwards}
.video-aviso.rapido{animation-duration:.42s}
@keyframes aviso-some{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.3)}
}
@media (prefers-reduced-motion:reduce){.video-aviso.mostrar{animation-duration:.2s}}
.telefone::before{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:27%;height:20px;border-radius:999px;background:#0b0d16;z-index:2;box-shadow:0 0 0 1px rgba(237,243,255,.06)}

/* ---- ajustes 02/09 (tarde): botões centrados no hero central, entregas 4x2, franqueador, painel menor */
.hero-c .botoes,.hero-c .prova{justify-content:center}
.entregas .tile h3{font-size:17px;margin-top:14px;color:var(--navy)}
.entrega-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.entrega-topo .ico{margin-bottom:0}
.n-serif{font-family:var(--serif);font-size:44px;line-height:1;color:var(--verde);letter-spacing:-.03em}
.tile-cheio .n-serif{color:var(--navy)}
.entrega-tile .frase{font-size:clamp(16px,1.6vw,18px);margin-top:10px;color:var(--navy)}
.franqueador .tile h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.05;letter-spacing:-.02em;margin-top:18px}
.franqueador .tile h3::after{content:"";display:block;width:44px;height:3px;background:var(--verde);margin-top:16px;border-radius:2px}
.painel-p{padding:clamp(22px,2.8vw,34px) clamp(20px,4.4vw,52px)}
.painel-p .t-sub{max-width:20em;margin:0 auto}
/* o depoimento grande e os números também precisam inverter no branco
   (esse bloco nasceu depois do sistema de tons e nunca tinha caído numa
   seção clara: o nome ficava navy sobre navy e o "+200" verde sobre verde) */
.sec-clara .depo-grande{background:#fff;border-color:rgba(15,19,37,.1)}
.sec-clara .depo-grande blockquote{color:var(--navy)}
.sec-clara .depo-grande blockquote::before{color:var(--verde-escuro)}
.sec-clara .depo-grande .quem b{color:var(--navy)}
.sec-clara .depo-grande .quem span{color:color-mix(in srgb,var(--navy) 55%,var(--branco))}
.sec-clara .depo-grande .grande-n{background:rgba(132,188,37,.16);border-color:rgba(132,188,37,.45)}
.sec-clara .depo-grande .grande-n b{color:var(--verde-escuro)}
.sec-clara .depo-grande .grande-n span{color:color-mix(in srgb,var(--navy) 62%,var(--branco))}

/* hero compacto: usado no diagnostico, onde o formulario e que importa --
   o hero so precisa situar a pessoa, nao ocupar a tela toda */
.hero-compacto{padding:calc(var(--topo) + 28px) 0 28px}
@media (max-width:760px){.hero-compacto{padding:calc(var(--topo) + 18px) 0 20px}}
.hero-compacto .olho{margin-bottom:12px}
.hero-compacto .texto-g{margin-top:14px}
.hero-compacto .prova{margin-top:12px}


/* ------------------------------------------------- entregas em fundo branco
   com quadrados verdes (pedido do Fred): a seção usa .sec-clara (fica branca),
   e as tiles ali dentro ganham fundo verde sólido, com texto/ícone em navy. */
#entregas.sec-clara .tile{background:var(--navy);border-color:transparent}
#entregas.sec-clara .tile h3,#entregas.sec-clara .tile p,#entregas.sec-clara .entrega-tile .frase{color:var(--texto)}
#entregas.sec-clara .n-serif{color:var(--verde)}
#entregas.sec-clara .ico{background:rgba(132,188,37,.18);color:var(--verde)}
#entregas.sec-clara .mais summary{color:var(--verde)}
#entregas.sec-clara .mais p{color:var(--texto-2)}
#por-que-franquear.sec-clara .tile{background:#031026;border-color:transparent}
#por-que-franquear.sec-clara .tile h3,#por-que-franquear.sec-clara .tile p{color:var(--texto)}
#internacionalizacao.sec-clara .tile{background:#031026;border-color:transparent}
#internacionalizacao.sec-clara .tile h3,#internacionalizacao.sec-clara .tile p{color:var(--texto)}
#internacionalizacao.sec-clara .ico{background:rgba(132,188,37,.18);color:var(--verde)}
#internacionalizacao.sec-clara .bt-vazio{background:#031026;color:var(--texto);border-color:transparent}
#problemas.sec-clara .tile{background:#031026;border-color:transparent}
#problemas.sec-clara .tile h3,#problemas.sec-clara .tile p{color:var(--texto)}
#problemas.sec-clara .ico{background:rgba(132,188,37,.18);color:var(--verde)}