/* ============================================================
   sections.css · estilos das seções do site v2
   ============================================================ */

/* ============ UTILITY .cream (seção de respiro) ============ */
.cream { background: var(--cream); color: var(--txt-on-cream); }
.cream h1, .cream h2, .cream h3, .cream h4 { color: var(--txt-on-cream); }
.cream .lead { color: var(--txt-cream-mut); }
.cream .muted { color: var(--txt-cream-mut); }
.cream .faint { color: rgba(74,53,32,.6); }
.cream .h-soft, .cream .ital { color: var(--gold-deep); }
.cream .eyebrow { color: var(--gold-deep); }

/* Cards */
.cream .card { background: #fff; border-color: var(--hair-cream); box-shadow: 0 24px 60px -32px rgba(122,86,53,.4); }
.cream .card p { color: var(--txt-cream-mut); }
.cream .card .ico { background: rgba(156,114,76,.12); border-color: rgba(156,114,76,.3); color: var(--gold-deep); }
.cream .card:hover { border-color: var(--gold); }
.cream .tag { color: var(--gold-deep); }

/* Diferenciais (caso fique creme) */
.cream .diff-card { background: linear-gradient(160deg, #fff, var(--cream-2)); border-color: var(--hair-cream); }
.cream .diff-card h3 { color: var(--txt-on-cream); }
.cream .diff-card p { color: var(--txt-cream-mut); }
.cream .diff-card .ico { color: var(--gold-deep); background: linear-gradient(160deg, rgba(156,114,76,.14), rgba(232,199,146,.04)); border-color: rgba(122,86,53,.28); }
.cream .diff-card .num { color: rgba(74,53,32,.5); }

/* Sobre */
.cream .about-shot { background: linear-gradient(160deg, #fff, var(--cream-2)); border-color: var(--hair-cream); color: var(--txt-cream-mut); }
.cream .about-meta { background: #fff; border-color: var(--hair-cream); }
.cream .about-meta .item .lbl { color: var(--txt-cream-mut); }
.cream .about-meta .item .val {
  color: var(--gold-deep);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
  font-weight: 400;
}

/* Efeitos (bento) */
/* Efeitos em creme: cards com FOTO + rodapé de vidro (nome em branco) */
.cream .eff { background: var(--ink-2); border-color: var(--hair-cream); box-shadow: 0 24px 60px -32px rgba(122,86,53,.4); }
.cream .eff h3 { color: #fff; }
.cream .eff p { color: rgba(255,255,255,.82); }
.cream .eff:hover { border-color: var(--gold); }
.cream .eff:hover h3 { color: #fff; }
.cream .eff::after { display: none; }
.cream .eff .img { background: var(--ink-3); }
.cream .eff .tag { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.45); }

/* Provas sociais */
.cream .stat-num {
  color: var(--gold-deep);
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}
.cream .stat-lbl { color: var(--txt-cream-mut); }
.cream .testi { background: #fff; border-color: var(--hair-cream); box-shadow: 0 24px 60px -32px rgba(122,86,53,.4); }
.cream .testi p { color: var(--txt-on-cream); font-variation-settings: 'SOFT' 50, 'WONK' 1; }
.cream .testi .who { border-top-color: var(--hair-cream); }
.cream .testi .who b { color: var(--gold-deep); }
.cream .testi .who em { color: var(--gold-deep); }
.cream .stars { color: var(--gold-deep); }

/* Flow-policy em creme */
.cream .flow-policy { background: #fff; border-color: var(--hair-cream); }
.cream .flow-policy .pol-item p { color: var(--txt-cream-mut); }

/* FAQ */
.cream .faq-item { border-color: var(--hair-cream); }
.cream .faq-q { color: var(--txt-on-cream); }
.cream .faq-q .chev { border-color: var(--hair-cream); color: var(--gold-deep); }
.cream .faq-item[open] .chev { background: var(--gold); color: var(--ink-1); border-color: transparent; }
.cream .faq-a > div { color: var(--txt-cream-mut); }

/* Botões em cream */
.cream .btn-ghost { color: var(--txt-on-cream); border-color: rgba(122,86,53,.3); }
.cream .btn-ghost:hover { background: rgba(156,114,76,.08); border-color: var(--gold); color: var(--gold-deep); }
.cream .btn-link { color: var(--gold-deep); border-color: rgba(122,86,53,.32); }
.cream .btn-link:hover { color: var(--gold); border-color: var(--gold); }

/* ============ REELS (portfólio · carrossel de vídeos próprios) ============ */
.reels-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 3rem);
}
.reels-controls { display: flex; gap: .6rem; }
.reels-nav {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--gold-deep);
  border: 1px solid var(--gold);
  transition: background var(--t-snap), color var(--t-snap), transform var(--t-snap);
}
.reels-nav:hover { background: var(--gold); color: var(--milk); transform: translateY(-2px); }

/* carrossel: trilho com scroll-snap horizontal */
.reels-carousel { position: relative; }
.reels-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* alinha o snap com o padding do trilho pra o 1º vídeo não ficar cortado */
  scroll-padding-inline-start: clamp(1.25rem, 5vw, 4rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reels-viewport::-webkit-scrollbar { display: none; }
.reels-track {
  display: flex;
  gap: clamp(1rem, .6rem + 1vw, 1.6rem);
  padding: .4rem clamp(1.25rem, 5vw, 4rem) 1rem;
}
.reel-slide {
  flex: 0 0 auto;
  width: clamp(230px, 25vw, 300px);
  /* start (não center): o carrossel abre no PRIMEIRO vídeo, não no meio */
  scroll-snap-align: start;
}
.reel-video-wrap {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-2);
  border: 1px solid var(--hair-cream);
  box-shadow: 0 28px 70px -42px rgba(122,86,53,.45);
}
.reel-ph {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-faint);
}
.reel-video {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.reel-mute {
  position: absolute; z-index: 2;
  bottom: .7rem; right: .7rem;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(11,8,5,.55); color: var(--cream);
  border: 1px solid rgba(232,199,146,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background var(--t-snap);
}
.reel-mute:hover { background: rgba(11,8,5,.8); }
.reel-mute .ic-on { display: none; }
.reel-mute.on .ic-off { display: none; }
.reel-mute.on .ic-on { display: block; }
/* CTA "tem mais no Instagram" · slide dourado sólido */
.reel-cta-slide {
  display: flex;
  width: clamp(230px, 25vw, 300px);
}
.reel-cta-inner {
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 1.8rem;
  border-radius: var(--r-lg);
  background: var(--gold); color: var(--ink-1);
  border: 1px solid var(--gold-light);
  box-shadow: 0 28px 70px -42px rgba(122,86,53,.5);
  transition: transform var(--t-snap);
}
.reel-cta-slide:hover .reel-cta-inner { transform: translateY(-4px); }
.reel-cta-inner .tag.solid {
  display: inline-block; align-self: flex-start;
  font-family: var(--ff-mono); font-size: .66rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-1);
}
.reel-cta-inner h3 { color: var(--ink-1); font-size: 1.7rem; line-height: 1.1; }
.reel-cta-inner .btn-link { color: var(--ink-1); font-weight: 600; }

/* Work-pin em creme (Portfólio) */
.cream .work-pin .head h2 { color: var(--txt-on-cream); }
.cream .work-pin .head .count { color: var(--txt-cream-mut); }
.cream .work-pin .head .count b {
  color: var(--gold-deep);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60, 'WONK' 1;
}
.cream .work-shot {
  background: linear-gradient(160deg, #fff, var(--cream-2));
  border-color: var(--hair-cream);
  color: var(--txt-cream-mut);
  box-shadow: 0 28px 70px -36px rgba(122,86,53,.45);
}
.cream .work-shot:hover { border-color: var(--gold); box-shadow: 0 32px 80px -36px rgba(156,114,76,.5); }
.cream .work-shot::after { background: linear-gradient(180deg, transparent 60%, rgba(244,236,223,.6)); }
/* Labels do portfólio sempre visíveis em cream (sem foto real, hover não é confiável) */
.cream .work-shot .label { color: var(--gold-deep); opacity: 1; transform: none; font-weight: 500; }
.cream .work-shot.video::before {
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(232,199,146,.22), transparent 70%),
    linear-gradient(160deg, #fff, var(--cream-2));
}
.cream .work-shot.video .play-ico { background: var(--gold-deep); }
.cream .work-shot.video .play-ico svg { fill: var(--cream); }
.cream .work-shot.video:hover .play-ico { background: var(--ink-1); }
.cream .work-shot.video .vtag {
  background: rgba(255,255,255,.92);
  border-color: var(--hair-cream);
  color: var(--gold-deep);
}
.cream .work-cta { color: var(--ink-1); }
.cream .work-cta .btn-link { color: var(--ink-1); border-bottom-color: rgba(11,8,5,.45); }
/* Work-CTA menos brilhante pra não competir com o CTA final */
.cream .work-cta {
  background: linear-gradient(160deg, var(--cream-2), var(--gold-light));
  animation: none;
}


/* About-text em cream · textos legíveis */
.cream .about-text p { color: var(--txt-cream-mut); }
.cream .about-text p:first-of-type { color: var(--txt-on-cream); }

/* Hero meta · sempre escuro porque o hero é escuro, sem override */

/* Work-shot placeholders (textos pequenos) em cream */
.cream .work-shot span { color: var(--txt-cream-mut); }

/* Effects-note (texto + link) em creme */
.cream .effects-note { color: var(--txt-cream-mut); }
.cream .effects-note a { color: var(--gold-deep); border-bottom-color: rgba(122,86,53,.45); }
.cream .effects-note a:hover { color: var(--ink-1); border-bottom-color: var(--gold-deep); }

/* Muted b dentro de cream (nota dos placeholders dos depoimentos) */
.cream .muted b { color: var(--gold-deep); font-weight: 600; }

/* Flow-policy h4 em cream com peso reforçado */
.cream .flow-policy .pol-item h4 { color: var(--gold-deep); font-weight: 700; }

/* (regra do divisor cream+cream consolidada no início do arquivo) */


/* ============ HERO (split: texto esquerda + foto direita) ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: flex-end;
  padding-block: 9rem 5rem;
  overflow: hidden;
  isolation: isolate;
}
/* imagem de fundo cobrindo toda a hero */
.hero-bg {
  position: absolute; left: 0; right: 0; top: -7%; height: 114%; z-index: -2;
  display: grid; place-items: center;
  background: var(--ink-1);
  overflow: hidden;
  will-change: transform;
}
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg .hero-ph {
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--txt-faint);
}
/* "T" editorial sutil enquanto não há foto */
.hero-bg::before {
  content: 'T';
  position: absolute; right: 3vw; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 300; font-size: 40rem; line-height: 1;
  color: var(--gold-bright); opacity: .06;
  pointer-events: none;
}
.hero-bg:has(img) .hero-ph,
.hero-bg:has(img)::before { display: none; }
/* véu degradê: transparente no topo → escuro da metade pra baixo */
.hero-veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(10,6,4,0) 0%,
    rgba(10,6,4,.15) 35%,
    rgba(10,6,4,.55) 65%,
    rgba(10,6,4,.78) 100%
  );
}
.hero-inner { width: 100%; }
.hero-content {
  position: relative;
  display: flex; flex-direction: column;
  gap: 1.5rem;
  align-items: flex-start;
  text-align: left;
  max-width: 46rem;
}
.hero-content > * { align-self: flex-start; }

@media (max-width: 760px) {
  .hero { padding-block: 7.5rem 3.5rem; min-height: 92vh; }
  .hero-content { gap: 1.1rem; }
  .hero-veil { background: linear-gradient(to bottom, rgba(10,6,4,0) 0%, rgba(10,6,4,.2) 30%, rgba(10,6,4,.6) 60%, rgba(10,6,4,.82) 100%); }
  .hero-bg img { object-position: 65% center; }
}
.hero-title {
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3.2rem);
  letter-spacing: var(--ls-display);
  line-height: 1.04;
  color: var(--cream);
  text-wrap: balance;
}
.hero-title .row { display: block; overflow: hidden; }
.hero-title .row > span { display: inline-block; }
.hero-title .ital { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--gold-bright); font-weight: 300; }
.hero-sub { color: var(--txt-on-dark); max-width: 56ch; font-size: var(--fs-lead); line-height: 1.55; }
.hero-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.hero-meta {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  font-family: var(--ff-body);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--txt-muted);
  font-weight: 500;
}
@media (max-width: 760px) {
  .hero-meta { gap: .8rem 1.2rem; font-size: .7rem; padding-top: 1rem; margin-top: 1rem; }
  .hero-cta-row .btn { flex: 1 1 auto; justify-content: center; }
}
.hero-meta span { display: inline-flex; align-items: center; gap: .55em; }
.hero-meta b { color: var(--gold-light); font-weight: 500; }

.hero-side {
  position: absolute;
  right: var(--gutter); bottom: 3rem;
  z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
  font-family: var(--ff-mono); font-size: .7rem;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase; color: var(--txt-muted);
}
.hero-side .scroll-cue {
  display: inline-flex; align-items: center; gap: .6rem;
}
.hero-side .scroll-cue::after {
  content: '';
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--gold-light), transparent);
  display: inline-block;
  animation: pulse-line 2s ease-in-out infinite;
}
@keyframes pulse-line { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 760px) { .hero-side { display: none; } }

/* ============ MARQUEE letreiro ============ */
/* Belt · quebra de seção elegante (entre Hero e Manifesto) */
.belt {
  position: relative;
  padding-block: 1.35rem;
  border-block: 1px solid var(--hair-strong);
  background: var(--ink-0);
  font-family: var(--ff-mono);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-light);
  --mq-gap: 2.4rem;
  --mq-dur: 48s;
}
/* "Costura" editorial: hairlines verticais finas nos limites, sem dots glowy */
.belt::before,
.belt::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 1px; height: 18px;
  background: var(--gold-deep);
  opacity: .55;
  transform: translateY(-50%);
  z-index: 2;
}
.belt::before { left: 1.5rem; }
.belt::after  { right: 1.5rem; }
.belt .star {
  color: var(--gold-deep);
  opacity: .55;
  font-size: .7em;
  font-family: var(--ff-display);
  transform: translateY(-.08em);
}
.belt i {
  font-style: italic;
  font-family: var(--ff-display);
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--gold-bright);
  font-size: 1.15em;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}
@media (max-width: 600px) {
  .belt { font-size: .82rem; padding-block: 1.1rem; letter-spacing: .2em; }
  .belt::before, .belt::after { height: 12px; }
}
.belt .marquee-track { gap: 2.5rem; align-items: center; }
.belt .star { color: var(--gold); display: inline-block; transform: translateY(-.15em); font-style: normal; }

/* ============ MANIFESTO (editorial estático · sempre legível) ============ */
/* ===== MANIFESTO pinado · tela branca, palavras acendem no scroll ===== */
.manifesto-pin { position: relative; height: 220vh; background: #fff; }
.manifesto-sticky {
  position: sticky; top: 0;
  height: 100vh;
  display: grid; place-items: center;
  background: #fff;
  overflow: hidden;
  padding-block: 4rem;
}
.manifesto-sticky .wrap-narrow { max-width: 920px; width: 100%; }
/* eyebrow legível no branco */
.manifesto-pin .eyebrow { color: var(--gold-deep); }
.manifesto-statement {
  margin: clamp(1.6rem, 1.2rem + 1.5vw, 2.6rem) 0 0;
  font-family: var(--ff-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.7rem);
  line-height: 1.16;
  letter-spacing: var(--ls-display);
  color: var(--txt-on-cream);
}
/* scroll-driven: palavra começa clara e ESCURECE ao acender */
.manifesto-statement .mw {
  color: rgba(42, 31, 20, .16);
  transition: color .35s var(--ease-out);
}
.manifesto-statement .mw.lit { color: var(--txt-on-cream); }
.manifesto-statement .mw.key {
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: rgba(122, 86, 53, .24);
}
.manifesto-statement .mw.key.lit { color: var(--gold-deep); }
.manifesto-sign {
  display: inline-flex; align-items: center; gap: 1rem;
  margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  font-family: var(--ff-mono); font-size: .78rem;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--gold-deep);
}
.manifesto-sign .ms-line { width: 40px; height: 1px; background: var(--gold); display: inline-block; }
@media (max-width: 760px) { .manifesto-pin { height: 200vh; } }
@media (prefers-reduced-motion: reduce) {
  .manifesto-pin { height: auto; }
  .manifesto-sticky { position: static; height: auto; min-height: 60vh; }
}

/* ============ TRABALHO (horizontal scroll pinado) ============ */
.work-pin {
  position: relative;
  height: 420vh; /* altura virtual pra rolar mais e mostrar o CTA inteiro */
}
.work-pin .sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding-top: clamp(6rem, 12vh, 8rem);
  padding-bottom: 3rem;
}
.work-pin .head {
  position: relative;
  z-index: 2;
  padding-inline: var(--gutter);
  margin-bottom: clamp(1.5rem, 2vh, 2.5rem);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
}
.work-pin .head h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.work-pin .head .count {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-muted);
  display: inline-flex; align-items: center; gap: .6rem;
  flex-shrink: 0;
}
.work-pin .head .count b { color: var(--gold-bright); font-weight: 500; font-size: 1.6rem; font-family: var(--ff-display); font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; line-height: 1; }
.work-track {
  display: flex; gap: 1.5rem;
  padding-inline: var(--gutter);
  padding-right: clamp(3rem, 8vw, 6rem);
  will-change: transform;
  align-items: center;
  flex: 1;
}
.work-shot {
  flex: 0 0 auto;
  width: clamp(220px, 23vw, 300px);
  aspect-ratio: 9/16; /* formato reel do Instagram, uniforme */
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
  color: var(--txt-muted);
  font-family: var(--ff-body); font-weight: 500;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform var(--t-med), border-color var(--t-med), box-shadow var(--t-med);
}
.work-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.work-shot::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(11,8,5,.85));
  opacity: 0;
  transition: opacity var(--t-fast);
}
.work-shot:hover { transform: translateY(-12px); border-color: var(--gold-light); box-shadow: var(--sh-deep); }
.work-shot:hover::after { opacity: 1; }
.work-shot .label {
  position: absolute; left: 1.4rem; bottom: 1.2rem;
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  color: var(--gold-bright);
  font-size: 1.4rem;
  letter-spacing: -.01em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-fast), transform var(--t-fast);
  z-index: 2;
  text-transform: none;
}
.work-shot:hover .label { opacity: 1; transform: translateY(0); }

/* shot que vai virar vídeo (placeholder com ícone de play) */
.work-shot.video::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(40% 40% at 50% 50%, rgba(232,199,146,.16), transparent 70%),
    linear-gradient(160deg, var(--ink-2), var(--ink-4));
}
.work-shot.video .play-ico {
  position: absolute; top: 50%; left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  background: rgba(232,199,146,.95);
  display: grid; place-items: center;
  color: var(--ink-1);
  box-shadow: 0 18px 50px -16px rgba(232,199,146,.7);
  transition: transform var(--t-snap), background var(--t-snap);
}
.work-shot.video:hover .play-ico { transform: translate(-50%, -50%) scale(1.08); background: var(--gold-bright); }
.work-shot.video .play-ico svg { width: 28px; height: 28px; fill: var(--ink-1); margin-left: 4px; }
.work-shot.video .vtag {
  position: absolute; top: 1rem; left: 1rem; z-index: 3;
  font-family: var(--ff-mono); font-size: .62rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-bright);
  background: rgba(11,8,5,.65);
  border: 1px solid var(--hair-strong);
  padding: .3rem .7rem; border-radius: var(--r-pill);
  backdrop-filter: blur(6px);
}
.work-cta {
  flex: 0 0 auto;
  width: clamp(220px, 23vw, 300px);
  aspect-ratio: 9/16;
  border-radius: var(--r-lg);
  background: var(--silk);
  background-size: 200% 200%;
  animation: silk-shift 10s ease-in-out infinite;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 2rem;
  color: var(--ink-1);
}
.work-cta h3 { color: var(--ink-1); font-size: 1.8rem; }
.work-cta p { color: rgba(11,8,5,.7); font-size: .95rem; }
.work-cta .btn-link { color: var(--ink-1); border-color: rgba(11,8,5,.4); }

@media (max-width: 880px) {
  .work-pin { height: auto; }
  .work-pin .sticky { position: static; height: auto; padding-block: 4rem; overflow: hidden; padding-top: 4rem; padding-bottom: 4rem; }
  .work-pin .head { position: static; flex-direction: column; align-items: flex-start; margin-bottom: 2rem; }
  /* Auto-scroll horizontal contínuo, sem o usuário precisar arrastar */
  .work-track {
    overflow: visible;
    width: max-content;
    padding-right: 0;
    animation: work-auto 55s linear infinite;
    will-change: transform;
  }
  .work-track.dup { animation: work-auto 55s linear infinite; }
  .work-pin:hover .work-track { animation-play-state: paused; }
  @keyframes work-auto {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  @media (max-width: 880px) {
    .work-track { animation: none !important; transform: none !important; overflow-x: auto; }
  }
}

/* ============ SOBRE (split sticky) ============ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(2rem, 1rem + 4vw, 6rem);
  row-gap: 1.4rem;
  align-items: start;
}
/* .about-cta mora DENTRO de .about-text (mesmo bloco que trava, sem risco de
   sobrepor nada). No mobile, o JS (setupAboutCtaMobile) move o próprio nó pra
   virar o último filho de .about-grid, depois das fotos; aqui só garantimos
   que, nesse estado movido, ele fique centralizado. */
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-cta { display: flex; justify-content: center; margin-top: 1.4rem; }
}
.about-text {
  position: sticky;
  top: 8rem;
  z-index: 1;
  display: flex; flex-direction: column; gap: 1.4rem;
  align-self: start;
}
@media (max-width: 880px) {
  .about-text { position: static; }
}
.about-text h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.about-text p { color: var(--txt-on-dark); line-height: 1.7; }
.about-text p + p { color: var(--txt-muted); }
.about-media { display: flex; flex-direction: column; gap: 1.5rem; }
.about-shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-2));
  border: 1px solid var(--hair);
  display: grid; place-items: center;
  color: var(--txt-muted);
  font-family: var(--ff-body); font-weight: 500; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
.about-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  padding: 1.5rem;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
}
.about-meta .item .lbl { font-family: var(--ff-body); font-weight: 500; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--txt-muted); }
.about-meta .item .val { font-family: var(--ff-display); font-size: 1.3rem; color: var(--gold-bright); font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; }

/* ============ DIFERENCIAIS (cards tilt + text reveal) ============ */
.diff-head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); max-width: 18ch; }
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
@media (max-width: 880px) {
  .diff-grid { grid-template-columns: 1fr; }
  /* efeito de scroll mais marcante no mobile: entra alternando de lado */
  .diff-card.reveal:nth-child(odd) { transform: translateX(-36px) rotate(-2deg); }
  .diff-card.reveal:nth-child(even) { transform: translateX(36px) rotate(2deg); }
  .diff-card.reveal.in { transform: none; }
}
.diff-card {
  background: linear-gradient(160deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: 2.2rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-med), border-color var(--t-med);
}
.diff-card .num {
  position: absolute;
  top: 1.4rem; right: 1.6rem;
  font-family: var(--ff-mono); font-size: .7rem;
  letter-spacing: var(--ls-mono); color: var(--txt-faint);
}
.diff-card .ico { color: var(--gold-light); margin-bottom: 1.5rem; }
.diff-card h3 { color: var(--cream); margin-bottom: .6rem; }
.diff-card p { color: var(--txt-muted); font-size: .98rem; line-height: 1.6; }
.diff-card::before {
  content: ''; position: absolute; inset: -1px;
  background: linear-gradient(135deg, transparent 45%, rgba(232,199,146,.18) 50%, transparent 55%);
  opacity: 0; transition: opacity var(--t-med);
  pointer-events: none;
  border-radius: inherit;
}
.diff-card:hover { border-color: var(--gold-light); transform: translateY(-6px); }
.diff-card:hover::before { opacity: 1; }

/* ============ EFEITOS (bento expansível) ============ */
.effects-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; }
.effects-head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); max-width: 20ch; }
/* Bento com grid-template-areas · 6 efeitos, sem buracos.
   As fotos dos efeitos são verticais (close no olho), então nenhuma célula
   é larga demais: 2 cards grandes quadrados + 4 retratos. */
.effects-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: clamp(140px, 13vw, 180px);
  gap: 1rem;
  margin-top: 3rem;
  grid-template-areas:
    "feat feat wisp egip"
    "feat feat wisp egip"
    "powr powr fox  cisn"
    "powr powr fox  cisn";
}
.eff.a-feat { grid-area: feat; }
.eff.a-wisp { grid-area: wisp; }
.eff.a-egip { grid-area: egip; }
.eff.a-fox  { grid-area: fox; }
.eff.a-cisn { grid-area: cisn; }
.eff.a-powr { grid-area: powr; }

@media (max-width: 880px) {
  .effects-bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(150px, 22vw, 200px);
    grid-template-areas:
      "feat feat"
      "feat feat"
      "wisp egip"
      "wisp egip"
      "fox  cisn"
      "fox  cisn"
      "powr powr"
      "powr powr";
  }
}
@media (max-width: 540px) {
  .effects-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: 300px;
    grid-template-areas:
      "feat"
      "wisp"
      "egip"
      "fox"
      "cisn"
      "powr";
  }
}

.eff {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink-2), var(--ink-3));
  border: 1px solid var(--hair);
  cursor: none;
  transition: border-color var(--t-med), transform var(--t-med);
  isolation: isolate;
}
@media (pointer: coarse) { .eff { cursor: pointer; } }
.eff:hover { border-color: var(--gold-light); transform: translateY(-4px); }
.eff .img {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, var(--ink-3), var(--ink-4));
  transition: transform var(--t-slow);
  z-index: -1;
}
.eff .img img { width: 100%; height: 100%; object-fit: cover; opacity: .94; transition: opacity var(--t-med), transform var(--t-slow); }
.eff:hover .img img { opacity: 1; transform: scale(1.06); }
.eff::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,8,5,.1) 0%, rgba(11,8,5,.9) 100%);
  z-index: -1;
}
/* rodapé limpo · só badge + nome sobre a foto (sem vidro/caixa) */
.eff .meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 1.6rem;
  display: flex; flex-direction: column; gap: .35rem;
  z-index: 1;
}
.eff .tag {
  align-self: flex-start; margin-bottom: .5rem;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.eff h3 {
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
  transition: color var(--t-fast);
}
.eff:hover h3 { color: #fff; }
.eff p {
  display: none;
  color: rgba(255,255,255,.82);
  font-size: .92rem;
  max-height: 100px;
  overflow: hidden;
  opacity: 1;
  margin-top: .5rem;
  transition: max-height .55s var(--ease-soft), opacity .35s, margin-top .55s;
}
@media (hover: hover) and (pointer: fine) {
  .eff p { max-height: 0; opacity: 0; margin-top: 0; }
  .eff:hover p, .eff:focus-within p { max-height: 100px; opacity: 1; margin-top: .5rem; }
}

/* grid 3×2 limpo, sem buracos · todos os cards iguais */
.eff { grid-column: span 1; grid-row: span 1; }

.eff.feature .meta { padding: 2rem 2.2rem; }
.eff.feature h3 { font-size: clamp(1.55rem, 1rem + 1.6vw, 2.4rem); }

.effects-note {
  margin-top: 2.5rem;
  text-align: center;
  color: var(--txt-muted);
}
.effects-note a { color: var(--gold-light); border-bottom: 1px solid var(--hair-strong); }
.effects-cta { text-align: center; margin-top: 1.5rem; }

/* ============ ANTES & DEPOIS (drag slider) ============ */
.ba-block { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .ba-block { grid-template-columns: 1fr; gap: 2rem; } }
.ba-text h2 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); }
.ba-text p { color: var(--txt-muted); }
.ba-slider {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  box-shadow: var(--sh-card);
  cursor: ew-resize;
  user-select: none;
  background: var(--ink-3);
  touch-action: none;
}
.ba-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  display: grid; place-items: center;
}
/* fotos reais do antes/depois (trocar aqui se mudar as imagens) */
.ba-img.before { background-image: url('../img/antes.webp'); }
.ba-img.after  {
  background-image: url('../img/depois.webp');
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.ba-img .lbl {
  position: absolute;
  top: 1rem;
  font-family: var(--ff-mono); font-size: .7rem;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  background: rgba(11,8,5,.75);
  border: 1px solid var(--hair-strong);
  padding: .4rem .85rem; border-radius: var(--r-pill);
  color: var(--gold-bright);
  z-index: 2;
}
.ba-img.before .lbl { right: 1rem; }
.ba-img.after  .lbl { left: 1rem; }
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: var(--gold-bright);
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold-bright);
  transform: translate(-50%, -50%);
}
.ba-handle::after {
  content: '⇄';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--ink-1);
  font-size: 1.2rem; font-weight: 700;
}

/* ============ PROVAS SOCIAIS ============ */
.proof-head { margin-bottom: 3rem; }
.proof-head h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 4rem); max-width: 14ch; }
.stats-row { display: flex; justify-content: center; gap: clamp(2rem, 1rem + 6vw, 6rem); flex-wrap: wrap; margin-bottom: 4rem; }
.stat-it { text-align: center; }
.stat-num {
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 300;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--gold-bright);
  line-height: 1;
}
.stat-lbl {
  font-family: var(--ff-body); font-weight: 500; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--txt-muted); margin-top: .5rem;
}
.testi-marquee-wrap { display: grid; gap: 1.25rem; --mq-gap: 1.5rem; }
.testi { flex: 0 0 380px; background: var(--ink-2); border: 1px solid var(--hair); border-radius: var(--r); padding: 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .8rem; box-shadow: var(--sh-card); }
.testi .stars { color: var(--gold-bright); font-size: .85rem; letter-spacing: 2px; }
.testi p { font-family: var(--ff-display); font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: 1.15rem; color: var(--cream); line-height: 1.4; }
.testi .who { display: flex; align-items: center; gap: .8rem; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--hair); }
.testi .av { width: 40px; height: 40px; border-radius: 50%; background: var(--silk); flex-shrink: 0; }
.testi .who b { font-family: var(--ff-body); font-weight: 600; font-size: .92rem; color: var(--gold-light); display: block; }
.testi .who em { font-style: normal; font-size: .72rem; color: var(--txt-muted); font-family: var(--ff-body); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.testi-marquee-wrap .marquee:nth-child(2) { --mq-dur: 32s; }
.testi-marquee-wrap .marquee:nth-child(3) { --mq-dur: 44s; }
@media (max-width: 480px) {
  .testi { flex: 0 0 86vw; padding: 1.3rem 1.4rem; }
  .testi p { font-size: 1rem; }
}

/* ============ COMO FUNCIONA · timeline linear estática ============ */
.flow-head h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); max-width: 18ch; }
.flow-line {
  --node: 3.2rem;
  position: relative;
  list-style: none;
  margin: clamp(2.5rem, 2rem + 2vw, 4rem) 0 0;
  padding: 0;
  max-width: 820px;
}
.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--node) 1fr;
  gap: clamp(1.2rem, 1rem + 1vw, 2rem);
  padding-bottom: clamp(1.4rem, 1.2rem + 1.2vw, 2.2rem);
}
.flow-step:last-child { padding-bottom: 0; }
/* linha SÓ no vão entre um nó e o próximo (nunca por dentro do círculo) */
.flow-step:not(:last-child)::before,
.flow-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) + .45rem);
  width: 2px;
  border-radius: 2px;
}
.flow-step:not(:last-child)::before {
  bottom: -.45rem;
  background: var(--hair-strong);
}
/* preenchimento por segmento: cresce quando o passo acende */
.flow-step:not(:last-child)::after {
  height: 0;
  background: var(--gold);
  transition: height .6s var(--ease-soft);
}
.flow-step.lit:not(:last-child)::after {
  height: calc(100% - var(--node) + .45rem);
}
.flow-node {
  width: var(--node); height: var(--node);
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  color: var(--txt-faint);
  display: grid; place-items: center;
  font-family: var(--ff-display); font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-size: 1.5rem; font-weight: 500;
  position: relative; z-index: 2;
  transition: border-color .45s var(--ease-soft), color .45s var(--ease-soft),
              transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft);
}
/* passo alcançado pelo scroll */
.flow-step.lit .flow-node {
  border-color: var(--gold);
  color: var(--gold-bright);
  transform: scale(1.06);
  box-shadow: 0 10px 30px -12px rgba(156,114,76,.55);
}
.flow-card {
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  padding: clamp(1.2rem, 1rem + .8vw, 1.7rem) clamp(1.3rem, 1rem + 1vw, 1.9rem);
  opacity: .55;
  transform: translateY(12px);
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft),
              border-color .6s var(--ease-soft), box-shadow .6s var(--ease-soft);
}
.flow-step.lit .flow-card {
  opacity: 1;
  transform: none;
  border-color: var(--hair-strong);
  box-shadow: var(--sh-card);
}
/* etiqueta de tempo por etapa (dá previsibilidade pra cliente) */
.flow-time {
  display: inline-block;
  font-family: var(--ff-mono);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .5rem;
}
.flow-card h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); margin-bottom: .5rem; color: var(--cream); }
.flow-card p { color: var(--txt-on-dark); line-height: 1.6; max-width: 52ch; }
/* fechamento da timeline */
.flow-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.2rem, 1rem + 2vw, 3rem);
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-top: 1px solid var(--hair-cream);
}
.flow-cta p {
  font-family: var(--ff-display);
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.2;
  color: var(--txt-on-cream);
  max-width: 24ch;
}
@media (max-width: 680px) {
  .flow-cta { flex-direction: column; align-items: flex-start; }
  .flow-cta .btn { width: 100%; justify-content: center; }
}

/* Timeline em creme */
.cream .flow-step:not(:last-child)::before { background: var(--hair-cream); }
.cream .flow-node {
  border-color: var(--hair-cream);
  background: var(--milk);
  color: rgba(74,53,32,.4);
}
.cream .flow-step.lit .flow-node {
  border-color: var(--gold);
  color: var(--gold-deep);
  box-shadow: 0 12px 30px -14px rgba(122,86,53,.55);
}
.cream .flow-card {
  background: var(--milk);
  border-color: var(--hair-cream);
}
.cream .flow-step.lit .flow-card {
  border-color: rgba(122,86,53,.3);
  box-shadow: 0 22px 55px -32px rgba(122,86,53,.55);
}
.cream .flow-card h3 { color: var(--txt-on-cream); }
.cream .flow-card p { color: var(--txt-cream-mut); }
.cream .flow-time { color: var(--gold-deep); }

/* sem movimento: tudo aceso e estático */
@media (prefers-reduced-motion: reduce) {
  .flow-line::after { transition: none; }
  .flow-card { opacity: 1; transform: none; transition: none; }
  .flow-node { transition: none; }
}

@media (max-width: 600px) {
  .flow-line { --node: 2.5rem; }
  .flow-node { font-size: 1.2rem; }
}

.flow-policy {
  margin-top: 4rem;
  padding: 2rem 2.4rem;
  background: var(--ink-2);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 760px) { .flow-policy { grid-template-columns: 1fr; padding: 1.5rem 1.8rem; } }
.flow-policy .pol-item h4 { font-family: var(--ff-body); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-light); font-weight: 600; margin-bottom: .4rem; }
.flow-policy .pol-item p { color: var(--txt-muted); font-size: .94rem; line-height: 1.5; }

/* ============ GARANTIA · selo emoldurado ============ */
.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 1.5rem + 3vw, 4.5rem);
  align-items: center;
  padding: clamp(1.6rem, 1.2rem + 1vw, 2.4rem) clamp(2.2rem, 1.5rem + 3.5vw, 4.5rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, var(--milk), var(--cream-2));
  box-shadow: 0 30px 80px -44px rgba(122,86,53,.5);
  max-width: 1240px;
}
/* selo animado · medalhão escuro com anel de texto girando */
.guarantee-seal {
  width: clamp(150px, 16vw, 210px);
  height: clamp(150px, 16vw, 210px);
  border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 50% 36%, var(--ink-3), var(--ink-1) 64%, var(--ink-0));
  box-shadow:
    0 24px 60px -28px rgba(20,10,4,.7),
    inset 0 0 0 1px var(--hair-strong),
    inset 0 2px 18px rgba(0,0,0,.5);
  flex-shrink: 0;
  align-self: center;
}
.seal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* medalhão escuro central (igual à Ellipse62 do Figma) */
.seal-medallion { fill: url(#seal-medallion-grad); }
/* anel externo fino (Ellipse63) */
.seal-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: .8;
  opacity: .5;
}
/* aro do medalhão */
.seal-ring-inner {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: .8;
  opacity: .45;
}
/* anel de ticks radiais (Ellipse64) */
.seal-ticks {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 7;
  stroke-dasharray: 1.3 5.4;   /* ticks curtos e numerosos ao redor */
  stroke-linecap: butt;
  opacity: .7;
}
/* texto curvo girando */
.seal-rot {
  transform-origin: 100px 100px;
  animation: seal-spin 26s linear infinite;
}
.seal-text {
  fill: var(--gold-bright);
  font-family: var(--ff-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 1px;
}
/* "7" central com gradiente dourado */
.seal-num {
  fill: url(#seal-grad);
  font-family: var(--ff-display);
  font-style: italic;
  font-variation-settings: 'SOFT' 100, 'WONK' 1;
  font-weight: 400;
  font-size: 118px;
}
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .seal-rot { animation: none; }
}
.guarantee-body h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); }
.guarantee-body > p { color: var(--txt-cream-mut); line-height: 1.65; }
@media (max-width: 680px) {
  /* mobile: tudo empilhado e centralizado (selo em cima, título e texto no centro) */
  .guarantee {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .guarantee-body { display: flex; flex-direction: column; align-items: center; }
  .guarantee-body .eyebrow { align-self: center; }
}

/* ============ LOCALIZAÇÃO ============ */
.loc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 880px) { .loc-grid { grid-template-columns: 1fr; } }
.loc-info { display: flex; flex-direction: column; gap: 1.2rem; }
.loc-info h2 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); }
.loc-info .address { color: var(--txt-on-dark); font-size: 1.1rem; line-height: 1.55; }
.loc-info .hours { font-family: var(--ff-body); font-weight: 500; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-light); }
/* dados práticos do estúdio */
.loc-facts {
  display: grid;
  gap: 1px;
  margin-top: .6rem;
  background: var(--hair);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  overflow: hidden;
}
.loc-fact {
  display: flex; align-items: flex-start; gap: 1rem;
  padding: 1.1rem 1.3rem;
  background: var(--ink-2);
}
.loc-fact .ico {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--gold-light);
  border: 1px solid var(--hair-strong);
  background: rgba(232,199,146,.06);
}
.loc-fact b {
  display: block;
  font-family: var(--ff-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: .3rem;
}
.loc-fact span { color: var(--txt-on-dark); font-size: .95rem; line-height: 1.5; }
.loc-info .btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.loc-map {
  aspect-ratio: 4/3;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  background: var(--ink-2);
  position: relative;
  box-shadow: var(--sh-card);
}
.loc-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.5) sepia(.35) contrast(.95) brightness(.85); touch-action: pan-x pan-y; }
@media (prefers-contrast: more) {
  .loc-map iframe { filter: none; }
}
@media (max-width: 880px) {
  .loc-map { aspect-ratio: 1/1; max-height: 380px; min-height: 280px; }
}
.loc-map::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 50%, transparent 60%, rgba(11,8,5,.4));
  pointer-events: none;
}

/* ============ FAQ ============ */
/* layout 2 colunas: lista + card fixo (desce junto no desktop) */
.faq-layout { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); align-items: start; }
@media (min-width: 920px) {
  .faq-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, .9fr); }
  .faq-aside { position: sticky; top: 96px; }
}
.faq-head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); }
.faq-head h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); }
.faq-list { display: grid; gap: 0; }
/* card lateral · escuro pra contrastar no creme e puxar o olho pro CTA */
.faq-card {
  background: var(--ink-1);
  color: var(--txt-on-dark);
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-lg);
  padding: clamp(1.8rem, 1.4rem + 1.5vw, 2.6rem);
  box-shadow: 0 30px 80px -44px rgba(20,10,4,.8);
}
.faq-card .eyebrow { color: var(--gold-light); }
.faq-card h3 {
  color: var(--cream);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.1;
  margin: 1rem 0 .8rem;
}
.faq-card p { color: var(--txt-muted); line-height: 1.6; margin-bottom: 1.6rem; }
.faq-card .btn { width: 100%; justify-content: center; }
.faq-item {
  border-top: 1px solid var(--hair-strong);
  padding: 1.4rem 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--hair-strong); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem;
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + .6vw, 1.5rem);
  color: var(--cream);
  cursor: none;
  list-style: none;
  text-align: left;
  width: 100%;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .chev {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  display: grid; place-items: center;
  color: var(--gold-light);
  flex-shrink: 0;
  transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
.faq-item[open] .chev { transform: rotate(180deg); background: var(--gold); color: var(--ink-1); border-color: transparent; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease-soft);
}
.faq-item[open] .faq-a { grid-template-rows: 1fr; padding-top: 1rem; }
.faq-a > div { overflow: hidden; color: var(--txt-muted); max-width: 70ch; line-height: 1.6; }

/* ============ CTA FINAL ============ */
.cta-final {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2.2rem + 3vw, 5rem);
  background: var(--ink-1);
  isolation: isolate;
}
.cta-final .silk-bar {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--gold);
  z-index: 1;
}
/* composição centralizada e emoldurada (mais forte que o assimétrico antigo) */
.cta-final-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 1.1rem;
  max-width: 780px;
  padding-block: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.cta-final h2 {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem);
  letter-spacing: var(--ls-display);
  line-height: 1.06;
  font-weight: 300;
  text-wrap: balance;
  max-width: 20ch;
}
.cta-final .lead { max-width: 44ch; margin-inline: auto; font-size: 1.02rem; }
.cta-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: .3rem; }
@media (max-width: 560px) {
  .cta-actions { width: 100%; flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ============ FOOTER ============ */
.site-footer {
  position: relative;
  background: var(--ink-0);
  padding-block: 4rem 2.5rem;
  border-top: 1px solid var(--hair);
  overflow: hidden;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-col h4 { font-family: var(--ff-body); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1rem; font-weight: 600; }
.foot-col a, .foot-col p { color: var(--txt-muted); font-size: .94rem; display: block; margin-block: .4rem; line-height: 1.5; transition: color var(--t-fast); }
.foot-col a:hover { color: var(--gold-bright); }
.foot-brand { display: flex; flex-direction: column; gap: 1rem; }
.foot-brand .name { font-family: var(--ff-display); font-size: 2rem; color: var(--cream); }
.foot-brand .name em { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--gold-bright); font-weight: 300; }
.foot-brand p { font-size: .94rem; color: var(--txt-muted); max-width: 38ch; line-height: 1.55; }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--hair);
  font-family: var(--ff-mono); font-size: .72rem;
  letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--txt-faint);
}
.foot-bottom .made { color: var(--txt-muted); }
.foot-bottom .made b { color: var(--gold-light); font-weight: 500; letter-spacing: .12em; }