@font-face {
    font-family: "Barlow Fallback";
    src: local("Arial");
    font-display: swap;
  }

  :root {
    --bg: #121311;
    --bg-2: #1A1C18;
    --surface-2: #202220;
    --text: #E4E5DE;
    --text-muted: #96988E;
    --accent-moss: #7C8A6C;
    --accent-slate: #9C9C93;
    --line: rgba(228,229,222,0.13);
    --noise-opacity: 0.045;

    --font-display: Rockwell, "Roboto Slab", "Zilla Slab", Georgia, serif;
    --font-body: Barlow, "Barlow Fallback", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;

    color-scheme: dark;
  }

  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
      --bg: #EAEAE4;
      --bg-2: #E1E1D9;
      --surface-2: #D6D6CC;
      --text: #1C1D19;
      --text-muted: #55564E;
      --accent-moss: #49573A;
      --accent-slate: #63645B;
      --line: rgba(28,29,25,0.14);
      --noise-opacity: 0.03;
      color-scheme: light;
    }
  }

  :root[data-theme="light"] {
    --bg: #EAEAE4;
    --bg-2: #E1E1D9;
    --surface-2: #D6D6CC;
    --text: #1C1D19;
    --text-muted: #55564E;
    --accent-moss: #49573A;
    --accent-slate: #63645B;
    --line: rgba(28,29,25,0.14);
    --noise-opacity: 0.03;
    color-scheme: light;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden; /* safety net: the page must never scroll sideways */
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: var(--noise-opacity);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  img, svg { max-width: 100%; display: block; }

  .wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 clamp(20px, 5vw, 56px);
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    text-wrap: balance;
    margin: 0;
  }

  a { color: inherit; }

  .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-slate);
  }

  /* ---------- draft banner ---------- */
  .draft-tag {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 210;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--accent-moss);
    color: #10120E;
    padding: 6px 10px;
    border: 1px solid rgba(0,0,0,0.25);
    box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  }

  /* ---------- topbar ---------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(20px, 5vw, 56px);
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }

  .mark {
    display: flex;
    align-items: center;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .topbar .loc {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  @media (max-width: 420px) {
    /* Not enough room for wordmark + location side by side without
       squeezing text or forcing horizontal scroll — drop the location
       tag here; it's still in the footer and contact section. */
    .topbar .loc { display: none; }
  }

  /* ---------- hero ---------- */
  .hero {
    position: relative;
    min-height: min(92vh, 860px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    isolation: isolate;
  }

  @supports (height: 100svh) {
    .hero { min-height: min(92svh, 860px); }
  }

  .hero-bento {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 3px;
    background: var(--bg);
  }

  .bento-cell {
    position: relative;
    overflow: hidden;
  }

  .bento-cell img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05);
  }

  .bento-a { grid-column: 1 / 4; grid-row: 1 / 5; }
  .bento-b { grid-column: 4 / 7; grid-row: 1 / 3; }
  .bento-c { grid-column: 4 / 6; grid-row: 3 / 5; }
  .bento-d { grid-column: 6 / 7; grid-row: 3 / 4; }
  .bento-e { grid-column: 6 / 7; grid-row: 4 / 5; }

  @media (max-width: 760px) {
    .hero-bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
    .bento-a { grid-column: 1 / 3; grid-row: 1 / 3; }
    .bento-b { grid-column: 1 / 2; grid-row: 3 / 4; }
    .bento-c { grid-column: 2 / 3; grid-row: 3 / 4; }
    .bento-d, .bento-e { display: none; }
  }

  /* Mobile never pins scroll (see .hero-intro comment below), so the
     bento doesn't get the scrubbed reveal either. It starts hidden and
     only plays once the JS trigger (first scroll/touch — see script at
     the bottom) adds .mobile-hero-reveal to <html>. Not a fixed
     page-load timer: that used to finish before some visitors had even
     focused on the screen, so the whole intro went unseen. Now it waits
     for them to actually engage. */
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .bento-cell { opacity: 0; }
    html.mobile-hero-reveal .bento-cell { animation: bentoInMobile 0.9s ease 0.25s both; }
  }

  @keyframes bentoInMobile {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
  }

  .hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      /* Darkened further than the original pass — text over the photo
         bento wasn't getting enough contrast once revealed, especially
         toward the right edge of a wrapped line, where the horizontal
         gradient used to fade out almost completely by 48%. */
      linear-gradient(180deg, rgba(11,9,7,0.55) 0%, rgba(11,9,7,0.42) 26%, rgba(11,9,7,0.6) 55%, rgba(9,7,6,0.97) 100%),
      linear-gradient(90deg, rgba(9,7,6,0.62) 0%, rgba(9,7,6,0.28) 62%, rgba(9,7,6,0.12) 100%);
  }

  /* Dark moss glow roughly behind where the crest sits — flat near-black
     was swallowing it, since the crest itself is drawn in muted moss/grey
     tones with barely any contrast against pure black. This used to live
     baked into .hero-scrim above, which is permanent — so the glow kept
     showing (leaking moss color over the actual portfolio photos) even
     after the crest had already dissolved away. Its own layer instead,
     faded out on the exact same trigger as .hero-intro (see script/mobile
     keyframe), so it only ever shows while the crest is still on screen.
     Kept dark/desaturated either way — no bright glow, matches the
     "acetinado, sem brilho" rule; this reads as depth, not a spotlight. */
  .hero-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 68% 52% at 50% 46%, rgba(60,74,48,0.65) 0%, rgba(60,74,48,0) 72%);
  }

  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    /* Opacity-only, deliberately not reusing heroIntroOutMobile's scale —
       this box is full-bleed (inset:0), not fit-content like .hero-intro,
       so scaling it down would shrink the whole gradient rectangle
       in toward the center and leave a briefly-visible near-black band
       at the edges. Fading it alone stays simple and predictable. */
    html.mobile-hero-reveal .hero-glow { animation: glowOutMobile 1.1s ease forwards; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-glow { display: none; }
  }

  @keyframes glowOutMobile {
    0%, 30% { opacity: 1; }
    100% { opacity: 0; }
  }

  .hero-inner {
    position: relative;
    padding: clamp(90px, 16vw, 160px) 0 clamp(48px, 7vw, 72px);
    max-width: 780px;
  }

  .hero-intro {
    /* Centered via inset:0 + margin:auto on an intrinsically-sized box —
       not transform:translate(-50%,-50%) — because the script below (and
       the mobile keyframe further down) animates this element's own
       `scale`. GSAP/CSS transforms replace the whole transform value
       wholesale, so a translate baked in here would get clobbered the
       instant scale starts animating. */
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(22px, 4vw, 38px);
    pointer-events: none;
  }

  .hero-crest-intro {
    width: clamp(160px, 26vw, 320px);
    height: auto;
    /* Idle breathing while it waits for scroll — lives on the <img>
       itself, not on .hero-intro, so it never fights the wrapper's own
       transform (owned by the scroll-scrub script / mobile keyframe
       above). Parent's display:none under reduced-motion already takes
       this out of the render tree too, no separate guard needed here. */
    animation: crestIdle 5s ease-in-out infinite;
  }

  @media (max-width: 760px) {
    /* 26vw of a ~390px phone is under 110px, so it sits on the 160px
       floor above — reads small against a full dark screen with nothing
       else on it. Mobile gets its own, bigger sizing. */
    .hero-crest-intro { width: clamp(210px, 58vw, 300px); }
  }

  @keyframes crestIdle {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.025); }
  }

  .hero-scroll-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-slate);
    animation: scrollCueBounce 1.8s ease-in-out infinite;
  }

  .hero-scroll-cue svg { width: 16px; height: 16px; }

  @keyframes scrollCueBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(6px); opacity: 1; }
  }

  /* Desktop (JS on, no reduced-motion): the script below dissolves this
     whole group in sync with the pinned scroll. Mobile never pins scroll
     (fragile there — see design-guide), so it plays a plain timed
     version of the same dissolve instead — but only once the visitor
     actually scrolls or taps (html.mobile-hero-reveal, added by the
     script at the bottom on first scroll/touchstart), not on a fixed
     page-load clock. It used to fire automatically 0.1s after load,
     which on a real phone often finished playing before the visitor had
     even looked at the screen — the whole "big crest → dissolves into
     the site" moment went unseen. Reduced-motion drops it entirely
     either way, no substitute animation. */
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    html.mobile-hero-reveal .hero-intro { animation: heroIntroOutMobile 1.1s ease forwards; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-intro { display: none; }
  }

  @keyframes heroIntroOutMobile {
    0%, 30% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.72); }
  }

  .hero h1 {
    font-size: clamp(36px, 5.6vw, 58px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: #F3ECDA;
  }

  .hero h1 em {
    font-style: normal;
    color: var(--accent-moss);
  }

  .hero .lede {
    margin-top: 20px;
    max-width: 46ch;
    font-size: 18px;
    color: #D7CCB2;
  }

  .hero-actions {
    margin-top: 32px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
  }

  .ticket-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: var(--accent-moss);
    color: #10120E;
    font-family: var(--font-display);
    font-size: 16px;
    padding: 14px 26px;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 999px;
    text-decoration: none;
  }

  /* Círculo com pulse (desktop) vira barra larga (mobile) — o rótulo
     "Chamar no WhatsApp" aparece nas duas versões, só muda de posição
     (embaixo do ícone no desktop, ao lado dele na barra do mobile). */
  .wpp-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
  }

  .wpp-btn-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-moss);
    color: #10120E;
    border: 1px solid rgba(0,0,0,0.2);
  }

  .wpp-btn-icon svg { width: 30px; height: 30px; position: relative; z-index: 1; flex: none; }

  .wpp-btn-label {
    font-family: var(--font-display);
    font-size: 15px;
  }

  .wpp-btn-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent-moss);
    opacity: 0.55;
  }

  @media (prefers-reduced-motion: no-preference) {
    .wpp-btn-pulse { animation: wppPulse 2.2s ease-out infinite; }
  }

  /* Mobile: full-width bar instead of a small circle — same button,
     just easier to hit. The round pulse ring doesn't translate to a
     bar shape, so it's dropped here; the label already draws the eye. */
  @media (max-width: 760px) {
    .wpp-btn {
      flex-direction: row;
      width: 100%;
      gap: 10px;
      padding: 15px 0;
      border-radius: 14px;
      background: var(--accent-moss);
      color: #10120E;
      border: 1px solid rgba(0,0,0,0.2);
    }
    .wpp-btn-icon {
      width: auto;
      height: auto;
      background: none;
      border: none;
    }
    .wpp-btn-icon svg { width: 24px; height: 24px; }
    .wpp-btn-pulse { display: none; }
    .wpp-btn-label { font-size: 16px; }
  }

  @keyframes wppPulse {
    0% { transform: scale(1); opacity: 0.55; }
    100% { transform: scale(1.9); opacity: 0; }
  }

  /* ---------- section shell ---------- */
  section { padding: clamp(52px, 8vw, 96px) 0; position: relative; }
  section + section { border-top: 1px solid var(--line); }

  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 44px;
    flex-wrap: wrap;
  }

  .section-head h2 {
    font-size: clamp(27px, 3.4vw, 38px);
  }

  .section-head p {
    max-width: 40ch;
    color: var(--text-muted);
    margin: 10px 0 0;
  }

  /* ---------- sobre ---------- */
  .sobre-grid {
    display: grid;
    grid-template-columns: 1fr 0.82fr;
    gap: clamp(28px, 5vw, 68px);
    align-items: center;
  }

  @media (max-width: 780px) {
    .sobre-grid { grid-template-columns: 1fr; }
  }

  .sobre-grid p { margin: 0 0 16px; max-width: 58ch; }
  .sobre-grid p:last-child { margin-bottom: 0; }

  .sobre-photo {
    aspect-ratio: 4/5;
    overflow: hidden;
    border: 1px solid var(--line);
  }

  .sobre-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    filter: saturate(1.03) contrast(1.04);
  }

  .pull {
    margin-top: 26px;
    border-left: 3px solid var(--accent-moss);
    padding-left: 20px;
    font-family: var(--font-display);
    font-size: clamp(18px, 2vw, 21px);
    line-height: 1.42;
    color: var(--text);
  }

  .pull span {
    display: block;
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* ---------- estilos list ---------- */
  .style-list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 14px;
    row-gap: 10px;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .style-list .item { display: inline-flex; align-items: center; gap: 14px; }
  .style-list .item::after { content: "·"; color: var(--line); margin-left: 14px; }
  .style-list .item:last-child::after { content: none; }
  .style-list .item.is-focus { color: var(--accent-moss); }

  /* No mobile, itens de comprimento bem diferente ("Old School /
     Tradicional" vs. "Cobertura") quebram linha em pontos distintos
     e os separadores "·" ficam desalinhados entre as linhas — troca
     pra uma coluna única, sem separador, que fica reto em qualquer
     largura. */
  @media (max-width: 620px) {
    .style-list {
      flex-direction: column;
      align-items: flex-start;
      row-gap: 12px;
    }
    .style-list .item::after { content: none; }
  }

  /* ---------- portfolio ---------- */
  .flash-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    background: var(--line);
  }

  @media (max-width: 920px) {
    .flash-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .flash-grid { grid-template-columns: 1fr; }
  }

  .flash-card {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--bg-2);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .flash-card.is-visible { opacity: 1; transform: translateY(0); }

  .flash-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.06) contrast(1.06);
    transition: transform 0.5s ease, filter 0.5s ease;
  }

  .flash-card:hover img { transform: scale(1.045); }

  .flash-card .scrim {
    position: absolute;
    inset: auto 0 0 0;
    height: 62%;
    background: linear-gradient(180deg, transparent, rgba(10,7,5,0.92));
    pointer-events: none;
  }

  .flash-card .cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 18px;
  }

  .flash-card .num {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    color: var(--accent-slate);
  }

  .flash-card h3 {
    font-size: 19px;
    margin: 6px 0 4px;
    color: #F3ECDA;
  }

  .flash-card .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #C9BC9F;
  }

  /* ---------- processo ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }

  @media (max-width: 900px) {
    .steps { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .steps { grid-template-columns: 1fr; }
  }

  .step {
    border-top: 2px solid var(--accent-moss);
    padding-top: 14px;
  }

  .step .n {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent-slate);
    letter-spacing: 0.06em;
  }

  .step h3 {
    font-size: 17px;
    margin: 8px 0 6px;
    font-family: var(--font-body);
    font-weight: 700;
  }

  .step p {
    margin: 0;
    font-size: 14.5px;
    color: var(--text-muted);
  }

  .manifesto {
    margin-top: 56px;
    text-align: center;
    position: relative;
    padding: 40px 0;
    overflow: hidden; /* the watermark crest below is decorative and must never force horizontal scroll */
  }

  .manifesto-crest {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(220px, 55vw, 420px);
    height: auto;
    opacity: 0.06;
    pointer-events: none;
  }

  .manifesto p {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 31px);
    max-width: 23ch;
    margin: 0 auto;
    line-height: 1.35;
  }

  .manifesto p em {
    font-style: normal;
    color: var(--accent-moss);
  }

  /* ---------- cuidados ---------- */
  .care-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: start;
  }
  @media (max-width: 980px) {
    .care-grid { grid-template-columns: 1fr 1fr; }
    /* 3 cards in a 2-col grid leaves the 3rd stranded alone on its own
       row — span it full-width instead of floating in the left column. */
    .care-card:last-child { grid-column: 1 / -1; }
  }
  @media (max-width: 620px) { .care-grid { grid-template-columns: 1fr; } }

  .care-card {
    border: 1px solid var(--line);
    padding: 26px;
  }

  .care-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .care-card > p {
    margin: 0 0 16px;
    font-size: 14.5px;
    color: var(--text-muted);
  }

  .care-card .sub-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-slate);
    margin: 16px 0 8px;
  }
  .care-card .sub-label:first-of-type { margin-top: 0; }

  .care-card ul {
    margin: 0;
    padding-left: 18px;
    color: var(--text-muted);
    font-size: 14.5px;
  }

  .care-card li { margin-bottom: 8px; }
  .care-card li:last-child { margin-bottom: 0; }

  .care-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--accent-moss);
    background: color-mix(in srgb, var(--accent-moss) 14%, transparent);
  }

  .care-warning svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-moss); }

  .care-warning p {
    margin: 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
  }

  /* ---------- precos ---------- */
  .price-card {
    max-width: 560px;
    border: 1px solid var(--line);
    background: var(--bg-2);
  }

  /* Rótulo empilhado em cima do valor: alinhados pela mesma borda
     esquerda. Lado a lado eles só compartilhariam a linha de base, e
     a diferença de corpo (12px mono vs. 44px display) fazia o rótulo
     parecer torto em relação ao número. */
  .price-highlight {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 18px clamp(20px, 4vw, 30px);
    background: color-mix(in srgb, var(--accent-moss) 18%, transparent);
    border-bottom: 1px solid var(--line);
  }

  .price-highlight-label {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-slate);
  }

  .price-highlight-val {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(30px, 4.4vw, 40px);
    line-height: 1.1;
    color: var(--accent-moss);
  }

  .price-details { padding: 0 clamp(20px, 4vw, 30px); }

  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
  }
  .price-row:last-child { border-bottom: none; }

  /* Em tela estreita o par label/valor não cabe lado a lado sem que o
     label quebre no meio ("Formas de / pagamento") enquanto o valor
     fica numa linha só — empilha os dois pra manter tudo reto. */
  @media (max-width: 620px) {
    .price-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }
  }

  .price-row .label {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--text);
  }

  .price-row .val {
    font-family: var(--font-mono);
    font-size: 15px;
    color: var(--accent-moss);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ---------- contato ---------- */
  .contact-band {
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--line);
    isolation: isolate;
  }

  .contact-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 18%;
    z-index: -2;
    filter: grayscale(0.15) saturate(1.1);
  }

  .contact-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg, rgba(12,9,7,0.96) 0%, rgba(12,9,7,0.9) 45%, rgba(12,9,7,0.72) 100%);
  }

  .contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: center;
  }
  @media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

  .contact-grid h2 { font-size: clamp(27px, 3.4vw, 40px); color: #F3ECDA; }
  .contact-grid .lede { color: #CBBFA2; margin-top: 12px; max-width: 42ch; }

  .contact-facts {
    font-family: var(--font-mono);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: #CBBFA2;
  }

  .contact-facts strong {
    color: #F3ECDA;
    font-family: var(--font-body);
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
  }

  .contact-facts a {
    text-decoration: none;
    border-bottom: 1px solid rgba(203,191,162,0.35);
    transition: border-color 0.2s ease;
  }
  .contact-facts a:hover { border-color: var(--accent-moss); }

  footer {
    padding: 30px clamp(20px, 5vw, 56px);
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
  }

  footer .foot-mark { display: flex; align-items: center; gap: 10px; }
  footer .foot-mark img { width: 22px; height: auto; }

  @media (prefers-reduced-motion: no-preference) {
    .hero-inner { animation: rise 0.8s ease both; }
  }
  /* Desktop hides .hero-inner's children via JS (gsap.set opacity:0) and
     reveals them on scroll, so the general rule above is a harmless no-op
     there — the inline opacity:0 on the children dominates regardless of
     what the parent's own opacity is doing. On mobile there's no JS gate
     from the scroll-scrub script, so this is what drives the reveal —
     held back (opacity:0, no animation) until html.mobile-hero-reveal
     lands on first scroll/touch, same trigger as the crest and bento
     above, so all three move together instead of on separate clocks. */
  @media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
    .hero-inner { opacity: 0; animation: none; }
    html.mobile-hero-reveal .hero-inner { animation: rise 0.8s ease 0.35s both; }
  }
  /* Reveal de texto/bloco conforme entra na tela — mesmo mecanismo de
     IntersectionObserver dos .flash-card, mas aplicável a qualquer
     elemento. Vale desktop e mobile igual: o gatilho é a rolagem até o
     elemento, não largura de tela. O --d escalona o atraso quando
     vários irmãos entram juntos (cascata), sem precisar de JS por item. */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: calc(var(--d, 0) * 90ms);
  }

  .reveal.is-visible { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .flash-card { opacity: 1; transform: none; transition: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }