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

/* ============================================================
   Wellness Brazil — sistema visual
   Referência: mockup enviado em 10 set 2026
   ============================================================ */

:root{
  /* tinta */
  --ink:#0f3d4f;          /* títulos, azul-petróleo escuro */
  --ink-soft:#456b78;     /* texto corrido */
  --ink-dim:#6f8b95;      /* legendas */

  /* acento */
  --teal:#2f9c94;         /* eyebrow, ícones, sublinhado */
  --teal-lite:#7fd3c4;    /* eyebrow sobre fundo escuro */
  --brand-a:#4cc0a0;      /* gradiente do logo, ponta clara */
  --brand-b:#12546c;      /* gradiente do logo, ponta escura */

  /* botões */
  --btn:#0e4b60;
  --btn-hover:#0a3b4c;

  /* fundos
     A página tinha branco a mais. Os fundos passaram a ter cor a sério —
     um aqua-clínico pálido — mantendo o branco só onde serve de pausa. */
  --white:#ffffff;
  --shell:#e6f2f3;        /* "Como funciona" e "Perguntas" — aqua pálido */
  --shell-fade:#f2f9f9;   /* fim do degradê dessas secções */
  --breathe:#f6fbfb;      /* faixa de garantias: branco com um sopro de cor */
  --wash:#d3e9ea;         /* círculos dos ícones, agora com presença */
  --wash-2:#c4e2e4;       /* fundo do degradê dos círculos */
  --line:#d5e6e9;         /* divisórias finas */
  --veil:232,244,245;     /* véu sobre as fotos (RGB, usado com alpha) */
  --tint:203,231,233;     /* tinta de cor por cima das faixas fotográficas */

  --max:1200px;
  --pad:44px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 16px/1.6 Figtree,"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(var(--max),100%);margin:auto;padding:0 var(--pad)}

.eyebrow{
  font:600 11px/1 Figtree;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);margin:0 0 18px;
}

/* foco visível para quem navega com o teclado (não aparece ao clicar com o rato) */
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.close :focus-visible,.foot :focus-visible{outline-color:#7fd3c4}

/* quem pediu menos movimento ao sistema não leva animação nenhuma */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .btn:hover{transform:none}
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--btn);color:#fff;border:1px solid var(--btn);
  border-radius:999px;padding:15px 26px;
  font:600 15px/1 Figtree;cursor:pointer;transition:.2s ease;
}
.btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);transform:translateY(-1px)}
.btn .wa{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.16);
  display:grid;place-items:center;flex:none}
.btn .wa svg{width:14px;height:14px;fill:#fff}
.btn .arrow{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;flex:none;margin-left:2px}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:#eef6f7;border-color:#eef6f7}
.btn.light .wa{background:rgba(15,61,79,.1)}
.btn.light .wa svg{fill:var(--ink)}
.btn.sm{padding:12px 22px;font-size:14.5px}

/* ---------- cabeçalho ---------- */
.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topin{height:78px;display:flex;align-items:center;gap:30px}

.logo{display:flex;align-items:center;gap:14px;flex:none}
.logo-mark{width:auto;height:42px;flex:none}
.logo-word{width:auto;height:26px;flex:none}
.logo .wm{display:flex;flex-direction:column;line-height:1}
.logo .wm b{font:600 21px/1 Figtree;letter-spacing:.14em;color:var(--ink)}
.logo .wm small{font:600 9.5px/1 Figtree;letter-spacing:.42em;color:var(--teal);margin-top:6px}

.menu{display:flex;align-items:center;gap:34px;margin-left:auto}
.menu a{font:400 15px/1 Figtree;color:var(--ink-soft);padding:8px 0;position:relative;
  white-space:nowrap}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink);font-weight:500}
.menu a.on:after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--teal);border-radius:2px;
}
.menu .btn{display:none}          /* só aparece dentro do menu de telemóvel */
.top>.container>.btn{margin-left:34px;flex:none}

.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;margin:5px 0;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:560px;display:flex;align-items:center;
  padding:56px 0;
  background-image:url('assets/hero.jpg'),
    linear-gradient(105deg,#e4f0f3 0%,#cfe4ea 34%,#a8c9d7 60%,#7ea8bd 100%);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
}
/* Duas camadas: o véu horizontal que limpa a zona do texto e, por baixo,
   uma tinta suave que dá cor à fotografia toda — o hero era branco demais. */
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(var(--veil),.96) 0%,
      rgba(var(--veil),.92) 24%,
      rgba(var(--veil),.60) 42%,
      rgba(var(--veil),.12) 56%,
      rgba(var(--veil),0) 66%),
    linear-gradient(165deg,
      rgba(var(--tint),.55) 0%,
      rgba(var(--tint),.30) 55%,
      rgba(var(--tint),.42) 100%);
}
.hero .container{position:relative;z-index:2}
.hero h1{
  font:600 clamp(34px,4.1vw,52px)/1.14 Figtree;
  letter-spacing:-.022em;color:var(--ink);
  margin:0 0 24px;max-width:11ch;
}
.hero p{margin:0 0 34px;max-width:34ch;font-size:16.5px;color:var(--ink-soft)}

/* ---------- pilares (saúde · performance · longevidade) ---------- */
.pillars{background:var(--white);padding:66px 0 58px;border-bottom:1px solid var(--line)}
.pillars .container{display:grid;grid-template-columns:repeat(3,1fr)}
.pillar{text-align:center;padding:4px 30px;border-right:1px solid var(--line)}
.pillar:last-child{border-right:0}
.pillar svg{width:44px;height:44px;stroke:var(--teal);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin:0 auto 18px}
.pillar h3{font:700 17px/1 Figtree;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);margin:0 0 10px}
.pillar p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-soft)}

/* a assinatura do logo estendido, como fecho da secção */
.creed{
  margin:52px auto 0;text-align:center;
  font:600 11.5px/1 Figtree;letter-spacing:.26em;text-transform:uppercase;
  color:var(--teal);
}
.creed span{color:var(--ink-dim);margin:0 10px}

/* ---------- como funciona ---------- */
.how{background:linear-gradient(180deg,var(--shell),var(--shell-fade));
  padding:92px 0 100px;text-align:center}
.how h2{font:600 clamp(28px,3.2vw,38px)/1.2 Figtree;letter-spacing:-.02em;margin:0 0 12px}
.how .sub{margin:0 0 62px;color:var(--ink-soft);font-size:16.5px}

.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;text-align:left}
.node{position:relative;padding:0 18px}
.node .disc{
  width:88px;height:88px;border-radius:50%;
  background:linear-gradient(145deg,var(--wash),var(--wash-2));
  display:grid;place-items:center;margin:0 auto 30px;
}
.node .disc svg{width:40px;height:40px;stroke:var(--ink);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round}
.node h3{font:600 15.5px/1.35 Figtree;margin:0 0 10px;color:var(--ink)}
.node h3 i{font-style:normal;font-weight:600;margin-right:5px}
.node p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink-soft)}

/* seta entre os círculos */
.node:not(:first-child):before{
  content:"";position:absolute;top:44px;left:-14px;width:28px;height:10px;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 10'%3E%3Cpath d='M0 5h25M21 1l4 4-4 4' fill='none' stroke='%235d8794' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- portfólio ---------- */
.folio{
  position:relative;min-height:470px;display:flex;align-items:center;
  padding:56px 0;
  background-image:url('assets/portfolio.jpg'),
    linear-gradient(105deg,#eef6f7 0%,#dbeaee 40%,#c3dbe3 70%,#aecdd8 100%);
  background-size:cover;background-position:center right;background-repeat:no-repeat;
}
.folio:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,
      rgba(226,241,243,.97) 0%,
      rgba(226,241,243,.90) 26%,
      rgba(226,241,243,.50) 44%,
      rgba(226,241,243,0) 60%),
    linear-gradient(165deg,
      rgba(var(--tint),.50) 0%,
      rgba(var(--tint),.26) 60%,
      rgba(var(--tint),.38) 100%);
}
.folio .container{position:relative;z-index:2}
.folio h2{font:600 clamp(32px,3.9vw,48px)/1.14 Figtree;letter-spacing:-.022em;margin:0 0 20px;max-width:9ch}
.folio p{margin:0 0 32px;max-width:32ch;font-size:16.5px;color:var(--ink-soft)}

/* ---------- faixa de garantias ---------- */
.marks{background:var(--breathe);padding:52px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marks .container{display:grid;grid-template-columns:repeat(4,1fr)}
.mark{text-align:center;padding:8px 26px;border-right:1px solid var(--line)}
.mark:last-child{border-right:0}
.mark svg{width:34px;height:34px;stroke:var(--teal);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin:0 auto 18px}
.mark b{display:block;font:600 16px/1.3 Figtree;color:var(--ink)}
.mark span{display:block;font-size:14px;color:var(--ink-soft);margin-top:4px}

/* ---------- perguntas frequentes ---------- */
.faq{background:linear-gradient(180deg,var(--shell-fade),var(--shell));
  padding:92px 0 100px;text-align:center}
.faq h2{font:600 clamp(28px,3.2vw,38px)/1.2 Figtree;letter-spacing:-.02em;margin:0 0 12px}
.faq .sub{margin:0 0 54px;color:var(--ink-soft);font-size:16.5px}

.qa{max-width:820px;margin:auto;text-align:left;border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font:600 17.5px/1.4 Figtree;color:var(--ink);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--teal)}
.qa summary:after{
  content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  margin-top:-7px;transition:transform .22s ease;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v12M1 7h12' fill='none' stroke='%232f9c94' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
.qa details[open] summary:after{transform:rotate(45deg)}
.qa p{margin:0;padding:0 44px 26px 0;color:var(--ink-soft);font-size:15.5px;line-height:1.68}
.qa em{font-style:italic}

/* ---------- chamada final ---------- */
.close{
  position:relative;min-height:330px;display:flex;align-items:center;
  background-image:url('assets/final.jpg'),
    linear-gradient(100deg,#134b5e 0%,#1a5f70 38%,#3f7f88 62%,#c98a5a 100%);
  background-size:cover;background-position:center 42%;background-repeat:no-repeat;
  color:#fff;
}
.close:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(16,66,84,.97) 0%,
    rgba(16,66,84,.9) 28%,
    rgba(16,66,84,.55) 46%,
    rgba(16,66,84,.1) 62%,
    rgba(16,66,84,0) 72%);
}
.close .container{position:relative;z-index:2;padding-top:56px;padding-bottom:56px}
.close .eyebrow{color:var(--teal-lite)}
.close h2{font:600 clamp(28px,3.4vw,42px)/1.16 Figtree;letter-spacing:-.02em;margin:0 0 14px;color:#fff}
.close p{margin:0 0 30px;color:#cfe2e6;font-size:16.5px}

/* ---------- rodapé ---------- */
.foot{background:#0c3644;color:#9fbcc6;padding:62px 0 30px;font-size:14.5px}
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.2fr;gap:40px}
.foot .logo .wm b{color:#fff}
.foot .logo-mark{height:38px}
.foot p{margin:18px 0 0;max-width:34ch;line-height:1.65}
.foot h4{font:600 11px/1 Figtree;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-lite);margin:0 0 16px}
.foot a{display:block;margin:9px 0;color:#9fbcc6}
.foot a:hover{color:#fff}
.foot .pending{display:block;margin:9px 0;color:#7fa0ac}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:46px;padding-top:24px;
  font-size:12px;line-height:1.75;color:#7fa0ac}
.ph{color:#e8b66a;border:1px dashed rgba(232,182,106,.5);padding:2px 7px;border-radius:3px;
  display:inline-block;font-size:12px}

/* ---------- responsivo ---------- */
@media(max-width:1080px){
  :root{--pad:32px}
  .menu{gap:24px}
  .menu a{font-size:14px}
  .flow{grid-template-columns:repeat(3,1fr);gap:44px 0}
  .node:nth-child(4):before{display:none}
}
@media(max-width:960px){
  .burger{display:block}
  .top>.container>.btn{display:none}
  .menu .btn{display:inline-flex}
  /* o menu fecha-se por CSS: se o JS falhar, fica fechado e não tapa a página */
  .menu{
    display:none;
    position:absolute;top:78px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
    gap:0;padding:10px 32px 22px;margin:0;
    box-shadow:0 18px 30px -22px rgba(15,61,79,.35);
  }
  .top.open .menu{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
  .menu a:last-of-type{border-bottom:0}
  .menu a.on:after{display:none}
  .menu .btn{margin:16px 0 0;justify-content:center}

  .hero,.folio{min-height:0;padding:68px 0 76px;background-position:center right 22%}
  .hero:before,.folio:before{
    background:linear-gradient(180deg,
      rgba(var(--veil),.95) 0%,
      rgba(var(--veil),.88) 55%,
      rgba(var(--veil),.68) 100%);
  }
  .hero h1,.folio h2{max-width:none}
  .hero p,.folio p{max-width:46ch}
  .close{padding:0}
  .close:before{background:linear-gradient(180deg,rgba(16,66,84,.95),rgba(16,66,84,.82))}
  .how{padding:76px 0 84px}
  .how .sub{margin-bottom:50px}
  .marks .container{grid-template-columns:1fr 1fr;gap:38px 0}
  .mark:nth-child(2n){border-right:0}
  .pillars .container{grid-template-columns:1fr;gap:36px 0}
  .pillar{border-right:0;border-bottom:1px solid var(--line);padding-bottom:32px}
  .pillar:last-child{border-bottom:0;padding-bottom:0}
  .creed{margin-top:38px;letter-spacing:.18em}
  .footgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  :root{--pad:22px}
  .topin{height:70px}
  .menu{top:70px;padding:10px 22px 22px}
  .logo-mark{height:34px}
  .logo-word{height:21px}
  .logo .wm b{font-size:18px;letter-spacing:.12em}
  .flow{grid-template-columns:1fr;gap:38px 0;text-align:center}
  .node{padding:0}
  .node:before{display:none}
  .node p{max-width:40ch;margin:0 auto}
  .marks .container{grid-template-columns:1fr;gap:34px 0}
  .mark{border-right:0}
  .footgrid{grid-template-columns:1fr;gap:32px}
  .foot p{max-width:none}
}