/* =========================================================================
   LS ADVISOR — Apresentação comercial
   Estrutura e copy vindas da apresentação do Canva (27 slides). A marca é a
   oficial: azul institucional #05132A, branco, Manrope e Libre Baskerville.
   Sem degradê e sem sombra, como manda o manual.

   Slide de 1280 × 720 (16:9). O Chrome imprime cada .s como uma página.
   ========================================================================= */
@font-face{
  font-family:Manrope;src:url(fontes/manrope.woff2)format("woff2");
  font-weight:200 800;font-style:normal;
}
@font-face{
  font-family:"Libre Baskerville";src:url(fontes/baskerville-italic.woff2)format("woff2");
  font-weight:400;font-style:italic;
}

:root{
  /* O azul da marca em escala. O #05132A antigo lia como preto na tela e no
     projetor; estes tres continuam sendo o mesmo azul, so que respiram. */
  --azul-esc:#0F3D91;      /* fundo dos slides escuros */
  --azul:#1757BF;          /* acento e destaque */
  --azul-tex:#0B2A5C;      /* texto sobre fundo claro (azul, nao preto) */
  --azul-cla:#F4F8FE;      /* fundo dos slides claros */
  --azul-vid:#E7EFFC;      /* moldura de imagem, linha zebrada */
  --branco:#FFFFFF;

  --n80:rgba(11,42,92,.80);
  --n64:rgba(11,42,92,.64);
  --n40:rgba(11,42,92,.40);
  --n16:rgba(11,42,92,.18);
  --n08:rgba(11,42,92,.10);
  --n04:rgba(11,42,92,.05);
  --b64:rgba(255,255,255,.68);
  --b40:rgba(255,255,255,.46);
  --b16:rgba(255,255,255,.22);
  --b08:rgba(255,255,255,.12);

  /* nomes antigos, mantidos para nao quebrar nada que ainda os use */
  --navy:#0B2A5C;
}

@page{size:1280px 720px;margin:0}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:Manrope,system-ui,sans-serif;color:var(--azul-tex);background:#DCE6F6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

/* ---------------------------------------------------------------- slide */
.s{
  position:relative;width:1280px;height:720px;overflow:hidden;
  background:var(--azul-cla);
  padding:64px 80px;display:flex;flex-direction:column;
  page-break-after:always;break-after:page;
}
.s:last-child{page-break-after:auto;break-after:auto}
.s--navy{background:var(--azul-esc);color:var(--branco)}

/* marca d'água discreta no rodapé de cada slide */
.pe{
  position:absolute;left:80px;right:80px;bottom:30px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--n40);
}
.s--navy .pe{color:var(--b40)}
.pe img{height:15px;width:auto;opacity:.9}
.pe .num{font-variant-numeric:tabular-nums}
/* O numero da pagina e contado pelo CSS. Assim eu posso inserir ou tirar um
   slide sem renumerar tudo na mao — e sem errar. */
body{counter-reset:pg}
.s{counter-increment:pg}
.pe .num::before{content:counter(pg,decimal-leading-zero)}

/* ---------------------------------------------------------- tipografia */
.olho{
  font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--azul);margin-bottom:18px;
}
.s--navy .olho{color:var(--branco);opacity:.66}

/* text-wrap:balance reparte as linhas por igual. Sem isto, titulos longos
   deixavam uma palavra sozinha na ultima linha ('banco.', 'o crédito.'). */
h1{font-size:76px;font-weight:200;line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:54px;font-weight:200;line-height:1.1;letter-spacing:-.03em;margin-bottom:14px;text-wrap:balance}
h3{font-size:26px;font-weight:800;line-height:1.25;letter-spacing:-.02em}
em{font-family:"Libre Baskerville",serif;font-style:italic;font-weight:400}
h1 strong,h2 strong{font-weight:700}
.lead{text-wrap:pretty;font-size:21px;font-weight:400;line-height:1.5;color:var(--n64);max-width:840px}
.s--navy .lead{color:var(--b64)}
b,strong{font-weight:700}
.num{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- blocos */
.corpo{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;min-height:0}
.centro{align-items:center;text-align:center}

/* grade de números */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px}
.nums>div{padding:0 28px;border-left:1px solid var(--b16)}
.nums>div:first-child{padding-left:0;border-left:0}
.nums .v{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.nums .k{margin-top:10px;font-size:15px;font-weight:700;line-height:1.3}
.nums .d{margin-top:3px;font-size:13px;line-height:1.4;color:var(--b64)}

/* cartões numerados */
.cards{display:grid;gap:16px;margin-top:32px}
.cards--2{grid-template-columns:1fr 1fr}
.cards--3{grid-template-columns:repeat(3,1fr)}
.card{
  border:1px solid var(--n16);border-radius:16px;padding:26px 24px;
  display:flex;flex-direction:column;gap:10px;
}
.s--navy .card{border-color:var(--b16)}
.card .n{
  width:32px;height:32px;border-radius:9px;background:var(--azul);color:var(--branco);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;flex:0 0 auto;
}
.s--navy .card .n{background:var(--branco);color:var(--azul-esc)}
.card h4{text-wrap:balance;font-size:19px;font-weight:800;line-height:1.28;letter-spacing:-.015em}
.card p{font-size:15px;line-height:1.5;color:var(--n64)}
.s--navy .card p{color:var(--b64)}

/* lista com marca */
.itens{display:grid;gap:13px;margin-top:26px}
.item{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.item svg{width:20px;height:20px;color:var(--azul);margin-top:2px}
.s--navy .item svg{color:var(--branco)}
.item p{font-size:18px;line-height:1.45}
.item p span{color:var(--n64);font-weight:400}
.s--navy .item p span{color:var(--b64)}

/* faixa de imagens (depoimentos) */
/* Tres por slide, nao quatro. Com quatro a conversa fica pequena demais para
   ler no PDF; com tres a letra sobe cerca de 30%. */
.tiras{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px;flex:1 1 auto;min-height:0}
.tira{
  border:1px solid var(--n16);border-radius:14px;overflow:hidden;background:var(--n04);
  display:flex;align-items:flex-start;justify-content:center;
}
.s--navy .tira{border-color:var(--b16);background:var(--b08)}
.tira img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* figuras conceituais (SVG, vetorial — fica nitido em qualquer zoom) */
.fig{width:100%;height:auto;display:block}
.f-t{font:800 14px/1 Manrope,sans-serif;fill:var(--azul-tex)}
.f-s{font:500 12px/1 Manrope,sans-serif;fill:rgba(11,42,92,.62)}
.f-n{font:800 11px/1 Manrope,sans-serif;fill:#fff}
.f-c{font:200 25px/1 Manrope,sans-serif;fill:#fff;letter-spacing:-.02em}
.r-t{font:700 15px/1 Manrope,sans-serif}
.r-lab{font:800 12px/1 Manrope,sans-serif;fill:rgba(11,42,92,.42);letter-spacing:.18em}
.r-lab--on{fill:var(--azul)}
.r-fim{font:800 17px/1 Manrope,sans-serif;fill:var(--azul-tex)}
.r-fim--frio{font-weight:600;fill:rgba(11,42,92,.50)}

/* texto de um lado, figura do outro */
.lado{display:grid;grid-template-columns:1fr 592px;gap:52px;align-items:center;margin-top:6px}
.lado--leque{grid-template-columns:1fr 560px}
.lado .olho{margin-bottom:14px}

/* faixa de bancos parceiros */
.bancos{margin-top:26px}
.bancos-t{
  font-size:11px;font-weight:800;letter-spacing:.20em;text-transform:uppercase;
  color:var(--n40);margin-bottom:12px;
}
/* minmax(0,1fr) e nao 1fr: a faixa minima automatica do grid deixava a logo
   empurrar a coluna, e um SVG sem largura intrinseca esticava ate estourar. */
.bancos-g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
/* moldura por fora, logo por dentro — raios concentricos, como manda o manual */
.banco{
  background:var(--branco);border:1px solid var(--n16);border-radius:13px;
  height:62px;min-width:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;padding:11px 13px;
}
.banco img{width:100%;height:100%;object-fit:contain;display:block}

/* o time — cinco retratos */
.time{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:28px}
.pessoa img{
  width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top center;
  border-radius:14px;background:var(--azul-vid);
}
.pessoa h5{margin-top:13px;font-size:15px;font-weight:800;line-height:1.25;letter-spacing:-.012em}
.pessoa p{margin-top:3px;font-size:12.5px;line-height:1.35;color:var(--n64)}

/* placas de comprovante */
.placas{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.placa{border:1px solid var(--n16);border-radius:14px;overflow:hidden;background:var(--branco)}
.s--navy .placa{border-color:var(--b16)}
/* comprovantes e certificados são larguras diferentes — 'contain' mostra a peça
   inteira, sem cortar o número nem a assinatura. */
.placa img{width:100%;height:246px;object-fit:contain;background:var(--azul-vid);padding:8px}
.placa .cap{padding:12px 14px;font-size:13px;font-weight:700;line-height:1.35}
.placa .cap span{display:block;font-weight:500;color:var(--n64);margin-top:2px}

/* passos em trilho */
.trilho{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.passo{border-top:2px solid var(--azul);padding-top:14px}
.s--navy .passo{border-top-color:var(--branco)}
.passo .n{font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--azul)}
.s--navy .passo .n{color:var(--branco);opacity:.7}
.passo h5{text-wrap:balance;margin-top:7px;font-size:16px;font-weight:800;line-height:1.3}
.passo p{margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--n64)}
.s--navy .passo p{color:var(--b64)}

/* duas colunas comparativas */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px}
.duo>div{border:1px solid var(--n16);border-radius:16px;padding:28px}
.s--navy .duo>div{border-color:var(--b16)}
.duo .t{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--n64);margin-bottom:16px}
.s--navy .duo .t{color:var(--b64)}
.duo ul{list-style:none;display:grid;gap:11px}
.duo li{font-size:17px;line-height:1.4;padding-left:20px;position:relative}
.duo li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--azul)}
.s--navy .duo li::before{background:var(--branco)}

/* tabela de valor */
.tab{margin-top:26px;border:1px solid var(--n16);border-radius:14px;overflow:hidden}
.tab .l{display:flex;justify-content:space-between;gap:20px;padding:13px 20px;border-bottom:1px solid var(--n08);font-size:16px}
.tab .l:last-child{border-bottom:0}
.tab .l b{font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.tab .l--tot{background:var(--n04)}
.tab .l--fim{background:var(--azul);color:var(--branco);font-size:19px;font-weight:800}
.tab .l--fim b{font-size:24px}

/* preço final */
.preco{display:flex;align-items:flex-end;gap:26px;margin-top:8px}
/* So o numero e riscado. O rotulo explica de onde vem o valor — riscar o
   rotulo junto faria parecer que ele tambem foi cancelado. */
.preco .de{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;color:var(--b40)}
.preco .de i{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.preco .de b{font-size:26px;font-weight:600;text-decoration:line-through;font-variant-numeric:tabular-nums}
.preco .por{font-size:100px;font-weight:800;letter-spacing:-.045em;line-height:.94;font-variant-numeric:tabular-nums}
.preco .obs{font-size:17px;line-height:1.4;color:var(--b64);padding-bottom:12px}

.selo{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  border:1px solid var(--b16);border-radius:999px;padding:11px 20px;
  font-size:15px;font-weight:700;
}
.selo b{font-weight:800}

/* --------------------------------------------------- depoimento destaque */
.fala{display:grid;grid-template-columns:1fr 372px;gap:56px;align-items:center;margin-top:10px}
.fala blockquote{text-wrap:balance;font-size:52px;font-weight:200;line-height:1.1;letter-spacing:-.03em}
.fala .fala-vl{
  margin-top:26px;font-size:60px;font-weight:800;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.fala .fala-qm{margin-top:14px;font-size:17px;line-height:1.5;color:var(--b64)}
.fala-im{
  border:1px solid var(--b16);border-radius:18px;overflow:hidden;background:var(--b08);
  height:472px;
}
.fala-im img{width:100%;height:100%;object-fit:cover;object-position:top center}


/* =========================================================================
   TELA — o mesmo slide, em qualquer largura
   O PDF continua fixo em 1280x720 (a impressao exige). Na tela, cada slide
   encolhe junto com a janela e mantem o 16:9.
   --esc e a razao entre a largura util e os 1280px do slide. O CSS nao sabe
   dividir comprimento por comprimento, entao quem calcula e o script no fim
   do HTML. Sem script, --esc fica 1 e o slide aparece em tamanho natural.
   ========================================================================= */
:root{--esc:1}

@media screen{
  body{
    padding:clamp(8px,2.2vw,28px);
    display:flex;flex-direction:column;align-items:center;
    gap:clamp(10px,2vw,26px);
    overflow-x:hidden;
  }
  .s{
    flex:0 0 auto;
    transform:scale(var(--esc));
    transform-origin:top center;
    /* transform nao muda o espaco ocupado; esta margem devolve ao fluxo a
       altura que a escala tirou. */
    margin-bottom:calc(720px * (var(--esc) - 1));
    border-radius:clamp(0px,.9vw,14px);
    box-shadow:0 1px 3px rgba(11,42,92,.13), 0 14px 34px rgba(11,42,92,.11);
  }
}

/* ---------------------------------------------------- modo apresentacao */
@media screen{
  .btn-apresentar{
    position:fixed;right:18px;bottom:18px;z-index:50;
    display:inline-flex;align-items:center;gap:9px;
    border:0;border-radius:999px;padding:12px 20px 12px 16px;cursor:pointer;
    background:var(--azul-esc);color:var(--branco);
    font:800 14px/1 Manrope,system-ui,sans-serif;letter-spacing:.02em;
    box-shadow:0 2px 6px rgba(11,42,92,.24), 0 14px 30px rgba(11,42,92,.20);
  }
  .btn-apresentar svg{width:17px;height:17px}
  .btn-apresentar:hover{background:var(--azul)}

  /* Um slide por vez, no meio da tela, sobre fundo escuro para a sala
     desaparecer em volta. */
  body.modo-slide{
    position:fixed;inset:0;margin:0;padding:0;
    display:block;overflow:hidden;background:#071B3D;cursor:pointer;
  }
  /* 'visibility' e nao 'display:none'. Um elemento com display:none nao gera
     caixa, e entao o counter-increment do CSS nao roda nele — o numero da
     pagina no rodape zerava. Com visibility a contagem continua certa. */
  body.modo-slide > .s{
    position:fixed;top:50%;left:50%;
    transform:translate(-50%,-50%) scale(var(--esc));
    transform-origin:center center;
    margin:0;border-radius:0;box-shadow:none;
    visibility:hidden;
  }
  body.modo-slide > .s.ativo{visibility:visible}
  body.modo-slide .btn-apresentar{display:none}

  .hud{
    position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:4px;
    padding:5px;border-radius:999px;cursor:default;
    background:rgba(7,27,61,.72);backdrop-filter:blur(10px);
    opacity:.30;transition:opacity .18s;
  }
  .hud:hover{opacity:1}
  .hud[hidden]{display:none}
  .hud button{
    border:0;background:transparent;color:var(--branco);cursor:pointer;
    width:32px;height:32px;border-radius:999px;
    font:700 19px/1 Manrope,system-ui,sans-serif;
  }
  .hud button:hover{background:rgba(255,255,255,.16)}
  .hud span{
    padding:0 12px;color:var(--branco);
    font:700 13px/1 Manrope,system-ui,sans-serif;
    font-variant-numeric:tabular-nums;
  }
}

/* Impressao: sem escala, sem sombra, uma pagina por slide. */
@media print{
  body{background:var(--branco);padding:0;display:block;gap:0;overflow:visible}
  .s{transform:none;margin:0;border-radius:0;box-shadow:none;display:flex}
  .btn-apresentar,.hud{display:none !important}
}