/* ZeeZy: estilo único do site */
:root{
  --tinta:#141C2E; --tinta-2:#24304A; --tinta-3:#2E3B58;
  --marfim:#F6F2EC; --areia:#E8DCCB; --areia-2:#DDD4C6; --areia-3:#F1EBE2;
  --petroleo:#2D6A6A; --petroleo-escuro:#245757; --petroleo-claro:#E3EEEC;
  --champanhe:#C6A46C; --champanhe-escuro:#8A6A33;
  --salvia:#A9BFB5; --cinza:#6E675E; --cinza-claro:#CFC6B8; --branco:#FFFFFF;
  --ok:#3F8A5A; --atencao:#C9922E; --risco:#B83A34;
  --display:'Red Hat Display','Helvetica Neue',Arial,sans-serif;
  --texto:'Red Hat Text','Helvetica Neue',Arial,sans-serif;

  /* Grade fluida: cresce com a tela, até 1440px de conteúdo */
  --lateral:clamp(20px,5vw,72px);
  --largura:min(1440px,100% - var(--lateral)*2);
  --secao:clamp(72px,9vw,152px);
  --raio:clamp(20px,1.6vw,28px);

  /* Escala de texto fluida */
  --h1:clamp(2.6rem,1.6rem + 3.6vw,5.4rem);
  --h2:clamp(2.1rem,1.4rem + 2.4vw,4rem);
  --h3:clamp(1.25rem,1.1rem + .5vw,1.6rem);
  --lead:clamp(1.05rem,.98rem + .35vw,1.3rem);
  --corpo:clamp(1rem,.96rem + .15vw,1.08rem);

  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--marfim);color:var(--tinta);font-family:var(--texto);font-size:var(--corpo);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg,video,iframe{max-width:100%;display:block}
a{color:inherit}
em,i{font-style:normal}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-0.025em;line-height:1.06;margin:0;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
:focus-visible{outline:3px solid var(--champanhe);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Container */
.wrap{width:var(--largura);margin-inline:auto}

/* Seções */
.sec{padding-block:var(--secao)}
.sec-branca{background:var(--branco)}
.sec-areia{background:var(--areia)}
.sec-escura{background:var(--tinta);color:var(--marfim)}
.sec-escura .lead,.sec-escura .muted{color:var(--cinza-claro)}
.sec + .sec-mesma{padding-top:0}

/* Cabeçalho de seção: sempre empilhado, título e texto juntos */
.cab{max-width:62rem;margin-bottom:clamp(36px,4vw,64px)}
.cab-centro{margin-inline:auto;text-align:center}
.cab h1{font-size:var(--h1);letter-spacing:-0.035em;line-height:1.02}
.cab h2{font-size:var(--h2);letter-spacing:-0.032em}
.cab .lead{margin-top:clamp(16px,1.6vw,24px);max-width:46rem}
.cab-centro .lead{margin-inline:auto}
.lead{font-size:var(--lead);color:var(--cinza);line-height:1.6}
.muted{color:var(--cinza)}

/* Topo de página interna */
.topo-pagina{padding-block:clamp(56px,7vw,120px) clamp(40px,5vw,80px)}
.topo-pagina .cab{margin-bottom:0}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 clamp(22px,1.8vw,30px);border-radius:999px;font-family:var(--texto);font-weight:600;font-size:clamp(15px,.9rem + .15vw,17px);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.btn-primario{background:var(--petroleo);color:var(--marfim)}
.btn-primario:hover{background:var(--tinta)}
.btn-contorno{border-color:var(--tinta);color:var(--tinta);background:transparent}
.btn-contorno:hover{background:var(--tinta);color:var(--marfim)}
.btn-claro{background:var(--marfim);color:var(--tinta)}
.btn-claro:hover{background:var(--champanhe)}
.btn-bloco{width:100%}
.acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,3vw,40px)}
.link-seta{display:inline-flex;align-items:center;gap:8px;color:var(--petroleo);font-weight:600;text-decoration:none}
.link-seta::after{content:"";width:16px;height:2px;background:var(--champanhe);transition:width .2s}
.link-seta:hover::after{width:26px}

/* Cartões */
.cartao{background:var(--branco);border:1px solid var(--areia-2);border-radius:var(--raio);padding:clamp(22px,2vw,36px);position:relative;transition:border-color .25s}
.cartao-link{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.cartao-link:hover,.cartao-hover:hover{border-color:var(--champanhe)}
.cartao h3{font-size:var(--h3);letter-spacing:-0.02em}
.cartao .muted{margin-top:10px}
.cartao-link .link-seta{margin-top:auto;padding-top:24px}
.sec-escura .cartao{background:var(--tinta-2);border-color:var(--tinta-3);color:var(--marfim)}

/* Grades */
.grade{display:grid;gap:clamp(10px,1vw,16px)}
.grade-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grade-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grade-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:center}

/* Listas */
.lista{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lista li{padding-left:26px;position:relative;line-height:1.5}
.lista li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2px solid var(--petroleo);border-bottom:2px solid var(--petroleo);transform:rotate(-45deg)}
.sec-escura .lista li::before{border-color:var(--champanhe)}
.lista-traco li::before{width:10px;height:2px;border:0;background:var(--champanhe);transform:none;top:.72em}

/* Pílulas e status */
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;background:var(--marfim);color:var(--cinza)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.dot.ok{background:var(--ok)}.dot.at{background:var(--atencao)}.dot.ri{background:var(--risco)}

/* Abas (componente único do site) */
.abas{display:flex;gap:4px;background:var(--areia);padding:5px;border-radius:999px;width:fit-content;max-width:100%;overflow-x:auto;scrollbar-width:none;margin-bottom:clamp(16px,1.6vw,24px)}
.abas::-webkit-scrollbar{display:none}
.aba{flex:0 0 auto;border:0;background:transparent;color:var(--tinta);font-family:var(--texto);font-weight:600;font-size:15px;padding:11px 18px;border-radius:999px;cursor:pointer;white-space:nowrap}
.aba[aria-selected="true"]{background:var(--branco)}
.sec-escura .abas{background:var(--tinta-2)}
.sec-escura .aba{color:var(--cinza-claro)}
.sec-escura .aba[aria-selected="true"]{background:var(--marfim);color:var(--tinta)}
/* Abas que só existem no celular */
.abas-celular{display:none}

/* Cabeçalho do site */
.topo{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(246,242,236,.94);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.topo.rolou{border-bottom-color:var(--areia-2)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:clamp(64px,5vw,84px)}
.marca{display:flex;align-items:center;text-decoration:none;flex:none}
.marca svg{height:clamp(26px,2vw,32px);width:auto}
.menu{display:flex;align-items:center;gap:clamp(18px,2vw,36px)}
.menu a{text-decoration:none;font-weight:500;font-size:clamp(15px,.85rem + .2vw,17px);color:var(--tinta);padding:8px 0;border-bottom:2px solid transparent}
.menu a:hover{color:var(--petroleo)}
.menu a[aria-current="page"]{color:var(--petroleo);border-bottom-color:var(--champanhe)}
.topo-acoes{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px)}
.topo-acoes .entrar{font-weight:600;text-decoration:none;font-size:clamp(15px,.85rem + .2vw,17px)}
.topo-acoes .btn{min-height:46px}
.abrir-menu{display:none;border:0;background:none;padding:10px;margin-right:-10px;cursor:pointer;color:var(--tinta)}
.painel-menu{display:none}

/* Rodapé */
.rodape{padding-block:clamp(56px,6vw,96px) 40px}
.rodape-grade{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.rodape .marca svg{height:28px}
.rodape .frase{margin-top:16px;color:var(--cinza);max-width:30ch;font-size:15px}
.rodape h4{font-family:var(--texto);font-size:15px;font-weight:600;letter-spacing:0}
.rodape ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;font-size:15px}
.rodape ul a{text-decoration:none;color:var(--cinza)}
.rodape ul a:hover{color:var(--tinta)}
.rodape-base{margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid var(--areia-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--cinza)}

/* Faixa de chamada final (empilhada, sem texto flutuando) */
.chamada{text-align:center}
.chamada h2{font-size:var(--h2);letter-spacing:-0.032em;max-width:22ch;margin-inline:auto}
.chamada .lead{margin:20px auto 0;max-width:40rem}
.chamada .acoes{justify-content:center}

/* Telas grandes */
@media (min-width:1800px){
  :root{--largura:min(1600px,100% - var(--lateral)*2)}
}

/* Tablet */
@media (max-width:1100px){
  .grade-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu{gap:18px}
}
@media (max-width:980px){
  .menu,.topo-acoes .entrar{display:none}
  .abrir-menu{display:block}
  .painel-menu{position:fixed;inset:0;z-index:60;background:var(--marfim);display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top,0px) + 20px) var(--lateral) calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);visibility:hidden}
  .painel-menu.aberto{transform:none;visibility:visible}
  /* Com o blur ligado, o .topo vira a referência do position:fixed e o painel fica preso à altura do cabeçalho */
  body.menu-aberto .topo{backdrop-filter:none;-webkit-backdrop-filter:none}
  .painel-menu .linha-topo{display:flex;justify-content:space-between;align-items:center;height:48px}
  .painel-menu nav{display:grid;margin-top:32px}
  .painel-menu nav a{font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-0.02em;text-decoration:none;padding:14px 0;border-bottom:1px solid var(--areia-2)}
  .painel-menu nav a[aria-current="page"]{color:var(--petroleo)}
  .painel-menu .rodape-menu{margin-top:auto;display:grid;gap:12px}
  .dupla{grid-template-columns:1fr;gap:clamp(36px,6vw,56px)}
  .grade-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rodape-grade{grid-template-columns:1fr 1fr}
  .rodape-grade > div:first-child{grid-column:1/-1}
}
/* Celular */
@media (max-width:760px){
  .grade-2,.grade-3,.grade-4{grid-template-columns:1fr}
  .abas-celular{display:flex}
  [data-painel-celular][hidden]{display:none!important}
  .acoes .btn{flex:1 1 auto}
  .topo-acoes .btn{display:none}
}
@media (max-width:420px){
  .rodape-grade{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ===== Camada de cor da marca ===== */
.sec-petroleo{background:var(--petroleo);color:var(--marfim)}
.sec-petroleo .lead,.sec-petroleo .muted{color:#D6E6E2}
.sec-menta{background:var(--petroleo-claro)}
/* Traço da marca acima dos títulos de seção (a linha do logo) */
.cab::before{content:"";display:block;width:52px;height:4px;border-radius:4px;background:var(--champanhe);margin-bottom:clamp(18px,1.6vw,26px)}
.cab-centro::before{margin-inline:auto}
.cab-sem-traco::before{display:none}
/* Palavra em destaque com a linha champanhe */
.destaque{background-image:linear-gradient(var(--champanhe),var(--champanhe));background-size:100% .12em;background-repeat:no-repeat;background-position:0 92%;padding-bottom:.04em}
/* Topo das páginas internas: escuro, com brilho petróleo */
.topo-pagina{background:radial-gradient(120% 140% at 85% 0%,rgba(45,106,106,.55) 0%,rgba(20,28,46,0) 55%),var(--tinta);color:var(--marfim)}
.topo-pagina .lead{color:var(--cinza-claro)}
.topo-pagina + .sec[style*="padding-top:0"]{padding-top:clamp(40px,4vw,72px)!important}
/* Ícones em círculo */
.icone{width:52px;height:52px;border-radius:16px;background:var(--petroleo-claro);color:var(--petroleo);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex:none}
.icone svg{width:26px;height:26px}
.sec-escura .icone,.sec-petroleo .icone{background:rgba(246,242,236,.12);color:var(--champanhe)}
/* Cartões com faixa de cor no topo */
.cartao-cor{overflow:hidden}
.cartao-cor::after{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--cor,var(--champanhe))}