/* Haut BH · tema claro (revisão do supervisor, 06/11/2026)
   Base clara (marfim, papel, linho) com o preto e o dourado-taupe do logo como acento.
   Público de 13 a 80+ anos: legível pela nitidez, contraste e hierarquia, sem texto gigante. */
:root {
  --marfim: #f6f2ea;
  --papel: #eee7db;
  --linho: #e6ddcd;
  --tinta: #1d1a16;          /* títulos */
  --texto: #3a352d;          /* texto corrido: contraste ~10:1 no marfim */
  --taupe: #6b6355;          /* rótulos pequenos: contraste ~5,6:1 */
  --champagne: #938c7d;      /* cor da marca (detalhes) */
  --ouro: #b39f78;
  --metal: linear-gradient(100deg, #6b604c 0%, #9c8b6c 30%, #cdbd98 48%, #9c8b6c 66%, #6b604c 100%);

  --serifa: "Newsreader", "EB Garamond", Georgia, serif; /* equivalente livre da Fortescue (Jaeger-LeCoultre) */
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif; /* equivalente livre da Gotham (Jaeger-LeCoultre) */
  --margem: clamp(1.25rem, 5vw, 5.5rem);
  --curva: cubic-bezier(.22, 1, .36, 1);
  --alto-topo: 78px;
}

@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--marfim); color: var(--texto);
  font: 400 1.0625rem/1.75 var(--sans);   /* 17 px */
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--tinta); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: var(--marfim); padding: .75rem 1.25rem; text-decoration: none; }
.pular:focus { top: 1rem; }

/* ---------- Tipografia ---------- */
.sobre { font: 500 .8125rem/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.titulo { font: 400 clamp(1.9rem, 3.2vw, 2.9rem)/1.15 var(--serifa); letter-spacing: -.005em; }
.titulo--pagina { font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1.08; }
.subtitulo { font: 500 1.375rem/1.3 var(--serifa); }
.lead { font: 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.55 var(--serifa); color: var(--texto); max-width: 38rem; }
.texto { max-width: 36rem; }
.centro { text-align: center; margin-inline: auto; }
/* destaque em itálico com o degradê metálico (pedido: manter o degradê nas letras) */
.titulo em, .lead em, .abertura__slogan em, .passo em, .equipe__frase em {
  font-style: italic; background: var(--metal); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: metal 9s ease-in-out infinite;
}
@keyframes metal { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.capitular::first-letter { float: left; font: 400 3.6em/.8 var(--serifa); color: var(--champagne); margin: .1em .12em 0 0; }

/* ---------- Links e botões ---------- */
.elo { color: var(--tinta); text-decoration: none; letter-spacing: .02em; transition: color .3s; }
.elo:hover { color: var(--taupe); }
.elo--seta::after { content: " →"; }
.botao {
  display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 2rem; text-decoration: none;
  font: 500 .8125rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; position: relative; overflow: hidden; isolation: isolate;
  transition: background-color .4s var(--curva), color .4s, border-color .4s;
}
.botao::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 250, 235, .45) 50%, transparent 65%); transform: translateX(-120%); transition: transform .9s var(--curva); }
.botao:hover::after { transform: translateX(120%); }
.botao--cheio { background: var(--tinta); color: var(--marfim); }
.botao--cheio:hover { background: #3b352c; }
.botao--linha { border: 1px solid var(--tinta); color: var(--tinta); }
.botao--linha:hover { background: var(--tinta); color: var(--marfim); }
.acoes { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ---------- Transição de seção: varredura de ponteiro a partir das 12 h ---------- */
.giro { -webkit-mask: conic-gradient(from 0deg, #000 var(--giro), transparent calc(var(--giro) + .5deg)); mask: conic-gradient(from 0deg, #000 var(--giro), transparent calc(var(--giro) + .5deg)); }
.giro.visivel { animation: varrer 1.25s cubic-bezier(.65, 0, .35, 1) forwards; }
.giro.girou { -webkit-mask: none; mask: none; }
.pagina-inicio .giro { -webkit-mask: none; mask: none; opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--curva), transform 1.1s var(--curva); }
.pagina-inicio .giro.visivel { animation: none; opacity: 1; transform: none; }
@keyframes varrer { to { --giro: 361deg; } }

/* ---------- Topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 30; height: var(--alto-topo);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2.5rem; padding: 0 var(--margem);
  background: var(--marfim); background: color-mix(in srgb, var(--marfim) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: box-shadow .4s;
}
.topo.rolou { box-shadow: 0 1px 0 rgba(29, 26, 22, .08), 0 10px 30px -20px rgba(29, 26, 22, .25); }
.topo__nav { display: flex; gap: clamp(1.25rem, 2.4vw, 2.5rem); align-items: center; }
.topo__nav--esq { justify-content: flex-end; }
.topo__nav a, .topo__zap { font: 500 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--tinta); padding: .9rem 0; transition: color .3s; }
.topo__nav a:hover { color: var(--taupe); }
.topo__nav a[aria-current="page"] { color: var(--taupe); }
.marca { display: block; }
.logo { display: block; overflow: visible; aspect-ratio: 278 / 92; height: auto; color: var(--tinta); }
.logo-traco { stroke: var(--traco, currentColor); }
.logo-ponteiros { fill: var(--traco, currentColor); }
.logo--topo { width: 104px; --traco: url(#metal); }
.topo__zap { display: inline-flex; align-items: center; gap: .6rem; position: absolute; right: var(--margem); }
.topo__zap svg { width: 24px; height: 24px; color: var(--champagne); }
.topo__menu { display: none; justify-self: start; align-items: center; gap: .75rem; background: none; border: 0; padding: 0; min-height: 48px; cursor: pointer; color: var(--tinta); font: 500 .78rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.topo__menu-linhas { position: relative; width: 26px; height: 1px; background: currentColor; }
.topo__menu-linhas::before, .topo__menu-linhas::after { content: ""; position: absolute; left: 0; width: 26px; height: 1px; background: currentColor; transition: transform .4s var(--curva); }
.topo__menu-linhas::before { top: -7px; } .topo__menu-linhas::after { top: 7px; }
.topo__menu[aria-expanded="true"] .topo__menu-linhas { background: transparent; }
.topo__menu[aria-expanded="true"] .topo__menu-linhas::before { transform: translateY(7px) rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-linhas::after { transform: translateY(-7px) rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 25; background: var(--marfim); display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding: 6rem var(--margem) 3rem; opacity: 0; transition: opacity .4s var(--curva); }
.menu[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.menu.aberto { opacity: 1; visibility: visible; pointer-events: auto; }
.menu__lista { display: grid; gap: .35rem; }
.menu__lista a { font: 400 1.75rem/1.4 var(--serifa); color: var(--tinta); text-decoration: none; }
.menu__lista a:hover { color: var(--taupe); }
.menu__zap { align-self: flex-start; }

/* ---------- Seções ---------- */
main { padding-top: var(--alto-topo); }
.secao { padding: clamp(4.5rem, 9vw, 7.5rem) var(--margem); }
.secao--papel { background: var(--papel); }
.pilha { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.pilha--centro { justify-items: center; }
.duas-colunas--topo { align-items: start !important; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); align-items: end; max-width: 1200px; margin: 0 auto; }
.lado-a-lado { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; max-width: 1200px; margin: 0 auto; }
.lado-a-lado--inverso { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.cabecalho-centro { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.cabeca-pagina { padding-bottom: 3.5rem; max-width: 1200px; margin: 0 auto; }
.cabeca-pagina .giro { display: grid; gap: 1.25rem; max-width: 48rem; }
.cabeca-pagina--centro .giro { margin: 0 auto; text-align: center; justify-items: center; }

/* molduras de vídeo (cada aba com uma forma) */
.moldura { position: relative; overflow: hidden; background: var(--linho); box-shadow: 0 30px 60px -36px rgba(40, 32, 20, .45); }
.moldura video { width: 100%; height: 100%; object-fit: cover; }
.moldura--arco { aspect-ratio: 3 / 4; border-radius: 999px 999px 28px 28px; }
.moldura--alta { aspect-ratio: 4 / 5.4; max-width: 460px; justify-self: center; width: 100%; }
.moldura--larga { aspect-ratio: 16 / 10; border-radius: 28px; }
.moldura--larga video { object-position: center 35%; }

/* ---------- Início: vídeo em tela cheia; o logo e o slogan surgem com a rolagem ---------- */
.pagina-inicio main { padding-top: 0; }
.abertura { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.abertura__fixa { display: contents; }
.abertura__video { position: absolute; inset: 0; z-index: -1; background: #1d1a16; }
.abertura__video video { width: 100%; height: 100%; object-fit: cover; }
.abertura__video::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 50%, rgba(18, 15, 12, .5) 0%, rgba(18, 15, 12, .78) 100%),
              linear-gradient(180deg, rgba(18, 15, 12, .5) 0%, transparent 25%, transparent 75%, rgba(18, 15, 12, .6) 100%); }
.abertura__conteudo { display: grid; justify-items: center; gap: 1.6rem; text-align: center; padding: 0 var(--margem); }
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.abertura__lugar { color: #e8dfcd; }
.abertura__logo { width: min(560px, 74vw); }
.logo--abertura { width: 100%; --traco: url(#brilho-logo); filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .55)); }
.abertura__slogan { font: 400 clamp(1.5rem, 2.8vw, 2.4rem)/1.25 var(--serifa); color: #f4ecdb; }
.abertura__slogan em { -webkit-background-clip: border-box; background-clip: border-box; background: none; color: #d9caa4; animation: none; }
.abertura__descer { position: absolute; left: 50%; bottom: 2rem; transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: .9rem; text-decoration: none; color: #e8dfcd; font: 500 .75rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; min-height: 48px; }
.abertura__seta { width: 1px; height: 36px; background: rgba(244, 236, 219, .45); }
/* topo transparente sobre o vídeo, até rolar */
.pagina-inicio .topo:not(.rolou) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.pagina-inicio .topo:not(.rolou) .topo__nav a, .pagina-inicio .topo:not(.rolou) .topo__zap, .pagina-inicio .topo:not(.rolou) .topo__menu { color: #f4ecdb; }
.pagina-inicio .topo:not(.rolou) .logo--topo { --traco: #f4ecdb; }

/* ---------- Vitrine: relógios soltos sobre faixa escura, sem moldura ---------- */
.secao--vitrine { position: relative; overflow: clip; isolation: isolate; background: radial-gradient(ellipse 80% 70% at 50% 45%, #2e2a24 0%, #1f1c18 55%, #161411 100%); color: #f3ede2; }
.secao--vitrine::before, .secao--vitrine::after { content: ""; position: absolute; z-index: -1; width: clamp(420px, 34vw, 620px); aspect-ratio: 1; background: url(../assets/img/engrenagens.svg) center / contain no-repeat; opacity: .2; pointer-events: none; }
.secao--vitrine::before { left: 0; top: 50%; transform: translate(-58%, -50%) rotate(-12deg); }
.secao--vitrine::after { right: 0; top: 50%; transform: translate(58%, -46%) rotate(160deg); }
@media (max-width: 1100px) { .secao--vitrine::before, .secao--vitrine::after { opacity: .1; } }
.secao--vitrine .sobre { color: #b7ad99; }
.secao--vitrine .titulo { color: #f6f1e7; }
.secao--vitrine .titulo em { color: #cdbd98; }
.secao--vitrine .botao--linha { color: #f3ede2; border-color: rgba(243, 237, 226, .45); }
.secao--vitrine .botao--linha:hover { background: #f3ede2; color: #1d1a16; }
.vitrine { display: grid; gap: clamp(1.5rem, 3vw, 3rem); max-width: 1180px; margin: 0 auto 3rem; }
.vitrine--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nicho { display: grid; gap: 1.4rem; text-align: center; }
.nicho__arco { position: relative; aspect-ratio: 4 / 4.6; }
.nicho__arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.nicho__casa { display: block; font: 500 .78rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: #a89e8b; }
.nicho__modelo { display: block; margin-top: .35rem; font: italic 400 1.45rem/1.3 var(--serifa); color: #f3ede2; }
.acervo-grade .vitrine + .vitrine { margin-top: 1rem; }

/* ---------- Equipe: sócios centralizados no vídeo, texto ao lado ---------- */
.equipe { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; max-width: 1200px; margin: 0 auto; }
.equipe__texto { display: grid; gap: 1rem; justify-items: start; }
.equipe__numero { font: 300 clamp(3.6rem, 7vw, 5.6rem)/1 var(--sans); color: var(--tinta); letter-spacing: -.02em; }
.equipe__mil { font: italic 400 .4em/1 var(--serifa); color: var(--taupe); letter-spacing: 0; }
.equipe__frase { font: 400 clamp(1.25rem, 1.8vw, 1.55rem)/1.4 var(--serifa); color: var(--tinta); max-width: 22rem; }
.instagram { display: inline-flex; align-items: center; gap: .9rem; margin-top: .5rem; min-height: 58px; padding: .5rem 1.4rem .5rem .8rem; border: 1px solid rgba(29, 26, 22, .35); border-radius: 999px; text-decoration: none; color: var(--tinta); font: 500 1rem/1 var(--sans); letter-spacing: .06em; transition: background-color .3s, border-color .3s; }
.instagram:hover { background: var(--linho); border-color: var(--tinta); }
.instagram__icone { width: 38px; height: 38px; color: var(--champagne); }

/* ---------- Chamada final ---------- */
.chamada__caixa { max-width: 980px; margin: 0 auto; text-align: center; display: grid; gap: 1.25rem; justify-items: center; padding: clamp(3rem, 6vw, 5rem) var(--margem); border-radius: 32px; background: radial-gradient(ellipse at 50% 0%, #fbf8f1, var(--linho)); }

/* ---------- A Casa: mapa com ponteiro ---------- */
.mapa-grade { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 1200px; margin: 0 auto; }
.mapa { width: 100%; height: auto; overflow: visible; }
.mapa__estados path { fill: #e8e0d1; stroke: var(--marfim); stroke-width: 1.2; stroke-linejoin: round; }
.mapa__alcance { fill: none; stroke: rgba(107, 99, 85, .28); stroke-width: 1; stroke-dasharray: 3 5; }
.mapa__rota { fill: none; stroke: var(--ouro); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--curva), opacity 1.6s ease; opacity: 0; }
.mapa__rota.acesa { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 1.1s var(--curva), opacity .2s; }
.mapa__ponto { fill: var(--champagne); transition: fill .4s; }
.mapa__halo { fill: rgba(179, 159, 120, 0); transform-box: fill-box; transform-origin: center; }
.mapa__cidade.acesa .mapa__ponto { fill: var(--tinta); }
.mapa__cidade.acesa .mapa__halo { animation: halo 1.4s ease-out; }
@keyframes halo { from { fill: rgba(179, 159, 120, .55); transform: scale(.4); } to { fill: rgba(179, 159, 120, 0); transform: scale(2.4); } }
.mapa__rastro { fill: rgba(179, 159, 120, .13); }
.mapa__faceta--clara { fill: #4a4237; }
.mapa__faceta--escura { fill: #1d1a16; }
.mapa__cauda { fill: #1d1a16; }
.mapa__contrapeso { fill: none; stroke: #1d1a16; stroke-width: 3.2; }
.mapa__eixo { fill: #1d1a16; }
.mapa__eixo-centro { fill: #cdbd98; }
.mapa__ponteiro { filter: drop-shadow(2px 4px 3px rgba(40, 32, 20, .28)); }
.mapa__ponteiro { transform: rotate(var(--angulo, 0deg)); }
.mapa__bh-ponto { fill: var(--tinta); }
.mapa__bh-halo { fill: none; stroke: var(--tinta); stroke-width: 1; opacity: .35; }
.mapa__bh text { fill: var(--tinta); font: 500 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; paint-order: stroke; stroke: var(--marfim); stroke-width: 4px; }
.mapa-cidade { font: 400 1.35rem/1.3 var(--serifa); color: var(--tinta); min-height: 1.8em; }
.mapa-cidade__rotulo { font: 500 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin-right: .6rem; }

/* ---------- Oficina ---------- */
.servicos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 4rem; max-width: 1000px; margin: 0 auto; }
.servico { display: grid; gap: .6rem; padding-left: 1.5rem; border-left: 2px solid var(--champagne); }


/* ---------- Desfile do acervo: palco preso; cada relógio abre por uma íris conforme a rolagem ---------- */
.desfile { position: relative; height: calc(var(--n) * 100vh); height: calc(var(--n) * 100svh); }
.resumo-acervo--desfile .desfile { margin: 0 calc(var(--margem) * -1); }
.resumo-acervo--desfile { padding-bottom: clamp(3rem, 6vw, 5rem); }
.desfile__palco { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.desfile__quadro { --abre: 1; position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(1rem, 4vw, 4rem); padding: 90px max(var(--margem), calc((100vw - 1240px) / 2)) 40px;
  background: radial-gradient(ellipse 22% 40% at 64% 18%, rgba(255, 240, 210, .07), transparent 70%), radial-gradient(ellipse 60% 70% at 64% 52%, #34302a 0%, #1f1c18 58%, #151310 100%);
  clip-path: circle(calc(var(--abre) * 75vmax) at 64% 52%); }
.desfile__quadro + .desfile__quadro { --abre: 0; }
.desfile__quadro.recuado .desfile__peca { --escala: .9; filter: brightness(.55); }
/* relógio centrado no trilho, apoiado num disco de vitrine; gira de leve com a rolagem */
.desfile__peca { position: absolute; left: 64%; top: 52%; margin: 0; height: min(76vh, 740px); aspect-ratio: 4 / 5; display: grid; place-items: center; isolation: isolate;
  transform: translate(-50%, -51%) perspective(1400px) rotateY(var(--gira, 0deg)) rotateZ(var(--inclina, 0deg)) scale(var(--escala, 1)); transition: filter 1s var(--curva); will-change: transform; }
.desfile__peca img { width: 100%; height: 100%; object-fit: contain; }
/* disco de vitrine atrás da caixa: dá chão ao relógio */
.desfile__peca::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 50% 36%, #4a443a 0%, #2f2a23 52%, #1d1a16 100%);
  box-shadow: inset 0 0 0 1.5px rgba(205, 189, 152, .6), inset 0 0 0 8px rgba(29, 26, 22, .92), inset 0 0 0 9px rgba(205, 189, 152, .3), inset 0 18px 50px rgba(255, 240, 210, .06), 0 0 90px 10px rgba(205, 189, 152, .07); }
/* trilho de minutos em volta do disco */
.desfile__quadro::before { content: ""; position: absolute; left: 64%; top: 52%; width: min(64vh, 40vw); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(calc(var(--abre) * 30deg - 30deg)); border-radius: 50%; opacity: .26;
  background: repeating-conic-gradient(#cdbd98 0 .35deg, transparent .35deg 6deg);
  -webkit-mask: radial-gradient(closest-side, transparent 93%, #000 93.5%, #000 99%, transparent 99.5%); mask: radial-gradient(closest-side, transparent 93%, #000 93.5%, #000 99%, transparent 99.5%); }
.desfile__texto { display: grid; gap: .9rem; justify-items: start; color: #f3ede2; }
.desfile__texto > * { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--curva), transform .9s var(--curva); }
.desfile__quadro.ativo .desfile__texto > * { opacity: 1; transform: none; }
.desfile__quadro.ativo .desfile__texto > :nth-child(2) { transition-delay: .08s; }
.desfile__quadro.ativo .desfile__texto > :nth-child(3) { transition-delay: .16s; }
.desfile__quadro.ativo .desfile__texto > :nth-child(4) { transition-delay: .24s; }
.desfile__casa { font: 500 .8rem/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #b7ad99; }
.desfile__modelo { font: italic 400 clamp(2.4rem, 4.6vw, 4.4rem)/1.04 var(--serifa); color: #f6f1e7; }
.desfile__ref { font: 400 1rem/1.5 var(--sans); color: #cfc6b5; }
.desfile__elo { margin-top: .8rem; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.6rem; border: 1px solid rgba(243, 237, 226, .45); color: #f3ede2; font: 500 .78rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.desfile__elo:hover { background: #f3ede2; color: #1d1a16; }
.desfile__progresso { position: absolute; right: max(var(--margem), calc((100vw - 1240px) / 2)); bottom: 32px; z-index: 50; display: flex; align-items: center; gap: .9rem; color: #cfc6b5; font: 400 .85rem/1 var(--sans); letter-spacing: .14em; }
.desfile__progresso b { font-weight: 500; color: #f3ede2; }
.desfile__progresso svg { width: 54px; height: 54px; fill: none; stroke: rgba(205, 189, 152, .5); stroke-width: 1; }
.desfile__progresso .desfile__marca { fill: #cdbd98; stroke: none; }
.desfile__progresso svg > circle:last-child { fill: #cdbd98; stroke: none; }
.desfile__agulha { stroke: #f3ede2; stroke-width: 1.6; stroke-linecap: round; transform-origin: 30px 30px; transform: rotate(var(--giro-desfile, 0deg)); }
@media (max-width: 860px) {
  .desfile__quadro { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: center; padding: 84px var(--margem) 96px; clip-path: circle(calc(var(--abre) * 90vmax) at 50% 62%); background: radial-gradient(ellipse 90% 60% at 50% 62%, #34302a 0%, #1f1c18 60%, #151310 100%); }
  .desfile__peca { left: 50%; top: 62%; height: 50vh; height: 50svh; }
  .desfile__quadro::before { left: 50%; top: 62%; width: min(86vw, 44vh); width: min(86vw, 44svh); }
  .desfile__texto { order: 1; justify-items: center; text-align: center; gap: .5rem; }
  .desfile__modelo { font-size: 2.1rem; }
  .desfile__progresso { left: 50%; right: auto; transform: translateX(-50%); bottom: 22px; }
}
/* sem movimento / medição: os quadros empilhados, abertos */
html.estatico .desfile, .sem-movimento .desfile { height: auto; }
html.estatico .desfile__palco { position: relative; height: auto; overflow: visible; }
html.estatico .desfile__quadro { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; clip-path: none; }
html.estatico .desfile__texto > * { opacity: 1; transform: none; }
html.estatico .desfile__progresso { display: none; }
@media (prefers-reduced-motion: reduce) {
  .desfile { height: auto; }
  .desfile__palco { position: relative; height: auto; overflow: visible; }
  .desfile__quadro { position: relative; inset: auto; min-height: 100vh; min-height: 100svh; clip-path: none !important; }
  .desfile__texto > * { opacity: 1; transform: none; }
  .desfile__progresso { display: none; }
}

/* ---------- Experiência: revista com fita e selo ---------- */
.experiencia__grade { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 1240px; margin: 0 auto; }
.experiencia__texto { display: grid; gap: 1.75rem; justify-items: start; }
.passos { display: grid; gap: 1.5rem; }
.passo { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.passo__num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--champagne); font: 400 1.25rem/1 var(--serifa); color: var(--tinta); }
.passo p { font: 400 clamp(1.4rem, 2.2vw, 1.85rem)/1.25 var(--serifa); color: var(--tinta); }
.revista { perspective: 6000px; }
.revista__livro { position: relative; width: 100%; aspect-ratio: 1.42; transform-style: preserve-3d; box-shadow: 0 40px 70px -30px rgba(40, 32, 20, .5), 0 8px 16px -6px rgba(40, 32, 20, .3); }
.revista__bordas { position: absolute; inset: 1% -1.2% -1.6% -1.2%; z-index: -1; border-radius: 3px; background: repeating-linear-gradient(0deg, #e9e2d4 0 2px, #d9d0bf 2px 3px); }
.revista__pagina, .revista__face { position: absolute; top: 0; width: 50%; height: 100%; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4%; padding: 8% 8% 7%; background: linear-gradient(90deg, #ece6da 0%, #faf7f1 18%, #f8f4ec 100%); }
.revista__pagina--esq, .revista__face--verso { left: 0; background: linear-gradient(270deg, #e6dfd1 0%, #f8f4ec 16%, #faf7f1 100%); }
.revista__pagina--dir { right: 0; }
.revista__folha { position: absolute; top: 0; right: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; z-index: 2; }
.revista__face { left: 0; width: 100%; backface-visibility: hidden; padding: 16% 16% 14%; } /* % conta sobre a folha, que tem metade da largura do livro */
.revista__face--verso { transform: rotateY(180deg); }
.revista__face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .85s ease-in-out; background: linear-gradient(90deg, rgba(60, 48, 30, .28), transparent 65%); }
.revista__folha.virando .revista__face::after { opacity: 1; }
.revista__dobra { position: absolute; left: 50%; top: 0; z-index: 3; width: 6%; height: 100%; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, rgba(90, 76, 56, .22) 45%, rgba(60, 50, 36, .35) 50%, rgba(90, 76, 56, .22) 55%, transparent); }
.revista__fita { position: absolute; left: 51.5%; top: 58%; z-index: 4; width: 3.2%; height: auto; filter: drop-shadow(0 3px 3px rgba(40, 32, 20, .3)); }
.revista__selo { position: absolute; right: 5%; bottom: 7%; z-index: 4; width: 13%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 30deg, #cdbd98, #8f8470, #e9dfc6, #9c8f76, #cdbd98); box-shadow: 0 4px 10px rgba(40, 32, 20, .35), inset 0 0 0 2px rgba(255, 255, 255, .35); }
.revista__selo .logo { width: 62%; color: #4a4134; }
.revista__cabeca { display: grid; justify-items: center; gap: .6rem; width: 100%; }
.revista__cabeca .logo { width: 38%; color: var(--tinta); }
.revista__cabeca::after { content: ""; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, rgba(107, 99, 85, .45), transparent); }
.revista__casa { font: 500 clamp(.62rem, .85vw, .78rem)/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: #6b6355; }
.revista__foto { display: block; width: 92%; height: 100%; min-height: 0; background: center / contain no-repeat; }
.revista__rodape { display: grid; justify-items: center; gap: .45rem; text-align: center; }
.revista__modelo { font: 500 clamp(1rem, 1.55vw, 1.4rem)/1.15 var(--serifa); color: var(--tinta); }
.revista__folio { font: 400 clamp(.6rem, .75vw, .7rem)/1 var(--sans); letter-spacing: .2em; color: #6b6355; }

/* ---------- Contato: estojo de relógio em 3D ---------- */
.contato__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 1200px; margin: 0 auto; }
.contato__texto { display: grid; gap: 1.5rem; justify-items: start; }
.canais { display: grid; gap: 1.1rem; margin: .5rem 0; }
.canal { display: grid; gap: .2rem; }
.canal dt { font: 500 .78rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); }
.canal dd { margin: 0; font: 400 1.0625rem/1.5 var(--sans); }
.canal a { color: var(--tinta); text-decoration: none; transition: color .3s; }
.canal a:hover { color: var(--taupe); }
.estojo-cena { position: relative; perspective: 1500px; display: grid; place-items: center; min-height: 540px; }
/* o relógio sobe da caixa quando a tampa abre (2D, sincronizado com a tampa) */
.estojo { --w: 380px; --d: 260px; --h: 96px; --lh: 38px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(-26deg) rotateY(-28deg); animation: girar-estojo 14s ease-in-out infinite alternate; }
@keyframes girar-estojo { from { transform: rotateX(-26deg) rotateY(-34deg); } to { transform: rotateX(-22deg) rotateY(24deg); } }
.estojo__base, .estojo__tampa { position: absolute; inset: 0; transform-style: preserve-3d; }
.estojo__base > *, .estojo__tampa > * { position: absolute; left: 50%; top: 50%; display: block; }
.estojo__lado { background: linear-gradient(180deg, #d4c8ae, #b8aa8c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.estojo__lado--frente, .estojo__lado--tras { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.estojo__lado--frente { transform: translateZ(calc(var(--d) / 2)); }
.estojo__lado--tras { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.estojo__lado--esq, .estojo__lado--dir { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); background: linear-gradient(180deg, #c6b99d, #a99a7b); }
.estojo__lado--esq { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.estojo__lado--dir { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.estojo__fundo { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); background: #8f8270; transform: rotateX(90deg) translateZ(calc(var(--h) / -2)); }
.estojo__almofada { width: calc(var(--w) - 18px); height: calc(var(--d) - 18px); margin: calc((var(--d) - 18px) / -2) 0 0 calc((var(--w) - 18px) / -2); transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 10px)); transform-style: preserve-3d; background: radial-gradient(ellipse at 50% 45%, #fbf7ee, #e9dfcc); box-shadow: inset 0 0 18px rgba(80, 64, 40, .25); }
.estojo__tampa { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(108deg); transform-origin: 50% 50%; }
/* apoio de relógio: cilindro de 24 gomos (eixo x) com luz calculada pelo ângulo de cada gomo */
.apoio { --r: 40px; --L: calc(var(--w) * .62); position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: translate3d(0, calc(var(--h) / -2 - 16px), calc(var(--d) * .02)); }
.apoio > * { position: absolute; left: 0; top: 0; }
.apoio__gomo { --a: calc(var(--i) * 15deg); --luz: calc(.8 + .18 * cos(var(--a) - 45deg)); width: var(--L); height: calc(var(--r) * .28); margin: calc(var(--r) * -.14) 0 0 calc(var(--L) / -2);
  transform: rotateX(var(--a)) translateZ(var(--r)); background: rgb(calc(246 * var(--luz)) calc(239 * var(--luz)) calc(226 * var(--luz))); backface-visibility: hidden; }
.apoio__tampa { width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, #f3ecdf, #d9cdb6 70%, #c8bb9f); }
.apoio__tampa--esq { transform: translateX(calc(var(--L) / -2)) rotateY(-90deg); }
.apoio__tampa--dir { transform: translateX(calc(var(--L) / 2)) rotateY(90deg); }
/* relógio desenhado (vetor), deitado sobre o apoio: caixa redonda com espessura e pulseira de couro articulada */
.relogio3d { --cw: calc(var(--w) * .36); --pl: calc(var(--cw) * .5); --ps: calc(var(--cw) * .34); transform-style: preserve-3d; transform: rotateX(30deg) translateZ(calc(var(--r) + 8px)); }
.relogio3d__caixa { position: absolute; left: calc(var(--cw) / -2); top: calc(var(--cw) / -2); width: var(--cw); height: var(--cw); transform-style: preserve-3d; }
.relogio3d__mostrador { position: absolute; inset: -6%; width: 112%; height: 112%; overflow: visible; transform: translateZ(1px); }
.relogio3d__aro { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #d9d5cd, #8a857b 70%, #5d594f); }
.relogio3d__aro--1 { transform: translateZ(-3px); }
.relogio3d__aro--2 { transform: translateZ(-6px); filter: brightness(.8); }
.relogio3d__aro--3 { transform: translateZ(-9px) scale(.94); filter: brightness(.55); }
.relogio3d__seg { position: absolute; left: calc((var(--cw) - var(--pl)) / 2); width: var(--pl); height: var(--ps); transform-style: preserve-3d;
  background: linear-gradient(90deg, #2a211a, #4a3a2c 50%, #2a211a); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.relogio3d__seg::before { content: ""; position: absolute; inset: 3px 4px; border-left: 1px dashed rgba(205, 189, 152, .55); border-right: 1px dashed rgba(205, 189, 152, .55); }
.relogio3d__seg .relogio3d__seg { left: 0; }
.relogio3d__seg--cima1 { bottom: calc(100% - var(--cw) * .06); transform-origin: 50% 100%; transform: rotateX(44deg); }
.relogio3d__seg--cima2 { bottom: 100%; transform-origin: 50% 100%; transform: rotateX(46deg); }
.relogio3d__seg--baixo1 { top: calc(100% - var(--cw) * .06); transform-origin: 50% 0; transform: rotateX(-44deg); }
.relogio3d__seg--baixo2 { top: 100%; transform-origin: 50% 0; transform: rotateX(-46deg); }
.relogio3d__ponteiro { transform-box: view-box; transform-origin: 100px 100px; }
.estojo__tampa-topo, .estojo__tampa-dentro { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.estojo__tampa-topo { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) * -1)) rotateX(90deg); background: linear-gradient(135deg, #ddd1b7, #bcae90); backface-visibility: hidden; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.estojo__tampa-topo .logo { width: 42%; --traco: url(#metal); }
.estojo__tampa-dentro { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) * -1 + 1px)) rotateX(-90deg); background: linear-gradient(180deg, #2b2620, #1d1a16); box-shadow: inset 0 0 30px rgba(0, 0, 0, .6); }
.estojo__tampa-lado { background: linear-gradient(180deg, #d4c8ae, #bdaf91); }
.estojo__tampa-lado--frente { width: var(--w); height: var(--lh); margin: calc(var(--lh) / -2) 0 0 calc(var(--w) / -2); transform: translateZ(var(--d)) translateY(calc(var(--lh) / -2)); }
.estojo__tampa-lado--esq, .estojo__tampa-lado--dir { width: var(--d); height: var(--lh); margin: calc(var(--lh) / -2) 0 0 calc(var(--d) / -2); background: linear-gradient(180deg, #c6b99d, #ad9f81); }
.estojo__tampa-lado--esq { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) / -2)) translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.estojo__tampa-lado--dir { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) / -2)) translateX(calc(var(--w) / 2)) rotateY(90deg); }
.estojo__sombra { position: absolute; left: 50%; top: 50%; width: calc(var(--w) * 1.25); height: calc(var(--d) * 1.25); margin: calc(var(--d) * -.625) 0 0 calc(var(--w) * -.625); border-radius: 50%; background: radial-gradient(ellipse, rgba(40, 32, 20, .35), transparent 65%); transform: rotateX(90deg) translateZ(calc(var(--h) / -2 - 4px)); filter: blur(6px); }



/* ---------- Rodapé em colunas ---------- */
.rodape { background: var(--linho); padding: 4.5rem var(--margem) 2rem; color: var(--texto); font-size: 1rem; }
.rodape__colunas { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr; gap: 2.5rem; max-width: 1200px; margin: 0 auto 3rem; }
.rodape__col { display: grid; gap: .8rem; align-content: start; }
.rodape__col ul { display: grid; gap: .55rem; }
.rodape__col a { color: var(--tinta); text-decoration: none; }
.rodape__col a:hover { color: var(--taupe); }
.rodape__titulo { font: 500 .78rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #5a5347; }
.logo--rodape { width: 130px; --traco: url(#metal); }
.rodape__slogan { font: italic 400 1.2rem/1.35 var(--serifa); color: var(--tinta); }
.rodape__legal { max-width: 1200px; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(29, 26, 22, .12); display: grid; gap: .35rem; font-size: .875rem; color: #5a5347; }
.rodape__legal a { color: inherit; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
  .topo { grid-template-columns: auto 1fr auto; gap: 1rem; }
  .topo__nav { display: none; }
  .topo__menu { display: inline-flex; }
  .marca { justify-self: center; }
  .topo__zap { position: static; justify-self: end; }
  .rodape__colunas { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .duas-colunas, .lado-a-lado, .lado-a-lado--inverso, .equipe, .mapa-grade, .experiencia__grade, .contato__grade { grid-template-columns: 1fr; }
  .lado-a-lado--inverso .moldura { order: -1; }
  .vitrine--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicos-lista { grid-template-columns: 1fr; }
  .estojo-cena { min-height: 360px; }
  .estojo { --w: 240px; --d: 170px; --h: 70px; --lh: 28px; }
  .apoio { --r: 30px; }
}
@media (max-width: 560px) {
  .topo__zap span, .topo__menu-txt { display: none; }
  .topo__zap svg { width: 30px; height: 30px; }
  .vitrine--tres { grid-template-columns: 1fr; max-width: 340px; }
  .rodape__colunas { grid-template-columns: 1fr; }
  .acoes { flex-direction: column; width: 100%; }
}
html.estatico .giro { -webkit-mask: none; mask: none; }
html.estatico html.estatico .estojo__tampa { animation: none; transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(108deg); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .giro { -webkit-mask: none; mask: none; }
  .giro.visivel { animation: none; }
  .titulo em, .lead em, .abertura__slogan em, .passo em, .equipe__frase em, .abertura__conteudo, .estojo, .estojo__tampa { animation: none; }
  .estojo__tampa { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(108deg); }
  }

/* ---------- Ferramenta de enquadramento (só com ?enquadrar no endereço) ---------- */
.enq-alca { display: none; }
html.enquadrando .enq-alca {
  display: block; position: absolute; inset: 0; z-index: 20; cursor: grab; touch-action: none;
  outline: 2px dashed rgba(29, 26, 22, .55); outline-offset: -6px; background: rgba(246, 242, 234, .06);
}
html.enquadrando .enq-alca.arrastando { cursor: grabbing; background: rgba(246, 242, 234, .12); }
html.enquadrando .giro { -webkit-mask: none; mask: none; }
.enq-nome { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); white-space: nowrap; padding: .3rem .55rem; background: rgba(29, 26, 22, .82); color: #f6f2ea; font: 500 .72rem/1 var(--sans); letter-spacing: .06em; border-radius: 4px; }
.enq-botoes { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.enq-botoes button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(29, 26, 22, .85); color: #f6f2ea; font: 400 1.2rem/1 var(--sans); cursor: pointer; }
.enq-botoes button:hover { background: #000; }
.enq-painel {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem 1rem .8rem 1.25rem; background: #1d1a16; color: #f6f2ea; border-radius: 14px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .45); font: 400 .95rem/1.3 var(--sans);
}
.enq-estado { color: #d6cebf; }
.enq-salvar { min-height: 44px; padding: 0 1.1rem; border: 0; border-radius: 8px; background: #cdbd98; color: #1d1a16; font: 500 .85rem/1 var(--sans); cursor: pointer; }
.enq-sair { color: #f6f2ea; }

/* Contato: vídeo real do estojo */
.contato__estojo { width: min(100%, 460px); margin: 0 auto; }

/* ---------- Contato: caixa da Haut em 3D (laca preta, logo dourado, relógio de pé na almofada) ---------- */
.caixa-cena { position: relative; perspective: 1600px; display: grid; place-items: center; min-height: 560px; }
.caixa { --w: 380px; --d: 270px; --h: 162px; --lh: 34px; position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transform: rotateX(-24deg) rotateY(-22deg); animation: balanca-caixa 16s ease-in-out infinite alternate; }
@keyframes balanca-caixa { from { transform: rotateX(-24deg) rotateY(-30deg); } to { transform: rotateX(-20deg) rotateY(-8deg); } }
.caixa > *, .caixa__base > *, .caixa__tampa > * { position: absolute; left: 50%; top: 50%; display: block; }
.caixa__base, .caixa__tampa { inset: 0; left: 0; top: 0; transform-style: preserve-3d; }
.caixa__lado { background: linear-gradient(180deg, #2b2824 0%, #141210 55%, #0c0b0a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.caixa__lado--frente, .caixa__lado--tras { width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2); }
.caixa__lado--frente { transform: translateZ(calc(var(--d) / 2)); display: grid; place-items: center; }
.caixa__lado--tras { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.caixa__lado--esq, .caixa__lado--dir { width: var(--d); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2); background: linear-gradient(180deg, #221f1b, #0b0a09); }
.caixa__lado--esq { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.caixa__lado--dir { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.caixa__fundo { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); background: #0b0a09; transform: rotateX(90deg) translateZ(calc(var(--h) / -2)); }
/* plaqueta dourada na frente */
.caixa__plaqueta { width: 22%; padding: 6px 0; border-radius: 3px; display: grid; place-items: center; background: linear-gradient(135deg, #e9dcbc, #a8935f 45%, #e2d3ac 60%, #9c8655); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.caixa__plaqueta .logo { width: 70%; color: #2b2419; --traco: #2b2419; }
/* aro de dentro (borda superior das paredes) e almofada de camurça clara com fenda */
.caixa__almofada { width: calc(var(--w) - 26px); height: calc(var(--d) - 26px); margin: calc((var(--d) - 26px) / -2) 0 0 calc((var(--w) - 26px) / -2);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 12px)); background: radial-gradient(ellipse at 50% 45%, #efe7d8, #d8ccb5 75%, #c7b99e); box-shadow: inset 0 0 0 10px #12100e, inset 0 0 22px 10px rgba(0, 0, 0, .55); }
/* relógio de verdade (foto) de pé na fenda: a almofada esconde a pulseira que entra nela */
/* tampa aberta: por fora laca, por dentro veludo preto com o logo HAUT dourado */
.caixa__tampa { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(104deg); transform-origin: 50% 50%; animation: tampa-haut 11s cubic-bezier(.6, 0, .25, 1) infinite; }
/* a tampa fecha sobre o relógio e abre de novo (aberta → fechada → aberta, com pausas) */
@keyframes tampa-haut {
  0%, 32% { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(104deg); }
  48%, 64% { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(0deg); }
  80%, 100% { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(104deg); }
}
.caixa__tampa-topo, .caixa__tampa-dentro { width: var(--w); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2); }
.caixa__tampa-topo { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) * -1)) rotateX(90deg); background: linear-gradient(135deg, #2e2a25, #0d0c0b); backface-visibility: hidden; display: grid; place-items: center; }
.caixa__tampa-topo .logo { width: 34%; --traco: url(#metal); color: #c8b688; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .7)); }
.caixa__tampa-dentro { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) * -1 + 1px)) rotateX(-90deg); display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, #24211d, #100f0d 75%); box-shadow: inset 0 0 0 10px #0b0a09, inset 0 0 40px rgba(0, 0, 0, .7); }
.caixa__tampa-dentro .logo { width: 34%; --traco: url(#metal); color: #c8b688; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
.caixa__tampa-lado { background: linear-gradient(180deg, #2b2824, #0e0d0b); }
.caixa__tampa-lado--frente { width: var(--w); height: var(--lh); margin: calc(var(--lh) / -2) 0 0 calc(var(--w) / -2); transform: translateZ(var(--d)) translateY(calc(var(--lh) / -2)); }
.caixa__tampa-lado--esq, .caixa__tampa-lado--dir { width: var(--d); height: var(--lh); margin: calc(var(--lh) / -2) 0 0 calc(var(--d) / -2); }
.caixa__tampa-lado--esq { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) / -2)) translateX(calc(var(--w) / -2)) rotateY(-90deg); }
.caixa__tampa-lado--dir { transform: translateZ(calc(var(--d) / 2)) translateY(calc(var(--lh) / -2)) translateX(calc(var(--w) / 2)) rotateY(90deg); }
@media (max-width: 860px) { .caixa-cena { min-height: 420px; } .caixa { --w: 270px; --d: 196px; --h: 122px; --lh: 26px; } }
@media (prefers-reduced-motion: reduce) { .caixa, .caixa__tampa { animation: none; } }
html.estatico .caixa, html.estatico .caixa__tampa { animation: none; }

/* apoio de relógio: almofadinha de veludo de pé com o relógio abraçando-a; desce para dentro antes de a tampa fechar */
.caixa__apoio { --pw: calc(var(--w) * .52); --ph: calc(var(--w) * .36); --rw: calc(var(--ph) * 1.15);
  width: var(--pw); height: var(--ph); margin: calc(var(--ph) * -1) 0 0 calc(var(--pw) / -2); transform-style: preserve-3d; transform-origin: 50% 100%;
  transform: translate3d(0, calc(var(--h) / -2 + 12px), calc(var(--d) * -.04)) rotateX(8deg); animation: apoio-sobe 11s cubic-bezier(.6, 0, .25, 1) infinite; }
@keyframes apoio-sobe {
  0%, 20% { transform: translate3d(0, calc(var(--h) / -2 + 12px), calc(var(--d) * -.04)) rotateX(8deg); }
  31%, 82% { transform: translate3d(0, calc(var(--h) / -2 + 22px + var(--ph)), calc(var(--d) * -.04)) rotateX(8deg); }
  94%, 100% { transform: translate3d(0, calc(var(--h) / -2 + 12px), calc(var(--d) * -.04)) rotateX(8deg); }
}
.caixa__apoio > * { position: absolute; display: block; }
.caixa__travesseiro { inset: 0; border-radius: 24% / 32%;
  background: radial-gradient(ellipse 70% 60% at 50% 42%, #efe7d8 0%, #d6cab4 55%, #b3a68d 100%);
  box-shadow: inset 0 -16px 26px rgba(70, 56, 36, .32), inset 0 12px 18px rgba(255, 255, 255, .45), inset 10px 0 18px rgba(70, 56, 36, .14), inset -10px 0 18px rgba(70, 56, 36, .14); }
.caixa__travesseiro--fundo { transform: translateZ(-16px) scale(.97); background: #a2957c; box-shadow: none; }
.caixa__relogio { left: 50%; top: 50%; width: var(--rw); aspect-ratio: 4 / 5; transform: translate(-50%, -50%) translateZ(10px);
  background: url("../assets/img/acervo/ap-royal-oak.webp") center / contain no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 14%, #000 22%, #000 78%, transparent 86%); mask: linear-gradient(180deg, transparent 14%, #000 22%, #000 78%, transparent 86%); }
@media (prefers-reduced-motion: reduce) { .caixa__apoio { animation: none; } }
html.estatico .caixa__apoio { animation: none; }

/* ---------- Abertura: o nome surge ---------- */
@keyframes surgir { from { opacity: 0; } to { opacity: 1; } }
.abertura__lugar { animation: lugar-surge 1.6s cubic-bezier(.16, 1, .3, 1) both .15s; }
@keyframes lugar-surge { from { opacity: 0; letter-spacing: .9em; } to { opacity: 1; } }
/* letras sobem de uma fenda (o próprio desenho do logo recorta), do desfocado ao nítido */
.logo--abertura { overflow: hidden; }
.logo--abertura .letra-logo { transform-box: view-box; animation: letra-surge 1.4s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.45s + var(--k) * .17s); }
@keyframes letra-surge { from { transform: translateY(96px); opacity: 0; filter: blur(5px); } 60% { opacity: 1; } to { transform: none; opacity: 1; filter: none; } }
/* ponteiros do A dão uma volta e assentam, como um relógio sendo acertado */
.logo-ponteiros--abertura { transform-box: view-box; transform-origin: 98.7px 79.7px; animation: ponteiros-acertam 1.7s cubic-bezier(.34, 1.3, .5, 1) both 1.25s; }
@keyframes ponteiros-acertam { from { transform: rotate(-360deg) scale(.4); opacity: 0; } 25% { opacity: 1; } to { transform: none; opacity: 1; } }
.abertura__slogan { animation: slogan-surge 1.4s cubic-bezier(.16, 1, .3, 1) both 2s; }
@keyframes slogan-surge { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.abertura__descer { animation: surgir 1.2s ease both 2.8s; }
@media (prefers-reduced-motion: reduce) { .abertura__lugar, .logo--abertura .letra-logo, .logo-ponteiros--abertura, .abertura__slogan, .abertura__descer { animation: none; } }
html.estatico .abertura__lugar, html.estatico .logo--abertura .letra-logo, html.estatico .logo-ponteiros--abertura, html.estatico .abertura__slogan, html.estatico .abertura__descer { animation: none; }

/* ---------- Desfile: um fundo para cada relógio, no tom da peça ---------- */
.desfile__quadro { --f1: #34302a; --f2: #1f1c18; }
.desfile__quadro:has([data-enq="relogio-rolex-daytona"]) { --f1: #3b3b3d; --f2: #1e1e20; }
.desfile__quadro:has([data-enq="relogio-patek-nautilus"]) { --f1: #213249; --f2: #111a27; }
.desfile__quadro:has([data-enq="relogio-ap-royal-oak"]) { --f1: #243a30; --f2: #12201a; }
.desfile__quadro:has([data-enq="relogio-rolex-gmt-master-ii"]) { --f1: #372435; --f2: #1c121b; }
.desfile__quadro:has([data-enq="relogio-omega-speedmaster"]) { --f1: #36322d; --f2: #1c1a17; }
.desfile__quadro:has([data-enq="relogio-cartier"]) { --f1: #45261f; --f2: #23120f; }
.desfile__quadro { background: radial-gradient(ellipse 22% 40% at 64% 18%, rgba(255, 240, 210, .08), transparent 70%), radial-gradient(ellipse 60% 70% at 64% 52%, var(--f1) 0%, var(--f2) 58%, #121110 100%) !important; }
.desfile__peca::before { background: radial-gradient(circle at 50% 36%, var(--f1) 0%, var(--f1) 52%, var(--f2) 100%) !important; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--f1) 70%, #fff 12%) 0%, var(--f1) 52%, var(--f2) 100%) !important; }
@media (max-width: 860px) { .desfile__quadro { background: radial-gradient(ellipse 50% 30% at 50% 40%, rgba(255, 240, 210, .07), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 62%, var(--f1) 0%, var(--f2) 60%, #121110 100%) !important; } }
.desfile__dica { display: block; margin-top: .4rem; font: 500 .8rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #b7ad99; transition: opacity .5s; }
.desfile__dica.oculta { opacity: 0; }

/* Revista folheada à mão */
.revista__livro { cursor: pointer; touch-action: pan-y; user-select: none; }
.revista__controles { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 2.2rem; flex-wrap: wrap; }
.revista__botao { min-height: 48px; padding: 0 1.4rem; border: 1px solid rgba(29, 26, 22, .35); background: transparent; color: var(--tinta); font: 500 .82rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s; }
.revista__botao:hover { background: var(--tinta); color: var(--marfim); }
.revista__onde { font: 400 .95rem/1 var(--sans); color: var(--texto); min-width: 11em; text-align: center; }

/* ---------- Faixa escura do desfile: uma base só, e cada quadro se dissolve nela no alto e embaixo ---------- */
.secao--vitrine { background: #121110 !important; }
.desfile__quadro { background: linear-gradient(180deg, #121110 0%, transparent 14%, transparent 84%, #121110 100%), radial-gradient(ellipse 22% 40% at 64% 18%, rgba(255, 240, 210, .08), transparent 70%), radial-gradient(ellipse 60% 70% at 64% 52%, var(--f1) 0%, var(--f2) 58%, #121110 100%) !important; }
@media (max-width: 860px) { .desfile__quadro { background: linear-gradient(180deg, #121110 0%, transparent 12%, transparent 86%, #121110 100%), radial-gradient(ellipse 50% 30% at 50% 40%, rgba(255, 240, 210, .07), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 62%, var(--f1) 0%, var(--f2) 60%, #121110 100%) !important; } }

/* ---------- Acervo em cartões (catálogo) + ficha com história e disponibilidade ---------- */
.catalogo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); max-width: 1200px; margin: 0 auto; }
.cartao__abrir { position: relative; width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: .45rem; padding: 1.5rem 1.25rem 1.6rem; border: 0; background: #fbf9f5; text-align: center; cursor: pointer; box-shadow: 0 1px 0 rgba(29, 26, 22, .06); transition: box-shadow .4s, transform .4s var(--curva); }
.cartao__abrir:hover, .cartao__abrir:focus-visible { box-shadow: 0 24px 50px -30px rgba(40, 32, 20, .45); transform: translateY(-3px); }
.cartao__selo { justify-self: start; display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid rgba(107, 99, 85, .35); border-radius: 999px; font: 500 .72rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.cartao__selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #b39f78; }
.cartao__foto { display: block; width: 78%; aspect-ratio: 4 / 4.4; margin: .4rem 0 .6rem; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transition: transform .8s var(--curva); }
.cartao__abrir:hover .cartao__foto img { transform: scale(1.04); }
.cartao__ref { font: 500 .8rem/1.3 var(--sans); letter-spacing: .16em; color: #6f5e3c; }
.cartao__casa { font: 500 .9rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta); }
.cartao__modelo { font: 400 1.3rem/1.25 var(--serifa); color: var(--texto); }
.cartao__mais { margin-top: .5rem; font: 500 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); border-bottom: 0; }
.cartao__mais::after { content: " →"; }
@media (max-width: 860px) {
  .catalogo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .cartao__abrir { padding: 1rem .7rem 1.2rem; }
  .cartao__selo { font-size: .62rem; padding: .35rem .55rem; letter-spacing: .12em; }
  .cartao__foto { width: 92%; }
  .cartao__ref { font-size: .7rem; letter-spacing: .1em; }
  .cartao__casa { font-size: .78rem; letter-spacing: .14em; }
  .cartao__modelo { font-size: 1.1rem; }
}
.ficha { width: min(980px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100svh - 2rem); padding: 0; border: 0; background: var(--marfim); color: var(--texto); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .6); }
.ficha::backdrop { background: rgba(18, 17, 16, .72); backdrop-filter: blur(3px); }
.ficha[open] { animation: ficha-abre .5s var(--curva); }
@keyframes ficha-abre { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.ficha__caixa { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.ficha__foto { background: radial-gradient(ellipse at 50% 45%, #fdfbf6, #eee7db 70%); display: grid; place-items: center; padding: 2rem; }
.ficha__foto img { width: 100%; max-width: 360px; height: auto; }
.ficha__texto { padding: clamp(1.75rem, 4vw, 3rem); display: grid; gap: .9rem; align-content: start; overflow: auto; }
.ficha__casa { font: 500 .85rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--taupe); }
.ficha__modelo { font: 400 clamp(1.9rem, 3.4vw, 2.6rem)/1.1 var(--serifa); color: var(--tinta); }
.ficha__ref { font: 400 1rem/1.4 var(--sans); color: #6f5e3c; }
.ficha__historia { display: grid; gap: .8rem; font: 400 1.05rem/1.65 var(--sans); color: var(--texto); }
.ficha__disp { display: flex; gap: .7rem; align-items: baseline; padding: .9rem 1rem; background: var(--papel); font: 400 .98rem/1.5 var(--sans); color: var(--texto); }
.ficha__ponto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #b39f78; transform: translateY(-1px); }
.ficha__botao { justify-self: start; margin-top: .3rem; }
.ficha__fechar { position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(29, 26, 22, .08); color: var(--tinta); font: 300 1.8rem/1 var(--sans); cursor: pointer; }
.ficha__fechar:hover { background: var(--tinta); color: var(--marfim); }
@media (max-width: 860px) { .ficha__caixa { grid-template-columns: 1fr; } .ficha__foto { padding: 1.25rem; } .ficha__foto img { max-width: 220px; } }

/* ---------- Desfile sem trava: faixas em sequência, rolagem normal (pessoas mais velhas não acham que travou) ---------- */
.desfile { height: auto !important; }
.desfile__palco { position: relative !important; height: auto !important; overflow: visible !important; }
.desfile__quadro { position: relative !important; inset: auto !important; min-height: min(86vh, 840px); min-height: min(86svh, 840px); clip-path: none !important; }
.desfile__progresso { display: none !important; }
/* lados alternados: o segundo relógio fica à esquerda */
.desfile__quadro:nth-of-type(even) .desfile__texto { grid-column: 2; padding-left: clamp(1rem, 4vw, 4rem); }
.desfile__quadro:nth-of-type(even) .desfile__peca { left: 34%; }
.desfile__quadro:nth-of-type(even)::before { left: 34%; }
.desfile__quadro:nth-of-type(even) { background: linear-gradient(180deg, #121110 0%, transparent 14%, transparent 84%, #121110 100%), radial-gradient(ellipse 22% 40% at 34% 18%, rgba(255, 240, 210, .08), transparent 70%), radial-gradient(ellipse 60% 70% at 34% 52%, var(--f1) 0%, var(--f2) 58%, #121110 100%) !important; }
.desfile__texto { max-width: 34rem; }
.desfile__casa { font-size: .9rem; }
.desfile__ref { font-size: 1.08rem; }
@media (max-width: 860px) {
  .desfile__quadro { min-height: 96vh; min-height: 96svh; }
  .desfile__quadro:nth-of-type(even) .desfile__texto { grid-column: auto; padding-left: 0; }
  .desfile__quadro:nth-of-type(even) .desfile__peca, .desfile__quadro:nth-of-type(even)::before { left: 50%; }
  .desfile__quadro:nth-of-type(even) { background: linear-gradient(180deg, #121110 0%, transparent 12%, transparent 86%, #121110 100%), radial-gradient(ellipse 50% 30% at 50% 40%, rgba(255, 240, 210, .07), transparent 70%), radial-gradient(ellipse 90% 60% at 50% 62%, var(--f1) 0%, var(--f2) 60%, #121110 100%) !important; }
}

/* ---------- Abertura mais legível: véu atrás do texto, logo mais claro, textos maiores ---------- */
.abertura__video::after { background: radial-gradient(48% 46% at 50% 50%, rgba(14, 12, 10, .66) 0%, rgba(14, 12, 10, .5) 55%, rgba(14, 12, 10, .78) 100%), linear-gradient(180deg, rgba(14, 12, 10, .5) 0%, transparent 25%, transparent 75%, rgba(14, 12, 10, .6) 100%) !important; }
.abertura__lugar { font: 500 clamp(.92rem, 1.15vw, 1.08rem)/1.3 var(--sans) !important; letter-spacing: .3em !important; color: #f6efe0 !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
.abertura__slogan { font-size: clamp(1.75rem, 3.3vw, 2.9rem) !important; color: #fbf6ec !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .75); }
.abertura__slogan em { color: #ead9b0 !important; }
.logo--abertura { filter: drop-shadow(0 4px 22px rgba(0, 0, 0, .8)) !important; }
.abertura__descer { font-size: .88rem !important; color: #f6efe0 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
.abertura__seta { background: rgba(246, 239, 224, .7) !important; }

/* ---------- Contato: caixa de um relógio (couro preto, forro de cetim, almofada branca), sobre mesa com luz de vela ---------- */
.caixa-cena { min-height: 640px; padding-top: 70px; border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(circle at 14% 22%, rgba(255, 196, 120, .55) 0, rgba(255, 196, 120, .12) 4%, transparent 9%),
    radial-gradient(circle at 88% 28%, rgba(255, 190, 110, .5) 0, rgba(255, 190, 110, .1) 5%, transparent 10%),
    radial-gradient(circle at 78% 12%, rgba(255, 210, 150, .35) 0, transparent 6%),
    radial-gradient(circle at 22% 8%, rgba(255, 210, 150, .28) 0, transparent 5%),
    radial-gradient(ellipse 70% 40% at 50% 92%, rgba(120, 72, 36, .55), transparent 70%),
    linear-gradient(180deg, #2a1f18 0%, #1b140f 55%, #3a2618 100%);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .55); }
.caixa { --w: 320px !important; --d: 300px !important; --h: 126px !important; --lh: 44px !important; transform: rotateX(-17deg) rotateY(-12deg); animation: balanca-caixa2 14s ease-in-out infinite alternate !important; }
@keyframes balanca-caixa2 { from { transform: rotateX(-17deg) rotateY(-16deg); } to { transform: rotateX(-15deg) rotateY(-6deg); } }
/* couro preto com fio champanhe nas bordas, cantos arredondados */
.caixa__lado, .caixa__fundo, .caixa__tampa-lado, .caixa__tampa-topo { border-radius: 16px;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .07), transparent 60%), linear-gradient(180deg, #231f1b 0%, #13110f 60%, #0b0a09 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(205, 189, 152, .28), inset 0 2px 0 rgba(255, 255, 255, .12) !important; }
.caixa__lado--esq, .caixa__lado--dir { background: linear-gradient(180deg, #1b1815, #0a0908) !important; }
.caixa__plaqueta { display: none; }
.caixa__almofada { background: linear-gradient(180deg, #f3eee5, #ddd4c3) !important; box-shadow: inset 0 0 0 8px #161310, inset 0 0 26px 8px rgba(0, 0, 0, .45) !important; }
/* tampa aberta quase na vertical; forro de cetim marfim com o logo dourado */
.caixa__tampa { animation: tampa-abre-uma 1.8s cubic-bezier(.6, 0, .2, 1) .6s both !important; transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(97deg); }
@keyframes tampa-abre-uma { from { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(0deg); } to { transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(97deg); } }
.caixa__tampa-dentro { border-radius: 14px;
  background: radial-gradient(ellipse 80% 60% at 50% 30%, #ffffff 0%, #f4efe6 45%, #ddd3c2 100%) !important;
  box-shadow: inset 0 0 0 10px #15120f, inset 0 0 0 12px rgba(205, 189, 152, .35), inset 0 -30px 40px rgba(120, 100, 70, .18) !important; }
.caixa__tampa-dentro .logo { width: 30% !important; transform: translateY(-18%); --traco: url(#metal); color: #a8935f !important; filter: none !important; }
/* almofada branca acolchoada ocupando a largura; o relógio abraça a almofada */
.caixa__apoio { --pw: calc(var(--w) * .84) !important; --ph: calc(var(--w) * .44) !important; --rw: calc(var(--ph) * 1.32) !important;
  animation: none !important; transform: translate3d(0, calc(var(--h) / -2 + 14px), calc(var(--d) * .02)) rotateX(10deg) !important; }
.caixa__travesseiro { border-radius: 16% / 24% !important;
  background:
    radial-gradient(ellipse 34% 46% at 26% 48%, rgba(255, 255, 255, .95), transparent 70%),
    radial-gradient(ellipse 34% 46% at 74% 48%, rgba(255, 255, 255, .95), transparent 70%),
    linear-gradient(180deg, #fbf8f2 0%, #ece5d8 60%, #d9cfbd 100%) !important;
  box-shadow: inset 0 -14px 22px rgba(90, 74, 50, .28), inset 0 10px 16px rgba(255, 255, 255, .6), inset 12px 0 18px rgba(90, 74, 50, .12), inset -12px 0 18px rgba(90, 74, 50, .12) !important; }
.caixa__travesseiro--fundo { background: #cfc5b2 !important; box-shadow: none !important; }
@media (max-width: 860px) { .caixa-cena { min-height: 460px; padding-top: 56px; border-radius: 20px; } .caixa { --w: 220px !important; --d: 212px !important; --h: 88px !important; --lh: 32px !important; } }
@media (prefers-reduced-motion: reduce) { .caixa__tampa { animation: none !important; } }
html.estatico .caixa__tampa { animation: none !important; }
.caixa-cena .caixa { margin-top: 150px; }
@media (max-width: 860px) { .caixa-cena .caixa { margin-top: 100px; } }
/* todos os relógios iguais dentro do disco: a pulseira se dissolve antes da borda (o disco ocupa 20%–80% da altura da foto) */
.desfile__peca img { -webkit-mask: linear-gradient(180deg, transparent 21%, #000 31%, #000 69%, transparent 79%); mask: linear-gradient(180deg, transparent 21%, #000 31%, #000 69%, transparent 79%); }

/* ---------- Inspirado na Louis Vuitton: composição centrada, moldura art déco, mosaico, botões em pílula ---------- */
.explore { position: relative; background: #f8f3ea; text-align: center; padding-top: clamp(5rem, 9vw, 7.5rem); }
.explore__moldura { position: absolute; inset: clamp(1.5rem, 3vw, 2.75rem) clamp(1rem, 3vw, 2.75rem) auto; height: clamp(180px, 22vw, 300px); pointer-events: none; }
.explore__moldura::before, .explore__moldura::after { content: ""; position: absolute; top: 0; width: 22%; height: 100%; border-top: 3px double rgba(168, 147, 95, .55); }
.explore__moldura::before { left: 0; border-left: 3px double rgba(168, 147, 95, .55); }
.explore__moldura::after { right: 0; border-right: 3px double rgba(168, 147, 95, .55); }
.explore__cabeca { display: grid; justify-items: center; gap: 1.1rem; max-width: 46rem; margin: 0 auto clamp(2.5rem, 5vw, 4rem); }
.emblema { width: 34px; height: auto; color: #a8935f; --traco: #a8935f; }
.explore__titulo { font: 400 clamp(1.9rem, 3.2vw, 2.7rem)/1.15 var(--serifa); color: var(--tinta); letter-spacing: .01em; }
.explore__texto { font: 400 1.05rem/1.7 var(--sans); color: var(--texto); max-width: 38rem; }
.explore__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.2vw, 1.1rem); max-width: 1600px; margin: 0 auto; }
.explore__item { display: grid; gap: 1.1rem; justify-items: center; color: var(--tinta); }
.explore__foto { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #e9e1d4; }
.explore__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.explore__item:hover .explore__foto img { transform: scale(1.04); }
.explore__legenda { font: 400 1.05rem/1.3 var(--sans); letter-spacing: .03em; }
@media (max-width: 860px) {
  .explore__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore__moldura { height: 140px; }
  .explore__moldura::before, .explore__moldura::after { width: 18%; }
}
/* botões secundários em pílula */
.botao--linha, .desfile__elo, .revista__botao { border-radius: 999px !important; }

/* ---------- Desfile: pulseiras de volta, relógio reto e centrado no disco ---------- */
.desfile__peca img { -webkit-mask: none !important; mask: none !important; }
.desfile__peca { transform: translate(-50%, -50%) perspective(1400px) rotateY(var(--gira, 0deg)) scale(var(--escala, 1)) !important; }

/* ---------- Correções 07/11 ---------- */
/* transição de seção: só um fade suave em todas as páginas (a varredura em leque parecia corte/defeito) */
.giro { -webkit-mask: none !important; mask: none !important; opacity: 0; transform: translateY(14px); transition: opacity 1s var(--curva), transform 1s var(--curva); animation: none !important; }
.giro.visivel { opacity: 1; transform: none; }
html.estatico .giro { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .giro { opacity: 1; transform: none; } }
/* caixa do Contato: sempre aberta, sem animação de tampa (nunca aparece fechada com o relógio atravessando) */
.caixa__tampa { animation: none !important; transform: translate3d(0, calc(var(--h) / -2), calc(var(--d) / -2)) rotateX(97deg) !important; }
/* desfile: sem traçados em volta do relógio (sem trilho de minutos e sem contorno do disco); só um brilho suave */
.desfile__quadro::before { display: none !important; }
.desfile__peca::before { box-shadow: none !important; background: radial-gradient(circle, var(--f1) 0%, transparent 70%) !important; background: radial-gradient(circle, color-mix(in srgb, var(--f1) 70%, #fff 10%) 0%, transparent 70%) !important; width: 90% !important; }
/* transição suave entre a faixa escura dos relógios e as seções claras (sem corte seco) */
.resumo-oficina { position: relative; padding-top: calc(clamp(4.5rem, 9vw, 7.5rem) + 120px); }
.resumo-oficina::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, #121110 0%, #2a2621 18%, #6b6357 42%, #b9b0a1 66%, #e7e0d4 86%, var(--marfim) 100%); }
.explore { padding-bottom: calc(clamp(4.5rem, 9vw, 7.5rem) + 120px); position: relative; }
.explore::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; pointer-events: none;
  background: linear-gradient(180deg, #f8f3ea 0%, #e7e0d4 14%, #b9b0a1 34%, #6b6357 58%, #2a2621 82%, #121110 100%); }
/* saída da faixa: o verde do último relógio clareia direto até o marfim (sem passar pelo preto) */
.resumo-oficina { padding-top: clamp(4.5rem, 9vw, 7.5rem) !important; }
.resumo-oficina::before { display: none !important; }
.resumo-acervo--desfile { padding-bottom: 0 !important; }
.resumo-acervo--desfile .desfile__quadro:last-of-type { background:
    linear-gradient(180deg, #121110 0%, transparent 14%),
    radial-gradient(ellipse 22% 40% at 64% 18%, rgba(255, 240, 210, .08), transparent 70%),
    radial-gradient(ellipse 60% 70% at 64% 52%, var(--f1) 0%, transparent 72%),
    linear-gradient(180deg, #121110 0%, var(--f2) 55%, var(--f2) 100%) !important; }
.resumo-acervo--desfile > p.centro { margin: 0 calc(var(--margem) * -1); padding: 2.5rem var(--margem) 300px;
  background: linear-gradient(180deg, #12201a 0%, #12201a 18%, #2c3a31 38%, #6f7a6f 58%, #b9bcb0 76%, #e6e2d6 90%, var(--marfim) 100%); }
@media (max-width: 860px) { .resumo-acervo--desfile .desfile__quadro:last-of-type { background:
    linear-gradient(180deg, #121110 0%, transparent 12%),
    radial-gradient(ellipse 90% 60% at 50% 62%, var(--f1) 0%, transparent 72%),
    linear-gradient(180deg, #121110 0%, var(--f2) 55%, var(--f2) 100%) !important; } }

/* ---------- Contato: caixa no estilo da caixa do Nautilus 5712 (laca preta, camurça creme, almofada cilíndrica) ---------- */
.caixa { --w: 340px !important; --d: 300px !important; --h: 108px !important; --lh: 40px !important; }
/* laca preta brilhante */
.caixa__lado, .caixa__fundo, .caixa__tampa-lado, .caixa__tampa-topo { border-radius: 8px !important;
  background: linear-gradient(180deg, #2b2b2d 0%, #0d0d0e 22%, #050505 60%, #161617 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(255, 255, 255, .08) !important; }
.caixa__lado--frente { overflow: hidden; }
/* reflexo que passa devagar pela laca (a animação da caixa) */
.caixa__brilho { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 46%, rgba(255, 255, 255, .05) 52%, transparent 62%); background-size: 260% 100%; animation: laca-brilho 7s ease-in-out infinite; }
@keyframes laca-brilho { from { background-position: 120% 0; } to { background-position: -40% 0; } }
/* interior em camurça creme com borda preta grossa de laca */
.caixa__almofada { background: radial-gradient(ellipse at 50% 40%, #efe6d3, #e2d6bd 70%, #d3c4a6) !important; box-shadow: inset 0 0 0 14px #070707, inset 0 0 0 15px rgba(255, 255, 255, .12), inset 0 0 30px 14px rgba(0, 0, 0, .35) !important; }
.caixa__tampa-dentro { border-radius: 8px !important; display: grid; place-items: center;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, #f1e9d8 0%, #e6dbc4 60%, #d6c8ab 100%) !important;
  box-shadow: inset 0 0 0 16px #070707, inset 0 0 0 17px rgba(255, 255, 255, .12), inset 0 -24px 40px rgba(110, 90, 60, .22) !important; }
.caixa__tampa-dentro .logo { width: 26% !important; transform: translateY(-8%); --traco: #6f6556; color: #6f6556 !important; }
/* almofada cilíndrica pequena, de pé no centro sobre um bloquinho preto */
.caixa__apoio { --pw: calc(var(--w) * .36) !important; --ph: calc(var(--w) * .44) !important; --rw: calc(var(--ph) * 1.3) !important;
  transform: translate3d(0, calc(var(--h) / -2 + 12px), calc(var(--d) * .04)) rotateX(6deg) !important; }
.caixa__travesseiro { border-radius: 46% / 30% !important;
  background: radial-gradient(ellipse 55% 60% at 42% 40%, #faf4e8 0%, #ebe1cd 60%, #d4c7ac 100%) !important;
  box-shadow: inset -10px -8px 18px rgba(110, 90, 60, .3), inset 8px 6px 14px rgba(255, 255, 255, .5) !important; }
.caixa__travesseiro--fundo { background: #c9bb9f !important; }
.caixa__base-apoio { left: 18%; right: 18%; bottom: -10px; height: 18px; border-radius: 3px; background: linear-gradient(180deg, #1a1a1b, #050505); transform: translateZ(-6px); }
.caixa__relogio { background-image: url("../assets/img/acervo/patek-nautilus.webp") !important; }
@media (max-width: 860px) { .caixa { --w: 250px !important; --d: 222px !important; --h: 82px !important; --lh: 30px !important; } }
@media (prefers-reduced-motion: reduce) { .caixa__brilho { animation: none; } }
html.estatico .caixa__brilho { animation: none; }
/* todas as fotos de relógio terminam a pulseira do mesmo jeito, em cima e embaixo (esmaecimento simétrico) */
.ficha__foto img, .cartao__foto img, .desfile__peca img, .revista__foto, .nicho__arco img {
  -webkit-mask: linear-gradient(180deg, transparent 13%, #000 30%, #000 70%, transparent 87%) !important;
  mask: linear-gradient(180deg, transparent 13%, #000 30%, #000 70%, transparent 87%) !important; }
/* fundo da ficha uniforme de cima a baixo (sem a mancha clara só no centro) */
.ficha__foto { background: linear-gradient(180deg, #f1ebe0, #ece4d6) !important; }
/* desfile: degradê vertical contínuo entre os relógios (sem faixa preta) e tom uniforme na largura toda */
.desfile .desfile__quadro:nth-of-type(n) { --px: 64%; background:
    radial-gradient(ellipse 40% 55% at var(--px) 50%, rgba(255, 240, 210, .07), transparent 70%),
    radial-gradient(ellipse 130% 100% at 50% 50%, transparent 60%, rgba(0, 0, 0, .25) 100%),
    linear-gradient(180deg, var(--topo, #121110) 0%, var(--meio, #2a2620) 26%, var(--meio, #2a2620) 74%, var(--fundo, #121110) 100%) !important; }
.desfile .desfile__quadro:nth-of-type(even) { --px: 34%; }
@media (max-width: 860px) { .desfile .desfile__quadro:nth-of-type(n) { --px: 50%; } }
/* relógio integrado à almofada: a pulseira some exatamente nas bordas da almofada (dá a volta por trás),
   sombra de contato na camurça e cor ajustada à luz quente da cena */
.caixa__apoio { --pw: calc(var(--w) * .4) !important; --ph: calc(var(--w) * .42) !important; --rw: calc(var(--ph) * 1.18) !important; }
.caixa__travesseiro { border-radius: 38% 38% 30% 30% / 26% 26% 22% 22% !important;
  background:
    linear-gradient(90deg, rgba(90, 70, 40, .38) 0%, rgba(90, 70, 40, 0) 22%, rgba(255, 255, 255, .28) 46%, rgba(90, 70, 40, 0) 70%, rgba(90, 70, 40, .42) 100%),
    linear-gradient(180deg, #f3ead8 0%, #e6dac2 55%, #cdbfa2 100%) !important;
  box-shadow: inset 0 -10px 14px rgba(90, 70, 40, .3), inset 0 8px 10px rgba(255, 255, 255, .35), 0 10px 18px -6px rgba(0, 0, 0, .55) !important; }
.caixa__relogio { width: var(--rw) !important;
  -webkit-mask: linear-gradient(180deg, transparent 19%, #000 27%, #000 73%, transparent 81%) !important;
  mask: linear-gradient(180deg, transparent 19%, #000 27%, #000 73%, transparent 81%) !important;
  filter: sepia(.18) saturate(.92) brightness(.9) contrast(1.06) drop-shadow(0 7px 7px rgba(40, 25, 10, .55)) !important; }
/* ---------- Faixa dos relógios: um caminho só de cor (marfim → grafite → azul → verde → marfim) ---------- */
/* entrada: marfim escurece em neutros direto até o grafite do primeiro relógio */
.explore::after { background: linear-gradient(180deg, #f8f3ea 0%, #e2ddd5 18%, #b8b4ae 38%, #7f7d7a 58%, #4a4a4b 80%, #2f2f31 100%) !important; }
/* o título da faixa fica sobre o mesmo grafite (sem faixa preta) */
.resumo-acervo--desfile { background: #2f2f31 !important; }
/* sem escurecer em cima e embaixo de cada quadro (criava emendas); só as laterais */
.desfile .desfile__quadro:nth-of-type(n) { background:
    radial-gradient(ellipse 40% 55% at var(--px) 50%, rgba(255, 240, 210, .07), transparent 70%),
    linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .22) 100%),
    linear-gradient(180deg, var(--topo, #2f2f31) 0%, var(--meio, #2f2f31) 30%, var(--meio, #2f2f31) 70%, var(--fundo, #2f2f31) 100%) !important; }
/* saída: do tom médio do verde, em passos neutros, até o marfim */
.resumo-acervo--desfile > p.centro { background: linear-gradient(180deg, #1c2e26 0%, #1c2e26 16%, #3c4a43 36%, #79817a 56%, #b9bcb3 74%, #e4e0d6 90%, var(--marfim) 100%) !important; }
/* entrada e saída da faixa no mesmo estilo da passagem azul → verde: degradê longo e contínuo (oklab) */
.explore { padding-bottom: calc(clamp(4.5rem, 9vw, 7.5rem) + 300px) !important; }
.explore::after { height: 380px !important; background: linear-gradient(180deg, #f8f3ea 0%, #2f2f31 100%) !important; background: linear-gradient(in oklab 180deg, #f8f3ea 0%, #2f2f31 100%) !important; }
.resumo-acervo--desfile { background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .22) 100%), #2f2f31 !important; }
.resumo-acervo--desfile > p.centro { padding: 3rem var(--margem) 460px !important;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .22) 100%) top / 100% 30% no-repeat,
              linear-gradient(180deg, #1c2e26 0%, #1c2e26 12%, var(--marfim) 100%) !important; background: linear-gradient(90deg, rgba(0, 0, 0, .22) 0%, transparent 22%, transparent 78%, rgba(0, 0, 0, .22) 100%) top / 100% 30% no-repeat,
              linear-gradient(in oklab 180deg, #1c2e26 0%, #1c2e26 12%, var(--marfim) 100%) !important; }
/* sem escurecimento lateral em nenhum trecho da faixa (evita linhas de emenda) */
.resumo-acervo--desfile { background: #2f2f31 !important; }
.resumo-acervo--desfile > p.centro { background: linear-gradient(180deg, #1c2e26 0%, #1c2e26 12%, var(--marfim) 100%) !important; background: linear-gradient(in oklab 180deg, #1c2e26 0%, #1c2e26 12%, var(--marfim) 100%) !important; }
.desfile .desfile__quadro:nth-of-type(n) { background: radial-gradient(ellipse 40% 55% at var(--px) 50%, rgba(255, 240, 210, .07), transparent 70%),
    linear-gradient(180deg, var(--topo, #2f2f31) 0%, var(--meio, #2f2f31) 30%, var(--meio, #2f2f31) 70%, var(--fundo, #2f2f31) 100%) !important; background:
    radial-gradient(ellipse 40% 55% at var(--px) 50%, rgba(255, 240, 210, .07), transparent 70%),
    linear-gradient(in oklab 180deg, var(--topo, #2f2f31) 0%, var(--meio, #2f2f31) 30%, var(--meio, #2f2f31) 70%, var(--fundo, #2f2f31) 100%) !important; }
/* Acervo: zoom na foto da ficha, acompanhando o cursor */
.ficha__foto { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ficha__foto { cursor: zoom-in; }
  .ficha__foto img { transition: transform .35s var(--curva); transform-origin: var(--zx, 50%) var(--zy, 50%); }
  .ficha__foto.ampliada img { transform: scale(2.4); -webkit-mask: none !important; mask: none !important; }
}
/* revista: páginas fixas fora do contexto 3D (renderização nítida); só a folha que vira usa 3D */
.revista { perspective: none !important; }
.revista__livro { transform-style: flat !important; }
/* logo da revista no mesmo dourado metálico do topo do site */
.revista__cabeca .logo { width: 30% !important; --traco: url(#metal); color: #a8935f !important; }
.revista__cabeca::after { background: linear-gradient(90deg, transparent, rgba(168, 147, 95, .55), transparent) !important; }

/* ---------- Contato: foto do estojo da Haut (substitui a caixa 3D) ---------- */
.estojo-foto { position: relative; margin: 0; aspect-ratio: 1122 / 1402; justify-self: center; width: 100%; max-width: min(580px, calc(82vh * 1122 / 1402)); max-width: min(580px, calc(82svh * 1122 / 1402)); border-radius: 24px; overflow: hidden; background: #1b140f; box-shadow: 0 30px 60px -30px rgba(29, 20, 12, .55); }
.estojo-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 55%; animation: estojo-aproxima 24s ease-in-out infinite alternate; }
@keyframes estojo-aproxima { from { transform: scale(1); } to { transform: scale(1.06); } }
.estojo-foto__vela { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 4% 34%, rgba(255, 190, 110, .32), transparent 24%), radial-gradient(circle at 15% 14%, rgba(255, 200, 130, .22), transparent 18%); mix-blend-mode: screen; animation: vela-respira 5.5s ease-in-out infinite alternate; }
@keyframes vela-respira { 0% { opacity: .35; } 40% { opacity: .8; } 70% { opacity: .5; } 100% { opacity: .95; } }
@media (max-width: 860px) { .estojo-foto { border-radius: 18px; max-width: 100%; } }
@media (prefers-reduced-motion: reduce) { .estojo-foto img, .estojo-foto__vela { animation: none; } }
html.estatico .estojo-foto img, html.estatico .estojo-foto__vela { animation: none; }

/* ---------- Vitrine da página inicial (um painel por relógio: ficha + peça que pousa) ---------- */
.resumo-acervo--desfile { padding-bottom: 0 !important; }
.resumo-acervo--desfile::before, .resumo-acervo--desfile::after { display: none !important; }
.vitrine { margin-top: clamp(2rem, 4vw, 3.5rem); }
.vitrine-peca { --e: 0; position: relative; isolation: isolate; color: #fff; padding: clamp(4.5rem, 11vh, 8rem) var(--margem);
  background: radial-gradient(70% 60% at 50% 0%, var(--f1) 0%, transparent 72%),
              linear-gradient(180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%); background: radial-gradient(70% 60% at 50% 0%, color-mix(in srgb, var(--f1) 60%, #8fb0d8 18%) 0%, transparent 72%),
              linear-gradient(in oklab 180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%); }
.vitrine-peca__palco { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: 4vw; }
.vitrine-peca--inversa .vitrine-peca__texto { order: 2; }
.vitrine-peca__texto { display: grid; gap: 1rem; justify-items: start; opacity: calc(.55 + var(--e) * .45); transform: translateY(calc((1 - var(--e)) * 18px)); }
.vitrine-peca__ornamento { width: 28px; height: 1px; background: rgba(255, 255, 255, .55); }
.vitrine-peca__casa { font: 500 .8rem/1.4 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #e6c98a; }
.vitrine-peca__modelo { font: 400 clamp(2.4rem, 3.6vw, 3.6rem)/1.05 var(--serifa); color: #fff; letter-spacing: -.005em; max-width: 12ch; }
.vitrine-peca__chapeu { margin-top: -.2rem; font: 400 italic clamp(1.15rem, 1.4vw, 1.35rem)/1.4 var(--serifa); color: #e6c98a; }
.vitrine-peca__frase { font: 400 1.05rem/1.7 var(--sans); color: rgba(255, 255, 255, .88); max-width: 46ch; }
.vitrine-peca__ficha { margin: .5rem 0 0; padding-top: 1.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; border-top: 1px solid rgba(230, 201, 138, .3); width: 100%; max-width: 520px; }
.vitrine-peca__ficha dt { font: 500 .72rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: #e6c98a; }
.vitrine-peca__ficha dd { margin: .2rem 0 0; font: 400 1rem/1.4 var(--sans); color: #fff; }
.vitrine-peca__acoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: .6rem; }
.pilula { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.9rem; border-radius: 999px; font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transition: background-color .3s, color .3s, border-color .3s; }
.pilula--clara { background: #fff; color: #14130f; }
.pilula--clara:hover { background: #e6c98a; }
.pilula--vidro { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pilula--vidro:hover { background: rgba(255, 255, 255, .22); }
.vitrine-peca__quadro { margin: 0; display: grid; place-items: center; }
.vitrine-peca__relogio { width: min(100%, 520px); height: auto; aspect-ratio: 4 / 5; object-fit: contain;
  opacity: calc(.45 + var(--e) * .55); transform: translateY(calc((1 - var(--e)) * 50px)) scale(calc(.92 + var(--e) * .08));
  filter: drop-shadow(0 40px 44px rgba(0, 0, 0, .5)); will-change: transform, opacity; }
@media (max-width: 900px) {
  .vitrine-peca__palco { grid-template-columns: 1fr; gap: 1.5rem; }
  .vitrine-peca__quadro { order: -1; }
  .vitrine-peca--inversa .vitrine-peca__texto { order: 0; }
  .vitrine-peca__relogio { width: min(76vw, 380px); }
  .vitrine-peca__texto { justify-items: center; text-align: center; }
  .vitrine-peca__modelo { max-width: none; }
  .vitrine-peca__ficha { text-align: left; }
  .vitrine-peca__acoes { justify-content: center; }
}
html.estatico .vitrine-peca { --e: 1; }
@media (prefers-reduced-motion: reduce) { .vitrine-peca { --e: 1; } }
.resumo-acervo--desfile > .vitrine { display: block; gap: 0; max-width: none; width: auto; margin-inline: calc(-1 * var(--margem, 88px)); margin-left: calc(-1 * var(--margem, 88px)) !important; margin-right: calc(-1 * var(--margem, 88px)) !important; }
/* brilho atrás da peça, e não no topo do painel (o topo marcava a emenda entre um relógio e outro) */
.vitrine-peca { --lado: 72%; background: radial-gradient(ellipse 34% 46% at var(--lado) 50%, var(--f1) 0%, transparent 70%), linear-gradient(180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; background: radial-gradient(ellipse 34% 46% at var(--lado) 50%, color-mix(in srgb, var(--f1) 55%, #9db8dc 22%) 0%, transparent 70%), linear-gradient(in oklab 180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; }
.vitrine-peca--inversa { --lado: 28%; }
@media (max-width: 900px) { .vitrine-peca, .vitrine-peca--inversa { --lado: 50%; background: radial-gradient(ellipse 60% 26% at 50% 22%, var(--f1) 0%, transparent 70%), linear-gradient(180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; background: radial-gradient(ellipse 60% 26% at 50% 22%, color-mix(in srgb, var(--f1) 55%, #9db8dc 22%) 0%, transparent 70%), linear-gradient(in oklab 180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; } }
.resumo-acervo--desfile > .vitrine { margin-bottom: 0 !important; }
.resumo-acervo--desfile > .vitrine + p.centro { margin-top: 0 !important; }
/* sem halo claro em volta da peça: só o degradê contínuo do painel */
.vitrine-peca, .vitrine-peca--inversa { background: linear-gradient(180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; background: linear-gradient(in oklab 180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; }
@media (max-width: 900px) { .vitrine-peca, .vitrine-peca--inversa { background: linear-gradient(180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; background: linear-gradient(in oklab 180deg, var(--topo, var(--f1)) 0%, var(--meio, var(--f1)) 30%, var(--meio, var(--f1)) 70%, var(--fundo, var(--f2)) 100%) !important; } }
.vitrine-peca__relogio { filter: drop-shadow(0 34px 30px rgba(0, 0, 0, .45)); }
/* foto nova é de loja, sem velas: sem o brilho de vela por cima e sem zoom contínuo */
.estojo-foto__vela { display: none; }
.estojo-foto img { animation: none; }
/* saída da vitrine: começa na cor exata do último painel, desce em curva suave (vários pontos) e leva grão fino para não formar faixas */
.resumo-acervo--desfile > p.centro { position: relative; isolation: isolate;
  background: linear-gradient(180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 14%,
    var(--saida, #1c2e26) 26%,
    var(--saida, #1c2e26) 40%,
    var(--marfim) 55%,
    var(--marfim) 70%,
    var(--marfim) 84%,
    var(--marfim) 100%) !important; background: linear-gradient(in oklab 180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 14%,
    color-mix(in oklab, var(--saida, #1c2e26) 88%, var(--marfim)) 26%,
    color-mix(in oklab, var(--saida, #1c2e26) 70%, var(--marfim)) 40%,
    color-mix(in oklab, var(--saida, #1c2e26) 48%, var(--marfim)) 55%,
    color-mix(in oklab, var(--saida, #1c2e26) 27%, var(--marfim)) 70%,
    color-mix(in oklab, var(--saida, #1c2e26) 11%, var(--marfim)) 84%,
    var(--marfim) 100%) !important; }
.resumo-acervo--desfile > p.centro::after, .vitrine-peca::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.vitrine-peca__palco { position: relative; z-index: 1; }
/* "Ver o acervo completo" dentro do verde, sobre uma engrenagem champanhe; só depois o verde clareia para o marfim */
.resumo-acervo--desfile > p.centro { padding: clamp(9rem, 16vw, 13rem) var(--margem) clamp(560px, 46vw, 680px) !important;
  background: linear-gradient(180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 50%,
    var(--saida, #1c2e26) 59%,
    var(--saida, #1c2e26) 69%,
    var(--marfim) 79%,
    var(--marfim) 90%,
    var(--marfim) 100%) !important; background: linear-gradient(in oklab 180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 50%,
    color-mix(in oklab, var(--saida, #1c2e26) 86%, var(--marfim)) 59%,
    color-mix(in oklab, var(--saida, #1c2e26) 64%, var(--marfim)) 69%,
    color-mix(in oklab, var(--saida, #1c2e26) 40%, var(--marfim)) 79%,
    color-mix(in oklab, var(--saida, #1c2e26) 18%, var(--marfim)) 90%,
    var(--marfim) 100%) !important; }
.resumo-acervo--desfile > p.centro::before { content: ""; position: absolute; z-index: -1; left: 50%; top: calc(clamp(9rem, 16vw, 13rem) + 26px);
  width: clamp(300px, 30vw, 440px); aspect-ratio: 1; translate: -50% -50%;
  background: url(../assets/img/engrenagens.svg) center / contain no-repeat; opacity: .42; pointer-events: none;
  animation: engrenagem-gira 140s linear infinite; }
@keyframes engrenagem-gira { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .resumo-acervo--desfile > p.centro::before { animation: none; } }
html.estatico .resumo-acervo--desfile > p.centro::before { animation: none; }
.resumo-acervo--desfile > p.centro::before { opacity: .55; }
.resumo-acervo--desfile > p.centro .botao--linha { background: var(--saida, #1c2e26); border-color: rgba(205, 189, 152, .7); color: #f3ede2; }
.resumo-acervo--desfile > p.centro .botao--linha:hover { background: #f3ede2; color: #1d1a16; }
/* botão no alto, engrenagem logo abaixo fazendo a passagem do verde para o marfim */
.resumo-acervo--desfile > p.centro { padding: clamp(3.5rem, 6vw, 5rem) var(--margem) clamp(640px, 50vw, 760px) !important;
  background: linear-gradient(180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 30%,
    var(--saida, #1c2e26) 42%,
    var(--saida, #1c2e26) 55%,
    var(--marfim) 68%,
    var(--marfim) 83%,
    var(--marfim) 100%) !important; background: linear-gradient(in oklab 180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 30%,
    color-mix(in oklab, var(--saida, #1c2e26) 86%, var(--marfim)) 42%,
    color-mix(in oklab, var(--saida, #1c2e26) 64%, var(--marfim)) 55%,
    color-mix(in oklab, var(--saida, #1c2e26) 40%, var(--marfim)) 68%,
    color-mix(in oklab, var(--saida, #1c2e26) 18%, var(--marfim)) 83%,
    var(--marfim) 100%) !important; }
.resumo-acervo--desfile > p.centro::before { top: calc(clamp(3.5rem, 6vw, 5rem) + 48px + clamp(2.5rem, 4vw, 3.5rem)); translate: -50% 0;
  width: clamp(320px, 32vw, 480px); opacity: .6; }
.resumo-acervo--desfile > p.centro .botao--linha { background: transparent; }
/* o eixo da roda grande fica em 42,1% do desenho (viewBox -20..740, centro 300): alinha esse eixo ao centro do botão */
.resumo-acervo--desfile > p.centro::before { translate: -42.1% 0; transform-origin: 42.1% 42.1%; }
.resumo-acervo--desfile > p.centro::before { top: calc(clamp(3.5rem, 6vw, 5rem) + 48px + clamp(5rem, 8vw, 7.5rem)); }
.estojo-foto { aspect-ratio: 4 / 5; }
.estojo-foto { aspect-ratio: 1122 / 1402; }
/* ---------- Saída da vitrine: botão no verde e, abaixo, um relógio desenhado no traço champanhe do logo ---------- */
.resumo-acervo--desfile > .saida-acervo { position: relative; isolation: isolate; display: grid; justify-items: center; gap: clamp(2.5rem, 4vw, 3.5rem); text-align: center;
  padding: clamp(3.5rem, 6vw, 5rem) var(--margem) clamp(220px, 18vw, 300px);
  background: linear-gradient(180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 30%,
    var(--saida, #1c2e26) 42%,
    var(--saida, #1c2e26) 55%,
    var(--marfim) 68%,
    var(--marfim) 83%,
    var(--marfim) 100%); background: linear-gradient(in oklab 180deg,
    var(--saida, #1c2e26) 0%, var(--saida, #1c2e26) 30%,
    color-mix(in oklab, var(--saida, #1c2e26) 86%, var(--marfim)) 42%,
    color-mix(in oklab, var(--saida, #1c2e26) 64%, var(--marfim)) 55%,
    color-mix(in oklab, var(--saida, #1c2e26) 40%, var(--marfim)) 68%,
    color-mix(in oklab, var(--saida, #1c2e26) 18%, var(--marfim)) 83%,
    var(--marfim) 100%); }
.resumo-acervo--desfile > .saida-acervo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.saida-acervo .botao--linha { color: #f3ede2; border-color: rgba(205, 189, 152, .7); }
.saida-acervo .botao--linha:hover { background: #f3ede2; color: #1d1a16; }
.relogio-linha { width: clamp(230px, 22vw, 320px); height: auto; overflow: visible; fill: none; stroke: #cdbd98; stroke-width: 1.4; stroke-linecap: round; opacity: .85; }
.relogio-linha__marca { fill: #cdbd98; stroke: none; font: 500 15px/1 var(--sans); letter-spacing: .5em; }
.relogio-linha__cidade { fill: #cdbd98; stroke: none; font: 500 8px/1 var(--sans); letter-spacing: .3em; opacity: .75; }
.relogio-linha__eixo { fill: #cdbd98; }
.relogio-linha__segundo circle { fill: #cdbd98; stroke: none; }
.relogio-linha__hora, .relogio-linha__minuto, .relogio-linha__segundo { rotate: 0deg; }
.resumo-acervo--desfile > .saida-acervo { margin: 0 calc(var(--margem) * -1); }

/* ---------- Abertura clara: mostrador prateado em macro; texto em tinta escura, o brilho dourado passa pelo logo ---------- */
.abertura__video { background: #d9d6d0 !important; }
.abertura__video::after { background:
  radial-gradient(46% 44% at 50% 50%, rgba(246, 242, 234, .72) 0%, rgba(246, 242, 234, .45) 55%, rgba(246, 242, 234, 0) 100%),
  linear-gradient(180deg, rgba(246, 242, 234, .55) 0%, transparent 22%, transparent 78%, rgba(246, 242, 234, .6) 100%) !important; }
.abertura__lugar { color: #3b342b !important; text-shadow: 0 0 18px rgba(246, 242, 234, .9) !important; }
.logo--abertura { filter: drop-shadow(0 2px 16px rgba(246, 242, 234, .85)) !important; }
.abertura__slogan { color: #1d1a16 !important; text-shadow: 0 0 22px rgba(246, 242, 234, .95) !important; }
.abertura__slogan em { color: #8a6a35 !important; }
.abertura__descer { color: #2b2620 !important; text-shadow: 0 0 14px rgba(246, 242, 234, .9) !important; }
.abertura__seta { background: rgba(29, 26, 22, .55) !important; }
.pagina-inicio .topo:not(.rolou) .topo__nav a, .pagina-inicio .topo:not(.rolou) .topo__zap, .pagina-inicio .topo:not(.rolou) .topo__menu { color: #1d1a16 !important; }
.pagina-inicio .topo:not(.rolou) .logo--topo { --traco: #1d1a16 !important; }
.pagina-inicio .topo:not(.rolou) { background: linear-gradient(180deg, rgba(246, 242, 234, .6), rgba(246, 242, 234, 0)) !important; }
.abertura__video::after { background:
  radial-gradient(34% 30% at 50% 52%, rgba(246, 242, 234, .62) 0%, rgba(246, 242, 234, .3) 60%, rgba(246, 242, 234, 0) 100%),
  linear-gradient(180deg, rgba(246, 242, 234, .5) 0%, transparent 16%, transparent 84%, rgba(246, 242, 234, .5) 100%) !important; }
/* frase sobre o espaço escuro acima da caixa fechada */
.estojo-foto__frase { position: absolute; left: 0; right: 0; top: 9%; padding: 0 8%; text-align: center; font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.2 var(--serifa); color: #f3ede2; letter-spacing: .01em; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.estojo-foto__frase em { font-style: italic; color: #e2c98f; }
/* passagem marfim → grafite: curva suave em vários pontos + grão fino misturado, para não formar faixas */
.explore::after { height: 460px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(180deg,
      #f8f3ea 0%,
      #f8f3ea 14%,
      #f8f3ea 30%,
      #f8f3ea 47%,
      #2f2f31 64%,
      #2f2f31 82%,
      #2f2f31 100%) !important; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(in oklab 180deg,
      #f8f3ea 0%,
      color-mix(in oklab, #f8f3ea 90%, #2f2f31) 14%,
      color-mix(in oklab, #f8f3ea 72%, #2f2f31) 30%,
      color-mix(in oklab, #f8f3ea 50%, #2f2f31) 47%,
      color-mix(in oklab, #f8f3ea 28%, #2f2f31) 64%,
      color-mix(in oklab, #f8f3ea 11%, #2f2f31) 82%,
      #2f2f31 100%) !important; }
.explore::after { background-blend-mode: soft-light, normal !important; }
.explore::after { background-blend-mode: normal !important; background: linear-gradient(180deg,
      #f8f3ea 0%,
      #f8f3ea 12%,
      #f8f3ea 27%,
      #f8f3ea 43%,
      #2f2f31 60%,
      #2f2f31 78%,
      #2f2f31 92%,
      #2f2f31 100%) !important; background:
    linear-gradient(in oklab 180deg,
      #f8f3ea 0%,
      color-mix(in oklab, #f8f3ea 92%, #2f2f31) 12%,
      color-mix(in oklab, #f8f3ea 76%, #2f2f31) 27%,
      color-mix(in oklab, #f8f3ea 55%, #2f2f31) 43%,
      color-mix(in oklab, #f8f3ea 33%, #2f2f31) 60%,
      color-mix(in oklab, #f8f3ea 14%, #2f2f31) 78%,
      color-mix(in oklab, #f8f3ea 3%, #2f2f31) 92%,
      #2f2f31 100%) !important; }
/* abertura no celular: cada linha inteira, tudo centrado */
.abertura__descer span:first-child { white-space: nowrap; }
.abertura__descer { text-align: center; }
@media (max-width: 600px) {
  .abertura__sep { display: none; }
  .abertura__cidade { display: block; margin-top: .35em; }
  .abertura__slogan em { display: block; }
  .abertura__descer { font-size: .8rem !important; letter-spacing: .18em !important; }
}

/* ---------- correções do celular (07/11) ---------- */
/* 1) a passagem para o grafite fica abaixo das fotos: espaço próprio, nunca por cima das legendas */
.explore { padding-bottom: calc(460px + clamp(3rem, 6vw, 5rem)) !important; isolation: isolate; }
.explore::after { z-index: -1; }
/* 2) menos vazio entre o título "Três das casas" e o primeiro relógio; o fundo do título é o mesmo grafite do painel */
@media (max-width: 900px) {
  .resumo-acervo--desfile .cabecalho-centro { margin-bottom: 0 !important; }
  .vitrine { margin-top: 0 !important; }
  .vitrine-peca { padding-top: 2.5rem !important; padding-bottom: 3.5rem !important; }
  .vitrine-peca__relogio { margin: -10% 0 -12%; }
}
/* 4) a fita marcadora some enquanto a folha vira e volta quando ela assenta */
.revista__fita { transition: opacity .25s ease; }
.revista__folha.virando ~ .revista__fita { opacity: 0; transition-duration: .12s; }

/* ---------- Faixa com as casas do acervo, na passagem marfim → grafite ---------- */
.marcas-faixa { position: absolute; left: 0; right: 0; bottom: clamp(70px, 9vw, 120px); z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marcas-faixa__trilho { display: flex; align-items: center; gap: clamp(1.6rem, 3.5vw, 3.2rem); width: max-content; animation: marcas-correm 46s linear infinite; }
.marcas-faixa__trilho span { font: 400 italic clamp(1.9rem, 4.2vw, 3.4rem)/1 var(--serifa); color: #efe6d3; white-space: nowrap; letter-spacing: .01em; }
.marcas-faixa__trilho i { width: 9px; height: 9px; transform: rotate(45deg); background: #c9a865; flex: none; }
@keyframes marcas-correm { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marcas-faixa__trilho { animation: none; } }
html.estatico .marcas-faixa__trilho { animation: none; }

/* ---------- Revista: sem fita; ponta dobrada no canto inferior direito convida a folhear ---------- */
.revista__fita { display: none !important; }
.revista__livro { position: relative; }
.revista__canto { position: absolute; right: 0; bottom: 0; z-index: 5; width: clamp(46px, 7vw, 74px); aspect-ratio: 1; pointer-events: none; transform-origin: 100% 100%;
  background: linear-gradient(315deg, transparent 50%, #e9e0cf 50%, #fbf8f1 66%, #d9cdb6 100%);
  box-shadow: -3px -3px 8px -4px rgba(40, 32, 20, .35); border-top-left-radius: 2px;
  animation: canto-levanta 3.6s cubic-bezier(.45, 0, .25, 1) infinite; }
.revista__canto::before { content: ""; position: absolute; inset: 0; background: linear-gradient(315deg, #f4efe6 50%, transparent 50%); }
.revista__canto-dica { position: absolute; right: calc(100% + .6rem); bottom: .55rem; font: 500 .72rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #8a6a35; white-space: nowrap; }
@keyframes canto-levanta { 0%, 55%, 100% { transform: scale(.72); } 72% { transform: scale(1.12); } 84% { transform: scale(.9); } }
.revista__folha.virando ~ .revista__canto { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .revista__canto { animation: none; } }
html.estatico .revista__canto { animation: none; }
@media (max-width: 700px) {
  .revista__canto-dica { display: none; }
  .revista__canto { width: 44px; box-shadow: -4px -4px 10px -4px rgba(40, 32, 20, .45); }
}

/* ---------- Oficina: título, os 4 serviços e o vídeo na primeira tela ---------- */
.oficina-grade { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.oficina-texto { display: grid; gap: 1.2rem; justify-items: start; }
.oficina-servicos { list-style: none; margin: .8rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2.2rem; border-top: 1px solid rgba(168, 147, 95, .35); padding-top: 1.6rem; width: 100%; }
.oficina-servicos li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.oficina-servicos__n { font: 500 .78rem/1.9 var(--sans); letter-spacing: .14em; color: #a8935f; }
.oficina-servicos h2 { font: 500 1.22rem/1.3 var(--serifa); color: var(--tinta); margin: 0 0 .35rem; }
.oficina-servicos p { font: 400 .98rem/1.6 var(--sans); color: var(--texto); margin: 0; }
.oficina-video { margin: 0; display: grid; gap: .9rem; }
.oficina-video video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; display: block; background: #1d1a16; box-shadow: 0 30px 60px -30px rgba(29, 20, 12, .5); }
.oficina-video figcaption { font: 400 .92rem/1.5 var(--sans); color: var(--texto); text-align: center; }
@media (max-width: 900px) {
  .oficina-grade { grid-template-columns: 1fr; }
  .oficina-video { order: -1; }
  .oficina-video video { aspect-ratio: 4 / 4.4; border-radius: 18px; }
  .oficina-servicos { grid-template-columns: 1fr; }
}
.oficina-servicos li { grid-template-columns: 2.2rem 1fr; gap: 0; }
.oficina-servicos__n { color: #7a6438; }
/* entrada da vitrine sem "clareia e escurece": sem grão nos painéis e o 1º painel no mesmo grafite da seção até descer para o azul */
.vitrine-peca::after { display: none !important; }
.vitrine-peca:first-child { background: linear-gradient(180deg, #2f2f31 0%, #2f2f31 62%, var(--fundo, #23293a) 100%) !important; background: linear-gradient(in oklab 180deg, #2f2f31 0%, #2f2f31 62%, var(--fundo, #23293a) 100%) !important; }

/* saída verde → marfim: curva suave sem quina (o "joelho" no fim do verde parecia uma linha) + grão neutro que desfaz os degraus */
.resumo-acervo--desfile > .saida-acervo { background: linear-gradient(180deg, var(--saida, #1c2e26) 0.0%, var(--saida, #1c2e26) 7.1%, var(--saida, #1c2e26) 14.3%, var(--saida, #1c2e26) 21.4%, var(--saida, #1c2e26) 28.6%, var(--saida, #1c2e26) 35.7%, var(--saida, #1c2e26) 42.9%, var(--saida, #1c2e26) 50.0%, var(--saida, #1c2e26) 57.1%, var(--marfim) 64.3%, var(--marfim) 71.4%, var(--marfim) 78.6%, var(--marfim) 85.7%, var(--marfim) 92.9%, var(--marfim) 100.0%) !important; background: linear-gradient(in oklab 180deg, color-mix(in oklab, var(--marfim) 0.0%, var(--saida, #1c2e26)) 0.0%, color-mix(in oklab, var(--marfim) 0.0%, var(--saida, #1c2e26)) 7.1%, color-mix(in oklab, var(--marfim) 0.0%, var(--saida, #1c2e26)) 14.3%, color-mix(in oklab, var(--marfim) 0.1%, var(--saida, #1c2e26)) 21.4%, color-mix(in oklab, var(--marfim) 1.7%, var(--saida, #1c2e26)) 28.6%, color-mix(in oklab, var(--marfim) 7.1%, var(--saida, #1c2e26)) 35.7%, color-mix(in oklab, var(--marfim) 16.7%, var(--saida, #1c2e26)) 42.9%, color-mix(in oklab, var(--marfim) 30.1%, var(--saida, #1c2e26)) 50.0%, color-mix(in oklab, var(--marfim) 45.8%, var(--saida, #1c2e26)) 57.1%, color-mix(in oklab, var(--marfim) 62.0%, var(--saida, #1c2e26)) 64.3%, color-mix(in oklab, var(--marfim) 76.7%, var(--saida, #1c2e26)) 71.4%, color-mix(in oklab, var(--marfim) 88.4%, var(--saida, #1c2e26)) 78.6%, color-mix(in oklab, var(--marfim) 96.0%, var(--saida, #1c2e26)) 85.7%, color-mix(in oklab, var(--marfim) 99.4%, var(--saida, #1c2e26)) 92.9%, color-mix(in oklab, var(--marfim) 100.0%, var(--saida, #1c2e26)) 100.0%) !important; }
.resumo-acervo--desfile > .saida-acervo::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") !important; mix-blend-mode: soft-light !important; opacity: .22 !important; }
/* o grão clareava o verde e marcava a emenda com o último painel: sem grão, o verde começa idêntico */
.resumo-acervo--desfile > .saida-acervo::after { display: none !important; }

/* ---------- Página inicial: Oficina em faixa de cinema (sem moldura de arco) ---------- */
.faixa-oficina { position: relative; isolation: isolate; min-height: min(86vh, 820px); min-height: min(86svh, 820px); display: grid; align-items: end; overflow: hidden; background: #14110e; color: #f4ecdb; }
.faixa-oficina__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.faixa-oficina::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14, 11, 8, .86) 0%, rgba(14, 11, 8, .62) 38%, rgba(14, 11, 8, 0) 70%), linear-gradient(0deg, rgba(14, 11, 8, .55), transparent 45%); }
.faixa-oficina__texto { display: grid; gap: 1.1rem; justify-items: start; max-width: 34rem; padding: clamp(4rem, 9vw, 7rem) var(--margem); }
.faixa-oficina .sobre { color: #e2c98f; }
.faixa-oficina .titulo { color: #fbf6ec; }
.faixa-oficina .titulo em { color: #e2c98f; }
.faixa-oficina .texto { color: rgba(251, 246, 236, .9); font-size: 1.08rem; line-height: 1.7; }
@media (max-width: 860px) {
  .faixa-oficina { min-height: 0; display: block; }
  .faixa-oficina__video { position: relative; inset: auto; display: block; height: auto; aspect-ratio: 4 / 4.6; }
  .faixa-oficina::before { inset: auto 0 0 0; height: 100%; background: linear-gradient(180deg, transparent 0%, transparent 38%, #14110e 56%); }
  .faixa-oficina__texto { position: relative; margin-top: -5rem; padding: 0 var(--margem) 3.5rem; }
}
.faixa-oficina__texto { max-width: 44rem; }
/* "A" do logo (com os ponteiros) como inicial de título que começa com A */
.letra-a { display: inline-block; height: .74em; width: .56em; vertical-align: -.02em; margin-right: .04em; color: #a8864a; }
.letra-a svg { width: 100%; height: 100%; display: block; overflow: visible; }
.letra-a__ponteiros { transform-box: view-box; transform-origin: 98.7px 79.7px; }
.giro.visivel .letra-a__ponteiros, html.estatico .letra-a__ponteiros { animation: ponteiros-acertam 1.7s cubic-bezier(.34, 1.3, .5, 1) both .4s; }
@media (prefers-reduced-motion: reduce) { .letra-a__ponteiros { animation: none !important; } }
.letra-a { height: .86em; width: .66em; vertical-align: -.06em; }
/* entrada suave da faixa da Oficina: o marfim de cima se dissolve dentro do vídeo */
.faixa-oficina::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(160px, 22vh, 260px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--marfim) 0%, var(--marfim) 30%, transparent 65%, transparent 100%); background: linear-gradient(in oklab 180deg, var(--marfim) 0%, color-mix(in oklab, var(--marfim) 70%, transparent) 30%, color-mix(in oklab, var(--marfim) 25%, transparent) 65%, transparent 100%); }
.resumo-acervo--desfile > .saida-acervo { padding-bottom: clamp(120px, 12vw, 200px) !important; }
@media (max-width: 860px) { .faixa-oficina::after { height: 34%; } }

/* ---------- Faixa da Oficina clara (bancada branca em 4K): o marfim entra no vídeo sem corte, texto em tinta ---------- */
.faixa-oficina { background: var(--marfim) !important; color: var(--tinta) !important; align-items: center !important; min-height: min(88vh, 860px) !important; min-height: min(88svh, 860px) !important; }
.faixa-oficina__video { -webkit-mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 22%, #000 86%, transparent 100%); }
.faixa-oficina::after { display: none !important; }
.faixa-oficina::before { background: linear-gradient(90deg, rgba(246, 242, 234, .94) 0%, rgba(246, 242, 234, .78) 30%, rgba(246, 242, 234, 0) 58%) !important; }
.faixa-oficina .sobre { color: #7a6438 !important; }
.faixa-oficina .titulo { color: var(--tinta) !important; }
.faixa-oficina .titulo em { color: #8a6a35 !important; }
.faixa-oficina .texto { color: var(--texto) !important; }
.faixa-oficina__texto { padding-top: clamp(3rem, 6vw, 5rem) !important; padding-bottom: clamp(3rem, 6vw, 5rem) !important; }
@media (max-width: 860px) {
  .faixa-oficina__video { aspect-ratio: 4 / 4.4; -webkit-mask: linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 20%, #000 70%, transparent 100%); }
  .faixa-oficina::before { display: none; }
  .faixa-oficina__texto { margin-top: -3rem !important; padding: 0 var(--margem) 3.5rem !important; }
}
/* "Explore a Casa Haut": as quatro fotos com o mesmo tratamento de cor (quente e suave), para lerem como uma série */
.explore__foto { background: #e9e1d4; }
.explore__foto img { filter: saturate(.72) sepia(.14) contrast(1.04) brightness(1.03); }
.explore__item:hover .explore__foto img { filter: saturate(.85) sepia(.08) contrast(1.04) brightness(1.04); }
/* ponteiros do relógio desenhado giram por transform (funciona em Safari antigo) */
.relogio-linha__hora, .relogio-linha__minuto, .relogio-linha__segundo { transform-box: view-box; }
/* com "reduzir movimento" a faixa das casas e o canto da revista seguem andando devagar (não deslocam a tela) */
@media (prefers-reduced-motion: reduce) { .marcas-faixa__trilho { animation: marcas-correm 46s linear infinite !important; } .revista__canto { animation: canto-levanta 3.6s cubic-bezier(.45, 0, .25, 1) infinite !important; } }
html.estatico .marcas-faixa__trilho, html.estatico .revista__canto { animation: none !important; }

/* frases de efeito: a parte destacada muda só a cor, não a forma da letra (sem itálico) */
.titulo em, .lead em, .abertura__slogan em, .equipe__frase em, .passo em, .estojo-foto__frase em, .explore__titulo em, .subtitulo em, h1 em, h2 em, h3 em { font-style: normal !important; }
/* o dourado tem menos contraste que o branco/preto e parece menor: compensa com peso 500 e 4% a mais */
.estojo-foto__frase em, .abertura__slogan em, .titulo em, .equipe__frase em { font-weight: 500; font-size: 1.04em; }
/* capitular com o T do logo da Haut */
.capitular-t { float: left; width: 2.35em; height: 3.1em; margin: .28em .5em 0 0; color: #a8864a; }
.capitular-t svg { width: 100%; height: 100%; display: block; overflow: visible; }
.capitular-t { width: 1.95em; height: 2.65em; margin: .32em .25em 0 0; }

/* iPhone em economia de bateria bloqueia o autoplay e desenha um botão de play nativo: nunca mostrar controles de vídeo */
video::-webkit-media-controls, video::-webkit-media-controls-panel, video::-webkit-media-controls-overlay-play-button,
video::-webkit-media-controls-start-playback-button, video::-webkit-media-controls-play-button { display: none !important; -webkit-appearance: none !important; opacity: 0 !important; }
.fundo-video__video, .faixa-oficina__video { pointer-events: none; }

/* ---------- Inspirado no Magic UI (Border Beam): fio de luz dourada percorre a borda do botão principal ---------- */
@property --feixe { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.botao--cheio { border: 1.5px solid transparent !important;
  background: linear-gradient(var(--tinta), var(--tinta)) padding-box, conic-gradient(from var(--feixe), rgba(201, 168, 101, .25) 0deg, rgba(201, 168, 101, .25) 250deg, #f3dfa8 320deg, rgba(201, 168, 101, .25) 360deg) border-box !important;
  animation: feixe-gira 4.5s linear infinite; }
.botao--cheio:hover { background: linear-gradient(#3b352c, #3b352c) padding-box, conic-gradient(from var(--feixe), rgba(201, 168, 101, .4) 0deg, rgba(201, 168, 101, .4) 250deg, #f3dfa8 320deg, rgba(201, 168, 101, .4) 360deg) border-box !important; }
@keyframes feixe-gira { to { --feixe: 360deg; } }
html.estatico .botao--cheio { animation: none; }

/* ---------- Inspirado no Aceternity (Spotlight + Tilted Card): luz que segue o mouse no cartão do Acervo ---------- */
@media (hover: hover) and (pointer: fine) {
  .cartao { perspective: 1100px; }
  .cartao__abrir { position: relative; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .5s cubic-bezier(.2, .8, .2, 1); transform-style: preserve-3d; }
  .cartao__abrir::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(226, 201, 143, .22), transparent 55%); }
  .cartao__abrir:hover::after { opacity: 1; }
  .cartao__abrir.mexendo { transition: transform .12s linear; }
}

/* ---------- Inspirado no React Bits (Blur Text): títulos surgem do desfoque, palavra por palavra ---------- */
.palavra { display: inline-block; white-space: pre; }
.titulo-desfoque .palavra { opacity: 0; filter: blur(10px); transform: translateY(.18em); transition: opacity .9s ease, filter .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 70ms); }
.titulo-desfoque.surgiu .palavra { opacity: 1; filter: none; transform: none; }

/* ---------- 08/11: menos vazio entre as fotos do Explore e a faixa das casas ---------- */
.explore { padding-bottom: calc(300px + 1.5rem) !important; }
.explore::after { height: 320px !important; }
.marcas-faixa { bottom: clamp(40px, 5vw, 70px); }

/* ---------- Vitrine compacta: 4 relógios em 2 x 2, depois "Ver o acervo completo" ---------- */
.resumo-acervo--desfile { --saida: #2f2f31; }
.vit-grade { max-width: 1240px; margin: clamp(1.5rem, 3vw, 2.5rem) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.6rem); }
.vit-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(.8rem, 2vw, 1.6rem); padding: clamp(1.2rem, 2.2vw, 2rem); border-radius: 22px; color: #fff;
  background: radial-gradient(ellipse 70% 80% at 25% 50%, var(--f1) 0%, var(--f2) 75%); border: 1px solid rgba(230, 201, 138, .14); }
.vit-card__foto { margin: 0; }
.vit-card__foto img { width: 100%; height: auto; display: block; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .45));
  -webkit-mask: linear-gradient(180deg, transparent 13%, #000 30%, #000 70%, transparent 87%); mask: linear-gradient(180deg, transparent 13%, #000 30%, #000 70%, transparent 87%); }
.vit-card__texto { display: grid; gap: .45rem; justify-items: start; }
.vit-card__casa { font: 500 .78rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: #e6c98a; }
.vit-card__modelo { font: 400 clamp(1.5rem, 2.1vw, 2rem)/1.1 var(--serifa); color: #fff; }
.vit-card__chapeu { font: 400 1.02rem/1.4 var(--serifa); color: #e6c98a; }
.vit-card__ref { font: 400 .92rem/1.4 var(--sans); color: rgba(255, 255, 255, .82); }
.vit-card__acoes { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.vit-card__acoes .pilula { min-height: 44px; padding: 0 1.2rem; font-size: .72rem; }
.resumo-acervo--desfile > .saida-acervo { padding: clamp(2.2rem, 4vw, 3rem) var(--margem) clamp(140px, 12vw, 200px) !important; }
@media (max-width: 900px) {
  .vit-grade { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .vit-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .vit-card__foto { width: 70%; }
  .vit-card__texto { justify-items: center; }
  .vit-card__acoes { justify-content: center; }
}
/* os 4 cartões da vitrine no mesmo tom grafite, com leve luz atrás do relógio */
.vit-card { background: radial-gradient(ellipse 70% 80% at 25% 50%, #3d3d40 0%, #232325 75%) !important; }

/* ---------- 08/11: transições com ritmo único e cada tipo de bloco com a sua entrada ---------- */
/* títulos: todas as palavras (inclusive a parte dourada) entram dentro de 0,45 s, no mesmo ritmo */
.titulo-desfoque .palavra { transition-duration: .8s; transition-delay: calc(var(--i) / var(--n, 1) * 450ms); }
.sem-efeito .letra-a__ponteiros { animation: none !important; }
/* textos: sobem de leve (padrão) */
/* imagens e vídeos: abrem de baixo para cima, como uma cortina */
.giro:is(.mapa-moldura, .revista) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1); }
.giro:is(.mapa-moldura, .revista).visivel { clip-path: inset(0 0 0 0); }
/* grades (Explore, vitrine, Acervo): os itens entram um após o outro, crescendo de leve */
.giro:is(.explore__grade, .vit-grade, .catalogo) { opacity: 1; transform: none; }
.giro:is(.explore__grade, .vit-grade, .catalogo) > * { opacity: 0; transform: scale(.96); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > * { opacity: 1; transform: none; }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > :nth-child(2) { transition-delay: .12s; }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > :nth-child(3) { transition-delay: .24s; }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > :nth-child(4) { transition-delay: .36s; }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > :nth-child(5) { transition-delay: .48s; }
.giro:is(.explore__grade, .vit-grade, .catalogo).visivel > :nth-child(6) { transition-delay: .6s; }
/* passos da Experiência: entram da esquerda, um após o outro */
.passo.giro { transform: translateX(-24px); }
.passo.giro.visivel { transform: none; }
/* botões: só aparecem, sem deslocar */
.botao.giro { transform: none; transition: opacity .7s ease .2s; }
html.estatico .giro, html.estatico .giro > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
@media (prefers-reduced-motion: reduce) { .giro, .giro > * { opacity: 1 !important; transform: none !important; clip-path: none !important; } }
/* a cortina fica no conteúdo, não no bloco (com o bloco recortado o navegador não o "vê" entrar na tela) */
.giro:is(.mapa-moldura, .revista), .giro:is(.mapa-moldura, .revista).visivel { clip-path: none !important; }
.giro:is(.mapa-moldura, .revista) > * { clip-path: inset(100% 0 0 0); transition: clip-path 1.3s cubic-bezier(.65, 0, .25, 1); }
.giro:is(.mapa-moldura, .revista).visivel > * { clip-path: inset(0 0 0 0); }
.giro.revista.visivel > .revista__controles { transition-delay: .3s; }
/* a parte dourada (texto com degradê) entra como um bloco só, sem quebrar o degradê e sem atraso */
.palavra--destaque { display: inline; white-space: normal; }
.titulo-desfoque .palavra--destaque { transform: none; transition-property: opacity, filter; }
/* título inteiro entra praticamente junto: diferença máxima de 0,12 s entre a primeira palavra e a parte dourada */
.titulo-desfoque .palavra { transition-duration: .75s; transition-delay: calc(var(--i) / var(--n, 1) * 120ms); }
/* o A do logo mantém os ponteiros dando a volta quando o título aparece (só o título fica sem desfoque) */
.sem-efeito .letra-a.gira .letra-a__ponteiros { animation: ponteiros-acertam 1.7s cubic-bezier(.34, 1.3, .5, 1) both .3s !important; }

/* ---------- Títulos: revelação da esquerda para a direita (a cor dourada entra junto, pelo mesmo movimento) ---------- */
.revela-texto { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%, transparent 100%); mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%, transparent 100%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 1.3s cubic-bezier(.45, 0, .2, 1), mask-position 1.3s cubic-bezier(.45, 0, .2, 1); }
.revela-texto.surgiu { -webkit-mask-position: 0 0; mask-position: 0 0; }
html.estatico .revela-texto { -webkit-mask: none; mask: none; }
/* sem animar ao esconder no carregamento; vale também para título que já é bloco .giro */
.revela-texto, .giro.revela-texto { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%, transparent 100%) !important; mask-image: linear-gradient(90deg, #000 0%, #000 42%, transparent 58%, transparent 100%) !important;
  -webkit-mask-size: 260% 100% !important; mask-size: 260% 100% !important; -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  -webkit-mask-position: 100% 0 !important; mask-position: 100% 0 !important; transition: opacity 1s var(--curva), transform 1s var(--curva); }
.revela-texto.surgiu, .giro.revela-texto.surgiu { -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important;
  transition: -webkit-mask-position 1.3s cubic-bezier(.45, 0, .2, 1), mask-position 1.3s cubic-bezier(.45, 0, .2, 1), opacity 1s var(--curva), transform 1s var(--curva); }
html.estatico .revela-texto { -webkit-mask: none !important; mask: none !important; }
/* a cortina termina aberta além das bordas: o ponteiro e o nome da cidade podem sair da caixa do mapa sem corte */
.giro:is(.mapa-moldura, .revista) > * { clip-path: inset(100% -40% -40% -40%); }
.giro:is(.mapa-moldura, .revista).visivel > * { clip-path: inset(-40% -40% -40% -40%); }

/* ---------- Efeito de vidro (como o cristal de safira): reflexo diagonal leve, fio de luz na borda de cima e um brilho que atravessa devagar ---------- */
.vit-card, .cartao__abrir, .explore__foto, .estojo-foto, .oficina-video { position: relative; overflow: hidden; isolation: isolate; }
.vit-card::before, .cartao__abrir::before, .explore__foto::after, .estojo-foto::after, .oficina-video::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 2px),
    linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 32%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .05) 52%, transparent 60%);
  background-size: 100% 100%, 100% 100%, 260% 100%; background-repeat: no-repeat; background-position: 0 0, 0 0, 140% 0;
  animation: vidro-brilho 9s ease-in-out infinite; animation-delay: var(--atraso, 0s); }
.cartao__abrir::before { background:
    linear-gradient(118deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, 0) 31%),
    linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .5) 48%, rgba(255, 255, 255, .15) 52%, transparent 60%);
  background-size: 100% 100%, 260% 100%; background-position: 0 0, 140% 0; mix-blend-mode: soft-light; animation-name: vidro-brilho-claro; }
@keyframes vidro-brilho { 0%, 62% { background-position: 0 0, 0 0, 140% 0; } 82%, 100% { background-position: 0 0, 0 0, -40% 0; } }
@keyframes vidro-brilho-claro { 0%, 62% { background-position: 0 0, 140% 0; } 82%, 100% { background-position: 0 0, -40% 0; } }
.vit-card:nth-child(2), .cartao:nth-child(2) .cartao__abrir, .explore__item:nth-child(2) .explore__foto { --atraso: 1.2s; }
.vit-card:nth-child(3), .cartao:nth-child(3) .cartao__abrir, .explore__item:nth-child(3) .explore__foto { --atraso: 2.4s; }
.vit-card:nth-child(4), .cartao:nth-child(4) .cartao__abrir, .explore__item:nth-child(4) .explore__foto { --atraso: 3.6s; }
.cartao:nth-child(5) .cartao__abrir { --atraso: 4.8s; } .cartao:nth-child(6) .cartao__abrir { --atraso: 6s; }
.vit-card > *, .cartao__abrir > * { position: relative; z-index: 2; }
html.estatico :is(.vit-card, .cartao__abrir)::before, html.estatico :is(.explore__foto, .estojo-foto, .oficina-video)::after { animation: none; }
/* cartões claros do Acervo: sem véu fixo (desbotava o relógio); só a borda de vidro e o brilho passando */
.cartao__abrir::before { mix-blend-mode: normal !important;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .55) 49%, rgba(255, 255, 255, .18) 52%, transparent 58%) !important;
  background-size: 260% 100% !important; background-position: 140% 0 !important; animation-name: vidro-brilho-so !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(168, 147, 95, .14); }
@keyframes vidro-brilho-so { 0%, 62% { background-position: 140% 0; } 82%, 100% { background-position: -40% 0; } }

/* ---------- Página Oficina (08/11): topo em tela cheia, manifesto e serviços em fotos ---------- */
.of-topo { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: #14110e; color: #f4ecdb; margin-top: calc(-1 * var(--topo-altura, 0px)); }
.of-topo__video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.of-topo::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(14, 11, 8, .88) 0%, rgba(14, 11, 8, .55) 38%, rgba(14, 11, 8, 0) 70%), linear-gradient(90deg, rgba(14, 11, 8, .55), transparent 60%); }
.of-topo__texto { display: grid; gap: 1.2rem; justify-items: start; max-width: 46rem; padding: 0 var(--margem) clamp(3.5rem, 8vh, 6rem); }
.of-topo .sobre { color: #e2c98f; }
.of-topo .titulo { color: #fbf6ec; font-size: clamp(2.6rem, 5.4vw, 5rem); line-height: 1.02; }
.of-topo .titulo em { color: #e2c98f; }
.of-topo .lead { color: rgba(251, 246, 236, .9); max-width: 34rem; }
.of-manifesto { padding: clamp(5rem, 11vw, 9rem) var(--margem); background: var(--marfim); }
.of-manifesto__frase { max-width: 60rem; margin: 0 auto; text-align: center; font: 400 clamp(1.7rem, 3.4vw, 3rem)/1.25 var(--serifa); color: var(--tinta); }
.of-manifesto__frase em { color: #8a6a35; font-style: normal; }
.of-servicos { background: #efe8dc; }
.of-servicos__cabeca { max-width: 1240px; margin: 0 auto clamp(2rem, 4vw, 3.5rem); display: grid; gap: .6rem; }
.of-servicos__grade { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.servico-foto { display: grid; gap: .5rem; align-content: start; }
.servico-foto__img { margin: 0 0 .9rem; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; position: relative; isolation: isolate; background: #d9cfbd; }
.servico-foto__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.servico-foto:hover .servico-foto__img img { transform: scale(1.04); }
.servico-foto__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 2px), linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, .05) 52%, transparent 60%);
  background-size: 100% 100%, 260% 100%; background-repeat: no-repeat; background-position: 0 0, 140% 0; animation: vidro-brilho-dois 9s ease-in-out infinite; }
@keyframes vidro-brilho-dois { 0%, 62% { background-position: 0 0, 140% 0; } 82%, 100% { background-position: 0 0, -40% 0; } }
.servico-foto__n { font: 500 .8rem/1 var(--sans); letter-spacing: .2em; color: #7a6438; }
.servico-foto__titulo { font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.15 var(--serifa); color: var(--tinta); }
.servico-foto__texto { font: 400 1.02rem/1.65 var(--sans); color: var(--texto); max-width: 34rem; }
@media (max-width: 760px) { .of-servicos__grade { grid-template-columns: 1fr; } .of-topo { min-height: 92vh; min-height: 92svh; } }
.of-topo { min-height: calc(100vh - 78px); min-height: calc(100svh - 78px); margin-top: 0; }
@media (max-width: 760px) { .of-topo { min-height: calc(92vh - 70px); min-height: calc(92svh - 70px); } }

/* ---------- 08/11: vitrine no padrão do site (creme e dourado), sem faixa escura ---------- */
.explore::after { display: none !important; }
.explore { padding-bottom: clamp(7rem, 10vw, 9rem) !important; }
.marcas-faixa { bottom: clamp(1.5rem, 3vw, 2.5rem); }
.marcas-faixa__trilho span { color: #8a6a35 !important; }
.marcas-faixa__trilho i { background: #c9a865; }
.resumo-acervo--desfile, .secao--vitrine.resumo-acervo--desfile { background: #efe8dc !important; color: var(--tinta) !important; --saida: #efe8dc; }
.resumo-acervo--desfile .sobre { color: #7a6438 !important; }
.resumo-acervo--desfile .titulo { color: var(--tinta) !important; }
.resumo-acervo--desfile .titulo em { color: #8a6a35 !important; }
.vit-card { background: radial-gradient(ellipse 70% 80% at 25% 50%, #ffffff 0%, #f7f2e9 70%) !important; color: var(--tinta); border: 1px solid rgba(168, 134, 74, .28);
  box-shadow: 0 24px 50px -32px rgba(60, 45, 20, .35); }
.vit-card__casa { color: #7a6438; }
.vit-card__modelo { color: var(--tinta); }
.vit-card__chapeu { color: #8a6a35; }
.vit-card__ref { color: var(--texto); }
.vit-card__foto img { filter: drop-shadow(0 18px 18px rgba(60, 45, 20, .22)); }
.vit-card .pilula--clara { background: var(--tinta); color: var(--marfim); }
.vit-card .pilula--clara:hover { background: #3b352c; }
.vit-card .pilula--vidro { color: var(--tinta); background: transparent; border-color: rgba(29, 26, 22, .35); -webkit-backdrop-filter: none; backdrop-filter: none; }
.vit-card .pilula--vidro:hover { background: var(--tinta); color: var(--marfim); }
.vit-card::before { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .7) 49%, rgba(255, 255, 255, .2) 52%, transparent 58%) !important;
  background-size: 260% 100% !important; background-position: 140% 0 !important; animation-name: vidro-brilho-so !important; box-shadow: inset 0 1px 0 #fff; }
.resumo-acervo--desfile > .saida-acervo { background: #efe8dc !important; padding: clamp(2rem, 4vw, 3rem) var(--margem) clamp(4rem, 7vw, 6rem) !important; }
.saida-acervo .botao--linha { color: var(--tinta) !important; border-color: rgba(29, 26, 22, .4) !important; }
.saida-acervo .botao--linha:hover { background: var(--tinta) !important; color: var(--marfim) !important; }
.faixa-oficina__video { -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%); mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%); }
.faixa-oficina { background: linear-gradient(180deg, #efe8dc 0%, var(--marfim) 30%) !important; }
/* sem linha entre o Explore e a vitrine: o creme claro desce suave até o creme da vitrine */
.explore { background: linear-gradient(180deg, #f8f3ea 0%, #f8f3ea 62%, #efe8dc 100%) !important; background: linear-gradient(in oklab 180deg, #f8f3ea 0%, #f8f3ea 62%, #efe8dc 100%) !important; }
/* fotos dos serviços com o mesmo tratamento de cor (tom quente do site), para lerem como uma série */
.servico-foto__img img { filter: saturate(.5) sepia(.28) contrast(1.06) brightness(1.04); }
.servico-foto:hover .servico-foto__img img { filter: saturate(.6) sepia(.22) contrast(1.06) brightness(1.05); }
/* sem risco entre a vitrine e o vídeo da Oficina: um véu no mesmo creme da vitrine cobre o topo da faixa e some aos poucos */
.faixa-oficina::after { display: block !important; content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(180px, 24vh, 280px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #efe8dc 0%, #efe8dc 25%, transparent 60%, transparent 100%) !important; background: linear-gradient(in oklab 180deg, #efe8dc 0%, color-mix(in oklab, #efe8dc 85%, transparent) 25%, color-mix(in oklab, #efe8dc 45%, transparent) 60%, transparent 100%) !important; }
.faixa-oficina { background: #efe8dc !important; }
/* marca de passagem entre a vitrine e a Oficina: o A do logo em dourado, com respiro, sem linha */
.saida-acervo { display: grid !important; justify-items: center; gap: 0; }
.divisa { display: block; width: 26px; height: 34px; margin-top: clamp(4rem, 8vw, 6rem); color: #b08a4a; opacity: .85; }
.divisa svg { width: 100%; height: 100%; display: block; }
.resumo-acervo--desfile > .saida-acervo { padding-bottom: clamp(3rem, 6vw, 4.5rem) !important; }
/* sem a faixa das marcas: o Explore termina perto da vitrine */
.explore { padding-bottom: clamp(3rem, 5vw, 4.5rem) !important; }
.resumo-acervo--desfile { padding-top: clamp(3rem, 5vw, 4.5rem) !important; }
/* fim da faixa da Oficina: sem véu branco; o vídeo se dissolve direto no creme da seção seguinte, que começa mais perto */
.faixa-oficina { background: linear-gradient(180deg, #efe8dc 0%, #efe8dc 50%, #eee7db 100%) !important; min-height: min(80vh, 760px) !important; min-height: min(80svh, 760px) !important; }
.faixa-oficina__video { -webkit-mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%) !important; mask: linear-gradient(180deg, transparent 0%, #000 12%, #000 80%, transparent 100%) !important; }
.faixa-oficina::before { background: linear-gradient(90deg, rgba(239, 232, 220, .9) 0%, rgba(239, 232, 220, .7) 28%, rgba(239, 232, 220, 0) 55%) !important; }
.faixa-oficina + .resumo-equipe { padding-top: clamp(2rem, 4vw, 3.5rem) !important; }
/* moldura art déco espelhada (cantos de baixo), fechando a seção do acervo; o A do logo centralizado dentro dela */
.resumo-acervo--desfile > .saida-acervo { position: relative; padding-bottom: clamp(5rem, 9vw, 7rem) !important; }
.saida-acervo__moldura { position: absolute; left: clamp(1rem, 3vw, 2.75rem); right: clamp(1rem, 3vw, 2.75rem); bottom: clamp(1.5rem, 3vw, 2.75rem); height: clamp(150px, 18vw, 240px); pointer-events: none; }
.saida-acervo__moldura::before, .saida-acervo__moldura::after { content: ""; position: absolute; bottom: 0; width: 22%; height: 100%; border-bottom: 3px double rgba(168, 147, 95, .55); }
.saida-acervo__moldura::before { left: 0; border-left: 3px double rgba(168, 147, 95, .55); }
.saida-acervo__moldura::after { right: 0; border-right: 3px double rgba(168, 147, 95, .55); }
.divisa { margin-top: clamp(3rem, 6vw, 4.5rem) !important; }
@media (max-width: 860px) { .saida-acervo__moldura { height: 120px; } .saida-acervo__moldura::before, .saida-acervo__moldura::after { width: 18%; } }
/* o A assenta sobre a linha de baixo da moldura, no meio dela */
.divisa { position: absolute; left: 50%; bottom: clamp(1.5rem, 3vw, 2.75rem); margin: 0 !important; transform: translate(-50%, 50%); background: #efe8dc; padding: 0 14px; box-sizing: content-box; }
.saida-acervo__moldura::before, .saida-acervo__moldura::after { width: 44% !important; }
/* separador entre a Oficina e o Instagram: linha dupla dourada contínua com o A do logo no meio */
.separador { position: relative; height: 40px; margin: 0 clamp(1rem, 3vw, 2.75rem); background: transparent; display: grid; place-items: center; }
.separador::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 3px double rgba(168, 147, 95, .55); }
.separador__a { position: relative; width: 26px; height: 34px; padding: 0 14px; box-sizing: content-box; color: #b08a4a; background: #eee7db; }
.separador__a svg { width: 100%; height: 100%; display: block; }
body:has(.separador) .separador { background: #eee7db; }
.separador + .resumo-equipe { padding-top: clamp(2rem, 4vw, 3rem) !important; }
.separador { margin: 0 !important; padding: 0 clamp(1rem, 3vw, 2.75rem); }
.separador::before { left: clamp(1rem, 3vw, 2.75rem); right: clamp(1rem, 3vw, 2.75rem); }
/* capitais em dourado; ao serem alcançadas pelo ponteiro, dourado mais forte com brilho */
.mapa__ponto { fill: #c9a865 !important; }
.mapa__cidade.acesa .mapa__ponto { fill: #a07a3a !important; filter: drop-shadow(0 0 3px rgba(201, 168, 101, .8)); }

/* ---------- Abertura escura (Speedmaster com HAUT no mostrador): texto claro, dourado no destaque ---------- */
.abertura__video { background: #14110e !important; }
.abertura__video::after { background: radial-gradient(42% 40% at 50% 50%, rgba(14, 11, 8, .62) 0%, rgba(14, 11, 8, .35) 60%, rgba(14, 11, 8, .55) 100%), linear-gradient(180deg, rgba(14, 11, 8, .55) 0%, transparent 18%, transparent 80%, rgba(14, 11, 8, .6) 100%) !important; }
.abertura__lugar { color: #f3ead8 !important; text-shadow: 0 1px 12px rgba(0, 0, 0, .7) !important; }
.logo--abertura { filter: drop-shadow(0 2px 20px rgba(0, 0, 0, .7)) !important; }
.abertura__slogan { color: #fbf6ec !important; text-shadow: 0 2px 18px rgba(0, 0, 0, .7) !important; }
.abertura__slogan em { color: #e2c98f !important; }
.abertura__descer { color: #f3ead8 !important; text-shadow: 0 1px 10px rgba(0, 0, 0, .7) !important; }
.abertura__seta { background: rgba(243, 234, 216, .7) !important; }
.pagina-inicio .topo:not(.rolou) .topo__nav a, .pagina-inicio .topo:not(.rolou) .topo__zap, .pagina-inicio .topo:not(.rolou) .topo__menu { color: #f4ecdb !important; }
.pagina-inicio .topo:not(.rolou) .logo--topo { --traco: #f4ecdb !important; }
.pagina-inicio .topo:not(.rolou) { background: linear-gradient(180deg, rgba(14, 11, 8, .55), rgba(14, 11, 8, 0)) !important; }

/* ---------- Separador padrão do site: linha dupla dourada com o A do logo no meio (sem fundo próprio: herda a seção) ---------- */
.separador, body:has(.separador) .separador { background: transparent !important; }
.separador::before { -webkit-mask: linear-gradient(90deg, #000 calc(50% - 42px), transparent calc(50% - 42px), transparent calc(50% + 42px), #000 calc(50% + 42px)); mask: linear-gradient(90deg, #000 calc(50% - 42px), transparent calc(50% - 42px), transparent calc(50% + 42px), #000 calc(50% + 42px)); }
.separador__a { background: transparent !important; }
.separador--secao { max-width: 1240px; margin: calc(-1 * clamp(1rem, 3vw, 2.5rem)) auto clamp(2.5rem, 5vw, 4rem) !important; padding: 0 !important; }
.separador--secao::before { left: 0 !important; right: 0 !important; }

/* ---------- Vitrine no celular: 2 x 2, cartões compactos ---------- */
@media (max-width: 900px) {
  .vit-grade { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .7rem !important; }
  .vit-card { grid-template-columns: 1fr !important; justify-items: center; text-align: center; padding: .9rem .7rem 1rem !important; gap: .3rem !important; border-radius: 16px !important; }
  .vit-card__foto { width: 86% !important; }
  .vit-card__texto { justify-items: center; gap: .25rem !important; }
  .vit-card__casa { font-size: .62rem; letter-spacing: .14em; }
  .vit-card__modelo { font-size: 1.12rem; }
  .vit-card__chapeu { font-size: .82rem; }
  .vit-card__ref { font-size: .72rem; }
  .vit-card__acoes { flex-direction: column; width: 100%; gap: .35rem; margin-top: .4rem; }
  .vit-card__acoes .pilula { min-height: 40px; padding: 0 .6rem; font-size: .62rem; letter-spacing: .1em; width: 100%; }
}
@media (max-width: 900px) { .vit-card { align-content: start !important; align-items: start !important; } .vit-card__acoes { margin-top: auto; } .vit-card__texto { height: 100%; align-content: start; } }
/* celular: cartões com a mesma estrutura — foto, textos e botões sempre na mesma altura e largura */
@media (max-width: 900px) {
  .vit-card { display: flex !important; flex-direction: column; align-items: stretch !important; }
  .vit-card__foto { align-self: center; }
  .vit-card__texto { display: flex !important; flex-direction: column; align-items: center; flex: 1; width: 100%; }
  .vit-card__modelo { min-height: 2.3em; display: flex; align-items: center; justify-content: center; }
  .vit-card__chapeu { min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
  .vit-card__acoes { margin-top: auto !important; padding-top: .5rem; width: 100%; align-self: stretch; }
}
@media (max-width: 900px) { .vit-card__chapeu { min-height: 2.9em; line-height: 1.35; } }

/* ---------- 08/11: sem degradê entre seções; cada uma separada só pela linha, com respiro maior ---------- */
.faixa-oficina__video { -webkit-mask: none !important; mask: none !important; }
.faixa-oficina::after { display: none !important; }
.faixa-oficina { margin-top: clamp(3.5rem, 7vw, 6rem); background: #efe8dc !important; }
.faixa-oficina::before { background: linear-gradient(90deg, rgba(239, 232, 220, .92) 0%, rgba(239, 232, 220, .75) 30%, rgba(239, 232, 220, 0) 58%) !important; }
@media (max-width: 860px) { .faixa-oficina::before { display: block !important; background: linear-gradient(180deg, transparent 40%, #efe8dc 62%) !important; } .faixa-oficina { margin-top: 2.5rem; } }
.separador { margin: clamp(3.5rem, 7vw, 6rem) 0 !important; }
.separador + .resumo-equipe { padding-top: 0 !important; }
/* respiro feito com padding na cor da própria seção (a margem mostrava o fundo da página, de outro tom) */
.faixa-oficina { margin-top: 0 !important; }
.resumo-acervo--desfile > .saida-acervo { padding-bottom: clamp(7rem, 12vw, 10rem) !important; }
.saida-acervo__moldura { bottom: clamp(3.5rem, 7vw, 6rem) !important; }
.divisa { bottom: clamp(3.5rem, 7vw, 6rem) !important; }
.separador, body:has(.separador) .separador { margin: 0 !important; padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 3vw, 2.75rem) !important; height: auto !important; background: #eee7db !important; box-sizing: content-box; min-height: 40px; }
@media (max-width: 860px) { .resumo-acervo--desfile > .saida-acervo { padding-bottom: 6rem !important; } .saida-acervo__moldura, .divisa { bottom: 3rem !important; } }
/* Oficina no celular: vídeo quadrado bem enquadrado no mecanismo e texto abaixo, sem sobrepor */
@media (max-width: 860px) {
  .faixa-oficina::before { display: none !important; }
  .faixa-oficina__video { aspect-ratio: 1 / 1 !important; object-position: 50% 62%; }
  .faixa-oficina__texto { margin-top: 0 !important; padding: 2rem var(--margem) 0 !important; }
}
.separador--oficina, body:has(.separador) .separador--oficina { background: linear-gradient(180deg, var(--marfim) 50%, #efe8dc 50%) !important; padding-top: clamp(2rem, 4vw, 3rem) !important; padding-bottom: clamp(2rem, 4vw, 3rem) !important; }
.separador--oficina + .of-servicos { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }
.of-manifesto { padding-bottom: clamp(2.5rem, 5vw, 4rem) !important; }

/* ---------- Revista: frente e verso sem depender de backface (no iPhone o verso aparecia espelhado) ---------- */
.revista__folha:not(.virando) .revista__face--verso { visibility: hidden; }
.revista__folha.virando .revista__face--frente { animation: face-some 1.3s cubic-bezier(.45, 0, .25, 1) both; }
.revista__folha.virando .revista__face--verso { animation: face-aparece 1.3s cubic-bezier(.45, 0, .25, 1) both; }
.revista__folha.virando.volta .revista__face--frente { animation-name: face-aparece; }
.revista__folha.virando.volta .revista__face--verso { animation-name: face-some; }
@keyframes face-some { 0%, 49.9% { visibility: visible; } 50%, 100% { visibility: hidden; } }
@keyframes face-aparece { 0%, 49.9% { visibility: hidden; } 50%, 100% { visibility: visible; } }

/* ---------- Revista no celular: livro maior e controles numa linha só, compactos ---------- */
@media (max-width: 700px) {
  .revista { margin-inline: calc(-1 * var(--margem) + 8px); }
  .revista__livro { aspect-ratio: 1.15 / 1 !important; height: auto !important; }
  .revista__controles { flex-wrap: nowrap !important; gap: .6rem !important; margin-top: 1.2rem !important; }
  .revista__botao { min-height: 44px !important; min-width: 44px; padding: 0 .9rem !important; font-size: .7rem !important; letter-spacing: .1em !important; }
  .revista__onde { min-width: 0 !important; font-size: .8rem !important; white-space: nowrap; }
}

/* ---------- Abertura editorial (08/11): logo gigante ao fundo, relógio à frente, creme ---------- */
.abertura { background: radial-gradient(ellipse 60% 70% at 50% 55%, #fbf8f2 0%, #f1ebe0 70%, #e9e1d3 100%) !important; color: var(--tinta); min-height: 100vh; min-height: 100svh; place-items: stretch !important; }
.abertura__fixa { display: block !important; position: relative; width: 100%; min-height: 100vh; min-height: 100svh; }
.abertura__video { display: none !important; }
.abertura__conteudo { position: absolute; inset: 0; display: block !important; padding: 0 !important; animation: none !important; }
.abertura__logo { position: absolute; left: 50%; top: clamp(90px, 13vh, 130px); transform: translateX(-50%); width: min(94vw, 1500px) !important; z-index: 1; margin: 0; }
.logo--abertura { filter: none !important; }
.logo--abertura .logo-traco { stroke: var(--tinta) !important; }
.logo--abertura .logo-ponteiros { fill: #a07a3a !important; }
.abertura__lugar { position: absolute; left: var(--margem); top: clamp(80px, 11vh, 110px); z-index: 3; color: #6b6355 !important; text-shadow: none !important; font-size: .74rem !important; letter-spacing: .26em !important; }
.abertura__peca { position: absolute; left: 50%; bottom: -2vh; transform: translateX(-50%); z-index: 2; margin: 0; width: min(46vw, 640px); pointer-events: none; }
.abertura__peca img { width: 100%; height: auto; display: block; filter: drop-shadow(0 40px 40px rgba(60, 45, 20, .28)) drop-shadow(0 8px 12px rgba(60, 45, 20, .18)); transform-origin: 50% 40%; animation: peca-balanca 9s ease-in-out infinite alternate; }
@keyframes peca-balanca { from { transform: rotate(-2.2deg) translateY(0); } to { transform: rotate(2.2deg) translateY(-10px); } }
.abertura__chamada { position: absolute; left: var(--margem); bottom: clamp(3rem, 9vh, 6rem); z-index: 3; max-width: 26rem; display: grid; gap: .9rem; justify-items: start; text-align: left; }
.abertura__desde { font: 500 .72rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #6b6355; display: flex; align-items: center; gap: .8rem; }
.abertura__desde::before { content: ""; width: 34px; height: 1px; background: #a8935f; }
.abertura__slogan { color: var(--tinta) !important; text-shadow: none !important; font-size: clamp(2rem, 3.4vw, 3.1rem) !important; line-height: 1.05 !important; text-align: left; animation: none !important; }
.abertura__slogan em { color: #8a6a35 !important; display: inline !important; }
.abertura__texto { font: 400 1rem/1.6 var(--sans); color: var(--texto); }
.abertura__ficha { position: absolute; right: var(--margem); bottom: clamp(3rem, 9vh, 6rem); z-index: 3; text-align: right; display: grid; gap: .35rem; border-right: 1px solid rgba(168, 147, 95, .6); padding-right: 1rem; }
.abertura__ficha p { font: 400 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #6b6355; }
.abertura__ficha .abertura__ficha-titulo { color: var(--tinta); font-weight: 500; }
.abertura__ficha p:nth-child(2) { font: 400 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--serifa); letter-spacing: 0; text-transform: none; color: var(--tinta); }
.abertura__descer { color: #6b6355 !important; text-shadow: none !important; bottom: 1.2rem !important; z-index: 3; }
.abertura__seta { background: rgba(29, 26, 22, .4) !important; }
.pagina-inicio .topo:not(.rolou) { background: transparent !important; }
.pagina-inicio .topo:not(.rolou) .topo__nav a, .pagina-inicio .topo:not(.rolou) .topo__zap, .pagina-inicio .topo:not(.rolou) .topo__menu { color: var(--tinta) !important; }
.pagina-inicio .topo:not(.rolou) .logo--topo { --traco: var(--tinta) !important; }
html.estatico .abertura__peca img { animation: none; }
@media (max-width: 860px) {
  .abertura__logo { top: 110px; width: 92vw !important; }
  .abertura__lugar { left: 0; right: 0; text-align: center; top: 86px; }
  .abertura__peca { width: 78vw; bottom: auto; top: 22vh; }
  .abertura__chamada { left: var(--margem); right: var(--margem); bottom: 4.5rem; max-width: none; justify-items: center; text-align: center; gap: .7rem; }
  .abertura__slogan { text-align: center; font-size: 1.9rem !important; }
  .abertura__texto { display: none; }
  .abertura__ficha { display: none; }
  .abertura__desde { justify-content: center; }
}
/* ajuste de proporções da abertura editorial */
.abertura__logo { width: min(78vw, 1250px) !important; top: clamp(100px, 14vh, 140px); }
.abertura__lugar { top: clamp(78px, 10vh, 96px); }
.abertura__peca { width: min(34vw, 520px); bottom: -4vh; }
.abertura__chamada { max-width: 22rem; bottom: clamp(2rem, 6vh, 4rem); }
.abertura__slogan { font-size: clamp(1.8rem, 2.6vw, 2.5rem) !important; }
.abertura__descer { display: none !important; }
@media (max-width: 860px) {
  .abertura__lugar { display: none; }
  .abertura__logo { top: 92px; width: 88vw !important; }
  .abertura__peca { width: 62vw; top: auto; bottom: 13.5rem; }
  .abertura__chamada { bottom: 2rem; }
  .abertura__desde { display: none; }
  .abertura__slogan { font-size: 1.65rem !important; }
}
.abertura__chamada { max-width: 25rem; bottom: clamp(1.8rem, 4.5vh, 3rem); gap: .75rem; }
.abertura__desde { white-space: nowrap; }
.abertura__texto { max-width: 21rem; }
.abertura__conteudo { pointer-events: none; }
.abertura__chamada, .abertura__ficha { pointer-events: auto; }
/* abertura no celular: composição em coluna — logo gigante, relógio sobreposto à metade de baixo do logo, slogan logo abaixo; sem logo repetido no topo */
@media (max-width: 860px) {
  .pagina-inicio .topo:not(.rolou) .marca, .pagina-inicio .topo:not(.rolou) .logo--topo { opacity: 0; pointer-events: none; }
  .abertura, .abertura__fixa { min-height: 100vh; min-height: 100svh; }
  .abertura__conteudo { position: relative !important; inset: auto; display: flex !important; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh; padding: 84px 0 2.2rem !important; }
  .abertura__logo { position: relative !important; left: auto; top: auto !important; transform: none !important; width: 94vw !important; flex: none; }
  .abertura__peca { position: relative !important; left: auto !important; top: auto !important; bottom: auto !important; transform: none !important; width: 82vw !important; margin: -21vw 0 -6vw !important; flex: none; z-index: 2; }
  :is(.abertura__fixa, .abertura__cena) > .abertura__peca { display: none; }
  .abertura__chamada { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: auto; padding: 0 var(--margem); width: 100%; box-sizing: border-box; }
  .abertura__slogan { font-size: 1.75rem !important; }
  .abertura__botao { width: 100%; max-width: 20rem; }
}
.abertura__peca--celular { display: none !important; }
@media (max-width: 860px) { .abertura__peca--celular { display: block !important; } }
@media (max-width: 860px) {
  .abertura__peca--celular { width: 70vw !important; margin: -24vw 0 -4vw !important; }
  .abertura__slogan em { display: block !important; }
  .abertura__conteudo { padding-bottom: 1.6rem !important; }
}
/* Cartier Baignoire na abertura: peça menor e oval, um pouco ampliada para ocupar o mesmo espaço */
.abertura__peca img { transform-origin: 50% 50%; scale: 1.18; }
/* escultura/monumento na abertura: o fundo creme da imagem some sobre o creme da página */
.abertura__peca--monumento img { mix-blend-mode: multiply; filter: none !important; scale: 1 !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%); }
.abertura__peca.abertura__peca--monumento { width: min(40vw, 620px) !important; bottom: 0 !important; }
@media (max-width: 860px) { .abertura__peca--celular.abertura__peca--monumento { width: 84vw !important; margin: -14vw 0 -6vw !important; } }
.abertura__peca--monumento img { mix-blend-mode: normal !important; -webkit-mask-image: none !important; mask-image: none !important; filter: drop-shadow(0 24px 30px rgba(60, 45, 20, .18)) !important; }
@media (max-width: 860px) { .abertura__peca--celular.abertura__peca--monumento { width: 72vw !important; margin: -10vw 0 -4vw !important; } }
@media (max-width: 860px) { .abertura__peca--celular.abertura__peca--monumento { width: 64vw !important; margin: -8vw 0 -6vw !important; } }
/* mesmas cores no celular e no computador: logo do topo em tinta sólida (o degradê metálico ficava acinzentado no celular) */
.logo--topo { --traco: var(--tinta) !important; }
.logo--topo .logo-ponteiros { fill: #a07a3a; }
/* cartões da vitrine: a luz fica atrás do relógio também no celular (antes ficava deslocada à esquerda e o cartão parecia de outra cor) */
@media (max-width: 900px) { .vit-card { background: radial-gradient(ellipse 80% 55% at 50% 28%, #ffffff 0%, #f7f2e9 75%) !important; } }
/* computador: logo e escultura limitados também pela ALTURA da tela (em notebook a tela é baixa e tudo ficava grande demais) */
@media (min-width: 861px) {
  .abertura__logo { width: min(64vw, 1100px, 118vh) !important; top: max(84px, 11vh) !important; }
  .abertura__peca.abertura__peca--monumento { width: min(30vw, 520px, 56vh) !important; }
  .abertura__lugar { top: max(72px, 8.5vh) !important; }
  .abertura__chamada { max-width: min(24rem, 27vw); }
  .abertura__slogan { font-size: clamp(1.6rem, min(2.4vw, 4.4vh), 2.5rem) !important; }
  .abertura__texto { font-size: .95rem; }
}

/* ---------- Abertura: escultura parada; ao fundo um mostrador gigante em linhas douradas; à direita, painel com o A e a hora de BH ---------- */
.abertura__peca img { animation: none !important; }
.abertura__mostrador { position: absolute; left: 50%; bottom: -8vh; width: min(62vw, 980px, 108vh); height: auto; transform: translateX(-50%); z-index: 0; color: rgba(168, 134, 74, .5); pointer-events: none; }
.abertura__painel { position: absolute; right: var(--margem); top: 50%; transform: translateY(-36%); z-index: 3; width: min(15rem, 17vw); padding: 2.2rem 1.4rem 1.8rem; text-align: center; display: grid; justify-items: center; gap: .55rem; pointer-events: auto; }
.abertura__painel::before, .abertura__painel::after { content: ""; position: absolute; left: 0; right: 0; height: 46%; border: 3px double rgba(168, 147, 95, .6); pointer-events: none; }
.abertura__painel::before { top: 0; border-bottom: 0; }
.abertura__painel::after { bottom: 0; border-top: 0; }
.abertura__painel-a { width: 26px; height: 34px; color: #a07a3a; }
.abertura__painel-a svg { width: 100%; height: 100%; display: block; }
.abertura__painel-sobre { font: 500 .7rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: #6b6355; }
.abertura__painel-hora { font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--serifa); color: var(--tinta); letter-spacing: .02em; }
.abertura__painel-legenda { font: 400 .78rem/1.3 var(--serifa); font-style: normal; color: #8a6a35; }
@media (max-width: 860px) { .abertura__painel { display: none; } .abertura__mostrador { width: 120vw; bottom: auto; top: 26vh; } }
.abertura__painel::before { inset: 0; height: auto; border: 3px double rgba(168, 147, 95, .6); }
.abertura__painel::after { display: none; }
.abertura__painel { background: rgba(246, 242, 234, .55); }
/* topo da página inicial igual ao das outras páginas: fundo creme e uma linha embaixo, separando do conteúdo */
.pagina-inicio .topo, .pagina-inicio .topo:not(.rolou) { background: rgba(246, 242, 234, .96) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(168, 147, 95, .35) !important; box-shadow: none !important; }
.pagina-inicio .topo:not(.rolou) .marca, .pagina-inicio .topo:not(.rolou) .logo--topo { opacity: 1 !important; pointer-events: auto !important; }
/* o texto de cima da abertura começa abaixo do topo */
@media (min-width: 861px) {
  .abertura__lugar { top: calc(var(--topo-h, 78px) + 1.2rem) !important; }
  .abertura__logo { top: calc(var(--topo-h, 78px) + 3rem) !important; }
}
@media (max-width: 860px) { .pagina-inicio .topo:not(.rolou) .marca { opacity: 0 !important; pointer-events: none !important; } }

/* ---------- Abertura: o Olimpo da Haut (templo com o logo no frontão) ao fundo, Chronos à frente ---------- */
.abertura__painel, .abertura__mostrador { display: none !important; }
.abertura__logo { opacity: 0 !important; pointer-events: none; }   /* o nome agora está no frontão do templo */
.abertura__olimpo { position: absolute; inset: 78px 0 0 0; z-index: 0; background: url(../assets/img/olimpo-haut.webp) center 12% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%); }
.abertura__olimpo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(241, 235, 224, .92) 0%, rgba(241, 235, 224, .55) 22%, rgba(241, 235, 224, 0) 40%); }
.abertura__lugar { display: none !important; }
@media (min-width: 861px) { .abertura__peca.abertura__peca--monumento { width: min(26vw, 440px, 52vh) !important; left: 50% !important; } }
@media (max-width: 860px) {
  .abertura__olimpo { inset: 60px 0 auto 0; height: 46vh; height: 46svh; background-position: center top; background-size: 210% auto; }
  .abertura__olimpo::after { display: none; }
  .abertura__peca--celular.abertura__peca--monumento { width: 58vw !important; margin: 26vh 0 -4vw !important; margin: 26svh 0 -4vw !important; }
}
@media (max-width: 860px) {
  .abertura__olimpo { height: 52vh; height: 52svh; background-size: 230% auto; }
  .abertura__peca--celular.abertura__peca--monumento { width: 50vw !important; margin: 12vh 0 -2vw !important; margin: 12svh 0 -2vw !important; }
  .abertura__conteudo { padding-top: 60px !important; }
}
.abertura__olimpo { pointer-events: none; }

/* ---------- Olimpo: templo inteiro (frontão sem corte) e logo vivo no frontão, com os ponteiros girando ---------- */
.abertura__olimpo { background: none !important; inset: auto !important; top: calc(78px + clamp(.5rem, 2vh, 1.5rem)) !important; left: 50% !important; width: min(100vw, 150vh); aspect-ratio: 1536 / 1024; transform: translateX(-50%); }
.abertura__olimpo img { width: 100%; height: 100%; display: block; }
.olimpo__logo { position: absolute; left: 50%; top: 17.4%; width: 21.5%; height: auto; aspect-ratio: 278 / 92; transform: translate(-50%, -50%); overflow: visible;
  filter: drop-shadow(1.5px 2px 0 rgba(110, 85, 50, .35)) drop-shadow(-1px -1px 0 rgba(255, 250, 235, .6)); }
.olimpo__ponteiros { transform-box: view-box; transform-origin: 98.7px 79.7px; animation: frontao-ponteiros 10s cubic-bezier(.34, 1.2, .5, 1) infinite .8s; }
@keyframes frontao-ponteiros { 0% { transform: rotate(-360deg); } 22%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { .olimpo__ponteiros { animation: none; } }
html.estatico .olimpo__ponteiros { animation: none; }
@media (max-width: 860px) {
  .abertura__olimpo { top: 64px !important; width: 210vw; height: auto !important; }
  .abertura__peca--celular.abertura__peca--monumento { margin-top: 30vw !important; }
}
.abertura__olimpo img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); }
@media (max-width: 860px) { .abertura__olimpo img { -webkit-mask-image: none; mask-image: none; } .abertura__peca--celular.abertura__peca--monumento { margin-top: 24vw !important; width: 46vw !important; } }
.abertura__olimpo::after { display: none !important; }
@media (min-width: 861px) {
  .abertura__fixa::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, #f1ebe0 0%, rgba(241, 235, 224, .9) 20%, rgba(241, 235, 224, 0) 36%); }
}
/* abertura só com a assinatura e o slogan, mais presente */
@media (min-width: 861px) { .abertura__chamada { max-width: min(26rem, 28vw); bottom: clamp(3rem, 12vh, 7rem) !important; } .abertura__slogan { font-size: clamp(2rem, min(3vw, 5.4vh), 3.1rem) !important; } }
@media (max-width: 860px) { .abertura__desde { display: flex !important; justify-content: center !important; } .abertura__chamada { justify-items: center !important; text-align: center !important; } .abertura__slogan { text-align: center !important; } }
.abertura__desde { white-space: normal !important; }
@media (max-width: 860px) { .abertura__desde::before { display: none; } }
/* frontão encostado logo abaixo da linha do menu (sem a faixa clara entre os dois) */
.abertura__olimpo { top: calc(78px + 10px - .016 * min(100vw, 150vh)) !important; }
@media (max-width: 860px) { .abertura__olimpo { top: calc(60px + 8px - 3.4vw) !important; } }
/* continuação do Olimpo pela tela toda: panorama de templos e nuvens atrás do templo principal */
.abertura__panorama { position: absolute; left: 0; right: 0; top: 78px; bottom: 0; z-index: 0; pointer-events: none;
  background: url(../assets/img/olimpo-panorama.webp) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%); }
.abertura__olimpo { z-index: 1 !important; }
.abertura__fixa::before { z-index: 2 !important; }
@media (max-width: 860px) {
  .abertura__panorama { display: none; }
  .abertura__olimpo { width: 150vw !important; top: calc(60px + 14px) !important; }
  .abertura__peca--celular.abertura__peca--monumento { margin-top: 30vw !important; width: 50vw !important; }
}
@media (min-width: 861px) { .abertura__chamada { max-width: min(30rem, 30vw) !important; } }
/* slogan no alto, à esquerda, no espaço livre antes do templo (sem encostar na construção) */
@media (min-width: 861px) {
  .abertura__chamada { --w: min(100vw, 150vh); bottom: auto !important; top: calc(78px + 22vh) !important; max-width: calc((100vw - var(--w)) / 2 + .1 * var(--w) - var(--margem)) !important; min-width: 12rem; }
  .abertura__slogan { font-size: clamp(1.6rem, min(2.2vw, 4.6vh), 2.6rem) !important; line-height: 1.12 !important; }
  .abertura__slogan em { display: block !important; }
  .abertura__desde::before { display: none; }
}
/* templos laterais levemente desfocados e mais suaves, para o foco ficar no templo da Haut */
.abertura__panorama { filter: blur(2px) saturate(.85); opacity: .78; }
@media (min-width: 861px) { .abertura__desde { white-space: nowrap !important; letter-spacing: .16em !important; font-size: .66rem !important; } }
/* slogan maior, ocupando o espaço livre à esquerda (tamanho calculado pela largura disponível e pela altura da tela) */
@media (min-width: 861px) {
  .abertura__chamada { --livre: calc((100vw - var(--w)) / 2 + .11 * var(--w) - var(--margem) - 16px); max-width: var(--livre) !important; top: calc(78px + (100vh - 78px) * .44) !important; top: calc(78px + (100svh - 78px) * .44) !important; transform: translateY(-50%); gap: 1.1rem !important; }
  .abertura__slogan { font-size: min(calc(var(--livre) / 4.7), 9.5vh, 5rem) !important; line-height: 1.04 !important; }
  .abertura__desde { font-size: .74rem !important; }
}
.nowrap { white-space: nowrap; }
@media (min-width: 861px) { .abertura__slogan { font-size: min(calc(var(--livre) / 5.4), 9vh, 4.6rem) !important; } }
/* slogan um passo menor; lado esquerdo do Olimpo visível como o direito (só um halo creme suave atrás do texto) */
@media (min-width: 861px) {
  .abertura__slogan { font-size: min(calc(var(--livre) / 5.75), 8.5vh, 4.3rem) !important; }
  .abertura__fixa::before { display: none !important; }
  .abertura__chamada::before { content: ""; position: absolute; inset: -30% -18% -30% -40%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 45% 50%, rgba(241, 235, 224, .82) 0%, rgba(241, 235, 224, .5) 50%, rgba(241, 235, 224, 0) 75%); }
  .abertura__chamada { isolation: isolate; }
}
/* nenhum desenho atrás do slogan: a área do texto fica em creme liso, e o Olimpo da esquerda aparece só em volta dela */
@media (min-width: 861px) {
  .abertura__chamada::before { inset: -45% -22% -50% -60% !important;
    background: radial-gradient(ellipse 62% 58% at 42% 50%, #f1ebe0 0%, #f1ebe0 58%, rgba(241, 235, 224, .85) 70%, rgba(241, 235, 224, 0) 88%) !important; }
}
/* volta: desenho visível atrás do slogan, só com o halo creme leve */
@media (min-width: 861px) {
  .abertura__chamada::before { inset: -30% -18% -30% -40% !important;
    background: radial-gradient(ellipse 60% 55% at 45% 50%, rgba(241, 235, 224, .82) 0%, rgba(241, 235, 224, .5) 50%, rgba(241, 235, 224, 0) 75%) !important; }
}
/* lado direito do Olimpo com outro cenário (tholos, torre do relógio e musa com ampulheta), também desfocado */
.abertura__panorama { background-image: url(../assets/img/olimpo-panorama-2.webp) !important; }
/* celular: a abertura cresce com o conteúdo (antes tinha altura fixa e cortava o slogan quando a barra do Safari aparecia) */
@media (max-width: 860px) {
  .abertura, .abertura__fixa { height: auto !important; min-height: 0 !important; overflow: visible !important; }
  .abertura__conteudo { min-height: 0 !important; padding-bottom: 2.5rem !important; }
  .abertura { overflow: hidden !important; }
}
/* logo do frontão sem o contorno claro (parecia "apagado"): ouro mais denso e só uma sombra de relevo escura */
.olimpo__logo { filter: drop-shadow(1px 1.5px 0 rgba(90, 66, 34, .45)) drop-shadow(0 0 1px rgba(90, 66, 34, .25)) !important; }
/* estátua sólida até a base (sem transparência na rocha) e assentada no degrau, com sombra de contato */
.abertura__peca--monumento img { -webkit-mask-image: none !important; mask-image: none !important; filter: drop-shadow(0 18px 14px rgba(70, 52, 25, .28)) !important; }
/* direita: arquitetura de Atenas (Torre dos Ventos e Erecteion), longe do templo principal, levemente desfocada */
.abertura__panorama { background-image: url(../assets/img/olimpo-panorama-3.webp) !important; background-size: auto 112% !important; background-position: center 30% !important; }
/* cada lado do Olimpo encostado na sua borda (nada fica atrás do templo principal) */
.abertura__panorama { background: url(../assets/img/olimpo-lado-esq.webp) left 30% / auto 100% no-repeat, url(../assets/img/olimpo-lado-dir.webp) right 30% / auto 100% no-repeat, #f1ebe0 !important; }
/* o templo principal sem os prédios distantes das suas bordas (eles se sobrepunham aos de Atenas) */
.abertura__olimpo img { -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 11.5%, #000 15.5%, #000 84.5%, transparent 88.5%, transparent 100%) !important; mask-image: linear-gradient(90deg, transparent 0%, transparent 11.5%, #000 15.5%, #000 84.5%, transparent 88.5%, transparent 100%) !important; }
@media (max-width: 860px) { .abertura__olimpo img { -webkit-mask-image: none !important; mask-image: none !important; } }
/* carregamento: as camadas da abertura entram juntas, sem uma surgir por cima da outra */
.abertura__panorama, .abertura__olimpo, .abertura__peca { opacity: 0; transition: opacity .9s ease; }
.abertura.olimpo-pronto .abertura__panorama { opacity: .78; }
.abertura.olimpo-pronto .abertura__olimpo, .abertura.olimpo-pronto .abertura__peca { opacity: 1; }
html.estatico .abertura__panorama { opacity: .78; } html.estatico .abertura__olimpo, html.estatico .abertura__peca { opacity: 1; }
/* telhado e frontão inteiros (corte mais aberto no alto); só as laterais das colunas recebem o corte mais justo */
@media (min-width: 861px) {
  .abertura__olimpo img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 7.5%, #000 9.5%, #000 90.5%, transparent 92.5%, transparent 100%), linear-gradient(90deg, transparent 0%, transparent 11.5%, #000 15.5%, #000 84.5%, transparent 88.5%, transparent 100%) !important;
    mask-image: linear-gradient(90deg, transparent 0%, transparent 7.5%, #000 9.5%, #000 90.5%, transparent 92.5%, transparent 100%), linear-gradient(90deg, transparent 0%, transparent 11.5%, #000 15.5%, #000 84.5%, transparent 88.5%, transparent 100%) !important;
    -webkit-mask-size: 100% 44%, 100% 56%; mask-size: 100% 44%, 100% 56%;
    -webkit-mask-position: 0 0, 0 100%; mask-position: 0 0, 0 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
}
/* recorte do templo agora vem na própria imagem (transição suave entre telhado e colunas) */
.abertura__olimpo img { -webkit-mask-image: none !important; mask-image: none !important; }
/* templo, logo e estátua aparecem no mesmo instante (sem esmaecer escalonado) */
.abertura__panorama, .abertura__olimpo, .abertura__peca, .abertura__peca img { transition: none !important; animation: none !important; }

/* ---------- Celular: mesma composição do computador — templo inteiro, Chronos centralizado à frente das colunas ---------- */
@media (max-width: 860px) {
  .abertura__peca--celular { display: none !important; }
  .abertura__olimpo { top: calc(60px + 10px) !important; width: 124vw !important; left: 50% !important; transform: translateX(-50%) !important; }
  :is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento:not(.abertura__peca--celular) {
    display: block !important; position: absolute !important; z-index: 2; left: 50% !important; right: auto !important; bottom: auto !important;
    top: calc(70px + 124vw * 1024 / 1536 * .285) !important; width: 34vw !important; transform: translateX(-50%) !important; margin: 0 !important; }
  .abertura__conteudo { padding-top: calc(70px + 124vw * 1024 / 1536 * .98) !important; }
  .abertura__chamada { margin-top: 0 !important; }
}
@media (max-width: 860px) {
  .abertura__logo { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; }
  :is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento:not(.abertura__peca--celular) { width: 38vw !important; top: calc(70px + 124vw * 1024 / 1536 * .26) !important; }
  .abertura__conteudo { padding-top: calc(70px + 124vw * 1024 / 1536 * 1.0) !important; padding-bottom: 2.2rem !important; }
}
/* logo do topo igual ao do frontão do Olimpo: ouro com leve relevo */
.logo--topo, .pagina-inicio .topo .logo--topo, .pagina-inicio .topo:not(.rolou) .logo--topo { --traco: url(#ouro-logo) !important; filter: drop-shadow(.6px .9px 0 rgba(90, 66, 34, .4)); }
.logo--topo .logo-ponteiros { fill: url(#ouro-logo) !important; }
@media (max-width: 860px) { .abertura__logo { clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
/* celular: o templo começa sempre abaixo da barra do topo, com respiro (o topo não fica "dentro" da abertura) */
@media (max-width: 860px) {
  .abertura__olimpo { top: calc(var(--topo-h, 64px) + 18px) !important; }
  :is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento:not(.abertura__peca--celular) { top: calc(var(--topo-h, 64px) + 18px + 124vw * 1024 / 1536 * .26) !important; }
  .abertura__conteudo { padding-top: calc(var(--topo-h, 64px) + 18px + 124vw * 1024 / 1536 * 1.0) !important; }
}
/* celular: a abertura ocupa a tela inteira (como no computador); o "Explore" só aparece ao descer */
@media (max-width: 860px) {
  .abertura, .abertura__fixa { min-height: 100vh !important; min-height: 100svh !important; }
  .abertura__conteudo { min-height: 100vh !important; min-height: 100svh !important; display: flex !important; flex-direction: column; justify-content: flex-end; box-sizing: border-box; padding-bottom: clamp(2.5rem, 7vh, 4rem) !important; padding-bottom: clamp(2.5rem, 7svh, 4rem) !important; }
}
@media (max-width: 860px) {
  .abertura__conteudo { justify-content: center !important; padding-bottom: 4.5rem !important; }
  .abertura__chamada { margin: auto 0 !important; }
  .abertura__descer { display: inline-flex !important; bottom: 1.1rem !important; color: #6b6355 !important; font-size: .72rem !important; }
}
/* celular: vídeo da Oficina menos ampliado (versão horizontal, mostra o mecanismo inteiro com respiro) */
@media (max-width: 860px) {
  .faixa-oficina__video { aspect-ratio: 4 / 3 !important; object-position: 45% 50% !important; width: calc(100% - 2 * var(--margem)) !important; margin: 0 auto; border-radius: 16px; }
}
/* contador de páginas da revista escondido (continua para leitor de tela) */
.revista__onde { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.revista__controles { justify-content: center; gap: 1rem !important; }
/* revista sem transição de entrada: aparece pronta, no computador e no celular */
.revista, .revista > * { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
/* passos: quebra igual nos três (primeira palavra dourada ainda na 1ª linha) — no celular a quebra é natural */
.passo p { width: auto; }
@media (min-width: 861px) { .passo p { white-space: nowrap; } }
@media (max-width: 860px) { br.so-pc { display: none; } }

/* passos: padrão do site — a parte dourada (depois da vírgula) vai inteira para a linha de baixo */
.passo p { white-space: normal !important; }
.passo p em { display: block; }

/* ponteiros do frontão: o giro começa quando o templo aparece (antes girava escondido durante o carregamento),
   e roda também com "reduzir movimento" (é um movimento pequeno, sem deslocar a tela) */
.olimpo__ponteiros { animation: none !important; }
.abertura.olimpo-pronto .olimpo__ponteiros { animation: frontao-ponteiros 10s cubic-bezier(.34, 1.2, .5, 1) infinite .3s !important; }
html.estatico .abertura .olimpo__ponteiros { animation: none !important; }

/* ---------- Abertura viva ---------- */
.abertura__ceu { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.abertura__olimpo { z-index: 2 !important; translate: 0 var(--py, 0); }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca { z-index: 3 !important; }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento img { translate: 0 var(--py, 0); }
.abertura__conteudo { z-index: 4 !important; }
/* raios de luz dourados atrás do templo, girando muito devagar */
.abertura__raios { position: absolute; left: 50%; top: 18%; width: 150vmax; aspect-ratio: 1; translate: -50% -50%; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from 0deg, rgba(232, 200, 130, .22) 0deg 3deg, rgba(232, 200, 130, 0) 3deg 14deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 25%, transparent 55%); mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 25%, transparent 55%);
  animation: raios-giram 140s linear infinite; }
@keyframes raios-giram { to { rotate: 360deg; } }
/* luz que segue o cursor */
.abertura__luz { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .6s ease; mix-blend-mode: soft-light;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 40%), rgba(255, 236, 190, .55), transparent 60%); }
.abertura__luz.ativa { opacity: 1; }
/* sinal de "desça": uma faixa de luz descendo pela linha */
.abertura__seta { position: relative; overflow: hidden; background: rgba(107, 99, 85, .25) !important; }
.abertura__seta::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(180deg, transparent, #8a6a35, transparent); animation: seta-desce 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes seta-desce { to { top: 100%; } }
@media (min-width: 861px) { .abertura__descer { display: inline-flex !important; color: #6b6355 !important; z-index: 4; } }
html.estatico .abertura__raios, html.estatico .abertura__seta::after { animation: none; }

/* ---------- Oficina na página inicial: vídeo ocupando a tela toda; o "A" logo abaixo, sem vazio ---------- */
@media (min-width: 861px) { .faixa-oficina { min-height: calc(100vh - var(--topo-h, 78px)) !important; min-height: calc(100svh - var(--topo-h, 78px)) !important; } }
.separador, body:has(.separador) .separador { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.75rem) !important; }
/* animação de fundo mais evidente: pó dourado e nuvens à frente do templo, raios mais visíveis e mais rápidos */
.abertura__ceu { z-index: 3 !important; }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca { z-index: 2 !important; }
.abertura__raios { opacity: .9 !important; background: repeating-conic-gradient(from 0deg, rgba(225, 185, 105, .38) 0deg 3.5deg, rgba(225, 185, 105, 0) 3.5deg 12deg) !important; animation-duration: 70s !important; }
/* computador: "Desça para descobrir" à esquerda, embaixo do slogan, longe da estátua */
@media (min-width: 861px) {
  .abertura__descer { left: var(--margem) !important; right: auto !important; transform: none !important; bottom: clamp(1.8rem, 6vh, 3.5rem) !important; flex-direction: row !important; align-items: center !important; gap: 1rem !important; z-index: 5 !important; font-size: .74rem !important; }
  .abertura__descer .abertura__seta { width: 46px !important; height: 1px !important; }
  .abertura__descer .abertura__seta::after { top: 0 !important; bottom: 0; height: auto !important; left: -40%; width: 40%; right: auto; background: linear-gradient(90deg, transparent, #8a6a35, transparent) !important; animation: seta-anda 2.4s cubic-bezier(.6, 0, .4, 1) infinite !important; }
}
@keyframes seta-anda { to { left: 100%; } }
/* sol: sem giro contínuo; salta a cada segundo com um pequeno "tique" (como o ponteiro de segundos) */
.abertura__raios { animation: none !important; transition: rotate .35s cubic-bezier(.34, 1.56, .64, 1); }
/* nuvens/pó atrás da estátua: a estátua fica sempre nítida até a base */
.abertura__ceu { z-index: 3 !important; }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca { z-index: 4 !important; }
.abertura__luz { z-index: 5 !important; }
.abertura__conteudo, .abertura__descer { z-index: 6 !important; }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento img { -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%) !important; mask-image: linear-gradient(180deg, #000 88%, transparent 100%) !important; }
/* sol só no céu, saindo de trás do frontão: some antes de chegar nas colunas, escadas e prédios laterais */
.abertura__raios { -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 18%, transparent 42%) !important; mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 18%, transparent 42%) !important; }
.abertura__fixa::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; pointer-events: none;
  background: none; }
.abertura__raios { top: 14% !important; }
.abertura__raios::after { content: none; }
.abertura__raios { clip-path: inset(0 0 52% 0); }
.abertura__raios { clip-path: none !important; -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 22%, transparent 50%) !important; mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .7) 22%, transparent 50%) !important; }
/* recorte fixo (não gira): o sol aparece só no céu, acima da linha das colunas */
.abertura__sol { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 48%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 48%); }
:is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento img { -webkit-mask-image: none !important; mask-image: none !important; }
/* celular: templo maior, sol saindo de trás do frontão, slogan logo abaixo (menos vazio) */
@media (max-width: 860px) {
  .abertura { --tw: 138vw; }
  .abertura__olimpo { width: var(--tw) !important; }
  :is(.abertura__fixa, .abertura__cena) > .abertura__peca.abertura__peca--monumento:not(.abertura__peca--celular) { width: 42vw !important; top: calc(var(--topo-h, 64px) + 18px + var(--tw) * 1024 / 1536 * .26) !important; }
  .abertura__raios { top: calc(var(--topo-h, 64px) + 18px + var(--tw) * 1024 / 1536 * .13) !important; width: 200vw !important; }
  .abertura__sol { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--topo-h, 64px) + 18px + 138vw * .17), transparent calc(var(--topo-h, 64px) + 18px + 138vw * .34)) !important; mask-image: linear-gradient(180deg, #000 0%, #000 calc(var(--topo-h, 64px) + 18px + 138vw * .17), transparent calc(var(--topo-h, 64px) + 18px + 138vw * .34)) !important; }
  .abertura__conteudo { justify-content: flex-start !important; padding-top: calc(var(--topo-h, 64px) + 18px + var(--tw) * 1024 / 1536 * .98) !important; }
  .abertura__chamada { margin: 0 !important; }
}
@media (max-width: 860px) { .abertura { --tw: 126vw; } }
/* celular: slogan no meio do espaço entre o templo e o "Desça para descobrir" */
@media (max-width: 860px) {
  .abertura__conteudo { justify-content: center !important; padding-bottom: 7.5rem !important; }
  .abertura__chamada { margin: auto 0 !important; }
}
@media (max-width: 860px) { .abertura__conteudo { justify-content: flex-start !important; padding-bottom: 2rem !important; } .abertura__chamada { margin: clamp(2rem, 9vh, 5.5rem) 0 0 !important; margin: clamp(2rem, 9svh, 5.5rem) 0 0 !important; } }
@media (max-width: 860px) and (max-height: 600px) { .abertura__chamada { margin-top: 1.2rem !important; } }
@media (max-width: 860px) and (min-height: 601px) and (max-height: 700px) { .abertura__chamada { margin-top: 2.6rem !important; } }
/* celular: mapa um pouco menor e deslocado, para o círculo tracejado e o ponteiro caberem inteiros na tela */
@media (max-width: 860px) { .mapa { width: 84% !important; margin: 0 16% 6% 0 !important; display: block; } .mapa-moldura { overflow: visible !important; } }

/* ---------- Mergulho no relógio (abertura presa enquanto a câmera entra no mostrador) ---------- */
html.com-mergulho .abertura-palco { position: relative; height: 270vh; height: 270svh; }
html.com-mergulho .abertura-palco > .abertura { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0 !important; overflow: hidden; }
html.com-mergulho .abertura-palco > .abertura .abertura__fixa { min-height: 0 !important; height: 100%; }
.abertura__cena { position: absolute; inset: 0; z-index: 1; }
.abertura__cena > .abertura__panorama { z-index: 0; }
.abertura__cena > .abertura__sol { z-index: 1; }
.abertura__cena > .abertura__olimpo { z-index: 2 !important; }
.abertura__cena > .abertura__ceu { z-index: 3 !important; }
.abertura__cena > .abertura__peca { z-index: 4 !important; }
.relogio-vetor { position: absolute; z-index: 5; opacity: 0; pointer-events: none; overflow: visible; shape-rendering: geometricPrecision; text-rendering: geometricPrecision; }
.relogio-vetor .rv-hora, .relogio-vetor .rv-min, .relogio-vetor .rv-seg { transform-box: view-box; transform-origin: 0 0; }
.abertura__portal { position: absolute; inset: 0; z-index: 20; pointer-events: none; opacity: 0; background: #f8f3ea; clip-path: circle(0% at 50% 50%); }
html.com-mergulho :is(.abertura__fixa, .abertura__cena) > .abertura__peca { position: absolute; }
.abertura__portal { background: #f1ebe0; overflow: hidden; }
.abertura__portal::before { content: ""; position: absolute; inset: 0; background: url(../assets/img/olimpo-panorama-3.webp) center 40% / cover no-repeat; transform: scale(var(--pz, 1.35)); }
.abertura__portal::after { content: ""; position: absolute; inset: 0; background: #f8f3ea; opacity: var(--fim, 0); }
/* o centro do relógio se abre direto no creme do site (sem a paisagem do Olimpo de novo) */
.abertura__portal::before { display: none !important; }
.abertura__portal { background: #f8f3ea !important; }
/* o centro do relógio se abre e revela a seção "Explore a Casa Haut", que já está logo atrás da abertura */
html.com-mergulho .abertura-palco { z-index: 2; }
html.com-mergulho .abertura-palco + .explore { margin-top: -100vh; margin-top: -100svh; position: relative; z-index: 1; }
html.com-mergulho .abertura.furado { -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + 1px)); mask-image: radial-gradient(circle at 50% 50%, transparent var(--furo), #000 calc(var(--furo) + 1px)); }
.relogio-vetor .rv-a { transform-box: view-box; }
/* rosto, cabelo, braço e mãos do Chronos ficam na frente do relógio durante o mergulho */
.abertura__cena > .abertura__frente { z-index: 6 !important; pointer-events: none; }
.abertura__frente.frente-a img { clip-path: polygon(0% 0%, 30% 0%, 37% 4%, 41% 8%, 40% 11%, 34% 12.5%, 31% 15%, 29.5% 19%, 29% 22.5%, 31% 23.5%, 34% 21.5%, 38% 21.8%, 42% 24%, 45% 27%, 47.5% 30.5%, 50% 33.5%, 53.5% 36.5%, 57% 39.5%, 62% 41.5%, 62% 100%, 0% 100%); }
.abertura__frente.frente-b img { clip-path: polygon(77% 33%, 81% 30.5%, 85% 31%, 86% 35%, 84% 41%, 80% 46%, 75% 47%, 76.5% 40%); }
/* relógio desenhado na mesma diagonal do relógio da estátua */
.relogio-vetor { transform: rotate(-4.5deg); transform-origin: 50% 50%; }

/* recorte fino (contorno traçado) da cabeça, braço e mão do Chronos */
.abertura__frente.frente-a img { clip-path: polygon(0% 0%, 22% 0%, 22% 12%, 26% 10.5%, 28% 9%, 30% 8%, 33% 7%, 36% 6.6%, 38% 7%, 39.5% 7.6%, 40.2% 8.4%, 38% 9.3%, 35% 10%, 33% 11%, 31.2% 12.5%, 30% 14%, 29.6% 17%, 29.6% 20%, 29.4% 22%, 30.5% 23.6%, 31.5% 24.3%, 33% 23.3%, 35% 23%, 37% 23.3%, 38.5% 24%, 39.6% 25%, 41% 26.2%, 41.6% 26.8%, 41.2% 27.6%, 42.2% 28.5%, 43.6% 29.6%, 45% 31%, 46.5% 33%, 47.6% 34.6%, 48.6% 36%, 50% 37.4%, 52% 38.4%, 55% 39.6%, 58% 40.6%, 62% 41.2%, 62% 100%, 0% 100%) !important; }
.abertura__frente.frente-b img { clip-path: polygon(76.3% 32.6%, 77.5% 31.6%, 80% 31.8%, 81.6% 33.6%, 81.2% 38%, 79.6% 42%, 76% 50%, 64% 52%, 66% 46%, 70% 43%, 73.8% 39.2%, 75.3% 35.7%) !important; }
/* volume: o relógio projeta sombra sobre o fundo e o rosto/mãos projetam sombra sobre o relógio */
.relogio-vetor { filter: drop-shadow(10px 18px 22px rgba(40, 24, 8, .45)); }
.abertura__cena > .abertura__frente img { filter: drop-shadow(-6px 10px 14px rgba(30, 18, 6, .5)) !important; }

/* ---------- Mergulho em fotos (substitui o relógio desenhado e as camadas recortadas) ---------- */
.relogio-vetor, .abertura__frente { display: none !important; }
.mergulho-b { position: absolute; z-index: 7; opacity: 0; pointer-events: none; }
.mergulho-b > img, .mergulho-c > img { width: 100%; height: 100%; display: block; }
.mergulho-c { position: absolute; opacity: 0; }
/* altura real da tela no iPhone (barra recolhida): a página de baixo não aparece embaixo do relógio */
html.com-mergulho .abertura-palco > .abertura { height: 100vh; height: 100lvh; }
html.com-mergulho .abertura-palco { height: 270vh; height: 270lvh; }
html.com-mergulho .abertura-palco + .explore { margin-top: -100vh; margin-top: -100lvh; }
.abertura__fixa > .mergulho-b, .abertura__fixa > .mergulho-c { position: absolute; z-index: 3; pointer-events: none; }
.abertura__fixa > .mergulho-c { z-index: 4; }
.abertura__fixa > .mergulho-b ~ .abertura__conteudo { z-index: 6 !important; }
/* celular: a abertura presa ocupa a tela inteira do iPhone (a regra antiga "height:auto" do celular vencia) */
html.com-mergulho .abertura-palco > .abertura, html.com-mergulho .abertura-palco > .abertura .abertura__fixa { height: 100vh !important; height: 100lvh !important; min-height: 0 !important; }
html.com-mergulho .abertura-palco + .explore { margin-top: -100vh !important; margin-top: -100lvh !important; }

/* o furo nasce exatamente na bola dourada do eixo dos ponteiros */
html.com-mergulho .abertura.furado { -webkit-mask-image: radial-gradient(var(--furo) var(--furo) at var(--fx, 50%) var(--fy, 50%), transparent 99%, #000 100%) !important; mask-image: radial-gradient(var(--furo) var(--furo) at var(--fx, 50%) var(--fy, 50%), transparent 99%, #000 100%) !important; }
/* durante o mergulho: sem filtros pesados (sombras) e sem pó/nuvens, para rodar liso no celular */
.abertura.mergulhando img, .abertura.mergulhando .abertura__olimpo, .abertura.mergulhando .abertura__peca { filter: none !important; }
.abertura.mergulhando .abertura__ceu { display: none; }
.abertura__cena, .mergulho-b, .mergulho-c { contain: layout paint; }
.abertura__fixa > .mergulho-b, .abertura__fixa > .mergulho-c { transform-origin: 0 0; will-change: transform; backface-visibility: hidden; }
/* celular: abertura normal (sem trilho de rolagem); durante o mergulho ela vira camada fixa por cima do site */
html.mergulho-auto .abertura-palco { height: auto !important; }
html.mergulho-auto .abertura-palco > .abertura { position: relative !important; }
html.mergulho-auto .abertura-palco + .explore { margin-top: 0 !important; }
html.mergulho-auto .abertura.tocando { position: fixed !important; inset: 0; z-index: 60; }
html.mergulho-auto .abertura { touch-action: pan-x; }
/* iPhone: no topo, o gesto sobre a abertura não rola a página (quem decide é o mergulho); durante o mergulho nada rola */
html.mergulho-auto .abertura { touch-action: pan-y; }
html.mergulho-auto.no-topo .abertura, html.travado, html.travado body { touch-action: none !important; }
html.travado, html.travado body { overflow: hidden !important; overscroll-behavior: none; }
html.mergulho-auto .abertura-palco.recolhida { display: none !important; }
html.mergulho-auto.no-topo, html.mergulho-auto.no-topo body { overscroll-behavior-y: none; }
.abertura__fixa > .mergulho-maos { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transform-origin: 0 0; overflow: visible; will-change: transform; filter: drop-shadow(6px 10px 8px rgba(20, 12, 4, .45)); }

.abertura.mergulhando .mergulho-maos { filter: drop-shadow(6px 10px 8px rgba(20, 12, 4, .45)) !important; }
/* depois do mergulho, o Explore começa abaixo do menu fixo (moldura e título inteiros) */
html.mergulho-auto .abertura-palco.recolhida + .explore { margin-top: var(--topo-h, 78px) !important; }

/* sem ponteiros desenhados: as fotos voltam a ter os ponteiros originais */
.mergulho-maos { display: none !important; }

/* Abertura: botão para o acervo (a Haut vende relógios: deixar isso claro na primeira tela) */
.abertura__ver { pointer-events: auto; margin-top: .5rem; white-space: nowrap; }
@media (max-width: 860px) { .abertura__ver { margin-top: .2rem; } }
.abertura__desde, .abertura__slogan { text-shadow: 0 0 14px rgba(246, 242, 234, .95), 0 0 28px rgba(246, 242, 234, .8) !important; }
@media (max-width: 860px) {
  .abertura__chamada { bottom: 2.7rem !important; }
  .abertura__ver { padding-inline: 1.6rem; }
}
.abertura__conteudo.sumido .abertura__ver, .abertura__conteudo.sumido .abertura__chamada { pointer-events: none !important; }
/* Mapa do Brasil: entra de cima para baixo (de baixo para cima parecia defeito) */
.giro.mapa-moldura > * { clip-path: inset(-40% -40% 100% -40%) !important; transition: clip-path 1.4s cubic-bezier(.65, 0, .25, 1) !important; }
.giro.mapa-moldura.visivel > * { clip-path: inset(-40% -40% -40% -40%) !important; }
html.estatico .giro.mapa-moldura > * { clip-path: none !important; }
/* pó dourado atrás do templo; raios com borda suave (a borda dura parecia riscada) */
.abertura__po { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1 !important; }
.abertura__cena > .abertura__po { z-index: 1 !important; }
.abertura.mergulhando .abertura__po { display: none; }
.abertura__raios { background: repeating-conic-gradient(from 0deg, rgba(225, 185, 105, 0) 0deg, rgba(225, 185, 105, .34) 1.9deg, rgba(225, 185, 105, 0) 3.8deg, rgba(225, 185, 105, 0) 12deg) !important; }

/* ---------- Ficha do acervo no padrão das páginas de modelo (10/11/2026) ----------
   Rolex: relógio grande, centrado, fundo claro e suave, sombra de chão.  Patek: miniaturas dos ângulos ao lado da foto.
   AP: números grandes (diâmetro, reserva, estanqueidade).  As três: sanfona de características técnicas. */
.ficha { width: 100vw !important; max-width: 100vw !important; height: 100dvh; max-height: 100dvh !important; margin: 0; inset: 0; box-shadow: none !important; background: #f4efe6 !important; }
.ficha[open] { animation: ficha-abre .55s var(--curva); }
@keyframes ficha-abre { from { opacity: 0; } to { opacity: 1; } }
.ficha__caixa { height: 100%; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important; }
.ficha__foto { position: relative; display: grid !important; grid-template-columns: 92px minmax(0, 1fr); place-items: stretch !important; padding: clamp(1.5rem, 3vw, 3rem) !important; gap: 1.5rem; min-height: 0;
  background: radial-gradient(ellipse 60% 55% at 55% 46%, #fffdf8 0%, #f3ede2 55%, #e9e1d3 100%) !important; }
.ficha__palco { grid-column: 2; grid-row: 1; position: relative; display: grid; place-items: center; min-height: 0; }
.ficha__palco::after { content: ""; position: absolute; left: 50%; bottom: 7%; width: 46%; height: 5%; translate: -50% 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(60, 48, 30, .22), transparent); }
.ficha__principal { max-width: 100% !important; width: auto !important; max-height: min(78vh, 820px); height: auto; object-fit: contain; transition: opacity .18s ease, transform .35s var(--curva) !important; -webkit-mask: none !important; mask: none !important; }
.ficha__principal[data-tipo="foto"] { width: min(70vh, 100%) !important; max-height: 70vh; aspect-ratio: 1; object-fit: cover; border-radius: 3px; box-shadow: 0 30px 60px -30px rgba(40, 30, 15, .45); }
.ficha__palco:has(.ficha__principal[data-tipo="foto"])::after { display: none; }
.ficha__principal.trocando { opacity: 0; }
.ficha__vistas { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; justify-content: center; gap: .7rem; min-height: 0; overflow: auto; scrollbar-width: none; }
.ficha__vista { flex: none; width: 76px; height: 76px; padding: 0; border: 1.5px solid transparent; border-radius: 4px; background: rgba(255, 253, 248, .75); cursor: pointer; overflow: hidden; transition: border-color .2s, background .2s; }
.ficha__vista img { width: 100% !important; max-width: none !important; height: 100%; object-fit: contain; padding: 6px; transform: none !important; transition: none !important; -webkit-mask: none !important; mask: none !important; }
.ficha__vista[data-tipo="foto"] img { object-fit: cover; padding: 0; }
.ficha__vista:hover { background: #fffdf8; }
.ficha__vista[aria-pressed="true"] { border-color: #a8884a; background: #fffdf8; }
.ficha__vista:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.ficha__foto.ampliada .ficha__vistas img { transform: none !important; }
.ficha__texto { align-content: center !important; padding: clamp(2rem, 4vw, 4.5rem) clamp(1.75rem, 4vw, 4.5rem) !important; gap: 1.1rem !important; background: #f8f4ec; overflow: auto; }
.ficha__modelo { font-size: clamp(2.2rem, 3.4vw, 3.4rem) !important; line-height: 1.05 !important; }
.ficha__modelo em { display: block; font-style: normal; color: #8a6a35; }
.ficha__numeros { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0 .2rem; }
.ficha__numeros div { background: #efe8db; padding: .9rem 1rem .8rem; border-radius: 3px; }
.ficha__numeros dt { font: 500 .68rem/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #6b5a3a; }
.ficha__numeros dd { margin: .35rem 0 0; font: 400 clamp(1.5rem, 2vw, 1.9rem)/1 var(--serifa); color: var(--tinta); white-space: nowrap; }
.ficha__tecnica { display: grid; gap: .35rem; margin-top: .8rem; }
.ficha__tecnica-titulo { font: 500 .78rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--taupe); margin-bottom: .4rem; }
.ficha__tecnica details { background: #efe8db; border-radius: 3px; }
.ficha__tecnica summary { list-style: none; cursor: pointer; padding: .85rem 1rem; display: flex; justify-content: space-between; align-items: center; font: 500 .98rem/1.2 var(--sans); color: var(--tinta); min-height: 48px; }
.ficha__tecnica summary::-webkit-details-marker { display: none; }
.ficha__tecnica summary::after { content: "+"; font: 300 1.4rem/1 var(--sans); color: #8a6a35; transition: rotate .25s var(--curva); }
.ficha__tecnica details[open] summary::after { rotate: 45deg; }
.ficha__tecnica details p { padding: 0 1rem 1rem; font: 400 1rem/1.6 var(--sans); color: var(--texto); }
.ficha__fechar { position: fixed !important; top: 1rem !important; right: 1rem !important; background: rgba(255, 253, 248, .9) !important; box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .25); }
.ficha__fechar:hover { background: var(--tinta) !important; }
@media (max-width: 860px) {
  .ficha__caixa { grid-template-columns: 1fr !important; height: auto; min-height: 100%; }
  .ficha { overflow-y: auto; }
  .ficha__foto { grid-template-columns: 1fr; grid-template-rows: auto auto; padding: 4.2rem 1rem 1rem !important; gap: 1rem; }
  .ficha__palco { grid-column: 1; grid-row: 1; height: min(56vh, 105vw); height: min(56svh, 105vw); }
  .ficha__principal { max-height: 100% !important; max-width: 92% !important; }
  .ficha__principal[data-tipo="foto"] { width: min(100%, 52vh) !important; width: min(100%, 52svh) !important; max-height: none; }
  .ficha__vistas { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: flex-start; overflow-x: auto; padding-bottom: 2px; }
  .ficha__vista { width: 64px; height: 64px; }
  .ficha__texto { padding: 1.75rem var(--margem) 2.5rem !important; }
  .ficha__numeros dd { font-size: 1.35rem; }
}
.ficha__texto { align-content: start !important; padding-top: clamp(4.5rem, 9vh, 6rem) !important; }
.ficha__palco::after { display: none; }
.ficha__principal[data-tipo="recorte"] { filter: drop-shadow(0 26px 30px rgba(60, 46, 25, .16)); }
.ficha__foto { background: radial-gradient(ellipse 75% 70% at 55% 46%, #f8f3ea 0%, #f1ebe0 60%, #e9e1d3 100%) !important; }
.ficha__fechar:focus:not(:focus-visible) { outline: none; box-shadow: 0 4px 16px -6px rgba(0, 0, 0, .25); }
.ficha__foto { background: radial-gradient(ellipse 95% 90% at 50% 50%, #f1ebe0 0%, #f1ebe0 60%, #e7dfd0 100%) !important; }