/* =====================================================================
   FORTLAB — Laboratório de Análises Clínicas
   =====================================================================
   Cores tiradas da própria logo, pixel a pixel:

     #009BB1  turquesa — o círculo e a palavra FORTLAB
     #00B170  verde    — o frasco e "Laboratório de Análises Clínicas"
     #C4ED8A  lima     — o líquido dentro do frasco

   A estrutura vem dos dois mockups: cartões arredondados sobre fundo
   claro, muito respiro, etiquetas em lima, herói dividido entre texto e
   imagem. Do segundo mockup vem o degradê do topo e o bloco de números.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&display=swap');

:root{
  --turquesa:     #009BB1;
  --turquesa-esc: #00798A;
  --turquesa-luz: #E3F5F8;
  --verde:        #00B170;
  --verde-esc:    #00915C;
  --verde-luz:    #E4F7EE;
  --lima:         #C4ED8A;
  --lima-esc:     #A8DC5F;
  --lima-luz:     #F2FBE4;

  --fundo:        #F6FAFB;
  --superficie:   #FFFFFF;
  --superficie-2: #FBFDFD;
  --linha:        #E2ECEF;
  --linha-2:      #F0F6F7;

  --texto:        #0B2A46;
  --texto-2:      #4A6274;
  --texto-3:      #8AA0AE;

  --erro:   #D93025;  --erro-luz:  #FDECEA;
  --ok:     #00915C;

  --sombra:   0 1px 2px rgba(11,42,70,.05), 0 6px 20px rgba(11,42,70,.06);
  --sombra-2: 0 4px 12px rgba(11,42,70,.09), 0 16px 40px rgba(11,42,70,.10);
  --raio:   18px;
  --raio-2: 12px;
  --raio-3: 999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; scroll-padding-top:96px;}
body{
  font:16px/1.65 Figtree,'Segoe UI',system-ui,sans-serif;
  background:var(--fundo); color:var(--texto);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:var(--turquesa-esc); text-decoration:none;}
a:hover{text-decoration:underline;}
:focus-visible{outline:none; box-shadow:0 0 0 3px var(--turquesa-luz), 0 0 0 1px var(--turquesa);
  border-radius:8px;}

.env{max-width:74rem; margin:0 auto; padding:0 22px;}

/* ── Topo ─────────────────────────────────────────────────────────── */
.topo{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--linha);
}
.topo .env{display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:84px;}
.topo .logo img{height:54px; width:auto;}
.topo nav{display:flex; gap:4px; align-items:center;}
.topo nav a{
  padding:8px 13px; border-radius:var(--raio-3); font-size:.9rem; font-weight:500;
  color:var(--texto-2); transition:background .15s, color .15s;
}
.topo nav a:hover{background:var(--turquesa-luz); color:var(--turquesa-esc); text-decoration:none;}
.menu-btn{display:none; background:none; border:1px solid var(--linha); border-radius:10px;
  width:42px; height:42px; font-size:20px; color:var(--texto); cursor:pointer;}
@media(max-width:900px){
  .topo nav{display:none; position:absolute; top:84px; left:0; right:0;
    background:var(--superficie); border-bottom:1px solid var(--linha);
    flex-direction:column; align-items:stretch; padding:10px 16px 16px;
    box-shadow:var(--sombra-2);}
  .topo nav.aberto{display:flex;}
  .topo nav a{padding:12px 14px;}
  .menu-btn{display:block;}
}

/* ── Botões ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; border-radius:var(--raio-3); padding:12px 24px;
  font:inherit; font-size:.94rem; font-weight:600; cursor:pointer;
  background:var(--turquesa); color:#fff; white-space:nowrap;
  transition:background .15s, transform .1s, box-shadow .15s;
}
.btn:hover{background:var(--turquesa-esc); text-decoration:none; box-shadow:var(--sombra);}
.btn:active{transform:translateY(1px);}
.btn.verde{background:var(--verde);} .btn.verde:hover{background:var(--verde-esc);}
.btn.clara{background:var(--superficie); color:var(--texto); border:1px solid var(--linha);}
.btn.clara:hover{background:var(--turquesa-luz); border-color:var(--turquesa); color:var(--turquesa-esc);}
.btn.lima{background:var(--lima); color:var(--texto);} .btn.lima:hover{background:var(--lima-esc);}
.btn.pequeno{padding:9px 17px; font-size:.87rem;}

/* ── Etiqueta ─────────────────────────────────────────────────────── */
.etiq{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--lima-luz); color:var(--verde-esc);
  border-radius:var(--raio-3); padding:5px 14px;
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}
.etiq.turq{background:var(--turquesa-luz); color:var(--turquesa-esc);}

/* ── Seção ────────────────────────────────────────────────────────── */
section{padding:76px 0;}
section.claro{background:var(--superficie);}
.sec-cab{max-width:44rem; margin-bottom:38px;}
.sec-cab.centro{margin-left:auto; margin-right:auto; text-align:center;}
.sec-cab h2{font-size:2.05rem; font-weight:700; line-height:1.2; letter-spacing:-.02em;
  margin:14px 0 10px;}
.sec-cab p{font-size:1.02rem; color:var(--texto-2);}
@media(max-width:700px){ .sec-cab h2{font-size:1.6rem;} section{padding:52px 0;} }

/* ── Herói ────────────────────────────────────────────────────────── */
.heroi{
  background:linear-gradient(135deg, var(--turquesa-luz) 0%, var(--lima-luz) 100%);
  padding:66px 0 76px; position:relative; overflow:hidden;
}
.heroi::after{
  content:''; position:absolute; right:-140px; top:-140px;
  width:460px; height:460px; border-radius:50%;
  background:rgba(0,177,112,.07);
}
.heroi .grade{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;
  position:relative; z-index:1;}
.heroi h1{font-size:2.9rem; font-weight:800; line-height:1.13; letter-spacing:-.03em;
  margin:16px 0 18px;}
.heroi h1 em{font-style:normal; color:var(--turquesa-esc);}
.heroi p.sub{font-size:1.1rem; color:var(--texto-2); max-width:34rem;}
.heroi .acoes{display:flex; gap:12px; margin-top:26px; flex-wrap:wrap;}
.heroi figure{border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra-2);}
@media(max-width:900px){
  .heroi .grade{grid-template-columns:1fr; gap:32px;}
  .heroi h1{font-size:2.1rem;}
  .heroi figure{display:none;}
}

/* ── Busca ────────────────────────────────────────────────────────── */
.busca{
  background:var(--superficie); border-radius:var(--raio);
  box-shadow:var(--sombra-2); padding:9px; display:flex; gap:8px; margin-top:30px;
}
.busca input{
  flex:1; border:none; outline:none; padding:14px 18px; font:inherit; font-size:1rem;
  background:transparent; color:var(--texto); min-width:0;
}
.busca input::placeholder{color:var(--texto-3);}
.atalhos{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.atalhos button{
  background:rgba(255,255,255,.7); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:6px 14px; font:inherit; font-size:.83rem; color:var(--texto-2); cursor:pointer;
  transition:.15s;
}
.atalhos button:hover{background:#fff; border-color:var(--turquesa); color:var(--turquesa-esc);}

/* ── Resultado da busca ───────────────────────────────────────────── */
.exames{display:grid; gap:14px;}
.exame{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio-2);
  padding:18px 20px; box-shadow:var(--sombra); transition:border-color .15s, transform .1s;
}
.exame:hover{border-color:var(--turquesa);}
.exame h3{font-size:1.02rem; font-weight:700; margin-bottom:4px;}
.exame .sin{font-size:.83rem; color:var(--texto-3); margin-bottom:10px;}
.exame p{font-size:.9rem; color:var(--texto-2);}
.exame .dados{display:flex; gap:9px; flex-wrap:wrap; margin-top:13px;}
.dado{
  display:inline-flex; align-items:center; gap:6px; background:var(--superficie-2);
  border:1px solid var(--linha); border-radius:var(--raio-3); padding:4px 12px;
  font-size:.79rem; color:var(--texto-2);
}
.dado b{color:var(--texto); font-weight:600;}
.dado.jejum{background:var(--lima-luz); border-color:var(--lima); color:var(--verde-esc);}

/* ── Check-ups ────────────────────────────────────────────────────── */
.checkups{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));}
.checkup{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:26px; box-shadow:var(--sombra); display:flex; flex-direction:column;
  position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s, border-color .15s;
}
.checkup:hover{transform:translateY(-3px); box-shadow:var(--sombra-2); border-color:var(--turquesa);}
.checkup.destaque{border-color:var(--verde); border-width:2px;}
.checkup .fita{
  position:absolute; top:18px; right:-34px; transform:rotate(38deg);
  background:var(--verde); color:#fff; font-size:.7rem; font-weight:700;
  padding:5px 42px; letter-spacing:.04em;
}
.checkup h3{font-size:1.18rem; font-weight:700; margin:12px 0 8px; padding-right:30px;}
.checkup .desc{font-size:.91rem; color:var(--texto-2); margin-bottom:16px;}
.checkup ul{list-style:none; margin-bottom:18px; font-size:.88rem; color:var(--texto-2);}
.checkup ul li{padding:4px 0 4px 22px; position:relative;}
.checkup ul li::before{
  content:'✓'; position:absolute; left:0; color:var(--verde); font-weight:700;
}
.checkup ul li.mais{color:var(--texto-3); font-style:italic;}
.checkup ul li.mais::before{content:'+'; color:var(--texto-3);}
.checkup .preco{margin-top:auto; padding-top:16px; border-top:1px solid var(--linha-2);}
.checkup .preco .valor{font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:var(--texto);}
.checkup .preco .antes{font-size:.9rem; color:var(--texto-3); text-decoration:line-through; margin-right:8px;}
.checkup .preco .obs{font-size:.76rem; color:var(--texto-3); margin-top:3px;}
.checkup .btn{width:100%; margin-top:14px;}

/* ── Números ──────────────────────────────────────────────────────── */
.numeros{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));}
.numero{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:26px 22px; text-align:center; box-shadow:var(--sombra);
}
.numero.forte{background:linear-gradient(135deg,var(--turquesa),var(--verde)); border:none;}
.numero.forte .v, .numero.forte .r{color:#fff;}
.numero .v{font-size:2.2rem; font-weight:800; letter-spacing:-.03em; line-height:1;}
.numero .r{font-size:.85rem; color:var(--texto-2); margin-top:8px;}

/* ── Unidade ──────────────────────────────────────────────────────── */
.unidade{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:start;}
@media(max-width:850px){ .unidade{grid-template-columns:1fr;} }
.unidade .linhas{display:grid; gap:16px;}
.linha-info{display:flex; gap:14px; align-items:flex-start;}
.linha-info .ic{
  width:42px; height:42px; border-radius:12px; flex-shrink:0; display:grid; place-items:center;
  background:var(--turquesa-luz); color:var(--turquesa-esc); font-size:18px;
}
.linha-info .r{font-size:.78rem; font-weight:700; color:var(--texto-3);
  text-transform:uppercase; letter-spacing:.06em;}
.linha-info .v{font-size:.98rem; margin-top:2px;}
.mapa{border-radius:var(--raio); overflow:hidden; box-shadow:var(--sombra); min-height:320px;
  background:var(--linha-2); border:1px solid var(--linha);}
.mapa iframe{width:100%; height:100%; min-height:320px; border:0; display:block;}

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq{max-width:52rem; margin:0 auto;}
.faq details{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio-2);
  margin-bottom:11px; overflow:hidden; transition:border-color .15s;
}
.faq details[open]{border-color:var(--turquesa);}
.faq summary{
  padding:17px 22px; font-weight:600; font-size:.98rem; cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; color:var(--turquesa); font-size:1.4rem; font-weight:400;
  flex-shrink:0; transition:transform .2s;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .resp{padding:0 22px 20px; font-size:.94rem; color:var(--texto-2);}
.faq-cats{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:26px;}
.faq-cats button{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:7px 17px; font:inherit; font-size:.86rem; color:var(--texto-2); cursor:pointer;
}
.faq-cats button.on{background:var(--turquesa); border-color:var(--turquesa); color:#fff; font-weight:600;}

/* ── Blog ─────────────────────────────────────────────────────────── */
.posts{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));}
.post{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--sombra); display:flex; flex-direction:column;
  transition:transform .15s, box-shadow .15s;
}
.post:hover{transform:translateY(-3px); box-shadow:var(--sombra-2);}
.post .capa{aspect-ratio:16/10; background:var(--lima-luz); position:relative; overflow:hidden;}
.post .capa img{width:100%; height:100%; object-fit:cover;}
.post .corpo{padding:20px; display:flex; flex-direction:column; flex:1;}
.post h3{font-size:1.04rem; font-weight:700; line-height:1.35; margin:10px 0 8px;}
.post p{font-size:.9rem; color:var(--texto-2); flex:1;}
.post .rodape{margin-top:14px; padding-top:12px; border-top:1px solid var(--linha-2);
  font-size:.78rem; color:var(--texto-3); display:flex; justify-content:space-between; gap:10px;}
.post .primeiro{grid-column:span 2;}
@media(max-width:800px){ .post .primeiro{grid-column:span 1;} }

/* ── Contato ──────────────────────────────────────────────────────── */
.contato{display:grid; grid-template-columns:1fr 1fr; gap:38px;}
@media(max-width:850px){ .contato{grid-template-columns:1fr;} }
.form{display:grid; gap:15px;}
.form label{display:block; font-size:.82rem; font-weight:600; color:var(--texto-2); margin-bottom:5px;}
.form input, .form textarea, .form select{
  width:100%; border:1px solid var(--linha); border-radius:var(--raio-2);
  padding:12px 15px; font:inherit; font-size:.95rem; background:var(--superficie); color:var(--texto);
  transition:border-color .15s, box-shadow .15s;
}
.form input:focus, .form textarea:focus, .form select:focus{
  outline:none; border-color:var(--turquesa); box-shadow:0 0 0 3.5px var(--turquesa-luz);
}
.form textarea{resize:vertical; min-height:130px;}
.form .dupla{display:grid; grid-template-columns:1fr 1fr; gap:15px;}
@media(max-width:560px){ .form .dupla{grid-template-columns:1fr;} }
/* Campo-armadilha: fora da tela e fora da ordem de tabulação. Pessoa
   nenhuma preenche; robô preenche tudo que encontra. */
.armadilha{position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden;}

.recado{padding:13px 17px; border-radius:var(--raio-2); font-size:.9rem; border-left:3px solid;}
.recado.ok{background:var(--verde-luz); border-color:var(--verde); color:var(--verde-esc);}
.recado.ruim{background:var(--erro-luz); border-color:var(--erro); color:var(--erro);}

/* ── Rodapé ───────────────────────────────────────────────────────── */
.rodape{background:var(--texto); color:#C4D6E2; padding:56px 0 26px; font-size:.9rem;}
.rodape .grade{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; margin-bottom:38px;}
@media(max-width:750px){ .rodape .grade{grid-template-columns:1fr; gap:28px;} }
.rodape img{height:58px; margin-bottom:18px;}
.rodape h4{color:#fff; font-size:.82rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:14px;}
.rodape a{color:#C4D6E2; display:block; padding:4px 0;}
.rodape a:hover{color:var(--lima); text-decoration:none;}
.rodape .fim{border-top:1px solid rgba(255,255,255,.12); padding-top:22px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:#8AA0AE;}

/* ── Utilidades ───────────────────────────────────────────────────── */
.vazio{padding:44px; text-align:center; color:var(--texto-3);}
.carregando{padding:34px; text-align:center; color:var(--texto-3); font-size:.9rem;}
.flutua{
  position:fixed; right:20px; bottom:20px; z-index:60;
  width:58px; height:58px; border-radius:50%; background:var(--verde); color:#fff;
  display:grid; place-items:center; font-size:27px; box-shadow:var(--sombra-2);
  transition:transform .15s;
}
.flutua:hover{transform:scale(1.07); text-decoration:none;}

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

/* =====================================================================
   CARROSSEL
   =====================================================================
   Rolagem horizontal nativa com `scroll-snap`, e as setas apenas
   empurrando essa rolagem.

   Feito assim de propósito: o dedo no celular, o trackpad no Mac e a
   roda do mouse continuam funcionando sozinhos, porque quem rola é o
   navegador. Carrossel montado com `transform` e índice em JavaScript
   quebra os três — e é sempre o toque no celular que sai pior.
   ===================================================================== */
.carrossel{position:relative;}
.trilho{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; padding:6px 2px 18px;
  /* Espaço para a sombra do cartão não ser cortada na borda. */
  margin:0 -2px;
  scrollbar-width:thin; scrollbar-color:var(--linha) transparent;
}
.trilho::-webkit-scrollbar{height:7px;}
.trilho::-webkit-scrollbar-track{background:transparent;}
.trilho::-webkit-scrollbar-thumb{background:var(--linha); border-radius:99px;}
.trilho > *{scroll-snap-align:start; flex:0 0 auto;}

/* Largura do cartão dentro do trilho. No celular quase toda a tela,
   mas não inteira: a fatia do próximo cartão é o que avisa que há mais
   coisa para o lado — seta nenhuma comunica isso tão bem. */
.trilho.exames > *{width:min(23rem, 84vw);}
/* Os check-ups saíram do carrossel e viraram grade com abas — a regra
   `.trilho.checkups` que morava aqui não casava mais com nada. */

.seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:1px solid var(--linha);
  background:var(--superficie); color:var(--texto); font-size:19px; cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--sombra);
  transition:background .15s, color .15s, opacity .2s, visibility .2s;
}
.seta:hover{background:var(--turquesa); color:#fff; border-color:var(--turquesa);}
.seta.esq{left:-14px;} .seta.dir{right:-14px;}
/* Some quando não há para onde ir. Seta que não faz nada ensina a
   pessoa a não clicar nas setas. */
.seta[hidden]{opacity:0; visibility:hidden; pointer-events:none;}
@media(max-width:900px){
  .seta{display:none;}   /* no celular o dedo já resolve */
}

.carrossel .contador{
  font-size:.8rem; color:var(--texto-3); text-align:right; margin-top:-8px;
}


/* =====================================================================
   JANELA DO CHECK-UP
   =====================================================================
   Os cartões ficaram compactos: nome, descrição, quantos exames e o
   preço. A lista inteira abre aqui. Com 20+ exames em cada um dos 13
   pacotes, mostrar tudo no cartão fazia o carrossel virar uma parede —
   a pessoa rolava três telas e ainda não tinha comparado dois pacotes.
   ===================================================================== */

.ver-exames{
  display:flex; align-items:center; gap:8px; width:100%;
  margin:14px 0 0; padding:11px 13px;
  border:1px dashed var(--linha); border-radius:10px;
  background:var(--turquesa-luz); color:var(--turquesa-esc);
  font:inherit; font-size:.86rem; font-weight:600; cursor:pointer;
  transition:border-color .14s, background .14s;
}
.ver-exames:hover{border-color:var(--turquesa); border-style:solid; background:#fff;}
.ver-exames .n{
  background:var(--turquesa); color:#fff; border-radius:7px;
  padding:1px 9px; font-size:.9rem; font-weight:700;
}
.ver-exames .lupa{margin-left:auto; font-weight:500; opacity:.75; white-space:nowrap;}
.ver-exames .lupa::after{content:' ›'; font-weight:700;}

/* O `display:none` do atributo `hidden` vem da folha de estilo do
   navegador, e perde para qualquer `display` declarado aqui. Sem esta
   linha, o `display:flex` abaixo deixa a janela visível já no
   carregamento da página, cobrindo o site inteiro antes de alguém
   clicar em nada.
   Só para o véu, e não para todo `[hidden]`: as setas do carrossel
   usam o mesmo atributo de propósito para sumir com transição
   (opacity/visibility), e um `display:none` global mataria o efeito. */
.velo[hidden]{display:none;}

.velo{
  position:fixed; inset:0; z-index:200;
  background:rgba(11,42,70,.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:velo-entra .16s ease-out;
}
@keyframes velo-entra{from{opacity:0}to{opacity:1}}

.janela{
  background:var(--superficie); border-radius:18px; box-shadow:0 24px 70px rgba(11,42,70,.3);
  width:min(38rem,100%); max-height:min(85vh,44rem);
  display:flex; flex-direction:column; position:relative;
  animation:janela-entra .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes janela-entra{from{opacity:0; transform:translateY(14px) scale(.98)}}

.janela .fechar{
  position:absolute; top:12px; right:14px; z-index:2;
  width:34px; height:34px; border:none; border-radius:50%;
  background:var(--linha-2, #F0F6F7); color:var(--texto-2);
  font-size:1.4rem; line-height:1; cursor:pointer;
}
.janela .fechar:hover{background:var(--turquesa); color:#fff;}

.j-cab{padding:26px 28px 16px; border-bottom:1px solid var(--linha);}
.j-cab h3{font-size:1.3rem; font-weight:700; margin:8px 0 0; line-height:1.25; padding-right:34px;}
.j-cab p{font-size:.9rem; color:var(--texto-2); margin-top:8px;}

/* O corpo é o único que rola. Cabeçalho e rodapé ficam presos, então o
   preço e o botão continuam visíveis com a lista aberta — que é o
   momento em que a pessoa está decidindo. */
.j-corpo{padding:20px 28px; overflow-y:auto; flex:1;}
.j-corpo h4{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--texto-3); margin-bottom:12px;
}
.j-corpo h4 span{color:var(--turquesa-esc);}
.j-corpo ul{list-style:none; display:grid; gap:2px;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));}
.j-corpo li{
  font-size:.89rem; color:var(--texto); padding:7px 0 7px 22px; position:relative;
}
.j-corpo li::before{
  content:'✓'; position:absolute; left:0; top:7px;
  color:var(--verde); font-weight:700; font-size:.85rem;
}

.j-pe{
  padding:16px 28px 22px; border-top:1px solid var(--linha);
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--superficie-2, #FAFCFD); border-radius:0 0 18px 18px;
}
.j-pe .valor{font-size:1.5rem; font-weight:700; letter-spacing:-.02em;}
.j-pe .antes{font-size:.9rem; color:var(--texto-3); text-decoration:line-through; margin-right:7px;}
.j-pe .obs{font-size:.76rem; color:var(--texto-3); margin-top:2px;}

body.travado{overflow:hidden;}

@media(max-width:560px){
  .velo{padding:0; align-items:flex-end;}
  .janela{max-height:92vh; border-radius:18px 18px 0 0; width:100%;}
  .j-pe{border-radius:0;}
  .j-cab,.j-corpo,.j-pe{padding-left:20px; padding-right:20px;}
}


/* =====================================================================
   MAPA
   ===================================================================== */
.mapa{position:relative;}
.mapa iframe{width:100%; height:100%; min-height:19rem; border:0; display:block;}
.abrir-mapa{
  position:absolute; left:14px; bottom:14px;
  background:var(--superficie); color:var(--texto); font-size:.82rem; font-weight:600;
  padding:8px 14px; border-radius:99px; box-shadow:0 3px 12px rgba(11,42,70,.2);
}
.abrir-mapa:hover{background:var(--turquesa); color:#fff; text-decoration:none;}


/* =====================================================================
   SÁBADO COM SAÚDE EM FOCO
   ===================================================================== */
.sabado{background:linear-gradient(135deg, var(--marca, #0B2A46), #17456F); color:#fff;}
.sab-grade{
  display:grid; gap:34px; align-items:center;
  grid-template-columns:1fr auto;
}
@media(max-width:820px){ .sab-grade{grid-template-columns:1fr;} }

.sab-texto h2{font-size:clamp(1.6rem,3.4vw,2.2rem); font-weight:700; margin:12px 0 12px;
  line-height:1.18; color:#fff;}
.sab-texto p{font-size:1rem; color:#C4D6E2; max-width:38rem; line-height:1.65;}
.etiq.lima{background:var(--lima); color:var(--marca, #0B2A46);}

.sab-benef{margin:24px 0 26px;}
.sab-benef h4{
  font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em;
  color:var(--lima); margin-bottom:12px;
}
.sab-benef ul{list-style:none; display:grid; gap:9px 24px;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));}
.sab-benef li{position:relative; padding-left:26px; font-size:.93rem; color:#E4EDF3;}
.sab-benef li::before{
  content:'✓'; position:absolute; left:0; top:-1px;
  width:18px; height:18px; border-radius:50%;
  background:var(--lima); color:var(--marca, #0B2A46);
  font-size:.7rem; font-weight:700; display:grid; place-items:center;
}

.sab-selo{
  background:rgba(255,255,255,.07); border:1px solid rgba(196,237,138,.35);
  border-radius:20px; padding:32px 38px; text-align:center; min-width:15rem;
}
.sab-selo .n{
  font-size:clamp(3rem,7vw,4.4rem); font-weight:700; line-height:1;
  color:var(--lima); letter-spacing:-.04em;
}
.sab-selo .t{font-size:.95rem; color:#fff; margin-top:8px; font-weight:600;}
.sab-selo .q{
  font-size:.8rem; color:#9FBACE; margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(255,255,255,.13);
}


/* =====================================================================
   RESULTADOS PELA INTERNET
   ===================================================================== */
.resultados{padding-top:0;}
.res-caixa{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--turquesa-luz); border:1px solid var(--turquesa);
  border-radius:18px; padding:26px 30px;
}
.res-ic{
  font-size:1.9rem; width:58px; height:58px; flex:none;
  background:var(--superficie); border-radius:16px; display:grid; place-items:center;
  box-shadow:var(--sombra);
}
.res-txt{flex:1; min-width:14rem;}
.res-txt h2{font-size:1.25rem; font-weight:700; margin-bottom:5px;}
.res-txt p{font-size:.9rem; color:var(--texto-2); line-height:1.6;}


/* =====================================================================
   BANNERS ROTATIVOS
   =====================================================================
   Mesma escolha do carrossel de exames: quem rola é o navegador, com
   `scroll-snap`. As setas e as bolinhas só empurram a rolagem nativa —
   é o que faz o arrastar com o dedo funcionar sem uma linha de código.
   ===================================================================== */
.banners{padding:0 0 20px;}
.bn-caixa{position:relative;}

.bn-trilho{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; border-radius:var(--raio); gap:0;
  /* A barra some: com bolinhas e setas logo abaixo, ela só engrossa a
     borda inferior do banner. */
  scrollbar-width:none; -ms-overflow-style:none;
}
.bn-trilho::-webkit-scrollbar{display:none;}

.bn{
  position:relative; flex:0 0 100%; scroll-snap-align:start;
  min-height:19rem; display:flex; align-items:center; justify-content:flex-end;
  background:var(--bn-cor, var(--turquesa)); overflow:hidden;
}
.bn-foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* A tarja de cor sobre a foto, como no modelo. Ela existe porque texto
   branco direto sobre fotografia é ilegível na metade das fotos — e a
   foto de banner é escolhida por quem não vê o resultado no celular. */
.bn-tarja{
  position:relative; background:var(--bn-cor, var(--turquesa)); color:#fff;
  border-radius:var(--raio); margin:26px; padding:30px 34px;
  max-width:min(38rem, calc(100% - 52px));
  display:grid; gap:20px 30px; grid-template-columns:1fr 1fr; align-items:center;
}
.bn-tarja h2{font-size:clamp(1.5rem,3vw,2.1rem); font-weight:700; line-height:1.14;
  letter-spacing:-.02em; color:#fff;}
.bn-lado p{font-size:.98rem; line-height:1.5; color:rgba(255,255,255,.92);}
.bn-btn{
  display:inline-block; margin-top:16px; background:#fff; color:var(--bn-cor, var(--turquesa));
  font-weight:700; font-size:.9rem; padding:11px 22px; border-radius:var(--raio-3);
  transition:transform .15s, box-shadow .15s;
}
.bn-btn:hover{text-decoration:none; transform:translateY(-1px); box-shadow:var(--sombra-2);}

/* Sem foto, a tarja seria um retângulo de cor sobre o mesmo retângulo de
   cor. Nesse caso ela ocupa o banner inteiro. A classe vem do PHP e não
   de `:has()`: a regra precisa valer também no navegador da recepção. */
.bn.sem-foto .bn-tarja{max-width:none; margin:0; min-height:19rem;
  align-content:center; border-radius:var(--raio);}

.bn-controles{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:14px; padding:0 4px;
}
.bn-pontos{display:flex; gap:7px; align-items:center;}
.bn-pontos button{
  width:9px; height:9px; padding:0; border:0; border-radius:99px; cursor:pointer;
  background:var(--linha); transition:width .2s, background .2s;
}
.bn-pontos button.on{width:26px; background:var(--turquesa);}
.bn-setas{display:flex; gap:8px;}
.bn-seta{
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  background:var(--superficie); border:1px solid var(--linha); color:var(--texto);
  font-size:1.3rem; line-height:1; display:grid; place-items:center;
}
.bn-seta:hover{background:var(--turquesa); color:#fff; border-color:var(--turquesa);}

@media(max-width:700px){
  .bn-tarja{grid-template-columns:1fr; margin:14px; padding:22px;
    max-width:calc(100% - 28px);}
  .bn{min-height:15rem;}
  .bn.sem-foto .bn-tarja{min-height:15rem;}
}


/* =====================================================================
   ABAS  — categorias dos check-ups
   =====================================================================
   Rolam na horizontal no celular em vez de quebrar em quatro linhas.
   Sete categorias empilhadas empurram os cartões para fora da tela, e a
   pessoa passa a rolar um menu antes de ver qualquer pacote.
   ===================================================================== */
.abas{
  display:flex; gap:9px; margin-bottom:28px; overflow-x:auto; padding-bottom:6px;
  scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none;}
.abas button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:8px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:10px 19px; font:inherit; font-size:.88rem; font-weight:500;
  color:var(--texto-2); cursor:pointer; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.abas button:hover{border-color:var(--turquesa); color:var(--turquesa-esc);}
.abas button .n{
  font-size:.74rem; font-weight:700; background:var(--linha-2); color:var(--texto-3);
  border-radius:99px; padding:2px 8px; min-width:1.4rem; text-align:center;
}
.abas button.on{background:var(--turquesa); border-color:var(--turquesa); color:#fff; font-weight:600;}
.abas button.on .n{background:rgba(255,255,255,.22); color:#fff;}

/* Pela mesma razão explicada no `.velo[hidden]` lá em cima: o cartão
   declara `display:flex`, e isso vence o `display:none` que o navegador
   dá ao atributo `hidden`. Sem esta linha a aba troca de cor e nenhum
   cartão some. */
.checkup[hidden], .faq details[hidden]{display:none;}


/* =====================================================================
   FAQ  — botão "ver todas"
   ===================================================================== */
.faq-cats button .n{
  font-size:.73rem; font-weight:700; background:var(--linha-2); color:var(--texto-3);
  border-radius:99px; padding:1px 7px; margin-left:5px;
}
.faq-cats button.on .n{background:rgba(255,255,255,.22); color:#fff;}

.faq-mais{max-width:52rem; margin:20px auto 0; display:flex; justify-content:flex-end;}
.faq-mais button{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio-3);
  padding:12px 24px; font:inherit; font-size:.9rem; font-weight:600;
  color:var(--texto); cursor:pointer; transition:border-color .15s, color .15s;
}
.faq-mais button:hover{border-color:var(--turquesa); color:var(--turquesa-esc);}
.faq-mais button::after{content:'→'; color:var(--turquesa); font-weight:700;}
.faq-mais button.aberto::after{content:'↑';}
@media(max-width:560px){ .faq-mais{justify-content:center;} }


/* =====================================================================
   CANAIS DE ATENDIMENTO
   ===================================================================== */
.canais-sec{background:var(--fundo);}
.canais{display:grid; gap:18px; grid-template-columns:1fr 1fr; align-items:start;}
/* Sem o cartão do telefone sobra uma coluna só, e uma pilha de cartões
   ocupando meia tela com o outro lado em branco parece defeito. */
.canais.so-pilha{grid-template-columns:1fr;}
@media(max-width:850px){ .canais{grid-template-columns:1fr;} }

.canal-pilha{display:grid; gap:18px; align-content:start;}

.canal{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:22px 24px; box-shadow:var(--sombra); color:var(--texto);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.canal:hover{text-decoration:none; transform:translateY(-2px);
  box-shadow:var(--sombra-2); border-color:var(--turquesa);}
.canal .ic{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:var(--turquesa-luz); color:var(--turquesa-esc); font-size:1.15rem;
}
.canal .ic.verde{background:var(--verde-luz); color:var(--verde-esc);}
.canal .txt{display:grid; gap:6px; flex:1;}
.canal .txt strong{font-size:1.02rem; font-weight:700;}
.canal .txt span{font-size:.89rem; color:var(--texto-2); line-height:1.55;}
.canal .seta-canal{flex:none; align-self:center; color:var(--turquesa);
  font-size:1.5rem; line-height:1;}

.canal-grande{
  background:var(--superficie); border:1px solid var(--linha); border-radius:var(--raio);
  padding:26px 28px; box-shadow:var(--sombra); height:100%;
}
.canal-grande .ic{
  width:44px; height:44px; border-radius:13px; display:grid; place-items:center;
  background:var(--turquesa-luz); color:var(--turquesa-esc); font-size:1.25rem;
  margin-bottom:14px;
}
.canal-grande h3{font-size:1.1rem; font-weight:700; margin-bottom:8px;}
.canal-grande p{font-size:.9rem; color:var(--texto-2); line-height:1.6;}

.canal-horas{margin:20px 0 22px; display:grid; gap:7px; font-size:.89rem;}
.canal-horas div{display:flex; gap:10px; flex-wrap:wrap;}
.canal-horas dt{color:var(--texto-3); min-width:5rem; font-weight:500;}
.canal-horas dd{color:var(--texto); font-weight:600;}

.canal-fone{
  display:block; text-align:center; border:1px solid var(--linha);
  border-radius:var(--raio-3); padding:13px 20px;
  font-size:1.02rem; font-weight:700; color:var(--texto);
}
.canal-fone:hover{border-color:var(--turquesa); color:var(--turquesa-esc); text-decoration:none;}