/* ===================================================================
   AMPARSEG — folha compartilhada (home + paginas internas)
   Identidade derivada do LOGO do cliente: o monograma "A" sai do ciano
   e mergulha no marinho. O azul e' ANCORAGEM, nao revestimento: entra
   em pontos de decisao e superficies escuras, nunca cobrindo a pagina.
   A fotografia carrega a emocao; a tipografia carrega a hierarquia.
   Cantos quase retos, sombra minima, muito espaco em branco.

   Extraida do index.html monolitico em 2026-08-19, quando a proposta
   passou de 1 para 4 paginas: manter 350 linhas de CSS duplicadas em
   cada arquivo garantiria divergencia visual na primeira alteracao.
   =================================================================== */
:root{
  --tinta:#08182f; --grafite:#16273f; --azul:#1160b4; --ciano:#12a5e8;
  --areia:#f6f4f1; --gelo:#f2f6fa; --branco:#fff;
  --texto:#17222f; --suave:#5f7086; --linha:#e6e9ed;
  --r:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif;
     color:var(--texto);background:var(--branco);line-height:1.62;
     -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:none;background:none}
.wrap{width:min(1240px,90%);margin:0 auto}
.rev{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,.8,.24,1),transform .9s cubic-bezier(.16,.8,.24,1)}
.rev.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

.olho{display:block;font-size:.7rem;font-weight:600;letter-spacing:.26em;
      text-transform:uppercase;color:var(--azul);margin-bottom:20px}
h2{font-size:clamp(1.9rem,4vw,3.05rem);line-height:1.06;letter-spacing:-.04em;
   font-weight:750;color:var(--tinta)}
h2 em{font-style:normal;color:var(--azul)}
.txt{color:var(--suave);font-size:1.06rem;max-width:54ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
     padding:15px 30px;border-radius:var(--r);font-weight:600;font-size:.95rem;
     transition:.22s;letter-spacing:-.01em}
.btn svg{width:17px;height:17px;flex:none}
.btn-p{background:var(--azul);color:#fff}
.btn-p:hover{background:#0d4f96;transform:translateY(-1px)}
.btn-esc{background:var(--tinta);color:#fff}
.btn-esc:hover{background:#0d2743;transform:translateY(-1px)}
.btn-lin{border:1.5px solid var(--linha);color:var(--tinta);background:#fff}
.btn-lin:hover{border-color:var(--tinta)}
.btn-cl{border:1.5px solid rgba(255,255,255,.34);color:#fff}
.btn-cl:hover{background:rgba(255,255,255,.1)}
.btn-zap{background:#25d366;color:#fff}
.btn-zap:hover{background:#1eb857;transform:translateY(-1px)}

/* ---------- Tarja: UNICA referencia a proposta ---------- */
.tarja{background:#000;color:#fff;text-align:center;padding:9px 16px;
       font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
       font-weight:600;position:relative;z-index:80}
.tarja span{color:#7fd3f7}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
       backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:.3s}
header.fixo{border-bottom-color:var(--linha)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:44px}
.logo b{font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:var(--tinta);line-height:1.05}
.logo small{display:block;font-size:.6rem;font-weight:600;letter-spacing:.19em;
            text-transform:uppercase;color:var(--suave)}
nav{display:flex;gap:28px}
nav a{font-size:.9rem;font-weight:500;color:var(--suave);transition:color .2s}
nav a:hover,nav a.ativo{color:var(--tinta)}

/* Telefone no header: discreto, alinhado a direita, some antes do CTA
   quando a largura aperta -- o CTA converte, o numero informa. */
.cabecalho-acoes{display:flex;align-items:center;gap:16px}
/* O CTA do topo e' menor que os do corpo de proposito: no header ele
   divide espaco com o logo e o telefone, e um botao grande ali empurra
   o numero para fora antes da hora. */
.cabecalho-acoes .btn{padding:11px 21px;font-size:.88rem;white-space:nowrap}
.fone-topo{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;
           font-weight:600;color:var(--tinta);white-space:nowrap;transition:color .2s}
.fone-topo:hover{color:#25d366}
.fone-topo svg{width:17px;height:17px;fill:#25d366;flex:none}
.fone-topo span{color:var(--suave);font-weight:500}

/* ---------- HERO EDITORIAL ---------- */
.hero{position:relative;background:var(--branco);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr .82fr;gap:70px;
            align-items:center;padding:56px 0 0}
.hero .caixa{padding:56px 0 96px;max-width:600px}
h1{font-size:clamp(2.4rem,5.4vw,4.2rem);line-height:1.0;letter-spacing:-.048em;
   font-weight:750;margin-bottom:26px;color:var(--tinta)}
h1 em{font-style:normal;color:var(--azul)}
.hero p{font-size:clamp(1.04rem,1.6vw,1.2rem);color:var(--suave);max-width:46ch}
.hero .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:40px}
.hero .linhas{display:flex;gap:38px;flex-wrap:wrap;margin-top:56px;
              padding-top:30px;border-top:1px solid var(--linha)}
.hero .linhas div{font-size:.9rem;color:var(--suave)}
.hero .linhas b{display:block;color:var(--tinta);font-weight:600;font-size:1rem;
                letter-spacing:-.01em;margin-bottom:2px}
.hero .foto{position:relative;height:min(760px,86vh);
            margin-right:calc((100vw - min(1240px,90vw))/-2);border-radius:0}
.hero .foto img{width:100%;height:100%;object-fit:cover;object-position:56% center}
.hero .foto:after{content:'';position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(transparent,rgba(8,24,47,.28))}

/* ---------- MAPA DE PROTECAO (2 etapas) ---------- */
.mapa{padding:104px 0;background:var(--areia)}
.mapa .cabeca{max-width:660px;margin-bottom:44px}
.etapa-rot{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.etapa-rot i{width:24px;height:24px;border-radius:50%;background:var(--tinta);color:#fff;
             display:grid;place-items:center;font-size:.74rem;font-weight:700;
             font-style:normal;flex:none}
.etapa-rot b{font-size:.78rem;font-weight:700;letter-spacing:.16em;
             text-transform:uppercase;color:var(--grafite)}
.etapa{margin-bottom:34px}
.etapa[hidden]{display:none}

/* Etapa 1: cartoes com titulo + subtitulo */
.objetivos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.obj{text-align:left;padding:22px 24px;border:1.5px solid var(--linha);background:#fff;
     border-radius:var(--r);transition:.22s;display:block}
.obj:hover{border-color:var(--azul);transform:translateY(-2px)}
.obj[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta)}
.obj b{display:block;font-size:1.04rem;font-weight:700;letter-spacing:-.025em;
       color:var(--tinta);line-height:1.25;margin-bottom:5px}
.obj span{display:block;font-size:.88rem;color:var(--suave);line-height:1.45}
.obj[aria-selected="true"] b{color:#fff}
.obj[aria-selected="true"] span{color:#a9c4e0}

/* Etapa 2: chips */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:13px 22px;border-radius:999px;border:1.5px solid var(--linha);
      background:#fff;font-weight:600;font-size:.94rem;color:var(--grafite);
      transition:.2s;display:inline-flex;align-items:center;gap:9px}
.chip:hover{border-color:var(--azul);color:var(--azul)}
.chip[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.chip svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
          stroke-linecap:round;stroke-linejoin:round}

.resposta{background:#fff;border:1px solid var(--linha);border-radius:var(--r);
          padding:44px;display:grid;grid-template-columns:1fr auto;gap:36px;
          align-items:center;min-height:186px}
.resposta .conteudo{max-width:62ch}
.resposta h3{font-size:1.55rem;font-weight:700;letter-spacing:-.03em;
             color:var(--tinta);margin-bottom:10px}
.resposta p{color:var(--suave);font-size:1.02rem}
.resposta .vazio{color:var(--suave);font-size:1.06rem}
.fade{animation:sobe .5s cubic-bezier(.16,.8,.24,1)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- BLOCOS EDITORIAIS ---------- */
.bloco{padding:112px 0}
.bloco .wrap{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.bloco.inv .wrap{direction:rtl}
.bloco.inv .wrap>*{direction:ltr}
.bloco figure{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:4/3.2}
.bloco figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.8,.24,1)}
.bloco:hover figure img{transform:scale(1.035)}
.bloco h2{margin-bottom:20px}
.bloco .txt{margin-bottom:14px}
.pontos{list-style:none;display:grid;gap:13px;margin:26px 0 32px}
.pontos li{display:flex;gap:12px;align-items:flex-start;color:var(--grafite);font-size:1rem}
.pontos svg{width:19px;height:19px;flex:none;margin-top:3px;stroke:var(--azul);
            fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.escuro{background:var(--tinta);color:#fff}
.escuro h2{color:#fff}
.escuro .txt{color:#b9cadd}
.escuro .olho{color:#7fd3f7}
.escuro .pontos li{color:#dbe6f2}
.escuro .pontos svg{stroke:#7fd3f7}

/* ---------- EMPRESAS: tipografia no lugar da foto ---------- */
.empresas{padding:118px 0}
.emp-topo{margin-bottom:56px;max-width:760px}
.emp-grade{display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end;
           padding-top:44px;border-top:1px solid rgba(255,255,255,.14)}
.emp-frase{font-size:clamp(1.3rem,2.5vw,1.95rem);line-height:1.4;letter-spacing:-.028em;
           font-weight:500;color:#e4edf7}
.emp-frase em{font-style:normal;color:#7fd3f7;font-weight:600}
.emp-lado p{color:#a9bed5;font-size:1rem;margin-bottom:26px}

/* ---------- PARCEIROS: faixa de marcas em movimento ----------
   Wordmark tipografico, NAO arquivo de logo: usar o logotipo real de uma
   seguradora exige autorizacao de uso de marca, e um PNG baixado de
   terceiros quebra (ou vira pixel borrado) na primeira mudanca do site
   de origem. O nome escrito com a tipografia do site nunca quebra, nao
   depende de asset externo e nao afirma parceria que nao foi confirmada.
   Trocar por arquivos reais e' um cp: ver .marca img no fim deste bloco. */
.parceiros{padding:104px 0;background:var(--gelo)}
.parceiros .cabeca{max-width:720px;margin-bottom:16px}
.nota-marcas{font-size:.85rem;color:var(--suave);margin-bottom:40px;max-width:64ch}

.esteira{overflow:hidden;position:relative;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trilho{display:flex;width:max-content;animation:desliza 52s linear infinite;
        will-change:transform}
.esteira:hover .trilho{animation-play-state:paused}
.esteira.rev2 .trilho{animation-duration:64s;animation-direction:reverse}
@keyframes desliza{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Quem pede reducao de movimento no sistema recebe a lista PARADA e
   inteira, nao uma faixa rolavel: `overflow-x:auto` resolvia o
   movimento mas deixava uma barra de rolagem visivel sob os logos.
   Com wrap, as marcas quebram em linhas e cabem todas na tela.
   A metade duplicada pelo JS (marcada com aria-hidden para o loop
   continuo) e' escondida aqui -- sem animacao ela so' repetiria as
   mesmas marcas. */
@media(prefers-reduced-motion:reduce){
  .esteira{-webkit-mask-image:none;mask-image:none}
  .trilho{animation:none;flex-wrap:wrap;justify-content:center;
          width:100%;overflow:visible}
  .trilho > [aria-hidden="true"]{display:none}
  .marca{margin:0 7px 14px}
}
.marca{flex:none;display:grid;place-items:center;min-width:196px;height:78px;
       margin-right:14px;padding:0 28px;border:1px solid var(--linha);
       border-radius:var(--r);background:#fff;color:var(--grafite);
       font-weight:700;font-size:1.02rem;letter-spacing:-.022em;white-space:nowrap;
       text-align:center;line-height:1.2}
.marca i{font-style:normal;font-weight:500;color:var(--suave);font-size:.82rem;
         display:block;letter-spacing:.02em}
.escuro .marca{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e4edf7}
.escuro .marca i{color:#9fb6cf}
.escuro .nota-marcas{color:#9fb6cf}

/* --- Cartao de LOGO OFICIAL ---------------------------------------
   Sempre branco, inclusive dentro de secao escura: logotipo de marca
   tem fundo definido pelo manual da propria empresa, e nenhum deles
   sobrevive a um fundo marinho. O cartao branco e' o suporte neutro.

   mix-blend-mode:multiply resolve o recorte sem precisar editar imagem:
   os arquivos vieram em JPEG com fundo branco ou cinza-claro (nao ha
   canal alfa), e o multiply faz esse fundo desaparecer sobre o branco
   do cartao, deixando so' a marca. Sem isso cada logo apareceria dentro
   de um retangulo cinza visivel. */
.marca.logo{background:#fff;border-color:var(--linha);padding:0 22px}
.escuro .marca.logo{background:#fff;border-color:rgba(255,255,255,.2)}
.marca.logo img{max-height:44px;max-width:150px;width:auto;height:auto;
                object-fit:contain;mix-blend-mode:multiply}

/* ---------- DOIS MUNDOS: composicao de apoio ---------- */
.mundos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.mundo{padding:32px 34px;border:1px solid var(--linha);border-radius:var(--r);background:#fff}
.mundo b{display:block;font-size:1.12rem;font-weight:700;letter-spacing:-.028em;
         color:var(--tinta);margin-bottom:8px}
.mundo p{color:var(--suave);font-size:.98rem}
.escuro .mundo{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.escuro .mundo b{color:#fff}
.escuro .mundo p{color:#b9cadd}

/* ---------- RAFAEL ---------- */
.pessoa{padding:104px 0;background:var(--gelo)}
/* Mesma grade e mesma proporcao das figuras de .bloco (familia e
   consorcio): meia coluna, gap de 78px e 4/3.2. Antes esta foto era
   quadrada e presa em 400px dentro de uma coluna menor -- ficava
   visivelmente fora do padrao das outras fotos da home.
   O arquivo original e' quadrado (640x640); o recorte 4/3.2 mantem o
   rosto no terco superior e corta so' a base da imagem. */
.pessoa .wrap{display:grid;grid-template-columns:1fr 1fr;gap:78px;align-items:center}
.pessoa figure{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3.2;
               box-shadow:0 18px 44px -22px rgba(8,24,47,.5)}
.pessoa figure img{width:100%;height:100%;object-fit:cover;object-position:center 12%}
.citacao{font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.34;letter-spacing:-.03em;
         font-weight:600;color:var(--tinta);margin-bottom:26px}
.assinatura{display:flex;align-items:center;gap:14px;padding-top:24px;
            border-top:1px solid var(--linha)}
.assinatura .ini{width:52px;height:52px;border-radius:50%;flex:none;display:grid;
                 place-items:center;background:var(--tinta);color:#fff;
                 font-weight:700;font-size:1.06rem;letter-spacing:-.02em}
.assinatura b{display:block;color:var(--tinta);font-size:1.02rem}
.assinatura span{color:var(--suave);font-size:.9rem}

/* ---------- INSTAGRAM / conteudo ---------- */
.insta{padding:96px 0}
.insta .topo{display:flex;align-items:flex-end;justify-content:space-between;
             gap:32px;margin-bottom:38px;flex-wrap:wrap}
/* Faixa do Instagram -- uma peca fechada, sem grade de miniaturas.
   Enquanto as fotos aprovadas dos posts nao chegam, uma grade com
   espacos genericos parece conteudo faltando; uma faixa unica parece
   o que e': um convite para o perfil. Quando o cliente enviar as
   imagens, a grade entra aqui embaixo sem mexer nesta faixa. */
.ig-faixa{position:relative;overflow:hidden;display:grid;
  grid-template-columns:auto 1fr auto;gap:32px;align-items:center;
  padding:40px 44px;border-radius:var(--r);color:#fff;
  background:linear-gradient(135deg,var(--tinta),#12365f)}
.ig-faixa .selo{width:78px;height:78px;border-radius:var(--r);background:#fff;
  padding:9px;display:grid;place-items:center;flex:none}
.ig-faixa .selo img{width:100%;height:100%;object-fit:contain}
.ig-faixa b{display:block;font-size:1.32rem;font-weight:700;letter-spacing:-.03em;
  margin-bottom:7px}
.ig-faixa p{color:#b9cadd;font-size:1rem;max-width:56ch}
.ig-faixa .glifo{position:absolute;right:-26px;top:-40px;width:210px;height:210px;
  opacity:.07;pointer-events:none;stroke:#fff;fill:none;stroke-width:1.2}

/* ---------- REPUTACAO ---------- */
.reputacao{padding:96px 0;background:var(--areia)}
.rep{max-width:1000px;margin:0 auto;background:#fff;border:1px solid var(--linha);
     border-radius:var(--r);display:grid;grid-template-columns:.85fr 1.15fr;overflow:hidden}
.rep-a{padding:48px 46px;border-right:1px solid var(--linha)}
.rep-g{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.rep-g svg{width:26px;height:26px}
.rep-g b{color:var(--tinta);font-size:.98rem;display:block}
.rep-g span{color:var(--suave);font-size:.83rem}
.rep-a h3{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta);
          line-height:1.24;margin-bottom:12px}
.rep-a p{color:var(--suave);font-size:.97rem}
.rep-b{padding:48px 46px;background:linear-gradient(150deg,var(--gelo),#fff)}
.linha-av{display:flex;align-items:center;gap:14px;padding:14px 0;
          border-bottom:1px solid var(--linha)}
.linha-av:last-of-type{border-bottom:none}
.linha-av .av{width:38px;height:38px;border-radius:50%;flex:none;background:#e8edf3}
.linha-av .bar{flex:1;display:grid;gap:7px}
.linha-av .b{height:7px;border-radius:99px;background:#e8edf3}
.linha-av .b1{width:44%}.linha-av .b2{width:82%}
.linha-av .est{display:flex;gap:3px;flex:none}
.linha-av .est svg{width:13px;height:13px;fill:none;stroke:#cfd8e3;stroke-width:1.8}
.espera{margin-top:22px;display:flex;align-items:center;gap:9px;
        font-size:.9rem;color:var(--suave)}
.espera i{width:7px;height:7px;border-radius:50%;background:var(--ciano);flex:none;
          box-shadow:0 0 0 4px rgba(18,165,232,.16)}

/* ---------- CTA FINAL ---------- */
.final{padding:120px 0;background:var(--tinta);color:#fff;text-align:center}
.final h2{color:#fff;margin-bottom:18px}
.final p{color:#b9cadd;max-width:52ch;margin:0 auto 36px;font-size:1.06rem}
.final .acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Rodape ---------- */
footer{background:#050f1e;color:#8298b3;padding:66px 0 32px;font-size:.92rem}
.frod{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:50px;padding-bottom:38px;
      border-bottom:1px solid rgba(255,255,255,.09)}
footer .logo img{height:50px;background:#fff;border-radius:var(--r);padding:6px}
footer .logo b{color:#fff}
footer .logo small{color:#7d93ae}
footer p{margin-top:16px;max-width:36ch;line-height:1.7}
footer h5{color:#fff;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
          margin-bottom:16px;font-weight:700}
footer li{list-style:none;margin-bottom:9px}
footer a:hover{color:#7fd3f7}
.social{display:flex;gap:10px;margin-top:20px}
.social a{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;
          background:rgba(255,255,255,.07);transition:.22s}
.social a:hover{background:var(--azul)}
.social svg{width:18px;height:18px;stroke:#cfe1f6;fill:none;stroke-width:1.9}
.fim{padding-top:26px;text-align:center;font-size:.8rem;color:#5f7590}

/* ---------- Modal de cotacao ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;
       justify-content:center;padding:20px;background:rgba(8,24,47,.62);
       backdrop-filter:blur(6px)}
.modal.aberto{display:flex;animation:sobe .32s ease}
.cotar{background:#fff;border-radius:10px;width:min(560px,100%);
       max-height:92vh;overflow:auto;position:relative}
.cotar .cab{padding:30px 34px 22px;border-bottom:1px solid var(--linha)}
.cotar .cab b{font-size:1.28rem;font-weight:700;letter-spacing:-.03em;color:var(--tinta);
              display:block}
.cotar .cab span{color:var(--suave);font-size:.93rem}
.fechar{position:absolute;top:18px;right:18px;width:34px;height:34px;border-radius:50%;
        display:grid;place-items:center;color:var(--suave);transition:.2s}
.fechar:hover{background:var(--gelo);color:var(--tinta)}
.fechar svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;
            stroke-linecap:round}
.passo{padding:26px 34px}
.passo .rot{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
            color:var(--azul);margin-bottom:8px}
.passo .perg{font-size:1.06rem;font-weight:600;color:var(--tinta);margin-bottom:16px}
.ops{display:flex;flex-wrap:wrap;gap:9px}
.op{padding:12px 20px;border:1.5px solid var(--linha);border-radius:999px;
    font-size:.93rem;font-weight:500;color:var(--grafite);transition:.2s;background:#fff;
    text-align:left}
.op:hover{border-color:var(--azul);color:var(--azul)}
.op[aria-selected="true"]{background:var(--tinta);border-color:var(--tinta);color:#fff}
.op small{display:block;font-size:.79rem;color:var(--suave);font-weight:400;margin-top:2px}
.op[aria-selected="true"] small{color:#a9c4e0}
.barra{height:3px;background:var(--linha);border-radius:99px;overflow:hidden;margin:0 34px}
.barra i{display:block;height:100%;background:var(--azul);width:0;transition:width .4s}
.rodape-modal{padding:22px 34px 30px;display:flex;gap:10px;justify-content:flex-end;
              align-items:center;border-top:1px solid var(--linha);margin-top:6px}
.voltar{color:var(--suave);font-size:.92rem;font-weight:500;padding:12px 6px}
.voltar:hover{color:var(--tinta)}
.resumo{padding:8px 34px 4px;font-size:.9rem;color:var(--suave)}
.resumo b{color:var(--tinta);font-weight:600}

/* ---------- CTA fixo no mobile + botao flutuante ---------- */
.fixo-mob{position:fixed;left:0;right:0;bottom:0;z-index:75;display:none;
          gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
          background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
          border-top:1px solid var(--linha)}
.fixo-mob .btn{flex:1;padding:14px 12px;font-size:.9rem}
.zap{position:fixed;right:20px;bottom:20px;z-index:70;width:54px;height:54px;
     border-radius:50%;display:grid;place-items:center;background:#25d366;
     box-shadow:0 10px 26px -8px rgba(37,211,102,.6);transition:.24s}
.zap:hover{transform:scale(1.07)}
.zap svg{width:27px;height:27px;fill:#fff}

/* ===================================================================
   PAGINAS INTERNAS
   =================================================================== */
.capa{padding:84px 0 76px;background:var(--tinta);color:#fff}
.capa .wrap{max-width:900px}
.migalha{font-size:.8rem;color:#8fb0d0;margin-bottom:22px}
.migalha a:hover{color:#7fd3f7}
.capa h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.5rem);margin-bottom:20px}
.capa h1 em{color:#7fd3f7}
.capa p{color:#b9cadd;font-size:clamp(1.02rem,1.5vw,1.16rem);max-width:60ch}
.capa .acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

.secao{padding:92px 0}
.secao.clara{background:var(--areia)}
.secao .cabeca{max-width:700px;margin-bottom:46px}
.secao h2{margin-bottom:16px}

.cartoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.cartao{padding:32px 30px;border:1px solid var(--linha);border-radius:var(--r);
        background:#fff;transition:.24s}
.cartao:hover{border-color:var(--azul);transform:translateY(-2px)}
.cartao .ic{width:42px;height:42px;border-radius:var(--r);background:var(--gelo);
            display:grid;place-items:center;margin-bottom:18px}
.cartao .ic svg{width:21px;height:21px;stroke:var(--azul);fill:none;stroke-width:1.8;
                stroke-linecap:round;stroke-linejoin:round}
.cartao h3{font-size:1.16rem;font-weight:700;letter-spacing:-.028em;color:var(--tinta);
           margin-bottom:9px;line-height:1.3}
.cartao p{color:var(--suave);font-size:.97rem}

/* Passos numerados */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;
        counter-reset:p}
.paso{counter-increment:p;position:relative;padding-top:52px}
.paso:before{content:counter(p,decimal-leading-zero);position:absolute;top:0;left:0;
             font-size:2.1rem;font-weight:750;letter-spacing:-.05em;color:var(--linha);
             line-height:1}
.paso b{display:block;font-size:1.08rem;font-weight:700;letter-spacing:-.028em;
        color:var(--tinta);margin-bottom:8px}
.paso p{color:var(--suave);font-size:.97rem}
.escuro .paso:before{color:rgba(255,255,255,.16)}
.escuro .paso b{color:#fff}
.escuro .paso p{color:#b9cadd}

/* FAQ */
.faq{max-width:820px}
.q{border-bottom:1px solid var(--linha)}
.q summary{padding:22px 0;font-size:1.06rem;font-weight:600;letter-spacing:-.025em;
           color:var(--tinta);cursor:pointer;list-style:none;display:flex;
           align-items:center;justify-content:space-between;gap:20px}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:'+';font-size:1.5rem;font-weight:400;color:var(--azul);
                 flex:none;transition:transform .24s;line-height:1}
.q[open] summary:after{transform:rotate(45deg)}
.q p{padding:0 0 22px;color:var(--suave);font-size:1rem;max-width:70ch}

/* Aviso tecnico honesto */
.aviso{margin-top:34px;padding:20px 24px;border-left:3px solid var(--ciano);
       background:var(--gelo);border-radius:0 var(--r) var(--r) 0}
.aviso p{color:var(--grafite);font-size:.94rem;max-width:74ch}
.escuro .aviso{background:rgba(255,255,255,.05);border-left-color:#7fd3f7}
.escuro .aviso p{color:#cddcec}

/* Navegacao entre paginas */
.outras{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
        margin-top:12px}
.outra{padding:28px 30px;border:1px solid var(--linha);border-radius:var(--r);
       background:#fff;transition:.24s;display:block}
.outra:hover{border-color:var(--azul);transform:translateY(-2px)}
.outra span{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
            color:var(--azul);display:block;margin-bottom:9px}
.outra b{display:block;font-size:1.1rem;font-weight:700;letter-spacing:-.028em;
         color:var(--tinta);margin-bottom:6px}
.outra p{color:var(--suave);font-size:.94rem}

/* ---------- RESPONSIVO ---------- */
@media(max-width:1120px){
  nav{gap:20px}
  nav a{font-size:.85rem}
  .fone-topo span{display:none}
}
@media(max-width:980px){
  nav{display:none}
  /* Sem o menu ocupando o meio, ainda sobra espaco para o telefone --
     ele so' sai de cena no celular estreito (ver 640px), onde a barra
     fixa inferior passa a carregar o numero por extenso. */
  .hero .wrap{padding:76px 0 84px}
  .hero .foto img{object-position:70% center}
  /* Sem veu no mobile: a foto entra limpa, do jeito que foi fotografada.
     A versao anterior cobria a imagem inteira com um gradiente escuro
     que aparecia como uma faixa sobre o rosto das pessoas. */
  .hero .foto:after{display:none}
  .bloco .wrap,.hero .wrap,.emp-grade,.mundos,.pessoa .wrap{grid-template-columns:1fr;gap:38px}
  /* No mobile a foto ocupa a largura toda, como as demais da home --
     sem o antigo teto de 280px, que a deixava menor que as outras. */
  .pessoa figure{order:-1}
  .hero .wrap{padding-top:0}
  .hero .caixa{padding:38px 0 42px;order:2}
  .hero .foto{order:1;height:min(430px,58vh);margin:0 calc((100vw - min(1240px,90vw))/-2)}
  .hero .foto img{object-position:56% 26%}
  .emp-grade{padding-top:32px}
  .empresas{padding:66px 0}
  .bloco.inv .wrap{direction:ltr}
  .bloco figure{order:-1}
  .rep{grid-template-columns:1fr}
  .rep-a{border-right:none;border-bottom:1px solid var(--linha)}
  .rep-a,.rep-b{padding:32px 26px}
  .resposta{grid-template-columns:1fr;padding:30px 26px;gap:22px}
  .resposta .btn{width:100%}
  .frod{grid-template-columns:1fr;gap:32px}
  .bloco,.mapa,.pessoa,.insta,.reputacao,.final,.parceiros,.secao{padding:66px 0}
  .capa{padding:56px 0 54px}
  .objetivos{grid-template-columns:1fr;gap:10px}
  .mundos{gap:12px}
  .ig-faixa{grid-template-columns:1fr;gap:22px;padding:30px 26px;text-align:left}
  .ig-faixa .btn{width:100%}
  .ig-faixa .glifo{display:none}
  .zap{bottom:88px;width:48px;height:48px}
  .zap svg{width:23px;height:23px}
  .fixo-mob{display:flex}
  body{padding-bottom:78px}
  .cotar .cab,.passo,.rodape-modal{padding-left:24px;padding-right:24px}
  .barra{margin:0 24px}
  .marca{min-width:150px;height:66px;padding:0 20px;font-size:.92rem}
  .trilho{animation-duration:38s}
  .esteira.rev2 .trilho{animation-duration:46s}
}
@media(max-width:640px){
  /* Celular estreito: o header fica so' com logo + CTA. O numero nao
     some do site -- ele passa a aparecer por extenso na barra fixa
     inferior, que esta' sempre visivel, e continua no rodape. */
  .fone-topo{display:none}
}
@media(max-width:520px){
  .hero .linhas{gap:22px}
  .cartao,.mundo,.outra{padding:24px 22px}
  .rep-a,.rep-b{padding:26px 20px}
  .marca{min-width:132px;height:60px;font-size:.86rem}
  .fixo-mob .btn{font-size:.82rem;padding:14px 8px;gap:6px}
}