/* ==========================================================================
   RefreshU · sistema visual
   Paleta tirada da logo: navy da palavra "refresh" e o degrade ciano/turquesa
   do simbolo. O papel e um marfim quente de proposito, porque branco puro
   somado a ciano da cara de SaaS medico, e o briefing pede hospitalidade.
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-var.woff2') format('woff2');
  font-weight: 200 700; font-style: normal; font-display: optional;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: optional;
}

:root {
  --navy: #12305a;
  --ink: #0e2846;
  --deep: #071b33;
  --deep-2: #0b2444;
  --paper: #fbf9f5;
  --paper-2: #f2eee6;
  --cyan: #25c6e0;
  --teal: #12bfa2;
  --grad: linear-gradient(135deg, var(--cyan), var(--teal));

  --on-paper: #0e2846;
  /* alfas calculados para 4.5:1 no pior fundo claro (--paper-2 #f2eee6),
     mantendo um degrau visivel entre texto de apoio e letra miuda */
  --on-paper-dim: rgba(14, 40, 70, .74);
  --on-paper-fine: rgba(14, 40, 70, .66);
  --line: rgba(14, 40, 70, .13);
  --on-deep: #f4f8fb;
  --on-deep-dim: rgba(232, 241, 247, .68);
  --line-deep: rgba(160, 200, 220, .2);
  /* alfa minimo que passa 4.5:1 nos DOIS fundos escuros (--deep e --deep-2) */
  --on-deep-fine: rgba(232, 241, 247, .58);

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1240px;
  --ease: cubic-bezier(.22, .8, .32, 1);

  /* Ritmo vertical unico do site. Cada secao tinha 130px em cima e 130px
     embaixo, o que dava 260px de nada entre um bloco e o proximo: num monitor
     de 900px de altura, quase um terco da tela vazia a cada troca de assunto.
     Com 88px o respiro continua editorial, e a troca de secao cabe na mesma
     tela do conteudo que a abre. Um numero so, para nao voltar a divergir. */
  --sec: clamp(58px, 6.2vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.62;
  color: var(--on-paper);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.1; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.display { font-family: var(--display); font-weight: 300; letter-spacing: -.018em; }
.display em { font-style: italic; font-weight: 300; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--deep); color: #fff; padding: 12px 18px; border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------- chrome -- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.chrome__in {
  max-width: var(--wrap); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 44px);
}
.chrome.is-stuck {
  background: rgba(251, 249, 245, .92);
  backdrop-filter: saturate(150%) blur(12px);
  box-shadow: 0 1px 0 var(--line);
}
.chrome.is-stuck .chrome__in { padding-top: 12px; padding-bottom: 12px; }

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand__mark { width: 26px; height: auto; }
.brand__word {
  font-size: 1.24rem; font-weight: 400; letter-spacing: -.025em;
  color: #fff; line-height: 1;
}
.brand__word b { font-weight: 500; color: var(--cyan); }
.chrome.is-stuck .brand__word { color: var(--navy); }
.chrome.is-stuck .brand__word b { color: var(--teal); }

.nav { display: flex; gap: clamp(14px, 2vw, 30px); margin-left: auto; }
.nav a {
  text-decoration: none; font-size: .93rem; color: rgba(255, 255, 255, .82);
  padding: 6px 0; position: relative; white-space: nowrap; transition: color .25s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--grad); transition: width .35s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { width: 100%; }
.chrome.is-stuck .nav a { color: var(--on-paper-dim); }
.chrome.is-stuck .nav a:hover { color: var(--navy); }

.chrome__act { display: flex; align-items: center; gap: 16px; flex: none; }
/* o CTA so existe dentro do menu no mobile, onde o botao do header e escondido */
.nav a.nav__cta { display: none; }
.link-quiet {
  text-decoration: none; font-size: .93rem; color: rgba(255, 255, 255, .82);
  transition: color .25s;
}
.link-quiet:hover { color: #fff; }
.chrome.is-stuck .link-quiet { color: var(--on-paper-dim); }
.chrome.is-stuck .link-quiet:hover { color: var(--navy); }

/* ---------------------------------------------------------------- botoes -- */
/* Qualquer display declarado pelo autor vence o `hidden` do navegador, e o
   botao continuava aparecendo na ultima etapa mesmo com hidden=true. */
[hidden] { display: none !important; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; border: 0; border-radius: 999px;
  font-family: var(--sans); font-size: .97rem; font-weight: 500; letter-spacing: .005em;
  text-decoration: none; color: #04202c; cursor: pointer;
  background: var(--grad); background-size: 160% 160%;
  transition: background-position .5s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
  box-shadow: 0 6px 24px rgba(18, 191, 162, .22);
}
.btn:hover { background-position: 100% 100%; transform: translateY(-2px); box-shadow: 0 12px 34px rgba(18, 191, 162, .3); }
.btn--sm { padding: 11px 20px; font-size: .89rem; box-shadow: none; }
.btn--lg { padding: 18px 40px; font-size: 1.04rem; }
.btn--ghost {
  background: transparent; color: #fff; box-shadow: none;
  border: 1px solid rgba(255, 255, 255, .38);
}
.btn--ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  /* padding vertical para o link virar alvo de dedo, e nao so uma linha de
     texto de 26px; o margin-top desceu 6px para o espacamento ficar igual */
  padding-block: 8px;
  text-decoration: none; font-size: .97rem; font-weight: 500; color: var(--navy);
}
.link-arrow::after {
  content: '→'; transition: transform .3s var(--ease); font-size: 1.05em;
}
.link-arrow:hover::after { transform: translateX(5px); }
.sec-head--light .link-arrow, .phys .link-arrow { color: var(--navy); }

.burger { display: none; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: flex-end;
  /* o padding-top nao aparece na altura normal (align-items:flex-end), ele so
     entra quando a tela e baixa, celular deitado por exemplo, e evita que o
     titulo suba por baixo do cabecalho */
  padding: calc(var(--alt-nav, 78px) + 20px) 0 clamp(60px, 10vh, 120px);
  isolation: isolate; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
/* dois veus: o de baixo assenta a leitura, o da esquerda garante contraste do
   titulo, porque a bruma dourada da foto clareia justo onde o texto comeca */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, rgba(7, 27, 51, .74) 0%, rgba(7, 27, 51, .3) 46%, rgba(7, 27, 51, 0) 76%),
    linear-gradient(to top, rgba(7, 27, 51, .94) 0%, rgba(7, 27, 51, .76) 30%, rgba(7, 27, 51, .28) 62%, rgba(7, 27, 51, .52) 100%);
}
.hero__in { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.hero__title {
  font-size: clamp(2.7rem, 1.5rem + 5.4vw, 5.6rem);
  color: #fff; margin-bottom: 26px; max-width: 22ch;
  text-wrap: balance;
}
.hero__lead {
  max-width: 64ch; color: rgba(255, 255, 255, .84);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.19rem); line-height: 1.6;
  text-wrap: pretty;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__sig {
  margin-top: 30px; font-size: .88rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.hero__scroll {
  position: absolute; left: 50%; bottom: 26px; width: 1px; height: 46px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.hero__scroll span {
  position: absolute; inset: 0 auto auto 0; width: 100%; height: 45%;
  background: linear-gradient(var(--cyan), transparent);
  animation: drop 2.1s var(--ease) infinite;
}
@keyframes drop { 0% { transform: translateY(-110%); } 100% { transform: translateY(240%); } }

/* --------------------------------------------------------------- pilares -- */
.pillars { padding: var(--sec) 0 clamp(16px, 2.2vw, 30px); }
.pillars__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 64px); }
.pillar { border-top: 1px solid var(--line); padding-top: 26px; }
.ico { width: 30px; height: 30px; color: var(--teal); margin-bottom: 18px; }
.pillar h2 { font-family: var(--display); font-size: 1.72rem; margin-bottom: 12px; }
.pillar p { color: var(--on-paper-dim); font-size: 1rem; }

/* ----------------------------------------------------------- ideia central */
.idea { padding: var(--sec) 0; }
/* 24ch punha esta frase em quatro linhas com "it." sozinho na ultima. Com 34ch
   e `balance` ela cai em duas ou tres linhas equilibradas, e nenhuma linha
   termina com uma palavra solta. */
.idea__t {
  font-size: clamp(1.85rem, 1.1rem + 3vw, 3.5rem); line-height: 1.16;
  max-width: 34ch; margin: 0 auto; text-align: center; text-wrap: balance;
}
.idea__t em { color: var(--navy); }

/* -------------------------------------------------------------- cabecalho -- */
/* O cabecalho de secao e centrado, e o titulo tem medida curta de proposito:
   em torno de 22ch ele cai em duas linhas na maioria das larguras, que e a
   forma que o cliente aprovou. `balance` divide as duas linhas em vez de
   deixar uma palavra sozinha embaixo, e substitui o <br> na mao. */
.sec-head { max-width: 72ch; margin-inline: auto; margin-bottom: clamp(32px, 4vw, 56px); text-align: center; }
.sec-head .display, h2.display { font-size: clamp(1.95rem, 1.2rem + 2.7vw, 3.3rem); }
.sec-head .display { max-width: 26ch; margin-inline: auto; text-wrap: balance; }
.sec-head .sec-lead { margin-inline: auto; text-wrap: pretty; }
.sec-lead { margin-top: 18px; color: var(--on-paper-dim); font-size: clamp(1rem, .95rem + .3vw, 1.13rem); }
.sec-head--light .sec-lead { color: var(--on-deep-dim); }

/* --------------------------------------------------------------- economia -- */
.savings { padding: var(--sec) 0; background: var(--paper-2); }
.calc {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(24px, 4vw, 44px); max-width: 900px;
  box-shadow: 0 24px 60px -40px rgba(14, 40, 70, .4);
}
.calc__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 28px; }
.calc__pick label { font-size: .87rem; letter-spacing: .06em; text-transform: uppercase; color: var(--on-paper-fine); }
.calc__pick select {
  font-family: var(--sans); font-size: 1.02rem; color: var(--navy);
  padding: 11px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); min-width: 240px;
}
.calc__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.calc__row span { color: var(--on-paper-dim); }
.calc__row b {
  font-weight: 500; color: var(--on-paper-fine); font-size: .93rem;
  border: 1px dashed rgba(14, 40, 70, .28); border-radius: 6px; padding: 3px 10px; white-space: nowrap;
}
.calc__row--out { border-top: 1px solid rgba(14, 40, 70, .28); }
.calc__row--out span { color: var(--navy); font-weight: 500; }
.calc__note { margin-top: 22px; font-size: .87rem; color: var(--on-paper-fine); line-height: 1.55; }

.pull {
  font-family: var(--display); font-weight: 300;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.3rem); line-height: 1.28;
  max-width: 34ch; margin-top: clamp(34px, 4vw, 56px); text-wrap: balance;
}
.pull em { font-style: italic; color: var(--navy); }
.pull--light { color: var(--on-deep); }
.pull--light em { color: var(--cyan); }

/* ------------------------------------------------------------ tratamentos -- */
.treat { padding: var(--sec) 0; }
/* `start` e nao `stretch`: as duas fichas tem numeros diferentes de itens, e
   com altura igual a de Hair abria 230px de branco entre a lista e o link */
.treat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 52px); align-items: start; }
.tcard {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tcard:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -40px rgba(14, 40, 70, .5); }
.tcard__img { aspect-ratio: 4 / 3; overflow: hidden; }
.tcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tcard:hover .tcard__img img { transform: scale(1.04); }
.tcard__body { padding: clamp(24px, 3vw, 38px); display: flex; flex-direction: column; flex: 1; }
.tcard h3 { font-family: var(--display); font-size: 2rem; margin-bottom: 20px; }
.ticks li {
  position: relative; padding-left: 26px; padding-block: 7px;
  color: var(--on-paper-dim); border-bottom: 1px solid var(--line);
}
.ticks li:last-child { border-bottom: 0; }
.ticks li::before {
  content: ''; position: absolute; left: 2px; top: 1.02em; width: 9px; height: 9px;
  border-radius: 50%; background: var(--grad);
}
.tcard .link-arrow { margin-top: auto; padding-top: 22px; }

/* --------------------------------------------------------- como funciona -- */
.how { padding: var(--sec) 0; background: var(--deep); color: var(--on-deep); }
.how .display { color: #fff; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-deep); border-top: 1px solid var(--line-deep); }
.steps li { background: var(--deep); padding: clamp(26px, 3vw, 40px) clamp(20px, 2.4vw, 34px); }
.steps__n {
  display: block; font-family: var(--display); font-size: 1.05rem;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  margin-bottom: 16px; letter-spacing: .04em;
}
.steps h3 { font-size: 1.13rem; font-weight: 500; font-family: var(--sans); margin-bottom: 10px; letter-spacing: 0; }
.steps p { color: var(--on-deep-dim); font-size: .96rem; }

/* ---------------------------------------------------------------- brasil -- */
.brazil { padding: var(--sec) 0; }
.mosaic {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(150px, 17vw, 230px); gap: clamp(10px, 1.2vw, 18px);
}
.mo { margin: 0; position: relative; overflow: hidden; border-radius: 14px; }
.mo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.mo:hover img { transform: scale(1.05); }
.mo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 20px 18px;
  color: #fff; font-size: .95rem; font-weight: 500; line-height: 1.35;
  text-wrap: pretty;
  background: linear-gradient(to top, rgba(7, 27, 51, .86), rgba(7, 27, 51, .55) 45%, transparent);
}
/* posicionamento explicito: deixar o auto-placement resolver abria dois buracos
   na coluna 4, porque o item largo nao cabia no resto da linha e pulava */
.mosaic > :nth-child(1) { grid-column: 1;        grid-row: 1 / span 2; }
.mosaic > :nth-child(2) { grid-column: 2;        grid-row: 1; }
.mosaic > :nth-child(3) { grid-column: 3 / span 2; grid-row: 1; }
.mosaic > :nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.mosaic > :nth-child(5) { grid-column: 4;        grid-row: 2; }
.mosaic > :nth-child(6) { grid-column: 1;        grid-row: 3; }
.mosaic > :nth-child(7) { grid-column: 2 / span 3; grid-row: 3; }

/* -------------------------------------------------------------- cronograma */
.sched { padding: var(--sec) 0; background: var(--deep-2); color: var(--on-deep); }
.sched .display { color: #fff; }
/* as tres entradas da soma, numeradas. Em tela larga elas ficam lado a lado,
   que e como se le uma soma; no celular viram uma lista de cima para baixo. */
.formula {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px); padding-bottom: clamp(22px, 2.6vw, 34px);
}
.formula li { display: grid; gap: 8px; align-content: start; }
.formula__n {
  font-family: var(--display); font-size: .96rem; letter-spacing: .08em; color: var(--cyan);
}
.formula__t {
  font-family: var(--display); font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem);
  color: #fff; line-height: 1.3;
}
/* a linha do resultado leva um fio em cima, como o traco de uma soma: sem ele
   ela ficava solta a esquerda, parecendo uma quarta entrada da lista */
.formula__eq {
  font-family: var(--display); font-size: clamp(1.1rem, .9rem + 1vw, 1.7rem);
  color: #fff; line-height: 1.4;
  padding-top: clamp(18px, 2.2vw, 28px); border-top: 1px solid var(--line-deep);
  padding-bottom: clamp(34px, 4vw, 52px);
}
.formula__eq i { font-style: normal; color: var(--cyan); padding-right: 8px; }
/* no celular as tres colunas apertavam cada rotulo em duas linhas. Empilhadas,
   com o numero na frente, elas voltam a ler como o que sao: etapas em ordem. */
@media (max-width: 640px) {
  .formula { grid-template-columns: 1fr; gap: 14px; }
  .formula li { grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; }
}
.week { border-top: 1px solid var(--line-deep); }
.week li {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line-deep);
}
.week b { font-weight: 500; color: #fff; }
.week span { color: var(--on-deep-dim); }
.sched__note { margin-top: 26px; font-size: .9rem; color: var(--on-deep-fine); }

/* --------------------------------------------------------------- medicos -- */
.phys { padding: var(--sec) 0; background: var(--paper-2); }
.phys__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 80px); align-items: start; }
.creds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.creds li {
  padding: 12px 0 12px 24px; border-bottom: 1px solid var(--line);
  color: var(--on-paper-dim); font-size: .97rem; position: relative;
}
.creds li::before {
  content: ''; position: absolute; left: 0; top: 1.35em; width: 11px; height: 1px; background: var(--teal);
}

/* --------------------------------------------------------------- destino -- */
.dest { padding: var(--sec) 0; }
.dest__row { display: grid; grid-template-columns: .95fr 1fr; gap: clamp(30px, 4.5vw, 70px); align-items: start; }
.dest__img {
  margin: 0; border-radius: 16px; overflow: hidden; position: sticky; top: 110px;
  aspect-ratio: 4 / 5;
}
/* Proporcao fixa, nunca esticada pela coluna de texto: as duas abas tem textos
   de tamanhos diferentes, e com align-self:stretch a foto de Sao Paulo ficava
   maior que a do Rio e o bloco pulava na troca de aba. 1/1 fica perto da
   altura do texto nas larguras de notebook e nao abre vazio embaixo. */
.dest__panel .dest__img { aspect-ratio: 1 / 1; align-self: start; position: static; }
.dest__img img { width: 100%; height: 100%; object-fit: cover; }
.mod { padding: 22px 0; border-top: 1px solid var(--line); }
.mod:first-child { border-top: 0; padding-top: 0; }
.mod h3 { font-family: var(--display); font-size: 1.45rem; margin-bottom: 8px; }
.mod p { color: var(--on-paper-dim); font-size: 1rem; }
.dest__next { margin-top: 44px; color: var(--on-paper-fine); font-size: .97rem; }

/* -------------------------------------------------------------- concierge -- */
.conc { padding: var(--sec) 0; background: var(--deep); color: var(--on-deep); }
.conc .display { color: #fff; }
.conc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 34px); }
.cc { border: 1px solid var(--line-deep); border-radius: 14px; padding: clamp(22px, 2.6vw, 32px); }
.cc h3 { font-size: 1.1rem; font-weight: 500; font-family: var(--sans); margin-bottom: 9px; }
.cc p { color: var(--on-deep-dim); font-size: .95rem; }
.conc__hotel {
  margin-top: clamp(34px, 4vw, 56px); display: grid; grid-template-columns: .8fr 1fr;
  gap: clamp(24px, 3.4vw, 52px); align-items: center;
  border-top: 1px solid var(--line-deep); padding-top: clamp(34px, 4vw, 56px);
}
.conc__hotel figure { margin: 0; border-radius: 14px; overflow: hidden; }
.conc__hotel h3 { font-family: var(--display); font-size: 1.7rem; font-weight: 300; margin-bottom: 14px; }
.conc__hotel p { color: var(--on-deep-dim); }
.conc__hotel p + p { margin-top: 14px; }
.fine { font-size: .89rem; color: var(--on-deep-fine); }

/* ------------------------------------------------------------------- kit -- */
/* A secao "The welcome kit" saiu da home a pedido do dono. Estas regras ficam
   porque `portal.html` tem um <article class="card kit"> que hoje come este
   padding vindo daqui, e aquela pagina esta fora do escopo desta rodada. E
   um vazamento de nome entre dois componentes diferentes: quando alguem
   puder olhar o portal, isto deve virar `padding` dentro de portal.css e
   sumir daqui. Por isso NAO entrou no ritmo `--sec`. */
.kit { padding: clamp(70px, 10vw, 130px) 0; }

/* -------------------------------------------------------------- pacotes -- */
.packs { padding: var(--sec) 0; background: var(--paper-2); }
.packs__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); }
.pk {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(24px, 2.8vw, 34px);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.pk:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -38px rgba(14, 40, 70, .55); }
.pk h3 { font-family: var(--display); font-size: 1.42rem; margin-bottom: 9px; }
.pk p { color: var(--on-paper-dim); font-size: .96rem; }
.pk--add { background: transparent; border-style: dashed; }

/* -------------------------------------------------------------- historia -- */
.story { padding: var(--sec) 0; background: var(--deep); color: var(--on-deep); }
/* a coluna da direita e uma lista de frases curtas e nao precisa de metade da
   secao; o espaco vai para o titulo, que caia em seis linhas */
.story__grid {
  display: grid; grid-template-columns: 1.2fr .8fr;
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.story__t { font-size: clamp(1.75rem, 1.05rem + 2.5vw, 3rem); color: #fff; max-width: 26ch; line-height: 1.18; text-wrap: balance; }
.story__t em { color: var(--cyan); }
.story__l { max-width: 42ch; }
.story__l li {
  font-family: var(--display); font-size: clamp(1.1rem, .95rem + .7vw, 1.5rem);
  padding: 13px 0; border-bottom: 1px solid var(--line-deep); color: var(--on-deep-dim);
}

/* ------------------------------------------------------------- avaliacao -- */
.eval { padding: var(--sec) 0; }
.eval__box {
  text-align: center; max-width: 720px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: 20px; background: #fff;
  padding: clamp(38px, 6vw, 70px) clamp(24px, 4vw, 60px);
  box-shadow: 0 30px 70px -50px rgba(14, 40, 70, .5);
}
.eval__box p { color: var(--on-paper-dim); margin-top: 18px; }
.eval__box .btn { margin-top: 32px; }
.eval__fine { font-size: .87rem; color: var(--on-paper-fine); margin-top: 26px; }

/* -------------------------------------------------------------------- faq -- */
.faq { padding: 0 0 var(--sec); }
.faq__list { border-top: 1px solid var(--line); max-width: 920px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative;
  font-size: clamp(1.02rem, .96rem + .3vw, 1.16rem); font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 1.5px solid var(--teal); border-bottom: 1.5px solid var(--teal);
  transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.faq details p { padding-bottom: 24px; color: var(--on-paper-dim); max-width: 66ch; }

/* ----------------------------------------------------------------- rodape -- */
/* O rodape tinha quase 100px de respiro no topo e tres faixas separadas por
   linha, o que o deixava do tamanho de uma secao. Aqui ele volta a ser
   rodape. */
.foot { background: var(--deep); color: var(--on-deep); padding: clamp(38px, 4.4vw, 62px) 0 22px; }
/* a coluna da marca nao precisa de metade do rodape: o espaco vai para os
   quatro blocos de links, senao "Cancellation & Refunds" quebra em duas linhas */
.foot__top { display: grid; grid-template-columns: minmax(200px, .85fr) 2.6fr; gap: clamp(34px, 5vw, 70px); }
.brand--foot .brand__word { color: #fff; }
.brand--foot .brand__word b { color: var(--cyan); }
.foot__sig {
  margin-top: 12px; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-deep-fine);
}
/* quatro colunas porque sao quatro blocos: com repeat(3) a coluna Legal caia
   sozinha numa segunda linha, com metade do rodape vazia ao lado dela */
.foot__nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 26px; }
.foot__nav h3 {
  font-size: .74rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--on-deep-fine); margin-bottom: 9px; font-weight: 500; font-family: var(--sans);
}
.foot__nav a {
  display: block; text-decoration: none; padding: 7px 0;
  color: var(--on-deep-dim); font-size: .9rem; transition: color .25s;
}
.foot__nav a:hover { color: #fff; }
.foot__legal {
  margin-top: clamp(26px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--line-deep);
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
}
.foot__legal p { font-size: .81rem; color: var(--on-deep-fine); line-height: 1.55; }
.foot__base {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-deep);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-size: .82rem; color: var(--on-deep-fine);
}

/* ---------------------------------------------------------------- reveal -- */
/* ------------------------------------------------------- quebra de linha -- */
/* Regra geral do acabamento: nenhum titulo termina com uma palavra sozinha na
   ultima linha. `balance` distribui as linhas por peso em titulo curto, e
   `pretty` puxa uma palavra da linha de cima em paragrafo longo. Resolve sem
   <br> na mao, que so funciona numa largura e quebra em todas as outras. */
h1, h2, h3, h4 { text-wrap: balance; }
.steps h3, .cc h3, .mod h4, .pillar h2, .tcard h3, .pkg__n,
.trust__grid .tr b, .dcard h3, .dnext__o b,
.dest__facts dt, .faq summary { text-wrap: balance; }
.sec-lead, .pkg__d, .dcard p, .mod p, .pillar p { text-wrap: pretty; }

.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

/* ------------------------------------------------------------ responsivo -- */
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .conc__grid { grid-template-columns: repeat(2, 1fr); }
  .packs__grid { grid-template-columns: repeat(2, 1fr); }
  .dest__row { grid-template-columns: 1fr; }
  .dest__img { position: static; aspect-ratio: 16 / 10; }   /* retrato so faz sentido ao lado da coluna */
  .phys__grid { grid-template-columns: 1fr; }
  .conc__hotel { grid-template-columns: 1fr; }
  .foot__top { grid-template-columns: 1fr; }
  /* abaixo de 1000px quatro colunas de links ficam com 150px e quebram todas
     as linhas: passa para duas, com Account e Legal ocupando a largura toda */
  .foot__nav { grid-template-columns: 1fr 1fr; }
  .foot__nav .foot__legalcol,
  .foot__nav .foot__acctcol { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 26px; }
  .foot__nav .foot__legalcol h3,
  .foot__nav .foot__acctcol h3 { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed; inset: 0 0 auto 0; z-index: -1;
    flex-direction: column; gap: 0;
    background: rgba(7, 27, 51, .98); backdrop-filter: blur(14px);
    padding: 84px var(--gutter) 26px;
    /* painel de altura cheia: senao o CTA do hero vaza por baixo do menu e
       aparecem dois "Start My Evaluation" empilhados */
    min-height: 100vh; min-height: 100dvh;
    transform: translateY(-101%); transition: transform .45s var(--ease);
  }
  .nav.is-open { transform: none; }
  .nav a { color: #fff; font-size: 1.15rem; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .chrome.is-stuck .nav a { color: #fff; }
  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer;
  }
  .burger span { display: block; height: 1.5px; width: 22px; background: #fff; transition: transform .35s var(--ease), opacity .3s; }
  .chrome.is-stuck .burger span { background: var(--navy); }
  .burger[aria-expanded="true"] span { background: #fff; }
  .burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
  .burger[aria-expanded="true"] span:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .chrome__act .btn--sm { display: none; }
  /* o gradiente ciano ja destaca sobre o navy do menu, entao o botao mantem
     a cor do CTA do site */
  .nav a.nav__cta {
    display: inline-flex; align-self: flex-start;
    margin-top: 26px; padding: 14px 30px;
    border-bottom: 0; font-size: .97rem; color: #04202c;
  }
  .nav a.nav__cta:hover { transform: none; }
  .nav a.nav__cta::after { display: none; }
  .chrome.is-stuck .nav a.nav__cta { color: #04202c; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .pillars__grid { grid-template-columns: 1fr; }
  .treat__grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .conc__grid { grid-template-columns: 1fr; }
  .packs__grid { grid-template-columns: 1fr; }
  .creds { grid-template-columns: 1fr; }
  /* solta o posicionamento explicito do desktop e reagrupa em duas colunas.
     Precisa ser :nth-child(n) e nao "*": o seletor de cima e mais especifico
     que o universal, entao o reset simples nao derrubava a grade do desktop. */
  .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
  .mosaic > :nth-child(n) { grid-column: auto; grid-row: auto; }
  /* proporcao no lugar de altura fixa: com grid-auto-rows a peca de duas
     colunas ficava com a mesma altura da de uma so, virando uma tira 2:1 e
     cortando a legenda de duas linhas. */
  .mo { aspect-ratio: 1 / 1; }
  /* 3, 4 e 7 ocupam a linha inteira: sao as panoramicas, e sem isso o item
     largo pula de linha e deixa buraco na coluna 2 */
  .mosaic > :nth-child(3),
  .mosaic > :nth-child(4),
  .mosaic > :nth-child(7) { grid-column: span 2; aspect-ratio: 16 / 9; }
  .story__grid { grid-template-columns: 1fr; }
  .week li { grid-template-columns: 1fr; gap: 4px; }
  .foot__legal { grid-template-columns: 1fr; }
  .hero { min-height: 92svh; }
  .calc__row { flex-direction: column; align-items: flex-start; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll span { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Entrada no portal (signin.html)
   Painel esquerdo mostra o que existe atras da porta, porque a sessao 27 do
   briefing lista dez areas do portal e o cliente precisa ver que ha produto ali.
   ========================================================================== */
.auth-body { background: var(--deep); }
.auth { display: grid; grid-template-columns: .82fr 1fr; min-height: 100svh; }

.auth__side { position: relative; overflow: hidden; display: flex; isolation: isolate; }
.auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.auth__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(7, 27, 51, .68), rgba(7, 27, 51, .93) 68%);
}
.auth__sideIn {
  display: flex; flex-direction: column; justify-content: space-between; gap: clamp(20px, 4vh, 40px);
  padding: clamp(26px, 4.5vh, 56px) clamp(30px, 4vw, 56px); width: 100%; color: var(--on-deep);
}
.auth__claim {
  font-size: clamp(1.5rem, 1rem + 2vh, 2.5rem); color: #fff;
  max-width: 16ch; line-height: 1.18;
}
.auth__list {
  margin-top: clamp(16px, 3vh, 30px); display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px;
  max-width: 420px;
}
.auth__list li {
  padding: clamp(6px, 1.2vh, 10px) 0 clamp(6px, 1.2vh, 10px) 22px; position: relative;
  color: var(--on-deep-dim); font-size: .95rem;
  border-bottom: 1px solid var(--line-deep);
}
.auth__list li::before {
  content: ''; position: absolute; left: 0; top: 1.25em; width: 10px; height: 1px; background: var(--teal);
}
.auth__sig {
  font-size: .8rem; letter-spacing: .11em; text-transform: uppercase;
  color: var(--on-deep-fine);
}

.auth__main {
  background: var(--paper); display: flex; flex-direction: column;
  align-items: center; justify-content: center; position: relative;
  padding: clamp(44px, 7vh, 88px) var(--gutter) clamp(18px, 3.4vh, 56px);
}
.auth__back {
  position: absolute; top: clamp(22px, 3vw, 38px); right: var(--gutter);
  text-decoration: none; font-size: .89rem; color: var(--on-paper-fine);
  display: inline-flex; align-items: center; gap: 8px; transition: color .25s;
}
.auth__back::before { content: '←'; }
.auth__back:hover { color: var(--navy); }

.auth__box { width: 100%; max-width: 430px; }
.auth__t { font-size: clamp(1.7rem, 1rem + 2.2vh, 2.6rem); }
.auth__sub { margin-top: clamp(7px, 1.1vh, 12px); color: var(--on-paper-dim); font-size: clamp(.94rem, .9rem + .2vh, 1rem); }
.auth__form { margin-top: clamp(14px, 2.6vh, 30px); }

.fld { margin-bottom: clamp(11px, 2vh, 20px); }
.fld__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fld label {
  display: block; margin-bottom: clamp(5px, .8vh, 8px); font-size: .82rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; color: var(--on-paper-fine);
}
.fld__aux { font-size: .84rem; color: var(--navy); text-decoration: none; }
.fld__aux:hover { text-decoration: underline; }
.fld input[type="email"], .fld input[type="password"], .fld input[type="text"] {
  width: 100%; font-family: var(--sans); font-size: 1.02rem; color: var(--on-paper);
  padding: clamp(10px, 1.7vh, 14px) 16px; background: #fff;
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .25s, box-shadow .25s;
}
.fld input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(18, 191, 162, .16);
}
.fld__pass { position: relative; }
.fld__pass input { padding-right: 50px; }
.peek {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer; color: var(--on-paper-fine);
  border-radius: 8px;
}
.peek svg { width: 20px; height: 20px; }
.peek:hover { color: var(--navy); }
.peek[aria-pressed="true"] { color: var(--teal); }

.fld__err { display: none; margin-top: 7px; font-size: .85rem; color: #c0392b; }
.fld.is-bad input { border-color: #c0392b; }
.fld.is-bad .fld__err { display: block; }

.check { display: flex; align-items: center; gap: 10px; margin: 2px 0 clamp(10px, 2.3vh, 26px); cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--teal); }
.check span { font-size: .93rem; color: var(--on-paper-dim); }

.btn--full { width: 100%; padding-block: clamp(12px, 2.1vh, 16px); }

@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth__side { min-height: 300px; }
  .auth__sideIn { gap: 26px; }
  .auth__list { display: none; }
  .auth__main { padding-top: clamp(44px, 7vw, 70px); }
  .auth__back { position: static; align-self: flex-start; margin-bottom: 26px; }
  .auth__box { max-width: 460px; }
}

/* ---------------------------------------------- ajustes vindos da auditoria */
/* secao 6: a frase que fecha o quadro de economia */
.calc__after {
  margin-top: 22px; font-family: var(--display); font-weight: 300;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem); color: var(--navy);
}
.calc__after + .calc__note { margin-top: 14px; }


/* ------------------------------------------------------------------ idioma */
/* Codigo de duas letras, nao bandeira. Bandeira nomeia pais, e idioma nao e
   pais: quem le espanhol aqui mora nos Estados Unidos, e uma bandeira da
   Espanha diria a coisa errada para uma cliente mexicana ou colombiana.
   Com tres idiomas, tres circulos tambem apertavam demais o cabecalho.
   O bloco inteiro e montado pelo build (i18n_traduzir.py), entre as marcas
   <!--LANG--> e <!--/LANG-->, e so oferece idioma em que a pagina existe. */
.lang { display: flex; align-items: center; gap: 2px; flex: none; }
.lang__b {
  display: grid; place-items: center;
  min-width: 34px; height: 26px; padding: 0 9px; border-radius: 999px;
  color: var(--on-deep-dim);
  transition: color .25s var(--ease), background-color .25s var(--ease);
}
.lang__c {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; line-height: 1;
}
.lang__b:hover { color: var(--on-deep); }
.lang__b.is-on { color: var(--on-deep); background: rgba(255, 255, 255, .14); }

/* Fundo claro: cabecalho preso ao topo, telas de login e o topo dos apps. */
.chrome.is-stuck .lang__b,
.lang--light .lang__b { color: var(--on-paper-fine); }
.chrome.is-stuck .lang__b:hover,
.lang--light .lang__b:hover { color: var(--navy); }
.chrome.is-stuck .lang__b.is-on,
.lang--light .lang__b.is-on { color: var(--navy); background: rgba(14, 40, 70, .08); }

/* No celular o pilulinha de 34x26 e menor que o dedo. A area clicavel sobe
   para 42px sem mexer no desenho: o fundo continua so no .lang__c. */
@media (max-width: 860px) {
  .lang { order: 2; }
  .lang__b { height: 42px; min-width: 42px; padding: 0 4px; }
  .lang__b.is-on, .lang__b:hover,
  .chrome.is-stuck .lang__b.is-on, .lang--light .lang__b.is-on { background: transparent; }
  .lang__b .lang__c { padding: 6px 9px; border-radius: 999px; }
  .lang__b.is-on .lang__c { background: rgba(255, 255, 255, .14); }
  .chrome.is-stuck .lang__b.is-on .lang__c,
  .lang--light .lang__b.is-on .lang__c { background: rgba(14, 40, 70, .08); }
}
.auth__topbar {
  position: absolute; top: clamp(18px, 2.6vh, 34px); right: var(--gutter);
  display: flex; align-items: center; gap: 14px;
}
.auth__topbar .auth__back { position: static; }

/* ============================================================
   Rodape legal compartilhado (foot.js) e faixa de emergencia
   ============================================================ */
.foot--slim{padding:2.4rem 0 1.6rem}
.foot__emerg{
  border:1px solid rgba(180,67,58,.35);
  background:rgba(180,67,58,.07);
  border-radius:10px;padding:.85rem 1rem;margin:0 0 1.4rem;
}
.foot__emerg p{margin:0;font-size:.84rem;line-height:1.55;color:#f0d9d6}
.foot--slim .foot__emerg p{color:#f0d9d6}
.foot__emerg p b{color:#ffb3aa}

.foot__legalnav{
  display:flex;flex-wrap:wrap;gap:0 1.15rem;
  padding:0 0 .85rem;margin:0 0 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
/* linha densa de links legais: o padding vertical e o que faz cada item ter
   altura de dedo no celular, onde antes cada um tinha 20px */
.foot__legalnav a{
  display:inline-block;padding:6px 0;
  font-size:.79rem;color:rgba(255,255,255,.72);text-decoration:none;
  transition:color .2s;
}
.foot__legalnav a:hover{color:#fff;text-decoration:underline}

/* coluna legal no rodape do site publico */
.foot__nav .foot__legalcol a{font-size:.82rem}

/* faixa de emergencia dentro das telas de app */
.emergbar{
  display:flex;gap:.6rem;align-items:flex-start;
  border:1px solid rgba(180,67,58,.3);background:rgba(180,67,58,.06);
  border-radius:10px;padding:.75rem .9rem;margin:0 0 1.3rem;
}
.emergbar svg{width:18px;height:18px;flex:0 0 auto;margin-top:.1rem;color:#b4433a}
.emergbar p{margin:0;font-size:.83rem;line-height:1.55;color:var(--ink-2,#33465c)}
.emergbar p b{color:#8f2a20}

/* header ja solido nas paginas internas, sem depender do scroll */
.chrome.is-fixedsolid{background:var(--paper);border-bottom:1px solid var(--line)}

/* variante do ghost para fundo claro */
.btn--line{
  background:transparent;color:var(--navy);box-shadow:none;
  border:1px solid var(--line);
}
.btn--line:hover{background:rgba(14,40,70,.05);border-color:rgba(14,40,70,.3);box-shadow:none}

/* ============================================================
   Pacotes de concierge
   Cada item traz o rotulo de quem entrega e quem cobra, porque
   um total unico faria a RefreshU parecer vendedora de servico
   medico, que e exatamente o que o guia proibe.
   ============================================================ */
.pkgs{padding:var(--sec) 0;background:var(--paper-2)}
.pkgs__key{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin:0 0 1.8rem}
.pkey{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.72rem;letter-spacing:.03em;color:var(--on-paper-dim);
}
.pkey::before{content:"";width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.pkey--inc::before{background:var(--teal)}
.pkey--coord::before{background:var(--cyan)}
.pkey--third::before{background:#c8891f}
.pkey--med::before{background:var(--navy)}

.pkgs__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.1rem}
.pkg{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:1.4rem 1.5rem;display:flex;flex-direction:column;position:relative;
}
.pkg--hi{border-color:rgba(37,198,224,.5);box-shadow:0 18px 44px -30px rgba(14,40,70,.35)}
.pkg__tag{
  position:absolute;top:-.65rem;left:1.4rem;
  background:var(--grad);color:#04222c;
  font-size:.64rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:.25rem .6rem;border-radius:100px;
}
.pkg__n{font-family:var(--display);font-size:1.3rem;font-weight:400;margin:0 0 .4rem;color:var(--navy)}
.pkg__d{margin:0 0 1rem;font-size:.88rem;line-height:1.6;color:var(--on-paper-dim)}
.pkg__l{list-style:none;margin:0 0 .9rem;padding:0;display:grid;gap:.55rem}
.pkg__l li{
  position:relative;padding-left:1.1rem;
  font-size:.86rem;line-height:1.55;color:var(--on-paper-dim);
}
/* Marcador padrao. As quatro cores so existem onde ha legenda explicando o
   que cada uma quer dizer, que hoje e a tela de vendas: no site publico a
   legenda saiu, entao o quadradinho volta a ser um marcador de lista. Quem
   entrega e quem cobra continua dito por escrito, no texto de cada item, na
   linha de abertura da secao e no bloco "What is never part of a package". */
.pkg__l li::before{
  content:"";position:absolute;left:0;top:.45em;
  width:9px;height:9px;border-radius:2px;background:var(--teal);
}
.pkg__l li[data-k="inc"]::before{background:var(--teal)}
.pkg__l li[data-k="coord"]::before{background:var(--cyan)}
.pkg__l li[data-k="third"]::before{background:#c8891f}
.pkg__l li[data-k="med"]::before{background:var(--navy)}
.pkg__note{
  margin:auto 0 0;padding-top:.8rem;border-top:1px solid var(--line);
  font-size:.78rem;line-height:1.55;color:var(--on-paper-fine);
}

/* a secao inteira e centrada: o par de botoes encostado a esquerda era o unico
   elemento fora do eixo */
.pkgs__cta{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-top:1.8rem}

/* dois destinos */

/* ============================================================
   Sinais de confianca
   ============================================================ */
.trust{padding:var(--sec) 0}
.trust__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;
}
.trust__grid .tr{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.trust__grid .tr > a,.trust__grid .tr{display:block}
.trust__grid .tr > a{padding:1.15rem 1.25rem;text-decoration:none;transition:border-color .2s,transform .2s}
.trust__grid .tr:not(:has(a)){padding:1.15rem 1.25rem}
.trust__grid .tr > a:hover{background:rgba(14,40,70,.02)}
.trust__grid .tr__i{
  display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:rgba(18,191,162,.12);color:var(--teal);margin-bottom:.7rem;
}
.trust__grid .tr__i svg{width:19px;height:19px}
.trust__grid .tr b{display:block;font-size:.94rem;color:var(--navy);margin-bottom:.28rem}
/* :not(.tr__i) para o icone nao cair no display:block e perder a centragem */
.trust__grid .tr span:not(.tr__i){display:block;font-size:.84rem;line-height:1.55;color:var(--on-paper-dim)}
.trust__note{margin-top:1.2rem}

/* linha de papel, obrigatoria na home */
.roleline{
  margin:0;padding:.85rem 0;background:var(--paper-2);
  border-bottom:1px solid var(--line);
  font-size:.84rem;line-height:1.55;color:var(--on-paper-dim);
}
.roleline .wrap{display:block}
.sec-note{margin:.5rem 0 0;font-size:.82rem;color:var(--on-paper-fine);line-height:1.55}

/* --- Destino: duas abas, uma cidade em cada -------------------------------
   O que a RefreshU coordena e igual nos dois destinos, entao os modulos ficam
   fora das abas. Dentro delas so entra o que muda de cidade para cidade. */
.dest__tabs { display: flex; gap: 8px; margin: 0 0 clamp(22px, 3vw, 34px); flex-wrap: wrap; }
.dest__tab {
  padding: 12px 26px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--on-paper-dim);
  font-family: inherit; font-size: .95rem; cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.dest__tab:hover { color: var(--navy); border-color: var(--navy); }
.dest__tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.dest__panel { display: grid; grid-template-columns: .85fr 1fr; gap: clamp(28px, 4vw, 62px); align-items: start; }
.dest__panel[hidden] { display: none; }
.dest__lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); line-height: 1.55; color: var(--navy); margin: 0 0 26px; }
.dest__facts { margin: 0; display: grid; gap: 20px; }
.dest__facts dt {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-paper-fine); margin-bottom: 5px;
}
.dest__facts dd { margin: 0; font-size: .99rem; line-height: 1.6; color: var(--on-paper-dim); }

.dest__same { margin-top: clamp(40px, 5vw, 70px); }
.dest__sameT {
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--on-paper-fine); margin: 0 0 22px;
}
.dest__mods h4 { font-family: var(--display); font-size: 1.1rem; font-weight: 400; margin: 0 0 .4rem; color: var(--navy); }

@media (max-width: 1000px) {
  .dest__panel { grid-template-columns: 1fr; }
  .dest__panel .dest__img { position: static; aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  /* rotulo inteiro em cada aba, mesmo estreito: cortar "Rio de Janeiro" seria pior */
  .dest__tab { flex: 1 1 auto; padding: 12px 16px; font-size: .9rem; }
}

/* Entre 861px e 1100px o menu inteiro e o botao do topo disputam a mesma
   linha e o botao saia para fora da tela. O menu ja tem o proprio CTA no
   fim, entao o do topo e que sai. */
@media (max-width: 1100px) { .chrome__act .btn--sm { display: none; } }

/* --- Submenu de destinos ---------------------------------------------------
   Abre no hover e no foco. O foco importa: sem ele, quem navega por teclado
   nunca alcanca São Paulo nem Rio, porque o item pai e um link que leva para
   outro lugar. */
.nav__has { position: relative; display: flex; align-items: center; }
.nav__has > a { display: inline-flex; align-items: center; gap: 5px; }
.nav__chev { width: 15px; height: 15px; flex: none; transition: transform .3s var(--ease); }
.nav__has:hover .nav__chev, .nav__has:focus-within .nav__chev { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0;
  min-width: 310px; padding: 10px; border-radius: 16px;
  background: #fff; box-shadow: 0 24px 60px rgba(4, 32, 44, .18);
  display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index: 60;
}
/* a ponte invisivel evita o submenu fechar no vao entre o item e o painel */
.nav__sub::before { content: ''; position: absolute; inset: -16px 0 100% 0; }
.nav__has:hover .nav__sub, .nav__has:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__sub a {
  display: grid; gap: 2px; padding: 13px 15px; border-radius: 11px;
  color: var(--navy); text-decoration: none; transition: background-color .25s;
}
.nav__sub a::after { display: none; }
.nav__sub a:hover { background: rgba(4, 32, 44, .05); color: var(--navy); }
.nav__sub b { font-size: 1rem; font-weight: 500; }
.nav__sub span { font-size: .84rem; line-height: 1.4; color: var(--on-paper-dim); }
.nav__subAll {
  margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px;
  font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-paper-fine) !important;
}

/* No celular o menu vira uma lista vertical: o submenu abre junto, sem hover. */
@media (max-width: 1100px) {
  .nav__has { display: block; }
  .nav__sub {
    position: static; translate: none; transform: none; min-width: 0;
    opacity: 1; visibility: visible; background: transparent; box-shadow: none;
    padding: 4px 0 0 16px;
  }
  .nav__sub::before { display: none; }
  .nav__sub a { padding: 11px 0; border-radius: 0; color: #fff; }
  .nav__sub a:hover { background: transparent; }
  .nav__sub span { color: rgba(255, 255, 255, .62); }
  .nav__subAll { display: none; }
  .nav__chev { display: none; }
}

/* --- Paginas de destino ---------------------------------------------------
   Os passeios sao agrupados por esforco fisico e nao por categoria: a pessoa
   esta em recuperacao, e a pergunta que ela faz nao e "o que tem para fazer",
   e "o que eu consigo fazer hoje". */
.dhero { position: relative; min-height: 62svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; padding-block: calc(var(--alt-nav, 78px) + 5rem) clamp(38px, 5vw, 78px); }
.dhero__foto { position: absolute; inset: 0; z-index: -2; }
.dhero__foto img { width: 100%; height: 100%; object-fit: cover; }
.dhero__veu { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(4,32,44,.9) 0%, rgba(4,32,44,.42) 55%, rgba(4,32,44,.5) 100%); }
.dhero__g { position: relative; color: #fff; }
.dhero__k { margin: 0 0 10px; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.64); }
.dhero h1 { color: #fff; margin: 0; }
.dhero__s { margin: 14px 0 0; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: rgba(255,255,255,.86); max-width: 38ch; text-wrap: balance; }

.dlead { max-width: 62ch; margin: 0 auto; font-size: clamp(1.1rem, 1rem + .55vw, 1.45rem); line-height: 1.5; color: var(--navy); text-align: center; }
.dwhy { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 44px); margin-top: clamp(34px, 4vw, 58px); }
.dwhy__i b { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-paper-fine); margin-bottom: 9px; }
.dwhy__i p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--on-paper-dim); }

.dgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: clamp(14px, 1.8vw, 22px); margin-bottom: 22px; }
.dcard { padding: 22px 24px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.dcard h3 { margin: 0 0 4px; font-family: var(--display); font-size: 1.16rem; font-weight: 400; color: var(--navy); }
.dcard__m { display: block; margin-bottom: 9px; font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--on-paper-fine); }
.dcard p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--on-paper-dim); }

.deff { margin-bottom: clamp(30px, 4vw, 52px); }
.deff__h { margin-bottom: 18px; }
.deff__h h3 { margin: 0 0 5px; font-family: var(--display); font-size: 1.4rem; font-weight: 400; color: var(--navy); }
.deff__h p { margin: 0; font-size: .94rem; color: var(--on-paper-dim); max-width: 62ch; }

.dpend { padding: 20px 22px; border: 1px dashed var(--line); border-radius: 13px; font-size: .92rem; color: var(--on-paper-fine); margin: 0 0 22px; }

.dnext { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(24px, 3vw, 48px); align-items: center; }
.dnext h2 { margin: 0 0 10px; }
.dnext p { margin: 0 0 24px; color: var(--on-paper-dim); max-width: 46ch; }
.dnext__o { display: grid; gap: 3px; padding: 24px 26px; border: 1px solid var(--line); border-radius: 15px; background: #fff; text-decoration: none; transition: border-color .3s, transform .3s var(--ease); }
.dnext__o:hover { border-color: var(--navy); transform: translateY(-2px); }
.dnext__o span { font-size: .8rem; color: var(--on-paper-fine); }
.dnext__o b { font-family: var(--display); font-size: 1.35rem; font-weight: 400; color: var(--navy); }
.dnext__o svg { width: 20px; height: 20px; color: var(--navy); margin-top: 6px; }

@media (max-width: 860px) { .dwhy, .dnext { grid-template-columns: 1fr; } }

/* --- Pilha que sobe: cartoes que se cobrem conforme a pagina rola -----------
   Cada cartao gruda no topo com um deslocamento crescente, entao o seguinte
   sobe por cima do anterior e sobra so a borda do que ficou atras. Sem JS: e
   position:sticky e uma variavel de indice.

   Desligado abaixo de 900px e em prefers-reduced-motion. No celular a pilha
   viraria uma torre de cartoes cobrindo texto, e o empilhamento e decoracao:
   a lista em coluna diz a mesma coisa. */
@media (min-width: 901px) {
  .stack { display: block; }
  .stack > * {
    position: sticky;
    top: calc(var(--alt-nav, 78px) + 26px + var(--i, 0) * 22px);
    margin-bottom: 26px;
    transition: box-shadow .4s var(--ease);
  }
  /* o de baixo precisa cobrir o de cima, entao o z-index sobe com o indice */
  .stack > * { z-index: calc(var(--i, 0) + 1); }
  .stack--pkgs > .pkg { background: #fff; box-shadow: 0 -2px 40px rgba(4, 32, 44, .1); }
  .stack--trust > .tr { background: var(--paper); box-shadow: 0 -2px 30px rgba(4, 32, 44, .09); }
  /* O ultimo nao gruda, para a secao inteira nao ficar presa no fim da
     rolagem. Mas ele precisa continuar POSICIONADO: com position:static o
     z-index e ignorado, o cartao anterior (que esta grudado) passava a ser
     pintado por cima, e o titulo do ultimo aparecia cortado ao meio.
     `relative` mantem o fluxo normal e devolve a ordem de pintura.
     O `top` da regra de cima precisa ser zerado junto: em sticky ele e o
     limite da grudagem, em relative vira deslocamento, e o ultimo cartao
     descia 200px, saindo do proprio bloco e caindo por cima do texto
     que vem depois dele. */
  .stack > *:last-child { position: relative; top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .stack > * { position: static !important; }
}

/* --- Destino: ritmo entre os blocos ---------------------------------------
   A primeira versao era uma parede de 33 fichas brancas iguais. O que quebra
   isso nao e mudar a ficha, e alternar o tipo de bloco: grade, foto de ponta
   a ponta, foto ao lado de texto, grade de novo. */
.dsub {
  margin: 0 0 18px; font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--on-paper-fine);
}
.dgrid--1 { grid-template-columns: 1fr; }

/* faixa que corta a pagina de ponta a ponta */
.dband { margin: 0; position: relative; }
.dband img { display: block; width: 100%; height: clamp(230px, 30vw, 400px); object-fit: cover; }
.dband figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 6vw 18px;
  background: linear-gradient(0deg, rgba(4,32,44,.72), transparent);
  color: rgba(255,255,255,.9); font-size: .86rem;
}

/* foto de um lado, conteudo do outro */
.dside { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 3.4vw, 54px); align-items: center; margin-top: clamp(30px, 4vw, 54px); }
.dside--inv { grid-template-columns: 1.2fr .8fr; }
.dside--inv figure { order: 2; }
.dside figure { margin: 0; border-radius: 16px; overflow: hidden; }
.dside figure img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; }
.dside .dgrid { margin-bottom: 0; }

@media (max-width: 900px) {
  .dside, .dside--inv { grid-template-columns: 1fr; }
  .dside--inv figure { order: 0; }
  .dside figure img { aspect-ratio: 16 / 10; }
}
.dsideP { margin: 0; font-size: .99rem; line-height: 1.65; color: var(--on-paper-dim); }