/* =====================================================================
   iwatches · camada VELUM (carregada por último, em todas as páginas)
   Sistema desconstruído do modelo Velum (vividsites) e reescrito para a
   relojoaria: página BRANCA, palcos escuros só onde há filme, General Sans
   leve com entrelinha abaixo de 1, IBM Plex Mono nos rótulos e números,
   botões em pílula, menu flutuante em ilhas, revelação por letra com
   desfoque, grão por cima de tudo. O acento é o bronze da logo.
   ===================================================================== */

:root {
  --page: #ffffff;
  --paper: #f2f2f0;
  --card: #e7e6e3;
  --ink: #0d0c0b;
  --ink-2: #1a1816;
  --accent: #ad7c39;
  --accent-ink: #855a20;
  --muted: #6e6a64;
  --hair: color-mix(in srgb, #0d0c0b 11%, transparent);
  --hair-s: color-mix(in srgb, #0d0c0b 26%, transparent);
  --footer: #0b0908;
  --footer-fg: #f1ede6;
  --footer-muted: #a59d92;
  --pre-from: #f1e7d6;
  --pre-to: #ad7c39;
  --grade: #d9d1c6;
  --scrim: linear-gradient(to top, rgba(8,7,6,.86) 0%, rgba(8,7,6,.4) 34%, transparent 64%), linear-gradient(to right, rgba(8,7,6,.55) 0%, transparent 48%);
  --font-display: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "General Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --ease-v: cubic-bezier(.2, 0, 0, 1);

  /* o sistema antigo passa a falar a mesma língua */
  --bg: var(--page); --bg-2: var(--paper); --surface: var(--paper); --surface-2: var(--card);
  --line: var(--hair); --ink-3: var(--muted); --bronze: var(--accent); --bronze-ink: var(--accent-ink);
  --font: var(--font-body); --serif: var(--font-display); --serif-it: var(--font-display); --mono: var(--font-mono);
  --tom: #8b867f; --tom-escuro: rgba(255,255,255,.5); --ouro: var(--accent);
  --header: 5.25rem;
}

/* escada de rem adaptável: o layout em rem acompanha a tela; piso e teto evitam salto de um degrau em 1 px */
html { font-size: 16px; scroll-padding-top: 6rem; }
@media (max-width: 1440px) { html { font-size: clamp(13px, 1.111111vw, 16px); } }
@media (max-width: 1024px) { html { font-size: clamp(13px, 1.5625vw, 16px); } }
@media (max-width: 640px)  { html { font-size: clamp(12px, 3.9vw, 16px); } }

h4, h5, h6 { margin: 0; }
body, body.has-hero {
  background: var(--page); color: var(--ink);
  font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; letter-spacing: 0;
}
::selection { background: var(--accent); color: var(--page); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

/* ── tipografia: peso leve, entrelinha abaixo de 1, tracking negativo ── */
.d1, .d2, .d3, .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(--font-display); font-weight: 300; font-style: normal;
  line-height: .95; letter-spacing: -.022em; text-transform: none;
}
.d1 { font-size: clamp(2.6rem, 7.2vw, 6.4rem); }
.d2, .h2 { font-size: clamp(2.1rem, 5vw, 4.25rem); max-width: 16ch; }
.d3 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
.display { font-size: clamp(2.5rem, 6vw, 5.4rem); line-height: .95; }
.h2 em, .display em, .cine__title em { font-style: normal; }
.h2 .tom, .display .tom, .d2 .tom { color: var(--tom); }
.lede { font-size: 1.5rem; font-weight: 500; line-height: 1.34; letter-spacing: -.012em; }
.lead { font-size: 1.06rem; line-height: 1.62; color: var(--muted); max-width: 52ch; }
.body { font-size: 1rem; line-height: 1.62; }
.small { font-size: .875rem; }
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.eyebrow {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .32em; color: var(--muted);
}
.eyebrow i { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--accent);
  margin-right: .65em; vertical-align: middle; transform: translateY(-.12em); }
.eyebrow--light { color: rgba(255,255,255,.62); }
.eyebrow + .display, .eyebrow + .h2, .eyebrow + .d2 { margin-top: 1.4rem; }
.display + .lead, .h2 + .lead { margin-top: 1.5rem; }

/* ── botões: pílula. Um link sem destino não tem hover. ── */
.pill, .pill-o, .pill-d, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 2.75rem; min-height: 0; padding: 0 1.5rem; border-radius: 99px;
  font-family: var(--font-body); font-size: .875rem; font-weight: 500; letter-spacing: -.005em; text-transform: none;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background .22s ease, color .22s ease, border-color .22s ease;
}
.btn::before, .btn::after, .btn__brilho { content: none !important; display: none !important; }
.btn svg { width: 1.05rem; height: 1.05rem; }
.pill, .btn--light { background: var(--page); color: var(--ink); border-color: transparent; }
.pill:hover, .btn--light:hover, .cine__ctas .btn--light:hover { background: var(--accent); color: var(--page); }
.pill-d, .btn--solid, .btn { background: var(--ink); color: var(--page); border-color: var(--ink); }
.pill-d:hover, .btn--solid:hover, .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--page); }
.pill-o, .btn--ghost { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 32%, transparent); }
.pill-o:hover { background: currentColor; }
.pill-o:hover > span { color: var(--page); }
.site-foot .pill-o:hover > span { color: var(--footer); }
.link-u, .link, .hairline {
  font-family: var(--font-body); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  border: 0; padding: 0; min-height: 0; opacity: .9;
}
.hairline::before { content: none; }
.link-u:hover, .link:hover, .hairline:hover { opacity: 1; color: inherit; }

/* ── menu: faixa cheia sem clique, ilhas com clique; cada ilha tem o próprio vidro ── */
#nav {
  position: fixed; inset: 1rem 1rem auto 1rem; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  pointer-events: none; color: #fff; transition: color .35s ease;
}
@media (min-width: 768px) { #nav { inset: 1.5rem 1.5rem auto 1.5rem; } }
#nav .grp { display: flex; align-items: center; gap: .6rem; }
.navpill {
  pointer-events: auto; display: flex; align-items: center; height: 2.75rem;
  border-radius: 99px; border: 1px solid rgba(255,255,255,.14);
  /* .32 do original basta sobre filme escuro; o topo de "Como comprar" é céu claro, então .55 */
  background: rgba(10,9,8,.68); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.navpill.brand { padding-inline: 1.1rem; }
.navpill.brand img { height: 1.55rem; width: auto; }
.navpill.brand .logo-cor { display: none; }
#nav.light .navpill.brand .logo-cor { display: block; }
#nav.light .navpill.brand .logo-neg { display: none; }
.navpill.links { padding-inline: .5rem; gap: .1rem; }
.navpill.links a {
  border-radius: 99px; padding: .5rem .95rem; font-size: .845rem;
  color: rgba(255,255,255,.86); transition: color .2s ease, background .2s ease;
}
.navpill.links a:hover, .navpill.links a[aria-current] { color: #fff; background: rgba(255,255,255,.1); }
#nav .cta { pointer-events: auto; }
#nav .cta svg { width: 1rem; height: 1rem; }
#nav .menu-btn {
  pointer-events: auto; display: none; width: 2.75rem; height: 2.75rem; padding: 0; border-radius: 99px;
  flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
#nav .menu-btn span { width: 16px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease-v); }
#nav .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
#nav .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
@media (max-width: 1080px) {
  .navpill.links { display: none; }
  #nav .menu-btn { display: flex; }
  #nav .cta .cta__t { display: none; }
  #nav .cta { width: 2.75rem; padding: 0; }
}
#nav.light .navpill {
  background: rgba(255,255,255,.88); border-color: rgba(13,12,11,.13);
  box-shadow: 0 2px 16px -8px rgba(13,12,11,.28);
}
#nav.light { color: var(--ink); }
#nav.light .navpill.links a { color: rgba(13,12,11,.6); }
#nav.light .navpill.links a:hover, #nav.light .navpill.links a[aria-current] { color: var(--ink); background: rgba(13,12,11,.06); }
#nav.light .cta { background: var(--ink); color: var(--page); }
#nav.light .cta:hover { background: var(--accent); }
#nav.open { color: var(--ink); }

.drawer {
  position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: flex-end;
  gap: 0; padding: 6rem 1.5rem 2rem; background: var(--page);
  opacity: 0; visibility: hidden; transform: none; clip-path: inset(0 0 100% 0);
  transition: clip-path .6s var(--ease-v), opacity .3s ease, visibility 0s .6s;
}
.drawer.is-open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .6s var(--ease-v), opacity .2s ease; }
.drawer a {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1;
  letter-spacing: -.022em; text-transform: none; padding: .55rem 0; border-bottom: 1px solid var(--hair);
}
.top { display: none !important; }

/* páginas internas: o conteúdo começa abaixo das ilhas do menu */
body:not(.has-hero) main { padding-top: 6.5rem; }

/* ── preloader: uma barra de altura cheia ESCALADA, nunca animando height ── */
#pre { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--page); will-change: transform; }
#pre .mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
#pre .mark img { height: 3.4rem; width: auto; }
#pre .num {
  position: absolute; bottom: 4rem; white-space: nowrap; transform: translateX(-100%); padding-right: 1.5rem;
  font-family: var(--font-display); font-weight: 300; line-height: .95; letter-spacing: -.02em; color: var(--ink);
  font-size: clamp(2.5rem, 7vw, 6rem);
}
@media (min-width: 768px) { #pre .num { bottom: 5rem; } }
#pre .barwrap { position: absolute; left: 0; right: 0; bottom: 0; height: 100lvh; transform-origin: bottom; overflow: hidden; }
#pre .bar { width: 100%; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(to right, var(--pre-from), var(--pre-to)); }

/* ── revelação: o laço só escreve transform, filter e opacity ── */
.wd { display: inline-block; white-space: nowrap; }
.lt { display: inline-block; will-change: transform, opacity, filter; }
[data-rv="rise"], [data-rv="cards"] > * { opacity: 0; }
.reveal { opacity: 0; transform: translateY(20px); filter: blur(10px);
  transition: opacity .9s var(--ease-v), transform .9s var(--ease-v), filter .9s var(--ease-v); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal-img { clip-path: inset(6% 6% 6% 6% round 1.5rem); transition: clip-path 1.2s var(--ease-v); }
.reveal-img.is-in { clip-path: inset(0 0 0 0 round 1.5rem); }
.palavras .pw, .palavras .pw > span { display: inline; transform: none !important; }
.acende .ac { opacity: 1 !important; color: inherit !important; }

/* ── grão: depois de tudo, a 3,4% ── */
/* inset 0 e o ruído anda pelo background-position: com inset -50% o grão passa de 200vw e cria rolagem lateral */
#grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .034;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gr .7s steps(2) infinite;
}
@keyframes gr { 0% { background-position: 0 0 } 50% { background-position: -38px 27px } 100% { background-position: 19px -38px } }

/* ── calha e mobiliário ── */
.gut { padding-inline: 1.5rem; }
@media (min-width: 768px)  { .gut { padding-inline: 3rem; } }
@media (min-width: 1180px) { .gut { padding-inline: 120px; } }
.wrap { max-width: none; padding-inline: 1.5rem; }
@media (min-width: 768px)  { .wrap { padding-inline: 3rem; } }
@media (min-width: 1180px) { .wrap { padding-inline: 120px; } }
.section { padding-block: 6rem; }
.section--paper, .section--sand { background: var(--page); }
.has-guil .guil, .guil { display: none; }

/* ── HERO → cartão recuado (clip-path, nunca width/inset) ── */
.hero-sec { position: relative; height: 100lvh; background: var(--page); }
.hero-clip { position: absolute; inset: 0; overflow: hidden; background: var(--ink); will-change: clip-path; }
.vwrap { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.vwrap video, .vwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vgrade { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: var(--grade); }
.vscrim { position: absolute; inset: 0; pointer-events: none; background: var(--scrim); }
.hero-ui {
  position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem; color: #fff; will-change: transform;
}
@media (min-width: 768px)  { .hero-ui { padding: 2.5rem; } }
@media (min-width: 1024px) { .hero-ui { padding: 2.5rem 3rem 3rem; } }
.hero-h { margin-top: auto; max-width: none; white-space: nowrap; }
/* duas linhas, sempre: cada linha do data-lines é um bloco sem quebra, e o corpo acompanha a largura */
.hero-h { font-size: clamp(2.2rem, 8.4vw, 7.4rem); }
.hero-foot { margin-top: 2.6rem; display: flex; flex-direction: column; gap: 2.25rem; }
@media (min-width: 1024px) { .hero-foot { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 3rem; } }
.hero-stats { list-style: none; padding: 0; display: flex; gap: 1.4rem; }
@media (min-width: 640px) { .hero-stats { gap: 2.5rem; } }
.hero-stats li { border-left: 1px solid rgba(255,255,255,.85); padding-left: 1.1rem; }
.hero-stats b { display: block; font-family: var(--font-display); font-weight: 200; font-size: clamp(2rem, 4.2vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.hero-stats b em { font-style: normal; font-size: .36em; margin-left: .18em; letter-spacing: 0; opacity: .75; }
.hero-stats span { display: block; margin-top: .7rem; font-size: .8rem; color: rgba(255,255,255,.62); }
.hero-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .hero-h { font-size: 8.6vw; }
  .hero-stats li { padding-left: .8rem; }
  .hero-stats span { font-size: .7rem; }
}

/* ── cabeça centrada de seção (prod-head) ── */
.prod-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem; margin-bottom: 3.2rem; }
.prod-head .d2 { max-width: 14ch; }
.novos { padding-block: 7rem 6rem; }

/* ── cartões de relógio: placa de papel, raio 1.5rem ── */
.grid { gap: 1.25rem; }
.card {
  border-radius: 1.5rem; background: var(--paper); padding: 1.75rem 1.5rem 1.75rem 2rem;
  min-height: 19rem; transition: background .3s ease;
}
.card:hover { background: var(--card); }
.card__name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; line-height: 1.25; letter-spacing: -.012em; }
.card__meta { font-size: .86rem; color: var(--muted); }
.card__price { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; line-height: 1; letter-spacing: -.03em; margin-top: 1.4rem; }
.card__parc { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; color: var(--muted); margin-top: .45rem; }
.card__flag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .2em; color: var(--accent-ink); }
.card__img::before { display: none; }
.promo { border-radius: 1.5rem; overflow: hidden; }
.promo h3 { font-weight: 300; font-size: 1.8rem; line-height: 1; letter-spacing: -.022em; }

/* ── divisão (split): placa + texto com passos numerados ── */
.split { display: grid; gap: 2.5rem; align-items: center; padding-block: 6rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1.05fr 1fr; gap: 4.5rem; } .split--rev > :first-child { order: 2; } }
.split .plate { position: relative; overflow: hidden; border-radius: 1.5rem; aspect-ratio: 4 / 5; background: var(--paper); }
.split .plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.split .plate.fit img { object-fit: contain; padding: 9%; }
.split .eyebrow { display: block; margin-bottom: 1.4rem; }
.steps-v { list-style: none; padding: 0; margin-top: 2.2rem; display: flex; flex-direction: column; }
.steps-v li { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--hair); }
.steps-v li:last-child { border-bottom: 1px solid var(--hair); }
.steps-v b { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--accent-ink); padding-top: .28em; font-weight: 500; }
.steps-v h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: -.012em; }
.steps-v p { margin-top: .35rem; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.split .preco { margin-top: 2rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1; letter-spacing: -.03em; }
.split .preco small { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .02em; color: var(--muted); }
.split .acoes { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 899px) { .split { padding-block: 4rem; } .split .plate { aspect-ratio: 1; } }

/* ── trio de números ── */
.trio { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .trio { grid-template-columns: repeat(3, 1fr); } }
.tcard { border-radius: 1.5rem; background: var(--paper); padding: 2rem; min-height: 15rem;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; }
.tcard .k { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.tcard .n { font-family: var(--font-display); font-weight: 300; line-height: 1; letter-spacing: -.03em; font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
.tcard .n em { font-style: normal; font-size: .4em; letter-spacing: 0; margin-left: .2em; color: var(--muted); }
.tcard p { font-size: .95rem; line-height: 1.6; color: var(--muted); }
.comprar-sec { padding-block: 2rem 7rem; }
@media (max-width: 899px) { .tcard { min-height: auto; gap: 1.1rem; padding: 1.75rem; } }

/* ── palcos de filme: cartão recuado, escuro só por dentro ── */
.stage-card { position: relative; overflow: hidden; border-radius: 1.5rem; min-height: 86vh; color: #fff;
  background: var(--ink) center / cover no-repeat; isolation: isolate; display: flex; flex-direction: column; }
.stage-card > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.stage-card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.stage-card .st-ui { margin-top: auto; padding: 2.2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
@media (min-width: 1024px) { .stage-card .st-ui { padding: 3rem; } }
.stage-card .st-ui .d2 { max-width: 12ch; }
.stage-card .st-ui p { max-width: 30rem; color: rgba(255,255,255,.78); }
.stage-card .st-cta { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-top: 2rem; }
.stage-card--pilha::after { background: linear-gradient(to right, rgba(5,7,11,.88) 0%, rgba(5,7,11,.55) 34%, transparent 58%), linear-gradient(to top, rgba(5,7,11,.6) 0%, transparent 40%); }
.stage-card--pilha .st-txt > p:not(.eyebrow) { margin-top: 1.4rem; max-width: 26rem; }
.stage-card--pilha .st-txt .d2 { margin-top: 1.2rem; }
.stage-card--centro::after { background: linear-gradient(to top, rgba(6,8,12,.92) 0%, rgba(6,8,12,.55) 30%, transparent 58%); }
.stage-card--centro .st-ui { flex-direction: column; align-items: center; text-align: center; gap: 1.2rem; }
.stage-card--centro .st-ui .d2 { max-width: 16ch; margin-inline: auto; }
.stage-card--centro .st-cta { justify-content: center; margin-top: 1.4rem; }
.stage-sec { padding-block: 1.25rem; }
@media (max-width: 640px) { .stage-card { min-height: 78vh; } .stage-card .st-ui { padding: 1.5rem; } }

/* ── fileira de filmes (bento de fotos) ── */
.bento { display: grid; gap: 1.25rem; padding-block: 1.25rem 6rem; }
@media (min-width: 1024px) { .bento { grid-template-columns: repeat(3, 1fr); } }
.bcard { position: relative; min-height: 34rem; display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; border-radius: 1.5rem; padding: 1.75rem; color: #fff; background: var(--ink); isolation: isolate; }
.bcard > img, .bcard > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2;
  transition: transform .9s var(--ease-v); }
.bcard:hover > img, .bcard:hover > video { transform: scale(1.035); }
.bcard::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10,9,8,.12), rgba(10,9,8,.62)); }
.bcard .btag { position: absolute; left: 1.75rem; top: 1.75rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.bcard .binner { border-radius: 1rem; background: var(--page); color: var(--ink); padding: 1.3rem 1.4rem 1.4rem; }
.bcard .binner b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.05; letter-spacing: -.02em; }
.bcard .binner span { display: block; margin-top: .55rem; font-size: .88rem; color: var(--muted); }
.bcard .bicon { position: absolute; right: 1.75rem; top: 1.75rem; width: 44px; height: 44px; border-radius: .8rem;
  background: var(--accent); color: #fff; display: grid; place-items: center; transition: transform .3s var(--ease-v); }
.bcard:hover .bicon { transform: rotate(-45deg); }
.bcard .bicon svg { width: 18px; height: 18px; }
@media (max-width: 1023px) { .bcard { min-height: 26rem; } }

/* ── 360°: placa branca com fio (as fotos de estúdio são de fundo branco) ── */
.p3d { background: var(--page); padding-block: 2rem 6rem; }
.p3d__palco { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); margin-top: 0; }
.p3d__viewer { border-radius: 1.5rem; background: #fff; border: 1px solid var(--hair); overflow: hidden; }
.p3d__info .d2 { margin-top: 1.4rem; }
.p3d__sub { margin-top: 1.3rem; color: var(--muted); max-width: 30rem; }
.p3d__tabs { margin-top: 2rem; }
.p3d__angulos { margin-top: 1.4rem; }
#w3d-marca { margin-top: 2.4rem; }
#w3d-nome { margin-top: .8rem; }
.p3d__preco { margin-top: 1.2rem; }
.p3d__preco small { display: block; margin-top: .6rem; font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.p3d__nota { margin-top: 1.2rem; font-size: .85rem; color: var(--muted); max-width: 32rem; }
.p3d__cta { margin-top: 1.8rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
@media (max-width: 900px) { .p3d__palco { grid-template-columns: minmax(0, 1fr); } }
.p3d__tabs button { border-radius: 99px; font-family: var(--font-body); font-size: .84rem; letter-spacing: 0; text-transform: none; }
.p3d__angulos button { border-radius: .8rem; overflow: hidden; }
.p3d__preco { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.8rem, 3vw, 2.6rem); letter-spacing: -.03em; line-height: 1; }
#w3d-nome { max-width: 14ch; }

/* ── contato fixo + rodapé que sobe por cima ── */
.layer { position: relative; }
.layer > .pin { position: sticky; top: 0; z-index: 10; min-height: 100lvh; overflow: hidden; }
.layer > .over { position: relative; z-index: 20; }
/* contato mais alto que a tela: fixo, o botão de enviar nunca aparece antes do rodapé cobrir; aí ele rola normal */
@media (max-width: 900px), (max-height: 820px) { .layer > .pin { position: relative; min-height: 0; } }
.contact { display: flex; flex-direction: column; justify-content: center; background: var(--page); padding-block: 6rem; }
.cform-h { margin: 0 auto 3.4rem; max-width: 46rem; text-align: center; font-weight: 400; }
.cform { display: flex; flex-direction: column; gap: 2.4rem; max-width: 64rem; width: 100%; margin-inline: auto; }
.crow { display: grid; gap: 2.4rem; }
@media (min-width: 768px) { .crow { grid-template-columns: 1fr 1fr; } }
.field { position: relative; border-bottom: 1px solid var(--hair-s); padding-bottom: .75rem; transition: border-color .2s ease; }
.field:focus-within { border-color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; background: transparent; border: 0; outline: none; padding: 0 1.5rem 0 0; font-size: 1.125rem;
  appearance: none; -webkit-appearance: none; border-radius: 0; resize: none; color: var(--ink);
}
.field select { cursor: pointer; font-family: var(--font-body); }
.field input::placeholder, .field textarea::placeholder { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--muted); font-family: var(--font-mono); }
.field .lbl { display: block; margin-bottom: .55rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field .dot { position: absolute; right: 0; bottom: 1.05rem; width: 10px; height: 10px; border-radius: 99px; background: var(--hair-s); transition: background .25s ease; pointer-events: none; }
.field.on .dot { background: var(--accent); }
.csend { margin-top: 1rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cstatus { min-height: 1.25rem; color: var(--muted); text-align: center; }
.cstatus.erro { color: #a2341f; }
.canais-v { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; margin-top: 3rem; }
.canais-v a { display: inline-flex; align-items: center; gap: .55rem; height: 2.5rem; padding: 0 1.1rem; border-radius: 99px;
  border: 1px solid var(--hair-s); font-size: .84rem; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.canais-v a:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
.canais-v a svg { width: 1rem; height: 1rem; }
@media (max-width: 640px) { .contact { padding-block: 5rem 4rem; } .cform, .crow { gap: 1.8rem; } }

/* ── rodapé: degradê em malha (WebGL) atrás, sempre escuro ── */
.site-foot { position: relative; z-index: 20; display: flex; flex-direction: column; min-height: 100lvh; overflow: hidden;
  background: var(--footer); color: var(--footer-fg); }
.site-foot--curto { min-height: 82lvh; }
.site-foot > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.foot-in { position: relative; z-index: 10; flex: 1; display: flex; flex-direction: column; padding: 5rem 1.5rem 1.5rem; }
@media (min-width: 768px)  { .foot-in { padding: 5rem 2.5rem 2.5rem; } }
@media (min-width: 1180px) { .foot-in { padding: 6rem 3rem 3rem; } }
.foot-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.8rem; }
.foot-top h2 { max-width: 14ch; color: var(--footer-fg); }
.foot-sp { flex: 1; min-height: 9rem; }
.foot-nav { margin-top: 4rem; border-top: 1px solid rgba(241,237,230,.16); padding-top: 2.6rem; display: flex; flex-direction: column; gap: 2.4rem; }
@media (min-width: 768px) { .foot-nav { flex-direction: row; justify-content: space-between; } }
.foot-grp { display: flex; gap: 3rem; flex-wrap: wrap; }
@media (min-width: 640px) { .foot-grp { gap: 5rem; } }
.foot-nav h4 { margin-bottom: .9rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .2em; color: var(--footer-muted); }
.foot-nav a, .foot-nav address { display: block; font-style: normal; font-size: .86rem; line-height: 1.85; color: rgba(241,237,230,.8); }
.foot-nav address { max-width: 20ch; color: var(--footer-muted); margin-bottom: .4rem; }
.foot-nav a:hover { color: var(--accent); }
.foot-logo { height: 2.1rem; width: auto; margin-bottom: 1.2rem; }
.foot-fine { margin-top: 2.6rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; color: rgba(241,237,230,.62); }
@media (max-width: 640px) { .foot-in { padding: 4rem 1.25rem 1.25rem; } .foot-nav { margin-top: 3rem; padding-top: 2rem; } .foot-grp { gap: 2.5rem; } }

/* ── WhatsApp fixo: um círculo de tinta; some onde já existe chamada (hero, contato, rodapé) ── */
.wa-fixo { transition: opacity .35s ease, transform .35s var(--ease-v); }
.wa-fixo.wa-off { opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; }
.wa-fixo__txt { display: none !important; }
.wa-fixo__ic { width: 3.4rem !important; height: 3.4rem !important; background: var(--ink) !important; color: #fff !important;
  border: 0 !important; box-shadow: 0 12px 30px -12px rgba(0,0,0,.55) !important; }
.wa-fixo__ic svg { width: 1.45rem !important; height: 1.45rem !important; }
.wa-fixo__ic::after { border-color: color-mix(in srgb, var(--accent) 55%, transparent) !important; }
.wa-fixo:hover .wa-fixo__ic { background: var(--accent) !important; transform: none !important; }

/* ── páginas internas: o sistema antigo no vocabulário novo ── */
.head-row { border-bottom: 0; padding-bottom: 0; align-items: flex-end; }
.head-row__aside { color: var(--muted); font-size: .95rem; }
.page-top { padding-top: 2rem; }
.specs { border-top: 1px solid var(--hair); }
.specs dt { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em; color: var(--muted); }
.specs dd { font-family: var(--font-display); font-size: 1.15rem; }
.price { font-family: var(--font-display); font-weight: 300; letter-spacing: -.03em; }
.section--dark { background: var(--page); color: var(--ink); }
.tile { border-radius: 1.5rem; overflow: hidden; }
.feature__img, .gallery__main { border-radius: 1.5rem; overflow: hidden; background: var(--paper); }
.faq__item summary { font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.2; }
.filters__panel, .fbar select, .fbar button { border-radius: 99px; }

/* títulos: o luxo.css forçava 400 e serifas itálicas; aqui vale o Velum (300, sem itálico, segunda frase em tom) */
.display, .h2, .d2, .d1, .cine__title, .vitrine-head h1, .pdp__info h1, .mar__t, .tile__t, .page-top .display, .faq__item summary { font-weight: 300 !important; }
.faq__item summary { font-weight: 400 !important; }
main h1 em, main h2 em, main .display em, main .h2 em, .casa .display .tom, .casa .h2 .tom, .casa h1 em, .cine__title em,
.h2 .tom, .d2 .tom, .display .tom, .page-top .display .tom, .mar__t .tom {
  font-family: var(--font-display) !important; font-style: normal !important; font-weight: inherit !important; letter-spacing: inherit !important; color: var(--tom) !important;
}
.casa--filme h1 em, .casa--filme .tom, .topo-filme h1 em, .topo-filme .tom, .garantias-sec .tom, .garantias-sec em { color: rgba(255,255,255,.55) !important; }
.casa__text { font-family: var(--font-body) !important; font-size: 1.12rem !important; line-height: 1.62 !important; color: rgba(255,255,255,.78) !important; }

/* filmes de topo das internas ficam por baixo do menu, como o hero */
body:has(.casa--filme) main, body:has(.topo-filme) main { padding-top: 0; }

/* passos e pilares: número leve em tinta, como os números do hero */
.passos .num, .pilares__lista .num { font-family: var(--font-display) !important; font-weight: 200 !important; color: var(--ink) !important; letter-spacing: -.03em; }
.passos li::after, .pilares__lista li::after, .steps li::after { background: var(--accent); }
.passos h2, .pilares__lista h3, .steps li h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }

/* perguntas: sem o reloginho dourado; círculo de fio com + que vira × */
.faq__relogio { display: none !important; }
.faq__item summary::before { font-family: var(--font-mono); color: var(--accent-ink); }
.faq__item summary::after {
  content: '+' !important; display: grid !important; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 99px;
  border: 1px solid var(--hair-s); font-family: var(--font-body); font-size: 1.2rem; font-weight: 300; line-height: 1; color: var(--ink);
  background: none !important; transition: transform .35s var(--ease-v), background .25s ease, color .25s ease, border-color .25s ease;
}
.faq__item[open] summary::after { transform: rotate(45deg) !important; background: var(--ink) !important; color: var(--page); border-color: var(--ink); }
.faq__item summary:hover { color: var(--ink); }

/* faixa escura das garantias: vira palco recuado com cantos, a página segue branca em volta */
.garantias-sec { margin-inline: 1rem; border-radius: 1.5rem; overflow: hidden; }
@media (min-width: 768px)  { .garantias-sec { margin-inline: 3rem; } }
@media (min-width: 1180px) { .garantias-sec { margin-inline: 120px; } }

/* contato: cartões de canal com raio; campos em linha, sem caixa */
.canais a { border-radius: 1.5rem; }
.canais small { font-family: var(--font-mono); letter-spacing: .2em; }
.busca:not(.cform) label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.busca:not(.cform) input, .busca:not(.cform) select, .busca:not(.cform) textarea {
  background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--hair-s) !important; border-radius: 0 !important;
  padding: .7rem 0 !important; font-family: var(--font-body); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--ink); box-shadow: none !important;
}
.busca:not(.cform) input:focus, .busca:not(.cform) select:focus, .busca:not(.cform) textarea:focus { outline: none; border-bottom-color: var(--ink) !important; }
.busca textarea { resize: none; }

/* páginas de vídeo e da peça: placas com raio, fundo da página branco */
.film { background: var(--page) !important; }
.film__frame, .hist__media, .vcard, .vcard video, .gallery__thumbs button { border-radius: 1.5rem; overflow: hidden; }
.gallery__thumbs button { border-radius: .8rem; }
.price small, .pdp__info .price small { font-family: var(--font-mono); font-size: .74rem; font-weight: 400; letter-spacing: .02em; color: var(--muted); }
.crumb { font-size: .84rem; color: var(--muted); }

/* animação roda para todos: as regras de "reduzir movimento" antigas não desligam nada aqui */
@media (prefers-reduced-motion: reduce) {
  .tile__vid, .mar__vid, .vitrine-filme__vid { display: block !important; }
  .reveal { transition: opacity .9s var(--ease-v), transform .9s var(--ease-v), filter .9s var(--ease-v) !important; }
}

/* formulário da home: o foco é o fio que escurece (.field:focus-within), sem o contorno do styles.css */
.cform .field input:focus, .cform .field select:focus, .cform .field textarea:focus { outline: none; }

/* cartões de relógio: o mesmo gesto do hero, ao contrário. Entram recuados e com canto maior
   e abrem até a borda conforme a rolagem (clip-path, nunca width), amortecido no relógio único */
.grid .card { will-change: clip-path, transform; }

/* ═══ revisão 2 (pedidos de 09/11) ═══════════════════════════════════════ */

/* 360°: relógio solto na página, sem caixa; modelos numa lista numerada (passos do Velum), sem pílulas soltas */
.p3d__viewer--solto { background: transparent !important; border: 0 !important; border-radius: 0; overflow: visible; }
.p3d__viewer--solto .p3d__dica { background: none; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
#em-3d .p3d__angulos, #em-3d .p3d__nota, #em-3d .p3d__pausa { display: none !important; }
.p3d__lista { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important;
  overflow: visible !important; margin: 2rem 0 0 !important; padding: 0 !important; counter-reset: md; border-top: 1px solid var(--hair); }
.p3d__lista button {
  counter-increment: md; display: grid !important; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: 1rem;
  width: 100%; height: auto !important; min-height: 0 !important; padding: .95rem 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; border-bottom: 1px solid var(--hair) !important; border-radius: 0 !important;
  box-shadow: none !important; text-align: left; cursor: pointer;
  font-family: var(--font-body); font-size: 1.05rem; font-weight: 500; letter-spacing: -.012em; text-transform: none; color: var(--muted) !important;
  transition: color .25s ease, padding .35s var(--ease-v);
}
.p3d__lista button::before { content: counter(md, decimal-leading-zero); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--accent-ink); }
.p3d__lista button::after { content: ''; width: 8px; height: 8px; border-radius: 99px; background: var(--accent); opacity: 0; transform: scale(.4); transition: opacity .25s ease, transform .35s var(--ease-v); }
.p3d__lista button:hover { color: var(--ink) !important; padding-left: .4rem !important; }
.p3d__lista button[aria-selected="true"] { color: var(--ink) !important; }
.p3d__lista button[aria-selected="true"]::after { opacity: 1; transform: none; }
.p3d__sel { margin-top: 2.2rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.p3d__sel #w3d-marca { margin-top: 0; }
.p3d__sel .p3d__preco { margin-top: 0; text-align: right; }
@media (max-width: 900px) { .p3d__sel .p3d__preco { text-align: left; } }

/* destaque: placa com a foto real da peça cobrindo, como o plate do Velum */
#feature .plate img { object-fit: cover; mix-blend-mode: normal; padding: 0; }
#feature .acoes { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 2.2rem; }
#feature .preco { margin-top: 0; }

/* bento: fotos, sem o ícone de seta */
.bcard > img { filter: saturate(.92); }

/* mostruário em colunas (Velum): a coluna é o alvo do hover; a foto sobe do pé e as outras recuam */
.show { position: relative; overflow: hidden; background: var(--page); color: var(--ink); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.show-head { padding: 3.5rem 1.5rem 2.5rem; }
.show-head .pill-o { margin-top: 1.8rem; }
@media (min-width: 768px) { .show-head { padding-inline: 3rem; } }
.cols { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 0 1.5rem 1.5rem; }
.col { position: relative; overflow: hidden; min-height: 42vh; border-radius: 1rem; background: var(--paper); color: #fff; }
.col .ph, .col .scrim, .col .ph-dim { position: absolute; inset: 0; pointer-events: none; }
.col .ph { transition: clip-path .42s cubic-bezier(.2,0,0,1); }
.col .ph img { width: 100%; height: 100%; object-fit: cover; }
.col .ph-dim { background: linear-gradient(to top, rgba(8,7,6,.7), rgba(8,7,6,.15) 42%, transparent 66%); }
.col .scrim { display: none; }
.col-lab { position: absolute; left: 1.25rem; bottom: 1.4rem; right: 1.25rem; z-index: 3; display: flex; flex-direction: column; gap: .4rem; }
.col-lab span { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2.15rem); line-height: 1.05; letter-spacing: -.026em; }
.col-lab small { font-size: .72rem; opacity: .8; }
.col-n { position: absolute; right: 1.1rem; top: 1.1rem; z-index: 3; font-size: .72rem; color: rgba(255,255,255,.7); }
@media (min-width: 1180px) {
  .show-head { position: absolute; left: 50%; right: 0; top: 3.5rem; z-index: 20; padding-inline: 3rem; pointer-events: none; }
  .show-head .pill-o { pointer-events: auto; }
  .cols { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; }
  .col + .col { border-left: 1px solid var(--hair); }
  .col { min-height: 88vh; border-radius: 0; background: var(--page); color: var(--ink); transition: opacity .42s cubic-bezier(.2,0,0,1); }
  .col .ph { clip-path: inset(46% 0% 0% 0%); }
  .col .ph-dim { display: none; }
  .col.off { opacity: .45; }
  .col .scrim { display: block; z-index: 2; top: auto; height: 44%; transform-origin: bottom; transform: scaleY(.38);
    transition: transform .42s cubic-bezier(.2,0,0,1); background: linear-gradient(to top, var(--page) 12%, rgba(255,255,255,.82) 46%, transparent); }
  .col-lab { left: 1.5rem; bottom: 2rem; }
  .col-n { color: var(--muted); }
  .col small { color: var(--muted); opacity: 1; }
}
.cols.always .ph { clip-path: none !important; }

/* Como comprar: a tinta sobe do pé no hover, o texto vira e o número levanta */
.tcard { position: relative; overflow: hidden; isolation: isolate; transition: color .45s var(--ease-v); }
.tcard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom;
  transition: transform .55s var(--ease-v); border-radius: inherit; }
.tcard .n { transition: transform .55s var(--ease-v); }
.tcard p, .tcard .k, .tcard .n em { transition: color .45s var(--ease-v); }
@media (hover: hover) {
  .tcard:hover::before { transform: scaleY(1); }
  .tcard:hover { color: #fff; }
  .tcard:hover .n { transform: translateY(-.35rem); }
  .tcard:hover p, .tcard:hover .k, .tcard:hover .n em { color: rgba(255,255,255,.66); }
}

/* rodapé: grade de cinco colunas distribuídas, linha fina centrada */
.foot-nav { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2.4rem 2rem; }
.foot-grp { display: contents; }
.foot-nav address { max-width: 24ch; }
.foot-fine { text-align: center; }
@media (max-width: 900px) { .foot-nav { grid-template-columns: 1fr 1fr; } .foot-nav > .foot-grp:first-child > div:first-child { grid-column: 1 / -1; } }
/* celular (foto sempre à mostra, fundos de foto claros): legenda em plaquinha branca, tinta escura */
@media (max-width: 1179px) {
  .cols .col .ph-dim { display: none; }
  .cols .col-lab { left: .6rem; right: .6rem; bottom: .6rem; padding: .7rem .85rem; border-radius: .75rem; background: rgba(255,255,255,.94); color: var(--ink); }
  .cols .col-lab span { font-size: 1.15rem; }
  .cols .col-lab small { color: var(--muted); opacity: 1; font-size: .62rem; }
  .cols .col-n { color: var(--ink); background: rgba(255,255,255,.9); border-radius: 99px; padding: .15rem .5rem; }
}

/* revisão 3: relógio menor no cartão, sem estourar a placa */
.card__img img { max-width: 175px !important; transform: none !important; }
.card:hover .card__img img { transform: translateY(-4px) scale(1.04) !important; }
.card { min-height: 17rem; }

/* logo solta: sem a ilha em volta, só a marca */
.navpill.brand, #nav.light .navpill.brand { background: none !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding-inline: .2rem; }
.navpill.brand img { height: 2.1rem; }

/* ═══ revisão 4 ══════════════════════════════════════════════════════════ */
/* sem instrução de uso na tela */
.p3d__dica, .giro__dica { display: none !important; }
.p3d__sel { margin-top: 0; }
.p3d__sel .d2 { margin-top: .9rem; max-width: 14ch; }
.p3d__lista { margin-top: 2.4rem !important; }

/* Como comprar: o cartão levanta no hover; nada de escurecer */
.tcard::before { content: none !important; }
.tcard { transition: transform .45s var(--ease-v), box-shadow .45s var(--ease-v), background .3s ease; will-change: transform; }
@media (hover: hover) {
  .tcard:hover { color: inherit; transform: translateY(-10px); background: #fff; box-shadow: 0 24px 48px -24px rgba(13,12,11,.28), 0 0 0 1px var(--hair); }
  .tcard:hover p, .tcard:hover .k, .tcard:hover .n em { color: var(--muted); }
  .tcard:hover .n { transform: none; }
}

/* destaque: relógio oficial solto no branco, sem placa */
#feature .solto { display: grid; place-items: center; }
#feature .solto img { width: min(100%, 34rem); height: auto; mix-blend-mode: multiply; }
@media (min-width: 900px) { #feature { grid-template-columns: 1fr 1fr; } }

/* vitrine dos Rolex: cabeça em linha, quatro relógios soltos com legenda embaixo */
.vitrine { padding-block: 6rem; }
.vit-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 3.2rem; }
.vit-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 900px) { .vit-grade { grid-template-columns: repeat(2, 1fr); } }
.vit { position: relative; display: flex; flex-direction: column; border-top: 1px solid var(--hair); padding-top: 1.2rem; transition: opacity .4s var(--ease-v); }
.vit-n { font-size: .72rem; color: var(--accent-ink); }
.vit-img { display: grid; place-items: center; aspect-ratio: 1; margin-block: .6rem 1rem; }
.vit-img img { width: 82%; height: auto; mix-blend-mode: multiply; transition: transform .7s var(--ease-v); }
.vit:hover .vit-img img { transform: translateY(-8px) scale(1.04); }
.vit-lab b { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.3rem, 2vw, 1.75rem); letter-spacing: -.022em; line-height: 1.1; }
.vit-lab small { display: block; margin-top: .45rem; font-size: .72rem; color: var(--muted); }
@media (hover: hover) { .vit-grade:hover .vit { opacity: .5; } .vit-grade .vit:hover { opacity: 1; } }

/* rodapé centralizado: marca em cima, colunas centradas */
.foot-nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; column-gap: clamp(3rem, 7vw, 7.5rem); row-gap: 2.4rem; text-align: center; }
.foot-nav > .foot-grp:first-child > div:first-child { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; }
.foot-nav address { max-width: none; }
.foot-logo { margin-inline: auto; }
@media (max-width: 900px) { .foot-nav { grid-template-columns: repeat(2, auto); } }

/* revisão 5: cartão de relógio sem placa, no padrão da vitrine (relógio solto, fio em cima, legenda embaixo) */
.grid { gap: 2.4rem 1.5rem; }
.grid .card {
  display: flex !important; flex-direction: column-reverse; justify-content: flex-end; gap: 0;
  min-height: 0; padding: 1.2rem 0 0; background: none !important; border-radius: 0; border-top: 1px solid var(--hair);
  clip-path: none !important; transition: opacity .4s var(--ease-v);
}
.grid .card:hover { background: none !important; }
.grid .card__img { aspect-ratio: 1; display: grid; place-items: center; margin-bottom: 1.2rem; }
.grid .card__img img { width: 74%; max-width: none !important; }
.grid .card__name { font-size: 1.15rem; }
.grid .card__price { margin-top: 1rem; font-size: 1.55rem; }
@media (hover: hover) { .grid:hover .card { opacity: .5; } .grid .card:hover { opacity: 1; } }

/* 360°: rótulo da lista */
.p3d__rot { margin-top: 2.4rem; }
.p3d__rot + .p3d__lista { margin-top: 1rem !important; }

/* mosaico de destaques: um alto à esquerda, um largo em cima, dois embaixo; rótulo, título e link sobre a foto */
.mosaico { display: grid; gap: .75rem; padding-block: 1.25rem 6rem;
  grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 26rem 24rem; grid-template-areas: "a b b" "a c d"; }
.mos { position: relative; overflow: hidden; border-radius: 1.5rem; background: var(--ink); color: #fff; isolation: isolate; display: flex; align-items: flex-end; }
.mos:nth-child(1) { grid-area: a; } .mos:nth-child(2) { grid-area: b; } .mos:nth-child(3) { grid-area: c; } .mos:nth-child(4) { grid-area: d; }
.mos > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.1s var(--ease-v); }
.mos::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8,7,6,.78) 0%, rgba(8,7,6,.28) 38%, transparent 62%); }
.mos:hover > img { transform: scale(1.04); }
.mos-txt { display: flex; flex-direction: column; gap: .55rem; padding: 2rem 2.2rem; }
.mos-rot { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: #e3c48e; }
.mos-tit { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.3rem); line-height: 1.02; letter-spacing: -.022em; }
.mos--alto .mos-tit { font-size: clamp(2.4rem, 4.4vw, 4.2rem); }
.mos-link { margin-top: .5rem; align-self: flex-start; font-size: .8rem; font-weight: 500; letter-spacing: .04em; padding-bottom: .3rem;
  border-bottom: 1px solid rgba(255,255,255,.6); transition: border-color .25s ease, padding-right .35s var(--ease-v); }
.mos:hover .mos-link { border-color: #fff; padding-right: .8rem; }
@media (max-width: 900px) {
  .mosaico { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: none; }
  .mos:nth-child(n) { grid-area: auto; min-height: 22rem; }
  .mos--alto { min-height: 30rem !important; }
  .mos-txt { padding: 1.5rem; }
}

/* revisão 6: relógio menor no cartão sem placa; mosaico logo depois do hero */
.grid .card { padding: 1.2rem 0 0 !important; }
.grid .card__img { aspect-ratio: 4 / 3; margin-bottom: 1rem; }
.grid .card__img img { width: auto !important; max-width: 52% !important; max-height: 88%; }
.grid .card__name { font-size: 1.05rem; }
.grid .card__price { font-size: 1.35rem; }
.mosaico { padding-block: 1.25rem 2rem; }

/* ═══ home em resumo (revisão 7) ═════════════════════════════════════════ */
/* A casa: texto à esquerda, duas fotos de campanha desencontradas à direita */
.casa-res { display: grid; gap: 3rem; align-items: center; padding-block: 7rem 5rem; }
@media (min-width: 900px) { .casa-res { grid-template-columns: 1fr 1.1fr; gap: 5rem; } }
.cr-txt .d2 { margin-top: 1.4rem; }
.cr-txt .lead { margin-top: 1.6rem; max-width: 34rem; }
.cr-txt .pill-o { margin-top: 2.2rem; }
.cr-fotos { position: relative; height: clamp(24rem, 40vw, 38rem); }
.cr-fotos figure { position: absolute; margin: 0; overflow: hidden; border-radius: 1.5rem; background: var(--ink); }
.cr-fotos img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-v); }
.cr-fotos figure:hover img { transform: scale(1.04); }
.cr-f1 { left: 0; top: 0; width: 58%; height: 100%; }
.cr-f1 img { object-position: 50% 50%; }
.cr-f2 { right: 0; bottom: 8%; width: 48%; height: 58%; box-shadow: 0 30px 60px -30px rgba(13,12,11,.45); }
.cr-f2 img { object-position: 52% 50%; }

/* Imperdíveis: relógio solto à esquerda, lista numerada que troca a foto */
.imp { display: grid; gap: 3rem; align-items: center; padding-block: 5rem; }
@media (min-width: 900px) { .imp { grid-template-columns: 1fr 1fr; gap: 4.5rem; } }
.imp-img { display: grid; place-items: center; aspect-ratio: 1; }
.imp-img img { width: min(78%, 26rem); height: auto; mix-blend-mode: multiply; transition: opacity .35s ease, transform .6s var(--ease-v); }
.imp-img img.troca { opacity: 0; transform: translateY(10px) scale(.98); }
.imp-txt .d2 { margin-top: 1.4rem; }
.imp-lista { list-style: none; padding: 0; margin: 2.2rem 0 2.2rem; border-top: 1px solid var(--hair); }
.imp-lista a { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: baseline; gap: 1rem; padding: 1.1rem 0;
  border-bottom: 1px solid var(--hair); color: var(--muted); transition: color .25s ease, padding .35s var(--ease-v); }
.imp-lista a b { font-size: .72rem; letter-spacing: .14em; color: var(--accent-ink); font-weight: 500; }
.imp-lista .imp-nome { font-size: 1.05rem; font-weight: 500; letter-spacing: -.012em; }
.imp-lista .imp-preco { font-size: .8rem; }
.imp-lista a:hover, .imp-lista a.on { color: var(--ink); padding-left: .4rem; }

/* Compre por marca: índice tipográfico; a foto de um relógio da marca segue o mouse */
.marcas { position: relative; padding-block: 5rem; }
.mc-lista { list-style: none; padding: 0; margin: 0; display: grid; column-gap: 3rem; }
@media (min-width: 900px) { .mc-lista { grid-template-columns: 1fr 1fr; } }
.mc-lista a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; border-top: 1px solid var(--hair);
  transition: color .25s ease, padding .35s var(--ease-v); }
.mc-lista li:nth-last-child(-n+2) a { border-bottom: 1px solid var(--hair); }
.mc-lista .mc-nome { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2.5rem); line-height: 1; letter-spacing: -.022em; }
.mc-lista .mc-n { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
@media (hover: hover) { .mc-lista:hover a { color: var(--muted); } .mc-lista a:hover { color: var(--ink); padding-left: .6rem; } }
.mc-flut { position: fixed; left: 0; top: 0; z-index: 40; width: 13rem; height: 13rem; object-fit: contain; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.85); transition: opacity .25s ease; mix-blend-mode: multiply; }
.mc-flut.on { opacity: 1; }
@media (hover: none) { .mc-flut { display: none; } }

/* Lançamentos: só um resumo */
#novos .card:nth-child(n+4) { display: none !important; }
.novos { padding-block: 5rem; }

/* Como comprar: condição à vista */
.cv-avista { text-align: center; margin-top: 2.2rem; }

/* ═══ revisão 8: cores por seção, transição que engole, logos, lançamentos ═ */
.cor-pedra { background: #ebe6de !important; }
.cor-papel { background: #f3f2ef !important; }
.cor-creme { background: #f7f3ec !important; }
.cor-tinta { background: #0e0d0c !important; color: #f1ede6; }
.cor-tinta .d2 { color: #f1ede6; }

/* a seção entra recuada, com cantos, e cresce até a borda (o JS escreve o clip-path) */
.engole { will-change: clip-path; }
.p3d.engole { padding-block: 7rem; }

/* imperdíveis em 360°: o giro some no fundo de pedra (frames de fundo branco multiplicam) */
.cor-pedra .p3d__viewer { background: transparent !important; border: 0 !important; }
.cor-pedra .p3d__viewer canvas, .cor-pedra .p3d__viewer video, .cor-pedra .p3d__viewer img { mix-blend-mode: multiply; }
.cor-pedra .p3d__lista, .cor-pedra .p3d__lista button { border-color: rgba(13,12,11,.14) !important; }
#em-3d .p3d__info > .eyebrow { margin-bottom: 1.4rem; }

/* A casa: vídeo no quadro alto */
.cr-fotos video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-f2 img { object-position: 50% 45%; }

/* marcas: quadro de logos oficiais em branco sobre a tinta */
.marcas { padding-block: 7rem; }
.mc-head { text-align: center; display: flex; flex-direction: column; align-items: center; margin-bottom: 3.6rem; }
.mc-head .d2 { margin-top: 1.4rem; }
.mc-logos { list-style: none; padding: 0; margin: 0 auto; max-width: 72rem; display: flex; flex-wrap: wrap; justify-content: center;
  border-top: 1px solid rgba(241,237,230,.12); }
.mc-logos li { flex: 0 0 20%; border-bottom: 1px solid rgba(241,237,230,.12); }
@media (max-width: 900px) { .mc-logos li { flex-basis: 50%; } }
.mc-logos a { display: grid; place-items: center; height: 8.5rem; padding: 1.5rem; transition: background .3s ease; }
.mc-logos a:hover { background: rgba(241,237,230,.05); }
.mc-logos img { max-width: 62%; max-height: 2.6rem; width: auto; height: auto; filter: brightness(0) invert(1); opacity: .72; transition: opacity .3s ease, transform .5s var(--ease-v); }
.mc-logos a:hover img, .mc-logos a:hover .mc-wm { opacity: 1; transform: scale(1.05); }
.mc-wm { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: #f1ede6; opacity: .72; transition: opacity .3s ease, transform .5s var(--ease-v); }
.mc-pe { text-align: center; margin-top: 3rem; }
.mc-pe .pill-o { color: #f1ede6; }
.mc-pe .pill-o:hover > span { color: var(--ink); }

/* lançamentos: relógio menor, centrado, sem apagar os vizinhos e sem contorno */
.novos .grid .card { border: 0 !important; text-align: center; padding-top: 0 !important; box-shadow: none !important; outline: none; }
.novos .grid .card:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 6px; }
.grid:hover .card { opacity: 1 !important; }
.novos .grid .card__img { aspect-ratio: 1; margin-bottom: .8rem; }
.novos .grid .card__img img { max-width: 58% !important; transition: transform .7s var(--ease-v) !important; }
.novos .grid .card:hover .card__img img { transform: translateY(-8px) !important; }
.novos .grid .card__flag { display: none; }
.card:hover { border-color: transparent !important; box-shadow: none !important; }

/* rodapé: frase de abertura mais abaixo */
.foot-top { padding-top: clamp(6rem, 16vh, 12rem); }
.contact.cor-creme { background: #f7f3ec !important; }

/* tom apagado mais escuro sobre a pedra (4,33:1 -> acima de 4,5:1) */
.cor-pedra { --muted: #5d5953; }
.cor-pedra .p3d__lista button { color: #5d5953 !important; }
.cor-pedra .p3d__lista button[aria-selected="true"], .cor-pedra .p3d__lista button:hover { color: var(--ink) !important; }

/* mistura de cor: will-change isolava o branco das fotos; o viewer inteiro multiplica com o fundo */
.grid .card { will-change: auto !important; }
.cor-pedra .p3d__viewer { mix-blend-mode: multiply; isolation: auto !important; contain: none !important; }
.cor-pedra .p3d__viewer canvas, .cor-pedra .p3d__viewer video, .cor-pedra .p3d__viewer img { mix-blend-mode: normal; }
.cor-papel .card__img img { mix-blend-mode: multiply; }

.mc-head .d2 { max-width: none; white-space: nowrap; font-size: clamp(2rem, 5vw, 4.25rem); }
@media (max-width: 640px) { .mc-head .d2 { white-space: normal; } }

/* ═══ revisão 9: títulos padronizados, cartões arredondados, rodapé ══════ */
/* todo título de seção: General Sans 300, um só tamanho, uma linha no computador */
main .d2, .site-foot .d2, main .h2 { font-family: var(--font-display); font-weight: 300 !important; line-height: 1;
  letter-spacing: -.022em; font-size: clamp(2rem, 3.6vw, 3.4rem) !important; max-width: none !important; }
@media (min-width: 900px) { main .d2, .site-foot .d2 { white-space: nowrap; } }
.hero-h { white-space: nowrap; }
#w3d-nome { white-space: normal; }

/* contato: título no padrão e frase de apoio, sem o vão grande */
.cform-cab { text-align: center; margin: 0 auto 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cform-cab .lead { margin: 0; }
.contact { padding-block: 7rem 6rem; justify-content: flex-start; }
.canais-v { margin-top: 2.6rem; justify-content: center; }

/* lançamentos: grade mais estreita, cartão arredondado com respiro; hover em placa clara, sem contorno */
.novos .grid { max-width: 72rem; margin-inline: auto; gap: 1.5rem; }
.novos .grid .card { border-radius: 1.5rem !important; padding: 2rem 1.75rem 2.2rem !important; transition: background .35s ease, transform .45s var(--ease-v) !important; }
.novos .grid .card::after { content: none !important; display: none !important; }
@media (hover: hover) { .novos .grid .card:hover { background: #fff !important; transform: translateY(-6px); } }
.novos .grid .card__name { font-size: 1rem; line-height: 1.35; max-width: 24ch; margin-inline: auto; }
.novos .grid .card__img img { max-width: 56% !important; }
.card::after { border-radius: 1.5rem; }

/* rodapé: a frase de abertura fica no meio do espaço acima do fio */
.foot-top { flex: 1; justify-content: center; padding-top: 6rem !important; padding-bottom: 2rem; }
.foot-sp { display: none; }

.contact .canais-v { width: 100%; display: flex; justify-content: center !important; align-self: center; flex-wrap: wrap; gap: .6rem; }

/* revisão 10: copy enriquecida */
.cr-fatos { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; gap: 2.4rem; flex-wrap: wrap; }
.cr-fatos li { border-left: 1px solid var(--hair-s); padding-left: 1rem; max-width: 11rem; }
.cr-fatos b { display: block; font-family: var(--font-display); font-weight: 300; font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; }
.cr-fatos span { display: block; margin-top: .45rem; font-size: .8rem; line-height: 1.45; color: var(--muted); }
.cr-txt .pill-o { margin-top: 2.4rem; }
.p3d__nota-v { margin-top: 1.2rem; font-size: .78rem; color: var(--muted); max-width: 30rem; }
.mc-sub { margin-top: 1.3rem; text-align: center; color: rgba(241,237,230,.66) !important; max-width: 40rem; }
.novos-sub, .comprar-sec .prod-head .lead { text-align: center; margin: -.6rem auto 0; }
.cv-avista .pill-d svg { width: 1rem; height: 1rem; }

/* ═══ revisão 11: imperdíveis em fileira, chapéus, quebra de linha ════════ */
/* chapéu: um estilo só, em todas as seções; menor tracking, colado ao título */
.eyebrow { font-family: var(--font-body) !important; font-size: .78rem !important; font-weight: 500 !important;
  letter-spacing: .16em !important; text-transform: uppercase; color: var(--muted); }
.eyebrow + .d2, .eyebrow + .h2, .eyebrow + .display, .eyebrow + h1 { margin-top: .9rem !important; }
.prod-head { gap: 1.2rem; }
.mc-head .d2, .cr-txt .d2, .imp-txt .d2 { margin-top: .9rem; }
.eyebrow--light, .cor-tinta .eyebrow { color: rgba(241,237,230,.6) !important; }

/* texto corrido: sem palavra curta sozinha no fim da linha */
.lead, .mc-sub, .novos-sub, .tcard p, .cr-txt .lead { text-wrap: pretty; }

/* imperdíveis: ficha ao lado do relógio, fileira de miniaturas embaixo */
#em-3d .p3d__palco { align-items: center; }
#em-3d .p3d__info { display: flex; flex-direction: column; align-items: flex-start; }
#em-3d .p3d__info > .eyebrow { margin-bottom: 0; }
.p3d__marca { margin-top: 1.6rem; font-family: var(--font-body); font-size: .9rem; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
#em-3d #w3d-nome { margin-top: .4rem; white-space: normal; max-width: 12ch; font-size: clamp(2.4rem, 4.6vw, 4.4rem) !important; line-height: .98; }
#em-3d .p3d__preco { margin-top: 1.4rem; text-align: left; }
#em-3d .p3d__cta { margin-top: 2rem; }
#em-3d .p3d__sel, #em-3d .p3d__rot, #em-3d .p3d__nota-v { display: none !important; }
.p3d__fila { display: grid !important; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem !important; margin: 3.5rem 0 0 !important; padding: 0 !important;
  border: 0 !important; overflow: visible !important; flex-wrap: nowrap; }
.p3d__fila button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .6rem;
  padding: .8rem .4rem 1rem; border-radius: 1.2rem; text-align: center; transition: background .3s ease, opacity .3s ease; opacity: .62; }
.p3d__fila button img { width: 74%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease-v); }
.p3d__fila button span { font-size: .82rem; font-weight: 500; letter-spacing: -.005em; color: var(--ink); line-height: 1.2; }
.p3d__fila button:hover { opacity: 1; }
.p3d__fila button:hover img { transform: translateY(-4px); }
.p3d__fila button[aria-selected="true"] { opacity: 1; background: rgba(255,255,255,.55); }
.p3d__fila button:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .p3d__fila { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; margin-inline: -1.5rem !important; padding-inline: 1.5rem !important; }
  .p3d__fila button { flex: 0 0 34%; scroll-snap-align: start; }
}

/* lançamentos em fundo branco: o fundo branco das fotos some sem depender de mistura de cor */
.novos { background: #fff !important; }
.novos .grid .card, .novos .grid .card:hover { background: transparent !important; }
.novos .grid .card__img img { mix-blend-mode: normal !important; }
/* Como comprar em papel, cartões brancos */
.comprar-sec.cor-papel .tcard { background: #fff; }
/* frase de apoio dos títulos centrados: uma linha no computador */
@media (min-width: 1000px) { .prod-head .lead, .mc-sub, .cform-cab .lead { max-width: none !important; white-space: nowrap; } }

@media (max-width: 900px) { br.qd { display: none; } }

/* contato em duas colunas: título, frase e canais à esquerda; formulário à direita; centrado na tela */
@media (min-width: 1000px) {
  .contact { display: grid !important; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "cab form" "canais form";
    column-gap: clamp(3rem, 7vw, 7rem); row-gap: 2rem; align-content: center; align-items: start; padding-block: 6rem !important; }
  .contact .cform-cab { grid-area: cab; text-align: left; align-items: flex-start; margin: 0; align-self: end; }
  .contact .cform-cab .lead { white-space: normal !important; max-width: 30rem !important; }
  .contact .cform { grid-area: form; margin: 0; max-width: none; align-self: center; }
  .contact .crow { grid-template-columns: 1fr 1fr; }
  .contact .csend { align-items: flex-start; }
  .contact .canais-v { grid-area: canais; justify-content: flex-start !important; margin: 0; align-self: start; }
}

/* miniaturas dos imperdíveis: placa branca absorve o fundo branco da foto (sem depender de mistura de cor) */
.p3d__fila button { background: #fff !important; opacity: 1 !important; border: 1px solid transparent; }
.p3d__fila button img { mix-blend-mode: normal !important; }
.p3d__fila button span { color: var(--muted); }
.p3d__fila button:hover span, .p3d__fila button[aria-selected="true"] span { color: var(--ink); }
.p3d__fila button[aria-selected="true"] { border-color: var(--ink) !important; background: #fff !important; }

/* imperdíveis cabem numa tela: relógio limitado pela altura, miniaturas baixas, conteúdo centrado */
#em-3d { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(4.5rem, 9vh, 6rem) clamp(1.5rem, 4vh, 3rem) !important; }
#em-3d .p3d__palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); }
#em-3d .p3d__viewer { height: min(54svh, 34rem); width: auto; aspect-ratio: 1; max-width: 100%; justify-self: center; }
#em-3d #w3d-nome { font-size: clamp(2.2rem, 3.8vw, 3.6rem) !important; }
#em-3d .p3d__marca { margin-top: 1.1rem; }
#em-3d .p3d__preco { margin-top: 1rem; }
#em-3d .p3d__cta { margin-top: 1.5rem; }
.p3d__fila { margin-top: clamp(1.2rem, 3vh, 2.2rem) !important; }
.p3d__fila button { padding: .5rem .4rem .7rem; gap: .35rem; border-radius: 1rem; }
.p3d__fila button img { width: auto; height: clamp(3.6rem, 8svh, 5rem); aspect-ratio: 1; }
.p3d__fila button span { font-size: .76rem; }
@media (max-width: 900px) {
  #em-3d { min-height: 0; }
  #em-3d .p3d__palco { grid-template-columns: minmax(0, 1fr); }
  #em-3d .p3d__viewer { height: auto; width: 100%; }
}

/* hero: título menor, em duas linhas, com linha de apoio; canto inferior do vídeo mais escuro para leitura */
.hero-h { font-size: clamp(2.2rem, 4.4vw, 4.4rem) !important; line-height: 1.02 !important; font-weight: 300 !important; max-width: none; }
.hero-sub { margin-top: 1.4rem; font-size: clamp(.9rem, 1.1vw, 1.05rem); color: rgba(255,255,255,.82); letter-spacing: .01em; max-width: 40rem; }
.hero-ui { justify-content: flex-end; padding-bottom: clamp(2.5rem, 7vh, 4.5rem) !important; }
.vscrim { background: linear-gradient(to top, rgba(8,7,6,.82) 0%, rgba(8,7,6,.45) 30%, transparent 58%), linear-gradient(to right, rgba(8,7,6,.6) 0%, transparent 55%) !important; }
@media (max-width: 640px) { .hero-h { font-size: 2.05rem !important; white-space: normal; } .hero-sub { font-size: .86rem; } }

/* ═══ revisão 12: pilha — a seção de baixo sobe e engole a de cima ═════════ */
/* cada seção fica presa no topo (ou no pé, quando é mais alta que a tela: o JS escreve o top);
   a seguinte vem por cima, com canto arredondado, e a de baixo escurece enquanto é coberta */
.pilha { position: sticky !important; top: 0; }
.pilha + .pilha, main > .pilha ~ .pilha { margin-top: -40px; border-radius: 40px 40px 0 0; }
.casa-res.pilha { background: #fbfaf8; }
.novos.pilha { background: #ffffff; }
.layer.pilha { position: relative !important; top: auto !important; overflow: clip; }
.layer.pilha > .pin { border-radius: 40px 40px 0 0; }
.pilha > .veu-pilha { position: absolute; inset: 0; background: #0b0a09; opacity: 0; pointer-events: none; z-index: 60; border-radius: inherit; }
.engole { will-change: auto; clip-path: none !important; }
@media (max-width: 760px) {
  .pilha + .pilha, main > .pilha ~ .pilha { margin-top: -24px; border-radius: 24px 24px 0 0; }
  .layer.pilha > .pin { border-radius: 24px 24px 0 0; }
}
/* pilha: seção mais baixa que a tela ocuparia só parte dela e deixaria a de trás aparecer embaixo */
main > .pilha:not(.layer) { min-height: 100lvh; }
.casa-res.pilha { align-content: center; }
.comprar-sec.pilha { display: flex; flex-direction: column; justify-content: center; }
.comprar-sec.pilha { padding-block: 6rem; }

/* ═══ revisão 13: seções escuras no degradê do rodapé ═════════════════════ */
.cor-tinta, .garantias-sec { position: relative; isolation: isolate; background: #1a1511 !important; }

.grad-sec { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; border-radius: inherit; display: block; }
.cor-tinta > *:not(.grad-sec):not(.veu-pilha), .garantias-sec > *:not(.grad-sec) { position: relative; z-index: 1; }
.garantias-sec .oyster { display: none !important; }
/* topo das páginas internas: o véu sobre o vídeo sai do azul e vai para o mesmo marrom do degradê */
.topo-filme { background: #1a1511 !important; }
.topo-filme::before { background: linear-gradient(90deg, rgba(20,15,11,.82) 0%, rgba(20,15,11,.5) 42%, rgba(20,15,11,.08) 75%), linear-gradient(0deg, rgba(20,15,11,.6), rgba(20,15,11,0) 45%) !important; }
.topo-filme .eyebrow { color: rgba(241,237,230,.7) !important; }
.casa--filme { background: #1a1511 !important; }
/* páginas internas: o topo também vira o degradê; o vídeo antigo sai */
.topo-filme__vid, .casa--filme .casa__vid { display: none !important; }
.topo-filme::before, .casa--filme::before { display: none !important; }
.topo-filme > .grad-sec, .casa--filme > .grad-sec { z-index: -1; }

/* ═══ revisão 14: o engolir só em duas passagens (hero → a casa, imperdíveis → marcas) ═ */
main#conteudo > * { position: relative; }
main#conteudo > .prende { position: sticky !important; top: 0; min-height: 100lvh; }
main#conteudo > .cobre { margin-top: -40px; border-radius: 40px 40px 0 0; }
.casa-res.cobre { background: #fbfaf8; }
.prende > .veu-pilha { position: absolute; inset: 0; background: #0b0a09; opacity: 0; pointer-events: none; z-index: 60; border-radius: inherit; }
@media (max-width: 760px) { main#conteudo > .cobre { margin-top: -24px; border-radius: 24px 24px 0 0; } }

/* ═══ revisão 15: destaque editorial (faixas em close + texto) e cards de lançamento em vitrine ═ */
.destaque { background: #fff; display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-block: 5rem; align-items: center; }
.dq-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; height: min(78svh, 46rem); }
.dq-fotos figure { margin: 0; border-radius: 1.25rem; overflow: hidden; background: #e9e6e1; }
.dq-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-v); }
.dq-fotos figure:hover img { transform: scale(1.04); }
.dq-txt { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30rem; margin-inline: auto; }
.dq-selo { font-size: .78rem; font-weight: 500; letter-spacing: .02em; background: var(--ink); color: #fff; padding: .4rem .8rem; border-radius: 99px; }
.dq-logo { width: 8.5rem; height: auto; margin-top: 2rem; filter: brightness(0); opacity: .9; }
.dq-txt .d2 { margin-top: 1.2rem !important; }
.dq-txt .lead { margin-top: 1.2rem; text-wrap: pretty; }
.dq-txt .pill-o { margin-top: 2rem; }
@media (min-width: 1000px) {
  .destaque { grid-template-columns: 1.9fr 1fr; gap: 4rem; min-height: 100svh; }
  .dq-fotos { height: min(82svh, 52rem); }
}
@media (max-width: 640px) { .dq-fotos { height: 24rem; gap: .5rem; } .dq-fotos figure { border-radius: .9rem; } }

/* lançamentos: peça num quadro claro sobre fundo de pedra, selo, nome, ficha em linha e preço */
.novos { background: #ece7df !important; --muted: #5d5953; }   /* cinza do texto de apoio mais escuro no bege: 4,37:1 → 5,5:1 */
.novos .grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem !important; max-width: 82rem; margin-inline: auto; }
#novos .card:nth-child(n+4) { display: flex !important; }
#novos .card:nth-child(n+5) { display: none !important; }
.novos .grid .card, .novos .grid .card:hover { display: flex; flex-direction: column; text-align: left !important; padding: 0 !important; border-radius: 0 !important; background: transparent !important; min-height: 0; }
.novos .grid .card__img { order: -1; position: relative; background: #fff; border-radius: 1.25rem; aspect-ratio: 4 / 5 !important; display: grid; place-items: center; margin: 0 0 1.1rem !important; overflow: hidden; }
.novos .grid .card__img img { width: 72% !important; max-width: 72% !important; max-height: none; }
.card__selo { position: absolute; top: .9rem; left: .9rem; z-index: 1; font-size: .76rem; font-weight: 500; color: var(--ink); background: #f1ede6; padding: .35rem .7rem; border-radius: 99px; }
.novos .grid .card__name { font-size: 1.05rem !important; font-weight: 500; line-height: 1.3; max-width: none !important; margin: 0 !important; text-align: left; }
.novos .grid .card__meta { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .55rem; font-size: .8rem; color: var(--muted); }
.novos .grid .card__price { margin-top: 1.1rem !important; font-size: 1.3rem !important; }
.novos .grid .card__parc { margin-top: .35rem; }
@media (max-width: 900px) { .novos .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem !important; } .card__selo { top: .6rem; left: .6rem; font-size: .7rem; } }
.hero-ui { padding-bottom: clamp(6rem, 17vh, 11rem) !important; }
@media (max-width: 640px) { .hero-ui { padding-bottom: clamp(5rem, 14vh, 8rem) !important; } }

/* ═══ revisão 16: como comprar no degradê marrom; contato com foto e conteúdo no meio ═ */
.comprar-sec.cor-tinta { padding-block: 7rem; }
.comprar-sec.cor-tinta .lead { color: rgba(241,237,230,.72) !important; }
.comprar-sec.cor-tinta .tcard { background: rgba(255,255,255,.96) !important; box-shadow: none !important; }
.comprar-sec.cor-tinta .pill-d { background: #f1ede6; color: #0d0c0b; }
.comprar-sec.cor-tinta .pill-d:hover { background: #fff; }

.cfoto { margin: 0 0 2.5rem; border-radius: 1.5rem; overflow: hidden; aspect-ratio: 4 / 3; background: #ece7df; }
.cfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 1000px) {
  .contact { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important;
    grid-template-areas: "foto cab" "foto form" "foto canais" !important;
    column-gap: 6rem !important; row-gap: 2.6rem !important; align-content: center; align-items: start !important; }
  .contact .cfoto { grid-area: foto; margin: 0; aspect-ratio: 4 / 5; align-self: center; max-height: 78svh; }
  .contact .cform-cab { align-self: end !important; }
  .contact .cform { align-self: start !important; }
}
.comprar-sec.cor-tinta .tcard, .comprar-sec.cor-tinta .tcard .n { color: var(--ink) !important; } .comprar-sec.cor-tinta .tcard .n em, .comprar-sec.cor-tinta .tcard p, .comprar-sec.cor-tinta .tcard .k { color: var(--muted) !important; }

/* ═══ revisão 17: menu sólido sobre o hero, igual às outras páginas (o vídeo claro lavava a pílula translúcida) ═ */
#nav:not(.light) .navpill:not(.brand) { background: rgba(20,17,14,.94); border-color: rgba(255,255,255,.12); }

/* ═══ revisão 18: botão de menu também no desktop, menu aberto em tela cheia ═ */
#nav .menu-btn { display: flex !important; }
@media (min-width: 1081px) {
  .drawer { padding: 8rem clamp(3rem, 6vw, 7rem) 4rem; }
  .drawer a { font-size: clamp(3rem, 5.2vw, 5.5rem); max-width: 60rem; }
}

/* ═══ revisão 19: sem a pílula de links; botão de menu vira a palavra MENU (mesmo estilo do chapéu) ═ */
.navpill.links { display: none !important; }
#nav .menu-btn {
  width: auto; padding: 0 1.3rem; gap: 0; flex-direction: row; cursor: pointer;
  font-family: var(--font-body); font-size: .78rem; font-weight: 500; line-height: 1;
  letter-spacing: .16em; text-transform: uppercase; color: inherit;
}
#nav .menu-btn span.menu-btn__t { width: auto; height: auto; background: none; transform: none !important; transition: none; }
#nav .menu-btn .menu-btn__fechar,
#nav .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
#nav .menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }
#nav .menu-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ═══ revisão 20: menu aberto em mestre-detalhe (estudo do menu da Breguet, na identidade velum) ═══
   lista principal à esquerda (ativo em tinta, os outros em cinza), duas colunas de atalhos do item ativo,
   card com foto e barra de atalhos embaixo. Celular: acordeão, sem card. */
.drawer.mm { display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  padding: 6.5rem 1.25rem 1.5rem; overflow-y: auto; overscroll-behavior: contain; }
.drawer.mm a, .drawer.mm button { font: inherit; letter-spacing: inherit; text-transform: none; border: 0; padding: 0; max-width: none; }
.mm-lista { list-style: none; margin: 0; padding: 0; }
.drawer.mm .mm-l1 {
  display: block; width: 100%; text-align: left; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 8.5vw, 2.6rem); line-height: 1.12;
  letter-spacing: -.024em; color: var(--muted); padding: .5rem 0; transition: color .25s ease;
}
.drawer.mm .mm-i.is-on .mm-l1, .drawer.mm .mm-l1:hover { color: var(--ink); }
.drawer.mm .mm-l1:focus-visible, .drawer.mm .mm-a:focus-visible, .drawer.mm .mm-card:focus-visible, .drawer.mm .mm-s:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 4px; }
.mm-gt { margin: 0 0 .9rem; font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mm-g + .mm-g { margin-top: 2.1rem; }
.drawer.mm .mm-a { display: flex; align-items: baseline; gap: .55rem; width: fit-content; padding: .42rem 0;
  font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.drawer.mm .mm-a:hover { color: var(--accent-ink); }
.mm-n { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-f { margin: 0; padding: .42rem 0; font-size: 1rem; line-height: 1.25; color: var(--muted); }
.drawer.mm .mm-card { position: relative; display: block; overflow: hidden; border-radius: 1.25rem; background: #1a1714; color: #fff; isolation: isolate; }
.mm-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-v); }
.mm-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,9,8,.86) 0%, rgba(10,9,8,.62) 34%, rgba(10,9,8,.12) 62%, rgba(10,9,8,0) 78%); }
.drawer.mm .mm-card:hover img { transform: scale(1.04); }
.mm-card__t { position: absolute; left: 1.6rem; top: 1.5rem; right: 40%; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1.9vw, 1.9rem); line-height: 1.08; letter-spacing: -.022em; }
.mm-card__l { position: absolute; left: 1.6rem; bottom: 1.4rem; font-size: .875rem; font-weight: 500; text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
/* com o menu aberto, o WhatsApp flutuante sai (o menu já tem o atalho) */
body:has(.drawer.is-open) .wa-fixo { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.mm-foot { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1rem; margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.drawer.mm .mm-s { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; font-family: var(--font-body); font-size: .95rem; font-weight: 400; line-height: 1.2; color: var(--ink); }
.mm-s svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--accent-ink); }
.drawer.mm .mm-s:hover span { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }

/* celular e tablet: acordeão — o item ativo abre os atalhos embaixo dele */
@media (max-width: 1080px) {
  .mm-i { border-bottom: 1px solid var(--hair); }
  .mm-p { display: none; padding: .2rem 0 1.4rem; }
  .mm-i.is-on .mm-p { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .drawer.mm .mm-card { display: none; }
  .mm-gt { margin-bottom: .45rem; }
  .mm-g + .mm-g { margin-top: 1.4rem; }
  .mm-foot { margin-top: 1.4rem; padding-top: 0; border-top: 0; }
}
@media (max-width: 420px) { .mm-i.is-on .mm-p { grid-template-columns: 1fr; gap: 1.2rem; } }

/* computador: grade da Breguet — lista 24%, duas colunas iguais, card largo */
@media (min-width: 1081px) {
  .drawer.mm { padding: 8rem clamp(1.5rem, 2.6vw, 3rem) 1.6rem; }
  .mm-lista { position: relative; flex: 1; min-height: 23rem; max-height: 30rem; }
  .mm-i { width: 24%; }
  .drawer.mm .mm-l1 { font-size: clamp(2rem, 2.5vw, 2.75rem); padding: .3rem 0; width: auto; }
  .mm-p {
    position: absolute; top: .3rem; left: 24%; right: 0;
    display: grid; grid-template-columns: 1fr 1fr 2.2fr; column-gap: 1.5rem; align-items: start;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .25s ease, transform .45s var(--ease-v), visibility 0s .25s;
  }
  .mm-i.is-on .mm-p { opacity: 1; visibility: inherit; transform: none; transition: opacity .35s ease .05s, transform .55s var(--ease-v) .05s, visibility 0s; }
  .mm-p > * { min-width: 0; }
  .drawer.mm .mm-card { aspect-ratio: 550 / 260; }
  .mm-lista { flex: none; height: 26rem; min-height: 0; max-height: none; }
  .mm-foot { grid-template-columns: repeat(4, 1fr); padding-top: .9rem; margin-top: 2rem; }
  .drawer.mm .mm-s { font-size: 1rem; }
}