/* ==========================================================================
   FONTES SERVIDAS POR ESTE DOMÍNIO.

   Antes vinham do Google Fonts. Tirar isso muda duas coisas concretas:

   PRIVACIDADE — fonte no CDN do Google entrega o IP de quem visita a um
   terceiro, em toda visita, antes de qualquer consentimento. Era o único
   terceiro no carregamento das páginas, e a política de privacidade tinha uma
   ressalva inteira só para declarar isso. Deixou de existir.

   REDE — somem a resolução de dois domínios (fonts.googleapis.com e
   fonts.gstatic.com) e a negociação TLS com eles, no caminho crítico. E a CSP
   pôde fechar: `style-src 'self'` e `font-src 'self'`.

   UM ARQUIVO POR SUBCONJUNTO, e não um por peso: Inter e Newsreader são
   FONTES VARIÁVEIS — os arquivos que o Google entregava para cada peso eram
   byte a byte o mesmo. Declarar a faixa (`font-weight: 400 700`) cobre tudo
   com um download. Conferido por md5 antes de apagar os repetidos.

   `font-display: swap` mantém o texto legível enquanto a fonte carrega, e o
   `unicode-range` faz o navegador buscar o latin-ext só quando a página usa
   caractere que precisa dele.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter-normal-400-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/* ==========================================================================
   Home — VERSÃO OFICIAL, a partir de `francine-home-prototype-v2`.
   Definida pelo cliente em 10/09/2026 como a base de todo o site.

   O que mudou em relação a tudo que veio antes: paleta nova (#0B2239 /
   #071724 / #F7F8F6, azul dessaturado #648EAA), serifa Georgia e um sistema
   próprio de componentes — ecossistema de quatro frentes, cartões de
   serviço, linhas de tradução, diário e fecho.

   ESTE ARQUIVO É AUTOSSUFICIENTE. A home deixou de carregar tokens.css,
   base.css, componentes.css e campos.css: aquele sistema continua servindo
   as outras sete páginas até elas serem refeitas nesta base, e misturar os
   dois produziria conflito de :root e de seletor de elemento.

   TRÊS COISAS FORAM ACRESCENTADAS AO PROTÓTIPO, e nenhuma é estética:
     1. Inter é CARREGADA. O protótipo declarava `font-family: Inter` sem
        nunca buscar a fonte — em máquina sem Inter instalada, caía no
        system-ui e a página inteira mudava de voz.
     2. As fotos saíram do base64. O HTML tinha 3,4 MB embutidos; agora são
        derivados responsivos de 480 a 1536, em jpg e webp.
     3. O `.reveal` ganhou rede de segurança — ver o fim do arquivo.
   ========================================================================== */

:root {
      --navy-950:#071724;
      --navy-900:#0B2239;
      --navy-850:#102B45;
      --blue-700:#2E5875;
      --blue-500:#648EAA;
      --mist-200:#DCE7EE;
      --mist-100:#ECF2F5;
      --paper:#F7F8F6;
      --white:#FFFFFF;
      --ink:#142331;
      --muted:#5E6D78;
      --line:rgba(16,43,69,.14);
      --shadow:0 24px 70px rgba(7,23,36,.12);
      --serif: Georgia, 'Times New Roman', serif;
      --sans: 'Inter', 'Inter-fb', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }

    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      font-family:var(--sans);
      color:var(--ink);
      background:var(--paper);
      -webkit-font-smoothing:antialiased;
    }
    a { color:inherit; text-decoration:none; }
    img { display:block; width:100%; }
    button { font:inherit; }
    .container { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }

    /* O ATALHO DE TECLADO.

   Esta regra mora em paginas.css, e a home carrega so home.css — entao aqui o
   `<a class="pular">` ficava SEM ESTILO NENHUM: um link inline de 20px de
   altura no topo do body, empurrando o `main` inteiro 20px para baixo em toda
   visita. E, como fica atras da nav fixa, quem navega por teclado tambem nao
   via o atalho ao chegar nele. Terceira vez nesta base que uma classe e usada
   numa pagina cuja folha nao a define. */
.pular {
  position:absolute; left:-9999px; top:0; z-index:999;
  min-height:44px; display:inline-flex; align-items:center;
  background:var(--navy-950); color:#fff; padding:12px 20px;
  border-radius:0 0 8px 0; font-weight:600; font-size:14px;
}
.pular:focus { left:0; }

.nav {
      position:fixed;
      inset:0 0 auto 0;
      z-index:40;
      border-bottom:1px solid rgba(255,255,255,.11);
      background:linear-gradient(to bottom, rgba(7,23,36,.82), rgba(7,23,36,.24));
      backdrop-filter:blur(18px);
      color:white;
      transition:.3s ease;
    }
    .nav.scrolled { background:rgba(7,23,36,.95); }
    .nav-inner {
      height:82px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .brand { display:flex; flex-direction:column; line-height:1; gap:5px; letter-spacing:.02em; }
    .brand strong { font-family:var(--serif); font-size:20px; font-weight:500; }
    .brand span { font-size:10px; text-transform:uppercase; letter-spacing:.18em; color:rgba(255,255,255,.66); }
    .nav-links { display:flex; align-items:center; gap:26px; font-size:13px; color:rgba(255,255,255,.82); }
    .nav-links a:hover { color:white; }
    .nav-cta, .btn-primary, .btn-light {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      border-radius:999px;
      min-height:48px;
      padding:0 22px;
      transition:.25s ease;
    }
    .nav-cta { border:1px solid rgba(255,255,255,.34); color:white; }
    .nav-cta:hover { background:white; color:var(--navy-900); }
    .menu-btn { display:none; border:0; background:transparent; color:white; font-size:26px; }

    .hero {
      min-height:100vh;
      position:relative;
      overflow:hidden;
      display:flex;
      align-items:center;
      color:white;
      background:var(--navy-950);
    }
    .hero-photo {
      position:absolute;
      inset:0 0 0 48%;
      /* Longhand, e nao shorthand: `background-image` nao aceita a cauda
         `center 18%/cover no-repeat`, e com ela o navegador descarta a
         declaracao INTEIRA — o hero ficava sem foto e sem erro no console. */
      background-image: url('/assets/img/home-hero-1536.jpg');
      background-image: image-set(
        url('/assets/img/home-hero-1536.webp') type('image/webp'),
        url('/assets/img/home-hero-1536.jpg')  type('image/jpeg'));
      background-position: center 18%;
      background-size: cover;
      background-repeat: no-repeat;

      /* A foto DISSOLVE na propria borda, em vez de terminar em linha reta.

         Antes, o unico amaciador era o scrim de `.hero::after`, que escurece
         a foto por cima mas nao apaga o limite da caixa: a esquerda do corte
         era navy puro, a direita era navy a 77% sobre a foto, e a diferenca
         entre os dois desenhava uma vertical visivel a 48% da largura.

         Mascara em vez de gradiente sobreposto porque o que precisa sumir e
         a IMAGEM, nao a cor por cima dela. Sobrepor mais navy so escureceria
         a foto inteira e mantinha a borda. */
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 10%, #000 30%);
              mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 10%, #000 30%);
    }
    .hero::after {
      content:'';
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, var(--navy-950) 0%, rgba(7,23,36,.98) 37%, rgba(7,23,36,.58) 58%, rgba(7,23,36,.08) 82%),
        linear-gradient(0deg, rgba(7,23,36,.48), transparent 38%);
      pointer-events:none;
    }
    .hero-content { position:relative; z-index:2; padding-top:120px; padding-bottom:80px; width:62%; }
    .eyebrow {
      display:flex;
      align-items:center;
      gap:12px;
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.24em;
      font-weight:700;
    }
    .eyebrow::before { content:''; width:34px; height:1px; background:currentColor; opacity:.55; }
    .hero .eyebrow { color:#BFD3E0; }
    h1,h2,h3,p { margin-top:0; }
    .hero h1 {
      font-family:var(--serif);
      font-size:clamp(54px, 6.4vw, 96px);
      font-weight:400;
      letter-spacing:-.055em;
      line-height:.94;
      max-width:760px;
      margin:28px 0 26px;
    }
    .hero h1 em { font-style:italic; color:#C5D8E4; }
    .hero-lead {
      font-family:var(--serif);
      font-size:clamp(22px,2vw,31px);
      line-height:1.28;
      color:#D9E5EC;
      max-width:630px;
      margin-bottom:20px;
    }
    .hero-copy { max-width:620px; color:rgba(255,255,255,.68); line-height:1.75; font-size:15px; }
    .hero-actions { display:flex; gap:12px; margin-top:34px; flex-wrap:wrap; }
    .btn-light { background:white; color:var(--navy-900); font-weight:700; }
    .btn-light:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.18); }
    .btn-ghost { display:inline-flex; align-items:center; min-height:48px; padding:0 18px; color:#D6E4EC; font-size:14px; }
    .btn-ghost:hover { color:white; }
    .hero-footer {
      position:absolute;
      z-index:3;
      left:0; right:0; bottom:0;
      border-top:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.62);
      font-size:12px;
    }
    .hero-footer .container { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
    .hero-footer strong { color:white; font-weight:600; }

    section { position:relative; }
    .section-pad { padding:120px 0; }
    .section-title { max-width:840px; margin-bottom:64px; }
    .section-title .eyebrow { color:var(--blue-700); margin-bottom:20px; }
    .section-title h2 {
      font-family:var(--serif);
      font-size:clamp(40px,5vw,70px);
      font-weight:400;
      letter-spacing:-.045em;
      line-height:1.03;
      margin-bottom:24px;
    }
    .section-title p { max-width:700px; color:var(--muted); line-height:1.8; font-size:17px; }

    .ecosystem { background:white; }
    .ecosystem-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1px;
      background:var(--line);
      border:1px solid var(--line);
      border-radius:28px;
      overflow:hidden;
      position:relative;
    }
    .eco-card {
      background:white;
      min-height:320px;
      padding:54px 64px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .eco-card:nth-child(odd) { padding-right:190px; }
    .eco-card:nth-child(even) { padding-left:190px; }
    .eco-card span {
      font-size:12px;
      letter-spacing:.16em;
      text-transform:uppercase;
      color:#4F7894;
      font-weight:700;
      margin-bottom:16px;
    }
    .eco-card h3 {
      font-family:var(--serif);
      font-weight:400;
      font-size:34px;
      line-height:1.08;
      letter-spacing:-.025em;
      margin-bottom:16px;
    }
    .eco-card p {
      color:var(--muted);
      line-height:1.72;
      max-width:440px;
      margin-bottom:0;
    }
    .eco-center {
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:240px;
      aspect-ratio:1;
      border-radius:50%;
      background:var(--navy-900);
      color:white;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding:30px;
      box-shadow:0 20px 48px rgba(7,23,36,.16);
      border:11px solid white;
      z-index:2;
    }
    .eco-center strong { font-family:var(--serif); font-size:26px; font-weight:400; line-height:1.15; }

    .services { background:var(--mist-100); }
    .service-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
    .service-card {
      border:1px solid rgba(16,43,69,.12);
      border-radius:24px;
      padding:36px;
      background:rgba(255,255,255,.68);
      min-height:430px;
      display:flex;
      flex-direction:column;
      transition:.28s ease;
    }
    .service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); background:white; }
    .service-card.featured { background:var(--navy-900); color:white; transform:translateY(-18px); box-shadow:0 28px 80px rgba(7,23,36,.17); }
    .service-card.featured:hover { transform:translateY(-24px); }
    .service-kicker { font-size:11px; text-transform:uppercase; letter-spacing:.2em; font-weight:800; color:var(--blue-700); }
    .featured .service-kicker { color:#AFC9D9; }
    .service-card h3 { font-family:var(--serif); font-size:36px; line-height:1.05; font-weight:400; margin:24px 0 20px; }
    .service-card p { color:var(--muted); line-height:1.72; margin-bottom:24px; }
    .featured p { color:rgba(255,255,255,.68); }
    .service-quote { margin-top:auto; border-top:1px solid var(--line); padding-top:24px; font-family:var(--serif); font-size:20px; line-height:1.4; }
    .featured .service-quote { border-color:rgba(255,255,255,.15); color:#E9F1F5; }
    /* O link de cada cartao vira BOTAO.

   Era texto de 13px com uma seta — do lado de um cartao de 430px de altura,
   lia como legenda e nao como convite. Nada aqui pedia clique de verdade.

   `margin-top:auto` num cartao que ja e flex-column empurra os tres botoes
   para a base e alinha os tres, independente do tamanho do texto acima. */
.service-link {
  /* NAO usar `margin-top:auto` aqui. `.service-quote` logo acima ja tem o
     dela, e dois auto na mesma coluna flex DIVIDEM o espaco livre entre si em
     vez de somar: no cartao da Assessoria, cuja citacao tem tres linhas, nao
     sobrava espaco e o botao encostava no texto (gap medido: 0px). A citacao
     sozinha ja empurra o grupo para a base e alinha os tres botoes. */
  margin-top: 24px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font-size: 13px; font-weight: 800;
  background: var(--navy-900); color: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.service-link:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(7,23,36,.22); }
/* O cartao do meio e navy: ali o botao inverte, senao seria navy sobre navy. */
.service-card.featured .service-link { background: #fff; color: var(--navy-900); }

    .manifesto { background:var(--navy-950); color:white; overflow:hidden; }
    .manifesto-grid { display:grid; grid-template-columns:.95fr 1.05fr; min-height:760px; }
    .manifesto-photo { position:relative; min-height:680px; }
    .manifesto-photo img { position:absolute; inset:0; height:100%; object-fit:cover; object-position:center 16%; filter:grayscale(1) contrast(1.03); }
    .manifesto-photo::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 60%,var(--navy-950)), linear-gradient(0deg,rgba(7,23,36,.35),transparent 45%); }
    .manifesto-copy { padding:110px 6vw 100px 8vw; display:flex; flex-direction:column; justify-content:center; }
    .manifesto-copy .eyebrow { color:#A8C4D5; }
    .manifesto-copy h2 { font-family:var(--serif); font-size:clamp(48px,5vw,78px); font-weight:400; line-height:.98; letter-spacing:-.05em; margin:28px 0 30px; }
    .manifesto-copy h2 em { color:#BFD3DF; font-style:italic; }
    .manifesto-copy p { color:rgba(255,255,255,.67); font-size:17px; line-height:1.8; max-width:650px; }
    .manifesto-line { margin-top:28px; padding-top:28px; border-top:1px solid rgba(255,255,255,.13); font-family:var(--serif); color:#E6EEF3; font-size:22px; line-height:1.45; }

    .trajectory { background:white; }
    .trajectory-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:70px; align-items:center; }
    .trajectory-photo { border-radius:30px; overflow:hidden; box-shadow:var(--shadow); }
    .trajectory-photo img { aspect-ratio:4/5; object-fit:cover; object-position:center 28%; }
    .trajectory-copy .eyebrow { color:var(--blue-700); }
    .trajectory-copy h2 { font-family:var(--serif); font-size:clamp(44px,5vw,72px); font-weight:400; line-height:1; letter-spacing:-.045em; margin:24px 0 24px; }
    .trajectory-copy > p { color:var(--muted); font-size:17px; line-height:1.8; }
    .timeline { margin-top:38px; border-top:1px solid var(--line); }
    .time-row { display:grid; grid-template-columns:94px 1fr; gap:20px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start; }
    .time-row strong { color:var(--blue-700); font-size:13px; letter-spacing:.1em; }
    .time-row span { line-height:1.55; }

    .journal { background:var(--paper); }
    .journal-top { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:48px; }
    .journal-top .section-title { margin-bottom:0; }
    .text-link { font-size:13px; font-weight:800; color:var(--blue-700); white-space:nowrap; }
    
    
    
    .simbiota { background:var(--mist-200); overflow:hidden; }
    .simbiota-card { min-height:520px; border-radius:32px; background:var(--navy-900); color:white; padding:70px; position:relative; overflow:hidden; display:flex; align-items:center; }
    .simbiota-card::before { content:''; position:absolute; width:520px; height:520px; border-radius:50%; border:1px solid rgba(255,255,255,.10); right:-80px; top:-90px; }
    .simbiota-card::after { content:''; position:absolute; width:340px; height:340px; border-radius:50%; border:1px solid rgba(255,255,255,.16); right:10px; top:0; }
    .simbiota-copy { position:relative; z-index:2; max-width:690px; }
    .simbiota-label { font-size:12px; letter-spacing:.26em; text-transform:uppercase; font-weight:800; color:#BFD3DF; }
    .simbiota h2 { font-family:var(--serif); font-size:clamp(48px,5vw,76px); font-weight:400; letter-spacing:-.045em; line-height:.99; margin:28px 0 24px; }
    .simbiota p { color:rgba(255,255,255,.68); font-size:17px; line-height:1.8; max-width:620px; }
    .coming { display:inline-flex; margin-top:26px; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:13px 18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }

    .closing { background:var(--navy-950); color:white; }
    .closing-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; }
    .closing-photo { border-radius:28px; overflow:hidden; }
    .closing-photo img { aspect-ratio:4/5; object-fit:cover; object-position:center top; filter:saturate(.82); }
    .closing-copy .eyebrow { color:#A8C4D5; }
    .closing-copy blockquote { margin:28px 0 36px; font-family:var(--serif); font-size:clamp(30px,3vw,46px); line-height:1.22; letter-spacing:-.03em; color:#F3F7F9; }
    .closing-sign { border-top:1px solid rgba(255,255,255,.13); padding-top:28px; }
    .closing-sign strong { display:block; font-family:var(--serif); font-size:24px; font-weight:400; margin-bottom:7px; }
    .closing-sign span { color:#AFC4D1; }

    footer { background:#05111C; color:rgba(255,255,255,.58); padding:54px 0 30px; font-size:13px; }
    .footer-top { display:grid; grid-template-columns:1.2fr .8fr; gap:70px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.10); }
    .footer-brand { max-width:620px; }
    .footer-brand strong { display:block; color:white; font-family:var(--serif); font-size:29px; font-weight:400; margin-bottom:12px; }
    .footer-brand p { line-height:1.75; }
    .footer-nav { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 36px; align-content:start; }
    .footer-nav a { color:rgba(255,255,255,.68); }
    .footer-nav a:hover { color:white; }
    .footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:28px; }

/* --------------------------------------------------------------------------
       .reveal — entrada por rolagem.
    
       Em 31/08 este site ficou invisivel em producao duas vezes no mesmo dia, pelo
       mesmo mecanismo: elementos em `opacity: 0` esperando um IntersectionObserver
       que nao marcou. Pagina em branco, nada no console.
    
       A licao ficou escrita em componentes.css e agora vale aqui: deslocamento
       NUNCA esconde. Se o observador nunca rodar, o pior que acontece e o elemento
       ficar 18px abaixo do lugar — ninguem percebe. Com opacity, o pior que
       acontece e a pagina sumir.
    
       18px e nao 24: sem o fade para mascarar o percurso, o olho ve o movimento
       inteiro, e distancia demais vira sobressalto em vez de sutileza.
       -------------------------------------------------------------------------- */

    @media (max-width:1100px) {
      .eco-card { min-height:292px; padding:46px 48px; }
      .eco-card:nth-child(odd) { padding-right:158px; }
      .eco-card:nth-child(even) { padding-left:158px; }
      .eco-card h3 { font-size:30px; }
      .eco-center { width:210px; border-width:9px; }
      .eco-center strong { font-size:23px; }
    }

    @media (max-width:980px) {
      /* 24px de cada lado, o mesmo que `.wrap` usa nos artigos — antes
         eram 17, e num aparelho de 390px o texto encostava na borda. */
      .container { width:min(100% - 48px, 1180px); }
      /* O BOTAO NAO FAZIA NADA. O JS alternava a classe `mobile-open` e nao
         existia regra nenhuma para ela — o clique adicionava uma classe que
         ninguem escutava. Aqui esta o painel que faltava: a lista some da
         barra e reaparece abaixo dela quando aberta.

         `position:fixed` com `top:100%` nao serve porque a barra e fixa e
         tem altura variavel; o painel ancora na propria barra, que e
         `position:fixed`, entao basta posiciona-lo a partir dela. */
      .nav-links { display:none; }
      .nav-links.mobile-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        left:0; right:0; top:100%;
        background:rgba(7,23,36,.98);
        backdrop-filter:blur(18px);
        border-bottom:1px solid rgba(255,255,255,.12);
        padding:8px 0 14px;
        font-size:15px;
      }
      /* 48px de alvo: dedo nao mira. */
      .nav-links.mobile-open a {
        display:block;
        padding:14px min(34px, 5vw);
        min-height:48px;
        color:rgba(255,255,255,.9);
        border-top:1px solid rgba(255,255,255,.07);
      }
      .nav-links.mobile-open a:first-child { border-top:0; }
      .nav-links.mobile-open a:hover,
      .nav-links.mobile-open a:focus-visible { background:rgba(255,255,255,.08); color:white; }
      /* O painel ancora na BARRA, nao no container. `.nav` ja e position:fixed,
         entao ele e o bloco que contem o absoluto — e `left:0; right:0` cobre
         a largura toda. Ancorar no `.nav-inner` deixaria sobras nas laterais,
         porque o container e mais estreito que a barra. */
      .menu-btn { display:block; min-width:48px; min-height:48px; line-height:1; cursor:pointer; }
      .hero-photo {
        /* ==================================================================
           EMPILHADO, e nao sobreposto.

           Aqui a foto ficava atras do texto, e dois escurecimentos se somavam:
           `opacity:.68` NELA mais um scrim de 90-98% de navy POR CIMA. Medido
           no navegador a 375px: na faixa onde esta o rosto dela, a imagem
           aparecia com 1,4% de visibilidade. Ela sumia.

           Nao da para consertar mexendo nos valores, porque o conflito e
           estrutural: texto sobre foto SEMPRE exige escurecer a foto, e quanto
           mais estreita a tela, mais o texto ocupa a largura toda — no celular
           o scrim tem de cobrir tudo.

           Separar tira o dilema. A foto fica inteira em cima, o texto em bloco
           solido embaixo, e nenhum dos dois atrapalha o outro. A mascara no pe
           dissolve a foto dentro do navy, que e a mesma linguagem da borda do
           hero no desktop.
           ================================================================== */
        position:relative; inset:auto;
        width:100%; aspect-ratio:4/5; max-height:50vh;
        opacity:1; background-position:center 12%;
        -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
                mask-image:linear-gradient(to bottom,#000 72%,transparent 99%);
        /* 720 basta na largura do celular; o 1536 custava ~250 KB a toa */
        background-image: url('/assets/img/home-hero-720.jpg');
        background-image: image-set(
          url('/assets/img/home-hero-720.webp') type('image/webp'),
          url('/assets/img/home-hero-720.jpg')  type('image/jpeg'));
      }
      /* Sem texto sobre a foto, o scrim so escureceria a imagem a toa. */
      .hero::after { display:none; }
      /* O hero precisa DEIXAR de centralizar em coluna unica no MESMO
         breakpoint em que a foto entra no fluxo. Com a foto relativa e o hero
         ainda `display:flex; align-items:center`, ela virava item flex e ficava
         LADO A LADO com o texto — medido a 820px antes de corrigir. */
      .hero {
        min-height:0; display:block;
        /* A nav e FIXA: nao ocupa espaco no fluxo, entao a foto comecava por
           baixo dela. Medido: a imagem tem so 84px de folga acima da cabeca
           (8,8% de 960), o que punha o topo do cabelo em y=56 — e a nav vai
           ate 73. Ela ficava por baixo do menu, e nao ha recorte que resolva
           porque a folga nao existe no arquivo.

           O padrao aqui iguala a altura da nav (82px + 1 de borda), entao a
           foto comeca exatamente onde o menu acaba. O navy do hero preenche a
           faixa de cima e vira a barra solida. */
        padding-top:83px;
      }
      .hero-content {
        padding-top:6px; padding-bottom:64px; width:100%;
        /* A foto empurra tudo para baixo, e o CTA caia 108px abaixo da dobra.
           O `lead` ja da o recado ("do dado a decisao") e a `copy` so detalha,
           entao a copy desce para depois do botao: quem se convenceu no lead
           age sem rolar, quem quer mais encontra logo abaixo. `order` faz isso
           so aqui, sem mexer no HTML nem no desktop. */
        display:flex; flex-direction:column;
      }
      .hero-actions { order:1; }
      .hero-copy { order:2; margin-top:22px; }
      .hero-content { width:92%; }
      .service-grid { grid-template-columns:1fr; }
      .service-card, .service-card.featured { transform:none; min-height:0; }
      .service-card.featured:hover { transform:translateY(-6px); }
      .manifesto-grid, .trajectory-grid, .closing-grid { grid-template-columns:1fr; }
      .manifesto-photo { min-height:560px; }
      .manifesto-copy { padding:70px 32px 90px; }
      .trajectory-grid { gap:46px; }
      .footer-top { grid-template-columns:1fr; }
    }

    /* Mesma razao da irma em paginas.css: o menu ganhou um sexto item
       (Microbiota intestinal) e entre 980px e ~1230px as palavras maiores
       quebram em duas linhas. Regra PROPRIA, isolada do bloco de 980px
       acima — aquele tambem reestrutura hero, service-grid e manifesto, e
       nao e o lugar de mexer so porque o menu cresceu. Repete apenas as
       duas declaracoes do menu; abaixo de 980px as duas regras coincidem,
       entao nao ha conflito, so a faixa nova entre 981 e 1230px coberta. */
    /* Correcao de 06/10/2026: o corte em 1140px estava errado. O cabecalho em linha unica precisa de ~1172px de conteudo (marca 249 + menu 640 + botao 227 + 2 espacos de 28), ou seja, viewport >= 1220px, e a home ainda tinha 2px a menos de folga; entre 1141 e 1219px (e na home ja em 1280px) o menu quebrava em varias linhas. 1230px deixa folga. */
    @media (max-width:1230px) {
      .nav-links { display:none; }
      /* Duplicado do bloco de 980px, e nao referenciado — a razao esta acima:
         a 981-1230px NAO existe outra regra dando o painel visual a
         `.mobile-open`, entao sem isto o clique troca a classe e a lista
         continua invisivel (display:none vence, por ser a unica regra ali). */
      .nav-links.mobile-open {
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        position:absolute;
        left:0; right:0; top:100%;
        background:rgba(7,23,36,.98);
        backdrop-filter:blur(18px);
        border-bottom:1px solid rgba(255,255,255,.12);
        padding:8px 0 14px;
        font-size:15px;
      }
      .nav-links.mobile-open a {
        display:block;
        padding:14px min(34px, 5vw);
        min-height:48px;
        color:rgba(255,255,255,.9);
        border-top:1px solid rgba(255,255,255,.07);
      }
      .nav-links.mobile-open a:first-child { border-top:0; }
      .nav-links.mobile-open a:hover,
      .nav-links.mobile-open a:focus-visible { background:rgba(255,255,255,.08); color:white; }
      .menu-btn { display:block; min-width:48px; min-height:48px; line-height:1; cursor:pointer; }
    }

    @media (max-width:700px) {
      .nav-inner { height:72px; }
      .nav-cta { display:none; }
      
      
      .hero { padding-top:73px; }   /* .nav-inner cai para 72px aqui */
      /* O rotulo do CTA precisa de 313px para caber numa linha e a coluna do
         celular da 301: o texto transbordava a pilula. Medido no navegador.
         Meio ponto de fonte e 4px de respiro lateral resolvem sem encurtar o
         rotulo, que e o CTA principal do site. */
      .hero-actions .btn-light, .hero-actions .btn-ghost { font-size:15px; padding:0 18px; }
      .hero h1 { font-size:50px; }
      .hero-lead { font-size:22px; }
      .hero-footer { display:none; }
      .section-pad { padding:84px 0; }
      .section-title { margin-bottom:42px; }
      .ecosystem-grid { grid-template-columns:1fr; padding-bottom:160px; }
      .eco-card,
      .eco-card:nth-child(odd),
      .eco-card:nth-child(even) { min-height:190px; padding:28px; }
      /* `transform` REESCRITO, e nao so `top:auto; bottom:14px`. A regra base
         usa translate(-50%,-50%) para centrar nos dois eixos; trocando o
         ancoramento para o rodape, o -50% vertical continuava valendo e
         subia o circulo 88px — para dentro do texto do ultimo cartao. Aqui
         so o eixo horizontal precisa de deslocamento. */
      .ecosystem-grid { padding-bottom:205px; }
      .eco-center { width:176px; top:auto; bottom:14px; transform:translateX(-50%); }
      .eco-center strong { font-size:21px; }
      .manifesto-photo { min-height:470px; }
      .manifesto-photo::after { background:linear-gradient(0deg,var(--navy-950),transparent 45%); }
      .trajectory-photo img { aspect-ratio:4/4.6; }
      .simbiota-card { padding:48px 28px; min-height:500px; }
      .closing-grid { gap:42px; }
      .footer-bottom { flex-direction:column; }
      .journal-top { display:block; }
    }

/* --------------------------------------------------------------------------
   REDE DE SEGURANÇA DO .reveal — não é enfeite, é cicatriz.

   Em 31/08 esta home ficou INVISÍVEL em produção por exatamente este
   mecanismo: elementos em `opacity: 0` esperando um IntersectionObserver
   que, por qualquer motivo, não marcou. O usuário vê uma página em branco e
   nada no console.

   Três travas, nesta ordem:
   1. Sem JavaScript, nada fica escondido.
   2. Quem pede menos movimento vê tudo, imediatamente.
   3. Se o observer não tiver marcado em 3s, o próprio CSS revela.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   O <picture> nao pode existir como caixa.

   O arquivo enviado tinha <img> como filha direta de .trajectory-photo,
   .manifesto-photo e .closing-photo, e o CSS dimensiona por `.pai img`.
   Ao trocar por <picture> para servir webp, entrou um elemento no meio —
   e <picture> e `display:inline`, entao ele vira uma caixa inline que nao
   existia no desenho.

   `display: contents` faz o wrapper sumir da arvore de caixas: a <img>
   volta a se comportar como filha direta, exatamente como no original.
   -------------------------------------------------------------------------- */
picture { display: contents; }

    /* ================================================== jornal da home ===
       Destaque numerado + lista numerada, na disposicao que o cliente pediu.

       A troca em relacao aos tres cartoes iguais: hierarquia. Tres cartoes do
       mesmo tamanho dizem que os tres textos valem o mesmo, e nao valem — o
       mais recente e o que a pessoa ainda nao viu. Aqui o 01 ocupa a largura
       toda com foto grande e resumo; os demais viram linhas com miniatura.

       O numero e decorativo e carrega aria-hidden no HTML: ele repete a ordem
       que o <ol> ja informa. */
    .journal-top { display:block; text-align:center; margin-bottom:56px; }
    .journal-top .section-title { margin:0 auto; max-width:760px; }
    .journal-top .eyebrow { justify-content:center; }
    .journal-top .eyebrow::before { display:none; }
    .journal-top .section-title p { margin-inline:auto; }
    /* O filete abaixo do titulo e o que separa o cabecalho da lista sem
       precisar de uma borda que atravesse a secao inteira. */
    .journal-top .section-title h2::after {
      content:''; display:block; width:56px; height:1px;
      background:var(--blue-500); opacity:.6; margin:26px auto 0;
    }

    .jornal { list-style:none; margin:0; padding:0; }
    .jornal-item {
      display:grid; align-items:center; gap:30px;
      grid-template-columns:auto minmax(0,1fr) auto;
      padding:26px 0;
      border-top:1px solid var(--line);
    }
    
    /* O destaque nao leva borda em cima: ele abre a lista. */
    .jornal-item--destaque { border-top:0; padding-top:0; }

    .jornal-num {
      font-family:var(--serif); font-weight:400; line-height:1;
      color:var(--blue-500); opacity:.55;
      font-size:clamp(38px,4.4vw,64px); letter-spacing:-.04em;
      font-variant-numeric:tabular-nums;
    }
    .jornal-num--menor { font-size:20px; font-style:italic; opacity:.6; }

    .jornal-foto { display:block; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#0A2136,#668FA9); }
    .jornal-foto img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease; }
    .jornal-foto__vazia { display:block; width:100%; height:100%; }
    /* A CAIXA TEM A PROPORCAO DA CAPA, 1200/630, e nao uma proporcao
       escolhida a esmo. Antes eram 4/3 no destaque e 1/1 na miniatura: uma
       capa de 1,905 perdia 30% da altura num caso e quase metade no outro,
       cortada em cima e embaixo pelo `cover`. Agora nao ha o que cortar.

       Da para confiar num numero fixo porque ele e um contrato, nao um
       palpite: o servidor normaliza TODA capa para 1200x630 no envio. Tentei
       antes medir cada arquivo e escrever a proporcao no proprio elemento —
       mais geral, e barrado pela CSP, que nao aceita atributo `style`. O
       proprio verificador do build pegou.

       As larguras cresceram junto: mostrada inteira, a capa fica mais baixa
       que o recorte 4:3 de antes, e no tamanho antigo o destaque virava uma
       tira fina ao lado de uma coluna de texto bem mais alta. */
    .jornal-foto--grande { width:min(480px,42vw); aspect-ratio:1200/630; }
    .jornal-foto--mini { width:150px; aspect-ratio:1200/630; border-radius:10px; }

    .jornal-texto { min-width:0; }
    .jornal-k {
      font-size:11px; text-transform:uppercase; letter-spacing:.2em;
      font-weight:800; color:var(--blue-700); margin-bottom:14px;
    }
    .jornal-titulo {
      font-family:var(--serif); font-weight:400; letter-spacing:-.02em;
      line-height:1.14; margin-bottom:14px;
      font-size:clamp(26px,2.6vw,38px);
    }
    .jornal-titulo--menor { font-size:clamp(19px,1.6vw,23px); line-height:1.28; margin-bottom:8px; }
    
    /* `color:inherit` porque o <a> aqui e o titulo inteiro: sem isso ele
       herdaria a cor de link e o titulo viraria azul. */
    .jornal-titulo a { color:inherit; transition:color .18s; }
    .jornal-item:hover .jornal-titulo a { color:var(--blue-700); }
    .jornal-item:hover .jornal-foto img { transform:scale(1.05); }

    .jornal-resumo { color:var(--muted); line-height:1.7; font-size:16px; margin-bottom:14px; max-width:46ch; }
    .jornal-meta { color:var(--muted); font-size:13px; margin:0; }

    
    /* O DESTAQUE TEM GRADE PROPRIA, e nao a mesma dos outros com as colunas
       trocadas. Tentei o caminho curto primeiro — reaproveitar
       `auto minmax(0,1fr) auto` e so mudar a foto de coluna — e a foto saiu
       com 11,8px de largura: a coluna `auto` do texto pede max-content e
       consome o espaco antes do `1fr` receber qualquer sobra. Aqui a foto
       tem coluna com medida declarada e o texto e quem recebe o resto. */
    .jornal-item--destaque { grid-template-columns:auto min(480px,42vw) minmax(0,1fr); }
    .jornal-item--destaque .jornal-foto { grid-column:2; width:100%; }
    .jornal-item--destaque .jornal-texto { grid-column:3; }

    .jornal-todos {
      display:flex; align-items:center; justify-content:space-between; gap:20px;
      padding:24px 0; border-top:1px solid var(--line);
      font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
      color:var(--blue-700); transition:color .18s;
    }
    .jornal-todos__seta { font-size:18px; letter-spacing:0; transition:transform .22s; }
    .jornal-todos:hover { color:var(--navy-900); }
    .jornal-todos:hover .jornal-todos__seta { transform:translateX(6px); }
    .jornal-todos:focus-visible { outline:2px solid var(--blue-700); outline-offset:4px; }

    @media (prefers-reduced-motion: reduce) {
      .jornal-foto img, .jornal-todos__seta { transition:none; }
      .jornal-item:hover .jornal-foto img { transform:none; }
      .jornal-todos:hover .jornal-todos__seta { transform:none; }
    }

    @media (max-width:900px) {
      
      /* Em tela estreita o destaque vira coluna: numero e foto em cima, texto
         embaixo. Manter tres colunas espremeria a foto a ponto de nao servir. */
      .jornal-item--destaque { grid-template-columns:auto minmax(0,1fr); gap:18px 22px; }
      .jornal-item--destaque .jornal-foto { grid-column:1 / -1; width:100%; }
      .jornal-item--destaque .jornal-texto { grid-column:1 / -1; }
      .jornal-resumo { max-width:none; }
    }
    @media (max-width:560px) {
      /* NO CELULAR TODAS AS FOTOS TEM O MESMO TAMANHO. Na largura de mesa a
         diferenca entre a foto do destaque e as miniaturas e o que cria a
         hierarquia; no celular, onde tudo empilha em coluna unica, ela so
         parecia desalinho. A hierarquia continua no numero, no corpo do
         titulo e no resumo, que so o destaque tem. */
      .jornal-item,
      .jornal-item--destaque {
        grid-template-columns:auto minmax(0,1fr);
        gap:14px 16px;
        padding:22px 0;
      }
      .jornal-foto,
      .jornal-foto--grande,
      .jornal-foto--mini {
        grid-column:1 / -1;
        grid-row:1;
        width:100%;
        border-radius:12px;
      }
      .jornal-texto { grid-column:2; }
      .jornal-num, .jornal-num--menor { grid-column:1; font-size:17px; font-style:italic; }
      .jornal-titulo, .jornal-titulo--menor { font-size:20px; }
    }

    /* ------------------------------------------------- redes no rodape ---
       Alvo de 44px, que e o minimo que um dedo acerta sem mirar. O icone tem
       20px; o resto e area clicavel, e por isso o botao nao parece do
       tamanho do desenho. */
    .footer-redes { margin-top:30px; }
    .footer-redes__rotulo {
      font-size:11px; text-transform:uppercase; letter-spacing:.2em;
      font-weight:700; color:rgba(255,255,255,.5); margin:0 0 14px;
    }
    .footer-redes__lista { display:flex; gap:10px; list-style:none; margin:0; padding:0; }
    .footer-redes__link {
      display:grid; place-items:center; width:44px; height:44px;
      border-radius:50%; color:rgba(255,255,255,.78);
      border:1px solid rgba(255,255,255,.18);
      transition:background .18s, color .18s, border-color .18s, transform .18s;
    }
    .footer-redes__link:hover {
      background:#fff; color:var(--navy-900); border-color:#fff; transform:translateY(-2px);
    }
    .footer-redes__link:focus-visible { outline:2px solid #fff; outline-offset:3px; }
    @media (prefers-reduced-motion: reduce) {
      .footer-redes__link { transition:none; }
      .footer-redes__link:hover { transform:none; }
    }

/* A trava dos 3s saiu do CSS e virou condicional em js/revela.js.
   Aqui ela revelava SEMPRE, 3 segundos depois de carregar, tenha o elemento
   sido visto ou nao — e ninguem rola uma pagina em menos de 3 segundos. Era
   ela que matava o efeito no site inteiro desde o primeiro commit. */

    /* Título anda menos que a própria margem — ver a nota em componentes.css. */

/* --------------------------------------------------------------------------
   .reveal — entrada por rolagem.

   QUATRO TENTATIVAS, e cada uma errou de um jeito diferente:
   1. opacity 0 sem interruptor. Quebrou o site duas vezes em 31/08.
   2. Trava em CSS `animation: … 3s forwards`: revelava SEMPRE aos 3s, tivesse
      sido visto ou nao. Matou o efeito desde o primeiro commit, sem ninguem ver.
   3. transform puro, 18px: seguro e invisivel — o olho le deslocamento como
      tremida, nao como entrada.
   4. Esta. Fade completo, com o esconder dependendo de um INTERRUPTOR que o
      proprio JavaScript derruba se algo der errado.

   `html.revelar` e o interruptor, posto por js/marca-js.js — classe propria, e
   nao `.js`, porque `.js` tem outros usos (ver `.filtros` em paginas.css).

   Quem derruba o interruptor:
   - marca-js.js, aos 4s sem nada revelado  (cobre revela.js nao carregar)
   - revela.js, se o observador nao entregar (cobre observador morto)
   - prefers-reduced-motion, sempre
   - ausencia de JavaScript, que nunca o liga
   -------------------------------------------------------------------------- */
html.revelar .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
html.revelar .reveal.visible { opacity: 1; transform: none; }

/* Titulo anda menos que a propria margem: com 18px o h2 do corpo, que tem 16px
   embaixo, encostaria no proprio paragrafo durante o fade. */
html.revelar h2.reveal { transform: translateY(10px); }
html.revelar h2.reveal.visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ============================================== CTA que chama atenção ===
   Halo que respira, e NÃO escala do botão. Escalar um botão faz o texto
   dentro dele borrar a cada ciclo e lê como anúncio; o halo puxa o olho sem
   tocar no que está escrito.

   2,6s por ciclo: abaixo de 2s vira piscada, acima de 3s ninguém percebe que
   é um ciclo. A opacidade morre em 70% do tempo, então há um respiro entre
   uma onda e a seguinte — pulso contínuo sem pausa vira ruído de fundo e o
   olho para de registrar em poucos minutos.

   Aplicado ao CTA PRINCIPAL de cada página, não a todo botão. Se tudo pulsa,
   nada se destaca — e os 11 `nav-cta` do topo são navegação, não conversão.

   HALO BRANCO, e nao azul da marca: os dez CTAs que pulsam sao `.btn-light`,
   que e o botao branco — e ele so aparece sobre fundo navy (hero, cta-box,
   caixa da lista de espera). Halo navy sobre navy seria invisivel. Comecei
   errado nisso e so percebi ao conferir onde cada botao vive.

   `prefers-reduced-motion` desliga: animação contínua é gatilho vestibular, e
   a WCAG 2.2.2 trata movimento que dura mais de 5s como algo que precisa
   poder ser parado. Aqui a parada é a preferência do sistema. */
.cta-pulsa { position: relative; }
.cta-pulsa::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .55);
  animation: cta-respira 2.6s cubic-bezier(.3, .6, .4, 1) infinite;
}
@keyframes cta-respira {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); }
  70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Ao passar o mouse o halo para: a pessoa já achou o botão, a insistência
   perdeu a função e vira distração na hora de clicar. */
.cta-pulsa:hover::after, .cta-pulsa:focus-visible::after { animation: none; }

/* HALO ESCURO, para botao escuro sobre cartao claro.

   O halo padrao e branco porque todo `.btn-light` do site vive sobre navy.
   Nos cartoes de servico e o contrario: fundo claro, botao navy — halo branco
   ali seria invisivel, que e o mesmo erro de halo navy sobre navy ja cometido
   nesta base. */
.cta-pulsa--escuro::after {
  box-shadow: 0 0 0 0 rgba(11, 34, 57, .42);
  animation-name: cta-respira-escuro;
}
@keyframes cta-respira-escuro {
  0%   { box-shadow: 0 0 0 0 rgba(11, 34, 57, .42); }
  70%  { box-shadow: 0 0 0 14px rgba(11, 34, 57, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 34, 57, 0); }
}

/* ESCALONADO, e nao em unissono. Os tres cartoes ficam lado a lado: pulsando
   juntos leem como banner piscando, e o olho para de registrar movimento
   repetitivo em poucos minutos — foi por isso que a regra original era um
   pulso por pagina. Com um terco de ciclo de atraso ha sempre um pulsando e
   nunca os tres, entao o movimento continua chamando sem virar ruido. */
.service-grid .service-card:nth-child(2) .service-link::after { animation-delay: .87s; }
.service-grid .service-card:nth-child(3) .service-link::after { animation-delay: 1.74s; }

@media (prefers-reduced-motion: reduce) {
  .cta-pulsa::after { animation: none; }
}

        /* REDES VIRAM COLUNA, E NAO UMA SEGUNDA LINHA.
       O bloco entrou como terceiro filho de uma grade de DUAS colunas, entao ele
       caia numa linha nova: `grid-template-rows: 268px 101px`, mais os 70px de
       gap. Medido no navegador — o rodape foi de 443 para 614px, 79% da altura da
       tela. Como terceira coluna ele cabe na linha que ja existe (a altura e
       ditada pelos 9 links da navegacao) e nao custa altura nenhuma.
       `auto` porque a coluna so precisa dos tres icones de 44px. */
        .footer-top { grid-template-columns: 1.2fr .8fr auto; }
        .footer-redes { margin-top: 0; }
        @media (max-width: 980px) {
  .footer-top { grid-template-columns: 1fr; }
  .footer-redes { margin-top: 6px; }
        }


/* ==========================================================================
   O VERDE DA SIMBIOTAGUT, na home.

   Mesmas duas cores do produto (simbiotagut.com) e os mesmos papeis definidos
   por contraste medido: `#14b8a6` serve de texto e de fundo sobre navy
   (7,29:1 / 6,48:1); `#0f8f73` so como elemento grafico, porque como texto
   reprova em todo fundo deste site.

   Aqui o cartao e navy, entao o verde claro pode ser tinta. O CTA tem fundo
   verde com tinta navy — mais legivel que branco e inequivocamente da
   plataforma.

   A SECAO ANTES NAO LEVAVA A LUGAR NENHUM: anunciava a plataforma, dizia "em
   breve" e terminava ali, sem um link. Quem se interessava nao tinha o que
   fazer com o interesse.
   ========================================================================== */
.simbiota-card { --sg-verde: #14b8a6; --sg-marca: #0f8f73; }
.simbiota-label { color: var(--sg-verde); }

.simbiota-acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; }
.simbiota-acoes .coming { margin-top: 0; }

.simbiota-cta {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px;
  background: var(--sg-verde); color: var(--navy-950);
  font-size: 14px; font-weight: 800; text-decoration: none;
  position: relative;
  transition: transform .2s ease, background-color .2s ease;
}
.simbiota-cta:hover { background: #0fa192; transform: translateY(-2px); }
/* O halo padrao e branco e sumiria sobre verde. */
.simbiota-cta.cta-pulsa::after { box-shadow: 0 0 0 0 rgba(20,184,166,.6); animation-name: cta-respira-sg; }
@keyframes cta-respira-sg {
  0%   { box-shadow: 0 0 0 0 rgba(20,184,166,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(20,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(20,184,166,0); }
}

@media (prefers-reduced-motion: reduce) {
  .simbiota-cta { transition: none; }
  .simbiota-cta:hover { transform: none; }
  .simbiota-cta.cta-pulsa::after { animation: none; }
}

/* Alvos de toque de 44px no rodape e na marca — as paginas internas ja tinham
   (paginas.css: `.footer-nav a` e `.brand`); a home so tinha o texto, 16px de
   altura nos links do rodape. O espacamento entre eles ja cabia; a area clicavel nao. */
.footer-nav a { display:flex; align-items:center; min-height:44px; }
.brand { min-height:44px; display:inline-flex; flex-direction:column; justify-content:center; }

/* Menu aberto em celular deitado (~375px de altura): 8 itens de 48px + o respiro do
   painel passam da tela, e como a barra e fixa os ultimos itens ficavam fora de
   alcance. Um bloco so cobre os dois @media do painel (980 e 1230px). 83px = barra
   de 82px + 1px de borda; abaixo de 700px a barra tem 72px, e a sobra de ~10px e
   inofensiva. */
@media (max-width:1230px) {
  .nav-links.mobile-open { max-height:calc(100vh - 83px); max-height:calc(100dvh - 83px); overflow-y:auto; overscroll-behavior:contain; }
}

/* Cabecalho de computador (1231px para cima): o botao passou de "Assessoria Cientifica" para "Assessoria e
   Consultoria" (+28px) e o cabecalho em uma linha (marca + menu + botao = 1201px) passou do container de 1180px:
   a marca, tres itens do menu e o proprio botao quebravam em duas linhas. Itens do menu 6px mais proximos e botao
   com 4px a menos de cada lado deixam 17px de folga (antes da troca eram ~7px). O nowrap faz faltar espaco virar
   um aperto, nunca uma quebra de linha. Abaixo de 1231px o menu e o hamburguer e nada disto vale. */
@media (min-width:1231px){ .nav-links{ gap:20px; } .nav-links a, .nav-cta, .brand span{ white-space:nowrap; } .nav-cta{ padding:0 18px; } }