/* ─────────────────────────────────────────────────────────────────────────
   Michaell Douglas — Atelier de Prótese Capilar
   Vanilla static rebuild of the original React+Babel artifact.
   Visual fidelity: pixel-perfect with the approved cream palette.
   ───────────────────────────────────────────────────────────────────────── */

/* ── @font-face — local copies of Google Fonts woff2, ranges preserved ─── */

/* Caveat — script accent (weights 400/500/600 share files) */
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/caveat-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/caveat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/caveat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Fraunces italic 300/400/500/600 (shared files) */
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('/fonts/fraunces-italic-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('/fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:300 600;font-display:swap;
  src:url('/fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Fraunces normal 300/400/500/600/700 (shared files) */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/fraunces-vietnamese.woff2') format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('/fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Geist 300/400/500/600 (shared files) */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/geist-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;
  src:url('/fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Geist Mono 400/500 (shared files) */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('/fonts/geist-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;
  src:url('/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}


/* ── Tokens ─────────────────────────────────────────────────────────────── */

/* Dark is the default — matches the version approved by the client. */
:root{
  --cream:#0e0d0b;
  --cream-2:#15140f;
  --cream-3:#1d1b14;
  --ink:#f3eee2;
  --ink-2:#d6cdb8;
  --ink-3:#928971;
  --gold:#d4af63;
  --gold-2:#e6c47c;
  --rule: rgba(243,238,226,.16);
  --rule-soft: rgba(243,238,226,.08);
  --serif: 'Fraunces', serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --script: 'Caveat', 'Fraunces', cursive;
  --pad: 80px;
  --gutter: 36px;
}

/* Optional cream palette — apply with <body data-palette="cream"> */
[data-palette="cream"]{
  --cream:#f3eee2;
  --cream-2:#ebe4d2;
  --cream-3:#e2d9c1;
  --ink:#1a1814;
  --ink-2:#3a342a;
  --ink-3:#6b6253;
  --gold:#a8823c;
  --gold-2:#c9a460;
  --rule: rgba(26,24,20,.18);
  --rule-soft: rgba(26,24,20,.08);
}


/* ── Reset ──────────────────────────────────────────────────────────────── */

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased}
body{overflow-x:hidden}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* Smooth-scroll wrapper: virtual scroll driven by JS lerp on transform.
   Activated only when JS adds .has-smooth to <html>. Nav stays outside
   the wrap so its sticky positioning is preserved. */
.smooth-wrap{position:fixed;top:0;left:0;right:0;width:100%;
  will-change:transform;backface-visibility:hidden;
  transform:translate3d(0,0,0)}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer}
img{display:block;max-width:100%}

::selection{background:var(--gold);color:var(--cream)}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);
  color:var(--cream);padding:10px 16px;font-family:var(--mono);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;z-index:100}
.skip-link:focus{left:16px;top:16px}


/* ── Type utilities ─────────────────────────────────────────────────────── */

.f-display{font-family:var(--serif);font-weight:300;font-optical-sizing:auto;
  letter-spacing:-0.035em;line-height:.92}
.f-display-it{font-family:var(--serif);font-style:italic;font-weight:300;
  font-optical-sizing:auto;letter-spacing:-0.025em;line-height:.94}
.f-script{font-family:var(--script);font-weight:500;font-style:italic;
  letter-spacing:0;line-height:1}
.f-mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:10.5px;font-weight:500}
.f-mono-sm{font-family:var(--mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:9.5px;font-weight:500}

/* type-as-art display sizes — calibrated so the hero stack
   (meta + heading + portrait + lede + actions) fits ~855vh on 14"
   laptops without forcing the primary CTA below the fold. */
.lg-1{font-size:clamp(44px, 6.5vw, 116px)}
.lg-2{font-size:clamp(38px, 5.5vw, 92px)}
.lg-3{font-size:clamp(30px, 4.2vw, 70px)}

.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3)}

.side-label{writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3)}


/* ── Spec rows (dotted leader) ──────────────────────────────────────────── */

.spec{display:grid;grid-template-columns:max-content 1fr auto;
  align-items:baseline;gap:0;padding:9px 0;
  border-bottom:1px dotted var(--rule)}
.spec .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3)}
.spec .leader{border-bottom:1px dotted var(--cream-3);
  transform:translateY(-4px);margin:0 8px;height:0;align-self:center}
.spec .v{font-family:var(--mono);font-size:11px;letter-spacing:.04em;
  color:var(--ink);font-weight:500;justify-self:end;text-align:right}


/* ── Placeholder image (gradient + grain) ──────────────────────────────── */

.ph{position:relative;overflow:hidden;background:#15130f}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(140% 90% at 30% 25%, rgba(255,255,255,.08), transparent 60%),
    radial-gradient(120% 100% at 75% 80%, rgba(168,130,60,.18), transparent 55%),
    linear-gradient(180deg, #1a1814 0%, #0a0907 100%);
}
.ph::after{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.018) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}
.ph .ph-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(243,238,226,.4);text-align:center;line-height:1.8;white-space:pre;
  pointer-events:none;z-index:2}

.ph.light{background:#e2d9c1}
.ph.light::before{
  background:
    radial-gradient(140% 90% at 30% 25%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(120% 100% at 75% 80%, rgba(168,130,60,.18), transparent 55%),
    linear-gradient(180deg, #ebe4d2 0%, #d8cdb0 100%);
}
.ph.light .ph-label{color:rgba(26,24,20,.45)}

.ph.warm{background:#1f1810}
.ph.warm::before{
  background:
    radial-gradient(120% 80% at 25% 30%, rgba(212,175,99,.35), transparent 55%),
    radial-gradient(140% 100% at 75% 90%, rgba(60,30,10,.6), transparent 60%),
    linear-gradient(160deg, #2a1c10 0%, #0f0905 100%);
}


/* ── Photo card with caption ───────────────────────────────────────────── */

.photo-card{position:relative}
.photo-card .caption,
.ph .caption{position:absolute;left:14px;bottom:14px;
  background:rgba(243,238,226,.92);padding:6px 10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);z-index:3;
  text-shadow:0 1px 8px rgba(0,0,0,.6)}
.ph .caption.caption-right{left:auto;right:14px}


/* ── Logomark ──────────────────────────────────────────────────────────── */

.logomark{display:inline-grid;place-items:center;font-family:var(--serif);
  font-style:italic;font-weight:300;color:var(--gold);
  width:42px;height:42px;border:1px solid var(--ink);background:var(--ink);
  font-size:22px;letter-spacing:-.05em;line-height:1}
.logomark.invert{background:transparent;color:var(--gold);border-color:var(--gold)}


/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn{display:inline-flex;align-items:center;gap:10px;
  padding:15px 22px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;cursor:pointer;border:none;
  transition:transform .2s, background .2s, color .2s;text-decoration:none}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--gold);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-gold{background:var(--gold);color:var(--ink);
  border:1px solid var(--gold-2);
  text-shadow:0 1px 1px rgba(0,0,0,.15)}
.btn-gold:hover{background:var(--gold-2);color:var(--ink);border-color:var(--cream)}


/* ── Details / Summary ─────────────────────────────────────────────────── */

details{padding:24px 0;border-bottom:1px solid var(--rule)}
details summary{list-style:none;cursor:pointer;display:flex;
  justify-content:space-between;align-items:center;gap:24px}
details summary::-webkit-details-marker{display:none}
details[open] summary .plus{transform:rotate(45deg);background:var(--gold);color:var(--ink)}


/* ── WhatsApp float ────────────────────────────────────────────────────── */

/* Editorial integration: deeper forest green (radioactive #25d366 darkened
   ~40%), smaller circle, cream icon. Still legible as the WhatsApp brand
   without screaming over the page. */
.wpp{position:fixed;right:22px;bottom:22px;width:50px;height:50px;
  border-radius:999px;background:#1f4d3a;color:#f3eee2;
  display:grid;place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  z-index:50;transition:transform .25s, background .25s;text-decoration:none}
.wpp svg{display:block;width:24px;height:24px}
.wpp:hover{transform:scale(1.06);background:#286a4f}


/* ── Reveal on scroll ──────────────────────────────────────────────────── */

.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}


/* ── Hand-script underline accent (gold italic words) ──────────────────── */

.u-script{position:relative;display:inline-block;color:var(--gold)}
.u-script svg{position:absolute;left:-6%;right:-6%;bottom:-22%;
  width:112%;height:0.5em;pointer-events:none}
.u-script svg path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round}


/* ── Section header (numbered) ─────────────────────────────────────────── */

.section-num{display:flex;align-items:baseline;gap:18px;margin-bottom:32px}
.section-num .n{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:48px;color:var(--gold);line-height:1}
.section-num .label{font-family:var(--mono);font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-3)}
.section-num hr{flex:1;border:0;border-top:1px solid var(--rule);
  align-self:center;margin:0}


/* ── Horizontal scroll utility ─────────────────────────────────────────── */

.scroll-x{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:6px}
.scroll-x::-webkit-scrollbar{display:none}
.scroll-x{scrollbar-width:none}
.scroll-x > *{scroll-snap-align:start;flex-shrink:0}


/* ── Sticky nav ────────────────────────────────────────────────────────── */

.nav{position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--cream) 78%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--rule)}
.nav-grid{display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;padding:16px var(--pad);gap:28px}
.nav-brand{display:flex;align-items:center;gap:12px}
.nav-brand-name{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:18px;letter-spacing:-0.01em}
.nav-menu{display:flex;gap:28px;justify-self:center}
.nav-link{color:var(--ink);opacity:.65;position:relative;padding-bottom:4px;
  transition:opacity .2s, border-color .2s}
.nav-link.is-active{opacity:1;border-bottom:1px solid var(--gold)}
.nav-link:hover{opacity:1}
.nav-city{color:var(--ink-3)}


/* ── Ticker ────────────────────────────────────────────────────────────── */

@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.ticker{overflow:hidden;border-block:1px solid var(--rule);background:var(--cream)}
.ticker-track{display:flex;gap:42px;white-space:nowrap;width:max-content;
  animation:ticker-scroll 56s linear infinite;padding:14px 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink)}
.ticker-track span{display:inline-flex;align-items:center;gap:18px}
.ticker-track .dot{color:var(--gold)}


/* ── HERO — foto full-bleed + degradê escuro à esquerda (sem corte 50/50) ─ */

/* Foto cobre o hero inteiro; legibilidade do texto vem do degradê em .hero::after. */
.hero{
  position:relative;
  isolation:isolate;
  background:var(--cream);
  border-bottom:1px solid var(--rule);
  padding:18px var(--pad) 28px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(20px, 3.2vh, 40px);
  min-height:calc(100svh - 70px);
  max-height:980px;
  max-width:1920px;
  margin:0 auto;
  overflow:hidden;
}

/* Grain — abaixo do degradê editorial. */
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.012) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  opacity:.45;
}

/* Degradê por cima da foto inteira: fundo sólido à esquerda → transparente à direita. */
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--cream) 0%,
    color-mix(in srgb, var(--cream) 94%, transparent) 12%,
    color-mix(in srgb, var(--cream) 72%, transparent) 28%,
    color-mix(in srgb, var(--cream) 38%, transparent) 48%,
    color-mix(in srgb, var(--cream) 12%, transparent) 68%,
    transparent 88%);
}

/* Foto em tela cheia no hero (não mais “coluna” à direita). */
.hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  z-index:0;
  overflow:hidden;
  background:var(--cream);
}
.hero-photo picture{display:contents}
.hero-photo img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  object-position:68% 0%;
  z-index:0;
  display:block;
}

/* TOP LEDGER — three columns, mono caps, spans full hero width */
.hero-meta{
  position:relative;z-index:3;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:baseline;
  gap:24px;
  padding-bottom:12px;
  border-bottom:1px solid var(--rule-soft);
  color:var(--ink-3);
  font-feature-settings:"tnum";
}
.hero-meta-l,
.hero-meta-c,
.hero-meta-r{opacity:.78}
.hero-meta-c{color:var(--gold);opacity:.9;text-align:center;letter-spacing:.42em}
.hero-meta-r{text-align:right;text-shadow:0 1px 10px rgba(0,0,0,.55)}

/* MAIN STAGE — single column, headline allowed to invade the photo */
.hero-stage{
  position:relative;z-index:3;
  display:block;
  align-self:end;
  padding-top:clamp(16px, 4vh, 56px);
}

/* HEADLINE — Fraunces serif display, can extend past 50vw.
   Cap at 128px so wide screens (1920+) leave breathing room for lede + CTA. */
.hero-headline{
  margin:0;
  font-family:var(--serif);
  font-weight:300;
  font-style:normal;
  font-optical-sizing:auto;
  font-variation-settings:"opsz" 144;
  letter-spacing:-0.04em;
  line-height:.92;
  color:var(--ink);
  font-size:clamp(48px, 7vw, 128px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  gap:0;
  /* Bleed up to ~68vw — last word of each line can land over the photo */
  max-width:68vw;
}
.hero-line{
  display:block;
  overflow:hidden;            /* clip wrapper for word-clip animation */
  padding-bottom:.04em;
}
.hero-em{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  color:var(--gold);
  letter-spacing:-0.025em;
  display:inline-block;
}
/* Words landing over the photo get a soft shadow for legibility */
.hero-word{
  text-shadow:0 2px 14px rgba(14,13,11,.55), 0 6px 36px rgba(14,13,11,.3);
}

/* FOOTER — subtitle (left col) + CTA (right col), divider spans full width */
.hero-footer{
  position:relative;z-index:3;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:36px;
  align-items:end;
  padding-top:24px;
  border-top:1px solid var(--rule-soft);
  width:100%;
}
.hero-lede{
  margin:0;
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-2);
  font-weight:300;
  max-width:420px;
}
.hero-cta{align-self:end;justify-self:end}


/* ── 01 — SOBRE ────────────────────────────────────────────────────────── */

.sobre{padding:var(--pad);border-bottom:1px solid var(--rule)}
.sobre-grid{display:grid;grid-template-columns:1fr 1.4fr;
  gap:var(--gutter);align-items:start}
.sobre-h2{margin:0}
.sobre-lede{font-size:16px;color:var(--ink-2);line-height:1.7;
  margin-top:32px;max-width:540px;font-weight:300}
.sobre-sub{font-size:14px;color:var(--ink-3);line-height:1.7;
  margin-top:14px;max-width:540px}
.sobre-em{font-family:var(--serif);font-style:italic;color:var(--ink)}
.sobre-stats{display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:56px;padding-top:28px;border-top:1px solid var(--rule)}
.stat{padding-right:18px}
.sobre-stats .stat:not(:last-child){border-right:1px solid var(--rule)}
.stat-n{font-size:64px;color:var(--ink)}
.stat-l{margin-top:6px;color:var(--ink-3)}
/* The static "1:1" stat — fade in to land at the same beat the numeric
   counters finish their tween (~1.2s). Activated by .reveal.in upstream. */
.stat-static{opacity:0;transition:opacity .8s ease;transition-delay:1.1s}
.reveal.in .stat-static{opacity:1}


/* ── MANIFESTO ─────────────────────────────────────────────────────────── */

.manifesto{padding:calc(var(--pad) * 1.4) var(--pad);
  border-bottom:1px solid var(--rule);background:var(--cream-2)}
.manifesto-inner{max-width:1100px;margin:0 auto;text-align:center}
.manifesto-kicker{color:var(--gold);letter-spacing:.42em;margin-bottom:28px}
.manifesto-h2{margin:0;line-height:1.04}
.manifesto-gold{color:var(--gold)}
.manifesto-p{font-size:16px;color:var(--ink-2);line-height:1.7;
  max-width:620px;margin:48px auto 0;font-weight:300}


/* ── 02 — ESTÚDIO ──────────────────────────────────────────────────────── */

.estudio{padding:var(--pad);border-bottom:1px solid var(--rule)}

.ad-header{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:36px;gap:24px;flex-wrap:wrap}
.ad-h2{margin:0;max-width:720px}
.ad-gold{color:var(--gold)}
.ad-sub{font-size:0.5em;color:var(--ink-3);font-family:var(--serif);
  font-style:italic;font-weight:300}
.ad-meta{text-align:right}
.ad-meta-tag{color:var(--gold);margin-bottom:8px}
.ad-meta-info{color:var(--ink-3);line-height:1.9}

/* Before/After slider */
.ba{position:relative;width:100%;height:580px;overflow:hidden;
  cursor:ew-resize;user-select:none;background:#0a0907;touch-action:pan-y}
.ba .layer{position:absolute;inset:0}
.ba .ph.layer{aspect-ratio:auto}
.ba-layer-before{filter:grayscale(.6) brightness(.85)}
.ba-clip{clip-path:inset(0 50% 0 0)}
.ba .handle{position:absolute;top:0;bottom:0;width:1.5px;background:var(--gold);
  transform:translateX(-1px);left:50%}
.ba .handle .knob{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:999px;background:rgba(0,0,0,.6);
  border:1.5px solid var(--gold);color:var(--gold);display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;-webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px)}
.ba .ba-tag{position:absolute;top:18px;font-family:var(--mono);font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;padding:5px 10px}
.ba .ba-tag.before{left:18px;background:rgba(0,0,0,.55);color:#fff}
.ba .ba-tag.after{right:18px;background:var(--gold);color:#0e0e0e}

.ad-thumbs{margin-top:18px;display:grid;grid-template-columns:repeat(8,1fr);gap:10px}
.ad-thumb{border:1px solid var(--rule);padding:3px;cursor:pointer;
  position:relative;background:var(--cream);
  font:inherit;color:inherit;text-align:left;
  opacity:.85;transition:opacity 200ms ease-out;
  outline:none}
.ad-thumb:hover,.ad-thumb:focus-visible{opacity:1}
.ad-thumb.active{opacity:1;outline:2px solid var(--gold);outline-offset:-2px}
.ad-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.ad-thumb-num{position:absolute;left:6px;bottom:6px;
  background:var(--cream);padding:2px 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--ink)}

.ad-hero{transition:opacity 300ms ease-out}
.ad-hero.swapping{opacity:0}

.ad-footer{margin-top:28px;display:flex;justify-content:space-between;align-items:center}
.ad-count{color:var(--ink-3)}


/* ── 03 — MÉTODO ───────────────────────────────────────────────────────── */

.metodo{padding:var(--pad);border-bottom:1px solid var(--rule)}
.metodo-header{display:grid;grid-template-columns:1fr 1.4fr;
  gap:var(--gutter);align-items:start;margin-bottom:56px}
.metodo-h2{margin:0}
.metodo-gold{color:var(--gold)}
.metodo-lede{font-size:15px;color:var(--ink-2);line-height:1.7;
  font-weight:300;align-self:end;max-width:480px;justify-self:end}

.metodo-row{padding:44px 0;border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:120px 1fr 1.2fr 240px;
  gap:36px;align-items:start}
.metodo-list .metodo-row:first-child{border-top:1px solid var(--rule)}
.metodo-numeral{font-size:96px;color:var(--gold);line-height:1;margin-top:-8px;
  font-family:var(--serif);font-style:italic;font-weight:400}
.metodo-row-title{font-size:44px;margin:0;letter-spacing:-0.025em;font-weight:300}
.metodo-row-desc{font-size:15px;color:var(--ink-2);line-height:1.7;
  margin:0;font-weight:300;padding-top:8px}
.metodo-row-specs{padding-top:8px}


/* ── 04 — BASTIDORES ───────────────────────────────────────────────────── */

.bastidores{padding:var(--pad);border-bottom:1px solid var(--rule)}
.dep-h2{margin:0 0 56px;max-width:1000px}
.dep-gold{color:var(--gold)}

.dep-featured{display:grid;grid-template-columns:1fr 1.5fr;
  gap:var(--gutter);margin-bottom:48px}
.dep-featured-video{position:relative;cursor:pointer}
.dep-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:80px;height:80px;border-radius:999px;border:1.5px solid var(--gold);
  background:rgba(0,0,0,.4);color:var(--gold);
  display:grid;place-items:center;font-size:22px;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:3}
.dep-featured-text{padding-top:12px}
.dep-tag{color:var(--gold);margin-bottom:24px}
.dep-quote{font-family:var(--serif);font-weight:300;font-size:56px;
  line-height:1.05;letter-spacing:-0.02em;margin:0;color:var(--ink)}
.dep-quote-em{font-style:italic;color:var(--gold)}
.dep-author{margin-top:36px;display:flex;align-items:center;gap:14px}
.dep-author-avatar{width:48px;height:48px;border-radius:999px;
  aspect-ratio:1/1;flex-shrink:0}
.dep-author-name{font-family:var(--serif);font-style:italic;font-size:18px}
.dep-author-meta{color:var(--ink-3)}

.dep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dep-card{position:relative;cursor:pointer}
.dep-card-overlay{position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 50%, rgba(10,9,7,.95));
  pointer-events:none}
.dep-card-text{position:absolute;left:22px;right:22px;bottom:22px;color:var(--cream)}
.dep-card-tag{color:var(--gold-2);margin-bottom:10px}
.dep-card-quote{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:24px;line-height:1.2}
.dep-card-meta{margin-top:12px;color:rgba(243,238,226,.7)}


/* ── 05 — PODCAST (POD CALVO) ─────────────────────────────────────────── */

.podcast{padding:var(--pad);border-bottom:1px solid var(--rule)}
.podcast-header{display:grid;grid-template-columns:1fr 1.4fr;
  gap:var(--gutter);align-items:start;margin-bottom:56px}
.podcast-h2{margin:0}
.podcast-gold{color:var(--gold)}
.podcast-lede{font-size:15px;color:var(--ink-2);line-height:1.7;
  font-weight:300;align-self:end;max-width:480px;justify-self:end;margin:0}

.podcast-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-bottom:56px}
.podcast-card{display:flex;flex-direction:column;gap:14px}

.podcast-video{position:relative;display:block;width:100%;padding:0;
  margin:0;border:0;cursor:pointer;background:#000;overflow:hidden;
  aspect-ratio:16/9;border-radius:2px;
  font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.podcast-thumb{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out-expo,cubic-bezier(.19,1,.22,1)),
             opacity .3s ease}
.podcast-video:hover .podcast-thumb{transform:scale(1.04);opacity:.92}

.podcast-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;display:grid;place-items:center;color:var(--gold);
  opacity:.88;pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  transition:opacity .2s ease, transform .25s ease}
.podcast-play svg{display:block;width:100%;height:100%}
.podcast-video:hover .podcast-play,
.podcast-video:focus-visible .podcast-play{opacity:1;
  transform:translate(-50%,-50%) scale(1.06)}
.podcast-video:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.podcast-duration{position:absolute;right:10px;bottom:10px;
  padding:4px 8px;border-radius:2px;
  background:rgba(14,13,11,.82);color:var(--ink);
  font-size:10px;letter-spacing:.04em;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  pointer-events:none}

.podcast-title{font-family:var(--serif);font-weight:300;
  font-size:22px;line-height:1.25;letter-spacing:-0.015em;
  margin:6px 0 0;color:var(--ink)}
.podcast-guest{margin:0;color:var(--ink-3);letter-spacing:.08em}

.podcast-cta-wrap{display:flex;justify-content:center;
  padding-top:16px;border-top:1px solid var(--rule)}
.podcast-cta{margin-top:32px}

.podcast-video-iframe{display:block;width:100%;aspect-ratio:16/9;
  border:0;background:#000;border-radius:2px}


/* ── 06 — SERVIÇOS ─────────────────────────────────────────────────────── */

.servicos{padding:var(--pad);border-bottom:1px solid var(--rule)}
.servicos-h2{margin:0 0 56px}
.servicos-gold{color:var(--gold)}
.servicos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.servico-card{padding:var(--gutter) var(--gutter) var(--gutter) 0;
  border-top:2px solid var(--ink);
  cursor:pointer;min-height:320px;color:inherit;text-decoration:none;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease, border-color .2s ease}
.servico-card:hover{transform:translateY(-2px);border-top-color:var(--gold)}
.servico-card:hover .servico-arrow{color:var(--gold);transform:translateX(4px)}
.servico-card .servico-arrow{transition:transform .2s ease, color .2s ease}
.servicos-grid .servico-card:not(:last-child){border-right:1px solid var(--rule)}
.servicos-grid .servico-card:not(:first-child){padding-left:var(--gutter)}
.servico-card-meta{display:flex;justify-content:space-between;align-items:baseline}
.servico-code{color:var(--gold)}
.servico-time{color:var(--ink-3)}
.servico-title{font-size:48px;margin:20px 0 12px;letter-spacing:-0.025em;
  line-height:1;font-weight:300}
.servico-desc{font-size:14px;color:var(--ink-2);line-height:1.65;
  font-weight:300;margin:0}
.servico-card-bot{margin-top:32px;padding-top:18px;border-top:1px dotted var(--rule);
  display:flex;justify-content:space-between;align-items:center}
.servico-price{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink)}
.servico-arrow{color:var(--ink)}


/* ── 06 — PRODUTOS TEASER ──────────────────────────────────────────────── */

.produtos{padding:120px var(--pad) var(--pad);
  border-bottom:1px solid var(--rule);background:var(--cream-2)}
.produtos-gold{color:var(--gold)}

/* Layout editorial: 3 colunas — contexto / display / info */
.produtos-grid{display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:72px;align-items:center}

/* ── Coluna esquerda: contexto da seção (estático) ──────────────── */
.produtos-context{display:flex;flex-direction:column;align-items:flex-start}
.produtos-num{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(72px,9vw,140px);line-height:.9;
  color:var(--gold);letter-spacing:-.03em;
  margin:0 0 16px}
.produtos-eyebrow{font-family:var(--mono);font-size:10px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:24px}
.produtos-h2{margin:0 0 28px;font-size:clamp(40px,4.5vw,64px);
  line-height:1}
.produtos-lede{font-size:14px;line-height:1.7;color:var(--ink-2);
  margin:0;font-weight:300;max-width:34ch}

/* ── Coluna centro: foto destaque + tira de thumbs ──────────────── */
.produtos-display{display:flex;flex-direction:column;
  align-items:center;gap:28px}

.produtos-featured-photo{aspect-ratio:3/4;height:540px;width:auto;
  max-width:100%;
  position:relative;overflow:hidden;margin:0}
.produtos-featured-photo picture{position:absolute;inset:0;display:block}
.produtos-featured-photo img{width:100%;height:100%;object-fit:contain;
  display:block;transition:opacity 300ms ease-out}
.produtos-featured-photo.swapping img{opacity:0}

.produtos-thumbs{display:flex;gap:10px;justify-content:center;
  margin:0;padding:0;flex-wrap:nowrap}
.produto-thumb{width:72px;height:72px;background:transparent;
  border:1px solid var(--rule);padding:0;cursor:pointer;
  position:relative;overflow:hidden;font:inherit;color:inherit;
  opacity:.5;transition:opacity .25s ease-out}
.produto-thumb picture{position:absolute;inset:0;display:block}
.produto-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.produto-thumb:hover{opacity:.85}
.produto-thumb.active{opacity:1;outline:1px solid rgba(212,175,99,.55);
  outline-offset:-1px}
.produto-thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.thumb-num{position:absolute;bottom:4px;right:5px;
  font-family:var(--mono);font-size:8px;letter-spacing:.12em;
  color:var(--ink);background:rgba(0,0,0,.6);padding:1px 5px;
  z-index:2;pointer-events:none}

/* ── Coluna direita: info do produto ativo (crossfade no swap) ──── */
.produtos-info{display:flex;flex-direction:column;align-items:flex-start;
  transition:opacity 300ms ease-out}
.produtos-info.swapping{opacity:0}

.produto-codigo{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 20px}
.produto-nome{font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,4.5vw,64px);line-height:1;letter-spacing:-.02em;
  color:var(--ink);margin:0 0 16px}
.produto-preco{font-family:var(--mono);font-size:15px;
  color:var(--gold);letter-spacing:.1em;font-weight:500;margin:0 0 28px}
.produto-descricao{font-size:14px;line-height:1.7;color:var(--ink-2);
  margin:0 0 36px;font-weight:300;max-width:32ch}
.produto-cta{display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border:1px solid var(--ink);
  color:var(--ink);background:transparent;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;transition:background .2s, color .2s}
.produto-cta:hover{background:var(--ink);color:var(--cream)}


/* ── 07 — FAQ ──────────────────────────────────────────────────────────── */

.faq{padding:var(--pad);border-bottom:1px solid var(--rule)}
.faq-grid{display:grid;grid-template-columns:1fr 1.6fr;
  gap:calc(var(--gutter) * 2);align-items:start}
.faq-sidebar{position:sticky;top:100px}
.faq-h2{margin:0;font-size:clamp(40px, 5vw, 72px)}
.faq-gold{color:var(--gold)}
.faq-lede{font-size:14px;color:var(--ink-2);line-height:1.7;
  margin-top:18px;max-width:360px;font-weight:300}
.faq-cta{margin-top:24px}
.faq-q{display:flex;gap:18px;align-items:baseline;flex:1;min-width:0}
.faq-q-num{color:var(--gold);flex-shrink:0}
.faq-q-text{font-family:var(--serif);font-weight:400;font-size:24px;
  letter-spacing:-0.015em}
.plus{width:36px;height:36px;border:1px solid var(--rule);
  display:grid;place-items:center;flex-shrink:0;
  font-family:var(--mono);font-size:14px;
  transition:transform .3s, background .25s, color .25s;color:var(--ink)}
.faq-a{font-family:var(--sans);font-size:14px;line-height:1.7;
  color:var(--ink-2);margin:16px 0 0 36px;max-width:640px;font-weight:300}


/* ── 08 — LOCALIZAÇÃO ──────────────────────────────────────────────────── */

.localizacao{padding:var(--pad);border-bottom:1px solid var(--rule)}
.loc-grid{display:grid;grid-template-columns:1fr 1.4fr;
  gap:var(--gutter);align-items:stretch}
.loc-h2{margin:0;font-size:clamp(40px, 5vw, 72px)}
.loc-gold{color:var(--gold)}
.loc-info{margin-top:32px;padding:24px 28px;background:var(--cream-2);
  border-left:3px solid var(--gold)}
.loc-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.loc-map{min-height:520px;width:100%;border:0;display:block;
  background:var(--cream-2)}


/* ── CTA FINAL ─────────────────────────────────────────────────────────── */

/* CTA Final intentionally inverts the page — dark island under a photo
   overlay. Hardcode literals (not palette vars) so dark/cream toggle
   doesn't break legibility on the photo background. */
.cta-final{padding:calc(var(--pad) * 1.6) var(--pad);text-align:center;
  background:#0a0907;color:#f3eee2}
.cta-final-kicker{color:var(--gold-2);letter-spacing:.42em;margin-bottom:32px}
.cta-final-h2{font-size:clamp(80px, 14vw, 220px);margin:0;color:#f3eee2;
  font-family:var(--serif);font-weight:300;letter-spacing:-0.035em;line-height:.92}
.cta-final-h2 .f-display-it{font-style:italic}
.cta-final-script{color:var(--gold-2);font-size:1.05em;display:inline-block;
  transform:translateY(0.04em) rotate(-2deg)}
.cta-final-p{font-size:16px;color:#f3eee2;line-height:1.65;
  margin:36px auto 0;max-width:540px;font-weight:300}
.cta-final-actions{display:flex;justify-content:center;gap:14px;
  margin-top:40px;flex-wrap:wrap}
/* Ghost button on photo bg — light text + visible border + slight
   smoked-glass effect for legibility against varied parts of the image. */
.cta-final-ghost{color:#f3eee2;
  background:rgba(0,0,0,.35);
  border:1px solid #f3eee2;
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px)}
.cta-final-ghost:hover{background:rgba(243,238,226,.1);color:#f3eee2}
.cta-final-note{color:rgba(243,238,226,.5);margin-top:24px}


/* ── FOOTER ────────────────────────────────────────────────────────────── */

.footer{background:#0a0907;color:var(--cream);padding:70px var(--pad) 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px}
.footer-brand-row{display:flex;align-items:center;gap:14px}
.footer-brand-name{font-family:var(--serif);font-style:italic;
  font-size:22px;color:var(--gold-2)}
.footer-brand-tag{color:rgba(243,238,226,.55);margin-top:4px}
.footer-brand-p{font-size:13px;color:rgba(243,238,226,.6);line-height:1.7;
  margin-top:22px;max-width:320px;font-weight:300}
.footer-col-title{color:var(--gold-2);margin-bottom:16px}
.footer-col-line{font-size:13px;color:rgba(243,238,226,.75);line-height:2;display:block}
.footer-link{transition:color .2s}
.footer-link:hover{color:var(--gold-2)}
.footer-bottom{margin-top:56px;padding-top:22px;
  border-top:1px solid rgba(243,238,226,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-bottom .f-mono-sm{color:rgba(243,238,226,.45)}


/* ─────────────────────────────────────────────────────────────────────────
   ANIMATION SYSTEM — soft-editorial cadence
   Easing: cubic-bezier(.22, 1, .36, 1) (out expo).
   Performance: only transform / opacity / clip-path / stroke-dashoffset.
   Reduced-motion: hard-disabled at the bottom of this file.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
}

/* ── Keyframes ─────────────────────────────────────────────────────────── */

@keyframes a-fade-in       { from{opacity:0} to{opacity:1} }
@keyframes a-fade-up       { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes a-fade-up-lg    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
@keyframes a-scale-in      { from{opacity:0;transform:scale(.97)} to{opacity:1;transform:none} }
@keyframes a-word-clip     { from{clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0)}
                             to  {clip-path:inset(0);          -webkit-clip-path:inset(0)} }
@keyframes a-h-clip        { from{clip-path:inset(0 100% 0 0); -webkit-clip-path:inset(0 100% 0 0)}
                             to  {clip-path:inset(0);          -webkit-clip-path:inset(0)} }
@keyframes a-draw-stroke   { from{stroke-dashoffset:var(--len, 220)} to{stroke-dashoffset:0} }
@keyframes a-cursor-blink  { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes a-leader-grow   { from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes a-counter-land  { 0%{transform:scale(1)} 50%{transform:scale(1.02)} 100%{transform:scale(1)} }
@keyframes a-gold-glow     { 0%,100%{text-shadow:0 0 0 transparent}
                             50%    {text-shadow:0 0 24px rgba(212,175,99,.25)} }
@keyframes a-ken-burns     { from{transform:scale(1)} to{transform:scale(1.06)} }
@keyframes a-wpp-pulse     { 0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 0 rgba(37,211,102,0)}
                             50%    {transform:scale(1.04);box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 12px rgba(37,211,102,.15)} }


/* ── 1.1 — HERO entrada editorial ───────────────────────────────────────── */

/* Cadence:
   ledger (0/200/400) → typography clip (700/1100/1300/1500/1700)
   → portrait scale-in (1900) → lede + CTA (2200/2350).
   fill-mode:both keeps from-state visible during the delay. */

.hero-fade           { animation: a-fade-in 700ms var(--ease-out-expo) both }
.hero-fade-1         { animation-delay: 0ms }
.hero-fade-2         { animation-delay: 200ms }
.hero-fade-3         { animation-delay: 400ms }

.hero-word           { display:inline-block;
                       animation: a-word-clip 800ms var(--ease-out-expo) both;
                       padding-bottom:.06em; /* avoid descender clipping */ }
.hero-word-1         { animation-delay: 700ms }
.hero-word-2         { animation:
                        a-word-clip 800ms var(--ease-out-expo) 1100ms both,
                        a-gold-glow 7s ease-in-out 2800ms infinite }
.hero-word-3         { animation-delay: 1300ms }
.hero-word-4         { animation:
                        a-word-clip 800ms var(--ease-out-expo) 1500ms both,
                        a-gold-glow 7s ease-in-out 3000ms infinite }
.hero-word-5         { animation-delay: 1700ms }

.hero-figure-anim    { animation: a-scale-in 1100ms var(--ease-out-expo) 1900ms both }
.hero-fade-foot      { animation: a-fade-up 800ms var(--ease-out-expo) 2200ms both }
.hero-fade-cta       { animation: a-fade-up 800ms var(--ease-out-expo) 2350ms both }


/* ── 1.2 — MANIFESTO — quotes + cursor ──────────────────────────────────── */

.manifesto-inner{position:relative}
.manifesto-quote{position:absolute;font-family:var(--serif);font-weight:300;
  font-size:240px;line-height:1;color:var(--gold);opacity:0;
  pointer-events:none;user-select:none}
.manifesto-quote-l{top:-80px;left:-20px}
.manifesto-quote-r{bottom:-160px;right:-20px}
.reveal.in .manifesto-quote{animation:a-fade-in 1200ms var(--ease-out-expo) both;
  opacity:.18}
.reveal.in .manifesto-quote-r{animation-delay:200ms}

.manifesto-clip{display:inline-block;
  clip-path:inset(100% 0 0 0);-webkit-clip-path:inset(100% 0 0 0);
  padding:0 .04em .12em}
.reveal.in .manifesto-clip{animation:a-word-clip 1500ms var(--ease-out-expo) 400ms both}
.reveal.in .manifesto-clip:last-of-type{animation-delay:700ms}

.manifesto-cursor{display:inline-block;color:var(--gold);font-weight:200;
  margin-left:4px;opacity:0}
.reveal.in .manifesto-cursor{
  animation: a-cursor-blink 800ms steps(2,end) 2200ms 4,
             a-fade-in 400ms ease-out 5400ms reverse forwards }
.manifesto-p{opacity:0}
.reveal.in .manifesto-p{animation:a-fade-in 800ms var(--ease-out-expo) 5800ms both}


/* ── 1.3 — Counter aprimorado ───────────────────────────────────────────── */

[data-counter]{display:inline-block;transition:filter .4s ease-out, opacity .4s ease-out}
[data-counter].is-counting{filter:blur(2px);opacity:.7}
[data-counter].is-landed{animation:a-counter-land 200ms var(--ease-out-expo)}
.stat-suffix{display:inline-block;opacity:0;transform:translateX(4px);
  transition:opacity .4s ease-out, transform .4s var(--ease-out-expo)}
.stat-suffix.is-in{opacity:1;transform:none}


/* ── 1.4 — MÉTODO — leader desenhando ───────────────────────────────────── */

/* Initial states. Layout/typography of .spec/.k/.leader/.v come from
   the existing global rules near the top of the file — only timing here. */
.metodo-row .metodo-numeral,
.metodo-row .metodo-row-title,
.metodo-row .metodo-row-desc,
.metodo-row .spec{opacity:0;transition:opacity .6s var(--ease-out-expo),
                                   transform .8s var(--ease-out-expo)}
.metodo-row .metodo-numeral{transform:translateY(20px)}
.metodo-row .spec .leader{transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-out-expo)}
.metodo-row .spec .v{opacity:0;transition:opacity .6s ease-out}

/* Existing .reveal already triggers entry; chain sub-element timings off it */
.metodo-row.reveal.in .metodo-numeral{opacity:1;transform:none;transition-delay:0ms}
.metodo-row.reveal.in .metodo-row-title{opacity:1;transition-delay:200ms}
.metodo-row.reveal.in .metodo-row-desc{opacity:1;transition-delay:400ms}
.metodo-row.reveal.in .spec:nth-child(1){opacity:1;transition-delay:700ms}
.metodo-row.reveal.in .spec:nth-child(2){opacity:1;transition-delay:800ms}
.metodo-row.reveal.in .spec:nth-child(3){opacity:1;transition-delay:900ms}
.metodo-row.reveal.in .spec:nth-child(1) .leader{transform:scaleX(1);transition-delay:850ms}
.metodo-row.reveal.in .spec:nth-child(2) .leader{transform:scaleX(1);transition-delay:950ms}
.metodo-row.reveal.in .spec:nth-child(3) .leader{transform:scaleX(1);transition-delay:1050ms}
.metodo-row.reveal.in .spec:nth-child(1) .v{opacity:1;transition-delay:1100ms}
.metodo-row.reveal.in .spec:nth-child(2) .v{opacity:1;transition-delay:1200ms}
.metodo-row.reveal.in .spec:nth-child(3) .v{opacity:1;transition-delay:1300ms}


/* ── MÉTODO — vocabulário editorial estendido ───────────────────────────
   1) Stroke-draw no divisor da seção (linha .section-num hr)
   2) Word stagger no h2
   3) Parallax sutil nos numerais (wrapper .metodo-numeral-px via JS)
   4) Ato ativo no scroll (.is-current dim/lift no numeral + border gold) */

/* (1) Section divider — desenha da esquerda pra direita ao entrar */
.metodo .section-num hr{transform:scaleX(0);transform-origin:left center;
  transition:transform .9s var(--ease-out-expo) .15s}
.metodo .section-num.is-in hr{transform:scaleX(1)}

/* (2) H2 word stagger — cada .word usa --wd inline pro delay */
.metodo-h2 .word{display:inline-block;opacity:0;transform:translateY(0.55em);
  transition:opacity .8s ease var(--wd,0ms),
             transform .9s var(--ease-out-expo) var(--wd,0ms)}
.metodo-h2.is-in .word{opacity:1;transform:none}

/* (3) Parallax — wrapper injetado por JS envolvendo .metodo-numeral.
   .metodo-numeral mantém sua transição de entrada própria; o wrapper
   só carrega o translate de scroll, sem transição (atualizado por RAF). */
.metodo-numeral-px{display:block;will-change:transform}

/* (4) Ato ativo no scroll — dim nos numerais + gold no border-bottom */
.metodo-row{position:relative;transition:border-color .5s ease}
.metodo-row.is-current{border-bottom-color:var(--gold)}
.metodo-list.is-active .metodo-row.reveal.in .metodo-numeral{opacity:.32}
.metodo-list.is-active .metodo-row.reveal.in.is-current .metodo-numeral{opacity:1}


/* ── 1.5 — BASTIDORES — sub-stagger dentro do reveal ────────────────────── */

.trabalho-card .trabalho-card-img,
.trabalho-card .trabalho-card-tag,
.trabalho-card .trabalho-card-text{opacity:0;
  transition:opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo)}
.trabalho-card .trabalho-card-img{transform:scale(.98)}
.trabalho-card.reveal.in .trabalho-card-img{opacity:1;transform:none}
.trabalho-card.reveal.in .trabalho-card-tag{opacity:1;transition-duration:.6s;transition-delay:.2s}
.trabalho-card.reveal.in .trabalho-card-text{opacity:1;transition-duration:.6s;transition-delay:.4s}


/* ── 1.6 — LINHA — clip-path horizontal entry ───────────────────────────── */

.produtos-hero .ph{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--ease-out-expo),
            -webkit-clip-path 1.2s var(--ease-out-expo)}
.produtos-hero.reveal.in .ph{clip-path:inset(0);-webkit-clip-path:inset(0)}


/* ── 1.7 — Galeria Estúdio — Ken Burns sutil ────────────────────────────── */

.ad-hero img{will-change:transform;
  animation:a-ken-burns 14s ease-in-out infinite alternate}
.ad-hero.kb-reset img{animation:none}


/* ── 2.1 — Hero gold-word glow ──────────────────────────────────────────── */

/* "imagem" (.hero-word-2) and "sempre" (.hero-word-4) glows are stacked
   into their own clip animations above (CSS shorthand, comma list).
   This block is intentionally empty — kept as a marker. */


/* ── 2.2 — Segundo ticker (contraponto) ─────────────────────────────────── */

.ticker-secondary{border-top:0;background:transparent;opacity:.4}
.ticker-secondary .ticker-track{animation-duration:78s;animation-direction:reverse;
  font-size:9px;letter-spacing:.18em;padding:8px 0;gap:32px}
.ticker-secondary .dot{color:var(--ink-3)}


/* ── 2.3 — Custom cursor "VER" ──────────────────────────────────────────── */

.cursor-ver{position:fixed;top:0;left:0;width:56px;height:56px;border-radius:50%;
  background:rgba(243,238,226,.95);border:1px solid var(--cream-3);color:var(--ink);
  display:grid;place-items:center;
  pointer-events:none;z-index:60;
  opacity:0;transform:translate3d(-50%,-50%,0) scale(.85);
  transition:opacity .2s ease-out, transform .1s ease-out, scale .2s ease-out;
  mix-blend-mode:difference}
.cursor-ver.is-visible{opacity:1;transform:translate3d(var(--cx,0),var(--cy,0),0) scale(1)}
.cursor-ver-label{font-family:var(--mono);font-size:10px;letter-spacing:.18em}
.ad-hero,.ad-thumb{cursor:none}
@media (hover:none){
  .cursor-ver{display:none}
  .ad-hero,.ad-thumb{cursor:pointer}
}


/* ── 2.4 — (removido) Tilt do retrato ───────────────────────────────────── */
/* Removido por decisão editorial: foto impressa não acompanha o mouse. */


/* ── 2.5 — WhatsApp pulse ───────────────────────────────────────────────── */
/* Pulse desabilitado pra não destoar da sobriedade editorial. */


/* ── 4.1 — Script underline desenhando ──────────────────────────────────── */

.u-script svg path{stroke-dasharray:220}
.u-script:not(.in-view) svg path{stroke-dashoffset:220}
.u-script.in-view svg path{stroke-dashoffset:0;
  transition:stroke-dashoffset 1200ms var(--ease-out-expo)}
/* Hero não usa mais .u-script (decisão editorial: itálico de Fraunces
   já carrega o sotaque sozinho). */


/* ── 4.3 — Service card hover line + price slide ────────────────────────── */

.servico-card{position:relative;overflow:hidden}
.servico-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--gold);transform:scaleY(0);transform-origin:top;
  transition:transform .3s var(--ease-out-expo)}
.servico-card:hover::before{transform:scaleY(1)}
.servico-price{transition:transform .3s var(--ease-out-expo)}
.servico-card:hover .servico-price{transform:translateX(6px)}


/* ── 4.4 — FAQ leader estendendo ────────────────────────────────────────── */

details summary{position:relative}
details summary::after{content:"";position:absolute;left:36px;right:0;bottom:-8px;
  height:1px;background-image:linear-gradient(to right,
   var(--ink-3) 0,var(--ink-3) 2px,transparent 2px,transparent 5px);
  background-size:5px 1px;background-repeat:repeat-x;
  transform:scaleX(0);transform-origin:left center;
  transition:transform .3s var(--ease-out-expo);opacity:.4}
details[open] summary::after{transform:scaleX(1);
  transition:transform .5s var(--ease-out-expo)}
.faq-a{overflow:hidden}


/* ── Reduced motion: hard kill switch ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  .hero-fade,.hero-figure-anim,.hero-word,
  .manifesto-clip,.manifesto-cursor,.manifesto-p,.manifesto-quote,
  .trabalho-card .trabalho-card-img,
  .trabalho-card .trabalho-card-tag,
  .trabalho-card .trabalho-card-text,
  .produtos-hero .ph,
  .metodo-row .metodo-numeral,
  .metodo-row .metodo-row-title,
  .metodo-row .metodo-row-desc,
  .metodo-row .spec,
  .metodo-row .spec .leader,
  .metodo-row .spec .v{
    opacity:1 !important;transform:none !important;
    clip-path:none !important;-webkit-clip-path:none !important
  }
  .u-script svg path{stroke-dashoffset:0 !important}
  .stat-suffix{opacity:1 !important;transform:none !important}
  .manifesto-quote{opacity:.18 !important}
  .ad-hero,.ad-thumb{cursor:pointer}
  .cursor-ver{display:none}
}


/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — tablet (641-1024px) and mobile (≤640px)
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px){
  :root{ --pad: 56px; --gutter: 28px; }

  .nav-grid{grid-template-columns:auto 1fr auto;gap:18px}
  .nav-menu{display:none}

  /* HERO tablet — mesma lógica full-bleed; só afina posição da foto. */
  .hero{padding:14px var(--pad) 22px;min-height:calc(100svh - 70px);max-height:none}
  .hero-meta{grid-template-columns:1fr 1fr;gap:8px 18px}
  .hero-meta-c{display:none}
  .hero-photo img{object-position:62% center}
  .hero::after{
    background:linear-gradient(90deg,
      var(--cream) 0%,
      color-mix(in srgb, var(--cream) 92%, transparent) 14%,
      color-mix(in srgb, var(--cream) 62%, transparent) 36%,
      color-mix(in srgb, var(--cream) 22%, transparent) 58%,
      transparent 90%);
  }
  .hero-stage{padding-top:20px}
  .hero-headline{font-size:clamp(48px, 8.4vw, 110px);max-width:76vw}
  .hero-footer{grid-template-columns:1fr;gap:22px;justify-items:start;
    width:calc(60vw - var(--pad) + 16px)}

  .sobre-grid{grid-template-columns:1fr;gap:40px}
  .sobre-stats .stat-n{font-size:48px}

  .ad-header{flex-direction:column;align-items:flex-start}
  .ad-meta{text-align:left}
  .ba{height:480px}
  .ad-thumbs{grid-template-columns:repeat(4,1fr)}

  .metodo-header{grid-template-columns:1fr;gap:18px}
  .metodo-lede{justify-self:start}
  .metodo-row{grid-template-columns:80px 1fr;
    grid-template-areas:"num title" "num desc" "specs specs";
    gap:18px;padding:32px 0}
  .metodo-numeral{grid-area:num;font-size:72px}
  .metodo-row-title{grid-area:title;font-size:36px}
  .metodo-row-desc{grid-area:desc;padding-top:0}
  .metodo-row-specs{grid-area:specs;padding-top:8px}

  .dep-featured{grid-template-columns:1fr;gap:32px}
  .dep-quote{font-size:42px}
  .dep-grid{grid-template-columns:repeat(2,1fr)}

  .podcast-header{grid-template-columns:1fr;gap:18px}
  .podcast-lede{justify-self:start}
  .podcast-grid{grid-template-columns:1fr;gap:36px}
  .podcast-title{font-size:24px}

  .servicos-grid{grid-template-columns:1fr}
  .servicos-grid .servico-card{padding:var(--gutter) 0;
    border-right:none !important;padding-left:0 !important;min-height:0}

  /* TABLET — coluna esquerda full-width acima; centro+direita lado a lado */
  .produtos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:48px;row-gap:64px}
  .produtos-context{grid-column:1 / -1}
  .produtos-num{font-size:clamp(64px,12vw,108px);margin-bottom:12px}
  .produtos-h2{font-size:clamp(36px,5vw,56px);margin-bottom:20px}
  .produtos-featured-photo{height:460px}
  .produto-nome{font-size:clamp(36px,5vw,56px)}

  .faq-grid{grid-template-columns:1fr;gap:32px}
  .faq-sidebar{position:static}
  .faq-q-text{font-size:20px}

  .loc-grid{grid-template-columns:1fr;gap:32px}
  .loc-map{min-height:320px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1}
}

@media (max-width: 640px){
  :root{ --pad: 24px; --gutter: 18px; }

  body{font-size:14px}

  /* NAV — drop city on small screens */
  .nav-grid{padding:14px var(--pad);gap:12px}
  .nav-city{display:none}
  .nav-brand-name{font-size:15px}
  .nav-cta{padding:11px 14px;font-size:9px;letter-spacing:.18em}

  /* HERO mobile — foto vira AMBIENTAÇÃO de fundo, tipografia centralizada por cima */
  .hero{padding:22px var(--pad) 28px;gap:22px;min-height:calc(100svh - 70px);max-height:none}
  .hero-meta{grid-template-columns:1fr 1fr;gap:6px 14px}
  .hero-photo{
    top:0;right:0;bottom:0;left:0;
    width:100%;
    height:100%;
    opacity:.42;
  }
  .hero-photo img{object-fit:cover;object-position:70% 22%}
  .hero::after{
    background:
      linear-gradient(to bottom,
        color-mix(in srgb, var(--cream) 50%, transparent) 0%,
        color-mix(in srgb, var(--cream) 35%, transparent) 38%,
        color-mix(in srgb, var(--cream) 88%, transparent) 100%);
  }
  .hero-stage{padding-top:6px}
  .hero-headline{font-size:clamp(46px, 13.5vw, 78px);letter-spacing:-0.035em;max-width:100%}
  .hero-footer{grid-template-columns:1fr;gap:18px;width:100%}
  .hero-cta{width:100%;justify-content:center}
  .btn{padding:13px 18px;font-size:9.5px}

  /* TICKER smaller gap */
  .ticker-track{gap:28px;font-size:10px}

  /* SOBRE stats stack */
  .sobre-stats{grid-template-columns:1fr;gap:18px}
  .sobre-stats .stat{padding:14px 0;border-right:none !important;
    border-bottom:1px solid var(--rule)}
  .sobre-stats .stat:last-child{border-bottom:none}
  .stat-n{font-size:42px}

  /* MANIFESTO */
  .manifesto{padding:calc(var(--pad) * 2) var(--pad)}
  .manifesto-p{margin-top:32px}

  /* ANTES & DEPOIS */
  .ba{height:380px}
  /* Thumbs become horizontal scroll on phones */
  .ad-thumbs{display:flex;gap:10px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding-bottom:6px;grid-template-columns:none}
  .ad-thumbs::-webkit-scrollbar{display:none}
  .ad-thumbs{scrollbar-width:none}
  .ad-thumb{flex:0 0 calc(33.333% - 7px);scroll-snap-align:start}
  .ad-footer{flex-direction:column;align-items:flex-start;gap:12px}

  /* MÉTODO */
  .metodo-row{grid-template-columns:1fr;
    grid-template-areas:"num" "title" "desc" "specs";
    gap:14px;padding:28px 0}
  .metodo-numeral{font-size:56px;margin-top:0}
  .metodo-row-title{font-size:30px}

  /* DEPOIMENTOS */
  .dep-quote{font-size:32px}
  .dep-featured-text{padding-top:0}
  .dep-grid{grid-template-columns:1fr}

  /* PODCAST */
  .podcast-grid{gap:28px}
  .podcast-title{font-size:20px}
  .podcast-cta{width:100%;justify-content:center}

  /* SERVIÇOS — keep stacked from tablet */
  .servico-title{font-size:38px}

  /* PRODUTOS MOBILE — tudo empilha; thumbs scroll horizontal se precisar */
  .produtos{padding:96px 24px 64px}
  .produtos-grid{grid-template-columns:1fr;gap:40px;row-gap:40px}
  .produtos-context{grid-column:1 / -1}
  .produtos-num{font-size:clamp(56px,18vw,88px);margin-bottom:8px}
  .produtos-eyebrow{margin-bottom:18px}
  .produtos-h2{font-size:clamp(34px,9vw,48px);margin-bottom:20px}
  .produtos-lede{max-width:none}
  .produtos-display{gap:20px}
  .produtos-featured-photo{height:380px}
  .produtos-thumbs{overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;justify-content:flex-start;
    padding:0 4px 6px;width:100%;gap:10px}
  .produtos-thumbs::-webkit-scrollbar{display:none}
  .produtos-thumbs{scrollbar-width:none}
  .produto-thumb{width:64px;height:64px;flex:0 0 64px;scroll-snap-align:start}
  .produtos-info{align-items:center;text-align:center}
  .produto-descricao{margin-left:auto;margin-right:auto;max-width:none}
  .produto-nome{font-size:clamp(36px,9vw,48px)}

  /* FAQ */
  .faq-q-text{font-size:17px}
  .faq-q-num{font-size:9px}
  .plus{width:30px;height:30px}
  details summary{gap:14px}
  .faq-a{margin-left:0}

  /* LOCALIZAÇÃO */
  .loc-info{padding:18px 20px}
  .loc-actions .btn{flex:1;justify-content:center}

  /* CTA FINAL */
  .cta-final{padding:calc(var(--pad) * 2.4) var(--pad)}
  .cta-final-actions{flex-direction:column}
  .cta-final-actions .btn{width:100%;justify-content:center}

  /* FOOTER */
  .footer{padding:48px var(--pad) 24px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-brand{grid-column:auto}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px}

  /* WPP smaller and out of the way */
  .wpp{right:16px;bottom:16px;width:54px;height:54px;font-size:10px}

  /* SECTION-NUM tighter */
  .section-num{gap:12px;margin-bottom:24px}
  .section-num .n{font-size:38px}
}

/* ─────────────────────────────────────────────────────────────────────────
   Real images — overrides for the .ph placeholder when a photo is inside.
   Keeps the .ph wrapper/aspect-ratio/captions, suppresses the gradient.
   ───────────────────────────────────────────────────────────────────────── */

.ph picture{display:contents}
.ph-photo{background:transparent}
.ph-photo::before,.ph-photo::after{display:none}
.ph-photo .ph-label{display:none}
.ph-photo > img,
.ph-photo > picture > img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;display:block;
}


/* ── Logo (nav + footer) ───────────────────────────────────────────────── */

.nav-logo{height:36px;width:auto;display:block}
.footer-logo{height:48px;width:auto;display:block}


/* ── 02 — atelier hero photo (replaces the before/after slider) ────────── */

.ad-hero{margin-bottom:24px;width:100%}


/* ── 04 — O Trabalho (4-photo method grid) ─────────────────────────────── */

.trabalho-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trabalho-card{display:flex;flex-direction:column;gap:14px}
.trabalho-card-img{flex-shrink:0}
.trabalho-card-tag{color:var(--gold);margin-top:4px}
.trabalho-card-text{font-family:var(--sans);font-size:14px;line-height:1.7;
  color:var(--ink-2);margin:0;font-weight:300}


/* ── 06 — produtos hero photo (above the existing 2-col grid) ──────────── */

.produtos-hero{margin-bottom:56px}
/* Crop só do hero de produtos (IMG_7496): ajuste % até o enquadramento ficar certo. */
.produtos-hero .ph-photo picture img{
  object-position:40% 10%;
}


/* ── CTA Final — background photo with dark gradient for legibility ───── */

.cta-final{position:relative;overflow:hidden}
.cta-final-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cta-final-bg picture{display:contents}
.cta-final-bg img{position:absolute;object-position: 30% 30%;inset:0;width:100%;height:100%;
  object-fit:cover;filter:saturate(.85)}
.cta-final-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,
    rgba(0,0,0,.85) 0%,
    rgba(0,0,0,.55) 60%,
    rgba(0,0,0,.85) 100%);
  z-index:1}
.cta-final-content{position:relative;z-index:2}

/* Override the lede opacity — readable over the dark overlay. */
.cta-final-p{color:rgba(243,238,226,1)}


/* ── Responsive — new components ───────────────────────────────────────── */

@media (max-width: 1024px){
  .trabalho-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .ad-hero{margin-bottom:18px}
  .produtos-hero{margin-bottom:36px}
}

@media (max-width: 640px){
  .trabalho-grid{grid-template-columns:1fr;gap:28px}
  .nav-logo{height:28px}
  .footer-logo{height:38px}
  .produtos-hero{margin-bottom:28px}
  .cta-final-bg img{opacity:.40}
}


/* Reduce motion — global kill switch (animations + transitions everywhere).
   Initial-state overrides for the new animation system live near line 945. */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
  *{animation:none !important;transition:none !important}
}