/* Layout: faixa marinho de abertura com a tela do produto saindo dela; depois, blocos pelas quatro etapas reais do sistema. */
@font-face{font-family:"Artegra Sans";font-weight:400;font-display:swap;src:url(fonts/ArtegraSans-Regular.woff2) format("woff2")}
@font-face{font-family:"Artegra Sans";font-weight:500;font-display:swap;src:url(fonts/ArtegraSans-Medium.woff2) format("woff2")}
@font-face{font-family:"Artegra Sans";font-weight:700;font-display:swap;src:url(fonts/ArtegraSans-Bold.woff2) format("woff2")}
@font-face{font-family:"Artegra Display";font-weight:900;font-display:swap;src:url(fonts/ArtegraSansExtended-Black.woff2) format("woff2")}
@font-face{font-family:"Artegra Label";font-weight:500;font-display:swap;src:url(fonts/ArtegraSansCondensedSC-Medium.woff2) format("woff2")}
:root{
  --marinho:#24304A; --magenta:#C1007F; --claro:#FFFF99; --pessego:#DFB295;
  --fundo:#FFFFFF; --fundo-2:#FAF4EE; --texto:#24304A; --texto-2:#5A6274; --linha:#E8D9CB;
  --destaque:#C1007F; --risca:#F9E3DF; --risca-t:#A43734; --soma:#E3F1EC; --soma-t:#2B4F45;
  --corpo:"Artegra Sans",Inter,"DM Sans","Helvetica Neue",Arial,sans-serif;
  --titulo:"Artegra Display","Artegra Sans",Inter,"Helvetica Neue",Arial,sans-serif;
  --rotulo:"Artegra Label","Artegra Sans",Inter,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fundo:#131C2E; --fundo-2:#1B263C; --texto:#F4EFE9; --texto-2:#B9BECA; --linha:#35415C;
  --destaque:#FF8BEA; --risca:#47262B; --risca-t:#F4B4AC; --soma:#1E3B35; --soma-t:#BDE5D8; color-scheme:dark}
  :root:not([data-theme="light"]) .so-claro{display:none}
  :root:not([data-theme="light"]) .so-escuro{display:block}
  :root:not([data-theme="light"]) .numero{border-color:var(--pessego)}
}
:root[data-theme="dark"]{
  --fundo:#131C2E; --fundo-2:#1B263C; --texto:#F4EFE9; --texto-2:#B9BECA; --linha:#35415C;
  --destaque:#FF8BEA; --risca:#47262B; --risca-t:#F4B4AC; --soma:#1E3B35; --soma-t:#BDE5D8; color-scheme:dark}
:root[data-theme="dark"] .so-claro{display:none}
:root[data-theme="dark"] .so-escuro{display:block}
:root[data-theme="dark"] .numero{border-color:var(--pessego)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);font:400 17px/1.55 var(--corpo);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--marinho)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--destaque);outline-offset:3px;border-radius:4px}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2{font-family:var(--titulo);font-weight:900;text-wrap:balance;letter-spacing:-.01em}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem);line-height:1.12}
h3{font-size:1.2rem;line-height:1.25;font-weight:700;text-wrap:balance}
.faixa{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.miolo{max-width:1160px;margin-inline:auto}
.secao{padding-block:clamp(56px,8vw,104px)}
.rotulo{font:500 .95rem/1.2 var(--rotulo);letter-spacing:.05em;color:var(--destaque)}
.intro{max-width:62ch;color:var(--texto-2);font-size:1.08rem}
.pilha{display:flex;flex-direction:column;gap:14px}
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:8px;font-weight:700;text-decoration:none;border:2px solid transparent;transition:transform .15s ease}
.botao:hover{transform:translateY(-1px)}
.botao-a{background:var(--magenta);color:#fff}
.botao-b{border-color:currentColor}

/* Abertura */
.abertura{background:var(--marinho);color:#fff;position:relative;overflow:hidden;padding-bottom:clamp(150px,27vw,350px)}
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px;position:relative;z-index:2}
.marca{display:block;line-height:0;min-width:0}
.marca img{height:clamp(30px,4.4vw,48px);width:auto}
.topo nav{display:flex;align-items:center;gap:clamp(12px,2.4vw,24px);font-weight:500;flex-shrink:0}
.topo nav a{color:#fff;text-underline-offset:4px}
.tese{position:relative;z-index:2;display:flex;flex-direction:column;gap:22px;padding-block:clamp(28px,5vw,64px) clamp(36px,5vw,56px)}
h1{font-size:clamp(2.35rem,6.8vw,5.3rem);line-height:1.02;max-width:min(760px,100%)}
h1 em{font-style:normal;color:var(--claro)}
.tese p{max-width:58ch;font-size:clamp(1.06rem,1.8vw,1.28rem);color:#E4E7EE}
.tese p.aviso-idioma{font-size:.98rem;color:var(--claro)}
.acoes{display:flex;flex-wrap:wrap;gap:12px}
.grafema{position:absolute;right:-7%;top:-4%;width:min(46vw,580px);z-index:1;pointer-events:none}
.grafema img{display:block;width:100%;height:auto}
.vitrine{margin-top:calc(-1 * clamp(130px,25vw,330px));position:relative;z-index:3}

/* Telas */
.tela{display:block;width:100%;padding:0;border:1px solid var(--linha);border-radius:10px;overflow:hidden;background:#fff;cursor:zoom-in;position:relative;font:inherit;color:inherit;text-align:left}
.tela img{display:block;width:100%;height:auto}
.tela.corta{max-height:var(--corte,560px)}
.tela.corta::after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.vitrine .tela{box-shadow:0 24px 60px -24px rgba(19,28,46,.55)}
.legenda{margin-top:9px;font-size:.88rem;color:var(--texto-2)}

/* Por que agora */
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,4vw,48px);margin-top:44px}
.numero{display:flex;flex-direction:column;gap:6px;border-top:2px solid var(--marinho);padding-top:16px;min-width:0}
.numero b{font:900 clamp(1.9rem,4vw,3rem)/1.05 var(--titulo);font-variant-numeric:tabular-nums}
.numero small{font-size:.86rem;color:var(--texto-2)}

/* Para quem */
.quem{background:var(--fundo-2)}
.linhas{margin-top:40px;display:flex;flex-direction:column;border-top:1px solid var(--linha)}
.linha{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr) minmax(0,3fr);gap:18px 36px;padding-block:26px;border-bottom:1px solid var(--linha)}
.linha>*{min-width:0}
.linha .rotulo{display:block;margin-bottom:7px}
.linha p{color:var(--texto-2)}
.linha .como{font-size:.95rem}
.linha .como strong{display:block;color:var(--texto);font-weight:700}

/* Etapas */
.indice{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:36px}
.indice a{display:flex;flex-direction:column;gap:3px;padding:14px;border:1px solid var(--linha);border-radius:8px;text-decoration:none;font-weight:700;line-height:1.2;min-width:0}
.indice a:hover{border-color:var(--destaque)}
.etapa{display:flex;flex-direction:column;gap:clamp(36px,5vw,64px);padding-top:clamp(56px,7vw,88px);scroll-margin-top:16px}
.bloco{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);align-items:start}
.bloco.inverte{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bloco.inverte>.txt{order:2}
.txt{display:flex;flex-direction:column;gap:14px;min-width:0}
.visual{display:flex;flex-direction:column;gap:18px;min-width:0}
.pontos{display:flex;flex-direction:column;gap:10px;color:var(--texto-2)}
.pontos li{padding-left:18px;position:relative}
.pontos li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--pessego);clip-path:polygon(50% 0,100% 100%,0 100%)}
.par{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.par>*{min-width:0}

/* Revisão */
.revisao{border:1px solid var(--linha);border-radius:10px;padding:20px;display:flex;flex-direction:column;gap:11px;background:var(--fundo)}
.revisao h3{font-size:1rem}
.revisao del,.revisao ins{display:block;padding:7px 10px;border-radius:6px;font-size:.96rem}
.revisao del{background:var(--risca);color:var(--risca-t);text-decoration:line-through}
.revisao ins{background:var(--soma);color:var(--soma-t);text-decoration:none}
.revisao small{color:var(--texto-2)}
.revisao .falsos{display:flex;gap:8px;font-size:.88rem;font-weight:700}
.revisao .falsos span{padding:5px 12px;border-radius:6px;border:1px solid var(--linha)}
.revisao .falsos span:first-child{background:var(--magenta);color:#fff;border-color:var(--magenta)}

/* Gestão */
.gestao{background:var(--fundo-2)}
.gestao-grade{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr);gap:18px;margin-top:40px;align-items:start}
.gestao-grade>*{min-width:0}
.gestao-col{display:flex;flex-direction:column;gap:18px;min-width:0}

/* Garantias */
.duas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,80px)}
.duas>*{min-width:0}
.duas .rotulo{margin-bottom:12px}
.lista-g{display:flex;flex-direction:column;gap:20px;margin-top:26px}
.lista-g h3{font-size:1.05rem;margin-bottom:3px}
.lista-g p{color:var(--texto-2)}

/* Fechamento */
.fim{background:var(--marinho);color:#fff}
.fim .intro{color:#E4E7EE}
.fim .rotulo{color:var(--claro)}
.contato{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.contato code{font:700 clamp(1.02rem,2.2vw,1.2rem)/1.3 var(--corpo);user-select:all;overflow-wrap:anywhere}
.contato button{min-height:44px;padding:8px 16px;border-radius:8px;background:transparent;color:#fff;border:2px solid #fff;font:700 .95rem var(--corpo);cursor:pointer}

/* Rodapé */
.rodape{padding-block:48px;font-size:.88rem;color:var(--texto-2)}
.rodape .miolo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:24px clamp(24px,5vw,64px);align-items:start}
.logo-pe img{display:block;width:min(190px,60vw);height:auto}
.logo-pe img.so-escuro{display:none}
.rodape .notas{display:flex;flex-direction:column;gap:12px;min-width:0}
.rodape ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.rodape a{text-underline-offset:3px;overflow-wrap:anywhere}
.rodape .fim-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;color:var(--texto)}

dialog{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;overflow:auto}
dialog::backdrop{background:rgba(19,28,46,.92)}
dialog .quadro{min-height:100%;display:flex;justify-content:center;align-items:flex-start;padding:max(56px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}
dialog img{display:block;width:auto;max-width:min(1400px,100%);height:auto;border-radius:8px;background:#fff}
.dica{position:fixed;top:max(18px,env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));margin:0;color:#fff;font-size:.9rem;font-weight:500}
dialog button{position:fixed;top:max(10px,env(safe-area-inset-top,0px));right:max(14px,env(safe-area-inset-right,0px));min-height:40px;padding:6px 16px;border:0;border-radius:8px;background:#fff;color:#24304A;font:700 .95rem var(--corpo);cursor:pointer}

@media (max-width:860px){
  .numeros{grid-template-columns:minmax(0,1fr)}
  .linha{grid-template-columns:minmax(0,1fr);gap:8px;padding-block:22px}
  .bloco,.bloco.inverte{grid-template-columns:minmax(0,1fr)}
  .bloco.inverte>.txt{order:0}
  .indice{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duas{grid-template-columns:minmax(0,1fr)}
  .gestao-grade{grid-template-columns:minmax(0,1fr)}
  .gestao-col .celular{max-width:300px}
  .rodape .miolo{grid-template-columns:minmax(0,1fr)}
  .par{grid-template-columns:minmax(0,1fr)}
  .grafema{opacity:.55;width:70vw;right:-22%}
  dialog .quadro{justify-content:flex-start;width:max-content;min-width:100%}
  dialog img{max-width:none;width:min(900px,220vw)}
  dialog img.fino{width:calc(100vw - 32px);max-width:560px}
  .tela.corta:not([data-zoom*="popup"]){max-height:none}
  .tela.corta:not([data-zoom*="popup"])::after{display:none}
  .tela::before{content:attr(data-z);position:absolute;right:8px;bottom:8px;z-index:2;padding:4px 10px;border-radius:6px;background:#24304A;color:#fff;font-size:.8rem;font-weight:700;line-height:1.3}
  .topo nav a{display:inline-block;padding-block:11px}
  .numero small a{display:inline-block;padding-block:11px}
  .numero small{margin-top:-6px}
  .rodape .fim-links a{display:inline-block;padding-block:9px}
  .rodape ol{gap:10px}
}