/* ============================================================
   NutriVIDA — components & layouts
   Loads after tokens.css. Editorial wellness: paper-cream
   surfaces, Playfair italic display, sage primary, organic
   blob decorations. Mobile-first; capped at ~tablet for app
   surfaces; landing breathes wider.
   ============================================================ */

/* Variable fonts — one file per family, all weights accessible via the
   font-weight axis. Trade-off: slightly larger initial download than
   per-weight woff2 (TTF ~280 KB each), but only fetched once and
   covers every weight we use without juggling multiple files.
   Tech debt: re-compress to woff2 with woff2_compress when bandwidth
   becomes a concern. */
@font-face {
  font-family: 'Nunito';
  src: local('Nunito'), url('/fonts/nunito.ttf') format('truetype-variations'),
       url('/fonts/nunito.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: local('Playfair Display'), url('/fonts/playfair.ttf') format('truetype-variations'),
       url('/fonts/playfair.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: local('Playfair Display'), url('/fonts/playfair-italic.ttf') format('truetype-variations'),
       url('/fonts/playfair-italic.ttf') format('truetype');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* ============================================================
   Paper grain — almost imperceptible, never busy.
   SVG turbulence baked into a data-URI so it works offline.
   ============================================================ */
body {
  background-color: var(--rv-cream);
  background-image:
    radial-gradient(ellipse at top right, rgba(184, 160, 201, 0.10), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(232, 155, 133, 0.12), transparent 60%),
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.78  0 0 0 0 0.68  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}

/* ============================================================
   Brand wordmark — Playfair italic with hand-drawn underline
   ============================================================ */
.rv-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--rv-ink);
  position: relative;
  padding-bottom: 4px;
}
.rv-brand em {
  font-style: italic;
  font-weight: 400;
  color: var(--rv-green);
}
.rv-brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 30%;
  bottom: 0;
  height: 6px;
  background:
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M2 3.5 Q 30 1, 60 3 T 118 3.5' stroke='%233A9E7E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ============================================================
   Page chrome
   ============================================================ */
.rv-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, var(--rv-cream) 70%, transparent);
  backdrop-filter: saturate(1.05) blur(6px);
  -webkit-backdrop-filter: saturate(1.05) blur(6px);
}
.rv-header__right { display: flex; gap: var(--s-3); align-items: center; }

.rv-shell {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-12);
}

.rv-shell--wide {
  max-width: var(--landing-max);
}

/* ============================================================
   Buttons — pill primary, ghost secondary, soft text
   ============================================================ */
.btn {
  --bg: var(--rv-green);
  --fg: var(--rv-white);
  --bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 28px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bd);
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-lift);
  transition:
    transform var(--t-fast) var(--ease-soft),
    background var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft);
}
.btn:hover { background: var(--rv-green-deep); transform: translateY(-1px); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-petal); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-lift); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--ghost {
  --bg: transparent;
  --fg: var(--rv-green-deep);
  --bd: var(--rv-green);
  box-shadow: none;
}
.btn--ghost:hover { background: var(--rv-green-mist); transform: none; }

.btn--soft {
  --bg: var(--rv-green-mist);
  --fg: var(--rv-green-deep);
  --bd: transparent;
  box-shadow: var(--shadow-petal);
}
.btn--soft:hover { background: var(--rv-green); color: var(--rv-white); }

.btn--text {
  --bg: transparent;
  --fg: var(--rv-ink-soft);
  --bd: transparent;
  box-shadow: none;
  padding: 10px 14px;
  font-weight: 600;
}
.btn--text:hover { color: var(--rv-green-deep); background: transparent; transform: none; }

.btn--block { width: 100%; }

.btn--lg { padding: 18px 36px; font-size: var(--fs-md); }

.btn__icon {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
}

/* ============================================================
   Fields
   ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--s-4);
}
.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--rv-ink-soft);
  letter-spacing: 0.02em;
}
.field__hint {
  font-size: var(--fs-xs);
  color: var(--rv-muted);
  font-style: italic;
}
.input,
.textarea,
.select {
  width: 100%;
  padding: 14px 16px;
  background: var(--rv-white);
  border: 1px solid var(--rv-line);
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  color: var(--rv-ink);
  transition:
    border-color var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft),
    background var(--t-base) var(--ease-soft);
  box-shadow: var(--shadow-inner);
}
.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--rv-green);
  box-shadow: var(--ring-focus), var(--shadow-inner);
  background: var(--rv-white);
}
.input::placeholder { color: var(--rv-muted); }

/* Compact number quartet for kcal / P / C / F */
.macro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 520px) {
  .macro-grid { grid-template-columns: repeat(4, 1fr); }
}
.macro-grid .field { margin: 0; }
.macro-grid .input { text-align: center; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ============================================================
   Tile picker — used for objetivo & tom de coach
   ============================================================ */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 480px) {
  .tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--s-5);
  background: var(--rv-white);
  border: 1.5px solid var(--rv-line);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--t-base) var(--ease-soft),
    transform var(--t-base) var(--ease-soft),
    background var(--t-base) var(--ease-soft),
    box-shadow var(--t-base) var(--ease-soft);
}
.tile:hover {
  border-color: var(--rv-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-petal);
}
.tile:focus-visible { outline: none; box-shadow: var(--ring-focus); }

.tile__icon {
  width: 28px;
  height: 28px;
  color: var(--rv-green);
}
.tile__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-md);
  color: var(--rv-ink);
}
.tile__desc {
  font-size: var(--fs-sm);
  color: var(--rv-ink-soft);
  line-height: var(--lh-snug);
}

.tile[aria-pressed='true'],
.tile.is-selected {
  border-color: var(--rv-green);
  background: var(--rv-green-mist);
  box-shadow: var(--shadow-petal);
}
.tile[aria-pressed='true']::before,
.tile.is-selected::before {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background:
    var(--rv-green)
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat center / 70%;
}

/* ============================================================
   Cards (panel content surfaces)
   ============================================================ */
.card {
  background: var(--rv-white);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-lift);
  border: 1px solid rgba(230, 220, 201, 0.5);
}
.card--cream { background: var(--rv-cream-deep); border-color: var(--rv-line); }
.card--soft { background: var(--rv-green-mist); border-color: rgba(58, 158, 126, 0.16); }

.card__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rv-green-deep);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin-top: 6px;
}

/* ============================================================
   Locked feature — small gold key, slightly desaturated content
   ============================================================ */
.locked {
  position: relative;
  filter: saturate(0.6);
}
.locked::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(250, 246, 239, 0.10), rgba(250, 246, 239, 0.50));
  pointer-events: none;
}
.locked__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  background: var(--rv-gold-soft);
  color: var(--rv-gold);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: var(--shadow-petal);
}
.locked__badge svg { width: 14px; height: 14px; }

.locked__trigger {
  /* Full-card click target so taps anywhere on the locked region open the modal. */
  position: absolute;
  inset: 0;
  z-index: 3;
  background: transparent;
  cursor: pointer;
  border-radius: inherit;
}
.locked__trigger:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
}

/* ============================================================
   Progress dots (onboarding)
   ============================================================ */
.steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--s-2) 0 var(--s-6);
}
.steps__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rv-line);
  transition: transform var(--t-base) var(--ease-soft), background var(--t-base) var(--ease-soft);
}
.steps__dot.is-done { background: var(--rv-green); }
.steps__dot.is-current {
  background: var(--rv-green);
  transform: scale(1.6);
  box-shadow: 0 0 0 4px rgba(58, 158, 126, 0.16);
}

/* Step view container — pages transition by fade+lift */
.step {
  display: none;
  animation: stepIn var(--t-slow) var(--ease-out);
}
.step.is-active { display: block; }
@keyframes stepIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.step__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--rv-green-deep);
  margin-bottom: var(--s-3);
}
.step__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-2xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--rv-ink);
}
.step__title strong {
  font-style: normal;
  font-weight: 600;
  color: var(--rv-green-deep);
}
.step__lead {
  margin-top: var(--s-3);
  color: var(--rv-ink-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}
.step__body { margin-top: var(--s-7); }
.step__actions {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 520px) {
  .step__actions { flex-direction: row; justify-content: space-between; }
  .step__actions .btn { min-width: 180px; }
  .step__actions .btn--text { min-width: 0; }
}

/* ============================================================
   Drop zone (prescrição / bioimp / exames)
   ============================================================ */
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  padding: var(--s-8) var(--s-5);
  border: 2px dashed var(--rv-green);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at center, rgba(213, 235, 226, 0.6), transparent 70%),
    var(--rv-white);
  color: var(--rv-ink-soft);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t-base), background var(--t-base);
}
.dropzone:hover { border-color: var(--rv-green-deep); }
.dropzone.is-dragging {
  background: var(--rv-green-mist);
  border-style: solid;
}
.dropzone__icon {
  width: 44px;
  height: 44px;
  color: var(--rv-green);
}
.dropzone__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--rv-ink);
}
.dropzone__hint { font-size: var(--fs-sm); }
.dropzone input[type='file'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

/* ============================================================
   Divider with whispered label ("OU")
   ============================================================ */
.divider {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-6) 0;
  color: var(--rv-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.24em;
}
.divider::before,
.divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rv-line);
}

/* ============================================================
   List items (supplements, suplementos do dia)
   ============================================================ */
.list { display: flex; flex-direction: column; gap: var(--s-3); }
.list__row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--rv-white);
  border: 1px solid var(--rv-line);
  border-radius: var(--r-md);
  transition: border-color var(--t-base);
}
.list__row:hover { border-color: var(--rv-green); }
.list__row__body { flex: 1; min-width: 0; }
.list__row__title {
  font-weight: 700;
  color: var(--rv-ink);
  font-size: var(--fs-base);
}
.list__row__sub {
  font-size: var(--fs-sm);
  color: var(--rv-ink-soft);
}
.list__row__remove {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  color: var(--rv-muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.list__row__remove:hover { color: var(--rv-danger); background: var(--rv-cream-deep); }

.list__add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--rv-green-mist);
  color: var(--rv-green-deep);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.list__add:hover { background: var(--rv-green); color: var(--rv-white); }

/* checkbox-as-toggle for "feito" */
.toggle {
  --size: 24px;
  position: relative;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  border: 1.5px solid var(--rv-line);
  border-radius: 50%;
  background: var(--rv-white);
  transition: all var(--t-base) var(--ease-soft);
  cursor: pointer;
}
.toggle.is-on {
  background: var(--rv-green);
  border-color: var(--rv-green);
  box-shadow: 0 0 0 5px rgba(58, 158, 126, 0.14);
}
.toggle.is-on::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3 3 7-7.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(31, 42, 38, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  animation: modalBgIn var(--t-base) var(--ease-soft);
}
.modal.is-open { display: flex; }
.modal__panel {
  width: 100%;
  max-width: 520px;
  background: var(--rv-cream);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  padding: var(--s-7) var(--s-6) var(--s-6);
  box-shadow: 0 -24px 60px -24px rgba(31, 42, 38, 0.3);
  animation: modalIn var(--t-slow) var(--ease-out);
}
@media (min-width: 640px) {
  .modal { align-items: center; }
  .modal__panel { border-radius: var(--r-xl); }
}
.modal__grab {
  width: 44px; height: 4px;
  background: var(--rv-line);
  border-radius: var(--r-pill);
  margin: -6px auto var(--s-5);
}
.modal__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rv-gold);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modal__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--rv-ink);
  margin: var(--s-3) 0 var(--s-3);
}
.modal__lead { color: var(--rv-ink-soft); font-size: var(--fs-md); line-height: var(--lh-body); }
.modal__actions { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
.modal__price { font-weight: 700; color: var(--rv-ink); font-size: var(--fs-sm); margin-top: var(--s-3); text-align: center; }
.modal__price em { font-style: italic; color: var(--rv-muted); font-weight: 400; }

@keyframes modalBgIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ============================================================
   ===== Landing only =========================================
   ============================================================ */
.landing {
  position: relative;
  isolation: isolate;
}

.landing__decor {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}
.landing__blob-1 {
  top: -120px;
  right: -160px;
  width: 540px;
  opacity: 0.65;
}
.landing__blob-2 {
  top: 340px;
  left: -200px;
  width: 480px;
  opacity: 0.55;
}
.landing__blob-3 {
  bottom: -240px;
  right: -120px;
  width: 600px;
  opacity: 0.5;
}

.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  /* padding-block only — never touch horizontal here, the parent
     .rv-shell owns the horizontal padding. Using `padding` shorthand
     with `0` in the right/left slot silently zeroed out the .rv-shell
     padding, which is what made the iPhone left-margin reports
     impossible to fix from rv-shell alone. */
  padding-block: var(--s-8) var(--s-12);
  align-items: center;
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 1.2fr 1fr; gap: var(--s-10); padding-block: var(--s-12); }
}

.hero__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rv-green-deep);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s-5);
}
.hero__eyebrow::before {
  content: '';
  width: 28px; height: 1px; background: var(--rv-green);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.4vw + 1rem, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rv-ink);
}
.hero__title em {
  font-style: italic;
  color: var(--rv-green-deep);
}
.hero__title .accent {
  font-style: italic;
  color: var(--rv-salmon);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--rv-ink-soft);
  font-size: var(--fs-lg);
  margin-top: var(--s-4);
}

.hero__lead {
  margin-top: var(--s-5);
  max-width: 32ch;
  color: var(--rv-ink-soft);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.hero__cta {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
@media (min-width: 480px) {
  .hero__cta { flex-direction: row; align-items: center; }
}

.hero__note {
  font-size: var(--fs-sm);
  color: var(--rv-muted);
  font-style: italic;
}
.hero__note::before { content: '· '; color: var(--rv-green); }

/* Hero visual — layered organic shapes + tiny floating cards */
.hero__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero__plate {
  width: min(90%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--rv-salmon-soft), transparent 55%),
    radial-gradient(circle at 70% 70%, var(--rv-green-mist), transparent 55%),
    radial-gradient(circle at center, var(--rv-cream), var(--rv-beige));
  box-shadow: var(--shadow-warm);
  position: relative;
  animation: floatPlate 10s var(--ease-soft) infinite alternate;
}
@keyframes floatPlate { to { transform: translateY(-8px) rotate(0.6deg); } }
.hero__plate::after {
  content: '';
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed rgba(58, 99, 79, 0.18);
}

.hero__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--rv-white);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-lift);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--rv-ink);
}
.hero__chip svg { width: 18px; height: 18px; color: var(--rv-green); }
.hero__chip--top {
  top: 6%;
  right: 4%;
  animation: floatChipA 8s var(--ease-soft) infinite alternate;
}
.hero__chip--mid {
  top: 44%;
  left: -4%;
  animation: floatChipB 9s var(--ease-soft) infinite alternate;
}
.hero__chip--bot {
  bottom: 8%;
  right: 8%;
  animation: floatChipA 11s var(--ease-soft) infinite alternate;
}
@keyframes floatChipA { to { transform: translateY(-10px); } }
@keyframes floatChipB { to { transform: translateY(8px) translateX(4px); } }

/* ----- Section: pillars ------------------------------------ */
.section {
  /* padding-block only — parent rv-shell owns horizontal. */
  padding-block: var(--s-12);
}
.section__eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rv-green-deep);
  font-weight: 700;
  margin-bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.section__eyebrow::before { content: '· · ·'; color: var(--rv-green); letter-spacing: 4px; }
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  line-height: 1.15;
  color: var(--rv-ink);
  max-width: 24ch;
}

.pillars {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); }
}

.pillar {
  background: var(--rv-white);
  border: 1px solid rgba(230, 220, 201, 0.6);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  box-shadow: var(--shadow-petal);
  transition: transform var(--t-base) var(--ease-soft), box-shadow var(--t-base);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.pillar__numeral {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  color: var(--rv-salmon);
  line-height: 1;
}
.pillar__title {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--rv-ink);
  line-height: 1.2;
}
.pillar__body {
  margin-top: var(--s-3);
  color: var(--rv-ink-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

/* ----- Section: how it works steps -------------------------- */
.flow {
  margin-top: var(--s-8);
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .flow { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
}
.flow__step {
  position: relative;
  padding: var(--s-5);
  background: var(--rv-cream);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--rv-green);
}
.flow__step:nth-child(2) { border-color: var(--rv-salmon); }
.flow__step:nth-child(3) { border-color: var(--rv-lilac); }
.flow__step:nth-child(4) { border-color: var(--rv-teal); }
.flow__step__num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--rv-ink-soft);
}
.flow__step__title {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--rv-ink);
}
.flow__step__body {
  margin-top: var(--s-2);
  color: var(--rv-ink-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* ----- Section: CTA closing --------------------------------- */
.cta-band {
  margin-top: var(--s-12);
  padding: var(--s-10) var(--s-6);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 20% 20%, rgba(213, 235, 226, 0.9), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(247, 216, 206, 0.7), transparent 60%),
    var(--rv-cream);
  border: 1px solid var(--rv-line);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
  color: var(--rv-ink);
  line-height: 1.15;
  max-width: 22ch;
  margin: 0 auto;
}
.cta-band__sub {
  margin-top: var(--s-4);
  color: var(--rv-ink-soft);
  font-size: var(--fs-md);
}
.cta-band__cta { margin-top: var(--s-7); }

/* ----- Landing footer ------------------------------------- */
.foot {
  margin-top: var(--s-12);
  /* padding-block only — parent rv-shell owns horizontal. */
  padding-block: var(--s-7) var(--s-8);
  border-top: 1px solid var(--rv-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  align-items: center;
  text-align: center;
}
.foot__copy {
  font-size: var(--fs-sm);
  color: var(--rv-muted);
}
.foot__sig {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--rv-green-deep);
  font-size: var(--fs-base);
}

/* ============================================================
   ===== Painel diário ========================================
   ============================================================ */
.painel__greeting {
  padding-top: var(--s-4);
}
.painel__greeting__date {
  font-size: var(--fs-sm);
  color: var(--rv-muted);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}
.painel__greeting__hi {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  color: var(--rv-ink);
}
.painel__greeting__hi span { font-style: normal; color: var(--rv-green-deep); font-weight: 600; }

.macros {
  margin-top: var(--s-7);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
/* Was 520px — but at that width each legend card collapses to ~68px
   and the labels overflow on top of the ring. Push the 2-col layout
   to real-tablet width so the legend has room to breathe. */
@media (min-width: 720px) {
  .macros { grid-template-columns: minmax(0, 240px) 1fr; gap: var(--s-7); }
}

.macros__ring {
  position: relative;
  width: 220px;
  margin: 0 auto;
  aspect-ratio: 1;
}
.macros__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.macros__ring__track { fill: none; stroke: var(--rv-cream-deep); stroke-width: 16; stroke-linecap: round; }
.macros__ring__bar {
  fill: none;
  stroke: url(#macrosGradient);
  stroke-width: 16;
  stroke-linecap: round;
  transition: stroke-dasharray var(--t-slow) var(--ease-out);
  filter: drop-shadow(0 4px 10px rgba(58, 158, 126, 0.28));
}

.macros__ring__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.macros__ring__kcal {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}
.macros__ring__label {
  margin-top: 4px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rv-muted);
  font-weight: 700;
}

.macros.is-low .macros__ring__bar {
  animation: pulseLow 2.6s ease-in-out infinite;
}
@keyframes pulseLow {
  0%, 100% { filter: drop-shadow(0 4px 10px rgba(232, 155, 133, 0.30)); }
  50%      { filter: drop-shadow(0 4px 18px rgba(232, 155, 133, 0.50)); }
}

.macros__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.macros__legend__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-3);
  background: var(--rv-white);
  border-radius: var(--r-md);
  border: 1px solid var(--rv-line);
}
.macros__legend__name {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: var(--rv-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.macros__legend__dot {
  width: 10px; height: 10px; border-radius: 50%;
}
.macros__legend__value {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--rv-ink);
  font-variant-numeric: tabular-nums;
}
.macros__legend__value em { font-style: italic; color: var(--rv-muted); font-size: var(--fs-sm); font-family: var(--font-body); }

.painel__cta-row {
  margin-top: var(--s-7);
}

.section-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-xl);
  color: var(--rv-ink);
  margin: var(--s-10) 0 var(--s-4);
}

.coach {
  position: relative;
  padding: var(--s-7) var(--s-6);
  background:
    radial-gradient(circle at 100% 0%, rgba(232, 155, 133, 0.18), transparent 50%),
    var(--rv-green-mist);
  border-radius: var(--r-xl);
  border: 1px solid rgba(58, 158, 126, 0.18);
  box-shadow: var(--shadow-petal);
  overflow: hidden;
}
.coach::before {
  content: '“';
  position: absolute;
  top: -20px;
  left: 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: rgba(58, 158, 126, 0.18);
}
.coach__name {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--rv-green-deep);
}
.coach__msg {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--rv-ink);
}
.coach__sig {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--rv-ink-soft);
}

/* ============================================================
   Toast (lightweight feedback)
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  transform: translateX(-50%) translateY(40px);
  padding: 12px 18px;
  background: var(--rv-ink);
  color: var(--rv-cream);
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  z-index: 200;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transition: opacity var(--t-base), transform var(--t-base);
  pointer-events: none;
}
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   Utilities
   ============================================================ */
.u-center { text-align: center; }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mt-6 { margin-top: var(--s-6); }
.u-mt-8 { margin-top: var(--s-8); }
.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.u-muted { color: var(--rv-muted); }

/* ============================================================
   Mobile defensive containment (applies at every viewport)
   Grid/flex children default to `min-width: auto`, which lets
   text inside refuse to shrink and force horizontal overflow.
   Resetting to 0 lets headings wrap, lets the hero column
   shrink to fit, and keeps everything inside the viewport on
   iPhone-class screens.
   ============================================================ */
.hero,
.hero > *,
.step,
.step__body,
.step__actions,
.section,
.pillars,
.flow,
.cta-band,
.foot,
.painel__greeting,
.macros,
.macros__legend,
.coach,
.list,
.list__row,
.list__row__body,
.modal__panel,
.tile-grid,
.tile,
.field,
.rv-shell {
  min-width: 0;
}

/* Headings and prose: never let a long word push the container wider.
   `overflow-wrap: anywhere` is the modern, well-supported choice. */
.hero__title,
.hero__tagline,
.hero__lead,
.step__title,
.step__lead,
.painel__greeting__hi,
.section__title,
.cta-band__title,
.modal__title,
.coach__msg {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* ============================================================
   Mobile refinements
   The base styles already collapse the grid; this block trims
   vertical rhythm, calms the decorative blobs, tightens the
   header chrome, and rescales the macros ring on small phones.
   ============================================================ */
@media (max-width: 720px) {
  /* Header — drop the secondary "Entrar" so the primary CTA breathes. */
  .rv-header { padding: var(--s-3) var(--s-4); }
  .rv-header__right .btn--text { display: none; }
  .btn { padding: 12px 22px; }
  .btn--lg { padding: 15px 28px; font-size: var(--fs-base); }

  /* Generous side padding so content isn't edge-to-edge on phones.
     Use max() with safe-area-inset so iPhones with edge-curved screens
     don't visually clip the first character of left-aligned text. */
  .rv-shell {
    padding-left: max(var(--s-7), env(safe-area-inset-left, 0));
    padding-right: max(var(--s-7), env(safe-area-inset-right, 0));
  }

  /* Hero — tighter rhythm, drop the visual entirely so the headline
     and CTA carry the whole first screen. The floating chips only
     read with the plate behind them; without context they look like
     stray data. */
  .hero {
    /* padding-block only — keep rv-shell's horizontal padding. */
    padding-block: var(--s-4) var(--s-7);
    gap: var(--s-5);
    grid-template-columns: 1fr;
  }
  .hero__visual { display: none; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.75rem); letter-spacing: -0.018em; }
  .hero__tagline { font-size: var(--fs-md); margin-top: var(--s-3); }
  .hero__lead { font-size: var(--fs-base); margin-top: var(--s-4); }
  .hero__cta { margin-top: var(--s-5); align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
  .hero__note { text-align: center; }

  /* Calm the decorative blobs so they don't dominate. */
  .landing__blob-1 { width: 320px; top: -60px; right: -100px; opacity: 0.55; }
  .landing__blob-2 { width: 300px; top: 320px; left: -120px; opacity: 0.45; }
  .landing__blob-3 { width: 360px; bottom: -120px; right: -80px; opacity: 0.4; }

  /* Sections — less padding, denser cards. */
  .section { padding-block: var(--s-8); }
  .section__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .pillars { gap: var(--s-3); margin-top: var(--s-6); }
  .pillar { padding: var(--s-5); }
  .pillar__title { font-size: var(--fs-md); }
  .flow { gap: var(--s-3); margin-top: var(--s-6); }
  .flow__step { padding: var(--s-4); }

  /* Closing CTA band — softer footprint. */
  .cta-band { padding: var(--s-7) var(--s-5); margin-top: var(--s-8); }
  .cta-band__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .cta-band__sub { font-size: var(--fs-base); margin-top: var(--s-3); }
  .cta-band__cta { margin-top: var(--s-5); }

  /* Footer — tighter. */
  .foot { padding-block: var(--s-5) var(--s-7); margin-top: var(--s-8); }

  /* Onboarding — keep the step headline punchy on narrow viewports. */
  .step__title { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .step__lead  { font-size: var(--fs-base); }

  /* Painel greeting + macros ring. */
  .painel__greeting__hi { font-size: clamp(1.75rem, 7.5vw, 2.25rem); }
  .macros { margin-top: var(--s-6); gap: var(--s-5); }
  .macros__ring { width: 200px; }
  .macros__ring__kcal { font-size: 2.2rem; }
  .macros__legend__name { font-size: 10px; }
  .macros__legend__value { font-size: var(--fs-base); }
  .macros__legend__item { padding: var(--s-2) var(--s-3); }

  /* Coach card breathes a bit less. */
  .coach { padding: var(--s-5) var(--s-5); }
  .coach::before { font-size: 6rem; top: -14px; }
  .coach__msg { font-size: var(--fs-md); }

  /* Section title spacing. */
  .section-title { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-lg); }
}

/* iPhone-class viewports (≤ 480px): tighten typography one more notch. */
@media (max-width: 480px) {
  .hero__title { font-size: clamp(1.85rem, 8vw, 2.5rem); }
  .step__title { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .painel__greeting__hi { font-size: clamp(1.6rem, 7vw, 2.1rem); }
  .cta-band__title { font-size: clamp(1.4rem, 5.5vw, 1.85rem); }
  .section__title { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
}

/* Very narrow phones (iPhone SE / mini-screens) */
@media (max-width: 380px) {
  .rv-shell { padding-left: var(--s-5); padding-right: var(--s-5); }
  .macros__legend { gap: var(--s-2); }
  .macros__legend__item { padding: 8px 10px; }
  .modal__panel { padding: var(--s-6) var(--s-5) var(--s-5); }
  .modal__title { font-size: var(--fs-lg); }
}

/* ============================================================
   Back-to-top floating CTA
   Appears on scroll past 600px. Injected once by app.js, lives
   bottom-right with safe-area padding for iPhone home indicator.
   ============================================================ */
.back-to-top {
  position: fixed;
  right: calc(var(--s-5) + env(safe-area-inset-right, 0));
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0));
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rv-green);
  color: var(--rv-white);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition:
    opacity var(--t-base) var(--ease-soft),
    visibility 0s linear var(--t-base),
    transform var(--t-base) var(--ease-soft),
    background var(--t-fast) var(--ease-soft);
  z-index: 90;
}
.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--t-base) var(--ease-soft),
    visibility 0s linear 0s,
    transform var(--t-base) var(--ease-soft),
    background var(--t-fast) var(--ease-soft);
}
.back-to-top:hover { background: var(--rv-green-deep); transform: translateY(-2px); }
.back-to-top:active { transform: translateY(0); }
.back-to-top:focus-visible { outline: none; box-shadow: var(--ring-focus), var(--shadow-lift); }
.back-to-top svg { width: 22px; height: 22px; }