/* =====================================================================
   CAMADA LUXO (carregada depois de styles.css)
   Referências: hero do Volt (vividsites) e seções do Kernelcode.
   Tipografia de maison: Bodoni Moda (Didone de alto contraste, com tamanho óptico) nos títulos,
   Manrope nos textos e rótulos, DM Mono nos números técnicos.
   ===================================================================== */
:root {
  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
  --tom: #8d867c;          /* segunda frase dos títulos (contraste 3,4:1 sobre o marfim, só em títulos grandes) */
  --tom-escuro: #9a9184;   /* idem sobre o preto */
  --ouro: #c9a063;
}

/* ---------- títulos: serifa Didone, peso leve, tamanho óptico automático ---------- */
.display, .h2, .cine__title, .vitrine-head h1, .pdp__info h1, .piece__info h1, .tile__t, .promo h3, .casa .h2, .mar__t, .faq__item summary {
  font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; letter-spacing: -.012em; text-transform: none;
}
.h2 { font-size: clamp(34px, 4.2vw, 64px); line-height: 1.04; max-width: 18ch; }
.h2 .tom { color: var(--tom); }
.casa .h2 .tom, .section--dark .h2 .tom, .mar .tom { color: var(--tom-escuro); }
.h2 em, .cine__title em, .display em { font-style: italic; }
.vitrine-head h1 { letter-spacing: -.02em; }
.pdp__info h1 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1.04; }
.tile__t { font-size: clamp(26px, 2.4vw, 38px); line-height: 1.08; }
.mar__t { font-weight: 400; }

/* rótulos: caixa alta espaçada fina, sempre Manrope */
.eyebrow { font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: .32em; }

/* números técnicos (preço, referência, medidas) em mono, como relojoaria */
.facts b { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 5vw, 84px); letter-spacing: -.03em; }

/* ---------- cabeçalho no estilo Volt: logo à esquerda, menu ao centro, ação à direita ---------- */
@media (min-width: 1025px) {
  .top { grid-template-columns: auto 1fr auto; }
  .top__logo { order: -1; justify-self: start; }
  .top__nav { justify-self: center; gap: 36px; }
  .top__nav a { font-family: var(--font-body); font-size: 12px; letter-spacing: .22em; }
}

/* ---------- hero (Volt): vídeo escuro de tela cheia, tudo centralizado, números em mono embaixo ---------- */
.cine { display: grid; place-items: center; text-align: center; min-height: 100svh; }
.cine__shade { background: radial-gradient(70% 60% at 50% 52%, rgba(11,10,9,.28) 0%, rgba(11,10,9,.62) 62%, rgba(11,10,9,.86) 100%) !important; }
.cine__copy { max-width: 1100px; padding: calc(var(--header) + 24px) var(--gutter) 128px; display: flex; flex-direction: column; align-items: center; }
.cine__sobre { display: inline-flex; align-items: center; gap: 18px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .38em; color: #d9b98a; }
.cine__sobre::before, .cine__sobre::after { content: ''; width: 36px; height: 1px; background: currentColor; opacity: .7; }
.cine__title { margin-top: 28px; font-size: clamp(46px, 7.2vw, 118px); line-height: .96; letter-spacing: -.025em; max-width: 12ch; color: #f6f1e8; text-wrap: balance; }
.cine__title em { color: #e8cf9f; }
.cine__lead { margin-top: 28px; max-width: 44ch; font-size: clamp(16px, 1.15vw, 18px); color: #d8d0c3; }
.cine__ctas { justify-content: center; margin-top: 40px; gap: 18px 32px; }
.cine__offer { display: none !important; }   /* as ofertas seguem na faixa logo abaixo da hero */
.cine .guil { opacity: .12; }
.cine__dados { position: absolute; left: 0; right: 0; bottom: 34px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 0;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #b7ad9e; }
.cine__dados li { padding: 0 22px; }
.cine__dados li + li { border-left: 1px solid rgba(244,239,231,.22); }
.cine__dados b { font-weight: 400; color: #f4efe7; margin-right: 6px; }
.cine__copy > * { animation: sobe-luxo 1.4s var(--ease) both; }
.cine__copy > :nth-child(1) { animation-delay: .2s; } .cine__copy > :nth-child(2) { animation-delay: .35s; }
.cine__copy > :nth-child(3) { animation-delay: .6s; } .cine__copy > :nth-child(4) { animation-delay: .8s; }
.cine__dados { animation: sobe-luxo 1.4s 1s var(--ease) both; }
@keyframes sobe-luxo { from { opacity: 0; transform: translateY(28px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- botões: cantos retos, preenchimento que sobe, texto que rola, brilho dourado ---------- */
.btn { border-radius: 2px; min-height: 54px; padding: 0 30px; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; }
.btn::before { border-radius: 0; transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleY(1); transform-origin: bottom; }
.btn__t { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; vertical-align: middle; }
.btn__t > span { display: block; text-shadow: 0 1.25em 0 currentColor; transition: transform .6s cubic-bezier(.7, 0, .2, 1); }
.btn:hover .btn__t > span, .btn:focus-visible .btn__t > span { transform: translateY(-1.25em); }
.btn > .btn__brilho { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.btn > .btn__brilho::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 200, .38), transparent); transform: skewX(-20deg); }
.btn:hover > .btn__brilho::after { animation: brilho 1.1s var(--ease) .15s; }
@keyframes brilho { to { left: 130%; } }
.btn--solid { --fill: #9a6d2e; }
.btn--light { background: #f4efe7; color: var(--ink); border-color: #f4efe7; --on: #f4efe7; }
.btn--light::before { background: #0b0a09; box-shadow: none; }
.btn--light:hover { color: #f4efe7; background: #f4efe7; }
.cine__ctas .btn--light { background: transparent; color: #f4efe7; border: 1px solid rgba(244,239,231,.6); }
.cine__ctas .btn--light::before { background: #f4efe7; }
.cine__ctas .btn--light:hover { background: transparent; color: var(--ink); border-color: #f4efe7; }
.hairline { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .26em; }
.link { font-family: var(--font-body); font-size: 11.5px; letter-spacing: .26em; }
@media (hover: none) { .btn:hover .btn__t > span { transform: none; } .btn:hover::before { transform: scaleY(0); } .btn--light:hover, .cine__ctas .btn--light:hover { color: inherit; } }

/* ---------- títulos que entram palavra por palavra (Kernelcode) ---------- */
.palavras .pw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.palavras .pw > span { display: inline-block; transform: translateY(105%); transition: transform 1s cubic-bezier(.2, .7, .1, 1); transition-delay: calc(var(--i) * 55ms); }
.palavras.is-in .pw > span, .is-in .palavras .pw > span { transform: none; }

/* ---------- faixa das casas relojoeiras: serifa, romano e itálico alternados, sempre em movimento ---------- */
.casas { background: #0b0a09; color: #efe7da; overflow: hidden; padding-block: clamp(28px, 4vw, 52px); border-top: 1px solid #221f1b; }
.casas__track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.casas span { font-family: var(--serif); font-size: clamp(30px, 4vw, 60px); line-height: 1.1; white-space: nowrap; padding-right: .5em; }
.casas span:nth-child(even) { font-style: italic; color: #cbb08a; }
.casas span::after { content: '·'; padding-left: .5em; color: #6d655a; font-style: normal; }

/* ---------- diagramação: seções com respiro maior e composição variada ---------- */
.section { padding-block: clamp(88px, 10vw, 160px); }
.head-row { border-bottom: 0; padding-bottom: 0; align-items: end; }
.head-row__aside { font-size: 15px; }
.feature .h2 { max-width: 14ch; }
.steps ol li { border-top-color: rgba(27,25,22,.25); }
.steps li::before { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; }
.price { font-family: var(--serif); }
.card__name { letter-spacing: .01em; }

/* ---------- celular ---------- */
@media (max-width: 760px) {
  .h2 { font-size: clamp(32px, 9vw, 44px); max-width: none; }
  .cine__copy { padding: calc(var(--header) + 16px) 20px 132px; }
  .cine__title { font-size: clamp(44px, 13vw, 64px); max-width: 9ch; }
  .cine__lead { font-size: 16px; }
  .cine__ctas { flex-direction: column; width: 100%; }
  .cine__ctas .btn { width: 100%; }
  .cine__dados { bottom: 22px; padding-inline: 12px; font-size: 10.5px; letter-spacing: .1em; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; }
  .cine__dados li { padding: 0 10px; }
  .cine__dados li:nth-child(odd) { border-left: 0; }
  .cine__sobre { font-size: 10.5px; letter-spacing: .3em; gap: 12px; }
  .cine__sobre::before, .cine__sobre::after { width: 20px; }
  .casas span { font-size: 30px; }
  .section { padding-block: 72px; }
  .btn { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .palavras .pw > span { transform: none; transition: none; }
  .casas__track { animation: none; }
  .btn > .btn__brilho { display: none; }
  .cine__copy > *, .cine__dados { animation: none; }
}

/* ação do cabeçalho (Volt): retângulo vazado e fino; claro sobre a hero, escuro nas páginas claras */
.top .top__wa, body.has-hero .top .top__wa, body.has-hero .top.is-solid .top__wa, .has-hero .top .top__wa {
  min-height: 40px; padding: 0 18px; border-radius: 2px; background: transparent; box-shadow: none; filter: none; transform: none;
  border: 1px solid currentColor; color: var(--ink); font-family: var(--font-body); font-size: 11px; letter-spacing: .24em;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.top .top__wa svg, body.has-hero .top .top__wa svg, body.has-hero .top.is-solid .top__wa svg { color: currentColor; width: 15px; height: 16px; }
.top .top__wa:hover, body.has-hero .top.is-solid .top__wa:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: none; box-shadow: none; }
body.has-hero .top:not(.is-solid) .top__wa { color: #f4efe7; }
body.has-hero .top:not(.is-solid) .top__wa:hover { background: #f4efe7; color: var(--ink); border-color: #f4efe7; }
body.has-hero .top .top__wa span { border: 0 !important; }
@media (max-width: 1024px) { .top .top__wa, body.has-hero .top .top__wa { padding: 0; width: 40px; justify-content: center; border-radius: 50%; } .top .top__wa span { display: none; } }

/* =====================================================================
   BLOCOS REDESENHADOS: abertura das páginas, passos, garantias, números da casa e perguntas
   ===================================================================== */

/* abertura das páginas internas: título grande à esquerda em dois tons, texto à direita (Kernelcode) */
.page-top { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: 24px clamp(40px, 6vw, 120px); text-align: left;
  padding-block: clamp(72px, 9vw, 150px) clamp(56px, 6vw, 96px); }
.page-top .eyebrow { grid-column: 1 / -1; }
.page-top .display { margin: 0; max-width: 14ch; font-size: clamp(44px, 6.4vw, 104px); line-height: .98; letter-spacing: -.025em; }
.page-top .display .tom { color: var(--tom); }
.page-top .lead { margin: 0 0 .6em; max-width: 36ch; font-size: clamp(16px, 1.2vw, 18px); padding-left: 24px; border-left: 1px solid var(--bronze); }

/* passos e pilares: linha do tempo que se desenha ao aparecer, números grandes em serifa vazada */
.passos ol, .pilares__lista, .steps ol { position: relative; counter-reset: s; gap: clamp(24px, 3vw, 56px); padding-top: 28px; }
.passos ol::before, .pilares__lista::before, .steps ol::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.7, 0, .2, 1); }
.passos ol.is-in::before, .pilares__lista.is-in::before, .steps ol.is-in::before { transform: scaleX(1); }
.passos li, .pilares__lista li, .steps li { position: relative; border-top: 0 !important; padding-top: 0 !important; }
.passos li::after, .pilares__lista li::after, .steps li::after { content: ''; position: absolute; left: 0; top: -32px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1px solid var(--ink); }
.passos .num, .pilares__lista .num { display: block; font-family: var(--serif); font-size: clamp(64px, 6vw, 104px); line-height: .9; letter-spacing: -.04em; color: #8a6328; font-weight: 400; margin-top: 28px; }
.steps li::before { content: '0' counter(s); display: block; font-family: var(--serif) !important; font-size: clamp(64px, 6vw, 104px); line-height: .9; letter-spacing: -.04em; color: #8a6328; font-weight: 400; margin: 28px 0 0 !important; }
.passos h2, .pilares__lista h3, .steps li h3 { margin-top: 20px; font-family: var(--serif); font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; }
.passos .num, .pilares__lista .num, .steps li::before { transition: color .5s var(--ease); }
.passos li:hover .num, .pilares__lista li:hover .num, .steps li:hover::before { color: var(--ink); }

/* garantias: faixa escura com números grandes, fios verticais que se desenham */
.garantias-sec { background: #0b0a09 !important; color: #efe7da; }
.garantias { gap: 0; }
.garantia { background: none !important; padding: 8px clamp(20px, 2.4vw, 40px) !important; border: 0 !important; position: relative; }
.garantia + .garantia::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: #3a342d; transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) .3s; }
.garantia.is-in + .garantia::before, .garantia + .garantia.is-in::before { transform: scaleY(1); }
.garantia__n { display: block; white-space: nowrap; font-family: var(--serif); font-size: clamp(60px, 5.6vw, 92px); line-height: 1.08; letter-spacing: -.04em; color: #efe7da; }
.garantia__n small { font-size: .42em; letter-spacing: 0; color: var(--ouro); margin: 0 .08em; }
.garantia h2 { margin-top: 14px; font-family: var(--font-body); font-size: 11.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ouro); }
.garantia p { margin-top: 14px; color: #b9b0a2; font-size: 15px; line-height: 1.6; max-width: 30ch; }

/* números da casa: maiores, rótulo em mono */
.facts { gap: 0; }
.facts div { padding: 4px clamp(16px, 2vw, 32px) !important; }
.casa .facts div + div { border-left: 1px solid rgba(239,231,218,.18) !important; }
.facts b { font-size: clamp(56px, 6vw, 104px); line-height: .9; }
.casa .facts b { color: #efe7da; }
.facts span { font-family: var(--mono); font-size: 11px !important; letter-spacing: .14em; text-transform: uppercase; margin-top: 16px !important; }
.casa .facts span { color: #a89f92 !important; }
.facts--claro span { color: var(--ink-2) !important; }
.casa .facts div:first-child b { color: var(--ouro); }
.facts--claro div:first-child b { color: #8a6328; }

/* perguntas: linhas numeradas, pergunta em serifa, botão redondo que vira de mais para menos, resposta que desliza */
.faq { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); }
.faq > .reveal { position: sticky; top: calc(var(--header) + 40px); }
.faq__lista { counter-reset: q; border-top: 1px solid var(--line); }
.faq__item { counter-increment: q; border-bottom: 1px solid var(--line); transition: background .4s var(--ease); }
.faq__item summary { display: grid !important; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 20px; min-height: 92px !important; padding: 18px 8px;
  font-family: var(--serif) !important; font-size: clamp(20px, 1.7vw, 27px) !important; line-height: 1.2; letter-spacing: -.01em; transition: color .3s; }
.faq__item summary::before { content: counter(q, decimal-leading-zero); font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--bronze-ink); }
.faq__item summary::after { content: '' !important; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(27,25,22,.25);
  background: linear-gradient(var(--ink), var(--ink)) center / 14px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 14px no-repeat;
  transition: transform .6s cubic-bezier(.7, 0, .2, 1), background-size .4s var(--ease), background-color .4s, border-color .4s; transform: none !important; }
.faq__item summary:hover::after { border-color: var(--ink); }
.faq__item[open] summary::after { transform: rotate(180deg) !important; background-color: var(--ink);
  background-image: linear-gradient(#f7f5f1, #f7f5f1), linear-gradient(#f7f5f1, #f7f5f1); background-size: 14px 1px, 1px 0; border-color: var(--ink); }
.faq__item summary:hover { color: var(--bronze-ink); }
.faq__item[open] { background: rgba(173,124,57,.06); }
.faq__item p { margin: 0 64px 0 72px; padding: 0 0 30px 22px !important; border-left: 1px solid var(--bronze); font-size: 17px; line-height: 1.7; max-width: 58ch; }

@media (max-width: 1024px) {
  .page-top { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
  .page-top .lead { margin: 8px 0 0; }
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .garantia:nth-child(3)::before { display: none; }
}
@media (max-width: 760px) {
  .page-top .display { font-size: clamp(42px, 12vw, 60px); }
  /* linha do tempo vertical à esquerda */
  .passos ol, .pilares__lista, .steps ol { grid-template-columns: minmax(0, 1fr) !important; padding: 0 0 0 28px; gap: 44px; }
  .passos ol::before, .pilares__lista::before, .steps ol::before { left: 4px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
  .passos ol.is-in::before, .pilares__lista.is-in::before, .steps ol.is-in::before { transform: scaleY(1); }
  .passos li::after, .pilares__lista li::after, .steps li::after { left: -28px; top: 4px; }
  .passos .num, .pilares__lista .num, .steps li::before { margin-top: 0 !important; font-size: 64px; }
  .garantias { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .garantia { padding: 32px 0 !important; border-top: 1px solid #3a342d !important; }
  .garantia::before { display: none !important; }
  .garantia__n { font-size: 80px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .facts div { padding: 0 10px !important; }
  .facts b { font-size: 44px; }
  .facts span { font-size: 9.5px !important; letter-spacing: .08em; }
  .faq > .reveal { position: static; }
  .faq__item summary { grid-template-columns: 30px minmax(0, 1fr) 40px; gap: 12px; min-height: 76px !important; padding: 16px 0; font-size: 20px !important; }
  .faq__item summary::after { width: 40px; height: 40px; }
  .faq__item p { margin: 0 0 0 42px; padding: 0 0 24px 16px !important; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .passos ol::before, .pilares__lista::before, .steps ol::before, .garantia + .garantia::before { transform: none !important; transition: none; }
}

/* faixa de cinema da vitrine (no lugar de A casa): filme de tela cheia, texto em cima, embaixo à esquerda */
.vitrine-filme { position: relative; isolation: isolate; overflow: hidden; background: #0b0a09 center / cover no-repeat; color: #f4efe7;
  min-height: clamp(560px, 56.25vw, 900px); display: flex; align-items: flex-end; }
.vitrine-filme__vid { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.vitrine-filme::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,10,9,0) 50%, rgba(11,10,9,.82) 100%), linear-gradient(90deg, rgba(11,10,9,.55) 0%, rgba(11,10,9,0) 45%); }
.vitrine-filme__txt { padding-block: 0 clamp(48px, 6vw, 88px); }
.vitrine-filme .h2 { margin-top: 16px; color: #f6f1e8; }
.vitrine-filme .h2 .tom { color: var(--tom-escuro); }
.vitrine-filme__lead { margin-top: 18px; max-width: 40ch; color: #d8d0c3; font-size: clamp(15px, 1.1vw, 17px); }
.vitrine-filme__link { display: inline-block; margin-top: 26px; color: #f4efe7; }
@media (max-width: 760px) {
  .vitrine-filme { min-height: 0; padding-top: 128vw; align-items: flex-end; background-image: none !important; }
  .vitrine-filme__vid { height: auto; aspect-ratio: 720 / 1000; inset: 0 0 auto 0; -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 88%); mask-image: linear-gradient(180deg, #000 62%, transparent 88%); }
  .vitrine-filme::after { background: linear-gradient(180deg, rgba(11,10,9,0) 50%, rgba(11,10,9,.85) 76%, #0b0a09 88%); }
  .vitrine-filme__txt { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) { .vitrine-filme__vid { display: none; } }

/* botão Especialista: dourado do título da hero ("escolhido") */
body.has-hero .top:not(.is-solid) .top__wa { color: #e8cf9f; border-color: #e8cf9f; }
body.has-hero .top:not(.is-solid) .top__wa:hover { background: #e8cf9f; color: #1b1916; border-color: #e8cf9f; }
.top .top__wa, body.has-hero .top.is-solid .top__wa { background: #e3c48e; border-color: #e3c48e; color: #1b1916; }
.top .top__wa:hover, body.has-hero .top.is-solid .top__wa:hover { background: #1b1916; border-color: #1b1916; color: #e8cf9f; }

/* =====================================================================
   TRANSIÇÕES ENTRE SEÇÕES (Kernelcode, Terrarium, Seraph)
   ===================================================================== */
/* seção escura entra como cartão e se abre até as bordas conforme a rolagem (--abre de 0 a 1, vindo do luxo.js) */
.abre { --abre: 0; clip-path: inset(calc((1 - var(--abre)) * 7%) calc((1 - var(--abre)) * 5%) round calc((1 - var(--abre)) * 28px)); will-change: clip-path; }
.abre > * { transform: scale(calc(1.06 - var(--abre) * .06)); transform-origin: 50% 50%; }
.abre > video, .abre > .wrap { transition: none; }

/* parágrafo que acende palavra por palavra */
.acende .ac { transition: color .45s var(--ease), opacity .45s var(--ease); opacity: .22; }
.acende .ac.on { opacity: 1; }

/* entradas com desfoque mais forte e mais lentas (mesma curva das referências) */
.reveal { filter: blur(14px); transform: translateY(32px); transition: opacity 1.3s cubic-bezier(.2,.7,.1,1), transform 1.3s cubic-bezier(.2,.7,.1,1), filter 1.3s cubic-bezier(.2,.7,.1,1); transition-delay: var(--d, 0s); }
.palavras .pw > span { filter: blur(10px); opacity: 0; transition: transform 1.1s cubic-bezier(.2,.7,.1,1), filter 1.1s cubic-bezier(.2,.7,.1,1), opacity 1.1s cubic-bezier(.2,.7,.1,1); transition-delay: calc(var(--i) * 60ms); }
.palavras.is-in .pw > span, .is-in .palavras .pw > span { filter: none; opacity: 1; }

/* cartões da vitrine: a foto da peça entra por último, com leve zoom de dentro */
.card .card__img img { transition: transform .7s var(--ease), opacity 1.2s var(--ease) .2s; }
.card.reveal:not(.is-in) .card__img img { opacity: 0; transform: scale(1.2); }

@media (max-width: 760px) {
  .abre { clip-path: inset(calc((1 - var(--abre)) * 4%) calc((1 - var(--abre)) * 3%) round calc((1 - var(--abre)) * 18px)); }
  .abre > * { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .abre { clip-path: none; } .abre > * { transform: none; }
  .acende .ac { opacity: 1; }
}

/* Especialista sobre a hero: só ícone e texto dourados, sem o quadrado */
body.has-hero .top:not(.is-solid) .top__wa { border-color: transparent; padding: 0 4px; }
body.has-hero .top:not(.is-solid) .top__wa:hover { background: transparent; color: #f4efe7; border-color: transparent; }

/* giro em vídeo: mesmo lugar do canvas; o fundo branco do vídeo some no palco */
video.giro__vid { object-fit: contain; mix-blend-mode: multiply; pointer-events: auto; cursor: grab; background: transparent; }
.gallery__main video.giro__vid, .p3d__viewer video.giro__vid { position: absolute; }
.gallery__main video.giro__vid { inset: auto; left: 11%; top: 6%; width: 78%; height: 78%; }

/* desempenho: só propriedades que a placa de vídeo anima sozinha (opacidade e posição); nada de desfoque nem de redimensionar vídeo a cada rolagem */
.reveal { filter: none !important; transition: opacity 1s cubic-bezier(.2,.7,.1,1), transform 1s cubic-bezier(.2,.7,.1,1); }
.palavras .pw > span { filter: none !important; }
.abre > * { transform: none !important; }
.abre { will-change: auto; }
.card.reveal:not(.is-in) .card__img img { transform: none; }

/* Especialista na mesma fonte do "escolhido" da hero: Bodoni Moda itálica */
.top .top__wa, body.has-hero .top .top__wa, body.has-hero .top.is-solid .top__wa {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 19px; letter-spacing: .01em; text-transform: none;
}
@media (max-width: 1024px) { .top .top__wa span { display: none; } }
.top .top__wa, body.has-hero .top .top__wa, body.has-hero .top.is-solid .top__wa { text-transform: uppercase; font-size: 15px; letter-spacing: .14em; }

/* giro: vídeo e fotos trocam com esmaecimento curto */
video.giro__vid, .p3d__giro, .gallery__main canvas.is-giro { transition: none; }   /* mesma pose nos dois: troca instantânea, sem sobrepor */

/* miniaturas dos ângulos: sem a tarja escura; o nome fica embaixo, em letra pequena */
.p3d__angulos { gap: 10px; margin: 0 0 40px; }
.p3d__angulos button { border: 0; border-radius: 0; background: var(--surface); overflow: visible; margin-bottom: 18px; }
.p3d__angulos button img { transition: opacity .3s var(--ease); }
.p3d__angulos button:not([aria-pressed="true"]) img { opacity: .62; }
.p3d__angulos button:hover img { opacity: 1; }
.p3d__angulos button[aria-pressed="true"] { outline: 0; box-shadow: inset 0 -2px 0 var(--ink); }
.p3d__angulos .ang__play { inset: auto 0 -18px 0 !important; background: none !important; color: var(--ink-3) !important; padding: 0 !important;
  font-family: var(--font-body) !important; font-size: 9.5px !important; letter-spacing: .16em !important; text-align: left !important; }

@media (max-width: 760px) {
  /* fileira de relógios: esmaece na borda direita para mostrar que corre para o lado */
  .p3d__tabs { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); scroll-snap-type: x proximity; padding-right: 48px; }
  .p3d__tabs button { scroll-snap-align: start; }
  /* WhatsApp do topo: quadrado de 40 px com o ícone legível */
  .top .top__wa, body.has-hero .top .top__wa, body.has-hero .top.is-solid .top__wa { width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; }
  .top .top__wa svg, body.has-hero .top .top__wa svg { width: 20px !important; height: 20px !important; }
}

/* títulos mais legíveis: traço mais firme na Bodoni e segunda frase em cinza escuro (5:1 sobre o marfim) */
:root { --tom: #625b51; --tom-escuro: #b8ae9f; }
.display, .h2, .cine__title, .vitrine-head h1, .pdp__info h1, .mar__t, .tile__t { font-weight: 500; }
.page-top .display { font-weight: 500; letter-spacing: -.02em; }

/* títulos na DM Serif Display (contraste moderado e traço encorpado, como a referência "Elegance Luxury") */
:root { --serif: 'DM Serif Display', 'Bodoni Moda', Georgia, serif; }
.display, .h2, .cine__title, .vitrine-head h1, .pdp__info h1, .mar__t, .tile__t, .page-top .display { font-weight: 400; letter-spacing: -.01em; }
.page-top .display { letter-spacing: -.015em; line-height: 1.02; }

/* perguntas: reloginho no lugar do "+" (aro cinza, mostrador claro, ponteiros escuros, como o ícone de referência) */
.faq__item summary::after { content: none !important; display: none !important; }
.faq__relogio { width: 44px; height: 44px; display: grid; place-items: center; transition: transform .5s var(--ease); }
.faq__relogio svg { width: 100%; height: 100%; overflow: visible; }
.faq__relogio .aro { fill: #9eaab3; transition: fill .4s var(--ease); }
.faq__relogio .mostra { fill: #e8ebee; }
.faq__relogio line { stroke: #5f6b74; stroke-width: 2.6; stroke-linecap: round; transform-origin: 20px 20px; transition: transform .8s cubic-bezier(.6, 0, .2, 1); }
.faq__relogio .pt-h { stroke-width: 3; }
.faq__relogio .eixo { fill: #5f6b74; }
.faq__item summary:hover .faq__relogio { transform: scale(1.06); }
.faq__item summary:hover .faq__relogio .aro { fill: #ad7c39; }
.faq__item[open] .faq__relogio .aro { fill: #ad7c39; }
.faq__item[open] .faq__relogio .pt-m { transform: rotate(450deg); }   /* minutos: do 3 até o 6, dando a volta */
.faq__item[open] .faq__relogio .pt-h { transform: rotate(30deg); }
@media (max-width: 760px) { .faq__relogio { width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) { .faq__relogio line { transition: none; } }

/* títulos na Prata (como a referência "Elegance Luxury": larga, contraste moderado, y de cauda curva);
   a Prata não tem itálico: palavras em itálico e o Especialista usam o itálico da Playfair Display, de mesmo desenho */
:root { --serif: 'Prata', 'DM Serif Display', Georgia, serif; --serif-it: 'Playfair Display', 'Prata', Georgia, serif; }
.display, .h2, .cine__title, .vitrine-head h1, .pdp__info h1, .mar__t, .tile__t, .page-top .display, .faq__item summary { font-weight: 400 !important; }
.h2 { letter-spacing: -.005em; line-height: 1.08; }
.page-top .display { letter-spacing: -.012em; line-height: 1.04; }
.cine__title em, .h2 em, .display em { font-family: var(--serif-it); font-style: italic; }
.top .top__wa, body.has-hero .top .top__wa, body.has-hero .top.is-solid .top__wa { font-family: var(--serif-it); }
@media (max-width: 760px) {
  .h2 { font-size: clamp(30px, 8.4vw, 40px); line-height: 1.1; }
  .page-top .display { font-size: clamp(38px, 10.6vw, 54px); }
  .cine__title { font-size: clamp(40px, 11.5vw, 58px); line-height: 1.02; }
}

/* segunda frase dos títulos: itálico serifado no meio do texto (como "escolhido" na hero) */
.h2 .tom, .page-top .display .tom, .mar__t .tom { font-family: var(--serif-it); font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* ---------- hero clara com o filme da Rolex (Datejust): texto escuro, como o site da maison ---------- */
.cine { background: #eef0f1; color: var(--ink); }
.cine__shade { background: radial-gradient(60% 55% at 50% 50%, rgba(247,247,245,.82) 0%, rgba(247,247,245,.55) 45%, rgba(247,247,245,.15) 100%) !important; }
.cine .guil { display: none; }
.cine__sobre { color: #8a6328; }
.cine__title { color: #1b1916; }
.cine__title em { color: #9a6d2e; }
.cine__lead { color: #3d3a35; }
.cine__ctas .btn--light { color: var(--ink); border-color: rgba(27,25,22,.55); background: transparent; }
.cine__ctas .btn--light::before { background: #1b1916; }
.cine__ctas .btn--light:hover { color: #f4efe7; border-color: #1b1916; background: transparent; }
.cine__ctas .hairline, .cine__ctas a.hairline { color: var(--ink); }
.cine__dados { color: #5b564e; }
.cine__dados b { color: #1b1916; }
.cine__dados li + li { border-left-color: rgba(27,25,22,.2); }
/* cabeçalho sobre a hero clara: logo colorido e texto escuro */
.has-hero .top:not(.is-solid) { color: var(--ink); }
.has-hero .top:not(.is-solid) .logo-cor { display: block; }
.has-hero .top:not(.is-solid) .logo-neg { display: none; }
.has-hero .top:not(.is-solid) .menu-btn span { background: var(--ink); }
body.has-hero .top:not(.is-solid) .top__wa { color: #8a6328; border-color: transparent; }
body.has-hero .top:not(.is-solid) .top__wa svg { color: #8a6328; }
body.has-hero .top:not(.is-solid) .top__wa:hover { color: #1b1916; }
@media (max-width: 760px) {
  .cine__shade { background: linear-gradient(180deg, rgba(247,247,245,.2) 0%, rgba(247,247,245,.78) 38%, rgba(247,247,245,.86) 70%, rgba(247,247,245,.6) 100%) !important; }
}
body.has-hero { background: #eef0f1; }
.cine__shade { background: radial-gradient(58% 52% at 50% 50%, rgba(247,247,245,.88) 0%, rgba(247,247,245,.66) 50%, rgba(247,247,245,.2) 100%) !important; }
@media (max-width: 760px) { .cine__shade { background: linear-gradient(180deg, rgba(247,247,245,.35) 0%, rgba(247,247,245,.84) 34%, rgba(247,247,245,.9) 72%, rgba(247,247,245,.7) 100%) !important; } }

/* "A casa" (blocos escuros): Cormorant Garamond leve, a serifa clássica das maisons (Cartier, Van Cleef) — traço fino e claro sobre o preto */
.casa .display, .casa .h2, .casa h1 { font-family: var(--font-display) !important; font-weight: 300 !important;
  font-size: clamp(44px, 5.4vw, 88px); line-height: 1.02; letter-spacing: -.005em; color: #f4efe7 !important; }
.casa .display .tom, .casa .h2 .tom, .casa h1 em { font-family: var(--font-display); font-style: italic; color: #d6ad73; }
.casa__text { font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 1.7vw, 26px); line-height: 1.5; color: #e6ded1; }
.casa .facts b { font-family: var(--font-display); font-weight: 300; }
.casa .facts span { font-family: var(--font-body); text-transform: none; letter-spacing: .02em; font-size: 13px !important; }
@media (max-width: 760px) { .casa .display, .casa .h2, .casa h1 { font-size: clamp(40px, 11.5vw, 54px); } .casa__text { font-size: 20px; } }

/* "A casa" com o filme Everose da Rolex: escuro à esquerda (texto), a peça e os raios dourados à direita */
.casa--filme { background: #0b0a09; }
.casa--filme .casa__vid { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.casa--filme::before { content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,10,9,.94) 0%, rgba(11,10,9,.86) 34%, rgba(11,10,9,.45) 62%, rgba(11,10,9,.2) 100%), linear-gradient(0deg, rgba(11,10,9,.5), rgba(11,10,9,0) 40%); }
.casa--filme .casa__inner { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: 0 auto; gap: 28px; align-items: start; }
.casa--filme .casa__text { max-width: 42ch; }
@media (max-width: 760px) {
  .casa--filme .casa__vid { object-position: 50% 50%; }
  .casa--filme::before { background: linear-gradient(180deg, rgba(11,10,9,.35) 0%, rgba(11,10,9,.82) 45%, rgba(11,10,9,.94) 100%); }
  .casa--filme { padding-top: 62vw; }
}
@media (prefers-reduced-motion: reduce) { .casa--filme .casa__vid { display: none; } .casa--filme { background: #0b0a09 url(../media/casa-rolex.jpg) 70% 50% / cover; } }

/* rodapé claro: marfim, texto escuro, rótulos em bronze, logo colorido */
.rodape { background: #f3efe8 !important; color: var(--ink); border-top: 1px solid var(--line) !important; }
.rodape__marca img { filter: none !important; }
.rodape p.rodape__t, .rodape__t { color: #8a6328 !important; }
.rodape .rodape__marca p, .rodape__marca p { color: #4b463f !important; }
.rodape li a { color: #1b1916 !important; }
.rodape li a:hover { color: #8a6328 !important; }
.foot.rodape .wrap.rodape__base { border-top-color: #ddd5c8 !important; }
.rodape .rodape__base p, .rodape__base p { color: #5b564e !important; }

/* "Como comprar": abertura com o filme da Patek Philippe (Limited Editions), texto claro à esquerda */
.topo-filme { position: relative; isolation: isolate; overflow: hidden; background: #1d3a6b; color: #fff; min-height: min(92svh, 860px); display: flex; align-items: flex-end; }
.topo-filme__vid { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.topo-filme::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,18,34,.78) 0%, rgba(10,18,34,.5) 42%, rgba(10,18,34,.05) 75%), linear-gradient(0deg, rgba(10,18,34,.55), rgba(10,18,34,0) 45%); }
.topo-filme .page-top { padding-top: calc(var(--header) + 40px); width: 100%; }
.topo-filme .eyebrow { color: #e3c48e; }
.topo-filme .display { color: #fff; }
.topo-filme .display .tom { color: #e8d9bd; }
.topo-filme .lead { color: #eef1f6; border-left-color: #e3c48e; }
body:has(.topo-filme) .top:not(.is-solid) { background: transparent; }
@media (max-width: 760px) {
  .topo-filme { min-height: 100svh; }
  .topo-filme::before { background: linear-gradient(180deg, rgba(10,18,34,.1) 0%, rgba(10,18,34,.35) 40%, rgba(10,18,34,.85) 100%); }
}

/* garantias: o relógio na água (Oyster) abre a faixa e se funde no azul do fundo */
.garantias-sec { background: #071a2b !important; padding-top: 0 !important; }
.oyster { position: relative; margin-bottom: clamp(48px, 6vw, 88px); }
.oyster__vid { display: block; width: 100%; aspect-ratio: 1920 / 450; object-fit: cover; }
.oyster::after { content: ''; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(180deg, rgba(7,26,43,0), #071a2b); pointer-events: none; }
.garantia + .garantia::before { background: rgba(232,217,189,.18) !important; }
@media (max-width: 760px) { .oyster__vid { aspect-ratio: 480 / 540; } .garantia { border-top-color: rgba(232,217,189,.18) !important; } }
@media (prefers-reduced-motion: reduce) { .topo-filme__vid, .oyster__vid { display: none; } .topo-filme { background: #1d3a6b url(../media/patek.jpg) center / cover; } .oyster { background: url(../media/oyster.jpg) center / cover; aspect-ratio: 1920 / 450; } }
.topo-filme .page-top { padding-top: clamp(96px, 12vw, 180px); }

/* perguntas: relógio de ouro (caixa e pulseira de malha douradas, mostrador branco) no lugar do ícone cinza */
.faq__relogio { width: 40px; height: 52px; }
.faq__relogio .mostra { fill: #fbfaf6; stroke: #b38a3a; stroke-width: .4; }
.faq__relogio .idx rect { fill: #b8892a; }
.faq__relogio line { stroke: #8a6328; stroke-width: 1.6; transform-origin: 20px 26px; }
.faq__relogio .pt-h { stroke-width: 2; }
.faq__relogio .eixo { fill: #8a6328; }
.faq__relogio .aro, .faq__item summary:hover .faq__relogio .aro, .faq__item[open] .faq__relogio .aro { fill: none; }
.faq__item summary:hover .faq__relogio { transform: translateY(-2px) rotate(-6deg); }
.faq__item[open] .faq__relogio { transform: rotate(-6deg); filter: drop-shadow(0 4px 6px rgba(138,99,40,.35)); }
@media (max-width: 760px) { .faq__relogio { width: 36px; height: 47px; } }

/* hero: "escolhido" igual às outras palavras (mesma fonte, sem itálico, mesma cor) */
.cine__title em { font-family: var(--serif) !important; font-style: normal !important; color: inherit !important; letter-spacing: inherit; }
@media (min-width: 761px) { .cine__title { max-width: 16ch; } }

/* grade de vídeos: cada cartão em camada própria, sem repintar a página ao rolar */
.vcard, .hist__media { contain: layout paint; }
.vcard video, .hist__media video { transform: translateZ(0); backface-visibility: hidden; }

/* giro em vídeo sem mistura de cores (pesava na rolagem): o palco fica branco, igual ao fundo do vídeo */
video.giro__vid { mix-blend-mode: normal !important; }
.p3d__viewer:has(video.giro__vid) { background: #fff !important; }
.gallery__main:has(video.giro__vid) { background: #fff; }

/* ---------- WhatsApp fixo: círculo preto com aro dourado; no computador abre um rótulo ao lado ---------- */
.wa-fixo { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 0; color: #e8cf9f; text-decoration: none; }
.wa-fixo__ic { position: relative; width: 66px; height: 66px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c2824, #0f0e0c 70%); box-shadow: 0 0 0 1px #c9a063, 0 0 0 5px rgba(201,160,99,.18), 0 14px 32px rgba(11,10,9,.35);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.wa-fixo__ic svg { width: 30px; height: 30px; }
.wa-fixo__ic::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(201,160,99,.55); animation: wa-halo 3.2s var(--ease) infinite; }
@keyframes wa-halo { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.35); opacity: 0; } }
.wa-fixo__txt { display: flex; flex-direction: column; justify-content: center; height: 52px; margin-right: -26px; padding: 0 40px 0 22px; border-radius: 999px 0 0 999px;
  background: #0f0e0c; box-shadow: 0 0 0 1px rgba(201,160,99,.6); font-family: var(--serif-it); font-style: italic; font-size: 17px; line-height: 1.1; color: #f4efe7; white-space: nowrap;
  clip-path: inset(0 0 0 100% round 999px 0 0 999px); opacity: 0; transition: clip-path .55s var(--ease), opacity .4s var(--ease); }
.wa-fixo__txt small { font-family: var(--font-body); font-style: normal; font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: #c9a063; margin-bottom: 3px; }
.wa-fixo:hover .wa-fixo__txt, .wa-fixo:focus-visible .wa-fixo__txt, .wa-fixo.is-aberto .wa-fixo__txt { clip-path: inset(0 0 0 0 round 999px 0 0 999px); opacity: 1; }
.wa-fixo:hover .wa-fixo__ic { transform: scale(1.05); box-shadow: 0 0 0 1px #e8cf9f, 0 0 0 6px rgba(201,160,99,.25), 0 18px 38px rgba(11,10,9,.4); }
.wa-fixo:focus-visible { outline: none; } .wa-fixo:focus-visible .wa-fixo__ic { box-shadow: 0 0 0 2px #e8cf9f, 0 0 0 6px rgba(201,160,99,.35); }
@media (max-width: 760px) {
  .wa-fixo { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); }
  .wa-fixo__ic { width: 60px; height: 60px; } .wa-fixo__ic svg { width: 28px; height: 28px; }
  .wa-fixo__txt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wa-fixo__ic::after { animation: none; opacity: 0; } }
@media (min-width: 1025px) { .top { grid-template-columns: 1fr auto 1fr; } }