/* ==========================================================================
   APRESENTAÇÃO INSTITUCIONAL

   Serve duas saídas ao mesmo tempo, e essa é a restrição que manda em tudo:
   na tela é o vendedor rolando na frente do cliente; no papel é o PDF que
   fica com o cliente depois. Por isso o documento é claro do começo ao fim
   (tinta é cara, fundo preto sai borrado) e o layout é vertical, sem truque
   de rolagem que a impressora não saiba reproduzir.

   Paleta: as cores do logo conferidas em contraste, as mesmas da proposta.
   O vermelho dá 6,16:1 sobre branco, então passa AA até em texto pequeno.
   ========================================================================== */

[hidden]{display:none!important}

:root{
  --papel:#FFFFFF;
  --papel-2:#F6F7F8;
  --papel-3:#EDEFF1;
  --fio:#E2E5E8;
  --fio-2:#CBD0D5;
  --tinta:#16191C;
  --tinta-2:#4A5158;
  --tinta-3:#636B73;
  --red:#C1171F;
  --red-forte:#A5131A;
  --red-fraco:#FDEEEF;
  --capa:#0E1114;
  --fonte:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(22px,6vw,88px);
  --r:14px;
  --r-c:8px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--papel)}
body{
  font-family:var(--fonte);color:var(--tinta);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

.d2{
  font-size:clamp(1.7rem,3.6vw,2.9rem);font-weight:800;line-height:1.08;
  letter-spacing:-.025em;margin:0 0 1rem;text-wrap:balance;
}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ------------------------------------------------ barra de comando */
/* Fica sobre a capa, que é escura, então é clara. E some na impressão:
   um botão "Salvar em PDF" impresso dentro do PDF é ruído. */
.cmd{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem var(--gutter);
  background:linear-gradient(180deg,rgba(14,17,20,.55),transparent);
}
.cmd__dir{display:flex;gap:.5rem}
.cmd__voltar,.cmd__bt{
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.5rem .95rem;border-radius:999px;text-decoration:none;
  border:1px solid rgba(255,255,255,.42);background:rgba(14,17,20,.4);
  color:#FFFFFF;backdrop-filter:blur(8px);
  transition:background .16s ease-out,border-color .16s ease-out;
}
.cmd__voltar:hover,.cmd__bt:hover{background:rgba(14,17,20,.7);border-color:#FFFFFF}
.cmd__bt--forte{background:var(--red);border-color:var(--red)}
.cmd__bt--forte:hover{background:var(--red-forte);border-color:var(--red-forte)}
.cmd__voltar:focus-visible,.cmd__bt:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
/* Depois da capa o fundo é branco: a barra troca de roupa para continuar legível. */
.cmd.clara{background:linear-gradient(180deg,var(--papel) 62%,transparent)}
.cmd.clara .cmd__voltar,.cmd.clara .cmd__bt{
  border-color:var(--fio-2);background:var(--papel);color:var(--tinta);backdrop-filter:none}
.cmd.clara .cmd__voltar:hover,.cmd.clara .cmd__bt:hover{background:var(--papel-2);border-color:var(--tinta-3)}
.cmd.clara .cmd__bt--forte{background:var(--red);border-color:var(--red);color:#FFFFFF}
.cmd.clara .cmd__bt--forte:hover{background:var(--red-forte);border-color:var(--red-forte)}
.cmd.clara .cmd__voltar:focus-visible,.cmd.clara .cmd__bt:focus-visible{outline-color:var(--red)}

/* ------------------------------------------------------------ capa */
.capa{
  position:relative;min-height:100dvh;display:grid;align-items:end;
  background:var(--capa);overflow:hidden;
}
.capa__foto{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.capa__conteudo{
  position:relative;padding:var(--gutter);padding-bottom:clamp(48px,9vh,110px);
  max-width:52rem;
}
/* O véu existe para o texto ter contraste, não para escurecer a foto por
   gosto: sem ele o branco sobre telhado claro cai para 2:1. */
.capa::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--capa) 30%,transparent) 0%,
    color-mix(in srgb,var(--capa) 52%,transparent) 42%,
    color-mix(in srgb,var(--capa) 88%,transparent) 100%);
}
.capa__conteudo{z-index:1}
.capa__logo{width:clamp(120px,14vw,168px);height:auto;margin-bottom:clamp(20px,4vh,40px)}
.capa h1{
  font-size:clamp(1.9rem,4.9vw,3.5rem);font-weight:800;line-height:1.04;
  letter-spacing:-.03em;margin:0 0 .9rem;color:#FFFFFF;
}
.capa p{margin:0;font-size:clamp(1rem,1.7vw,1.2rem);color:rgba(255,255,255,.88);max-width:44ch}

/* --------------------------------------------------------- páginas */
.pg{padding:clamp(56px,9vh,110px) var(--gutter);max-width:74rem;margin:0 auto}
.pg--fundo{background:var(--papel-2);max-width:none}
.pg--fundo > *{max-width:74rem;margin-left:auto;margin-right:auto}

/* Uma sobrancelha a cada três seções. Oito seções, duas usadas. */
.olho{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);margin:0 0 .7rem;font-weight:500;
}

/* ------------------------------------------------------- números */
/* Sem cartão: o número é grande o bastante para se separar sozinho, e uma
   caixa em volta de cada um só acrescentaria borda. */
.num{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:clamp(20px,3vw,44px)}
.num__i{display:grid;gap:.35rem;border-top:2px solid var(--tinta);padding-top:.9rem}
.num__i b{
  font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums;
}
.num__i span{font-size:.92rem;color:var(--tinta-2);line-height:1.45}

/* ----------------------------------------------------- quem somos */
.duas{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}
.prosa p{margin:0 0 1rem;max-width:60ch;color:var(--tinta-2)}
.prosa__forte{font-size:clamp(1.1rem,1.9vw,1.34rem);color:var(--tinta)!important;font-weight:500;line-height:1.45}
.prosa__larga{margin:0 0 1.6rem;max-width:62ch;color:var(--tinta-2);font-size:1.02rem}

.linha{list-style:none;margin:0;padding:0;display:grid;gap:0}
.linha li{
  display:grid;grid-template-columns:5.2rem 1fr;gap:1rem;align-items:baseline;
  padding:.9rem 0;border-top:1px solid var(--fio);
}
.linha li:last-child{border-bottom:1px solid var(--fio)}
.linha b{font-family:var(--mono);font-size:.94rem;color:var(--red);font-weight:500}
.linha span{color:var(--tinta-2);font-size:.94rem}

.missao{
  margin:clamp(32px,5vh,56px) 0 0;padding:clamp(20px,3vw,32px);
  background:var(--papel-2);border-left:3px solid var(--red);border-radius:0 var(--r-c) var(--r-c) 0;
}
.missao p{margin:0 0 .7rem;font-size:clamp(1.02rem,1.7vw,1.2rem);line-height:1.5}
.missao cite{font-style:normal;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);font-weight:600}

/* ---------------------------------------------------------- passos */
/* A numeração aqui é conteúdo, não enfeite: é uma sequência real, e a peça
   passa pelas cinco etapas nessa ordem. */
.passos{list-style:none;margin:clamp(28px,4vh,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.passos li{display:grid;gap:.45rem;align-content:start}
.passos__n{font-family:var(--mono);font-size:.86rem;color:var(--red);font-weight:500}
.passos h3{margin:0;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.passos p{margin:0;font-size:.92rem;color:var(--tinta-2);line-height:1.5}

/* ------------------------------------------------------ comparação */
.tab-rola{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{width:100%;border-collapse:collapse;min-width:34rem;font-size:.95rem}
.tab th,.tab td{padding:.85rem 1rem;text-align:left;vertical-align:top}
.tab thead th{
  font-size:.76rem;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);
  font-weight:700;border-bottom:2px solid var(--tinta);
}
.tab tbody th{font-weight:600;color:var(--tinta);width:14rem}
.tab tbody td{color:var(--tinta-2)}
.tab tbody tr + tr th,.tab tbody tr + tr td{border-top:1px solid var(--fio)}
/* A coluna da Pórtico é a resposta da tabela: ganha fundo e tinta cheia. */
.tab .tab--nos{background:var(--red-fraco);color:var(--tinta);font-weight:600}
.tab thead .tab--nos{color:var(--red);border-bottom-color:var(--red)}

.franqueza{
  margin-top:clamp(32px,5vh,56px);padding:clamp(20px,3vw,30px);
  border:1.5px solid var(--fio-2);border-radius:var(--r-c);background:var(--papel);
}
.franqueza h3{margin:0 0 .5rem;font-size:1.08rem;font-weight:700}
.franqueza p{margin:0;color:var(--tinta-2);max-width:66ch;font-size:.96rem}

/* ----------------------------------------------------------- bento */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,22px);
  margin-top:clamp(28px,4vh,44px);
}
.bt-c{
  grid-column:span 2;background:var(--papel);border:1px solid var(--fio);
  border-radius:var(--r);padding:clamp(18px,2.4vw,26px);margin:0;
}
.bt-c h3{margin:0 0 .45rem;font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
.bt-c p{margin:0;font-size:.92rem;color:var(--tinta-2);line-height:1.5}
.bt-c--larga{grid-column:span 4}
.bt-c--foto{grid-column:span 2;padding:0;overflow:hidden;border:0}
.bt-c--foto img{width:100%;height:100%;min-height:9.5rem;object-fit:cover}
.bt-c--acento{background:var(--tinta);border-color:var(--tinta)}
.bt-c--acento h3{color:#FFFFFF}
.bt-c--acento p{color:rgba(255,255,255,.82)}

/* --------------------------------------------------------- galeria */
.galeria{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(12px,1.8vw,20px);margin-top:clamp(24px,3vh,36px);
}
.gl{margin:0;display:grid;gap:.5rem}
.gl img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--r-c)}
.gl--alta img{aspect-ratio:3/2}
.gl figcaption{font-size:.82rem;color:var(--tinta-3)}

/* -------------------------------------------------------- fechamento */
.pg--fim{border-top:1px solid var(--fio)}
.fim__logo{width:clamp(110px,12vw,148px);height:auto;margin-bottom:clamp(20px,3vh,34px)}
.contato{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:clamp(18px,3vw,36px);margin:clamp(28px,4vh,48px) 0 0;
}
.contato div{display:grid;gap:.3rem;border-top:1px solid var(--fio);padding-top:.8rem}
.contato dt{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-3);font-weight:700}
.contato dd{margin:0;font-size:.98rem;color:var(--tinta);line-height:1.5}

/* ---------------------------------------------------------- celular */
@media(max-width:56rem){
  .duas{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr 1fr}
  .bento{grid-template-columns:1fr}
  .bt-c,.bt-c--larga,.bt-c--foto{grid-column:auto}
  .bt-c--foto img{min-height:9rem}
  .passos{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============================================================ PAPEL */
/* O PDF sai daqui. Chrome, Safari e o iPad usam esta folha quando a pessoa
   escolhe "Salvar em PDF", e o resultado é um documento com texto de
   verdade: dá para copiar, buscar e o arquivo fica leve.              */
@media print{
  @page{size:A4;margin:14mm}
  html,body{background:#FFFFFF}
  .cmd{display:none!important}

  /* Cada seção começa numa folha. Sem isso o corte cai no meio de um passo
     e o cliente recebe um PDF que parece defeito de impressora. */
  .pg{break-before:page;padding:0 0 8mm;max-width:none;margin:0}
  .pg--fundo{background:none}
  .pg--fundo > *{max-width:none}

  /* A capa toma a folha inteira. Antes tinha altura fixa menor e ainda
     mandava quebrar depois: sobrava um terço de folha em branco. */
  .capa{min-height:0;height:auto;aspect-ratio:auto;break-after:page;
        display:block;position:relative}
  .capa__foto{position:absolute;inset:0;height:100%}
  .capa__conteudo{padding:14mm;max-width:none;
                  position:absolute;left:0;right:0;bottom:0}
  .capa,.capa::after{height:265mm}
  .capa h1{font-size:27pt;line-height:1.05}
  .capa p{font-size:11pt;max-width:60ch}

  .d2{font-size:19pt;margin-bottom:5mm}
  body{font-size:10pt;line-height:1.45}
  .num__i b{font-size:26pt}
  .passos{grid-template-columns:1fr 1fr;gap:6mm}
  .duas{grid-template-columns:1.2fr 1fr;gap:8mm}
  .bento{grid-template-columns:repeat(6,1fr);gap:4mm}
  .galeria{grid-template-columns:1fr 1fr;gap:4mm}

  /* Nada pode partir ao meio entre duas folhas. */
  .num__i,.passos li,.bt-c,.gl,.missao,.franqueza,.linha li,.contato div,
  .tab tr{break-inside:avoid}
  .tab-rola{overflow:visible}
  .tab{min-width:0;font-size:9.5pt}

  /* O navegador corta fundo por padrão para poupar tinta. Aqui o fundo da
     coluna da Pórtico e do cartão escuro carregam significado, então pedimos
     que sejam impressos. */
  .tab .tab--nos,.bt-c--acento,.missao,.capa,.capa::after{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
  a{color:inherit;text-decoration:none}
}