/* ==========================================================================
   Elements Digital — LP Pousadas · versão MIX
   Base escura da agência (hero, CTA, rodapé) + seções claras, tipografia
   Sora/Inter, cantos suaves e CTA em verde WhatsApp da versão de campanha.
   ========================================================================== */

/* --- TOKENS ------------------------------------------------------------- */
:root {
  /* escuro — identidade da agência */
  --dark:      #070907;
  --dark-alt:  #0A0D0B;
  --neon:      #2BE080;
  --neon-dim:  rgba(43, 224, 128, .07);
  --line-d:    rgba(255, 255, 255, .09);
  --line-d-s:  rgba(255, 255, 255, .22);
  --on-dark:   #F2F4F2;
  --on-dark-2: #C9D2CC;
  --on-dark-3: #8A938E;
  --on-dark-4: #6E7873;
  --faint:     #4C5450;

  /* claro — seções de leitura */
  --paper:     #FFFFFF;
  --paper-alt: #F5F7FA;
  --ink:       #101613;
  --ink-2:     #4A5568;
  --line-l:    #E3E9F0;

  /* CTA de campanha */
  --wa:        #25D366;   /* preenchimento do botão (com texto escuro) */
  --wa-deep:   #0F7B3C;   /* verde legível para texto sobre fundo claro */
  --wa-ink:    #06210F;   /* texto sobre o verde */

  --font:  Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: Sora, Inter, "Helvetica Neue", Arial, sans-serif;

  --maxw:  1200px;
  --pad-x: clamp(20px, 5vw, 48px);
  --sec-y: clamp(60px, 8vw, 120px);
  --r:     10px;
}

/* --- RESET -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--wa-deep); }
::selection { background: var(--neon); color: var(--dark); }

/* --- PRIMITIVAS --------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; }
.section { padding: var(--sec-y) var(--pad-x); }
.section--paper { background: var(--paper); }
.section--alt   { background: var(--paper-alt); border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); }
.section--dark  { background: var(--dark-alt); color: var(--on-dark); border-top: 1px solid var(--line-d); }

.label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wa-deep); font-weight: 600;
}
.section--dark .label, .hero .label, .cta .label { color: var(--neon); }

.h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 5.4vw, 62px);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 700;
  text-wrap: pretty;
}
.h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(27px, 3.9vw, 48px);
  line-height: 1.12;
  letter-spacing: -.025em;
  font-weight: 600;
  text-wrap: pretty;
}
.h3 { margin: 0; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -.01em; }

.em { font-style: italic; font-weight: 400; color: var(--neon); }
.section--paper .em, .section--alt .em { color: var(--wa-deep); }

.lead  { margin: 0; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.65; color: var(--ink-2); }
.body  { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.hero .lead, .cta .lead { color: var(--on-dark-2); }
.section--dark .body { color: var(--on-dark-3); }

/* --- BOTÕES ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 34px;
  border-radius: var(--r);
  border: 1px solid var(--line-d-s);
  background: transparent;
  color: var(--on-dark);
  font-family: var(--font);
  font-size: 15.5px; font-weight: 600; line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: scale(1.02); border-color: var(--neon); color: var(--neon); background: var(--neon-dim); }
.btn svg { stroke: currentColor; }

/* CTA de conversão — verde WhatsApp, o único botão preenchido */
.btn--wa {
  background: var(--wa);
  border-color: var(--wa);
  color: var(--wa-ink);
}
.btn--wa:hover {
  background: #35E778;
  border-color: #35E778;
  color: var(--wa-ink);
  box-shadow: 0 14px 34px rgba(37, 211, 102, .28);
}
.btn--ghost-l { border-color: var(--line-l); color: var(--ink); }
.btn--ghost-l:hover { border-color: var(--wa); color: var(--wa-deep); background: rgba(37, 211, 102, .06); }
.btn--block { width: 100%; }
.btn--sm { padding: 13px 24px; font-size: 14px; }

/* --- BARRA DE URGÊNCIA -------------------------------------------------- */
.ticker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px var(--pad-x);
  background: var(--dark-alt);
  border-bottom: 1px solid var(--line-d);
  color: var(--on-dark-3);
  font-size: 12.5px;
  text-align: center;
}
.ticker strong { color: var(--on-dark-2); font-weight: 600; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--neon); animation: blink 1.8s ease infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* --- HERO --------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--on-dark);
  padding: clamp(22px, 3.5vw, 40px) var(--pad-x) clamp(84px, 9vw, 112px);
  background:
    radial-gradient(720px 440px at 84% 24%, rgba(43, 224, 128, .10), transparent 62%),
    var(--dark);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(660px 500px at 74% 32%, #000, transparent 76%);
          mask-image: radial-gradient(660px 500px at 74% 32%, #000, transparent 76%);
  pointer-events: none;
}
.hero > * { position: relative; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--maxw); margin: 0 auto clamp(26px, 4vw, 44px);
}
.topbar__logo { height: 26px; width: auto; }
.topbar__place { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-4); }

.hero__grid {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(34px, 4.5vw, 54px);
  align-items: center;
  max-width: var(--maxw); margin: 0 auto;
}
.hero__copy { display: grid; gap: clamp(18px, 2.3vw, 26px); min-width: 0; }
.hero__cta { display: grid; gap: 12px; width: 100%; max-width: 400px; }
.hero__badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-dark-3); }
.hero__badge svg { stroke: var(--neon); flex: none; }

.anchor { display: grid; grid-template-columns: 1fr; gap: 12px; max-width: 620px; min-width: 0; }
.anchor__card {
  padding: 16px 20px;
  border: 1px solid var(--line-d);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .025);
}
.anchor__card--win { border-color: rgba(37, 211, 102, .34); background: rgba(37, 211, 102, .08); }
.anchor__num { font-family: var(--display); font-size: 25px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.anchor__card--win .anchor__num { color: var(--wa); }
.anchor__cap { font-size: 13px; line-height: 1.45; color: var(--on-dark-3); }

.social-proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--on-dark-3); }
.avatars { display: flex; }
.avatars span {
  width: 30px; height: 30px; margin-left: -8px;
  border-radius: 50%; border: 2px solid var(--dark);
  background: #16221C; color: var(--on-dark-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}

/* --- MOCKUPS (claros sobre o hero escuro) ------------------------------- */
.mocks { display: grid; gap: 16px; min-width: 0; }
.mock {
  background: var(--paper);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .42);
  overflow: hidden;
}
.mock__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--paper-alt);
  border-bottom: 1px solid var(--line-l);
  font-size: 11px; letter-spacing: .04em; color: var(--ink-2);
}
.mock__lights { display: flex; gap: 5px; }
.mock__lights i { width: 8px; height: 8px; border-radius: 50%; background: #D7DEE7; }
.mock__lights i:last-child { background: var(--wa); }
.mock__body { padding: 18px 20px 20px; display: grid; gap: 16px; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { display: grid; gap: 2px; min-width: 0; }
.kpi__label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.kpi__val { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.kpi__delta { font-size: 11px; font-weight: 600; color: var(--wa-deep); }
.kpi__delta--flat { color: var(--ink-2); font-weight: 400; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; border-bottom: 1px solid var(--line-l); }
.chart span { flex: 1; border-radius: 3px 3px 0 0; background: #DCE5EE; }
.chart span.is-mid { background: #7FA8C9; }
.chart span.is-hi  { background: var(--wa); }
.chart__axis { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-2); }

.mock__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; letter-spacing: .04em; color: var(--ink-2); }
.tag {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(15, 123, 60, .1); color: var(--wa-deep);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.mini-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-kpi {
  display: grid; gap: 2px; padding: 12px;
  background: var(--paper-alt); border: 1px solid var(--line-l); border-radius: 8px; min-width: 0;
}
.mini-kpi span:first-child { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.mini-kpi span:last-child  { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }

.note {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 8px;
  background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .28);
  font-size: 12.5px; color: var(--ink); line-height: 1.4;
}
.note svg { stroke: var(--wa-deep); flex: none; }

/* --- BARRA DE MÉTRICAS -------------------------------------------------- */
.metrics { background: var(--paper-alt); border-bottom: 1px solid var(--line-l); }
.metrics__grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x);
}
.metric { display: grid; gap: 4px; padding: 30px 20px; border-left: 1px solid var(--line-l); }
.metric:first-child { border-left: 0; }
.metric__val { font-family: var(--display); font-size: clamp(28px, 3.1vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; color: var(--ink); }
.metric__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* --- CABEÇALHO DE SEÇÃO ------------------------------------------------- */
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(36px, 4.5vw, 56px); max-width: 760px; }

/* --- CARDS -------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
.card {
  display: grid; gap: 15px; align-content: start;
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line-l);
  border-radius: var(--r);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.card:hover { border-color: rgba(37, 211, 102, .5); box-shadow: 0 16px 40px rgba(16, 22, 19, .09); transform: translateY(-3px); }
.section--dark .card { background: rgba(255, 255, 255, .02); border-color: var(--line-d); }
.section--dark .card:hover { background: var(--neon-dim); border-color: rgba(43, 224, 128, .45); box-shadow: none; }

.card__icon {
  width: 42px; height: 42px;
  border-radius: 8px;
  background: var(--paper-alt);
  display: flex; align-items: center; justify-content: center;
}
.card__icon svg { stroke: var(--ink); }
.section--dark .card__icon { background: rgba(43, 224, 128, .1); }
.section--dark .card__icon svg { stroke: var(--neon); }

.card__num { font-size: 12px; color: #9AA7B4; font-variant-numeric: tabular-nums; }
.card__title { margin: 0; font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -.01em; text-wrap: pretty; }

.bullets { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.bullets li { display: flex; gap: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.section--dark .bullets li { color: var(--on-dark-3); }
.bullets svg { stroke: var(--wa-deep); flex: none; margin-top: 5px; }
.section--dark .bullets svg { stroke: var(--neon); }

/* --- DEPOIMENTOS -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: 1fr; gap: 20px; }
.quote {
  margin: 0; display: grid; gap: 20px; align-content: start;
  padding: 30px 28px;
  background: var(--paper);
  border: 1px solid var(--line-l);
  border-radius: var(--r);
  transition: box-shadow .25s ease;
}
.quote:hover { box-shadow: 0 16px 40px rgba(16, 22, 19, .09); }
.quote__mark { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--wa-deep); }
.quote blockquote { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 14px; }
.quote__avatar {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--dark); color: var(--neon);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.quote__who { display: grid; }
.quote__who b { font-size: 15px; font-weight: 600; }
.quote__who span { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

.highlight {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding: 30px 32px;
  background: var(--dark); color: var(--on-dark);
  border-radius: var(--r);
}
.highlight svg { stroke: var(--neon); flex: none; }
.highlight p {
  margin: 0; flex: 1; min-width: 240px;
  font-family: var(--display);
  font-size: clamp(17px, 2.1vw, 22px);
  font-weight: 600; line-height: 1.4; letter-spacing: -.015em;
  text-wrap: pretty;
}

/* --- CTA FINAL ---------------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  padding: clamp(70px, 8.5vw, 128px) var(--pad-x);
  background: radial-gradient(660px 380px at 50% 108%, rgba(43, 224, 128, .13), transparent 64%), var(--dark);
  color: var(--on-dark);
  text-align: center;
}
.cta__inner { max-width: 820px; margin: 0 auto; display: grid; gap: 20px; justify-items: center; }
.cta__micro { font-size: 13px; color: var(--on-dark-4); }
.guarantees { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; padding-top: 4px; }
.guarantees span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--on-dark-2); }
.guarantees svg { stroke: var(--neon); flex: none; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { max-width: 900px; margin: 0 auto; border-top: 1px solid var(--line-l); }
.faq__item { border-bottom: 1px solid var(--line-l); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 23px 4px;
  background: none; border: 0;
  color: var(--ink);
  font-family: var(--font); font-size: 17px; font-weight: 600; line-height: 1.45;
  text-align: left; cursor: pointer;
  transition: color .2s ease;
}
.faq__q:hover { color: var(--wa-deep); }
.faq__sign {
  flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(15, 123, 60, .1); color: var(--wa-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600;
}
.faq__a { margin: 0; padding: 0 4px 26px; max-width: 720px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.faq__item[data-open="false"] .faq__a { display: none; }

.faq__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  max-width: 900px; margin: 36px auto 0;
  padding: 24px 26px;
  border: 1px solid var(--line-l);
  border-radius: var(--r);
  background: var(--paper);
}
.faq__foot p { margin: 0; flex: 1; min-width: 220px; font-size: 16px; color: var(--ink-2); }

/* --- RODAPÉ ------------------------------------------------------------- */
.footer { background: var(--dark); color: var(--on-dark-4); padding: 46px var(--pad-x) 38px; border-top: 1px solid var(--line-d); }
.footer__grid { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer__logo { height: 26px; width: auto; }
.footer p { margin: 0; font-size: 12.5px; line-height: 1.8; }
.footer a { color: var(--on-dark-2); }
.footer a:hover { color: var(--neon); }
.social { display: flex; gap: 12px; }
.social a { width: 40px; height: 40px; border: 1px solid var(--line-d); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease; }
.social a:hover { border-color: var(--neon); }
.social svg { stroke: var(--on-dark-2); }
.social a:hover svg { stroke: var(--neon); }
.legal { max-width: var(--maxw); margin: 30px auto 0; padding-top: 18px; border-top: 1px solid var(--line-d); }
.legal p { font-size: 11px; letter-spacing: .08em; color: var(--faint); }

/* --- CTA FIXO ----------------------------------------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
  padding: 12px var(--pad-x);
  background: rgba(7, 9, 7, .93);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-d);
  transform: translateY(115%);
  transition: transform .3s ease;
}
.sticky[data-show="true"] { transform: translateY(0); }
.sticky span { font-size: 13.5px; color: var(--on-dark-3); }

/* --- JORNADA: MOCKUPS DE CELULAR ---------------------------------------- */
.journey { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
.step { display: grid; gap: 18px; justify-items: center; text-align: center; align-content: start; grid-template-rows: 1fr auto; }
.step__cap { display: grid; gap: 6px; max-width: 300px; align-content: start; min-height: 136px; }
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: 0 auto;
  border-radius: 50%;
  background: rgba(15, 123, 60, .1); color: var(--wa-deep);
  font-size: 12px; font-weight: 700;
}
.step__t { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--ink); }
.step__d { font-size: 14px; line-height: 1.6; color: var(--ink-2); }

.phone {
  position: relative;
  width: 100%; max-width: 262px;
  height: 100%;
  border-radius: 46px;
  padding: 5px;
  background: linear-gradient(160deg, #3A3F45, #14171A 45%, #2C3237);
  box-shadow: 0 26px 56px rgba(16, 22, 19, .26);
}
.phone__screen {
  position: relative;
  border-radius: 42px;
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 480px;
  padding-bottom: 20px;
}
.phone__island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 23px;
  border-radius: 999px;
  background: #08090A;
  z-index: 2;
}
.phone__home {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 4px;
  border-radius: 999px;
  background: rgba(16, 22, 19, .3);
  z-index: 2;
}
.phone__status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 8px;
  font-size: 10.5px; font-weight: 600; color: var(--ink);
}
.phone__status i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.phone__status svg { stroke: none; fill: var(--ink); }
.phone__pad { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; flex: 1; min-height: 0; }
.phone__foot { margin-top: auto; }

/* rodapé de app / barra de input */
.tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-top: 10px; border-top: 1px solid var(--line-l);
  font-size: 8.5px; letter-spacing: .04em; color: #9AA7B4; text-align: center;
}
.tabs span { display: grid; gap: 4px; justify-items: center; }
.tabs i { width: 15px; height: 15px; border-radius: 4px; background: #E7ECF1; display: block; }
.tabs span:first-child i { background: rgba(15, 123, 60, .22); }
.tabs span:first-child { color: var(--wa-deep); font-weight: 600; }

.wa-input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: #17211D;
  font-size: 10.5px; color: #7C8A83;
}
.wa-input b { margin-left: auto; color: var(--wa); font-size: 14px; }

.inc { display: grid; gap: 6px; }
.inc span { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-2); }
.inc svg { stroke: var(--wa-deep); flex: none; }
.pay {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px;
  border: 1px solid var(--line-l); border-radius: 8px;
  font-size: 10.5px; color: var(--ink-2);
}
.pay b { color: var(--ink); font-size: 11px; }
.organic { display: grid; gap: 3px; padding-top: 2px; }
.organic__t { font-size: 12px; font-weight: 600; color: #17408B; line-height: 1.3; }
.organic__u { font-size: 10px; color: var(--ink-2); }

/* busca */
.srch {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  border: 1px solid var(--line-l); border-radius: 999px;
  font-size: 12.5px; color: var(--ink);
  box-shadow: 0 2px 8px rgba(16, 22, 19, .06);
}
.srch svg { stroke: #8A97A4; flex: none; }
.ad {
  display: grid; gap: 5px;
  padding: 12px;
  border: 1px solid var(--line-l); border-radius: 8px;
  background: var(--paper);
}
.ad--own { border-color: rgba(15, 123, 60, .45); background: rgba(37, 211, 102, .05); }
.ad__flag { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wa-deep); }
.ad__flag--ota { color: #9AA7B4; }
.ad__t { font-size: 12.5px; font-weight: 600; color: #17408B; line-height: 1.35; }
.ad__u { font-size: 10.5px; color: var(--ink-2); }
.ad__meta { font-size: 10.5px; color: var(--ink-2); }
.ad__meta b { color: var(--ink); }

/* ficha da pousada */
.room {
  height: 88px; border-radius: 10px;
  background: linear-gradient(150deg, #1E3A34, #0A0D0B 70%);
  position: relative;
}
.room::after {
  content: "Pousada · Florianópolis";
  position: absolute; left: 10px; bottom: 8px;
  font-size: 10px; color: rgba(255, 255, 255, .85);
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--ink-2); }
.row b { color: var(--ink); font-size: 13px; }
.price { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.strike { font-size: 11px; color: #9AA7B4; text-decoration: line-through; }
.save {
  padding: 3px 8px; border-radius: 999px;
  background: rgba(15, 123, 60, .1); color: var(--wa-deep);
  font-size: 10px; font-weight: 700;
}
.fake-btn {
  padding: 11px; border-radius: 8px;
  background: var(--wa); color: var(--wa-ink);
  font-size: 12.5px; font-weight: 700; text-align: center;
}

/* conversa no WhatsApp */
.chat { display: grid; gap: 8px; background: #0B1410; border-radius: 8px; padding: 11px; }
.bub { max-width: 84%; padding: 8px 11px; border-radius: 10px; font-size: 11.5px; line-height: 1.45; }
.bub--in  { background: #1C2A24; color: #E4EBE7; justify-self: start; border-bottom-left-radius: 3px; }
.bub--out { background: #14603C; color: #EAF7F0; justify-self: end; border-bottom-right-radius: 3px; }
.bub small { display: block; margin-top: 3px; font-size: 9px; opacity: .6; }
.confirm {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: rgba(37, 211, 102, .1); border: 1px solid rgba(15, 123, 60, .3);
  font-size: 11.5px; font-weight: 600; color: var(--ink);
}
.confirm svg { stroke: var(--wa-deep); flex: none; }

/* --- RESPONSIVO --------------------------------------------------------- */
@media (min-width: 768px) {
  .journey { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .metrics__grid { grid-template-columns: repeat(4, 1fr); }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
  .anchor { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr .95fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}