/* ==========================================================
   Reinserindo Vidas — MODELO B (completo / institucional)
   Mesma marca do modelo A, arquitetura visual diferente:
   grid institucional, mais densidade, petróleo estrutural.
   Tema único e explícito.
   ========================================================== */

:root{
  --petroleo:      #00404F;
  --petroleo-esc:  #012933;
  --petroleo-nt:   #01202A;
  --petroleo-cl:   #0A5A6C;
  --dourado:       #C2953F;
  --dourado-cl:    #E2C079;
  --dourado-esc:   #8F6F1E;
  --dourado-bg:    #F7EFDD;
  --verde:         #4F7A43;
  --verde-cl:      #7FB069;
  --salvia:        #EAEEE0;
  --branco:        #FFFFFF;
  --nevoa:         #F4F6F2;
  --tinta:         #121E24;
  --tinta-md:      #3C4C55;
  --tinta-cl:      #67767E;
  --linha:         #DDE2D6;
  --linha-esc:     #C7CFC0;

  --serif: "Literata", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1220px;
  --r: 3px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --sombra-sm: 0 1px 2px rgba(1,32,42,.05), 0 3px 10px -5px rgba(1,32,42,.12);
  --sombra:    0 2px 4px rgba(1,32,42,.06), 0 12px 30px -16px rgba(1,32,42,.26);
  --sombra-lg: 0 4px 8px rgba(1,32,42,.08), 0 28px 58px -26px rgba(1,32,42,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body{
  margin:0; background:var(--branco); color:var(--tinta);
  font-family:var(--sans); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--dourado);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0;text-wrap:balance;letter-spacing:-.014em}
h1{font-size:clamp(2rem,4.4vw,3.15rem);font-weight:700}
h2{font-size:clamp(1.65rem,3.1vw,2.35rem)}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem)}
p{margin:0}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}
.secao{padding:clamp(34px,4.5vw,58px) 0}
.secao--nevoa{background:var(--nevoa)}
.secao--salvia{background:var(--salvia)}
.secao--petroleo{background:var(--petroleo-esc);color:#DCE7EA}
.secao--petroleo h2,.secao--petroleo h3,.secao--petroleo h4{color:#fff}

/* ---------- cabeçalho de seção ---------- */
.rotulo{
  display:inline-flex;align-items:center;gap:11px;
  font-size:.74rem;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--dourado-esc);margin-bottom:16px;
}
.rotulo::before{content:"";width:26px;height:2px;background:var(--dourado);flex:none}
.secao--petroleo .rotulo{color:var(--dourado-cl)}
.secao--petroleo .rotulo::before{background:var(--dourado-cl)}
.cab{max-width:44rem}
.cab p{margin-top:16px;font-size:1.06rem;color:var(--tinta-md)}
.secao--petroleo .cab p{color:#AEC3C9}
.cab--centro{margin-left:auto;margin-right:auto;text-align:center}
.cab--centro .rotulo::before{display:none}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border-radius:var(--r);font-weight:700;font-size:1rem;
  transition:transform .18s var(--ease),background-color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn svg{flex:none}
.btn--zap{background:var(--verde);color:#fff;box-shadow:var(--sombra)}
.btn--zap:hover{background:#436A38;transform:translateY(-2px)}
.btn--ouro{background:var(--dourado);color:#2A1F07}
.btn--ouro:hover{background:var(--dourado-cl);transform:translateY(-2px)}
.btn--linha{border:2px solid rgba(255,255,255,.45);color:#fff}
.btn--linha:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--escuro{border:2px solid var(--petroleo);color:var(--petroleo)}
.btn--escuro:hover{background:var(--petroleo);color:#fff}

/* ---------- topo ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linha);padding:10px 0}
.topo .container{display:flex;align-items:center;gap:22px}
.marca{display:flex;align-items:center;gap:13px;margin-right:auto}
.marca__mk{width:auto;height:50px;flex:none;display:block}
.marca__nome{width:auto;height:36px;flex:none;display:block}
.marca__nome--branca{display:none}
.rodape .marca__nome--cor{display:none}
.rodape .marca__nome--branca{display:block}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font-size:.92rem;font-weight:600;color:var(--tinta-md);padding:4px 0;border-bottom:2px solid transparent;transition:.2s var(--ease)}
.nav a:hover{color:var(--tinta);border-color:var(--dourado)}
.topo-zap{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#fff;padding:11px 19px;border-radius:var(--r);font-weight:700;font-size:.92rem}
.topo-zap:hover{background:#436A38}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--tinta)}
.menu-btn span{display:block;width:24px;height:2px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;width:24px;height:2px;background:currentColor}
.menu-btn span::before{top:-7px}.menu-btn span::after{top:7px}

/* ---------- hero dividido ---------- */
.hero{background:var(--petroleo-esc)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;min-height:min(88vh,760px)}
.hero__txt{display:flex;flex-direction:column;justify-content:center;padding:148px 56px 70px 0;color:#fff}
.hero__tag{
  display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dourado-cl);border:1px solid rgba(226,192,121,.42);
  border-radius:100px;padding:7px 17px;margin-bottom:24px;
}
.hero h1{color:#fff}
.hero h1 em{font-style:normal;color:var(--dourado-cl)}
.hero__sub{margin-top:20px;font-size:1.12rem;color:#B9CBD0;max-width:33rem}
.hero__acoes{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}
.hero__nota{margin-top:20px;font-size:.9rem;color:#8FA9B0;display:flex;align-items:center;gap:9px}
.hero__nota svg{flex:none;color:var(--dourado-cl)}
.hero__foto{position:relative;margin-right:calc(50% - 50vw)}
.hero__foto img{width:100%;height:100%;object-fit:cover;min-height:340px}
.hero__foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,41,51,.55),transparent 32%)}

/* ---------- faixa de destaques ---------- */
.destaques{background:var(--petroleo);color:#fff}
.destaques ul{display:grid;grid-template-columns:repeat(4,1fr)}
.destaques li{display:flex;align-items:center;gap:12px;padding:22px 20px;border-right:1px solid rgba(255,255,255,.13);font-size:.94rem;font-weight:600;line-height:1.34}
.destaques li:last-child{border-right:0}
.destaques svg{flex:none;color:var(--dourado-cl)}

/* ---------- grade genérica de cartões ---------- */
.grade{display:grid;gap:16px;margin-top:28px}
.g-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
@media (min-width:900px){ .g-3{grid-template-columns:repeat(3,1fr)} }

.cartao{background:var(--branco);border:1px solid var(--linha);border-radius:var(--r);padding:28px 26px 30px;box-shadow:var(--sombra-sm)}
.secao--nevoa .cartao,.secao--salvia .cartao{background:var(--branco)}
.cartao__ic{width:44px;height:44px;border-radius:50%;background:var(--dourado-bg);color:var(--dourado-esc);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.cartao h3{margin-bottom:9px}
.cartao p{font-size:.96rem;color:var(--tinta-md)}
.cartao ul{margin-top:12px}
.cartao li{font-size:.94rem;color:var(--tinta-md);padding-left:20px;position:relative;margin-bottom:7px}
.cartao li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--dourado)}

/* cartão sobre petróleo */
.secao--petroleo .cartao{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13);box-shadow:none}
.secao--petroleo .cartao p,.secao--petroleo .cartao li{color:#B9CBD0}
.secao--petroleo .cartao__ic{background:rgba(226,192,121,.14);color:var(--dourado-cl)}

/* ---------- modalidades (lista numerada institucional) ---------- */
.modal{display:grid;gap:0;margin-top:30px;border-top:1px solid var(--linha)}
.modal__item{display:grid;grid-template-columns:auto 1fr;gap:26px;padding:30px 0;border-bottom:1px solid var(--linha)}
.modal__n{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--dourado-esc);padding-top:3px;min-width:88px;letter-spacing:.06em;text-transform:uppercase}
.modal__c h3{margin-bottom:10px}
.modal__c p{color:var(--tinta-md);font-size:1rem;max-width:52rem}
.modal__c p + p{margin-top:10px}
.aviso-lei{
  margin-top:22px;padding:20px 24px;background:var(--dourado-bg);border-left:3px solid var(--dourado);
  border-radius:0 var(--r) var(--r) 0;font-size:.95rem;color:#5A4413;
}

/* ---------- etapas ---------- */
.etapas{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:28px;margin-top:32px;counter-reset:e}
.etapa{counter-increment:e;position:relative;padding-top:28px;border-top:2px solid rgba(226,192,121,.4)}
.etapa::before{
  content:counter(e,decimal-leading-zero);position:absolute;top:-14px;left:0;
  background:var(--petroleo-esc);color:var(--dourado-cl);font-family:var(--serif);font-weight:700;
  font-size:.86rem;padding:2px 10px 3px;border:1px solid rgba(226,192,121,.42);
}
.etapa h3{margin-bottom:9px}
.etapa p{font-size:.95rem;color:#B9CBD0}

/* ---------- rotina (tabela de horários) ---------- */
.rotina{margin-top:28px;border:1px solid var(--linha);border-radius:var(--r);overflow:hidden;background:var(--branco)}
.rotina__l{display:grid;grid-template-columns:132px 1fr;border-bottom:1px solid var(--linha)}
.rotina__l:last-child{border-bottom:0}
.rotina__h{padding:16px 22px;font-family:var(--serif);font-weight:700;color:var(--dourado-esc);border-right:1px solid var(--linha);background:var(--nevoa);font-variant-numeric:tabular-nums}
.rotina__d{padding:16px 22px;color:var(--tinta-md);font-size:.98rem}

/* ---------- galeria ---------- */
.galeria{display:grid;gap:10px;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;margin-top:30px}
.galeria figure{margin:0;position:relative;overflow:hidden;border-radius:var(--r);background:var(--linha);cursor:zoom-in}
.galeria img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .55s var(--ease)}
.galeria figure:hover img{transform:scale(1.05)}
.galeria figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(1,32,42,.55));opacity:0;transition:opacity .3s var(--ease)}
.galeria figure:hover::after{opacity:1}
.galeria figcaption{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;color:#fff;font-size:.83rem;font-weight:600;opacity:0;transform:translateY(6px);transition:.3s var(--ease)}
.galeria figure:hover figcaption{opacity:1;transform:none}
.galeria .g-big{grid-column:span 2;grid-row:span 2}
.galeria .g-big img{aspect-ratio:1/1}
.galeria .g-wide{grid-column:span 2}
.galeria .g-wide img{aspect-ratio:16/9}
.gal-nota{margin-top:24px;font-size:.9rem;color:var(--tinta-cl);max-width:54rem}

.lb{position:fixed;inset:0;z-index:100;background:rgba(1,18,24,.95);display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;visibility:hidden;transition:opacity .28s var(--ease),visibility .28s}
.lb.aberto{opacity:1;visibility:visible}
.lb img{max-width:100%;max-height:84vh;border-radius:var(--r);box-shadow:var(--sombra-lg)}
.lb__cap{position:absolute;left:0;right:0;bottom:26px;text-align:center;color:#CBDADD;font-size:.94rem;padding:0 60px}
.lb__x,.lb__nav{position:absolute;color:#fff;width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.09)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.22)}
.lb__x{top:22px;right:22px;font-size:1.7rem;line-height:1}
.lb__nav{top:50%;transform:translateY(-50%);font-size:1.9rem;line-height:1}
.lb__nav.ant{left:20px}.lb__nav.prox{right:20px}

/* ---------- faq ---------- */
.faq{margin-top:28px;max-width:54rem}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{list-style:none;cursor:pointer;padding:23px 44px 23px 0;position:relative;font-family:var(--serif);font-size:1.08rem;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--dourado);border-bottom:2px solid var(--dourado);transform:rotate(45deg);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq .resp{padding:0 20px 24px 0;color:var(--tinta-md);font-size:1rem}
.faq .resp p + p{margin-top:11px}

/* ---------- cta ---------- */
.cta{background:var(--petroleo-esc);color:#fff;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:620px;height:620px;right:-190px;top:-250px;border-radius:50%;background:radial-gradient(circle,rgba(194,149,63,.2),transparent 68%)}
.cta .container{position:relative;z-index:1;text-align:center}
.cta h2{color:#fff;max-width:24ch;margin:0 auto}
.cta p{margin-top:20px;color:#B9CBD0;font-size:1.08rem;max-width:42rem;margin-left:auto;margin-right:auto}
.cta__acoes{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.cta__contatos{margin-top:38px;padding-top:30px;border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;gap:36px;justify-content:center;font-size:.97rem}
.cta__contatos div{display:flex;align-items:center;gap:11px;color:#CBDADD}
.cta__contatos svg{color:var(--dourado-cl);flex:none}
.cta__contatos a:hover{color:#fff;text-decoration:underline}

/* ---------- rodapé ---------- */
.rodape{background:var(--petroleo-nt);color:#8FA6AD;padding:56px 0 28px;font-size:.91rem}
.rodape__grid{display:grid;gap:36px;grid-template-columns:1.4fr 1fr 1fr;align-items:start}
.rodape .marca{margin:0 0 14px}
.rodape .marca__mk{height:54px}
.rodape .marca__nome{height:38px}
.rodape h4{color:#fff;font-family:var(--sans);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.rodape li{margin-bottom:9px}
.rodape a:hover{color:#fff}
.rodape__aviso{margin-top:22px;font-size:.82rem;color:#6F868D;max-width:62rem;line-height:1.6}
.rodape__fim{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.84rem;color:#6F868D}

/* ---------- barra fixa mobile ---------- */
.barra-mob{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:var(--branco);border-top:1px solid var(--linha);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -6px 20px -12px rgba(1,32,42,.4)}
.barra-mob .btn{flex:1;padding:14px 12px;font-size:.96rem}

/* ---------- revelação ---------- */
.rev{opacity:0;transform:translateY(20px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rev.vis{opacity:1;transform:none}

/* ---------- páginas de texto ---------- */
.doc{padding:140px 0 84px;max-width:47rem}
.doc h1{margin-bottom:10px}
.doc .atualizado{color:var(--tinta-cl);font-size:.9rem;margin-bottom:42px}
.doc h2{font-size:1.4rem;margin:42px 0 13px}
.doc p,.doc li{color:var(--tinta-md);margin-bottom:13px}
.doc ul{list-style:disc;padding-left:22px;margin-bottom:19px}
.doc li{margin-bottom:8px}
.doc a{color:var(--petroleo-cl);text-decoration:underline}
.doc__voltar{display:inline-flex;align-items:center;gap:8px;margin-top:38px;font-weight:700;color:var(--petroleo)}

/* ---------- responsivo ---------- */
@media (max-width:1024px){
  .hero__grid{grid-template-columns:1fr}
  .hero__txt{padding:104px 0 46px}
  .hero__foto{margin:0 calc(50% - 50vw);height:340px}
  .hero__foto::after{background:linear-gradient(180deg,rgba(1,41,51,.5),transparent 40%)}
  .galeria{grid-template-columns:repeat(3,1fr)}
  .destaques ul{grid-template-columns:repeat(2,1fr)}
  .destaques li:nth-child(2){border-right:0}
  .destaques li:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.13)}
  .rodape__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  body{font-size:16px;padding-bottom:76px}
  html{scroll-padding-top:74px}
  .nav,.topo-zap{display:none}
  .menu-btn{display:flex}
  .topo.menu-on .nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--branco);padding:8px 24px 18px;border-top:1px solid var(--linha);box-shadow:var(--sombra)}
  .topo.menu-on .nav a{padding:14px 0;border-bottom:1px solid var(--linha);width:100%}
  .hero__acoes .btn{width:100%}
  .modal__item{grid-template-columns:1fr;gap:10px}
  .modal__n{min-width:0}
  .rotina__l{grid-template-columns:1fr}
  .rotina__h{border-right:0;border-bottom:1px solid var(--linha);padding-bottom:8px}
  .rotina__d{padding-top:10px}
  .galeria{grid-template-columns:repeat(2,1fr);gap:8px}
  .galeria .g-big,.galeria .g-wide{grid-column:span 2;grid-row:auto}
  .galeria .g-big img,.galeria .g-wide img{aspect-ratio:16/10}
  .galeria figcaption{opacity:1;transform:none;font-size:.76rem;text-shadow:0 1px 8px rgba(1,32,42,.9)}
  .galeria figure::after{opacity:.85}
  .cta__contatos{flex-direction:column;gap:17px}
  .rodape__grid{grid-template-columns:1fr}
  .barra-mob{display:flex}
  .lb__nav{width:44px;height:44px}
  .lb__nav.ant{left:6px}.lb__nav.prox{right:6px}
}
@media (max-width:430px){
  .destaques ul{grid-template-columns:1fr}
  .destaques li{border-right:0;border-bottom:1px solid rgba(255,255,255,.13)}
  .destaques li:last-child{border-bottom:0}
  .marca{gap:9px}
  .marca__mk{height:42px}
  .marca__nome{height:30px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .rev{opacity:1;transform:none}
}
@media print{
  .topo,.barra-mob,.lb,.hero__acoes,.cta__acoes{display:none !important}
  body{background:#fff;color:#000;padding:0}
}

/* ==========================================================
   Texto justificado no celular.
   Justificar em coluna estreita abre "rios" de espaço entre
   as palavras — por isso vem sempre com hyphens:auto, que
   depende do lang="pt-BR" no <html> (já está lá).
   Só corpo de texto: título, botão, rótulo, menu e a tabela
   de rotina ficam de fora.
   ========================================================== */
@media (max-width:820px){
  .hero__sub,
  .cab p,
  .cartao p,
  .cartao li,
  .modal__c p,
  .aviso-lei,
  .etapa p,
  .faq .resp,
  .faq .resp p,
  .gal-nota,
  .cta p,
  .rodape__aviso,
  .doc p,
  .doc li{
    text-align:justify;
    text-justify:inter-word;
    hyphens:auto;
    -webkit-hyphens:auto;
    overflow-wrap:anywhere;   /* deixa quebrar e-mail/URL longo: sem isso o justificado abre um vao enorme na linha anterior */
  }
}
@media (max-width:820px){
  /* link longo (e-mail/URL) dentro de texto justificado: sem quebrar,
     ele empurra a linha anterior e abre um vao gigante */
  .doc p a, .doc li a, .rodape__aviso a, .faq .resp a, .cta p a{
    word-break:break-all;
  }
}

/* linha dos pilares no rodape, no mesmo espirito do logo */
.rodape__pilares{
  font-size:.8rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dourado); line-height:1.7;
}

/* ==========================================================
   Botao flutuante do WhatsApp.
   No celular ele fica escondido: a barra fixa de baixo ja
   cobre a mesma funcao, com alvo maior e o botao de ligar.
   ========================================================== */
.zap-flutua{
  position:fixed; right:22px; bottom:22px; z-index:65;
  width:60px; height:60px; border-radius:50%;
  background:var(--verde); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px -4px rgba(1,41,51,.45), 0 2px 6px rgba(1,41,51,.28);
  transition:transform .2s var(--ease), background-color .2s var(--ease);
}
.zap-flutua:hover{background:#456C3A; transform:scale(1.07)}
.zap-flutua svg{width:33px; height:33px}
.zap-flutua::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:var(--verde); z-index:-1;
  animation:zapPulso 2.6s var(--ease) infinite;
}
@keyframes zapPulso{
  0%{transform:scale(1); opacity:.5}
  70%{transform:scale(1.65); opacity:0}
  100%{transform:scale(1.65); opacity:0}
}
@media (max-width:820px){
  .zap-flutua{display:none}
}