/* Dra. Mayra Haas · Harmonização Glútea
   Sistema: vinho profundo + dourado do logo + nude. Detalhes em DESIGN.md */

@font-face {
  font-family: 'Italiana';
  src: url('../fonts/italiana-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url('../fonts/jost-var.woff2') format('woff2-variations'), url('../fonts/jost-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --vinho-noite: #1A0709;      --vinho-noite-rgb: 26, 7, 9;      /* fundo da página */
  --vinho: #2F0609;            --vinho-rgb: 47, 6, 9;            /* fundo alternado, cor da marca */
  --vinho-superficie: #3D1219; --vinho-superficie-rgb: 61, 18, 25; /* cartões */
  --vinho-rosado: #7B3C47;     --vinho-rosado-rgb: 123, 60, 71;  /* brilhos, o tom do vestido */
  --ouro: #CDB57B;             --ouro-rgb: 205, 181, 123;        /* acento único */
  --ouro-claro: #F6DFA8;       --ouro-claro-rgb: 246, 223, 168;  /* hover e foco */
  --nude: #EFE1D6;             --nude-rgb: 239, 225, 214;        /* texto principal */
  --nude-suave: #C9B3AB;       --nude-suave-rgb: 201, 179, 171;  /* texto de apoio */
  --linha: rgba(var(--ouro-rgb), .2);

  --fonte-display: 'Italiana', 'Didot', 'Bodoni 72', Georgia, serif;
  --fonte-texto: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --raio: 18px;           /* cartões e fotos */
  --raio-pilula: 999px;   /* botões */
  --ease: cubic-bezier(.16, 1, .3, 1);

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --largura: 1320px;
  --secao: clamp(5rem, 9.5vw, 8.5rem);
  --nav-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0; background: var(--vinho-noite); color: var(--nude);
  font-family: var(--fonte-texto); font-weight: 300; font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
body::after { /* grão de filme: fixo e sem custo de rolagem */
  content: ''; position: fixed; inset: 0; z-index: 80; pointer-events: none;
  background: url('../img/grao.png'); opacity: .55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3 { margin: 0; font-weight: 400; }
::selection { background: var(--ouro); color: var(--vinho-noite); }
:focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--ouro); color: var(--vinho-noite); padding: .8rem 1.2rem; border-radius: var(--raio-pilula);
  font-weight: 500; text-decoration: none;
}
.pular:focus { top: 1rem; }

.envelope { width: min(var(--largura), 100% - 2 * var(--gutter)); margin-inline: auto; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico--inv { transform: scaleX(-1); }

/* ---------- Tipografia ---------- */
.sobretitulo {
  font-family: var(--fonte-texto); font-weight: 500; font-size: .76rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--ouro); margin: 0 0 1.4rem;
}
.titulo-secao {
  font-family: var(--fonte-display); font-size: clamp(2.5rem, 5vw, 4.6rem);
  line-height: 1.06; letter-spacing: -.005em; color: var(--nude); text-wrap: balance;
}
.titulo-secao--g { font-size: clamp(3rem, 6.6vw, 6.2rem); }
.secao__sub {
  font-size: clamp(1.05rem, 1.25vw, 1.18rem); color: var(--nude-suave);
  max-width: 46ch; margin: 1.3rem 0 0; line-height: 1.6;
}
.linha-split { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }

/* ---------- Botões e links ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  min-height: 52px; padding: .95rem 1.65rem; border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto); font-weight: 500; font-size: .98rem; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer; border: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .5s var(--ease);
}
.botao--ouro { background: var(--ouro); color: var(--vinho-noite); }
.botao--ouro:hover { background: var(--ouro-claro); }
.botao--linha { border-color: rgba(var(--ouro-rgb), .5); color: var(--nude); background: transparent; }
.botao--linha:hover { border-color: var(--ouro); background: rgba(var(--ouro-rgb), .08); }
.botao:active { transform: scale(.98); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.botao--p { min-height: 44px; padding: .7rem 1.2rem; font-size: .92rem; }
.botao--g { min-height: 60px; padding: 1.15rem 2.1rem; font-size: 1.05rem; }

.link-seta {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-weight: 500; font-size: .96rem; color: var(--ouro); text-decoration: none;
  transition: color .3s var(--ease);
}
.link-seta .ico { transition: transform .45s var(--ease); }
.link-seta:hover { color: var(--ouro-claro); }
.link-seta:hover .ico { transform: translate(3px, -1px); }

/* ---------- Navegação ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav--solida {
  background: rgba(var(--vinho-noite-rgb), .86); border-bottom-color: var(--linha);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.nav__in {
  height: 100%; width: min(var(--largura), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__marca { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.nav__mono { height: 38px; width: auto; }
.nav__nome { font-weight: 500; font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; }
.nav__links { display: flex; gap: clamp(1.1rem, 2vw, 2.1rem); }
.nav__links a {
  position: relative; font-size: .92rem; font-weight: 400; color: var(--nude-suave); text-decoration: none;
  padding: .5rem 0; transition: color .3s;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: var(--ouro);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav__links a:hover { color: var(--nude); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__cta { min-height: 44px; padding: .6rem 1.2rem; font-size: .9rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center; column-gap: 2vw;
  padding: calc(var(--nav-h) + 1.5rem) max(var(--gutter), calc((100% - var(--largura)) / 2)) 0;
}
.hero__seda {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  background:
    radial-gradient(ellipse 60% 70% at 78% 40%, rgba(var(--vinho-rosado-rgb), .45), transparent 70%),
    radial-gradient(ellipse 50% 60% at 20% 80%, rgba(var(--vinho-rgb), .9), transparent 70%),
    var(--vinho-noite);
}
.hero::after {
  content: ''; position: absolute; inset: auto 0 0; height: 22%; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--vinho-noite));
}
.hero__texto { position: relative; z-index: 2; padding-bottom: 8vh; }
.hero__titulo {
  font-family: var(--fonte-display); font-size: clamp(2.9rem, 5vw, 5.5rem);
  line-height: 1.02; letter-spacing: -.01em; max-width: 12.5em; text-wrap: balance;
}
.hero__sub {
  font-size: clamp(1.08rem, 1.35vw, 1.24rem); color: var(--nude-suave);
  max-width: 34ch; margin: 1.7rem 0 2.4rem;
}
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.8rem; }

.hero__figura {
  position: relative; margin: 0; align-self: end; justify-self: center;
  height: min(84dvh, 880px); display: flex; justify-content: center; align-items: flex-end;
}
.hero__arco {
  position: absolute; left: 50%; bottom: 0; height: 90%; aspect-ratio: 100 / 130;
  transform: translateX(-50%); border-radius: 999px 999px 0 0;
  background: radial-gradient(ellipse 70% 55% at 50% 32%, rgba(var(--ouro-rgb), .2), rgba(var(--vinho-rosado-rgb), .16) 50%, transparent 78%);
}
.hero__arco-linha {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  fill: none; stroke: var(--ouro); stroke-width: .28;
}
.hero__arco-linha--2 { inset: -4.5%; width: 109%; height: 109%; stroke-opacity: .35; stroke-width: .22; }
.hero__foto {
  position: relative; height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to top, transparent 0, #000 18%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to top, transparent 0, #000 18%);
  mask-composite: intersect;
}
.pre .hero-anim { visibility: hidden; }
/* Entradas por IntersectionObserver (a classe só entra via JS, com movimento liberado) */
.rv, .rv-x { opacity: 0; transition: opacity 1s var(--ease), transform 1.15s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.rv { transform: translateY(34px); }
.rv-x { transform: translateX(56px); }
.rv.visto, .rv-x.visto { opacity: 1; transform: none; }
/* A foto entra por CSS, visível desde o primeiro quadro (não segura o LCP esperando JS) */
@media (prefers-reduced-motion: no-preference) {
  .hero__foto { animation: foto-assenta 1.7s var(--ease) both; }
}
@keyframes foto-assenta { from { transform: translateY(6%) scale(1.035); } to { transform: none; } }

/* ---------- Faixa ---------- */
.faixa { overflow: hidden; border-block: 1px solid var(--linha); padding: 1.15rem 0; background: var(--vinho-noite); }
.faixa__trilho { display: flex; width: max-content; animation: faixa 52s linear infinite; }
.faixa__grupo {
  display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; white-space: nowrap;
  font-weight: 400; font-size: .86rem; letter-spacing: .22em; text-transform: uppercase; color: var(--nude-suave);
}
.faixa__grupo i { width: 6px; height: 6px; background: var(--ouro); transform: rotate(45deg); flex: none; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ---------- Manifesto ---------- */
.manifesto { position: relative; padding: clamp(7rem, 15vw, 12.5rem) var(--gutter); text-align: center; overflow: hidden; }
.manifesto__citacao { margin: 0; }
.manifesto__frase {
  font-family: var(--fonte-display); font-size: clamp(2.4rem, 5.4vw, 5.4rem); line-height: 1.14;
  max-width: 15ch; margin: 0 auto; color: var(--nude);
}
.mw { display: inline-block; }
.mw--ouro { color: var(--ouro); }
.manifesto__autoria { margin-top: 2.2rem; }
.manifesto__autoria a {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  font-size: .92rem; color: var(--nude-suave); text-decoration: none; transition: color .3s;
}
.manifesto__autoria a:hover { color: var(--ouro); }
.manifesto__texto {
  max-width: 33ch; margin: clamp(4rem, 8vw, 6.5rem) auto 0;
  font-size: clamp(1.3rem, 2.1vw, 1.8rem); line-height: 1.5; color: var(--nude);
}
.manifesto__texto .pw { transition: none; }

/* ---------- Método ---------- */
.metodo { overflow-x: clip; background: linear-gradient(180deg, var(--vinho-noite) 0%, var(--vinho) 18%, var(--vinho) 82%, var(--vinho-noite) 100%); }
.metodo__palco {
  width: min(var(--largura), 100% - 2 * var(--gutter)); margin-inline: auto;
  min-height: 100dvh; padding: calc(var(--nav-h) + 1.5rem) 0 2rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 3vw; align-items: center;
}
.metodo__titulo { max-width: 8.5em; }
.metodo__desenho { display: flex; justify-content: center; position: relative; }
.metodo__desenho::before { /* brilho difuso atrás da linha */
  content: ''; position: absolute; inset: 10% -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--vinho-rosado-rgb), .35), transparent 70%);
}
.contorno { position: relative; height: min(calc(100dvh - 150px), 780px); min-height: 300px; width: auto; overflow: visible; }
.contorno path { fill: none; stroke-linecap: round; }
.contorno__base { stroke: rgba(var(--ouro-rgb), .2); stroke-width: 1.4; }
.contorno__traco { stroke: var(--ouro); stroke-width: 2.4; }
.ponto__halo { fill: rgba(var(--ouro-rgb), .14); transform-box: fill-box; transform-origin: center; transform: scale(.4); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.ponto__anel { fill: var(--vinho); stroke: rgba(var(--ouro-rgb), .45); stroke-width: 1.4; transition: stroke .5s; }
.ponto__miolo { fill: rgba(var(--ouro-rgb), .45); transition: fill .5s; }
.ponto--on .ponto__halo { transform: scale(1); opacity: 1; }
.ponto--on .ponto__anel { stroke: var(--ouro); }
.ponto--on .ponto__miolo { fill: var(--ouro-claro); }

.metodo__etapas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3.2rem; }
.etapa__verbo { font-family: var(--fonte-display); font-size: clamp(2.8rem, 4.8vw, 4.6rem); line-height: 1; color: var(--ouro); margin-bottom: 1.1rem; }
.etapa p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); color: var(--nude); max-width: 32ch; line-height: 1.6; }
.etapa .botao { margin-top: 1.4rem; }
.metodo--pin .metodo__etapas { display: grid; }
.metodo--pin .etapa {
  grid-area: 1 / 1; opacity: 0; transform: translateY(26px); visibility: hidden;
  transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s .7s;
}
.metodo--pin .etapa.ativa { opacity: 1; transform: none; visibility: visible; transition: opacity .7s var(--ease), transform .7s var(--ease), visibility 0s; }

/* ---------- Tratamentos (bento) ---------- */
.tratamentos { padding-block: var(--secao); }
.bento {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(16rem, auto); gap: 1rem;
}
.cartao {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--raio);
  background: var(--vinho-superficie); border: 1px solid rgba(var(--ouro-rgb), .14);
  padding: clamp(1.5rem, 2.6vw, 2.5rem); display: flex; align-items: flex-end;
}
.cartao:nth-child(1) { grid-column: 1 / span 7; grid-row: span 2; }
.cartao:nth-child(2) { grid-column: 8 / span 5; }
.cartao:nth-child(3) { grid-column: 8 / span 5; }
.cartao:nth-child(4) { grid-column: 1 / span 5; }
.cartao:nth-child(5) { grid-column: 6 / span 7; }
.cartao__corpo { position: relative; z-index: 2; }
.cartao h3 { font-family: var(--fonte-display); font-size: clamp(1.9rem, 2.5vw, 2.5rem); line-height: 1.05; margin-bottom: .75rem; }
.cartao p { color: var(--nude-suave); max-width: 38ch; margin-bottom: 1rem; }
.cartao--principal {
  background:
    radial-gradient(ellipse 80% 60% at 85% 10%, rgba(var(--vinho-rosado-rgb), .55), transparent 70%),
    linear-gradient(160deg, var(--vinho-superficie), var(--vinho) 70%);
}
.cartao--principal h3 { font-size: clamp(2.4rem, 3.6vw, 3.6rem); }
.cartao__mono { position: absolute; top: clamp(1.5rem, 3vw, 2.6rem); right: clamp(1.5rem, 3vw, 2.6rem); height: 44%; width: auto; opacity: .92; }
.cartao__fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.03); transition: transform 1.4s var(--ease); }
.cartao--foto::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(var(--vinho-noite-rgb), .94) 12%, rgba(var(--vinho-noite-rgb), .5) 62%, rgba(var(--vinho-noite-rgb), .25));
}
.cartao--vela .cartao__fundo { object-position: 50% 30%; }
.cartao--foto:hover .cartao__fundo { transform: scale(1.08); }
.cartao--ouro { background: linear-gradient(125deg, rgba(var(--ouro-rgb), .2), var(--vinho-superficie) 55%); }
.holofote::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--ouro-rgb), .13), transparent 62%);
  transition: opacity .5s var(--ease);
}
.holofote:hover::before { opacity: 1; }

/* ---------- Resultados ---------- */
.resultados { background: var(--vinho); padding-block: var(--secao); }
.resultados__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; }
.casos {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: start;
}
.caso { margin: 0; }
.caso--1 { grid-column: 1 / span 6; }
.caso--2 { grid-column: 7 / span 3; margin-top: clamp(3rem, 9vw, 8rem); }
.caso--3 { grid-column: 10 / span 3; margin-top: clamp(6rem, 18vw, 16rem); }
.caso__foto {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid rgba(var(--ouro-rgb), .16);
  border-radius: var(--raio); overflow: hidden; cursor: pointer; background: var(--vinho-superficie);
}
.caso__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.caso__nitida { opacity: 0; transition: opacity .9s var(--ease); }
.caso.revelado .caso__nitida { opacity: 1; }
.caso__aviso {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .5em; white-space: nowrap;
  padding: .7rem 1.15rem; border-radius: var(--raio-pilula);
  background: rgba(var(--vinho-noite-rgb), .6); border: 1px solid rgba(var(--ouro-rgb), .45);
  font-size: .9rem; font-weight: 400; color: var(--nude); transition: opacity .45s var(--ease), border-color .3s;
}
.caso__foto:hover .caso__aviso { border-color: var(--ouro); }
.caso.revelado .caso__aviso { opacity: 0; }
.caso figcaption {
  display: grid; grid-template-columns: 1fr 1fr; text-align: center; margin-top: .9rem;
  font-weight: 500; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--nude-suave);
}
.resultados__pe {
  margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--linha);
  display: flex; justify-content: space-between; align-items: center; gap: 1.5rem 2rem; flex-wrap: wrap;
}
.nota { font-size: .95rem; color: var(--nude-suave); max-width: 52ch; margin: 0; }

/* ---------- Sobre ---------- */
.sobre { padding-block: var(--secao); }
.sobre__grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: center; }
.sobre__foto { position: relative; overflow: hidden; aspect-ratio: 2 / 3; border-radius: 999px 999px var(--raio) var(--raio); background: var(--vinho-superficie); }
.sobre__foto img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 30%; }
.sobre__registro { font-weight: 500; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro); margin: 1.1rem 0 2.2rem; }
.sobre__texto > p:not(.sobre__registro) { color: var(--nude-suave); font-size: 1.1rem; max-width: 46ch; line-height: 1.7; }
.sobre__citacao { margin: 2.2rem 0; padding-left: 1.6rem; border-left: 1px solid var(--ouro); }
.sobre__citacao p { font-family: var(--fonte-display); font-size: clamp(1.45rem, 2.1vw, 1.95rem); line-height: 1.3; color: var(--nude); margin: 0; max-width: 30ch; }

/* ---------- Instagram ---------- */
.insta { background: var(--vinho); padding-block: var(--secao); overflow: hidden; }
.insta__topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; flex-wrap: wrap; }
.insta__setas { display: flex; gap: .6rem; }
.seta-btn {
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--raio-pilula);
  border: 1px solid rgba(var(--ouro-rgb), .45); background: transparent; color: var(--nude); cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.seta-btn:hover { background: rgba(var(--ouro-rgb), .1); border-color: var(--ouro); }
.trilho {
  list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0 max(var(--gutter), calc((100% - var(--largura)) / 2)) 1rem;
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--largura)) / 2));
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho.arrastando { scroll-snap-type: none; cursor: grabbing; }
.trilho.arrastando .reel { pointer-events: none; }
.trilho li { flex: 0 0 auto; scroll-snap-align: start; }
.reel {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  width: clamp(15rem, 21vw, 18.5rem); aspect-ratio: 9 / 16; padding: 1.4rem;
  border-radius: var(--raio); border: 1px solid rgba(var(--ouro-rgb), .14);
  background: var(--vinho-superficie); color: var(--nude); text-decoration: none;
}
.reel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease); }
.reel::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(var(--vinho-noite-rgb), .96) 10%, rgba(var(--vinho-noite-rgb), .3) 58%, rgba(var(--vinho-noite-rgb), .12));
}
.reel:hover > img { transform: scale(1.05); }
.reel__tipo {
  position: absolute; top: 1.1rem; left: 1.1rem; display: inline-flex; align-items: center; gap: .45em;
  padding: .4rem .75rem; border-radius: var(--raio-pilula); background: rgba(var(--vinho-noite-rgb), .55);
  border: 1px solid rgba(var(--nude-rgb), .2); font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
}
.reel__tipo .ico { width: .95em; height: .95em; }
.reel__titulo { font-family: var(--fonte-display); font-size: clamp(1.5rem, 1.85vw, 1.8rem); line-height: 1.16; margin-bottom: 1.1rem; }
.reel__acao { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; font-size: .86rem; color: var(--ouro); }
.reel--texto { background: linear-gradient(165deg, var(--vinho-rosado), var(--vinho-superficie) 50%, var(--vinho-noite)); }
.reel--texto::after { display: none; }
.reel--perfil {
  justify-content: center; align-items: center; text-align: center; border-color: rgba(var(--ouro-rgb), .38);
  background: radial-gradient(circle at 50% 35%, rgba(var(--ouro-rgb), .2), transparent 62%), var(--vinho-noite);
}
.reel--perfil::after { display: none; }
.reel__mono { height: 28%; width: auto; margin-bottom: 1.8rem; }

/* ---------- Dúvidas ---------- */
.duvidas { padding-block: var(--secao); }
.duvidas__grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
.duvidas__lado { position: sticky; top: calc(var(--nav-h) + 3rem); display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
.duvidas__lado .secao__sub { margin: 0; }
.sanfona details { border-bottom: 1px solid var(--linha); }
.sanfona details:first-child { border-top: 1px solid var(--linha); }
.sanfona summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
  padding: 1.55rem 0; min-height: 44px; cursor: pointer;
  font-weight: 400; font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--nude); transition: color .3s;
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary:hover { color: var(--ouro-claro); }
.sanfona summary .ico { color: var(--ouro); transition: transform .45s var(--ease); }
.sanfona details[open] summary .ico { transform: rotate(45deg); }
.sanfona details p { margin: -.2rem 0 1.7rem; color: var(--nude-suave); max-width: 58ch; }
.sanfona details p a { color: var(--ouro); }

/* ---------- Final ---------- */
.final {
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(7rem, 14vw, 12rem);
  background: radial-gradient(ellipse 55% 75% at 78% 100%, rgba(var(--vinho-rosado-rgb), .5), transparent 70%), var(--vinho-noite);
}
.final__arco {
  position: absolute; right: 7vw; bottom: 0; z-index: -1; height: 88%; width: auto; aspect-ratio: 100 / 130;
  fill: none; stroke: rgba(var(--ouro-rgb), .4); stroke-width: .22; overflow: visible;
}
.final__grade { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem 4rem; align-items: end; }
.final__chamada .botao { margin-top: 2.4rem; }
.final__endereco { font-style: normal; display: flex; flex-direction: column; gap: .3rem; color: var(--nude-suave); }
.final__rotulo { font-family: var(--fonte-display); font-size: 2rem; color: var(--nude); margin-bottom: .3rem; }
.final__ref { margin-bottom: .8rem; }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding-top: clamp(3.5rem, 6vw, 5rem); background: var(--vinho-noite); }
.rodape__grade { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2.5rem 4rem; align-items: center; }
.rodape__logo { width: 210px; height: auto; }
.rodape__info p { margin: .15rem 0; font-size: .92rem; color: var(--nude-suave); }
.rodape__links { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.rodape__links a, .rodape__cookies {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: .92rem; color: var(--nude); text-decoration: none; transition: color .3s;
}
.rodape__links a:hover, .rodape__cookies:hover { color: var(--ouro); }

.cred-lbl-faixa { display: flex; justify-content: flex-end; padding: 2.5rem clamp(1.25rem, 5vw, 4rem) 2.75rem; }
.cred-lbl {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  font-size: .82rem; letter-spacing: .01em; color: var(--nude-suave);
  opacity: .68; text-decoration: none; transition: opacity .25s ease;
}
.cred-lbl svg { width: 1.05em; height: 1.05em; flex: none; }
.cred-lbl:hover, .cred-lbl:focus-visible { opacity: 1; text-decoration: underline; }
.cred-lbl:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Flutuante e cookies ---------- */
.wa-flutuante {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 60;
  width: 58px; height: 58px; display: none; place-items: center; border-radius: var(--raio-pilula);
  background: var(--ouro); color: var(--vinho-noite); box-shadow: 0 10px 30px rgba(var(--vinho-noite-rgb), .5);
  opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.wa-flutuante .ico { width: 26px; height: 26px; }
.wa-flutuante.visivel { opacity: 1; transform: none; pointer-events: auto; }
.cookies {
  position: fixed; left: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 70; max-width: 25rem;
  padding: 1.25rem 1.35rem; border-radius: var(--raio); background: var(--vinho-superficie);
  border: 1px solid rgba(var(--ouro-rgb), .3); box-shadow: 0 18px 50px rgba(var(--vinho-noite-rgb), .6);
  font-size: .92rem; color: var(--nude);
}
.cookies[hidden] { display: none; }
.cookies p { margin: 0 0 1rem; }
.cookies a { color: var(--ouro); }
.cookies__acoes { display: flex; gap: .6rem; justify-content: flex-end; }

/* ---------- Páginas internas (privacidade, 404) ---------- */
.interna { padding: calc(var(--nav-h) + 4rem) 0 var(--secao); }
.interna .envelope { max-width: 46rem; }
.interna h1 { font-family: var(--fonte-display); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin-bottom: 1.5rem; }
.interna h2 { font-family: var(--fonte-texto); font-weight: 500; font-size: 1.15rem; color: var(--ouro); margin: 2.4rem 0 .8rem; }
.interna p, .interna li { color: var(--nude-suave); }
.interna a { color: var(--ouro); }
.erro { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: var(--gutter); }
.erro__mono { height: 120px; width: auto; margin: 0 auto 2rem; }
.erro h1 { font-family: var(--fonte-display); font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.05; margin-bottom: 1rem; }
.erro p { color: var(--nude-suave); max-width: 36ch; margin: 0 auto 2rem; }
.erro__acoes { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .wa-flutuante { display: grid; }
  .cookies { right: 5.5rem; }
}
@media (max-width: 960px) {
  .metodo__palco { grid-template-columns: minmax(0, 1fr) auto; min-height: 0; padding: var(--secao) 0; gap: 2.5rem 1.5rem; align-items: start; }
  .metodo__titulo { grid-column: 1 / -1; max-width: none; }
  .metodo__desenho { grid-column: 2; grid-row: 2; position: sticky; top: calc(var(--nav-h) + 1.5rem); }
  .metodo__etapas { grid-column: 1; grid-row: 2; }
  .contorno { height: min(62vh, 520px); min-height: 0; }
  .bento { grid-template-columns: 1fr 1fr; }
  .cartao:nth-child(n) { grid-column: auto / span 1; grid-row: auto; min-height: 17rem; }
  .cartao:nth-child(1) { grid-column: 1 / -1; min-height: 24rem; }
  .sobre__grade, .duvidas__grade, .final__grade { grid-template-columns: 1fr; }
  .sobre__foto { max-width: 30rem; }
  .duvidas__lado { position: static; }
  .rodape__grade { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: calc(var(--nav-h) + 1.75rem); }
  .hero__texto { padding-bottom: 1rem; min-width: 0; }
  .hero__sub { margin: 1.2rem 0 1.8rem; }
  .hero__figura { height: min(64dvh, 560px); width: 100%; min-width: 0; margin-top: 1rem; }
  .hero__foto {
    max-width: 100%;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%); mask-image: linear-gradient(to top, transparent 0, #000 16%);
  }
}
@media (max-width: 640px) {
  :root { --nav-h: 64px; }
  .nav__nome { display: none; }
  .nav__mono { height: 34px; }
  .metodo__palco { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .metodo__desenho { grid-column: 1; grid-row: 2; justify-self: end; margin-right: -10%; opacity: .55; z-index: 0; }
  .metodo__etapas { grid-column: 1; grid-row: 2; position: relative; z-index: 1; }
  .contorno { height: min(60vh, 460px); }
  .etapa p { max-width: 24ch; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .cartao:nth-child(n) { grid-column: 1 / -1; min-height: 16rem; }
  .cartao:nth-child(1) { min-height: 27rem; }
  .cartao__mono { height: 6.5rem; }
  .casos { grid-template-columns: 1fr 1fr; }
  .caso--1 { grid-column: 1 / -1; }
  .caso--2, .caso--3 { grid-column: auto / span 1; margin-top: 0; }
  .caso__aviso { font-size: .82rem; padding: .55rem .9rem; }
  .final__arco { right: -46vw; height: 62%; stroke-opacity: .6; }
  .cred-lbl-faixa { justify-content: center; padding-block: 2rem; padding-bottom: 6rem; }
  .cookies { left: .75rem; right: .75rem; max-width: none; bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
  .hero__acoes .botao { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa__trilho { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}