/* Gelatina Mounjaro — quiz local · mobile-first */

:root {
  --brand: #db2777;
  --brand-dark: #be185d;
  --brand-bg: rgba(219, 39, 119, 0.10);
  --brand-border: rgba(219, 39, 119, 0.50);
  --brand-track: rgba(219, 39, 119, 0.20);
  --text: #020617;
  --muted: #6b7280;
  --bg: #f8fafc;
  --green: #16a34a;
  --green-dark: #15803d;
  --card: #ffffff;
  --border: #e5e7eb;
  --radius: 16px;
  --radius-sm: 8px;
  --container-max: 34rem;
  --element-height: 56px;
  --font-stack: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: var(--font-stack);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}
/* Quando qualquer elemento (player VSL, etc) chamar scrollIntoView,
   o browser deixa esse espaço acima da viewport — protege o topbar */
html { scroll-padding-top: calc(60px + env(safe-area-inset-top)); }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }

/* ── Topo: barra de progresso + back arrow ────────────────── */
.topbar {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
  padding: 6px 16px 6px;
  padding-top: max(6px, env(safe-area-inset-top));
}
.topbar-spacer { display: none; }

.back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text);
  margin-bottom: 4px;
}
.back-btn svg { width: 20px; height: 20px; }
.back-btn--hidden { visibility: hidden; }
.back-btn:active { background: rgba(0,0,0,0.05); }

.progress {
  position: relative;
  height: 4px;
  background: var(--brand-track);
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--brand);
  width: 0%;
  transition: width 320ms cubic-bezier(.4,0,.2,1);
}

/* ── Container ────────────────────────────────────────────── */
.app {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 16px 16px 48px;
}

/* ── Tipografia ───────────────────────────────────────────── */
.screen h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
  margin: 24px 0 12px;
  padding: 0 4px;
}

.screen .subtitle {
  font-size: 16px;
  color: var(--text);
  text-align: center;
  margin-bottom: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.screen .subtitle--italic {
  font-style: italic;
  text-decoration: none;
}

.screen .small {
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-top: 16px;
  font-style: italic;
}

.screen p { color: var(--text); text-align: center; margin-bottom: 12px; }

/* ── Imagens ──────────────────────────────────────────────── */
.image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 16px;
  border-radius: var(--radius);
}
.image--md  { max-width: 340px; }
.image--sm  { max-width: 200px; }
.image--hero {
  max-width: 100%;
  width: auto;
  object-fit: contain;
  margin: 4px auto 8px;
}

/* Telas com hero image → imagem cresce pra preencher (base já é flex column) */
.screen:has(.image--hero) h1 {
  margin: 4px 0 6px;
  font-size: 20px;
  padding: 0;
}
.screen:has(.image--hero) .image--hero {
  flex: 1 1 0;
  min-height: 0;
  max-height: 100%;
}
.screen:has(.image--hero) .subtitle { margin-bottom: 8px; font-size: 14px; }
.app:has(.image--hero) { padding-top: 8px; padding-bottom: 24px; }
.app { padding-bottom: max(48px, env(safe-area-inset-bottom)); }

/* ── Layout lado-a-lado (imagem + options em coluna única) ── */
.side-layout {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-bottom: 16px;
}
.side-layout__image {
  width: 45%;
  max-width: 220px;
  height: auto;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: var(--radius);
}
.side-layout .options {
  flex: 1;
  margin-bottom: 0;
  min-width: 0;
}

/* ── Options (cards de seleção) ───────────────────────────── */
.options {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}
.options.cols-1 { grid-template-columns: 1fr; }
.options.cols-2 { grid-template-columns: 1fr 1fr; }

.option {
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  padding: 10px 32px 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  transition: transform 100ms ease, background 120ms ease;
  width: 100%;
  position: relative;
  min-height: 52px;
}
.option:active {
  transform: scale(0.98);
  background: rgba(219, 39, 119, 0.18);
}
.option.selected {
  background: rgba(219, 39, 119, 0.22);
  border-color: var(--brand);
}

.option__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option__title { font-weight: 500; font-size: 13px; line-height: 1.3; }
.option__desc  { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; }

.option__image {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

/* ── Layout tile: 2-col + imagem → image em cima, label embaixo ── */
.options.cols-2 .option:has(.option__image) {
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding: 10px 10px 12px;
  gap: 8px;
  min-height: auto;
}
.options.cols-2 .option:has(.option__image) .option__image {
  width: 100%;
  height: 120px;
  object-fit: contain;
  border-radius: 10px;
  background: #fff;
}
.options.cols-2 .option:has(.option__image) .option__main {
  align-items: center;
  text-align: center;
}
.options.cols-2 .option:has(.option__image) .option__title {
  font-size: 13px;
  line-height: 1.3;
}
.options.cols-2 .option:has(.option__image) .option__check {
  position: static;
  transform: none;
  margin: 0 auto;
}

.option__check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--brand);
  border-radius: 4px;
  flex-shrink: 0;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}
.option.selected .option__check {
  background: var(--brand);
  border-color: var(--brand);
}
.option.selected .option__check::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* ── Cards de gênero (com badge verde) ────────────────────── */
.gender-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: transform 100ms ease;
  aspect-ratio: 4 / 5;
}
.gender-card:active { transform: scale(0.97); }
.gender-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }

/* ── Botão principal ─────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--brand);
  color: white;
  font-weight: 500;
  font-size: 16px;
  height: 56px;
  border-radius: var(--radius);
  transition: background 120ms ease, transform 100ms ease;
  margin-top: 12px;
  text-decoration: none;
  text-transform: none;
  animation: btnPulse 1.8s cubic-bezier(.4,0,.6,1) infinite;
}
.btn:hover  { background: var(--brand-dark); }
.btn:active { transform: scale(0.98); animation-play-state: paused; }

@keyframes btnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0.55); transform: scale(1); }
  60%  { box-shadow: 0 0 0 14px rgba(219, 39, 119, 0);  transform: scale(1.015); }
  100% { box-shadow: 0 0 0 0 rgba(219, 39, 119, 0);     transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { animation: none; }
}

/* ── Input ───────────────────────────────────────────────── */
.input {
  width: 100%;
  height: 56px;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  padding: 0 18px;
  font-size: 16px;
  background: var(--brand-bg);
  color: var(--text);
  outline: none;
  transition: border-color 120ms ease, background 120ms ease;
  margin-bottom: 16px;
}
.input::placeholder { color: rgba(2,6,23,0.5); }
.input:focus {
  border-color: var(--brand);
  background: rgba(219, 39, 119, 0.05);
}
.input__err {
  margin-top: -8px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #ef4444;
  text-align: left;
  padding-left: 4px;
}

/* ── Seletor (peso/altura) ───────────────────────────────── */
.selector {
  background: transparent;
  border: none;
  border-radius: var(--radius);
  padding: 0;
  margin-bottom: 16px;
  text-align: center;
}
.selector__value {
  font-size: 64px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -0.02em;
}
.selector__value-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin: 12px 0 16px;
}
.selector__unit { font-size: 18px; color: var(--text); font-weight: 700; text-transform: lowercase; }
.selector__hint { font-size: 12px; color: var(--muted); margin-top: 12px; font-style: italic; }

/* Toggle de unidade (kg/lb · cm/ft) */
.unit-toggle {
  display: inline-flex;
  background: rgba(219, 39, 119, 0.10);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.unit-toggle__opt {
  border: none;
  background: transparent;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 120ms, color 120ms;
  text-transform: lowercase;
}
.unit-toggle__opt--active {
  background: var(--brand);
  color: white;
}

/* Régua */
.ruler {
  position: relative;
  height: 80px;
  margin: 8px 0 4px;
  overflow: hidden;
  border-top: 2px solid rgba(2,6,23,0.15);
  border-bottom: 2px solid rgba(2,6,23,0.15);
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.04) 100%),
    #fffdf5;
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.ruler__track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  will-change: transform;
}
.ruler__tick {
  position: absolute;
  top: 0;
  width: 1px;
  height: 12px;
  background: rgba(2,6,23,0.35);
}
.ruler__tick--major {
  height: 18px;
  background: rgba(2,6,23,0.55);
  width: 1.5px;
}
.ruler__tick--mid {
  height: 26px;
  background: rgba(2,6,23,0.75);
  width: 2px;
}
.ruler__label {
  position: absolute;
  top: 32px;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.ruler__center {
  position: absolute;
  left: 50%;
  top: -4px;
  bottom: -4px;
  width: 3px;
  background: var(--brand);
  transform: translateX(-50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}
.ruler__center::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid var(--brand);
  transform: translateX(-50%);
}
.ruler__center::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--brand);
  transform: translateX(-50%);
}

/* Régua é arrastável via touch/mouse (handler em JS) */
.ruler {
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ruler--dragging { cursor: grabbing; }

.selector__limits { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* ── Loading ─────────────────────────────────────────────── */
.loading { text-align: center; padding: 48px 0; }
.spinner {
  width: 64px; height: 64px;
  border: 5px solid var(--brand-bg);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading h2 { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.loading__bar { background: var(--brand-track); height: 6px; border-radius: 999px; overflow: hidden; margin-top: 24px; }
.loading__bar-fill { height: 100%; background: var(--brand); width: 0%; transition: width 200ms linear; }

/* ── VTurb embed ─────────────────────────────────────────── */
.screen--video {
  justify-content: flex-start !important;
}
.screen--video .screen__title--compact {
  font-size: 16px !important;
  line-height: 1.3;
  margin: 6px 0 10px !important;
  padding: 0;
  text-align: center;
}
.video-vturb {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: min(60vh, 600px);
  margin: 0 auto 12px;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 9 / 16;
}
.video-vturb vturb-smartplayer {
  display: block;
  width: 100%;
  height: 100%;
}

/* Botão pós-vídeo com delay (hint primeiro, botão revela depois) */
.video-reveal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-top: 8px;
}
.video-reveal__hint {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 12px 8px;
}
.video-reveal__btn {
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 360ms ease, transform 360ms cubic-bezier(.22,.61,.36,1);
  animation: none !important;
}
.video-reveal__btn--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  animation: btnPulse 1.8s cubic-bezier(.4,0,.6,1) infinite !important;
}

/* ── Video placeholder ───────────────────────────────────── */
.video-box {
  aspect-ratio: 9 / 16;
  max-width: 320px;
  margin: 0 auto 16px;
  background: linear-gradient(135deg, #1e1b4b 0%, #581c87 100%);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  padding: 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.video-box__play {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(219,39,119,0.5);
}
.video-box__play::after {
  content: '';
  border-left: 22px solid white;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  margin-left: 5px;
}
.video-box__label { font-weight: 700; font-size: 15px; }
.video-box__sub { font-size: 12px; opacity: 0.75; margin-top: 6px; }

/* ── IMC card ────────────────────────────────────────────── */
.imc-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
}
.imc-label { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.imc-value { font-size: 56px; font-weight: 800; color: var(--brand); line-height: 1; margin-bottom: 8px; letter-spacing: -0.02em; }
.imc-classification {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.imc-bar-wrap {
  position: relative;
  margin-top: 16px;
  padding-top: 36px;
}
.imc-bar {
  display: flex;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}
.imc-bar > div { flex: 1; }
.imc-bar__1 { background: #60a5fa; }
.imc-bar__2 { background: #22c55e; }
.imc-bar__3 { background: #facc15; }
.imc-bar__4 { background: #fb923c; }
.imc-bar__5 { background: #ef4444; }
.imc-bar-labels { display: flex; margin-top: 8px; font-size: 11px; color: var(--muted); }
.imc-bar-labels > div { flex: 1; text-align: center; }

/* Marcador "Você está aqui" sobre a barra de IMC */
.imc-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  animation: imcDrop 360ms cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes imcDrop {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.imc-marker__chip {
  background: var(--text);
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.imc-marker__arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--text);
  margin-top: -1px;
}

/* ── Alert ───────────────────────────────────────────────── */
.alert {
  background: #fffbeb;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: left;
}
.alert h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}
.alert p { text-align: left; font-size: 14px; margin-bottom: 8px; line-height: 1.5; }
.alert .list { margin: 6px 0; padding-left: 0; list-style: none; }
.alert .list li { margin-bottom: 4px; font-size: 14px; }

/* ── Testimonial ─────────────────────────────────────────── */
.testimonial__hero {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 42vh;
  object-fit: contain;
  border-radius: var(--radius);
  margin: 2px auto 10px;
}
.screen:has(.testimonial__hero) h1 { margin: 4px 0 4px; font-size: 18px; }
.screen:has(.testimonial__hero) .subtitle { margin-bottom: 6px; font-size: 13px; }
.testimonial {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
  text-align: left;
}
.testimonial__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.testimonial__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.testimonial__name { font-weight: 700; font-size: 14px; }
.testimonial__loc  { font-size: 12px; color: var(--muted); }
.testimonial__stars { color: #facc15; margin-bottom: 6px; font-size: 14px; }
.testimonial__text { font-size: 13px; line-height: 1.5; }
.testimonial__photo { width: 100%; border-radius: 8px; margin-top: 10px; }

/* ── Antes/Depois ────────────────────────────────────────── */
.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.ba-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ba-card__label {
  background: #f1f5f9;
  text-align: center;
  font-weight: 700;
  font-size: 13px;
  padding: 8px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ba-card--after .ba-card__label { background: var(--brand-bg); color: var(--brand); }
.ba-card img { width: 100%; height: auto; display: block; }
.ba-card__caption {
  padding: 8px 10px 4px;
  font-size: 12px;
  color: var(--muted);
  text-align: left;
  line-height: 1.35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ba-card__caption-text { flex: 1; min-width: 0; }
.ba-card__pct { font-size: 14px; font-weight: 800; color: var(--text); flex-shrink: 0; }
.ba-card--before .ba-card__pct { color: #ef4444; }
.ba-card--after  .ba-card__pct { color: #16a34a; }
.ba-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
  margin: 0 10px 10px;
  border-radius: 999px;
  overflow: hidden;
}
.ba-bar__fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(.22,.61,.36,1);
}
.ba-bar__fill--before { background: #ef4444; }
.ba-bar__fill--after  { background: #16a34a; }

/* ── Helpers ─────────────────────────────────────────────── */
.center { text-align: center; }
.bold { font-weight: 700; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mb-2 { margin-bottom: 16px; }

/* ── Animação tela + centralização vertical ──────────────── */
.screen {
  animation: fadeIn 240ms ease;
  display: flex;
  flex-direction: column;
  /* Top-align garantido: nenhum browser corta headline acima da viewport */
  justify-content: flex-start;
  min-height: calc(100dvh - 100px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive (telas pequenas) ─────────────────────────── */
@media (max-width: 380px) {
  .app { padding: 12px 12px 40px; }
  .screen h1 { font-size: 22px; }
  .options.cols-2 { gap: 8px; }
  .gender-card__pill { font-size: 13px; padding: 5px 14px; }
}