/* Volte a Ser Ela, Nara Braitt. Base: landing v4 Camila Cele. Painéis por cor, cantos arredondados, serifa de luxo e vidro fosco. */
:root {
  --areia: #FBF3EC;        /* fundo da página */
  --amendoa: #EFD3C3;
  --amendoa-clara: #F7E8DE;
  --caramelo: #A9502F;     /* traços e itálicos em fundo claro */
  --champanhe: #F0C3A6;    /* acento em fundo escuro */
  --espresso: #2E1610;     /* painéis escuros */
  --espresso-2: #3D1E16;
  --cafe: #43231A;         /* texto */
  --cafe-suave: #7C5244;
  --champanhe-claro: #F6D2BA; /* hover do botão claro */
  --argila: #E2B49B;          /* fim dos degradês claros */
  --taupe: #B8A598;           /* fundo do estúdio da foto */

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, -apple-system, sans-serif;
  --script: 'Pinyon Script', 'Snell Roundhand', cursive;

  --linha: 1px solid color-mix(in srgb, var(--caramelo) 28%, transparent);
  --linha-escura: 1px solid color-mix(in srgb, var(--areia) 14%, transparent);
  --margem: clamp(20px, 4.5vw, 64px);
  --max: 1320px;
  --raio: clamp(24px, 3vw, 40px);
  --suave: cubic-bezier(.22, .8, .2, 1);

  interpolate-size: allow-keywords;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  margin: 0; background: var(--areia); color: var(--cafe);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote, ol, ul { margin: 0; }
p, dd, blockquote { text-wrap: pretty; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; font-weight: 400; color: var(--caramelo); }
:focus-visible { outline: 2px solid var(--caramelo); outline-offset: 4px; }
.ico { width: 20px; height: 20px; flex: none; }

.pular { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--cafe); color: var(--areia); padding: 10px 16px; border-radius: 999px; }
.pular:focus { top: 16px; }
.moldura { max-width: var(--max); margin-inline: auto; padding-inline: var(--margem); }

/* ---------- Painéis (seções por cor) ---------- */
.painel { position: relative; margin: 12px; border-radius: var(--raio); overflow: clip; isolation: isolate; }
.painel-escuro {
  color: var(--areia);
  background:
    radial-gradient(55% 60% at 78% 35%, rgba(169, 80, 47, .32), transparent 70%),
    radial-gradient(40% 45% at 8% 100%, rgba(240, 195, 166, .10), transparent 70%),
    var(--espresso);
}
.painel-escuro em { color: var(--champanhe); }
.painel-amendoa { background: var(--amendoa); }
.painel-claro { background: var(--amendoa-clara); }

/* ---------- Tipografia ---------- */
.rotulo {
  display: flex; align-items: center; gap: 14px; margin-bottom: 22px;
  font: 600 .72rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--caramelo);
}
.rotulo::before { content: ''; width: 32px; height: 1px; background: currentColor; }
.painel-escuro .rotulo { color: var(--champanhe); }
.titulo-sec { font: 500 clamp(2.7rem, 5vw, 4.5rem)/1 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.sec-intro { color: var(--cafe-suave); max-width: 32em; margin-top: 20px; }
.sec-intro a { text-underline-offset: 4px; text-decoration-color: var(--caramelo); }

/* ---------- Vidro fosco (liquid glass) ---------- */
.vidro {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 20px 44px -22px rgba(0, 0, 0, .55);
}
.vidro-claro {
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28));
  border-color: rgba(255, 255, 255, .7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -22px rgba(67, 35, 26, .45);
  color: var(--cafe);
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 18px;
  padding: 7px 7px 7px 26px; border: 0; border-radius: 999px; cursor: pointer;
  font: 600 .76rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  transition: translate .45s var(--suave), background-color .3s, box-shadow .3s;
}
.btn-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; transition: rotate .5s var(--suave), scale .5s var(--suave); }
@media (hover: hover) { .btn:hover .btn-ico { rotate: -14deg; scale: 1.06; } }
.btn-claro { background: var(--champanhe); color: var(--espresso); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset; }
@media (hover: hover) { .btn-claro:hover { background: var(--champanhe-claro); } }
.btn-claro .btn-ico { background: var(--espresso); color: var(--champanhe); }
.btn-escuro { background: var(--espresso); color: var(--areia); }
@media (hover: hover) { .btn-escuro:hover { background: var(--espresso-2); } }
.btn-escuro .btn-ico { background: var(--champanhe); color: var(--espresso); }

.link-sutil {
  color: inherit; opacity: .78; text-decoration: none; font-size: .95rem;
  background: linear-gradient(currentColor, currentColor) left calc(100% - 6px) / 100% 1px no-repeat; padding-block: 11px 9px;
  transition: background-size .45s var(--suave), opacity .3s;
}
@media (hover: hover) { .link-sutil:hover { opacity: 1; background-size: 0 1px; background-position: right calc(100% - 6px); } }

/* ---------- Topo (menu flutuante de vidro) ---------- */
.topo { position: fixed; inset: 22px 0 auto; z-index: 50; padding-inline: max(24px, calc((100vw - var(--max)) / 2 + 12px)); pointer-events: none; }
.topo-barra {
  pointer-events: auto;
  display: flex; align-items: center; gap: 32px;
  padding: 10px 10px 10px 26px; border-radius: 999px; color: var(--areia);
  background: rgba(46, 22, 16, .42);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 40px -20px rgba(0, 0, 0, .5);
  transition: background-color .4s;
}
.topo.rolado .topo-barra { background: rgba(46, 22, 16, .9); }
.marca { display: flex; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; line-height: 1; }
.marca-texto { display: grid; }
.marca-simbolo { width: 34px; height: 34px; flex: none; fill: var(--champanhe); }
.marca-nome { font: 500 1.5rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.sem-quebra { white-space: nowrap; }
.marca-sub { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; opacity: .7; margin-top: 5px; }
.menu { display: flex; gap: 28px; margin-left: auto; }
.menu a { text-decoration: none; font-size: .875rem; opacity: .8; transition: opacity .3s; }
@media (hover: hover) { .menu a:hover { opacity: 1; } }
.btn-topo {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px;
  background: var(--champanhe); color: var(--espresso); text-decoration: none;
  font: 600 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s;
}
@media (hover: hover) { .btn-topo:hover { background: var(--champanhe-claro); } }
.btn-topo .ico { width: 18px; height: 18px; }

/* ---------- Hero ---------- */
.hero { min-height: calc(100svh - 24px); max-height: 1000px; display: flex; flex-direction: column; }
.hero-grade {
  flex: 1; width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 32px; align-items: center;
  min-height: 640px;
}
.hero-texto { position: relative; z-index: 3; padding-block: 140px 150px; translate: 0 calc(var(--p, 0) * -70px); opacity: calc(1 - var(--p, 0) * 1.3); }
.hero .rotulo { animation: aparecer 1s var(--suave) .1s both; }
.hero-titulo { font: 500 clamp(3rem, 5.4vw, 5.4rem)/.98 var(--serif); letter-spacing: -.015em; }
.linha { display: block; overflow: clip; padding-bottom: .08em; }
.linha > span { display: inline-block; animation: subir 1.1s var(--suave) both; }
.linha:nth-child(2) > span { animation-delay: .09s; }
.linha:nth-child(3) > span { animation-delay: .18s; }
.hero-sub { margin-top: 28px; max-width: 31em; color: rgba(251, 243, 236, .74); font-size: 1.125rem; animation: aparecer 1s var(--suave) .45s both; }
.hero-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 40px; animation: aparecer 1s var(--suave) .6s both; }

.traco { fill: none; stroke: var(--champanhe); stroke-width: 2.2; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracar 1.8s var(--suave) .55s forwards; }
.traco.fino { stroke-width: 1.6; opacity: .4; animation-delay: .9s; }
.foto img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }

.selo { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 20px; font-size: .8125rem; line-height: 1.3; }
.selo strong { font: 500 2.2rem/1 var(--serif); }

/* faixa de vidro com os temas da jornada */
.faixa {
  position: absolute; z-index: 4; left: 16px; right: 16px; bottom: 16px;
  display: flex; align-items: center; gap: 16px; padding: 8px; border-radius: 24px;
  animation: aparecer 1s var(--suave) .9s both;
}
.faixa-fixo {
  flex: none; padding: 14px 20px; border-radius: 16px; background: rgba(255, 255, 255, .14);
  font: 500 1.15rem/1.1 var(--serif); color: var(--areia);
}
.faixa-janela { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.faixa-trilho { display: flex; width: max-content; animation: rolar 42s linear infinite; }
.faixa-trilho ul { display: flex; }
.faixa-trilho li { padding-inline: 28px; white-space: nowrap; font-size: .95rem; color: rgba(251, 243, 236, .86); position: relative; }
.faixa-trilho li::after { content: ''; position: absolute; right: -3px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--champanhe); opacity: .6; }

/* ---------- Como ajudo (cartões) ---------- */
.ajuda { padding-block: clamp(96px, 12vw, 160px); }
.sec-cabeca { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.sec-cabeca .sec-intro { margin-top: 0; }
.cartoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cartao {
  position: relative; display: flex; flex-direction: column; height: 100%; min-height: 440px;
  padding: 28px; border-radius: 28px; background: var(--amendoa-clara); text-decoration: none;
  transition: background-color .5s var(--suave), color .5s var(--suave), translate .5s var(--suave);
}
.cartao-ico {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--caramelo) 40%, transparent);
  transition: border-color .5s;
}
.icone { width: 30px; height: 30px; }
.icone * { fill: none; stroke: var(--caramelo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .5s; }
.cartao h3 { margin-top: clamp(56px, 7vw, 96px); font: 500 2.6rem/1 var(--serif); }
.cartao p { margin: 14px 0 28px; font-size: .95rem; color: var(--cafe-suave); transition: color .5s; }
.cartao-acao {
  display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; border-top: var(--linha);
  font: 600 .7rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.cartao-acao .ico { width: 18px; height: 18px; color: var(--caramelo); }
@media (hover: hover) {
  .cartao:hover { background: var(--espresso); color: var(--areia); }
  .cartao:hover p { color: rgba(251, 243, 236, .72); }
  .cartao:hover .icone * { stroke: var(--champanhe); animation: tracar-de-novo 1.1s var(--suave); }
  .cartao:hover .cartao-ico { border-color: rgba(240, 195, 166, .4); }
  .cartao:hover .cartao-acao { border-color: rgba(251, 243, 236, .14); }
  .cartao:hover .cartao-acao .ico { color: var(--champanhe); }
}
.cartao:focus-visible { outline-offset: 3px; }

/* ---------- Sobre (painel amêndoa) ---------- */
.sobre-grade {
  max-width: var(--max); margin-inline: auto; padding: clamp(28px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.sobre-visual {
  position: relative; overflow: clip; aspect-ratio: 4 / 5; border-radius: 28px;
  background: radial-gradient(70% 60% at 50% 30%, #FDF2EA, var(--amendoa-clara) 55%, #E9C1AA);
}
.sobre-selos { position: absolute; z-index: 2; left: 16px; bottom: 16px; display: flex; }
.sobre-selos .selo { position: static; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.sobre-texto { padding-block: clamp(8px, 3vw, 40px); max-width: 36rem; }
.sobre-texto > p:not(.rotulo) { margin-top: 20px; color: color-mix(in srgb, var(--cafe) 82%, transparent); }
.sobre-texto .titulo-sec { margin-bottom: 8px; }
.ficha { margin-block: 36px 40px; border-top: 1px solid color-mix(in srgb, var(--cafe) 16%, transparent); }
.ficha > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 16px; align-items: baseline; padding-block: 14px; border-bottom: 1px solid color-mix(in srgb, var(--cafe) 16%, transparent); }
.ficha dt { font-size: .8125rem; letter-spacing: .06em; color: color-mix(in srgb, var(--cafe) 70%, transparent); }
.ficha dd { font: 500 1.35rem/1.2 var(--serif); }

/* ---------- Etapas ---------- */
.etapas { padding-block: clamp(96px, 12vw, 168px); }
.etapas-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: start; }
.etapas-cabeca { position: sticky; top: 140px; }
.etapas-cabeca .btn { margin-top: 36px; }
.etapas-corpo { position: relative; padding-left: 96px; }
.etapas-trilho { position: absolute; left: 27px; top: 8px; bottom: 0; width: 1px; background: color-mix(in srgb, var(--caramelo) 22%, transparent); }
.etapas-linha { position: absolute; inset: 0; background: var(--caramelo); transform-origin: top; scale: 1 var(--lp, 0); }
.etapa { position: relative; padding-block: 0 clamp(40px, 5vw, 56px); margin-bottom: clamp(40px, 5vw, 56px); border-bottom: var(--linha); }
.etapa:last-child { margin-bottom: 0; }
.etapa-num { display: block; font: 500 1.6rem/1 var(--serif); color: var(--caramelo); }
.etapa h3 { font: 500 clamp(2rem, 3vw, 2.6rem)/1.05 var(--serif); margin-top: 10px; }
.etapa p { margin-top: 14px; color: var(--cafe-suave); max-width: 30em; }

/* ---------- Dúvidas ---------- */
.duvidas { padding-block: clamp(96px, 12vw, 160px); }
.duvidas-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; }
.perguntas { display: grid; gap: 10px; }
details { border-radius: 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--caramelo) 16%, transparent); transition: background-color .4s; }
details[open] { background: var(--amendoa-clara); }
summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 20px 20px 26px; cursor: pointer; list-style: none;
  font: 500 1.4rem/1.25 var(--serif);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ''; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background:
    linear-gradient(var(--cafe), var(--cafe)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--cafe), var(--cafe)) center / 1.5px 12px no-repeat,
    var(--amendoa-clara);
  transition: rotate .5s var(--suave), background-color .4s;
}
details[open] summary::after { rotate: 45deg; background-color: var(--areia); }
details::details-content { block-size: 0; overflow: clip; transition: block-size .55s var(--suave), content-visibility .55s allow-discrete; }
details[open]::details-content { block-size: auto; }
details p { padding: 0 26px 24px; color: var(--cafe-suave); max-width: 40em; }

/* ---------- Contato (painel escuro com anéis) ---------- */
.contato { padding-top: clamp(96px, 12vw, 160px); }
.contato::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 18%, transparent 0 239px, rgba(240, 195, 166, .12) 240px 241px);
  mask-image: radial-gradient(70% 60% at 50% 20%, #000, transparent 75%);
}
.contato-topo { text-align: center; }
.contato-topo .rotulo { justify-content: center; }
.contato-titulo { font: 500 clamp(2.8rem, 6vw, 5.6rem)/1 var(--serif); letter-spacing: -.015em; text-wrap: balance; max-width: 14em; margin-inline: auto; }
.contato-sub { margin: 24px auto 0; max-width: 34em; color: rgba(251, 243, 236, .74); }
.contato-grade { display: grid; grid-template-columns: minmax(0, 860px); justify-content: center; margin-top: 64px; }

.rodape {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px;
  margin-top: clamp(80px, 10vw, 128px); padding-block: 32px 40px; border-top: var(--linha-escura);
  font-size: .875rem; color: rgba(251, 243, 236, .6);
}
.assinatura { margin-left: auto; font-size: .8125rem; letter-spacing: .04em; color: rgba(251, 243, 236, .55); }
.assinatura { display: inline-flex; align-items: center; gap: 10px; }
.assinatura-sep { opacity: .4; }
.gatzby { display: inline-flex; align-items: flex-start; gap: 3px; color: var(--champanhe); }
.gatzby-logo { width: auto; height: 14px; }
.gatzby-r { font-size: .62rem; line-height: 1; margin-top: -3px; }
.rodape-marca { display: flex; align-items: center; gap: 12px; font: 500 1.6rem/1 var(--serif); color: var(--areia); margin-right: auto; }

/* ---------- Cursor (só mouse) ---------- */
.cursor {
  /* sem mix-blend-mode: no Chrome ele pisca sobre elementos com backdrop-filter (vidro) */
  position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid var(--caramelo); box-shadow: 0 0 0 1px rgba(251, 243, 236, .35);
  opacity: 0; will-change: transform; transition: opacity .3s, background-color .3s, border-color .3s;
}
.cursor.on { opacity: 1; }
.cursor.sobre-link { background: rgba(240, 195, 166, .16); border-color: var(--champanhe); }

/* ---------- Revelações ao rolar (só com JS) ---------- */
.js .revela { clip-path: inset(0 0 100% 0); translate: 0 36px; transition: clip-path 1.1s var(--suave), translate 1.1s var(--suave); }
.js .revela.visivel { clip-path: inset(-10% -5% -20% -5%); translate: 0 0; }
/* cortina em vez de clip-path: o Chrome considera o clip-path do alvo no IntersectionObserver */
.js .revela-foto::after { content: ''; position: absolute; inset: 0; z-index: 3; background: var(--fundo, var(--areia)); transform-origin: top; transition: scale 1.4s var(--suave); }
.js .revela-foto.visivel::after { scale: 1 0; }

/* ---------- Conteúdo pendente (prévia) ---------- */
.aviso-previa { display: none; }
html:not(.preview) .exemplo { display: none; }
.preview .tbd, .preview .tbd-bloco { outline: 1.5px dashed #E89B10; outline-offset: 3px; }
.preview .tbd { background: rgba(255, 205, 96, .16); }
.preview .aviso-previa {
  display: block; position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: min(340px, 62vw);
  padding: 10px 14px; border-radius: 12px; background: #FFF4DA; color: #7D4F00; font-size: .8125rem; line-height: 1.4;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .25);
}


/* ================= Volte a Ser Ela: blocos da página de vendas ================= */
.ela { font-family: var(--script); font-weight: 400; font-style: normal; letter-spacing: 0; color: var(--champanhe); }
.marca-nome .ela { font-size: 1.32em; margin-left: .04em; line-height: .8; }
.hero-nota { margin-top: 18px; font-size: .8125rem; letter-spacing: .04em; color: rgba(251, 243, 236, .6); animation: aparecer 1s var(--suave) .7s both; }
.btn-topo .ico { width: 16px; height: 16px; }


/* Espelho */
.espelho { padding-block: clamp(96px, 12vw, 160px); }
.espelho-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(40px, 7vw, 112px); align-items: start; }
.texto-corrido { display: grid; gap: 18px; margin-top: 32px; max-width: 34em; color: var(--cafe-suave); }
.texto-corrido strong { color: var(--cafe); font-weight: 600; }
.espelho-lista { position: sticky; top: 130px; }
.lista-titulo { font: italic 500 2rem/1 var(--serif); color: var(--caramelo); margin-bottom: 18px; }
.sinais { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sinais li { padding: 18px 20px; border-radius: 22px; background: var(--amendoa-clara); font: 500 1.28rem/1.2 var(--serif); }
.espelho-fecho { margin-top: 28px; font: 500 clamp(1.5rem, 2.2vw, 1.9rem)/1.25 var(--serif); text-wrap: balance; }

/* Virada */
.virada-moldura { padding-block: clamp(72px, 9vw, 120px); }
.cartoes-virada .cartao { min-height: 0; background: var(--areia); }
.cartao-num { font: 500 1.1rem/1 var(--serif); color: var(--caramelo); font-variant-numeric: lining-nums; }
.cartoes-virada .cartao h3 { margin-top: clamp(48px, 6vw, 88px); }
.cartoes-virada .cartao p { margin-bottom: 0; font-size: 1rem; }
.virada-pe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 40px; }
.virada-pe p { font: 500 clamp(1.4rem, 2vw, 1.75rem)/1.25 var(--serif); max-width: 24em; }

/* Quem é */
.sobre { --fundo: var(--amendoa-clara); }
.sobre-selos .selo strong { color: var(--caramelo); }
.sobre-texto strong { font-weight: 600; color: var(--cafe); }

/* Como funciona */
.como-grade {
  max-width: var(--max); margin-inline: auto; padding: clamp(72px, 9vw, 128px) var(--margem);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center;
}
.como-desc { margin-top: 20px; color: rgba(251, 243, 236, .76); max-width: 32em; }
.como-fatos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding: 32px; border-radius: 28px; }
.como-fatos dt { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(251, 243, 236, .66); }
.como-fatos dd { font: 500 clamp(3.4rem, 5vw, 4.6rem)/1 var(--serif); color: var(--champanhe); margin-top: 6px; }
.como-fatos .dd-texto { font-size: 1.45rem; line-height: 1.15; color: var(--areia); }

/* Fases (arco em vez de porta) */
.arco { position: absolute; left: -82px; top: -10px; width: 56px; height: 56px; overflow: visible; transition: opacity .7s var(--suave); }
.arco-vao { fill: var(--areia); }
.arco-linha { fill: none; stroke: var(--caramelo); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--suave) .1s; }
.etapa.ativa .arco-linha { stroke-dashoffset: 0; }
.etapa-num { transition: opacity .7s var(--suave); letter-spacing: .02em; }
.js .etapa:not(.ativa) .arco, .js .etapa:not(.ativa) .etapa-num { opacity: .32; }
.temas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.temas li { padding: 8px 14px; border-radius: 999px; border: var(--linha); font-size: .875rem; color: var(--cafe); background: #fff8; }

/* Já tentei */
.tentei-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 6vw, 96px); align-items: center; padding-block: clamp(72px, 9vw, 128px); }
.tentei-texto { color: var(--cafe-suave); max-width: 30em; }
.tentei-texto + .tentei-texto { margin-top: 18px; }
.citacao { text-align: center; }
.citacao-coroa { width: 44px; height: 33px; margin: 0 auto 22px; color: var(--caramelo); }
.citacao blockquote { font: 500 clamp(2.2rem, 4vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.citacao figcaption { margin: 26px auto 0; max-width: 28em; color: var(--cafe-suave); }

/* Dia 21 */
.dia21 { padding-block: clamp(96px, 12vw, 160px); --fundo: var(--areia); }
.dia21-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px clamp(40px, 7vw, 112px); align-items: center; }
.dia21-visual { position: relative; overflow: clip; border-radius: 50% 50% 32px 32px / 40% 40% 32px 32px; aspect-ratio: 4 / 5; }
.dia21-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; scale: 1.08; translate: 0 calc((.5 - var(--p, .5)) * 40px); }
.checks { display: grid; gap: 4px; margin-top: 32px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; padding-block: 14px; border-bottom: var(--linha); font-size: 1.0625rem; }
.checks .ico { margin-top: 3px; color: var(--caramelo); }
.dia21-fecho { margin-top: 28px; font: 500 clamp(1.45rem, 2.1vw, 1.8rem)/1.28 var(--serif); }

/* Para quem é */
.para-moldura { padding-block: clamp(72px, 9vw, 120px); }
.para-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.para-col { padding: clamp(24px, 3vw, 40px); border-radius: 28px; }
.para-sim { background: var(--espresso); color: var(--areia); }
.para-nao { background: var(--areia); }
.para-titulo { font: 500 2rem/1.05 var(--serif); margin-bottom: 18px; }
.para-sim .para-titulo { color: var(--champanhe); }
.para-col li { display: flex; gap: 14px; align-items: flex-start; padding-block: 13px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 14%, transparent); }
.para-col .ico { margin-top: 2px; }
.para-sim .ico { color: var(--champanhe); }
.para-nao .ico { color: var(--caramelo); }
.para-nao li { color: var(--cafe-suave); }

/* Oferta */
.oferta-grade {
  max-width: var(--max); margin-inline: auto; padding: clamp(72px, 9vw, 128px) var(--margem);
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px clamp(40px, 6vw, 96px); align-items: center;
}
.auditoria { display: grid; gap: 4px; margin-top: 28px; }
.auditoria li { padding: 14px 0 14px 28px; border-bottom: var(--linha-escura); position: relative; color: rgba(251, 243, 236, .92); font: 400 1.3rem/1.35 var(--serif); }
.auditoria li::before { content: '“'; position: absolute; left: 0; top: 10px; font: 500 2rem/1 var(--serif); color: var(--champanhe); }
.auditoria-fecho { margin-top: 26px; color: rgba(251, 243, 236, .72); max-width: 34em; }
.oferta-card { padding: clamp(28px, 3.4vw, 44px); border-radius: 32px; background: var(--areia); color: var(--cafe); box-shadow: 0 0 0 8px rgba(240, 195, 166, .12), 0 40px 80px -40px rgba(0, 0, 0, .7); }
.oferta-nome { font: 500 clamp(2.4rem, 3.6vw, 3.1rem)/1 var(--serif); text-align: center; }
.oferta-nome .ela { color: var(--caramelo); font-size: 1.35em; }
.oferta-sub { margin-top: 8px; text-align: center; font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--cafe-suave); }
.oferta-itens { display: grid; margin-top: 26px; border-top: 1px solid rgba(67, 35, 26, .14); }
.oferta-itens li { display: flex; gap: 14px; align-items: flex-start; padding-block: 13px; border-bottom: 1px solid rgba(67, 35, 26, .14); font-size: .95rem; line-height: 1.5; color: var(--cafe-suave); }
.oferta-itens strong { color: var(--cafe); font-weight: 600; }
.oferta-itens .ico { margin-top: 1px; color: var(--caramelo); }
.preco { display: flex; align-items: center; justify-content: center; gap: 22px; margin-block: 28px 24px; }
.preco-valor { font: 500 clamp(4.4rem, 7vw, 5.6rem)/.9 var(--serif); color: var(--cafe); font-variant-numeric: lining-nums; }
.preco-moeda { font-size: .36em; vertical-align: .95em; margin-right: 4px; color: var(--caramelo); }
.preco-detalhe { font-size: .875rem; line-height: 1.45; color: var(--cafe-suave); }
.preco-detalhe strong { color: var(--cafe); }
.btn-cheio { width: 100%; justify-content: space-between; }
.oferta-nota { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; font-size: .8125rem; color: var(--cafe-suave); text-align: center; }
.oferta-nota .ico { width: 15px; height: 15px; color: var(--caramelo); }

/* Garantia */
.garantia-sec { padding-block: clamp(96px, 11vw, 150px); }
.garantia-grade { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; max-width: 1080px; margin-inline: auto; }
.selo-garantia { width: clamp(180px, 22vw, 260px); }
.selo-garantia svg { width: 100%; height: auto; }
.sg-gira { transform-origin: 100px 100px; rotate: calc(var(--p, 0) * 220deg); } /* gira com a rolagem, não sozinho */
.sg-borda { fill: var(--espresso); }
.sg-miolo { fill: none; stroke: var(--champanhe); stroke-width: 1; opacity: .5; }
.sg-anel { font: 600 12.5px var(--sans); letter-spacing: 3.2px; fill: var(--champanhe); }
.sg-num { font: 500 76px var(--serif); fill: var(--areia); text-anchor: middle; }
.sg-dias { font: 600 12px var(--sans); letter-spacing: 4px; fill: var(--champanhe); text-anchor: middle; }
.garantia-texto { margin-top: 18px; color: var(--cafe-suave); max-width: 36em; }

/* Complementos */
.comp-moldura { padding-block: clamp(72px, 9vw, 120px); }
.comp-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.comp { display: flex; flex-direction: column; padding: 28px; border-radius: 28px; background: var(--areia); }
.comp-tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; border: var(--linha); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--caramelo); }
.comp h3 { margin-top: 22px; font: 500 1.75rem/1.1 var(--serif); text-wrap: balance; }
.comp p:not(.comp-tag):not(.comp-preco) { margin-top: 12px; font-size: .95rem; color: var(--cafe-suave); }
.comp-preco { margin-top: auto; padding-top: 22px; font: 500 1.6rem/1 var(--serif); color: var(--caramelo); font-variant-numeric: lining-nums; }
.comp-fecho { margin-top: 40px; text-align: center; font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.2 var(--serif); text-wrap: balance; }

.checks li > span:first-of-type { flex: 1; }
.semana { flex: none; align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--amendoa-clara); font-size: .72rem; letter-spacing: .06em; color: var(--caramelo); white-space: nowrap; }
.so-celular { display: none; }
.garantia-btn { margin-top: 28px; }
.virada-pe { justify-content: flex-start; }

/* Fechamento e rodapé */
.final-acoes { display: grid; justify-items: center; margin-top: 40px; }
.final-acoes .hero-nota { animation: none; }
.rodape-aviso { font-size: .8125rem; color: rgba(251, 243, 236, .6); }

@keyframes girar { to { rotate: 360deg; } }

@media (max-width: 1100px) {
  .comp-lista { grid-template-columns: 1fr; }
  .como-grade, .oferta-grade { grid-template-columns: 1fr; }
  .oferta-card { max-width: 560px; }
}
@media (max-width: 960px) {
  .espelho-grade, .tentei-grade, .dia21-grade, .para-grade { grid-template-columns: 1fr; }
  .espelho-lista { position: static; }
  .dia21-visual { max-width: 460px; }
  .garantia-grade { grid-template-columns: 1fr; justify-items: start; }
}
@media (max-width: 640px) {
  .marca-nome { font-size: 1.25rem; }
  .so-celular { display: inline-flex; margin-top: 32px; }
  .etapas-cabeca .btn { display: none; }
  .btn-topo { gap: 6px; }
  .btn-topo .ico { display: none; }
  .hero-nota { font-size: .75rem; }
  .sinais { gap: 8px; }
  .sinais li { padding: 14px; font-size: 1.08rem; border-radius: 18px; }
  .cartoes-virada .cartao { min-height: 170px; }
  .cartoes-virada .cartao h3 { margin-top: 18px; font-size: 1.5rem; }
  .cartoes-virada .cartao p { font-size: .82rem; }
  .virada-pe { margin-top: 28px; }
  .arco { left: -64px; width: 44px; height: 44px; top: -6px; }
  .temas li { font-size: .8rem; padding: 7px 12px; }
  .como-fatos { padding: 22px; gap: 20px; }
  .como-fatos dd { font-size: 2.8rem; }
  .como-fatos .dd-texto { font-size: 1.15rem; }
  .auditoria li { font-size: 1.2rem; }
  .preco { gap: 16px; }
  .selo-garantia { width: 170px; }
  .comp { padding: 22px; }
}

/* ---------- Animações ---------- */
@keyframes subir { from { translate: 0 125%; } }
@keyframes aparecer { from { opacity: 0; translate: 0 14px; } }
@keyframes erguer { from { scale: 1 0; } }
@keyframes esmaecer { from { opacity: 0; } }
@keyframes surgir { from { opacity: 0; scale: 1.035; } }
@keyframes tracar { to { stroke-dashoffset: 0; } }
@keyframes tracar-de-novo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes rolar { to { translate: -50% 0; } }

/* ---------- Responsivo ---------- */
@media (min-width: 961px) and (max-width: 1360px) {
}
@media (max-width: 1100px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartao { min-height: 360px; }
}
@media (max-width: 960px) {
  .menu { display: none; }
  .btn-topo { margin-left: auto; }
  .hero { min-height: 0; max-height: none; }
  .hero-grade { grid-template-columns: 1fr; min-height: 0; padding-top: 104px; }
      .hero-texto { padding-block: 36px 40px; translate: none; opacity: 1; }
  .faixa { position: relative; left: auto; right: auto; bottom: auto; margin: 0 12px 12px; }
  .sec-cabeca, .etapas-grade, .duvidas-grade, .contato-grade { grid-template-columns: 1fr; }
  .etapas-cabeca { position: static; }
  .sobre-grade { grid-template-columns: 1fr; }
  .sobre-visual { max-width: 560px; }
}
@media (max-width: 640px) {
  .painel { margin: 8px; border-radius: 28px; }
  .topo { inset: 14px 0 auto; padding-inline: 16px; }
  .topo-barra { padding: 8px 8px 8px 16px; gap: 12px; }
  .marca { gap: 10px; }
  .marca-simbolo { width: 28px; height: 28px; }
  .marca-nome { font-size: 1.3rem; }
  .marca-sub { display: none; }
  .btn-topo { min-height: 44px; padding: 0 14px; }
  .hero .rotulo { letter-spacing: .14em; font-size: .72rem; gap: 10px; }
  .hero .rotulo::before { width: 20px; }
  .hero-grade { padding-top: 88px; }
  .hero-texto { display: flex; flex-direction: column; }
  .hero-sub { order: 1; margin-top: 24px; }
  .hero-texto { padding-block: 28px 32px; }
  .hero-titulo { font-size: clamp(2.5rem, 11vw, 3rem); }
  .hero-sub { font-size: 1.0625rem; }
  .hero-acoes { margin-top: 24px; gap: 16px 24px; }
  .selo { padding: 10px 12px; font-size: .72rem; border-radius: 16px; gap: 8px; }
  .selo strong { font-size: 1.6rem; }
  .faixa-fixo { display: none; }
  .titulo-sec { font-size: clamp(2.4rem, 10vw, 2.9rem); }
  .btn { padding-left: 20px; gap: 12px; font-size: .7rem; letter-spacing: .1em; white-space: nowrap; }
  .cartoes, .garantias { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cartao, .garantia { display: flex; flex-direction: column; min-height: 0; padding: 16px 14px; border-radius: 20px; }
  .cartao-ico, .garantia .cartao-ico { width: 40px; height: 40px; }
  .cartao .icone, .garantia .icone { width: 20px; height: 20px; }
  .cartao h3 { margin-top: 14px; font-size: 1.55rem; }
  .garantia h3 { margin-top: 14px; font-size: 1.2rem; line-height: 1.15; }
  .cartao p, .garantia p { margin: 8px 0 12px; font-size: .8rem; line-height: 1.5; }
  .cartao-acao { margin-top: auto; min-height: 36px; padding-top: 10px; gap: 6px; font-size: .58rem; letter-spacing: .08em; }
  .cartao-acao .ico { width: 14px; height: 14px; }
  .rodape { flex-direction: column; align-items: flex-start; }
  .assinatura { margin-left: 0; }
  .sobre-selos .selo { padding: 12px 14px; }
  .sobre-selos .selo strong { font-size: 1.35rem; white-space: nowrap; }
  .ficha > div { grid-template-columns: 7.5rem 1fr; }
  .etapas-corpo { padding-left: 76px; }
  .etapas-trilho { left: 21px; }
    summary { font-size: 1.25rem; padding-left: 20px; }
  details p { padding-inline: 20px; }
  .contato-grade { margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .traco, .arco-linha { stroke-dashoffset: 0; }
  .js .revela { clip-path: none; translate: none; }
  .js .revela-foto::after { display: none; }
  .hero-texto, .hero-foto img, .sobre-foto img, .selo { translate: none; opacity: 1; }
  .etapas-linha { scale: 1 1; }
  .js .etapa:not(.ativa) .arco, .js .etapa:not(.ativa) .etapa-num { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .vidro, .topo-barra { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--espresso-2); }
  .vidro-claro { background: var(--areia); }
}

/* Ajustes da revisão de UX */
.faixa { background: linear-gradient(135deg, rgba(46, 22, 16, .62), rgba(46, 22, 16, .42)); -webkit-backdrop-filter: blur(18px) saturate(105%); backdrop-filter: blur(18px) saturate(105%); }
.faixa-fixo { background: rgba(255, 255, 255, .1); }
.painel-amendoa, .painel-claro { --caramelo: #8A3A22; }
.etapa:last-child { border-bottom: 0; padding-bottom: 0; }
.rotulo-extra { margin-left: -6px; }
@media (max-width: 640px) {
  .rotulo-extra { display: none; }
  .hero-grade { padding-top: 80px; }
  .hero-texto { padding-block: 18px 32px; }
  .hero .rotulo { margin-bottom: 14px; }
  .hero .link-sutil { display: none; }
  .hero-nota { text-wrap: balance; }
  .comp-lista { gap: 8px; }
  .comp { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 12px; padding: 16px 18px; }
  .comp-tag { grid-column: 1 / -1; }
  .comp h3 { margin-top: 4px; font-size: 1.3rem; }
  .comp p:not(.comp-tag):not(.comp-preco) { display: none; }
  .comp-preco { margin-top: 0; padding-top: 0; font-size: 1.25rem; }
}
/* o atalho font: zera font-variant-numeric; por isso fica no fim */
:is(.hero-titulo, .titulo-sec, .contato-titulo, .selo strong, .como-fatos dd, .faixa-fixo, .etapa-num, .comp h3, .sg-num, .preco-valor, .comp-preco, .cartao-num, .citacao blockquote) { font-variant-numeric: lining-nums; }

/* Correções do teste */
.hero .rotulo { flex-wrap: wrap; row-gap: 8px; line-height: 1.3; }
.rotulo { line-height: 1.3; }
@media (hover: hover) {
  .cartoes-virada .cartao:hover { background: var(--areia); color: inherit; }
  .cartoes-virada .cartao:hover p { color: var(--cafe-suave); }
}
@media (hover: none) { .btn:hover .btn-ico { rotate: none; scale: 1; } }
.cursor.sobre-link { border-color: var(--caramelo); background: rgba(169, 80, 47, .12); box-shadow: 0 0 0 1px rgba(251, 243, 236, .6); }
.painel-escuro :focus-visible, .topo :focus-visible { outline-color: var(--champanhe); }
main:focus { outline: none; }
.btn-topo { min-height: 44px; }
.menu a { padding-block: 10px; }
.so-celular { justify-self: start; }
@media (max-width: 1100px) { .oferta-card { justify-self: center; width: 100%; } }
@media (max-width: 960px) {
  .hero-texto { display: flex; flex-direction: column; }
  .hero-sub { order: 1; margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) { .dia21-visual img { translate: none; } }

/* Depoimentos (cartões em pé, prontos para vídeo ou foto + frase) */
.depoimentos { padding-block: clamp(96px, 12vw, 150px); }
.depo-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.depo { display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 28px; background: var(--amendoa-clara); }
.depo-midia { display: grid; place-items: center; aspect-ratio: 9 / 13; border-radius: 20px; background: linear-gradient(180deg, var(--amendoa), var(--argila)); color: var(--caramelo); }
.depo-midia .ico { width: 44px; height: 44px; opacity: .7; }
.depo blockquote { margin: 18px 10px 0; font: 500 1.3rem/1.25 var(--serif); }
.depo-nome { margin: auto 10px 0; padding-top: 14px; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--caramelo); }
.depo-pe { margin-top: 36px; }
@media (max-width: 960px) {
  .depo-lista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); }
  .depo-lista::-webkit-scrollbar { display: none; }
  .depo { flex: 0 0 min(68%, 300px); scroll-snap-align: start; }
}

/* ================= Topo: foto natural em arco (desktop) e capa em tela cheia (celular) ================= */
.hero-visual { position: relative; align-self: stretch; display: grid; align-items: center; padding-block: 104px 120px; }
.arco-foto { position: relative; justify-self: end; width: min(100%, 540px, calc((100svh - 250px) * .8)); aspect-ratio: 4 / 5; }
.hero-foto {
  position: absolute; inset: 0; overflow: clip;
  border-radius: 50% 50% 28px 28px / 40% 40% 28px 28px;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75);
  animation: arco-abrir 1.5s var(--suave) .1s both;
}
.hero-foto img {
  width: 100%; height: 124%; object-fit: cover; object-position: 50% 0%;
  translate: calc(var(--mx, 0) * -10px) calc(var(--p, 0) * 48px);
  animation: respirar 2.8s cubic-bezier(.16, 1, .3, 1) both;
}
.arco-traco { max-width: none; position: absolute; inset: -22px; width: calc(100% + 44px); height: calc(100% + 44px); overflow: visible; pointer-events: none; translate: calc(var(--mx, 0) * 14px) calc(var(--my, 0) * 8px); }
.arco-traco .traco { stroke-width: .3; opacity: .5; }
.selo-hero {
  left: -36px; bottom: 12%;
  background: linear-gradient(135deg, rgba(46, 22, 16, .64), rgba(46, 22, 16, .36)); color: var(--areia);
  translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -12px);
  animation: aparecer 1s var(--suave) 1.1s both;
}
.selo-hero strong { color: var(--champanhe); }
@keyframes arco-abrir { from { clip-path: inset(100% 0 0 0 round 50% 50% 28px 28px / 40% 40% 28px 28px); } to { clip-path: inset(0 round 50% 50% 28px 28px / 40% 40% 28px 28px); } }
@keyframes respirar { from { scale: 1.16; } to { scale: 1; } }

/* sobre: foto inteira de estúdio, sem recorte */
.sobre-visual { background: var(--taupe); }
.sobre-foto { position: absolute; inset: 0; }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; scale: 1.05; transform-origin: 50% 0; translate: 0 calc((.5 - var(--p, .5)) * 24px); }

@media (max-width: 960px) {
  .hero { min-height: 0; max-height: none; }
  .hero-grade { position: relative; display: block; min-height: 0; padding: 0; }
  .hero-visual { position: absolute; left: 0; right: 0; top: 0; bottom: auto; height: 80svh; padding: 0; }
  .arco-foto { position: absolute; inset: 0; width: auto; aspect-ratio: auto; justify-self: stretch; }
  .arco-traco { display: none; }
  .hero-foto {
    border-radius: 0; box-shadow: none; animation: none;
    -webkit-mask-image: linear-gradient(180deg, #000 36%, rgba(0, 0, 0, .38) 62%, transparent 90%);
    mask-image: linear-gradient(180deg, #000 36%, rgba(0, 0, 0, .38) 62%, transparent 90%);
  }
  .hero-foto img { height: 128%; object-position: 50% 0%; translate: 0 calc(var(--p, 0) * 70px); animation-duration: 3.2s; }
  .hero-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(46, 22, 16, .55) 0%, rgba(46, 22, 16, 0) 14%); }
  .hero-texto { position: relative; z-index: 2; padding: 55svh var(--margem) 32px; }
  .selo-hero { left: auto; right: 14px; bottom: auto; top: 40%; }
}
@media (max-width: 640px) {
  .hero-titulo { font-size: clamp(2.9rem, 13.6vw, 3.6rem); line-height: .96; text-shadow: 0 2px 28px rgba(46, 22, 16, .55); }
  .hero-texto { padding-bottom: 26px; }
  .hero .rotulo { margin-bottom: 16px; }
  .hero-sub { color: rgba(251, 243, 236, .8); }
  .hero .btn { width: 100%; justify-content: space-between; }
  .selo-hero { padding: 9px 12px; }
  .selo-hero strong { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-foto, .hero-foto img { animation: none; scale: 1; } }

/* Correções da auditoria final */
@media (max-width: 960px) { .hero-foto img { transform-origin: 50% 8%; } }
@media (max-width: 640px) and (max-height: 720px) { .hero-foto img { translate: 0 calc(var(--p, 0) * 70px + 14px); } }
.depo-lista { scroll-padding-inline: var(--margem); }
/* âncora acima do preço: o Lenis ignora scroll-margin */
.ancora { display: block; position: absolute; top: -24px; height: 0; }
.oferta-card { position: relative; }
@media (max-width: 960px) { .ancora { position: relative; top: calc(-1 * min(300px, 34svh)); } }
.oferta-card :focus-visible { outline-color: var(--caramelo); }
@media (max-width: 640px) {
  .comp-tag { justify-self: start; }
  .oferta-itens li { padding-block: 9px; font-size: .9rem; }
}
@media (min-width: 961px) and (max-height: 760px) {
  .hero-texto { padding-block: 110px 120px; }
  .hero-grade { min-height: 0; }
}

/* ================= Auditoria impeccable ================= */
/* superfícies do navegador na paleta */
::selection { background: var(--champanhe); color: var(--espresso); }
html { accent-color: var(--caramelo); caret-color: var(--caramelo); scrollbar-color: var(--cafe-suave) var(--areia); }
/* movimento contínuo pausa ao interagir (WCAG 2.2.2) */
.faixa:hover .faixa-trilho, .faixa:active .faixa-trilho { animation-play-state: paused; }
/* piso de 12px para rótulos e botões */
.rotulo, .como-fatos dt, .semana, .comp-tag, .depo-nome, .oferta-sub { font-size: .76rem; }
.btn { font-size: .78rem; }
@media (max-width: 640px) {
  .btn { font-size: .75rem; letter-spacing: .08em; }
  .hero .rotulo { font-size: .76rem; }
  .selo { font-size: .76rem; }
  .btn-topo { font-size: .76rem; letter-spacing: .08em; }
  .hero .btn { padding-left: 18px; gap: 8px; letter-spacing: .06em; }
}
.btn-ico { flex: none; }
@media (prefers-reduced-motion: reduce) { .sg-gira { rotate: none; } }

/* complementos só no computador; no celular aparecem no checkout (pedido do usuário) */
@media (max-width: 640px) { .complementos { display: none; } }