/* ===== 10-faixa.css ===== */
/* ===== 10-faixa · faixa de serviços (plan §6.4, motion §9 #8) =====
   one dark line, items separated by mini rings, edge fades as pseudo-elements.
   Continuous marquee (Lucas 21/09, js/sections/10-faixa.js, transform only via the Web Animations API): it drifts
   on its own, slowly, endlessly and at one steady pace (scrolling does not change it, Lucas 22/09); it stops
   under a hovering mouse, while a finger is down, off screen and in a hidden tab. .is-live = motion allowed (also in
   captures, where it is frozen and re-centred below); .is-moving = the marquee is running.
   Static and centred (exactly the old line) without JS, with reduced motion and in captures.
   Toned down (fix pass): it sits at the bottom of the first screen and must not outshine the hero. */

.faixa {
  --faixa-bg: var(--ink);
  --faixa-fade: clamp(40px, 9vw, 160px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--on-dark);
  background:
    radial-gradient(420px 120px at 26% 50%, rgba(224, 135, 99, .16), rgba(224, 135, 99, 0) 70%),
    radial-gradient(420px 120px at 74% 50%, rgba(154, 143, 209, .15), rgba(154, 143, 209, 0) 70%),
    var(--faixa-bg);
}
/* edge fades (no mask-image) */
.faixa::before,
.faixa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: var(--faixa-fade);
  pointer-events: none;
}
.faixa::before { left: 0; background: linear-gradient(90deg, var(--faixa-bg) 8%, rgba(26, 23, 20, 0)); }
.faixa::after { right: 0; background: linear-gradient(270deg, var(--faixa-bg) 8%, rgba(26, 23, 20, 0)); }

/* static line: centre the sets so the first word never sits under the left fade */
.faixa__viewport { display: flex; justify-content: center; }
.faixa.is-live .faixa__viewport { justify-content: flex-start; }
/* moving: words enter and leave through the fades, so the narrow screens get a wider one (static line unchanged) */
.faixa.is-moving { --faixa-fade: clamp(56px, 9vw, 160px); }
.faixa__track {
  display: flex;
  flex: none;
}
.faixa.is-live .faixa__track { will-change: transform; }
.faixa__set {
  display: flex;
  flex: none;
  align-items: center;
  height: 68px;
}
.faixa__item {
  flex: none;
  padding: 0 24px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--on-dark-2);
  transform: translateY(-1px);
}
.faixa__sep { flex: none; display: grid; place-items: center; opacity: .7; }
.faixa__sep svg { width: 20px; height: 13px; }

@media (max-width: 759.98px) {
  .faixa__set { height: 54px; }
  .faixa__item { padding: 0 16px; font-size: 17px; }
  .faixa__sep svg { width: 18px; height: 11px; }
}

html[data-capture] .faixa .faixa__viewport { justify-content: center; }
html[data-capture] .faixa__track { transform: none !important; }

/* ===== 20-antes.css ===== */
/* ===== 20-antes · antes & depois (#antes · plan §6.5, §7.2 item 2, motion §9 #9) =====
   comparator = two stacked captures; the "antes" layer is revealed by a wipe built from transforms
   (outer clip translates left, inner layer translates right by the same amount), driven by --p (0–100,
   the handle position from the left). Final state (50) without JS, with reduced motion and in captures. */

.antes { isolation: isolate; overflow-x: clip; }
/* #servicos follows on the same cream ground: a shorter end keeps the gap between them close to the block rhythm */
.antes.section { padding-bottom: clamp(44px, 4.5vw, 64px); }   /* the glows behind the window never widen the page */

/* ---------- layout ---------- */
.antes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "stage" "fecho";
  justify-items: start;
}
.antes__head { grid-area: head; margin-bottom: 24px; }
.antes__stage { grid-area: stage; position: relative; justify-self: stretch; min-width: 0; }
.antes__toggle { grid-area: toggle; display: none; }
.antes__fecho { grid-area: fecho; }
.antes__destaque { display: block; color: var(--rust); }   /* own line; the inner .grad-text makes it the brand gradient like every light-ground accent (rust = fallback) (fix pass) */

@media (min-width: 760px) {
  .antes__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head head" "stage stage" "toggle fecho";
    align-items: center;
    column-gap: 24px;
  }
  .antes__head { margin-bottom: 36px; }
  .antes__toggle { display: inline-flex; margin-top: 28px; }
  .antes__fecho { margin-top: 28px; display: flex; align-items: center; gap: 20px; justify-self: end; }
}
/* tablet: the toggle and the closing (question + button) don't fit side by side (they overlapped at 768) → stack them */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .antes__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "toggle" "fecho"; }
  .antes__toggle { justify-self: start; margin-top: 24px; }
  .antes__fecho { justify-self: stretch; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; }
}
@media (min-width: 1024px) {
  .antes__grid {
    grid-template-columns: minmax(0, 1fr) min(57%, 704px);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head stage" "toggle stage" "fecho stage";
    column-gap: clamp(40px, 4.4vw, 64px);
    align-items: start;
  }
  .antes__head { margin: 0; }
  .antes__stage { align-self: center; }
  .antes__toggle { margin-top: 30px; }
  .antes__fecho { align-self: end; justify-self: start; display: grid; justify-items: start; gap: 14px; margin: 40px 0 0; }
}

/* ---------- toggle (segmented) ---------- */
.antes__toggle {
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .72);
}
.antes__opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--dur-fast) linear;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .antes__opt:hover { color: var(--ink); } }
.antes__opt[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 600;
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--line), 0 6px 14px -8px rgba(26, 23, 20, .28);
}
.antes__opt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.antes__opt-dot--antes { background: var(--soft-muted); }
.antes__opt-rings { width: 16px; height: 10px; flex: none; }

/* ---------- closing ---------- */
.antes__pergunta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---------- soft glows behind the window ---------- */
/* closest-side ellipses reach 0 exactly at the nearest edges of the box: no hard edges */
.antes__stage::before {
  content: "";
  position: absolute;
  inset: -110px -120px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 32% 34%, rgba(237, 177, 153, .42), rgba(237, 177, 153, .16) 55%, rgba(237, 177, 153, 0)),
    radial-gradient(closest-side at 70% 68%, rgba(194, 185, 229, .46), rgba(194, 185, 229, .16) 55%, rgba(194, 185, 229, 0));
}

/* ---------- comparator (shared by the window and the phone) ---------- */
.cmp { --p: 50; }
.cmp__view {
  position: relative;
  container-type: inline-size;
  overflow: clip;
  touch-action: pan-y;            /* vertical page scroll keeps working over the mockup */
  user-select: none;
  -webkit-user-select: none;
}
.cmp__layer { position: absolute; inset: 0; overflow: hidden; }
.cmp__layer--depois { background: #F3F2EE; }
.cmp__layer--antes { background: #E3E3E3; }
.cmp__img { display: block; width: 100%; height: auto; max-width: none; -webkit-user-drag: none; pointer-events: none; }
.cmp__view picture { display: block; }

.cmp__clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  transform: translate3d(calc(var(--p) * 1% - 100%), 0, 0);
}
.cmp__clip > .cmp__layer { transform: translate3d(calc(100% - var(--p) * 1%), 0, 0); }

.cmp__handle {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transform: translate3d(calc(var(--p) * 1%), 0, 0);
}
.cmp__line {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #FFFFFF;
  box-shadow: 0 0 0 .5px rgba(26, 23, 20, .16), 0 0 14px rgba(26, 23, 20, .22);
}
.cmp__knob {
  --knob: 50px;
  --edge: calc(var(--knob) / 2 + 6px);
  position: absolute;
  left: 0;
  top: 50%;
  display: grid;
  place-items: center;
  width: var(--knob);
  height: var(--knob);
  margin: calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(26, 23, 20, .10), 0 10px 24px -8px rgba(26, 23, 20, .42);
  pointer-events: auto;
  touch-action: none;             /* the knob itself drags horizontally */
  cursor: grab;
  /* keeps the whole knob inside the view at 0% and 100% */
  translate: calc(max(0px, var(--edge) - var(--p) * 1cqw) - max(0px, var(--p) * 1cqw - 100cqw + var(--edge))) 0;
  -webkit-tap-highlight-color: transparent;
}
.cmp__knob svg { width: 30px; height: 19px; }
/* tiny arrows either side of the rings */
.cmp__knob::before,
.cmp__knob::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -4px;
  border-block: 4px solid transparent;
}
.cmp__knob::before { left: 5px; border-right: 4px solid var(--soft-muted); }
.cmp__knob::after { right: 5px; border-left: 4px solid var(--soft-muted); }
.cmp__knob:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; border-radius: 50%; }
.cmp.is-dragging .cmp__knob { cursor: grabbing; }
@media (hover: hover) {
  .cmp__knob:hover { box-shadow: 0 0 0 1px rgba(26, 23, 20, .16), 0 12px 28px -8px rgba(26, 23, 20, .5); }
}

/* under the knob, light (it only shows until the first drag, key press or toggle) (fix pass) */
.cmp__hint {
  position: absolute;
  left: 0;
  top: calc(50% + 34px);
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .94);
  color: var(--ink-2);
  box-shadow: 0 6px 14px -8px rgba(26, 23, 20, .35);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  translate: calc(-50% + max(0px, 84px - var(--p) * 1cqw) - max(0px, var(--p) * 1cqw - 100cqw + 84px)) 0;
  transition: opacity var(--dur-base) linear;
}
.antes.is-touched .cmp__hint, .antes.is-touched .antes__dica { opacity: 0; }

/* motion: js/sections/20-antes.js tweens --p frame by frame (transforms only), so nothing here transitions
   except the fades of the notes, the hint and the tab title */
.cmp__knob { transition: box-shadow var(--dur-fast) linear; }
@media (prefers-reduced-motion: reduce) {
  .cmp__note, .cmp__hint, .antes__dica, .cmp__tabstate { transition: none; }
}
html[data-capture] #antes .cmp { --p: 50 !important; }
html[data-capture] #antes .cmp :is(.cmp__note, .cmp__hint, .cmp__tabstate) { transition: none !important; }
/* without JS nothing can move the divider: the toggles and the drag hint would promise an action */
html:not(.js) #antes :is(.antes__toggle, .cmp__hint, .antes__dica) { display: none; }

/* ---------- desktop window: notes over the captures ---------- */
.cmp--desk { width: 100%; }
.cmp__box {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  min-height: 6px;
  border: 1.5px dashed rgba(160, 78, 46, .8);
  border-radius: 4px;
  background: rgba(224, 135, 99, .07);
}
/* paper pills (were dark): the two captures stay the focus of the section (fix pass) */
.cmp__note {
  position: absolute;
  left: max(16px, var(--x));
  top: var(--y);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .94);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  box-shadow: 0 6px 14px -8px rgba(26, 23, 20, .35);
  transform: translateY(-50%);
  transition: opacity 180ms linear;
}
.cmp__note--r { left: min(calc(100% - 16px), var(--x)); transform: translate(-100%, -50%); }
.cmp__note--m { --x: 16px; font-size: 12px; gap: 5px; padding: 0 9px 0 7px; }   /* in the grey margin left of the old 960px box, 16px from the frame */
.cmp__note.is-off { opacity: 0; }
.cmp__note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; }
.cmp__note--antes::before { background: var(--coral); }
.cmp__note--depois::before { background: var(--lavender); }
/* state chips: 24px tall, 8px from the bottom, so the depois one stays under the Ambientes chip row of the capture */
.cmp__tag {
  position: absolute;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 25px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .96);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 16px -8px rgba(26, 23, 20, .35);
}
.cmp__tag svg { width: 16px; height: 10px; flex: none; }
.cmp__tag--antes { left: 8px; }
.cmp__tag--antes::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--soft-muted); }
.cmp__tag--depois { right: 8px; }

/* tab title follows the side that shows more */
.cmp__tabswap { display: grid; min-width: 0; }
.cmp__tabstate {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: .58em;
  min-width: 0;
  transition: opacity var(--dur-fast) linear;
}
.cmp__tabstate--antes { opacity: 0; }
.cmp.is-antes .cmp__tabstate--antes { opacity: 1; }
.cmp.is-antes .cmp__tabstate--depois { opacity: 0; }
.cmp__globe { color: #6B6358; border-radius: 0; }
/* aba da Norte: quadrado nogueira clara com o N verde (o SVG está no src/sections/20-antes.html; por quê: COMPONENTS.md §17) */
.cmp__favicon-norte { display: grid; place-items: center; background: #C8955F; }
.cmp__favicon-norte svg { width: 100%; height: 100%; }

@media (min-width: 760px) and (max-width: 1023.98px) {
  .cmp--desk { --bf-ui: .9; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .cmp--desk { --bf-ui: .85; }
  .cmp__note { height: 22px; font-size: 11.5px; padding: 0 8px 0 7px; gap: 5px; }
  /* the grey margin is narrower than the pill here: lift it over the notice bar so the title stays readable */
  .cmp__note--titulo { --y: 20.4% !important; }
  .cmp__tag { bottom: 6px; height: 21px; padding: 0 9px; font-size: 11.5px; }
  .cmp__tag--antes { left: 6px; }
  .cmp__tag--depois { right: 6px; }
}

/* ---------- phones ---------- */
.antes__mob { display: none; }
@media (max-width: 759.98px) {
  .antes.section { padding-block: 44px 40px; }   /* mobile length (fix pass) */
  .antes__head { margin-bottom: 20px; }
  .cmp--desk { display: none; }
  .antes__stage::before { inset: -40px -20px; }
  .antes__mob {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
  }
  .cmp--mob { --pf-w: clamp(160px, calc(100vw - 2 * var(--gutter) - 156px), 200px); }
  .cmp--mob .cmp__knob { --knob: 48px; }
  .cmp--mob .cmp__knob svg { width: 24px; height: 15px; }
  .cmp--mob .cmp__knob::before { left: 3px; }
  .cmp--mob .cmp__knob::after { right: 3px; }

  .antes__legenda { display: grid; gap: 18px; justify-items: start; }
  .antes__grupo { display: grid; gap: 8px; justify-items: start; width: 100%; }
  .antes__legenda .antes__opt {
    min-height: 44px;
    gap: 7px;
    padding: 0 12px 0 11px;
    border: 1px solid var(--line);
    background: rgba(251, 248, 242, .72);
    font-size: 14px;
  }
  .antes__legenda .antes__opt[aria-pressed="true"] { border-color: var(--soft-muted); background: var(--paper); }
  .antes__lista { display: grid; gap: 6px; padding-left: 4px; }
  .antes__lista > li {
    position: relative;
    padding-left: 16px;
    font-size: 13.5px;
    line-height: 1.3;
    color: var(--ink-2);
    text-wrap: balance;
  }
  .antes__lista > li::before { content: ""; position: absolute; left: 0; top: .42em; width: 7px; height: 7px; border-radius: 50%; }
  .antes__lista--antes > li::before { background: var(--peach); }
  .antes__lista--depois > li::before { background: var(--lavender-light); }
  /* the group that is not on screen steps back (muted text keeps 4.5:1) */
  .antes__legenda:has([aria-pressed="true"]) .antes__grupo:has(> [aria-pressed="false"]) .antes__lista > li { color: var(--muted); }
  .antes__legenda:has([aria-pressed="true"]) .antes__grupo:has(> [aria-pressed="false"]) .antes__lista > li::before { opacity: .45; }
  .antes__dica { font-size: 13px; line-height: 1.3; color: var(--muted); transition: opacity var(--dur-base) linear; }

  .antes__fecho { margin-top: 24px; width: 100%; display: grid; gap: 12px; }
  .antes__pergunta { font-size: 19px; }
  .antes__cta { width: 100%; min-height: 52px; }
}

/* ===== 30-servicos-a.css ===== */
/* =====================================================================
   30-servicos-a · #servicos opening + sub-index · #catalogo (Studio Lume) · #landing-page (Pousada Alto da Garoa)
   order: base (all widths) → ≥1024 desktop → <760 phone overrides (last, so they win)
   ===================================================================== */

/* bottom padding and block gap (--svc-gap) are mirrored by 40-servicos-b (.svb): keep them in sync.
   #antes (same cream ground) ends with a shorter padding, so the top here is short too */
#servicos { padding-top: clamp(40px, 4.5vw, 64px); padding-bottom: clamp(40px, 3.4vw, 48px); }

/* ---------- opening ---------- */
#servicos .svc-head { display: grid; gap: 16px; margin-bottom: 24px; }
#servicos .svc-head__title { margin-top: 14px; }
#servicos .svc-head__side .lead { max-width: 30em; }
#servicos .svc-head__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--muted);
}
#servicos .svc-head__note > svg { width: 16px; height: 10px; flex: none; }
#servicos .svc-head__link { color: var(--rust); font-weight: 500; }
@media (hover: hover) { #servicos .svc-head__link:hover { color: var(--ink); } }

/* ---------- sub-index (base = phone + tablet: chips row that scrolls sideways, not fixed) ---------- */
#servicos .svc-index { position: relative; margin-bottom: clamp(36px, 3.6vw, 52px); }
#servicos .svc-index__list {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter);
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
#servicos .svc-index__list::-webkit-scrollbar { display: none; }
#servicos .svc-index__list > li { flex: none; scroll-snap-align: start; }
#servicos .svc-index__link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .72);
  font-size: var(--fs-chip);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#servicos .svc-index__link b { color: var(--ink); font-weight: 600; }
@media (max-width: 1023.98px) { #servicos .svc-index__link { min-height: 44px; } }   /* touch target */

/* ---------- service block (text · dados · bullets | mockup · button) ---------- */
#servicos .svc-block { display: grid; grid-template-columns: minmax(0, 1fr); }
#servicos .svc-block + .svc-block { margin-top: var(--svc-gap); }
#servicos .svc-block__text { display: grid; justify-items: start; align-content: start; }
#servicos .svc-block__title { margin-top: 12px; max-width: 22em; }
#servicos .svc-block__text > .body { margin-top: 14px; }
#servicos .svc-block__text > .dados { justify-self: stretch; margin-top: 22px; }
#servicos .svc-block__text > .lista-aneis { margin-top: 20px; }
#servicos .svc-block__media { position: relative; min-width: 0; margin: 32px 0 0; }
#servicos .svc-block__cta { margin-top: 28px; }

/* ---------- (a) catálogo · Studio Lume: phone (janela viva) + PDF sheet ---------- */
#servicos .lume-stage__inner { position: relative; width: 420px; max-width: 100%; height: 506px; margin-inline: auto; }
#servicos .lume-phone { position: absolute; z-index: 1; left: 0; top: 0; width: 234px; }
#servicos .lume-phone .pf { --pf-w: 234px; }
#servicos .lume-pdf { position: absolute; z-index: 2; right: 0; top: 96px; width: 222px; }
/* pause: frosted pill inside the phone screen, bottom-left above the fixed "Agendar" bar (.jv-toggle--frame, fix pass) */
#servicos .lume-stage__pause { left: 18px; bottom: 122px; }

/* auto-scroll on a <picture> (webp + png) instead of a bare img */
#servicos .janela-viva > .jv-pic {
  display: block;
  will-change: transform;
  animation: janela-viva var(--jv-dur, 22s) cubic-bezier(.45, 0, .55, 1) infinite alternate both;
  animation-play-state: paused;
}
#servicos .janela-viva.is-playing > .jv-pic { animation-play-state: running; }
#servicos .jv-pic img { width: 100%; height: auto; max-width: none; }
html[data-capture] #servicos .janela-viva > .jv-pic { animation: none; }

/* the catalog's fixed "Agendar pelo WhatsApp" bar stays at the bottom while the page scrolls */
#servicos .lume-phone__cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
#servicos .lume-phone__cta img { width: 100%; height: auto; max-width: none; }

/* mobile browser bar with the address (it is a link, not an app) */
#servicos .lume-phone__safari {
  position: relative;
  flex: none;
  display: flex;
  justify-content: center;
  height: 15.4cqi;
  padding-top: 2.2cqi;
  background: #F4F2F1;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .07);
}
#servicos .lume-phone__omni {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.3cqi;
  width: 78%;
  height: 8.4cqi;
  border-radius: 99px;
  background: #FFFFFF;
  box-shadow: 0 .3cqi 1.2cqi rgba(0, 0, 0, .10);
  font-family: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  font-size: 3.5cqi;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  color: #1C1C1E;
}
#servicos .lume-phone__omni svg { width: 2.7cqi; height: 2.7cqi; color: #6B6B70; flex: none; }

/* PDF first page as a file card, slightly rotated (system font: it is a file, not the brand) */
#servicos .lume-pdf__card {
  overflow: hidden;
  border-radius: 7px;
  background: #FFFFFF;
  border: 1px solid rgba(26, 23, 20, .08);
  box-shadow: 0 1px 2px rgba(26, 23, 20, .06), 0 26px 50px -22px rgba(26, 23, 20, .38);
  transform: rotate(2deg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
#servicos .lume-pdf__page img { width: 100%; height: auto; }
#servicos .lume-pdf__file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px 10px;
  border-top: 1px solid rgba(0, 0, 0, .07);
}
#servicos .lume-pdf__icon {
  flex: none;
  display: grid;
  place-items: end center;
  width: 24px;
  height: 29px;
  padding-bottom: 6px;
  border-radius: 3px;
  background: #DE4A3F;
  clip-path: polygon(0 0, 66% 0, 100% 26%, 100% 100%, 0 100%);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: #FFFFFF;
}
#servicos .lume-pdf__meta { display: grid; gap: 3px; min-width: 0; line-height: 1.2; }
#servicos .lume-pdf__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; color: #1F1D1B; }
#servicos .lume-pdf__size { font-size: 10.5px; color: #6E6A66; }

/* ---------- (b) landing page · Pousada Alto da Garoa ---------- */
#servicos .lp-desk { display: none; }

/* desktop window: the capture moves to the part, a numbered marker frames it */
#servicos .lp-view { container-type: size; }
/* domain + path join without a gap: handled for every frame in base.css (.bf__domain + .bf__path, integration) */
#servicos .lp-shot {
  display: block;
  transform: translateY(calc(var(--s, 0) * -1%));
  transition: transform 900ms var(--ease-inout);
}
#servicos .lp-shot img { width: 100%; height: auto; max-width: none; }
#servicos .lp-zone {
  position: absolute;
  left: 10px;
  right: 10px;
  top: max(24px, calc(var(--zt, 0) * 1% + 8px));
  bottom: max(8px, calc(var(--zb, 0) * 1% + 8px));
  border: 2px solid var(--coral);
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(224, 135, 99, .16), inset 0 0 0 9999px rgba(224, 135, 99, .04);
  pointer-events: none;
  transition: opacity 240ms linear;
}
#servicos .lp-zone__tag {
  position: absolute;
  right: 14px;
  top: -15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px 0 3px;
  border-radius: 99px;
  background: var(--paper);
  box-shadow: 0 0 0 1.5px var(--coral), 0 8px 18px -8px rgba(26, 23, 20, .45);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--muted);
  transform-origin: calc(100% - 14px) 50%;
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
/* part 01 sits on the demo's header, so it is placed in cqw of the view (it scales with the capture) instead of px:
   - zone top 3,6cqw = y 52-56 of the 1440 capture, between the announcement bar (ends at ~41) and the logo (starts at ~61).
     The 24px floor put the border through "Alto da Garoa" and the menu at 1024 (view 484px: y 71-77 of the capture).
   - the tag, centred on the border, covered only the top half of the "Reservar" button and left a dark sliver under it
     (1280/1440). It centres on the button instead (y 60,5-104,5 of the capture, centre 82,5 = 5,73cqw) and covers all of it:
     tag top = 5,73cqw − 14px (half the tag) − 2px (border) − 3,6cqw (zone top) */
#servicos .lp-zone[data-n="01"] { top: 3.6cqw; }
#servicos .lp-zone[data-n="01"] .lp-zone__tag { top: calc(2.13cqw - 16px); }
#servicos .lp-zone__text b { color: var(--ink); font-weight: 600; }
#servicos .lp-zone__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF;
}
#servicos .lp-zone.is-swapping { opacity: 0; transition-duration: 140ms; }
#servicos .lp-zone.is-swapping .lp-zone__tag { opacity: 0; transform: scale(.6); transition-duration: 0s; }

#servicos .lp-parts { margin-top: 20px; }
#servicos .lp-parts__label { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--muted); }
#servicos .lp-parts__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#servicos .lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .72);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: left;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
#servicos .lp-chip b { color: var(--ink); font-weight: 600; }
@media (hover: hover) { #servicos .lp-chip:hover { border-color: var(--soft-muted); color: var(--ink-2); } }
#servicos .lp-chip__n {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sand);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink-2);
}
#servicos .lp-chip[aria-pressed="true"] { border-color: rgba(224, 135, 99, .7); background: var(--paper); color: var(--ink-2); }
#servicos .lp-chip[aria-pressed="true"] .lp-chip__n { background: var(--coral); color: var(--ink); }   /* ink on coral 6.6:1 (white was 2.7:1) */

/* phone + tablet: carousel with the parts, each on the mobile version of the page */
#servicos .lp-slides {
  display: flex;
  gap: 12px;
  margin: 10px calc(-1 * var(--gutter)) 0;
  padding: 2px var(--gutter) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#servicos .lp-slides::-webkit-scrollbar { display: none; }
#servicos .lp-slides:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
#servicos .lp-slide { flex: none; width: min(272px, 76vw); scroll-snap-align: start; }
#servicos .lp-slide__label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--muted);
  text-wrap: balance;
}
#servicos .lp-slide__label b { color: var(--ink); font-weight: 600; }
#servicos .lp-slide__label .lp-chip__n { background: var(--coral); color: var(--ink); }
#servicos .lp-slide__stage {
  display: flex;
  justify-content: center;
  height: 252px;
  margin-top: 8px;
  padding-top: 20px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--sand);
}
#servicos .lp-slide__phone { --pf-w: 206px; --pf-status: #171A1D; --pf-status-ink: #FFFFFF; flex: none; }   /* default: each slide sets the color of its own crop inline */
#servicos .lp-slide__shot { display: block; }   /* one 390×470 crop per part (fix pass: replaces the 10,640px sprite) */

/* =====================================================================
   desktop ≥ 1024
   ===================================================================== */
@media (min-width: 1024px) {
  #servicos .svc-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 512px);   /* lead starts on the axis of the blocks' text column (x 828 at 1440) */
    column-gap: 64px;
    align-items: end;
    margin-bottom: 30px;
  }

  /* sub-index: light capsule like the header menu; js/sections/30-servicos-a.js pins it
     under the header while the services (part B included) are on screen */
  #servicos .svc-index { height: 46px; }
  #servicos .svc-index__bar { display: inline-flex; }
  #servicos .svc-index__list {
    gap: 0;
    height: 46px;
    margin-inline: 0;
    padding: 0 4px;
    overflow: visible;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: rgba(251, 248, 242, .55);
  }
  #servicos .svc-index__list > li { position: relative; display: flex; align-items: center; }
  #servicos .svc-index__list > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 14px;
    margin-top: -7px;
    background: var(--divider);
    transition: opacity var(--dur-fast) linear;
  }
  #servicos .svc-index__list > li:has(> .is-current)::before,
  #servicos .svc-index__list > li:has(> .is-current) + li::before { opacity: 0; }
  #servicos .svc-index__link {
    min-height: 0;
    height: 36px;
    padding: 0 17px;
    border: 0;
    background: none;
    font-size: 14.5px;
  }
  #servicos .svc-index__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--grad);
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out);
  }
  #servicos .svc-index__link.is-current { color: var(--ink-2); }
  @media (hover: hover) { #servicos .svc-index__link:hover { color: var(--ink-2); } }
  #servicos .svc-index__link.is-current::before { opacity: .16; }

  /* pinned: one frosted strip attached to the header, list centred under the nav capsule (fix pass) */
  #servicos .svc-index.is-stuck .svc-index__bar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: calc(var(--z-header) - 1);
    display: flex;
    justify-content: center;
    padding-block: 6px;
    background: rgba(245, 239, 230, .95);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
    transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out), visibility 0s;
  }
  #servicos .svc-index.is-stuck .svc-index__list { background: transparent; box-shadow: none; }
  #servicos .svc-index.is-away .svc-index__bar {
    opacity: 0;
    transform: translateY(-8px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-fast) linear, transform var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
  }
  /* service anchors land below the pinned sub-index */
  #catalogo, #landing-page, main :is(#site, #app, #sob-demanda) { scroll-margin-top: calc(var(--header-h) + 76px); }

  /* blocks alternate sides; text + button centred against the mockup */
  #servicos .svc-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". media" "text media" "cta media" ". media";
    column-gap: clamp(48px, 6.4vw, 96px);
  }
  #servicos .svc-block--flip {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
    grid-template-areas: "media ." "media text" "media cta" "media .";
  }
  #servicos .svc-block__text { grid-area: text; }
  #servicos .svc-block__media { grid-area: media; align-self: center; margin: 0; }
  #servicos .svc-block__cta { grid-area: cta; margin-top: 30px; }

  #servicos .lp-desk { display: block; }
  #servicos .lp-mob { display: none; }

  /* the part chips (7 today) as a tidy grid under the window (3 columns, 4 from 1280) instead of a ragged wrap */
  #servicos .lp-parts__list { display: grid; grid-template-columns: repeat(3, auto); }
  #servicos .lp-parts__list > li { display: flex; }
  #servicos .lp-chip { flex: 1; }
}
@media (min-width: 1280px) {
  #servicos .lp-parts__list { grid-template-columns: repeat(4, auto); }
}
@media (min-width: 1024px) and (max-width: 1199.98px) {
  #servicos .svc-index__link { padding: 0 11px; font-size: 13.5px; }
  /* smaller window: the part marker keeps its proportion to the site inside */
  #servicos .lp-zone__tag { top: -13px; height: 24px; gap: 6px; padding-right: 10px; font-size: 11.5px; }
  #servicos .lp-zone__num { width: 19px; height: 19px; font-size: 10px; }
}

/* =====================================================================
   phone < 760 (text → dados → bullets → mockup → button)
   ===================================================================== */
@media (max-width: 759.98px) {
  #servicos { padding-top: 36px; }
  #servicos .svc-head { gap: 12px; margin-bottom: 20px; }
  #servicos .svc-index { margin-bottom: 28px; }

  #servicos .svc-block__title { margin-top: 10px; }
  #servicos .svc-block__text > .body { margin-top: 12px; line-height: 1.55; }
  #servicos .svc-block__text > .dados { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #servicos .svc-block__text > .dados > div { padding-block: 11px; }
  #servicos .svc-block__text > .dados > div::before { top: 11px; bottom: 11px; }
  #servicos .svc-block__text > .dados dd { font-size: 15px; }
  /* plan §3 (phones): the bullets fold into the "inclui" cell, same as #site, #app and #sob-demanda in part B */
  #servicos .svc-block__text > .lista-aneis { display: none; }
  #servicos .svc-block__media { margin-top: 24px; }
  #servicos .svc-block__cta { margin-top: 20px; }
  #servicos .svc-block__cta .btn { width: 100%; }

  /* catalog: sand panel, the phone rises from its bottom edge, the PDF on top */
  #servicos .lume-stage__inner {
    width: auto;
    height: 240px;   /* same panel height as the phones of part B */
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sand);
  }
  #servicos .lume-phone { left: max(16px, calc(50% - 156px)); top: 18px; width: 206px; }
  #servicos .lume-phone .pf { --pf-w: 206px; }
  #servicos .lume-pdf { left: auto; right: max(16px, calc(50% - 164px)); top: 50px; width: 112px; }
  #servicos .lume-pdf__file { gap: 6px; padding: 6px 7px 7px; }
  #servicos .lume-pdf__icon { width: 17px; height: 21px; padding-bottom: 4px; font-size: 5.5px; }
  #servicos .lume-pdf__meta { gap: 2px; }
  #servicos .lume-pdf__name { font-size: 8.5px; }
  #servicos .lume-pdf__size { font-size: 8px; }
  #servicos .lume-stage__pause { top: 8px; right: 10px; left: auto; bottom: auto; }   /* inside the sand panel, the one free corner */

  /* landing page carousel: the slide labels carry the numbers, the list label stays for screen readers */
  #servicos .lp-mob > .lp-parts__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  #servicos .lp-slides { margin-top: 0; }
  #servicos .lp-slide__label { min-height: 34px; font-size: 13px; }
  #servicos .lp-slide__stage { height: 240px; margin-top: 6px; padding-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #servicos .janela-viva > .jv-pic { animation: none; }
  #servicos .svc-index__bar,
  #servicos .svc-index.is-stuck .svc-index__bar,
  #servicos .svc-index.is-away .svc-index__bar { transition: none; }
  #servicos .lp-shot { transition: none; }
  #servicos .lp-zone { transition: opacity 150ms linear; }
  #servicos .lp-zone__tag,
  #servicos .lp-zone.is-swapping .lp-zone__tag { transform: none; transition: none; }
}

/* ===== 40-servicos-b.css ===== */
/* =====================================================================
   serviços · parte B  ·  #site (Ravi Casa, notebook + celular) · #app (Clínica Movimento, janela + celular)
   · #sob-demanda (abas: automação = janela com o painel da Pousada Alto da Garoa · chat da equipe = notebook + celular da Aurora)
   continues the services area (no H2 of its own). All selectors scoped to .svb / .svb-*.
   order: base → ≥760 → ≥1024 → ≥1280 → phone (< 760) overrides last
   ===================================================================== */

/* #servicos (part A) ends with clamp(40px,3.4vw,48px) of padding and spaces its blocks by --svc-gap:
   the top padding here completes that same gap, so the four service blocks keep one rhythm */
.svb {
  position: relative;
  padding-top: calc(var(--svc-gap) - clamp(40px, 3.4vw, 48px));
  padding-bottom: clamp(40px, 3.9vw, 56px);   /* the sand #preco brings its own top padding */
}
@media (min-width: 1024px) { .svb { padding-bottom: var(--section-y); } }   /* same space before a ground change as every other section (fix pass) */
.svb > .container { display: grid; row-gap: var(--svc-gap); }

/* captures wrapped in <picture> (WebP + PNG) behave like the base direct-child imgs */
.svb .bf__view > picture, .svb .pf__view > picture { display: block; }
.svb .bf__view > picture > img, .svb .pf__view > picture > img,
.svb .bf__view > img, .svb .pf__view > img { display: block; width: 100%; height: auto; max-width: none; }

/* the Ravi window (janela viva) uses bare <img> children, so the base .janela-viva > img rules run it */

/* phone captures that leave their top safe area blank: the frame's status bar floats over it */
.svb-pf .pf__status { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: transparent; }
.svb-pf .pf__view { flex: 1; }

/* ---------- service block (text · mockup · button) ---------- */
.svb-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "media" "cta";
}
.svb-text { grid-area: text; min-width: 0; }
.svb-text > * + * { margin-top: 14px; }
.svb-text > .eyebrow + .h3 { margin-top: 12px; }
.svb-text > .dados { margin-top: 22px; }
.svb-text > .svb-bullets { margin-top: 20px; }
.svb-title { max-width: 22em; }
.svb-media { grid-area: media; position: relative; min-width: 0; margin-top: 32px; }
.svb-cta { grid-area: cta; margin-top: 28px; }

.svb .pf__view > .svb-pic-mob { display: none; }

/* ---------- #site: notebook + celular (.nb-duo, base.css 5.10b) + pausa numa linha embaixo, fora da tela ----------
   Grid trap: .nb-duo is a width container, so it must stretch (a start-aligned grid item would collapse to 0). */
.svb-media--nb { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: 12px; }
.svb-media--nb > .svb-nb { justify-self: stretch; }
.svb-nb .nb__view > .svb-nb__poster { display: none; animation: none; }   /* phones only (below) */
.svb-nb-pausa { position: relative; }   /* .jv-toggle (32px), without --frame: it never covers the demo */
.svb-nb-pausa::after { content: ""; position: absolute; inset: -7px -3px; }   /* 44px touch area */

/* app: window with the dashboard; the "confirmed" capture crossfades in once */
.svb-win { position: relative; display: grid; min-width: 0; }
.svb-live { position: absolute; inset: 0; transition: opacity 240ms var(--ease-out); }
.svb-live.is-armed { opacity: 0; }
html[data-capture] .svb-live { opacity: 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .svb-live, .svb-live.is-armed { opacity: 1; transition: none; } }

/* ---------- #app: desktop window + phone (≥ 760) ----------
   The window and the phone share one grid cell, so the block always reserves the phone's full height.
   The phone sits on the right, --svb-out past the window edge (inside the column), and drops
   --svb-drop below the window top; when the phone is shorter than the window (tablet) it is pushed down
   until it pokes 24px below the window instead:
     window height = (100cqw − out − 2px) × 10/16 + 76.2px × ui (tabs + toolbar) + 2px (borders)
     phone height  = phone width × 2.085 (390×844 screen + bezel) */
@media (min-width: 760px) {
  .svb-duo {
    --bf-ui: .92;
    --svb-out: 40px;
    --svb-drop: 16px;
    --svb-pf-w: clamp(170px, 28cqw, 230px);
    container-type: inline-size;
    display: grid;
    align-items: start;
    padding-bottom: 0;
  }
  /* app: the dashboard's status column (the pill that changes) must stay clear of the phone */
  .svb-block--flip .svb-duo { --svb-out: 64px; }
  .svb-duo > .svb-win { grid-area: 1 / 1; margin-right: var(--svb-out); }
  .svb-duo > .pf {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    justify-self: end;
    right: auto;
    bottom: auto;
    width: var(--svb-pf-w);
    min-width: 0;
    margin-top: max(var(--svb-drop), calc((100cqw - var(--svb-out) - 2px) * .625 + 76.2px * var(--bf-ui) + 2px + 24px - var(--svb-pf-w) * 2.085));
  }

  .svb-sob__dados { grid-template-columns: minmax(0, 1.34fr) minmax(0, 1fr); }   /* keeps both cells on one line */
}
/* tablet: a notebook as wide as the container would be ~470px tall; the compositions stay at 620px, centred */
@media (min-width: 760px) and (max-width: 1023.98px) {
  .svb-media--nb, .svb-sob__media { width: 100%; max-width: 620px; justify-self: center; }
}

@media (min-width: 1024px) {
  /* same grid as the blocks of part A (#catalogo, #landing-page) */
  .svb-block {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". media" "text media" "cta media" ". media";
    column-gap: clamp(48px, 6.4vw, 96px);
  }
  .svb-block--flip {
    grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
    grid-template-areas: "media ." "media text" "media cta" "media .";
  }
  .svb-media { margin-top: 0; align-self: center; }
  .svb-cta { margin-top: 30px; }

  /* narrow two-column window: a 220px phone would cover half of it */
  .svb-duo { --svb-pf-w: max(36cqw, 160px); --svb-drop: clamp(16px, 1.7vw, 24px); }
}
@media (min-width: 1280px) {
  .svb-duo { --svb-pf-w: 220px; }   /* plan §7.1: never under 220px on desktop (the .nb-duo phone is the declared exception, COMPONENTS §11) */
}

/* ---------- sob demanda: two tabs, each with its own text and mockup ---------- */
.svb-sob {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "abas" "paineis" "dados" "media" "cta";
}
.svb-sob__text { grid-area: text; min-width: 0; }
.svb-sob__text > * + * { margin-top: 14px; }
.svb-sob__text > .eyebrow + .h3 { margin-top: 12px; }

/* tabs: a light capsule like the services sub-index (active = gradient tint at 16%) */
.svb-abas {
  grid-area: abas;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  height: 46px;
  margin-top: 20px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .55);
}
html:not(.js) .svb-abas { display: none; }   /* without JS both texts show, each with its name */
.svb-aba {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.svb-aba::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.svb-aba[aria-selected="true"] { color: var(--ink-2); }
@media (hover: hover) { .svb-aba:hover { color: var(--ink-2); } }
/* 36px tabs from 760 up (tablets are touch too): an invisible ::after takes the hit area to 44px, like the pause button */
@media (min-width: 760px) { .svb-aba::after { content: ""; position: absolute; inset: -4px 0; } }
.svb-aba[aria-selected="true"]::before { opacity: .16; }

/* panels: stacked in one cell, so the block keeps the height of the longer text and nothing jumps on switch.
   The inactive one gets .is-inativo + aria-hidden (not [hidden]: base.css forces display:none on it) */
.svb-sob__paineis { grid-area: paineis; min-width: 0; margin-top: 16px; }
.svb-painel__nome { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--ink); }
.svb-painel__nome + .body { margin-top: 4px; }
html:not(.js) .svb-painel + .svb-painel { margin-top: 14px; }
.js .svb-sob__paineis { display: grid; }
.js .svb-painel { grid-area: 1 / 1; min-width: 0; transition: opacity var(--dur-fast) linear; }
.js .svb-painel__nome { display: none; }   /* the tab names the panel */
.js .svb-painel.is-inativo { visibility: hidden; opacity: 0; }
.svb-painel:focus-visible { outline-offset: 6px; }

.svb-sob__dados { grid-area: dados; margin-top: 20px; }

/* mockups: stacked in one cell (height of the taller one), crossfade by opacity; the inactive one is aria-hidden */
.svb-sob__media { grid-area: media; display: grid; align-items: center; min-width: 0; margin-top: 32px; }
.svb-tela { grid-area: 1 / 1; min-width: 0; margin: 0; transition: opacity var(--dur-base) var(--ease-out); }
.svb-tela--auto { --bf-ui: .92; }   /* full chrome (tab + favicon) like the other windows (integration) */
/* the chat figure ships asleep (data-dorme): display none, so its images never download for a visitor who never opens
   the tab. js/sections/40-servicos-b.js wakes it when the tab is about to open (hover, touch, focus or selection). The
   automation window is taller at every width, so the stacked cell keeps its height either way */
.svb-tela[data-dorme] { display: none; }
.svb-sob__media:not([data-tela="chat"]) .svb-tela--chat,
.svb-sob__media[data-tela="chat"] .svb-tela--auto { opacity: 0; pointer-events: none; }
.svb-sob .svb-cta { grid-area: cta; }

@media (prefers-reduced-motion: reduce) { .svb-tela, .svb-painel, .svb-aba::before { transition: none; } }

@media (min-width: 1024px) {
  .svb-sob {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "text media" "abas media" "paineis media" "dados media" "cta media";
    column-gap: clamp(48px, 6.4vw, 96px);
  }
  .svb-sob__media { grid-row: 1 / -1; align-self: center; margin-top: 0; }
  .svb-sob .svb-cta { margin-top: 30px; }

  /* the last block sits in a paper panel: breaks the zigzag of five blocks on the same cream ground (fix pass) */
  .svb-sob {
    padding: 32px 48px 36px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--paper);
    margin-inline: -48px;
  }
  .svb-sob .svb-abas { background: var(--cream); }
}
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .svb-sob { margin-inline: 0; padding: 36px 40px; }
}

/* ---------- phone (< 760): text → dados → mockup → button ---------- */
@media (max-width: 759.98px) {
  /* same phone rhythm as part A (two-column dados, 24px to the mockup, 20px to the button); bullets fold into
     the "inclui" cell as plan §3 asks for phones, which keeps these blocks inside the mobile height budget */
  .svb-text > .eyebrow + .h3, .svb-sob__text > .eyebrow + .h3 { margin-top: 10px; }
  .svb-text > .h3 + .body, .svb-painel > .body { line-height: 1.55; }
  .svb-text > .h3 + .body { margin-top: 12px; }
  .svb-text > .dados, .svb-sob__dados { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svb-text > .dados > div, .svb-sob__dados > div { padding-block: 11px; }
  .svb-text > .dados > div::before, .svb-sob__dados > div::before { top: 11px; bottom: 11px; }
  .svb-text > .dados dd, .svb-sob__dados dd { font-size: 15px; }
  .svb-text > .svb-bullets { display: none; }
  .svb-media, .svb-sob__media { margin-top: 24px; }

  .svb .pf__view > .svb-pic-desk { display: none; }
  .svb .pf__view > .svb-pic-mob { display: block; }

  /* #site: the notebook shows a still poster (the live window would drift and the pause has no room) */
  .svb-nb .nb__view > .svb-nb__full { display: none; }
  .svb-nb .nb__view > .svb-nb__poster { display: block; }
  .svb-nb-pausa { display: none; }

  /* #app: a sand panel the phone rises out of, cropped (plan: up to 300px) */
  .svb-duo {
    position: relative;
    height: 240px;   /* = part A (catalog panel, landing page slides) */
    padding: 0;
    overflow: hidden;
    border-radius: var(--r-lg);
    background: var(--sand);
  }
  .svb-win { display: none; }
  .svb-duo > .pf {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: auto;
    top: 18px;
    width: 206px;   /* = part A phones */
    min-width: 0;
    margin-left: -103px;
  }

  /* sob demanda: tabs split the width in two halves of 44px; the window keeps a lighter chrome */
  .svb-abas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-self: stretch; height: 52px; margin-top: 16px; padding: 0 3px; }
  .svb-aba { height: 44px; padding: 0 10px; }
  .svb-sob__paineis { margin-top: 14px; }
  .svb-tela--auto { --bf-ui: .58; }   /* chrome 44px, tab text ~7px: the same size as the notebook bar's domain next door (7,1px at 390) */

  .svb-cta, .svb-sob .svb-cta { margin-top: 20px; }
  .svb-cta .btn { display: flex; width: 100%; }
}

/* ===== 45-projetos.css ===== */
/* =====================================================================
   #projetos · portfólio (sai com [hidden]) · cards + visor
   phone: cards numa fileira que rola de lado (sem JS ou sem nenhum slot pronto: empilhados) · ≥760: 3 colunas
   Card: .bf--mini com a captura; hover (ou foco no botão) rola a captura devagar; o botão cobre o card inteiro.
   Visor: dialog com showModal. ≥760 barra do estúdio + janela grande (.bf) com captura rolável e, no modo
   celular, a .pf escalada pra caber inteira. <760 tela cheia com a barra do navegador no topo.
   Corte dos dois layouts (o mesmo texto em mqCel no 45-projetos.js): (max-width: 759.98px), (max-height: 500px) and (pointer: coarse)
   → celular deitado e tela de toque baixa também ficam com a tela cheia (senão sobravam ~210px pra captura).
   Movimento: só transform/opacity (visibility só liga/desliga, sem animar). Com movimento reduzido: fade curto.
   ===================================================================== */

/* ---------- 1. grade ---------- */
#projetos .projetos__grade {
  display: flex;
  gap: 14px;
  margin-inline: calc(-1 * var(--gutter));
  padding: 2px var(--gutter) 6px;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
#projetos .projetos__grade::-webkit-scrollbar { display: none; }
/* vitrine parada (sem JS, ou nenhum slot pronto: .is-vitrine vem do JS): nada focável na fileira, então os cards empilham
   em vez de rolar de lado (no Safari a fileira sem parada de Tab não se alcança pelo teclado) */
@media (max-width: 759.98px) {
  html:not(.js) #projetos .projetos__grade,
  #projetos .projetos__grade.is-vitrine { flex-direction: column; gap: 28px; overflow: visible; scroll-snap-type: none; }
  html:not(.js) #projetos .projeto-card,
  #projetos .projetos__grade.is-vitrine .projeto-card { flex: none; }
}

/* ---------- 2. card ---------- */
#projetos .projeto-card {
  position: relative;               /* o ::after do botão cobre o card inteiro */
  flex: 0 0 min(300px, 80vw);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
#projetos .projeto-card__capa {
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-out);
}
/* a vista é container de tamanho (a altura sai do --bf-ratio): a captura desce até o fim no hover.
   Sem :has() de propósito: num navegador sem ele a capa continua mostrando o topo da página */
#projetos .projeto-card__vista {
  container-type: size;
  background: linear-gradient(140deg, var(--sand), var(--paper));
}
#projetos .projeto-card__marca { position: absolute; inset: 0; margin: auto; opacity: .35; }
#projetos .projeto-card__captura {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  transform: translateY(0);
  transition: transform 600ms var(--ease-inout);
}
/* projeto só de celular (catálogo): a página do celular numa coluna no meio da vista */
#projetos .projeto-card__vista--celular {
  padding-top: 14px;   /* 100cqh é a caixa de conteúdo: a captura termina rente ao pé da vista */
  background: linear-gradient(140deg, var(--sand), var(--paper));
}
#projetos .projeto-card__vista--celular .projeto-card__captura {
  width: 40%;
  margin-inline: auto;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 1px 2px rgba(26, 23, 20, .08), 0 12px 30px -14px rgba(26, 23, 20, .40);
}

/* o domínio nunca corta seco: reticências se faltar lugar (entre 760 e 1023 o lugar vem da regra do fim da parte 2) */
#projetos .projeto-card .bf__domain { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* corpo em coluna: o "abrir projeto" desce pro pé e fica na mesma altura nos três cards, mesmo com nome em duas linhas */
#projetos .projeto-card__corpo { flex: 1; display: flex; flex-direction: column; padding: 16px 2px 0; }
#projetos .projeto-card__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
#projetos .projeto-card__meta { margin-top: 4px; font-size: 15px; line-height: 1.4; color: var(--muted); }
#projetos .projeto-card__prazo { margin: 2px 0 4px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink-2); }
#projetos .projeto-card__abrir { align-self: flex-start; margin-top: auto; padding: 0; }
#projetos .projeto-card__abrir::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r-frame); }

/* hover e foco: a janela sobe 4px e a captura desce até o fim a ~140px/s (--capa-dur vem do JS; volta ao topo em 600ms) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #projetos .projeto-card.is-pronto:hover .projeto-card__capa { transform: translateY(-4px); }
  #projetos .projeto-card.is-pronto:hover .projeto-card__captura {
    transform: translateY(min(0px, calc(100cqh - 100%)));
    transition: transform var(--capa-dur, 8s) cubic-bezier(.3, 0, .7, 1) 150ms;
  }
  #projetos .projeto-card.is-pronto:hover .projeto-card__abrir { color: var(--ink); }
  #projetos .projeto-card.is-pronto:hover .projeto-card__abrir .arw { transform: translateX(3px); }
}
@media (prefers-reduced-motion: no-preference) {
  #projetos .projeto-card.is-pronto:has(.projeto-card__abrir:focus-visible) .projeto-card__capa { transform: translateY(-4px); }
  #projetos .projeto-card.is-pronto:has(.projeto-card__abrir:focus-visible) .projeto-card__captura {
    transform: translateY(min(0px, calc(100cqh - 100%)));
    transition: transform var(--capa-dur, 8s) cubic-bezier(.3, 0, .7, 1) 150ms;
  }
}

@media (min-width: 760px) {
  #projetos .projetos__grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    margin-inline: 0;
    padding: 0;
    overflow: visible;
  }
  #projetos .projeto-card__nome { font-size: 22px; }
}
/* 760–1023: card estreito (~226px a 760). A pílula do domínio ocupa o resto da barra depois das bolinhas, como num
   navegador de verdade, em vez de ficar centrada entre as bolinhas e um espaço vazio do mesmo tamanho */
@media (min-width: 760px) and (max-width: 1023.98px) {
  #projetos .projeto-card .bf__toolbar::after { content: none; }
  #projetos .projeto-card .bf__omni { flex: 1 1 auto; min-width: 0; margin-inline: 0; }
}

/* ---------- 3. trava da página enquanto o visor está aberto (a classe vai no html) ---------- */
/* a barra de rolagem some: o body ganha a largura dela à direita (--visor-barra, medida no JS) e nada anda por baixo do fundo */
html.is-visor-aberto { overflow: hidden; }
html.is-visor-aberto body { padding-right: var(--visor-barra, 0px); }
/* o cabeçalho é fixo (não anda com o padding do body): sem isto ele pulava meia barra pro lado ao abrir e ao fechar.
   Regra fora de #projetos, igual às duas de cima: combinar na integração */
html.is-visor-aberto .site-header { right: var(--visor-barra, 0px); }

/* ---------- 4. visor ---------- */
#projetos .visor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 12px 24px 24px;
  border: 0;
  background: transparent;
  color: var(--on-dark);
  overflow: hidden;
  overscroll-behavior: contain;
}
#projetos .visor::backdrop {
  background: rgba(26, 23, 20, .88);   /* .78 ficava cinza lavado (#45423D); .88 chega perto da tinta das seções escuras */
  opacity: 0;
  transition: opacity 240ms cubic-bezier(.22, 1, .36, 1);
}
#projetos .visor.is-in::backdrop { opacity: 1; }
/* fechar no computador: o fundo espera a janela voltar pro card antes de clarear, e clareia em linha reta (com a curva de
   entrada ele sumia no meio do voo). .is-saindo vem do JS só nesse caminho: 60ms de espera + 420ms de voo */
#projetos .visor.is-saindo::backdrop { transition: opacity 240ms linear 220ms; }
@media (min-width: 760px) {
  #projetos .visor::backdrop { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
}

#projetos .visor__palco {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  row-gap: 12px;
  width: min(1320px, 100%);
  height: 100%;
  margin-inline: auto;
}

/* 4.1 barra do estúdio (fora da janela, sobre o fundo escuro) */
#projetos .visor__estudio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 24px;
  min-height: 56px;
}
#projetos .visor__id { min-width: 0; }
#projetos .visor__segmento,
#projetos .visor__nome { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#projetos .visor__segmento { font-size: 13.5px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; color: var(--on-dark-muted); }
#projetos .visor__nome {
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--on-dark);
}

/* projeto com uma tela só: o seletor some, mas guarda o lugar (o nome e as ações não mudam de posição) */
#projetos .visor__modos.is-unico { visibility: hidden; }
#projetos .visor__modos {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-dark);
  border-radius: var(--r-pill);
  background: var(--surface-dark);
}
#projetos .visor__modo {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  color: rgba(251, 248, 242, .8);   /* o on-dark-muted (.66) dava 4,4:1 no rótulo inativo sobre o fundo borrado */
}
#projetos .visor__modo svg { flex: none; }
#projetos .visor__modo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(251, 248, 242, .15);
  box-shadow: inset 0 0 0 1px rgba(251, 248, 242, .12);
  opacity: 0;
  transition: opacity var(--dur-fast) linear;
}
#projetos .visor__modo::after { content: ""; position: absolute; inset: -4px -1px; }   /* 44px de toque (40 + 3 de respiro + 1 de borda) */
#projetos .visor__modo[aria-pressed="true"] { color: var(--on-dark); }
#projetos .visor__modo[aria-pressed="true"]::before { opacity: 1; }
#projetos .visor__modo:disabled { opacity: .4; cursor: default; }
@media (hover: hover) { #projetos .visor__modo:not(:disabled):hover { color: var(--on-dark); } }
/* cores forçadas anulam o fundo e a sombra do ::before: o modo ligado ganha uma borda nele (o outline fica livre pro foco) */
@media (forced-colors: active) {
  #projetos .visor__modo[aria-pressed="true"]::before { border: 2px solid ButtonText; }
}

#projetos .visor__acoes { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* painel aberto: o botão fica marcado, no mesmo tratamento do modo ligado */
#projetos .visor__sobre-btn[aria-expanded="true"] { background: rgba(251, 248, 242, .15); border-color: var(--on-dark); }
#projetos .visor__fechar {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  border: 1px solid rgba(251, 248, 242, .28);
  border-radius: 50%;
  color: var(--on-dark);
}
@media (hover: hover) { #projetos .visor__fechar:hover { border-color: var(--on-dark); } }

/* 4.2 janela grande de navegador (a .bf do site, com a tela esticada até o pé) */
#projetos .visor__janela {
  --bf-ui: 1.1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  border-color: rgba(251, 248, 242, .12);
  border-radius: 14px;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .55);
  color: var(--ink);
  transform-origin: 0 0;   /* a abertura voa do card até aqui com translate + scale uniforme */
}
#projetos .visor__janela .bf__tabs,
#projetos .visor__janela .bf__toolbar { flex: none; }
#projetos .visor__janela .bf__tab { max-width: 21em; }
/* o x da aba e a bolinha vermelha fecham o visor (JS, só ponteiro; continuam aria-hidden), com área de clique maior que o desenho */
#projetos .visor__janela .bf__tab-x {
  box-sizing: content-box;
  padding: .5em;
  margin: -.5em -.5em -.5em .17em;
  border-radius: 50%;
  cursor: pointer;
}
@media (hover: hover) { #projetos .visor__janela .bf__tab-x:hover { background: rgba(26, 23, 20, .08); color: #3A332B; } }
#projetos .visor__janela .bf__lights i:first-child { position: relative; cursor: pointer; }
#projetos .visor__janela .bf__lights i:first-child::after { content: ""; position: absolute; inset: -.25em; border-radius: 50%; }
/* as bolinhas da barra só aparecem quando a faixa de abas sai (tela baixa, parte 4.6) */
#projetos .visor__barra > .bf__lights { display: none; margin-right: 0; }
#projetos .visor__favicon {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--visor-fav, #E9E4DC);
  color: var(--visor-fav-ink, #1A1714);
  font-size: .78em;
  font-weight: 600;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(26, 23, 20, .12);
}
#projetos .visor__favicon img { width: 100%; height: 100%; object-fit: cover; }
#projetos .visor__omni { font-size: 1.1em; }
#projetos .visor__m-btn { display: none; }

#projetos .visor__tela {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #FFFFFF;
}
/* no modo celular a tela é bege por baixo das camadas: a troca não passa por um lampejo branco */
#projetos .visor__tela[data-modo="celular"] { background: #EDE7DE; }
/* véu sobre a tela quando o painel "sobre" está aberto (um toque nele fecha o painel) */
#projetos .visor__tela::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: rgba(26, 23, 20, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out);
}
#projetos .visor.is-sobre .visor__tela::after { opacity: 1; pointer-events: auto; }

/* 4.3 as duas camadas (computador | celular): troca em crossfade, a de saída some em 120ms e a de entrada cresce de .98 */
#projetos .visor__camada {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(.98);
  transition: opacity 120ms linear, transform 0s linear 120ms, visibility 0s linear 120ms;
}
#projetos .visor__tela[data-modo="computador"] .visor__camada--computador,
#projetos .visor__tela[data-modo="celular"] .visor__camada--celular {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 260ms var(--ease-out) 120ms, transform 260ms var(--ease-out) 120ms, visibility 0s linear 0s;
}

#projetos .visor__rolagem {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#projetos .visor__rolagem:focus-visible { outline-offset: -3px; }
/* anel de foco da captura: o outline da área rolável fica por baixo da imagem, então ele é desenhado numa camada por cima.
   O anel em si é outline (continua aparecendo em cores forçadas, que anulam box-shadow); a faixa branca de dentro é sombra */
#projetos .visor__camada--computador::after,
#projetos .visor__pf .pf__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  outline: 2px solid var(--rust);
  outline-offset: -2px;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .9);
  opacity: 0;
  pointer-events: none;
}
#projetos .visor__camada--computador:has(> .visor__rolagem:focus-visible)::after,
#projetos .visor__pf .pf__screen:has(> .visor__rolagem:focus-visible)::after { opacity: 1; }
@supports selector(:has(*)) { #projetos .visor__rolagem:focus-visible { outline: none; } }
/* cores forçadas: o outline viraria a cor do texto (branco no tema escuro) e sumiria sobre uma captura clara. Anel em
   Highlight com uma borda em Canvas por dentro: as duas cores do tema, que sempre contrastam entre si */
@media (forced-colors: active) {
  #projetos .visor__camada--computador::after,
  #projetos .visor__pf .pf__screen::after { border: 2px solid Canvas; outline: 3px solid Highlight; outline-offset: -5px; }
}
@media (hover: hover) and (pointer: fine) { #projetos .visor__rolagem { cursor: grab; } }
#projetos .visor__rolagem.is-arrastando { cursor: grabbing; user-select: none; }
#projetos .visor__camada--computador .visor__rolagem {
  position: absolute;
  inset: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 23, 20, .30) transparent;
}
#projetos .visor__pilha { position: relative; }
#projetos .visor__pilha > img { display: block; width: 100%; height: auto; max-width: none; }
/* pôster: a capa do card (já baixada) fica por cima até a captura grande decodificar, então a tela nunca abre branca */
#projetos .visor__pilha > .visor__poster {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 200ms linear;
}
#projetos .visor__pilha > .visor__poster.is-saindo { opacity: 0; }

/* modo celular: a .pf escalada pra caber inteira na altura da tela (altura total da .pf = 2,085 × largura) */
#projetos .visor__camada--celular {
  display: grid;
  place-items: center;
  padding: 24px;
  container-type: size;
  background: #EDE7DE;
}
#projetos .visor__pf { --pf-w: min(420px, 100cqh / 2.085, 100cqi); }
#projetos .visor__pf .pf__view { scrollbar-width: none; }
#projetos .visor__pf .pf__view::-webkit-scrollbar { display: none; }

/* 4.4 painel "sobre o projeto": entra pela direita, por cima da tela, sem espremer a captura */
#projetos .visor__sobre {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  width: min(380px, 100%);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 24px 24px;
  border-left: 1px solid var(--line);
  background: var(--paper);
  box-shadow: -30px 0 60px -30px rgba(26, 23, 20, .35);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  visibility: hidden;
  transform: translateX(calc(100% + 64px));
  transition: transform 260ms var(--ease-in), visibility 0s linear 260ms;
}
#projetos .visor.is-sobre .visor__sobre {
  visibility: visible;
  transform: none;
  transition: transform 420ms var(--ease-expo), visibility 0s linear 0s;
}
/* o fechar vem depois do título no DOM (ordem do Tab) e fica no canto de cima, na altura do rótulo */
#projetos .visor__sobre-topo { display: flex; min-height: 44px; margin-bottom: 8px; padding-right: 44px; }
#projetos .visor__sobre-fechar {
  position: absolute;
  top: 16px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--muted);
}
@media (hover: hover) { #projetos .visor__sobre-fechar:hover { color: var(--ink); } }
#projetos .visor__sobre-nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
#projetos .visor__sobre-seg { margin-top: 6px; font-size: 15.5px; line-height: 1.45; color: var(--muted); }
#projetos .visor__selo { margin-top: 14px; gap: 8px; color: var(--ink-2); }
#projetos .visor__selo-ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); }
#projetos .visor__selo[data-status="cliente real"] .visor__selo-ponto { background: var(--coral); }
#projetos .visor__dados { margin-top: 20px; }
#projetos .visor__dados dd { overflow-wrap: anywhere; }
#projetos .visor__sobre-rotulo { margin-top: 20px; font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--muted); }
#projetos .visor__entregas { margin-top: 12px; }
/* o "quero um assim" do painel nunca fica cortado: quando a lista passa da altura ele gruda no pé, sobre uma faixa de papel */
#projetos .visor__sobre-quero {
  position: sticky;
  bottom: 0;
  margin-top: 28px;
  /* faixa de papel: 14px em volta, desce até a borda do painel (o sticky para no padding de 24px) e esfuma pra cima */
  box-shadow: var(--shadow-btn), 0 0 0 14px var(--paper), 0 14px 0 14px var(--paper), 0 -12px 14px 14px var(--paper);
}

/* 4.5 botão fixo do celular (só <760) */
#projetos .visor__fixo { display: none; }

/* 4.6 tablet: rótulos curtos pra caber tudo numa linha */
@media (min-width: 760px) and (max-width: 1023.98px) {
  #projetos .visor { padding: 10px 16px 16px; }
  #projetos .visor__estudio { column-gap: 14px; }
  #projetos .visor__nome { font-size: 18px; }
  #projetos .visor__modo { padding: 0 12px; }
  #projetos .visor__modo-rotulo,
  #projetos .visor__sobre-mais {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  #projetos .visor__sobre-btn,
  #projetos .visor__quero { padding: 0 18px; }
}
/* tela baixa no computador (notebook 1366×650, 1280×720): sem a faixa de abas e com menos respiro, o celular ganha altura.
   As bolinhas passam pra barra de ferramentas (a janela não perde a cara de navegador) */
@media (min-width: 760px) and (max-height: 759.98px) {
  #projetos .visor { padding-top: 8px; padding-bottom: 12px; }
  #projetos .visor__palco { row-gap: 8px; }
  #projetos .visor__janela .bf__tabs { display: none; }
  #projetos .visor__barra > .bf__lights { display: flex; }
  #projetos .visor__camada--celular { padding: 10px; }
}
/* painel "sobre" em tela baixa (a 1024×768 a lista já passava da altura): respiros menores */
@media (min-width: 760px) and (max-height: 859.98px) {
  #projetos .visor__sobre-topo { min-height: 36px; margin-bottom: 4px; }
  #projetos .visor__sobre-fechar { top: 12px; }
  #projetos .visor__sobre-nome { font-size: 24px; }
  #projetos .visor__selo { margin-top: 10px; }
  #projetos .visor__dados,
  #projetos .visor__sobre-rotulo { margin-top: 14px; }
  #projetos .visor__entregas { margin-top: 8px; }
  #projetos .visor__sobre-quero { margin-top: 20px; }
}
/* telas largas: o seletor no centro, entre o nome e as ações */
@media (min-width: 1280px) {
  #projetos .visor__estudio { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
}

/* 4.7 celular (e celular deitado): tela cheia, barra do navegador no topo (fechar · domínio · sobre), captura do celular sem moldura */
@media (max-width: 759.98px), (max-height: 500px) and (pointer: coarse) {
  #projetos .visor { padding: 0; }
  #projetos .visor::backdrop { background: rgba(26, 23, 20, .6); -webkit-backdrop-filter: none; backdrop-filter: none; }
  /* fechar: o fundo apaga com a mesma duração e a mesma curva da tela descendo (300ms, ease-in), sem sumir antes dela */
  #projetos .visor.is-saindo::backdrop { transition: opacity 300ms cubic-bezier(.4, 0, 1, 1); }
  #projetos .visor__palco { grid-template-rows: minmax(0, 1fr); row-gap: 0; width: 100%; }
  /* a barra do estúdio sai da tela, mas o nome continua sendo o título do diálogo (e recebe o foco ao abrir) */
  #projetos .visor__estudio {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0; min-height: 0;
  }
  #projetos .visor__modos,
  #projetos .visor__acoes { display: none; }

  #projetos .visor__janela { --bf-ui: 1; border: 0; border-radius: 0; box-shadow: none; }
  #projetos .visor__janela .bf__tabs,
  #projetos .visor__janela .bf__navbtns,
  #projetos .visor__barra > .bf__lights,
  #projetos .visor__omni .bf__path { display: none; }
  #projetos .visor__barra {
    box-sizing: content-box;
    height: 52px;
    gap: 4px;
    padding: env(safe-area-inset-top, 0px) max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
  }
  #projetos .visor__m-btn {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--ink-2);
  }
  #projetos .visor__omni {
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    font-size: 14px;
  }
  #projetos .visor__omni .bf__domain { overflow: hidden; text-overflow: ellipsis; }

  #projetos .visor__tela[data-modo="celular"] { background: #FFFFFF; }
  #projetos .visor__camada--celular { display: block; padding: 0; background: #FFFFFF; }
  #projetos .visor__pf { --pf-w: 100%; height: 100%; }
  #projetos .visor__pf .pf__body { height: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  #projetos .visor__pf .pf__screen { height: 100%; aspect-ratio: auto; border-radius: 0; background: #FFFFFF; }
  #projetos .visor__pf .pf__status,
  #projetos .visor__pf .pf__home { display: none; }
  /* celular deitado (ou tela larga de toque): a página do celular numa coluna de até 480px, com bege dos lados */
  #projetos .visor__pf .visor__pilha { max-width: 480px; margin-inline: auto; }
  @media (min-width: 481px) { #projetos .visor__pf .pf__view { background: #EDE7DE; } }

  /* painel "sobre": folha que sobe de baixo */
  #projetos .visor__sobre {
    top: auto;
    left: 0;
    width: auto;
    max-height: calc(100% - 32px);
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -24px 60px -24px rgba(26, 23, 20, .40);
    transform: translateY(calc(100% + 64px));
  }
  @media (min-width: 600px) { #projetos .visor__sobre { max-width: 560px; margin-inline: auto; } }
  #projetos .visor__sobre-fechar { top: 12px; right: 0; }
  #projetos .visor__sobre-nome { font-size: 24px; }

  /* "quero um assim" fixo embaixo, depois de rolar uma tela, de um toque na captura ou de 8s (.is-cta vem do JS).
     Sem faixa clara atrás (ela lavava rodapés escuros): só a sombra do botão separa ele da página */
  #projetos .visor__fixo {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 20px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform 260ms var(--ease-in), opacity 200ms linear;
  }
  #projetos .visor__fixo .btn { max-width: 480px; margin-inline: auto; box-shadow: 0 14px 34px -8px rgba(26, 23, 20, .55), 0 2px 6px rgba(26, 23, 20, .18); }
  #projetos .visor.is-cta:not(.is-sobre) .visor__fixo {
    opacity: 1;
    transform: none;
    transition: transform 420ms var(--ease-expo), opacity 200ms linear;
  }
  /* só o botão recebe o toque: a margem em volta dele (e os lados, com o celular deitado) continua rolando a captura */
  #projetos .visor.is-cta:not(.is-sobre) .visor__fixo .btn { pointer-events: auto; }
  /* com o botão fixo na tela, o fim da página ainda sobe acima dele. O espaço é pintado com a cor do pé da captura
     (--visor-pe, lida pelo JS na última linha da imagem): o rodapé da página continua até a borda, sem faixa clara */
  #projetos .visor.is-cta .visor__rolagem > .visor__pilha {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    background: var(--visor-pe, #FFFFFF);
  }
}

/* 4.8 movimento reduzido: sem deslizar nem crescer, só fade curto */
@media (prefers-reduced-motion: reduce) {
  #projetos .visor::backdrop,
  #projetos .visor.is-saindo::backdrop { transition-duration: 150ms; transition-delay: 0s; }
  #projetos .visor__camada,
  #projetos .visor__tela[data-modo] .visor__camada { transform: none; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  #projetos .visor__tela[data-modo="computador"] .visor__camada--computador,
  #projetos .visor__tela[data-modo="celular"] .visor__camada--celular { transition: opacity 150ms linear, visibility 0s linear 0s; }
  #projetos .visor__sobre,
  #projetos .visor.is-sobre .visor__sobre { transform: none; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  #projetos .visor__sobre { opacity: 0; }
  #projetos .visor.is-sobre .visor__sobre { opacity: 1; transition: opacity 150ms linear, visibility 0s linear 0s; }
  #projetos .visor__fixo,
  #projetos .visor.is-cta:not(.is-sobre) .visor__fixo { transform: none; transition: opacity 150ms linear; }
  #projetos .visor__tela::after { transition-duration: 150ms; }
}

/* ===== 50-preco.css ===== */
/* =====================================================================
   #preco · preço (plano §6.8)
   phone (<760): compact card rows, sob demanda as two small cards (automação | chat da equipe) + one note,
                 garantias in a scroll row, final button
   tablet and small laptop (760–1199): 2×2 cards, the two sob demanda items as one-line strips, garantias 2×2 below
   desktop (≥1200): heading + garantias side by side, 4 cards in a row
   ===================================================================== */

#preco.section { padding-block: 44px 44px; }
#preco .preco__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
#preco .preco__head { margin-bottom: 18px; }

/* ---------- service cards (whole card is the WhatsApp link) ---------- */
#preco .preco__cards { display: grid; gap: 10px; padding-top: 13px; }
#preco .preco-card--destaque { padding-top: 20px; }

#preco .preco-card {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas: "nome prazo link" "inclui inclui inclui";
  align-items: center;
  column-gap: 8px;
  padding: 12px 12px 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  transition: transform var(--dur-base) var(--ease-out);
}
/* hover shadow on its own layer so only opacity animates */
#preco .preco-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 2px 4px rgba(26, 23, 20, .04), 0 22px 44px -24px rgba(26, 23, 20, .30);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
#preco .preco-card--destaque {
  border-color: transparent;
  background: linear-gradient(var(--paper), var(--paper)) padding-box, var(--grad) border-box;
}

/* sits on the top border (cards list leaves room for it) */
#preco .preco-card__selo {
  position: absolute;
  top: 0;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  margin: 0;
  padding: 0 10px 0 8px;
  transform: translateY(-50%);
  border: 1px solid rgba(224, 135, 99, .34);
  border-radius: var(--r-pill);
  background: linear-gradient(100deg, rgba(224, 135, 99, .16), rgba(154, 143, 209, .16)), var(--paper);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--ink-2);
  white-space: nowrap;
}
#preco .preco-card__selo svg { flex: none; }

#preco .preco-card__nome {
  grid-area: nome;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}
#preco .preco-card__prazo { grid-area: prazo; justify-self: end; }
#preco .preco-card__rotulo {                       /* sr-only on phones, visible from 760px */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#preco .preco-card__dias {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--sand);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums lining-nums;
}
#preco .preco-card__inclui {
  grid-area: inclui;
  margin-top: 3px;
  padding-right: 4px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}
#preco .preco-card__inclui b { font-weight: 600; color: var(--ink-2); }

/* WhatsApp button (fix pass): a round WhatsApp glyph on phones, an outlined "quero este →" pill from 760px.
   position static + no isolation, so the stretched ::after still makes the whole card the link */
#preco .preco-card__link {
  grid-area: link;
  position: static;
  isolation: auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  margin-left: 2px;
  padding: 0;
  gap: 0;
  border: 1px solid var(--soft-muted);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
#preco .preco-card__link .arw { display: none; }
#preco .preco-card__wa, #preco .preco-sob__wa { width: 17px; height: 17px; }
#preco .preco-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }   /* stretched: whole card */
#preco .preco-card__cta {                          /* sr-only on phones (aria-label carries the name) */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#preco .preco-card__link .arw { transition: transform var(--dur-base) var(--ease-out); }
#preco .preco-card__link:focus-visible { outline: none; }
#preco .preco-card:has(.preco-card__link:focus-visible) { outline: 2px solid var(--rust); outline-offset: 3px; }

@media (hover: hover) {
  #preco .preco-card:hover { transform: translateY(-3px); }
  #preco .preco-card:hover::before { opacity: 1; }
  #preco .preco-card:hover .preco-card__link .arw { transform: translateX(3px); }
  #preco .preco-card:hover .preco-card__link, #preco .preco-sob__item:hover .preco-sob__link { border-color: var(--ink); }
}
#preco .preco-card:active { transform: translateY(0) scale(.995); transition-duration: 100ms; }

/* ---------- sob demanda: two items (automação · chat da equipe) + one note for both ----------
   phone: two small cards side by side (name + "conversar" pill; the whole card is the link), the short text stays
   for screen readers only, the note spans both */
#preco .preco-sob {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
#preco .preco-sob__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--line);   /* solid (the dashed outline read as an empty wireframe slot, fix pass) */
  border-radius: var(--r-md);
  background: rgba(251, 248, 242, .6);
}
#preco .preco-sob__aneis { display: none; }
#preco .preco-sob__nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink);
}
#preco .preco-sob__texto {                         /* sr-only on phones, visible from 760px */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
#preco .preco-sob__link {
  position: static;
  isolation: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 13px 0 10px;
  border: 1px solid var(--soft-muted);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#preco .preco-sob__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }   /* stretched: whole card (≥44px) */
#preco .preco-sob__cta-mais { display: none; }   /* phones read "conversar"; the aria-label starts with the visible text either way */
#preco .preco-sob__link .arw { display: none; transition: transform var(--dur-base) var(--ease-out); }
#preco .preco-sob__link:focus-visible { outline: none; }
#preco .preco-sob__item:has(.preco-sob__link:focus-visible) { outline: 2px solid var(--rust); outline-offset: 3px; }
#preco .preco-sob__nota { grid-column: 1 / -1; padding-left: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); }
@media (hover: hover) {
  #preco .preco-sob__item:hover { border-color: var(--soft-muted); }
  #preco .preco-sob__item:hover .preco-sob__link .arw { transform: translateX(3px); }
}

#preco .preco__nota { margin-top: 10px; padding-left: 2px; }

/* ---------- garantias (phone: scroll row) ---------- */
#preco .preco__garantias {
  display: flex;
  gap: 10px;
  margin: 20px calc(-1 * var(--gutter)) 0;
  padding: 2px var(--gutter) 4px;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
#preco .preco__garantias::-webkit-scrollbar { display: none; }
#preco .preco__garantias:focus-visible { outline-offset: -2px; border-radius: var(--r-md); }
#preco .preco-garantia {
  flex: 0 0 min(300px, 80vw);
  scroll-snap-align: start;
  padding: 13px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(251, 248, 242, .66);
}
#preco .preco-garantia__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -.005em;
  color: var(--ink);
}
#preco .preco-garantia__titulo svg { display: none; flex: none; }
#preco .preco-garantia p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }

/* ---------- plano mensal (lavender-tinted surface) ---------- */
#preco .preco-plano {
  margin-top: 20px;
  padding: 18px 18px 14px;
  border: 1px solid rgba(154, 143, 209, .30);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(194, 185, 229, .40), rgba(194, 185, 229, .22) 70%), var(--paper);
}
#preco .preco-plano__tag { min-height: 28px; border-color: rgba(154, 143, 209, .42); background: rgba(251, 248, 242, .8); color: var(--ink-2); font-weight: 600; }
#preco .preco-plano__titulo { margin-top: 10px; font-size: 22px; }
#preco .preco-plano__desc { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#preco .preco-plano__abrir {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
#preco .preco-plano__chev {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--rust);
  border-bottom: 1.6px solid var(--rust);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}
#preco .preco-plano__abrir[aria-expanded="true"] .preco-plano__chev { transform: translateY(2px) rotate(225deg); }
#preco .preco-plano__desc > p + p { margin-top: 4px; }
#preco .preco-plano__lista { margin-top: 10px; margin-bottom: 4px; gap: 7px; }
#preco .preco-plano__lista > li { font-size: 15px; line-height: 1.45; }
#preco .preco-plano__acao { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; margin-top: 0; }
#preco .preco-plano__valor { margin-top: -4px; font-size: 14px; line-height: 1.4; color: var(--muted); }

#preco .preco__final { margin-top: 20px; }

/* ---------- tablet and up ---------- */
@media (min-width: 760px) {
  #preco.section { padding-block: var(--section-y); }
  #preco .preco__head { margin-bottom: 36px; }

  #preco .preco__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 14px; }
  #preco .preco-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 22px 22px 16px;
  }
  #preco .preco-card--destaque { padding-top: 22px; }
  #preco .preco-card__selo { left: 18px; height: 28px; }
  #preco .preco-card__nome { font-size: 22px; }
  #preco .preco-card__prazo { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; justify-self: auto; }
  #preco .preco-card__rotulo {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    font-size: 14px; line-height: 1.3; color: var(--muted);
  }
  #preco .preco-card__dias {
    min-height: 0;
    padding: 0;
    background: none;
    font-family: var(--font-display);
    font-size: clamp(28px, 2.35vw, 33px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
  }
  #preco .preco-card__inclui {
    margin: 14px 0 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-2);
  }
  #preco .preco-card__inclui b { color: var(--muted); }
  #preco .preco-card__link {
    align-self: flex-start;
    display: inline-flex;
    gap: 8px;
    width: auto;
    height: auto;
    min-height: 40px;
    margin-top: auto;
    margin-left: 0;
    padding: 0 16px 0 13px;
    border-radius: var(--r-pill);
    font-size: 15px;
  }
  #preco .preco-card__link .arw, #preco .preco-sob__link .arw { display: inline-block; }
  #preco .preco-card__cta {
    position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: nowrap;
  }

  /* sob demanda: each item one strip (rings · name | text · button), stacked, like the single strip before */
  #preco .preco-sob { grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  #preco .preco-sob__item {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    min-height: 62px;
    padding: 10px 22px;
  }
  #preco .preco-sob__aneis { display: block; flex: none; }
  /* stacked strips (760-1199): the name cell is as wide as the longer name ("Chat da equipe", 144px = 7,2em in Funnel
     Display 600), so both texts start on the same line instead of 33px apart */
  #preco .preco-sob__nome { min-width: 7.25em; font-size: 20px; white-space: nowrap; }
  #preco .preco-sob__texto {
    position: relative; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    padding-left: 15px; font-size: 15px; line-height: 1.4; color: var(--muted);
  }
  #preco .preco-sob__texto::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: var(--soft-muted); }
  #preco .preco-sob__link { gap: 8px; min-height: 40px; margin-left: auto; padding: 0 16px 0 13px; font-size: 15px; }
  #preco .preco-sob__cta-mais { display: inline; }
  #preco .preco-sob__nota { margin-top: 2px; font-size: 14.5px; }

  #preco .preco__nota { margin-top: 12px; }

  #preco .preco__garantias {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 28px;
    margin: 40px 0 0;
    padding: 0;
    overflow: visible;
  }
  #preco .preco-garantia { padding: 14px 0 0; border: 0; border-top: 1px solid rgba(26, 23, 20, .12); border-radius: 0; background: none; }
  /* a strong label, not a fourth heading size (fix pass): the H3 scale stays 26px (service blocks) / 22px (cards) */
  #preco .preco-garantia__titulo { font-family: var(--font-sans); font-size: 16px; font-weight: 600; letter-spacing: 0; }
  #preco .preco-garantia__titulo svg { display: block; }
  #preco .preco-garantia p { margin-top: 6px; font-size: 15px; line-height: 1.5; }

  #preco .preco-plano {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 72px);
    margin-top: 28px;
    padding: 26px 34px 22px;
  }
  #preco .preco-plano__tag { min-height: 32px; }
  #preco .preco-plano__titulo { margin-top: 12px; font-size: 22px; }   /* an add-on never outranks the product names (22px) */
  #preco .preco-plano__desc { margin-top: 10px; font-size: 16px; line-height: 1.6; }
  #preco .preco-plano__lado { padding-top: 4px; }
  #preco .preco-plano__abrir { display: none !important; }
  #preco .preco-plano__lista[hidden] { display: grid !important; }
  #preco .preco-plano__desc > p { display: inline; }
  #preco .preco-plano__desc > p[hidden] { display: inline !important; }
  #preco .preco-plano__lista { margin: 0; gap: 9px; }
  #preco .preco-plano__lista > li { font-size: 15.5px; }
  #preco .preco-plano__acao { margin-top: 10px; }
  #preco .preco-plano__valor { margin-top: 0; }

  #preco .preco__final { display: none; }
}

/* ---------- desktop: heading + garantias side by side, 4 cards in a row (≥1200) ---------- */
@media (min-width: 1024px) {
  #preco.section { padding-block: clamp(56px, 5vw, 72px); }
}
@media (min-width: 1200px) {
  #preco .preco__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-areas:
      "head gar"
      "cards cards"
      "sob sob"
      "nota nota"
      "plano plano";
    column-gap: clamp(40px, 5vw, 80px);
    align-items: end;
  }
  #preco .preco__head { grid-area: head; margin-bottom: 0; }
  #preco .preco__garantias { grid-area: gar; margin: 0; gap: 18px 28px; }
  #preco .preco__cards { grid-area: cards; margin-top: 28px; }
  #preco .preco-sob { grid-area: sob; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  /* two items side by side: rings | name over text | button */
  #preco .preco-sob__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "aneis nome link" "aneis texto link";
    column-gap: 14px;
    row-gap: 2px;
    min-height: 66px;
    padding: 10px 14px 10px 20px;
  }
  #preco .preco-sob__aneis { grid-area: aneis; }
  #preco .preco-sob__nome { grid-area: nome; align-self: end; min-width: 0; }
  #preco .preco-sob__texto { grid-area: texto; align-self: start; padding-left: 0; font-size: 14.5px; }
  #preco .preco-sob__texto::before { display: none; }
  #preco .preco-sob__link { grid-area: link; margin-left: 0; }
  #preco .preco__nota { grid-area: nota; }
  #preco .preco-plano { grid-area: plano; align-self: start; }
  #preco .preco__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  #preco .preco-card, #preco .preco-card::before, #preco .arw { transition: none; }
  @media (hover: hover) {
    #preco .preco-sob__item:hover .preco-sob__link .arw { transform: none; }
    #preco .preco-card:hover { transform: none; }
  }
}

/* ===== 60-como-funciona.css ===== */
/* =====================================================================
   #como-funciona · dark section, 4-step rail (plano §6.9, motion 15)
   <1024: vertical rail · ≥1024: horizontal rail
   Default (no JS / reduced motion / capture) = fully filled, rings interlocked.
   JS adds .cf--vivo (motion allowed) → segments start empty and steps get .is-on as the fill passes;
   .cf--sd = CSS scroll-driven fills (JS only toggles the steps).
   --cf-c0/--cf-c1 = start/end of the fill in "cover" progress of the rail (read by JS too).
   ===================================================================== */

#como-funciona.section { padding-block: 44px 44px; }

/* ---------- heading ---------- */
#como-funciona .cf__head { margin-bottom: 24px; }
#como-funciona .cf__titulo > * + * { margin-top: 14px; }
#como-funciona .cf__lead { margin-top: 16px; }

/* ---------- rail (vertical by default) ---------- */
#como-funciona .cf__etapas {
  --cf-gap: 12px;
  --cf-c0: .12;
  --cf-c1: .50;
  display: grid;
  row-gap: var(--cf-gap);
}
#como-funciona .cf-etapa {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

#como-funciona .cf-etapa__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 28px;
  border-radius: var(--r-pill);
  background: rgba(251, 248, 242, .05);
  box-shadow: inset 0 0 0 1px var(--line-dark);
}
#como-funciona .cf-etapa__marca::after {           /* active ring (opacity only) */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(237, 177, 153, .55), 0 0 0 4px rgba(224, 135, 99, .10);
  transition: opacity 240ms linear;
}
#como-funciona .cf-etapa__marca svg { width: 35px; height: auto; overflow: visible; }

#como-funciona .cf-anel { transition: transform 600ms var(--ease-out), opacity 240ms linear; }
#como-funciona .cf-anel--a { transform: translateX(calc(var(--o) * -1px)); }
#como-funciona .cf-anel--b { transform: translateX(calc(var(--o) * 1px)); }

/* line segment from this marker to the next one */
#como-funciona .cf-etapa__linha {
  position: absolute;
  left: 20px;
  top: 33px;
  width: 2px;
  height: calc(100% + var(--cf-gap) - 38px);
  border-radius: 2px;
  background: rgba(251, 248, 242, .13);
  overflow: hidden;
}
#como-funciona .cf-etapa__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, #E08763, #9A8FD1);
  background-size: 100% 300%;
  background-position: 0 calc(var(--k) * 50%);
  transform-origin: 50% 0;
}

/* phones/tablet: "dia 1  Conversa" on one line, text below */
#como-funciona .cf-etapa__corpo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 10px;
  padding-top: 2px;
  transition: opacity 320ms linear;
}
#como-funciona .cf-etapa__dia { font-size: 13.5px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; color: var(--peach); white-space: nowrap; }
#como-funciona .cf-etapa__titulo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
#como-funciona .cf-etapa__texto { flex: 1 0 100%; margin-top: 2px; font-size: 14.5px; line-height: 1.45; color: var(--on-dark-muted); }

/* ---------- note + closing ---------- */
#como-funciona .cf__rodape { margin-top: 20px; }
#como-funciona .cf__nota { font-size: 13px; }
#como-funciona .cf__fecho { margin-top: 16px; }
#como-funciona .cf__fecho-texto {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--on-dark);
}
#como-funciona .cf__botao { width: 100%; margin-top: 12px; }

/* ---------- tablet ---------- */
@media (min-width: 760px) {
  #como-funciona.section { padding-block: var(--section-y); }
  #como-funciona .cf__head { margin-bottom: 44px; }
  #como-funciona .cf__etapas { --cf-gap: 24px; --cf-c0: .13; --cf-c1: .52; }
  #como-funciona .cf-etapa__corpo { max-width: 600px; }   /* text keeps its own line (a max-width on the 100% flex item let it sit beside the title) */
  #como-funciona .cf__rodape { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line-dark); }
  #como-funciona .cf__fecho { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 18px; }
  #como-funciona .cf__botao { width: auto; margin-top: 0; }
}

/* ---------- desktop: horizontal rail ---------- */
@media (min-width: 1024px) {
  #como-funciona.section { padding-block: clamp(64px, 5.6vw, 84px); }
  #como-funciona .cf__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 598px);   /* lead starts on the step-3 column (x 742 at 1440) (fix pass) */
    column-gap: 0;                                            /* the lead keeps its own axis; the title keeps one line */
    align-items: end;
    margin-bottom: 48px;
  }
  #como-funciona .cf__nota { font-size: 14px; }
  #como-funciona .cf__lead { margin-top: 0; max-width: 520px; }

  #como-funciona .cf__etapas {
    --cf-gap: clamp(24px, 3vw, 44px);
    --cf-c0: .18;
    --cf-c1: .50;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--cf-gap);
    row-gap: 0;
  }
  #como-funciona .cf-etapa { display: block; }
  #como-funciona .cf-etapa__marca { width: 64px; height: 40px; }
  #como-funciona .cf-etapa__marca svg { width: 50px; }
  #como-funciona .cf-etapa__linha {
    left: 76px;
    top: 19px;
    width: calc(100% + var(--cf-gap) - 88px);
    height: 2px;
  }
  #como-funciona .cf-etapa__fill {
    background: linear-gradient(90deg, #E08763, #9A8FD1);
    background-size: 300% 100%;
    background-position: calc(var(--k) * 50%) 0;
    transform-origin: 0 50%;
  }
  #como-funciona .cf-etapa__corpo { display: block; margin-top: 20px; padding-top: 0; }
  #como-funciona .cf-etapa__dia { font-size: 14px; }
  #como-funciona .cf-etapa__titulo { margin-top: 3px; font-size: 22px; }
  #como-funciona .cf-etapa__texto { margin-top: 8px; font-size: 15.5px; max-width: 32ch; }

  #como-funciona .cf__rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 48px;
    margin-top: 40px;
    padding-top: 24px;
  }
  #como-funciona .cf__nota { max-width: 440px; }
  #como-funciona .cf__fecho { flex: none; margin-top: 0; }
  #como-funciona .cf__fecho-texto { font-size: 22px; }
}

/* ---------- live states (JS + motion allowed, never in captures) ---------- */
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa__fill { transform: scaleY(0); }
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa:not(.is-on) .cf-etapa__marca::after { opacity: 0; }
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa:not(.is-on) .cf-anel--a { transform: translateX(calc((var(--o) + 7) * -1px)); opacity: .36; }
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa:not(.is-on) .cf-anel--b { transform: translateX(calc((var(--o) + 7) * 1px)); opacity: .36; }
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa:not(.is-on) .cf-anel__trava { opacity: 0; }
html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa:not(.is-on) .cf-etapa__corpo { opacity: .8; }   /* stays ≥ 4.5:1 while waiting for the fill (fix pass) */
#como-funciona.cf--vivo .cf-etapa.is-on .cf-anel__trava { transition-delay: 0ms, 420ms; }
#como-funciona.cf--init .cf-anel, #como-funciona.cf--init .cf-etapa__corpo, #como-funciona.cf--init .cf-etapa__marca::after { transition: none !important; }
@media (min-width: 1024px) {
  html:not([data-capture]) #como-funciona.cf--vivo .cf-etapa__fill { transform: scaleX(0); }
}

@keyframes cf-fill-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cf-fill-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  #como-funciona .cf__etapas { view-timeline: --cf-trilho block; }
  html:not([data-capture]) #como-funciona.cf--vivo.cf--sd .cf-etapa__fill {
    animation: cf-fill-y linear both;
    animation-timeline: --cf-trilho;
    animation-range:
      cover calc((var(--cf-c0) + (var(--cf-c1) - var(--cf-c0)) * var(--k) / 3) * 100%)
      cover calc((var(--cf-c0) + (var(--cf-c1) - var(--cf-c0)) * (var(--k) + 1) / 3) * 100%);
  }
  @media (min-width: 1024px) {
    html:not([data-capture]) #como-funciona.cf--vivo.cf--sd .cf-etapa__fill { animation-name: cf-fill-x; }
  }
}

/* captures and reduced motion: final state (filled rail, interlocked rings) */
html[data-capture] #como-funciona .cf-etapa__fill { transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #como-funciona .cf-etapa__fill { transform: none !important; animation: none !important; }
  #como-funciona .cf-anel, #como-funciona .cf-etapa__corpo, #como-funciona .cf-etapa__marca::after { transition: none; }
}

/* ===== 70-duvidas.css ===== */
/* =====================================================================
   70-duvidas · #duvidas
   mobile: head → 6 perguntas → fechamento
   760–1279: head → 2 colunas → fechamento
   ≥1280: título + fechamento à esquerda, 2 colunas de perguntas à direita
   Abertura suave: grid-template-rows 0fr → 1fr (plan §9 #17), só quando o JS
   da seção marca .duv--anim; sem JS / com movimento reduzido = <details> nativo.
   ===================================================================== */

#duvidas { padding-bottom: clamp(40px, 5.4vw, 80px); }
@media (max-width: 759.98px) { #duvidas { padding-block: 44px 32px; } }

#duvidas .duv__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
#duvidas .duv__head { margin-bottom: clamp(24px, 3.4vw, 44px); }

#duvidas .duv__lista { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
#duvidas .duv__col + .duv__col { border-top: 0; }

/* perguntas */
#duvidas .faq-item > summary { gap: 14px; }
#duvidas .faq-a { padding: 0; }              /* spacing lives on the <p>, inside the clipped wrapper */
#duvidas .faq-a p { padding: 0 44px 20px 0; }

/* fechamento */
#duvidas .duv__fim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
  margin-top: 18px;
}
#duvidas .duv__fim-texto { font-size: 16px; line-height: 1.4; color: var(--ink-2); }

@media (max-width: 759.98px) {
  #duvidas .faq-item > summary { min-height: 50px; padding: 8px 0; font-size: 17.5px; line-height: 1.28; }
  #duvidas .faq-icon { width: 30px; height: 30px; }
  #duvidas .faq-a p { padding-right: 30px; font-size: 16px; }
  #duvidas .duv__head { margin-bottom: 16px; }
  #duvidas .duv__fim { column-gap: 10px; margin-top: 4px; }
  #duvidas .duv__fim-texto { font-size: 15.5px; }
  #duvidas .duv__fim .link-arrow { font-size: 15.5px; }
}

@media (min-width: 760px) {
  #duvidas .duv__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 3vw, 40px); }
  #duvidas .duv__col + .duv__col { border-top: 1px solid var(--line); }
}

@media (min-width: 1280px) {
  #duvidas .duv__grid {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 56px;
    align-items: start;
  }
  #duvidas .duv__head { grid-column: 1; grid-row: 1; margin: 0; }
  #duvidas .duv__lista { grid-column: 2; grid-row: 1 / span 2; column-gap: 36px; }
  #duvidas .duv__fim { grid-column: 1; grid-row: 2; margin-top: 26px; }
}

/* ---------- abertura suave (grid-template-rows) ---------- */
#duvidas .faq-a__in { min-height: 0; }
@media (prefers-reduced-motion: no-preference) {
  #duvidas.duv--anim .faq-a {
    display: grid;
    grid-template-rows: 0fr;
    animation: none;
    transition: grid-template-rows var(--dur-base) var(--ease-out);
  }
  #duvidas.duv--anim .faq-item.is-open .faq-a { grid-template-rows: 1fr; }
  #duvidas.duv--anim .faq-a__in {
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 200ms linear, transform var(--dur-base) var(--ease-out);
  }
  #duvidas.duv--anim .faq-item.is-open .faq-a__in { opacity: 1; transform: none; transition-delay: 60ms, 0ms; }
  /* while closing, [open] is still set: the icon turns back right away */
  #duvidas.duv--anim .faq-item.is-closing .faq-icon { transform: none; }
  #duvidas.duv--anim .faq-item.is-closing .faq-icon::after { opacity: 1; }
}

/* ===== 90-contato.css ===== */
/* =====================================================================
   90-contato · #contato
   dark card (#1A1714, 26px) with coral + lavender radial glows (no blur filter),
   rings that interlock once when the card comes into view (transform only)
   ===================================================================== */

#contato { padding-block: 0 clamp(32px, 3.4vw, 48px); }

#contato .contato__card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-xl);
  padding: clamp(36px, 3.2vw, 46px) clamp(20px, 4vw, 48px) clamp(32px, 3vw, 42px);
  text-align: center;
  /* same glow recipe as .section--dark (fix pass): peach core top-left, lavender-light core bottom-right, faint bridge */
  background:
    radial-gradient(380px circle at 24% 6%, rgba(237, 177, 153, .34), rgba(224, 135, 99, .16) 40%, rgba(224, 135, 99, 0) 70%),
    radial-gradient(420px circle at 78% 96%, rgba(194, 185, 229, .30), rgba(154, 143, 209, .12) 45%, rgba(154, 143, 209, 0) 72%),
    radial-gradient(900px 260px at 50% 100%, rgba(154, 143, 209, .08), rgba(154, 143, 209, 0) 70%),
    var(--ink);
}

/* eyebrow (was a standalone rings mark): same lowercase eyebrow as every other section, centred */
#contato .contato__eyebrow { display: flex; justify-content: center; margin-bottom: 14px; }

/* type */
#contato .contato__titulo { max-width: 16em; margin-inline: auto; }
#contato .contato__destaque { display: block; }
#contato .contato__sub { max-width: 940px; margin: 16px auto 0; color: var(--on-dark-2); text-wrap: balance; }

/* actions */
#contato .contato__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

/* microcopy + e-mail */
#contato .contato__micro,
#contato .contato__email {
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--on-dark-muted);
}
#contato .contato__micro { margin-top: 20px; }
/* the written number is a WhatsApp link too (launch, 17/09/2026): same text and color as the line; inline padding
   (12px above and below, on one line from 760px) takes the touch height to ~42px without moving the line.
   Below 760 each item is its own line, and the padding changes (see the media query at the end) */
#contato .contato__wa {
  position: relative;             /* fica por cima das linhas vizinhas no toque */
  padding-block: 12px;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) linear, text-decoration-color var(--dur-fast) linear;
}
/* sublinhado discreto no hover e no foco, como o do e-mail (revisão do lançamento, 17/09/2026) */
@media (hover: hover) { #contato .contato__wa:hover { color: var(--on-dark); text-decoration-color: rgba(251, 248, 242, .32); } }
#contato .contato__wa:focus-visible { text-decoration-color: rgba(251, 248, 242, .32); }
#contato .contato__email { margin-top: 2px; }
#contato .contato__email a {
  display: inline-block;
  padding-block: 12px;            /* 44px touch target without moving the line */
  margin-block: -12px;
  color: var(--on-dark);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(251, 248, 242, .32);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) linear;
}
@media (hover: hover) { #contato .contato__email a:hover { text-decoration-color: var(--peach); } }

@media (max-width: 759.98px) {
  #contato .contato__card {
    padding: 28px 16px;
    background:
      radial-gradient(260px circle at 18% 0%, rgba(237, 177, 153, .34), rgba(224, 135, 99, .16) 40%, rgba(224, 135, 99, 0) 70%),
      radial-gradient(280px circle at 86% 100%, rgba(194, 185, 229, .30), rgba(154, 143, 209, .12) 45%, rgba(154, 143, 209, 0) 72%),
      var(--ink);
  }
  #contato .contato__eyebrow { margin-bottom: 12px; }
  /* keeps "Bora colocar no ar." on one line: the width follows the screen */
  #contato .contato__titulo { font-size: min(40px, 9vw); }
  #contato .contato__sub { margin-top: 14px; }
  #contato .contato__acoes { flex-direction: column; gap: 10px; margin-top: 20px; }
  #contato .contato__acoes .btn { width: 100%; padding-inline: 16px; }
  #contato .contato__micro { margin-top: 18px; }
  #contato .contato__micro > .nowrap { display: block; }
  /* no celular cada item vira uma linha: o toque do número sobe mais (o botão de cima termina 18px acima) e desce só 3px,
     sem invadir "resposta em até 2h úteis" (antes os 12px de baixo cobriam metade dessa linha). Altura de toque ~39px */
  #contato .contato__wa { padding-top: 18px; padding-bottom: 3px; }
  #contato .contato__sep { display: none; }
  #contato .contato__email { margin-top: 8px; }
}