/* LP Dr. Fernando Bauken (catarata, Foz do Iguaçu). Cores do Instagram dele e do logo da Vision Prime:
   azul petróleo #195F8A + azul claro do degradê. Página de anúncio: tema claro fixo de propósito. */
:root{
  --creme:#F4F8FB;
  --areia:#E4EEF5;
  --branco:#FFFFFF;
  --escuro:#103752;      /* azul profundo (versão escura do azul do Instagram) */
  --escuro-2:#0A2A40;    /* rodapé */
  --insta:#195F8A;       /* azul dos posts do Instagram */
  --texto:#14283A;
  --suave:#4C6072;
  --linha:#D2E0EA;
  --azul:#1A5F8A;        /* destaque sobre claro (contraste AA) */
  --azul-claro:#7CC6E6;  /* destaque sobre escuro (azul claro do degradê do logo) */
  --claro-suave:#C8DCE9; /* texto sobre escuro */
  --f-titulo:"Poppins", "Segoe UI", Arial, sans-serif; /* página toda em Poppins, a pedido (2026-10-16) */
  --f-texto:"Poppins", "Segoe UI", Arial, sans-serif;
  --max:1160px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--creme);color:var(--texto);font-family:var(--f-texto);font-size:16px;line-height:1.75;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.2;text-wrap:balance}
h2{font-family:var(--f-titulo);font-size:38px;letter-spacing:-.01em}
p{margin:0}
strong,b{font-weight:500}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.sec{padding-block:clamp(64px,8vw,104px)}
.sec[id]{scroll-margin-top:12px}
.tag{font-size:12px;text-transform:uppercase;letter-spacing:.14em;font-weight:500;color:var(--azul)}
.cabeca{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(36px,5vw,52px);max-width:720px}
.cabeca p:not(.tag){color:var(--suave)}
.cabeca--centro{margin-inline:auto;align-items:center;text-align:center}


/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--escuro);color:var(--branco);text-decoration:none;font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:.06em;line-height:1.3;padding:18px 30px;min-height:52px;transition:background .2s,color .2s}
.btn:hover{background:var(--insta)}
.btn:focus-visible{outline:2px solid var(--azul-claro);outline-offset:3px}
.btn span{font-size:16px}
.btn--claro{background:var(--creme);color:var(--escuro)}
.btn--claro:hover{background:var(--branco)}
.acao{margin-top:clamp(36px,5vw,48px);display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.acao--centro{justify-content:center}

/* Marca (topo e rodapé) */
.marca{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;line-height:1.1;color:var(--branco);text-decoration:none}
.marca img{grid-row:span 2;width:40px;height:40px}
.marca b{font-family:var(--f-titulo);font-weight:500;font-size:18px}
.marca small{font-size:10.5px;text-transform:uppercase;letter-spacing:.32em;color:var(--azul-claro);margin-top:4px}

/* 1. Topo */
.hero{position:relative;background:var(--escuro) url("img/fb-banner-2.webp") right center/cover no-repeat;color:var(--branco)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,580px);align-items:center;min-height:clamp(640px,100svh,900px)}
.hero__txt{display:flex;flex-direction:column;gap:18px;padding-block:64px 72px}
.hero .marca{margin-bottom:26px}
.hero .tag{color:var(--azul-claro)}
.hero h1{font-family:var(--f-titulo);font-size:50px;line-height:1.12;letter-spacing:-.015em}
.hero__sub{font-family:var(--f-titulo);font-size:22px;color:var(--azul-claro)}
.hero__txt>p.hero__texto{font-size:18px;color:var(--claro-suave);max-width:50ch}
.hero .acao{margin-top:12px}
.hero__apoio{font-size:13.5px;color:var(--claro-suave)}
.hero__foto{display:none}

/* 2. Números */
.numeros{padding-block:44px;border-bottom:1px solid var(--linha)}
.numeros ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.numeros li{padding:6px 32px;display:flex;flex-direction:column;gap:6px}
.numeros li+li{border-left:1px solid var(--linha)}
.numeros b{font-family:var(--f-titulo);font-weight:500;font-size:32px;line-height:1.1;color:var(--azul)}
.numeros span{color:var(--suave);font-size:15.5px;line-height:1.5}

/* 3. Sintomas */
.sintomas{background:var(--creme)}
.sgrade{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.scard{background:var(--branco);border:1px solid var(--linha);padding:28px 26px;display:flex;flex-direction:column;gap:8px;counter-increment:s}
.scard::before{content:counter(s,decimal-leading-zero);font-weight:500;font-size:14px;color:var(--azul)}
.scard h3{font-family:var(--f-texto);font-weight:500;font-size:18px}
.scard p{color:var(--suave);font-size:15.5px;line-height:1.6}


/* 5. Biografia */
.bio{background:var(--areia);position:relative;padding-block:0}
/* Foto ocupa a metade esquerda inteira da seção, sem borda; texto à direita */
.bio__grid{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center}
.bio__txt{grid-column:2;padding:clamp(72px,9vw,120px) 0 clamp(72px,9vw,120px) clamp(40px,5vw,72px)}
.bio h2{margin:14px 0 24px}
.bio__texto{color:var(--texto);max-width:60ch}
.check{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--linha)}
.check li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--linha)}
.check li::before{content:"";position:absolute;left:2px;top:21px;width:12px;height:7px;border-left:1.5px solid var(--azul);border-bottom:1.5px solid var(--azul);transform:rotate(-45deg)}
.bio__foto{position:absolute;top:0;left:0;bottom:0;width:50%;margin:0;background:var(--escuro)}
.bio__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* 6. Processo */
.processo{background:var(--escuro);color:var(--claro-suave)}
.processo h2{color:var(--branco)}
.processo .tag{color:var(--azul-claro)}
.processo .cabeca p:not(.tag){color:var(--claro-suave)}
.etapas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.etapa{border-top:1px solid rgba(124,198,230,.45);padding-top:24px;display:flex;flex-direction:column;gap:10px}
.etapa__n{font-weight:500;font-size:34px;line-height:1;color:var(--azul-claro)}
.etapa h3{font-family:var(--f-texto);font-weight:500;font-size:18px;color:var(--branco)}
.etapa p{font-size:15.5px;line-height:1.65}

/* 7. Pacote */
.pacote{position:relative;padding-block:0}
/* Foto do exame ocupa a metade direita inteira da seção, sem borda (espelha a biografia) */
.pacote__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.pacote__txt{padding:clamp(72px,9vw,120px) clamp(40px,5vw,72px) clamp(72px,9vw,120px) 0}
.pacote__foto{position:absolute;top:0;right:0;bottom:0;width:50%;margin:0;background:var(--escuro)}
.pacote__foto img{width:100%;height:100%;object-fit:cover;object-position:60% 40%}

/* 8. Dúvidas */
.duvidas{background:var(--areia)}
.faq{max-width:820px;margin:0 auto}
.faq__lista{border-top:1px solid rgba(20,40,58,.16)}
.faq__item{border-bottom:1px solid rgba(20,40,58,.16)}
.faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:18px 4px;font-size:17px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.faq__item summary i{flex:none;width:26px;height:26px;border:1px solid rgba(20,40,58,.3);border-radius:50%;position:relative}
.faq__item summary i::before,.faq__item summary i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--texto);transform:translate(-50%,-50%)}
.faq__item summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .2s}
.faq__item[open] summary i::after{opacity:0}
.faq__r{padding:0 44px 22px 4px;color:var(--suave)}

/* 9. Chamada final */
.final{position:relative;background:var(--insta) url("img/fb-refracao.webp") center 35%/cover no-repeat;color:var(--claro-suave);text-align:center}
.final::before{content:"";position:absolute;inset:0;background:rgba(25,95,138,.7);pointer-events:none}
.final .wrap{position:relative;text-shadow:0 1px 14px rgba(10,42,64,.75),0 0 2px rgba(10,42,64,.5)}
.final .btn{text-shadow:none}
.final h2{color:var(--branco);max-width:20ch;margin:0 auto 20px}
.final p{max-width:60ch;margin:0 auto;color:var(--branco)}


/* Rodapé com o contato */
.rodape{background:var(--escuro-2);color:#9DB5C6;font-size:14px;padding-block:clamp(56px,7vw,88px) 36px}
.rodape__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:end;padding-bottom:48px}
.rodape .marca{margin-bottom:28px}
.rodape h2{color:var(--branco);font-size:34px;margin-bottom:14px}
.rodape__grid>div>p{color:var(--claro-suave);font-size:16px;max-width:46ch}
.dados{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.12);font-size:15.5px;color:#E3EEF5}
.dados li{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);display:grid;grid-template-columns:110px 1fr;gap:12px}
.dados li>span:first-child{font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;color:var(--azul-claro);padding-top:3px}
.dados a{border-bottom:1px solid rgba(255,255,255,.25)}
.rodape ul:not(.dados){list-style:none;margin:0;padding:0;display:flex;gap:20px;flex-wrap:wrap}
.rodape a{color:#E3EEF5;text-decoration:none}
.rodape a:hover{text-decoration:underline}
.rodape__grid .acao{margin-top:28px}
.rodape .btn--claro{color:var(--escuro)}
.rodape .btn--claro:hover{text-decoration:none}
.rodape__base{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:24px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.rodape__aviso{padding-top:20px;font-size:13px;display:flex;flex-direction:column;gap:6px}

.fixo{display:none}

/* Animação só nos cartões */
.anim .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.anim .rv.in{opacity:1;transform:none}

@media (max-width:960px){
  h2{font-size:32px}
  .hero{background-image:none}
  .hero__grid,.hero__grid.wrap{grid-template-columns:1fr;min-height:0;padding-inline:0}
  .hero__txt{padding:36px 24px 8px;gap:14px}
  .hero h1{font-size:40px}
  .hero__sub{font-size:22px}
  .hero__foto{display:block;position:relative;width:100%;margin:0}
  .hero__foto img{width:100%;height:auto}
  .sgrade{grid-template-columns:1fr 1fr}
  .bio__grid,.rodape__grid,.pacote__grid{grid-template-columns:1fr}
  .pacote__txt{padding:clamp(64px,8vw,96px) 0 48px}
  .pacote__foto{position:static;width:100%;aspect-ratio:4/5}
  .bio__txt{grid-column:auto;padding:clamp(64px,8vw,96px) 0 48px}
  .bio__foto{position:static;width:100%;aspect-ratio:1/1}
  .etapas{grid-template-columns:1fr;gap:0}
  .etapa{display:grid;grid-template-columns:56px 1fr;column-gap:8px;border-top:0;border-left:1px solid rgba(124,198,230,.45);padding:0 0 30px 20px}
  .etapa__n{grid-row:span 2;font-size:30px}
  .etapa p{grid-column:2}
}
@media (max-width:640px){
  body{font-size:16px}
  h2{font-size:26px}
  .wrap{padding-inline:16px}
  .marca b{font-size:19px}
  .hero__txt{padding:28px 16px 8px}
  .hero h1{font-size:30px}
  .hero__sub{font-size:20px}
  .hero__txt>p.hero__texto{font-size:16.5px}
  .acao{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .numeros{padding-block:28px}
  .numeros ul{grid-template-columns:1fr}
  .numeros li{padding:16px 0}
  .numeros li+li{border-left:0;border-top:1px solid var(--linha)}
  .numeros b{font-size:28px}
  .sgrade{grid-template-columns:1fr;gap:12px}
  .scard{padding:22px 20px}
  .dados li{grid-template-columns:1fr;gap:2px}
  .rodape h2{font-size:26px}
  .faq__r{padding-right:4px}
  .rodape{padding-bottom:110px}
  .fixo{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(244,248,251,.96);border-top:1px solid var(--linha);transform:translateY(110%);transition:transform .3s}
  .fixo.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim .rv{opacity:1;transform:none;transition:none}
  .fixo,.btn,.faq__item summary i::after{transition:none}
}