/* =============================================================
   Rehabitar — Landing Page Styles
   ============================================================= */

@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM_Sans_Thin.woff2") format("woff2");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM_Sans_Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM_Sans_Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM_Sans_Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("./fonts/DM_Sans_Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* Rehabitar palette — as 5 cores oficiais (rehabitar-design-tokens.md), mais 2 tintas
     tecnicamente necessárias (feedback de hover em superfície espresso e contraste de
     texto/hover em caramelo). Nada além disso: ver decisão registrada em styles.css. */
  --rh-espresso:       #2C1F14;
  --rh-espresso-soft:  #3D2E20; /* tinta: hover de superfícies espresso (botão, pilar, card) */
  --rh-caramelo:       #B8966A;
  --rh-caramelo-deep:  #9E7E55; /* tinta: contraste de texto sobre cream + hover de superfícies caramelo */
  --rh-caramelo-soft:  #D2B792; /* tinta: acento (texto pequeno) sobre fundo espresso, contraste correto */
  --rh-cream:          #F2EDE4;
  --rh-sage:           #7A8B6E;
  --rh-laranja:        #B05B33; /* 5ª cor oficial, ferrugem; usada nos números da Dor e no painel do hero (13/08) */
  --rh-laranja-soft:   #D08A64; /* tinta: laranja sobre fundo espresso, contraste correto */
  --rh-laranja-deep:   #96492A; /* tinta: fundo do botão primário (17/08) — o laranja claro reprova contraste como fundo de texto pequeno (4,10, precisa 4,5), o deep passa (6,40 com texto branco) */
  --rh-laranja-hover:  #7B3C22; /* tinta: hover/pressed do botão laranja, mais escuro que o deep pra continuar passando no contraste */

  /* semantic */
  --fg-primary:   var(--rh-espresso);
  --fg-secondary: rgba(44, 31, 20, 0.72);
  --fg-muted:     rgba(44, 31, 20, 0.50);
  --fg-on-dark:   var(--rh-cream);
  --fg-on-dark-s: rgba(242, 237, 228, 0.72);
  --fg-on-dark-m: rgba(242, 237, 228, 0.50);

  --bg-page:  var(--rh-cream);
  --bg-card:  #FFFFFF;
  --bg-cream: var(--rh-cream);

  --line:       rgba(44, 31, 20, 0.08);
  --line-md:    rgba(44, 31, 20, 0.14);
  --line-strong:rgba(44, 31, 20, 0.28);
  --line-accent:rgba(184, 150, 106, 0.4); /* caramelo, filete entre seções (lote 1, 17/08) */
  --line-dark:  rgba(242, 237, 228, 0.14);
  --line-dark-md: rgba(242, 237, 228, 0.22);

  /* type */
  --font-sans:  "DM Sans", "Helvetica Neue", system-ui, sans-serif;

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-em: cubic-bezier(0.65, 0, 0.05, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* layout */
  --pad-x: clamp(20px, 5vw, 64px);
  --max:   1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  background: var(--bg-page);
  line-height: 1.55;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto é obrigatório: sem ele os atributos width/height do HTML viram
   altura fixa e a imagem estica (já quebrou a foto do Sobre no celular e a
   foto da dor, que ficou com 900px de altura em vez de 263px) */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ─── TYPE ─── */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--rh-caramelo-deep);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--fg-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.8vw, 72px); line-height: 1.0; }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: clamp(20px, 2vw, 24px); }
h4 { font-size: 18px; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--fg-secondary);
  line-height: 1.55;
  max-width: 56ch;
}

/* ─── LAYOUT ─── */
.wrap { max-width: var(--max); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
section { position: relative; }
section[id] { scroll-margin-top: 80px; }
.section-pad { padding: clamp(80px, 10vw, 140px) 0; }

/* ─── WORDMARK (inline) ─── */
.wm { font-family: var(--font-sans); letter-spacing: 1.5px; }
.wm .re { font-weight: 100; letter-spacing: 3px; }
.wm .dot { color: var(--rh-caramelo); font-weight: 100; }
.wm .hab { font-weight: 400; letter-spacing: 1px; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary {
  background: var(--rh-laranja-deep);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--rh-laranja-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--rh-sage); color: var(--rh-cream); border-color: var(--rh-sage); }
.btn-on-dark {
  background: var(--rh-laranja-deep);
  color: #FFFFFF;
}
.btn-on-dark:hover { background: var(--rh-laranja-hover); }
.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }
/* em tela estreita o texto do botão pode quebrar linha; sem isso o botão
   comprido ("Quero o convite de Fundadora") fica mais largo que a tela e sai cortado */
@media (max-width: 600px) {
  .btn { white-space: normal; text-align: center; }
  .hero-cta-row .btn { flex: 1 1 100%; justify-content: center; }
  .nav-cta { white-space: nowrap; padding: 10px 14px; font-size: 13px; }
  .nav-cta .arrow { display: none; }
  .lang-sep { display: none; }
}
@media (max-width: 480px) {
  .price-two-col { flex-direction: column; align-items: flex-start; gap: 20px; }
  .price-divider { display: none; }
}

/* ─── NAV ─── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 240ms var(--ease), backdrop-filter 240ms var(--ease), border-color 240ms var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250, 248, 244, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 16px; padding-bottom: 16px;
}
.nav .wm { font-size: 17px; }
.nav-links {
  display: flex; gap: 28px; align-items: center;
  list-style: none; margin: 0; padding: 0;
  font-size: 13px; color: var(--fg-muted);
}
.nav-links a { transition: opacity 200ms var(--ease); border-bottom: none; }
.nav-links a:hover { opacity: 0.55; }
.nav-cta { display: inline-flex; }
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.04em; }
.lang-btn { background: none; border: none; padding: 0; font: inherit; color: var(--fg-muted); cursor: pointer; opacity: 0.55; transition: opacity 200ms var(--ease), color 200ms var(--ease); }
.lang-btn:hover { opacity: 1; }
.lang-btn.is-active { color: var(--rh-espresso); opacity: 1; font-weight: 600; }
.lang-sep { color: var(--line); font-size: 11px; }
@media (max-width: 860px) { .nav-links { display: none; } }

/* ─── HERO ─── */
.hero {
  position: relative;
  padding-top: clamp(130px, 16vw, 190px);
  padding-bottom: clamp(80px, 10vw, 140px);
  background: var(--bg-page);
  overflow: visible;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero-visual { max-width: 420px; } }
h1 .accent {
  font-family: var(--font-sans);
  color: var(--rh-caramelo-deep);
  font-weight: 300;
}
.hero-sub {
  margin-top: 28px;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--fg-secondary);
  max-width: 50ch;
  line-height: 1.6;
}
.hero-cta-row {
  margin-top: 36px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.hero-meta {
  margin-top: 36px;
  display: flex; gap: 24px; flex-wrap: wrap;
  color: var(--fg-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--rh-sage); }

/* hero visual */
.hero-visual { position: relative; } /* sem overflow hidden: cortava a etiqueta que fica 12px pra fora */
.hero-tag {
  position: absolute;
  top: 20px; left: -12px;
  background: var(--bg-page);
  border: 1px solid var(--line);
  padding: 9px 14px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--rh-espresso);
  box-shadow: 0 8px 20px -8px rgba(44, 31, 20, 0.18);
}
.hero-tag .live {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--rh-laranja);
  margin-right: 7px; vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.4); }
}

/* ─── A DOR ─── */
.pain { background: var(--rh-cream); border-top: 1px solid var(--line-accent); }
.pain-intro {
  max-width: 680px; margin: 0 auto; text-align: center;
  margin-bottom: clamp(52px, 7vw, 88px);
}
.pain-intro .eyebrow { justify-content: center; }
.pain-intro .eyebrow::after {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5;
}
.pain-intro h2 { margin-top: 20px; }
.pain-photo {
  display: block; width: 100%; max-width: 560px; aspect-ratio: 4/3;
  object-fit: cover; margin: 0 auto clamp(52px, 7vw, 88px);
}
.pain-grid-5 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}
@media (max-width: 820px) and (min-width: 601px) { .pain-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pain-grid-5 { grid-template-columns: 1fr; } }
.pain-card {
  background: var(--bg-page);
  padding: clamp(28px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.pain-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 56px -28px rgba(44, 31, 20, 0.16);
}
.pain-card .num {
  font-family: var(--font-sans); font-weight: 300;
  color: var(--rh-laranja); font-size: 38px;
  line-height: 1; margin-bottom: 18px; display: block;
}
.pain-card h3 { color: var(--rh-espresso); margin-bottom: 12px; }
.pain-card p { color: var(--fg-secondary); font-size: 15px; line-height: 1.55; }

/* ─── O QUE É ─── */
.what {
  background: var(--rh-espresso); color: var(--rh-cream);
  position: relative;
}
.what .eyebrow { color: var(--rh-caramelo-soft); }
.what h2 { color: var(--rh-cream); }
.what-media-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(40px, 6vw, 72px); align-items: center;
  margin-bottom: clamp(56px, 7vw, 88px);
}
@media (max-width: 820px) { .what-media-grid { grid-template-columns: 1fr; } }
.what-media-grid p { color: var(--fg-on-dark-s); font-size: clamp(15px, 1.2vw, 17px); max-width: 48ch; }
.what-photo { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }
.what-strikes {
  margin-top: 32px; display: flex; flex-direction: column; gap: 12px;
}
.what-strikes div {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 14.5px; color: var(--fg-on-dark-s); line-height: 1.5;
}
.what-strikes .x { color: var(--rh-caramelo-soft); flex: none; width: 16px; font-weight: 700; margin-top: 1px; }
.what-strikes .check { color: var(--rh-caramelo-soft); font-weight: 700; }
.what-strikes .strike-through { text-decoration: line-through; opacity: 0.65; }

/* ─── PILARES ─── */
.pillars-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line-dark);
  border: 1px solid var(--line-dark); border-radius: 10px; overflow: hidden;
  margin-top: clamp(56px, 7vw, 88px);
}
@media (max-width: 820px) { .pillars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars-grid { grid-template-columns: 1fr; } }
.pillar {
  background: var(--rh-espresso); padding: clamp(24px, 3vw, 32px);
  transition: background 280ms var(--ease);
}
.pillar:hover { background: var(--rh-espresso-soft); }
.pillar-num {
  font-family: var(--font-sans); font-weight: 300;
  color: var(--rh-caramelo-soft); font-size: 32px;
  line-height: 1; margin-bottom: 16px;
}
.pillar h4 { color: var(--rh-cream); font-size: 18px; margin-bottom: 8px; }
.pillar p { font-size: 13.5px; color: var(--fg-on-dark-m); line-height: 1.5; }


/* ─── ACESSO ─── */
.access { background: var(--bg-page); }
.access-head {
  max-width: 680px;
  margin-bottom: clamp(52px, 7vw, 72px);
}
.access-grid-6 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}
@media (max-width: 900px) { .access-grid-6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .access-grid-6 { grid-template-columns: 1fr; } }
.access-card {
  border: 1px solid var(--line-md);
  background: var(--bg-card);
  border-radius: 10px;
  padding: clamp(28px, 3vw, 38px);
  position: relative; overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.access-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 32px 56px -28px rgba(44, 31, 20, 0.14);
}
.access-card .day {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; margin-bottom: 22px;
  min-height: 36px;
}
.day-tag {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rh-cream); background: var(--rh-espresso);
  padding: 5px 10px; border-radius: 4px;
  white-space: normal; word-break: normal;
  line-height: 1.4;
}
.day-time { font-size: 12px; color: var(--fg-muted); letter-spacing: 0.04em; }
.access-card h3 { color: var(--rh-espresso); margin-bottom: 10px; font-size: 21px; }
.access-card .body { color: var(--fg-secondary); font-size: 14.5px; line-height: 1.55; }

/* ─── PARA QUEM NÃO É ─── */
.not-for {
  margin-top: clamp(40px, 5vw, 56px);
  padding: clamp(22px, 3vw, 32px) clamp(26px, 3vw, 36px);
  background: var(--bg-page);
  border: 1px solid var(--rh-laranja);
  border-left: 3px solid var(--rh-laranja);
  border-radius: 0 10px 10px 0;
  color: var(--fg-secondary);
  font-size: 15.5px;
  line-height: 1.6;
}
.not-for strong { color: var(--rh-espresso); }

/* ─── PARA QUEM ─── */
.who { background: var(--rh-cream); border-top: 1px solid var(--line-accent); border-bottom: 1px solid var(--line-accent); }
.who-head { max-width: 680px; margin-bottom: clamp(52px, 7vw, 72px); }
.who-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
@media (max-width: 720px) { .who-grid { grid-template-columns: 1fr; } }
.who-card {
  background: var(--bg-page);
  border: 1px solid var(--line-accent);
  border-radius: 10px;
  padding: clamp(26px, 3vw, 36px);
  display: flex; gap: 22px; align-items: flex-start;
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}
.who-card:hover { transform: translateY(-2px); border-color: var(--rh-caramelo); }
.who-card .mark {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--rh-caramelo); color: var(--rh-caramelo);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 500; font-size: 20px;
}
.who-card h4 { color: var(--rh-espresso); margin-bottom: 6px; font-size: 18px; }
.who-card p { color: var(--fg-secondary); font-size: 14.5px; line-height: 1.55; }

/* ─── CALENDÁRIO MENSAL ─── */
.calendar {
  background: var(--rh-cream);
  border-top: 1px solid var(--line-accent);
}
.calendar-head {
  max-width: 680px;
  margin-bottom: clamp(44px, 6vw, 64px);
}
.calendar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 820px) { .calendar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .calendar-grid { grid-template-columns: 1fr; } }
.cal-week {
  background: var(--bg-page);
  border: 1px solid var(--line-accent);
  border-radius: 10px;
  padding: clamp(22px, 2.5vw, 30px);
  transition: transform 320ms var(--ease), border-color 320ms var(--ease);
}
.cal-week:hover { transform: translateY(-2px); border-color: var(--rh-caramelo); }
.cal-num {
  font-family: var(--font-sans); font-weight: 500;
  font-size: 13px; color: var(--rh-caramelo-deep);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cal-body h4 { color: var(--rh-espresso); font-size: 16px; margin-bottom: 6px; }
.cal-body p { color: var(--fg-secondary); font-size: 13.5px; line-height: 1.5; }
.cal-week:last-child {
  background: var(--rh-cream);
  border-style: dashed;
}

/* ─── FASES ─── */
.phases-section {
  background: var(--rh-espresso); color: var(--rh-cream);
  position: relative;
}
.phases-head {
  text-align: center; margin-bottom: clamp(52px, 7vw, 80px);
  max-width: 680px; margin-left: auto; margin-right: auto;
}
.phases-head .eyebrow { justify-content: center; color: var(--rh-cream); }
.phases-head .eyebrow::after {
  content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.5;
}
.phases-head h2 { margin-top: 20px; color: var(--rh-cream); }
.phases-section .lead { color: rgba(242, 237, 228, 0.72); }

/* ─── JORNADA ─── */
.journey {
  display: flex; flex-direction: column; gap: 0;
  position: relative;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.journey::before {
  content: ""; position: absolute;
  left: 23px; top: 0; bottom: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(242,237,228,0.25) 5%, rgba(242,237,228,0.25) 95%, transparent);
}
@media (max-width: 600px) { .journey::before { left: 19px; } }
.journey-step {
  display: flex; gap: clamp(20px, 3vw, 32px); align-items: flex-start;
  padding: clamp(16px, 2vw, 24px) 0;
  position: relative;
}
.j-marker {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(242, 237, 228, 0.08);
  border: 1px solid rgba(242, 237, 228, 0.25);
  color: var(--rh-cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 17px;
  position: relative; z-index: 1;
  transition: background 280ms var(--ease), border-color 280ms var(--ease);
}
.journey-step:hover .j-marker {
  background: var(--rh-caramelo); color: var(--rh-espresso); border-color: var(--rh-caramelo);
}
.journey-step.is-final .j-marker {
  background: var(--rh-caramelo); color: var(--rh-espresso); border-color: var(--rh-caramelo);
}
.j-content h4 { color: var(--rh-cream); font-size: 18px; margin-bottom: 5px; }
.j-content p { color: rgba(242, 237, 228, 0.65); font-size: 14.5px; line-height: 1.5; max-width: 52ch; }
.micro {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 15px; color: var(--rh-cream);
}
.micro-light { color: var(--rh-cream); opacity: 0.85; }

/* continuous phases */
.continuous {
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid rgba(242, 237, 228, 0.10);
}
.cont-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}
@media (max-width: 720px) { .cont-grid { grid-template-columns: 1fr; } }
.cont-item {
  background: rgba(242, 237, 228, 0.06);
  border: 1px solid rgba(242, 237, 228, 0.10);
  border-radius: 10px;
  padding: clamp(20px, 2.5vw, 28px);
}
.cont-icon {
  display: block; font-size: 20px;
  color: var(--rh-cream); margin-bottom: 12px;
}
.cont-item h4 { color: var(--rh-cream); font-size: 16px; margin-bottom: 6px; }
.cont-item p { color: rgba(242, 237, 228, 0.55); font-size: 13.5px; line-height: 1.5; }

/* ─── DADOS / PROVAS ─── */
.proof { background: var(--rh-cream); border-top: 1px solid var(--line-accent); }
.proof-head { max-width: 680px; margin-bottom: clamp(52px, 7vw, 72px); }
.proof-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 24px);
}
@media (max-width: 820px) { .proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .proof-grid { grid-template-columns: 1fr; } }
.proof-card {
  background: var(--bg-page);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(24px, 3vw, 32px);
  transition: transform 320ms var(--ease);
}
.proof-card:hover { transform: translateY(-2px); }
.proof-num {
  display: block;
  font-family: var(--font-sans); font-weight: 100;
  font-size: clamp(36px, 4vw, 48px);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--rh-espresso);
  margin-bottom: 14px;
}
.proof-card p { color: var(--fg-secondary); font-size: 13.5px; line-height: 1.5; }

/* ─── PREÇOS ─── */
.pricing { background: var(--rh-cream); border-top: 1px solid var(--line-accent); }
.pricing-grid {
  display: grid; grid-template-columns: 1fr 1.1fr;
  gap: clamp(40px, 6vw, 72px); align-items: center;
}
@media (max-width: 820px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-head h2 { margin-top: 20px; }
.pricing-head .lead { margin-top: 20px; }
.price-card {
  background: var(--rh-espresso); color: var(--rh-cream);
  padding: clamp(32px, 4vw, 48px); border-radius: 10px;
  position: relative;
  box-shadow: 0 40px 72px -32px rgba(44, 31, 20, 0.40);
}
.price-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--rh-caramelo); color: var(--rh-espresso);
  padding: 7px 13px; border-radius: 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 24px;
}
.price-tag .tdot { width: 5px; height: 5px; border-radius: 50%; background: var(--rh-espresso); animation: pulse 2s ease-in-out infinite; }
.price-amount {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px;
}
.price-amount .amount {
  font-size: 52px; font-weight: 100; letter-spacing: -0.02em;
  color: var(--rh-cream); line-height: 1;
}
.price-amount .per { color: var(--fg-on-dark-m); font-size: 15px; }

/* price two-col */
.price-two-col {
  display: flex; gap: 0; align-items: center;
  margin-bottom: 28px;
}
.price-tier { flex: 1; }
.price-divider {
  width: 1px; align-self: stretch;
  background: var(--line-dark); margin: 0 clamp(16px, 2vw, 24px);
}
.tier-label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rh-caramelo-soft); margin-bottom: 8px;
}
.tier-note {
  font-size: 12px; color: var(--fg-on-dark-m); margin-top: 6px;
}
.price-feats {
  list-style: none; margin: 0 0 32px 0; padding: 0;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--line-dark); padding-top: 24px;
}
.price-feats li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: var(--fg-on-dark-s); line-height: 1.5;
}
.price-feats li::before { content: "—"; color: var(--rh-caramelo-soft); flex: none; }
.urgency-bar {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--rh-laranja-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 12px; color: var(--fg-on-dark-m); letter-spacing: 0.04em;
}
.urgency-bar strong { color: var(--rh-laranja-soft); } /* lote 3, 17/08: garantia é a frase de maior peso de decisão do card */

/* ─── SOBRE ─── */
.about { background: var(--rh-cream); border-top: 1px solid rgba(122, 139, 110, 0.3); }
.about-grid {
  display: grid; grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(40px, 6vw, 80px); align-items: stretch;
}
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }
.about-photo {
  width: 100%; height: auto; aspect-ratio: 4/5;
  object-fit: cover; object-position: center 8%;
}
/* desktop: altura da foto acompanha a altura do texto ao lado, em vez de proporcao fixa */
@media (min-width: 821px) {
  .about-photo { height: 100%; aspect-ratio: auto; }
}
.about h2 { margin-top: 20px; }
.about-quote {
  margin-top: 32px; padding: 24px 28px;
  border-left: 2px solid var(--rh-caramelo);
  background: var(--bg-page); border-radius: 0 8px 8px 0;
  font-family: var(--font-sans); font-weight: 300;
  font-size: 20px; line-height: 1.38; color: var(--fg-primary);
}
.about-body { margin-top: 24px; color: var(--fg-secondary); font-size: 15.5px; line-height: 1.65; max-width: 54ch; }
.about-sign {
  margin-top: 28px; display: flex; gap: 12px; align-items: center;
  font-size: 13px; color: var(--fg-muted); letter-spacing: 0.04em;
}
.about-sign .swash {
  font-family: var(--font-sans); font-weight: 500;
  color: var(--rh-espresso); font-size: 20px;
}

/* ─── FAQ ─── */
.faq { background: var(--bg-page); border-top: 1px solid rgba(122, 139, 110, 0.3); }
.faq-grid {
  display: grid; grid-template-columns: 0.55fr 1fr;
  gap: clamp(40px, 6vw, 72px); align-items: start;
}
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-head h2 { margin-top: 20px; }
.faq-list { border-top: 1px solid var(--line-md); }
.faq-item { border-bottom: 1px solid var(--line-md); }
.faq-list.collapsed .faq-item:nth-of-type(n+7) { display: none; }
.faq-more {
  display: block; margin: 20px auto 0; padding: 12px 22px;
  border: 1px solid var(--rh-caramelo); border-radius: 999px;
  background: none; color: var(--rh-caramelo-deep);
  font-family: var(--font-sans); font-size: 14px; letter-spacing: 0.02em;
  cursor: pointer; transition: background 220ms var(--ease), color 220ms var(--ease);
}
.faq-more:hover { background: var(--rh-caramelo); color: #fff; }
.faq-q {
  width: 100%; text-align: left; background: transparent; border: 0;
  padding: 22px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-family: var(--font-sans); font-size: 17px; font-weight: 700;
  color: var(--rh-espresso); letter-spacing: -0.005em;
  cursor: pointer; transition: color 240ms var(--ease);
}
.faq-q:hover { color: var(--rh-caramelo-deep); }
.faq-q .toggle {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line-md);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 240ms var(--ease), border-color 240ms var(--ease);
}
.faq-q .toggle::before, .faq-q .toggle::after {
  content: ""; position: absolute; background: var(--rh-espresso);
}
.faq-q .toggle::before { width: 10px; height: 1px; }
.faq-q .toggle::after { width: 1px; height: 10px; transition: transform 280ms var(--ease); }
.faq-item.open .toggle { background: var(--rh-sage); border-color: var(--rh-sage); }
.faq-item.open .toggle::before, .faq-item.open .toggle::after { background: var(--rh-espresso); }
.faq-item.open .toggle::after { transform: scaleY(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease-em); }
.faq-a-inner {
  overflow: hidden; min-height: 0;
  padding: 0 0 22px 0; color: var(--fg-secondary);
  font-size: 15px; line-height: 1.6; max-width: 56ch;
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ─── CTA FINAL + FORM ─── */
.final {
  background: var(--rh-espresso); color: var(--rh-cream);
  position: relative;
}
.final-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px); align-items: center;
}
@media (max-width: 820px) { .final-grid { grid-template-columns: 1fr; } }
.final .eyebrow { color: var(--rh-caramelo-soft); }
.final h2 { color: var(--rh-cream); font-size: clamp(32px, 4.2vw, 52px); }
.final h2 .accent { font-family: var(--font-sans); color: var(--rh-caramelo-soft); font-weight: 300; }
.final .lead { color: var(--fg-on-dark-s); margin-top: 20px; }
.final-meta {
  margin-top: 28px; font-size: 12px;
  color: var(--fg-on-dark-m); letter-spacing: 0.04em;
  display: flex; gap: 20px; flex-wrap: wrap;
}
.final-meta span { display: inline-flex; align-items: center; gap: 8px; }
.final-meta .bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--rh-sage); }

.form-card {
  background: rgba(242, 237, 228, 0.05);
  border: 1px solid var(--line-dark);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: clamp(26px, 3.5vw, 38px); border-radius: 10px;
}
.form-card h3 { color: var(--rh-cream); font-size: 21px; margin-bottom: 6px; }
.form-card .form-sub { font-size: 14px; color: var(--fg-on-dark-m); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(242, 237, 228, 0.65); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 13px 15px;
  background: rgba(242, 237, 228, 0.04);
  border: 1px solid var(--line-dark);
  border-radius: 4px; color: var(--rh-cream);
  font-family: var(--font-sans); font-size: 15px;
  transition: border-color var(--dur-base) var(--ease), background var(--dur-base) var(--ease);
  outline: none;
}
.field input::placeholder { color: var(--fg-on-dark-m); }
.field input:focus { border-color: var(--rh-caramelo); background: rgba(242, 237, 228, 0.06); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 8px; }
.form-card .fine {
  margin-top: 14px; font-size: 11px;
  color: rgba(242, 237, 228, 0.55); text-align: center;
}
.form-success { text-align: center; padding: 14px 0; }
.form-success .check-big {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--rh-caramelo); color: var(--rh-espresso);
  margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.form-success h3 { color: var(--rh-cream); margin-bottom: 8px; }
.form-success p { color: var(--fg-on-dark-m); font-size: 14px; line-height: 1.55; max-width: 30ch; margin: 0 auto; }

/* ─── FOOTER ─── */
footer {
  background: var(--rh-espresso); color: rgba(242, 237, 228, 0.60);
  padding: 48px 0 28px; font-size: 13px;
}
footer .foot-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; padding-bottom: 28px;
  border-bottom: 1px solid rgba(242, 237, 228, 0.08); flex-wrap: wrap;
}
footer .foot-logo { font-size: 20px; }
footer .foot-tag { color: rgba(242, 237, 228, 0.40); font-size: 13px; max-width: 28ch; margin-top: 8px; }
footer .foot-bottom {
  margin-top: 20px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 11px; color: rgba(242, 237, 228, 0.5); letter-spacing: 0.06em;
}

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease-em), transform 600ms var(--ease-em);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal[data-delay="1"] { transition-delay: 70ms; }
.reveal[data-delay="2"] { transition-delay: 140ms; }
.reveal[data-delay="3"] { transition-delay: 210ms; }
.reveal[data-delay="4"] { transition-delay: 280ms; }
.reveal[data-delay="5"] { transition-delay: 350ms; }
.reveal[data-delay="6"] { transition-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; transition: none !important; }
}

.whatsapp-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rh-espresso); color: var(--rh-cream);
  box-shadow: 0 8px 20px -8px rgba(44, 31, 20, 0.40);
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.whatsapp-fab:hover { background: var(--rh-espresso-soft); transform: translateY(-2px); }

/* prova social, faixa logo abaixo do hero */
.social-proof {
  background: var(--bg-card);
  border-top: 1px solid var(--line-accent);
  border-bottom: 1px solid var(--line-accent);
  padding: clamp(36px, 5vw, 56px) 0;
}
.sp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
@media (max-width: 700px) { .sp-grid { grid-template-columns: 1fr; gap: 28px; } }
.sp-qual {
  display: block;
  font-family: var(--font-sans); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--rh-caramelo-deep); margin-bottom: 8px;
}
.sp-item p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--fg-muted); max-width: 34ch; }

/* painel do hero: a identidade no lugar da foto (decisao de 13/08, menos fotos da Juliana) */
.hero-panel {
  aspect-ratio: 4/5;
  background: var(--rh-sage);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(18px, 2.4vw, 28px);
  padding: clamp(28px, 4vw, 56px);
  text-align: center;
}
.hero-wm { font-size: clamp(40px, 6vw, 76px); line-height: 1; color: var(--fg-on-dark); }
.hero-selo {
  margin: 0; max-width: 18ch;
  font-size: clamp(18px, 2vw, 24px); line-height: 1.45;
  color: var(--fg-on-dark);
}
.hero-selo-quem {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-on-dark-s);
}
.hero-selo-quem::before {
  content: ""; display: block;
  width: 28px; height: 1px; margin: 0 auto 14px;
  background: var(--rh-laranja-soft);
}

/* grade de 3 nos critérios (a seção nasceu com 4 dados de mercado) */
.proof-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .proof-grid-3 { grid-template-columns: 1fr; } }
.proof-card h3 { font-size: 19px; }
.proof-card .proof-num { font-size: clamp(28px, 3vw, 34px); color: var(--rh-laranja); }
/* a seção "Depois das quatro semanas" é só cabeçalho: sem isso sobra um vão morto embaixo */
.phases-head:last-child { margin-bottom: 0; }

/* ═══════════════ OTIMIZAÇÃO MOBILE (18/08) ═══════════════
   A página tinha 24 telas de rolagem no celular e alvos de toque abaixo
   dos 44px que a Apple e o Google recomendam. Estas regras encurtam o
   percurso e engordam o que o dedo precisa acertar, sem mexer no desktop. */
@media (max-width: 640px) {
  /* respiro menor entre seções: a rolagem cai sem apertar a leitura */
  .section-pad { padding: 56px 0; }

  /* cards e grids mais próximos */
  .pain-grid-5 { gap: 12px; }
  .pain-card { padding: 22px 20px; }
  .pillars-grid, .proof-grid-3 { margin-top: 40px; }
  .pain-photo { margin-bottom: 40px; }
  .what-media-grid { gap: 32px; margin-bottom: 40px; }

  /* alvos de toque: mínimo 44px de altura */
  .btn { padding: 16px 24px; min-height: 48px; }
  .field input { padding: 14px 15px; min-height: 48px; }
  .lang-btn { padding: 12px 8px; min-height: 44px; min-width: 40px; }
  .lang-switch { display: flex; align-items: center; }

  /* links de rodapé e nota do formulário com área clicável usável */
  .form-card .fine a, footer a { display: inline-block; padding: 6px 0; min-height: 32px; }
}

/* ─── MENU MOBILE (18/08) ───
   A página tem 22 telas de rolagem no celular e a nav de desktop some abaixo
   de 860px, então não havia como pular pra uma seção. O botão só aparece onde
   a nav some. */
.nav-burger { display: none; background: none; border: none; padding: 0; cursor: pointer; min-width: 48px; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--rh-espresso); transition: transform 240ms var(--ease), opacity 240ms var(--ease); }
.nav-burger span + span { margin-top: 6px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-mobile {
  display: none; flex-direction: column;
  background: rgba(250, 248, 244, 0.97);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  padding: 8px var(--pad-x) 20px;
}
.nav-mobile a {
  padding: 15px 0; font-size: 16px; color: var(--fg-primary);
  border-bottom: 1px solid var(--line);
}
.nav-mobile a:last-child { border-bottom: none; }
@media (max-width: 860px) {
  .nav-burger { display: flex; }
  .nav-mobile:not([hidden]) { display: flex; }
}

/* No celular o header não cabia com logo + idiomas + CTA + menu (o botão do
   menu era empurrado pra fora da tela, x=384 numa tela de 390). O seletor de
   idioma desce pro menu, onde tem espaço e alvo de toque maior. */
@media (max-width: 860px) {
  .nav-inner > .lang-switch { display: none; }
  .lang-switch-mobile { display: flex; gap: 4px; padding-top: 14px; }
  .lang-switch-mobile .lang-btn { padding: 10px 14px; min-height: 44px; font-size: 14px; }
}
@media (min-width: 861px) { .lang-switch-mobile { display: none; } }

/* menu aberto precisa de fundo opaco: com 0.97 o texto do hero ainda lia por trás */
.nav-mobile { background: var(--rh-cream); box-shadow: 0 12px 24px rgba(44, 31, 20, 0.10); }
/* logo com área de toque de 44px sem mudar o desenho */
@media (max-width: 860px) { .nav-inner > .wm { display: inline-flex; align-items: center; min-height: 44px; } }