/* #1361 Ótica e Joalheria Alexandria — tese "Cor de lente".
   Tokens em tokens.css (cópia de id/cores/tokens.css). Movimento só com transform e opacity. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-latin-opsz-wght.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-wght.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 var(--t-texto)/1.55 var(--f-texto);
  overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--f-titulo); font-weight: 400; font-optical-sizing: auto; line-height: 1; letter-spacing: -.015em; text-wrap: balance; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.1; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 3px; }  /* 5,95:1 no papel; 5,16:1 no papel-2 */
.oculos :focus-visible, .contato :focus-visible, .rodape :focus-visible { outline-color: var(--ouro-claro); }  /* 5,95:1 no verde; 10,6:1 na noite */
.zap:focus-visible { outline-color: var(--ouro-claro); outline-offset: -5px; }  /* por dentro do botão escuro, que flutua sobre qualquer fundo */
figcaption { font-size: var(--t-legenda); margin-top: var(--e-1); opacity: .85; }

/* grão: 3% sobre tudo */
body::before { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03;
  background-image: 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }

.pular { position: absolute; left: var(--e-2); top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--tinta); color: var(--papel); }
.pular:focus { top: var(--e-2); }

.olho { font-size: var(--t-legenda); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ouro-texto); }
.lead { font-size: var(--t-lead); max-width: 34ch; }

/* botões e elos */
.botao { display: inline-flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: 0 1.5rem; border-radius: var(--raio);
  background: var(--tinta); color: var(--papel); font-weight: 600; text-decoration: none; border: 1px solid transparent;
  transition: background-color var(--d-curta) ease, color var(--d-curta) ease, transform var(--d-curta) ease; }
.botao:hover { background: var(--ouro-texto); }
.botao:active { transform: scale(.98); }
.botao__seta { transition: transform var(--d-curta) var(--curva); }
.botao:hover .botao__seta { transform: translateX(5px); }
.botao--claro { background: var(--papel); color: var(--tinta); }
.botao--claro:hover { background: var(--ouro-claro); }
.botao--fino { min-height: 2.75rem; padding: 0 1.125rem; background: transparent; color: var(--tinta); border-color: var(--tinta); }
.botao--fino:hover { background: var(--tinta); color: var(--papel); }

.elo { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 600; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - .55rem) / 100% 1px no-repeat;
  transition: background-size var(--d-curta) ease; }
.elo span { transition: transform var(--d-curta) var(--curva); }
.elo:hover { background-size: 0 1px; background-position: 100% calc(100% - .55rem); }
.elo:hover span { transform: translateX(5px); }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--papel) 90%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--tinta) 10%, transparent); }
.topo__in { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3);
  max-width: var(--largura); margin-inline: auto; padding: .5rem var(--margem); min-height: 4rem; }
.topo__logo { display: inline-flex; align-items: center; min-height: 2.75rem; }
.topo__logo img { width: 115px; height: auto; }
.topo__nav { display: none; gap: var(--e-1); }
.topo__nav a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; text-decoration: none; font-weight: 500;
  background: linear-gradient(var(--ouro), var(--ouro)) 50% calc(100% - .5rem) / 0 1px no-repeat; transition: background-size var(--d-curta) ease; }
.topo__nav a:hover { background-size: calc(100% - 1.5rem) 1px; }

/* hero: a foto e a lâmina de cor */
.hero { display: flex; flex-direction: column; }
.hero__foto { order: -1; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 3; background: var(--noite); }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__texto { padding: var(--e-4) var(--margem) var(--e-8); display: grid; gap: var(--e-3); justify-items: start; }
.hero h1 { font-size: var(--t-hero); max-width: 11ch; }
.hero__sub { font-size: var(--t-lead); max-width: 40ch; color: var(--tinta-2); }

.lamina { position: absolute; top: 0; bottom: 0; left: 6%; width: 34%; }
.tom { position: absolute; inset: 0; opacity: 0; }
.tom--ambar { opacity: 1; background: linear-gradient(to bottom, rgb(200 146 46 / .5), rgb(200 146 46 / .32)); }
.tom--verde { background: linear-gradient(to bottom, var(--lamina-verde), color-mix(in srgb, var(--lamina-verde) 70%, #fff)); }
.tom--fume { background: linear-gradient(to bottom, var(--lamina-fume), color-mix(in srgb, var(--lamina-fume) 70%, #fff)); }

@keyframes lamina-passa { from { transform: translateX(176%); } to { transform: none; } }
@keyframes lamina-anda { to { transform: translateX(176%); } }
@keyframes tom-ambar { 0%, 30% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes tom-verde { 0%, 30% { opacity: 0; } 40%, 63% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes tom-fume { 0%, 63% { opacity: 0; } 73%, 100% { opacity: 1; } }
@keyframes sobe { from { opacity: 0; transform: translateY(18px); } }
@keyframes revela { from { opacity: 0; transform: translateY(28px); } }
@keyframes assenta { from { transform: scale(1.14); } }
@keyframes trinta-sobe { from { transform: translateY(18%); } }
@keyframes trinta-lamina { from { transform: translateX(-110%); } to { transform: translateX(260%); } }
@keyframes nome-1 { from { transform: translate(-.22em, 0); } }
@keyframes nome-2 { from { transform: translate(.22em, 0); } }
@keyframes nome-3 { from { transform: translate(0, .2em); } }

/* 30 minutos: o momento tipográfico */
.trinta { display: grid; gap: var(--e-4); padding: clamp(4rem, 9vw, 8rem) var(--margem); max-width: var(--largura); margin-inline: auto; }
.trinta__num { position: relative; isolation: isolate; overflow: hidden; justify-self: start; font-family: var(--f-titulo);
  font-size: clamp(11rem, 38vw, 34rem); line-height: .8; letter-spacing: -.04em; padding: 0 .05em .04em; }
.trinta__num span { display: block; }
.trinta__lamina { position: absolute; top: 0; bottom: 0; left: 0; width: 28%; background: linear-gradient(to bottom, var(--lamina-ambar), color-mix(in srgb, var(--lamina-ambar) 55%, #fff)); mix-blend-mode: multiply; transform: translateX(118%); }
.trinta__lado { display: grid; gap: var(--e-6); align-content: center; }
.trinta__texto { display: grid; gap: var(--e-2); }
.trinta__texto h2, .trinta__teste h3 { font-size: clamp(1.875rem, 3.6vw, 3.25rem); line-height: 1.05; max-width: 16ch; }
.trinta__texto p:last-child { color: var(--tinta-2); max-width: 36ch; }
.trinta__teste { display: grid; gap: var(--e-2); justify-items: start; padding-top: var(--e-4); border-top: 1px solid var(--linha); }
.trinta__teste p { color: var(--tinta-2); max-width: 34ch; }

/* óculos: fundo verde de lente */
.oculos { background: var(--verde-lente); color: var(--papel); }
.oculos > * { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.oculos__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-3); padding-top: clamp(4rem, 9vw, 8rem); }
.oculos__cabeca h2 { font-size: clamp(4.5rem, 15vw, 14rem); line-height: .86; letter-spacing: -.03em; }
.oculos__cabeca .lead { color: var(--areia); padding-bottom: .6em; }
.lista { display: grid; margin-top: var(--e-6); }
.lista li { display: grid; gap: var(--e-1); justify-items: start; align-content: start; padding-block: var(--e-3); border-top: 1px solid var(--linha); }
.lista p { color: var(--areia); max-width: 30ch; }
.lista--clara p { color: var(--tinta-2); }
.oculos__par { display: grid; gap: var(--e-4); margin-top: var(--e-6); }
.oculos__foto { overflow: hidden; max-width: 569px; }
.oculos__foto img { width: 100%; }
.oculos__foto figcaption { color: var(--areia); }
.oculos__ajuda { display: grid; gap: var(--e-3); justify-items: start; align-content: end; }
.oculos__frase { font-family: var(--f-titulo); font-size: clamp(1.875rem, 4.2vw, 3.75rem); line-height: 1.04; letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.oculos { padding-bottom: clamp(4rem, 9vw, 8rem); }

/* de perto: galeria horizontal (deslize nativo; fixada no desktop pelo site.js) */
.galeria { padding-block: clamp(4rem, 9vw, 8rem); }
.galeria__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-2) var(--e-6);
  padding-inline: var(--margem); margin-bottom: var(--e-4); }
.galeria__cabeca p { color: var(--tinta-2); max-width: 36ch; }
.galeria__trilho { display: flex; align-items: center; gap: clamp(1.25rem, 4vw, 4.5rem); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: var(--e-1) var(--margem) var(--e-3); scrollbar-width: thin; }
.peca { flex: none; scroll-snap-align: center; }
.peca__img { position: relative; overflow: hidden; background: var(--papel-2); }
.peca__img img { width: 100%; }
.peca__img::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--tom, transparent); opacity: calc(var(--d, 0) * .5); }
.peca[data-tom="ambar"] { --tom: var(--lamina-ambar); }
.peca[data-tom="verde"] { --tom: var(--lamina-verde); }
.peca[data-tom="fume"] { --tom: var(--lamina-fume); }
.peca--a { width: 78vw; max-width: 30rem; }
.peca--b { width: 86vw; max-width: 47.5rem; }
.peca--c { width: 70vw; max-width: 22rem; }
.peca--d { width: 62vw; max-width: 19.25rem; }
.peca--e { width: 66vw; max-width: 20rem; }
.peca--frase { width: 78vw; max-width: 24rem; display: grid; gap: var(--e-2); justify-items: start; }
.peca__titulo { font-family: var(--f-titulo); font-size: clamp(1.875rem, 3.2vw, 3rem); line-height: 1.05; letter-spacing: -.015em; }

/* joalheria: o dourado diluído */
.joias { background: var(--papel-2); display: grid; gap: var(--e-6); padding: clamp(4rem, 9vw, 8rem) var(--margem); }
.joias__foto { overflow: hidden; max-width: 28rem; }
.joias__foto img { width: 100%; }
.joias__texto { display: grid; gap: var(--e-3); justify-items: start; align-content: start; }
.joias__texto h2 { max-width: 10ch; }
.joias__texto .lead { color: var(--tinta-2); }
.joias .lista { margin-top: 0; width: 100%; align-content: end; }

/* contato */
.contato { background: var(--noite); color: var(--papel); padding-top: clamp(4rem, 9vw, 8rem); overflow: hidden; }
.contato .olho { color: var(--ouro-claro); }
.contato__cabeca { display: grid; gap: var(--e-2); padding-inline: var(--margem); max-width: var(--largura); margin-inline: auto; }
.contato__cabeca h2 { max-width: 14ch; }
.portas { max-width: var(--largura); margin: var(--e-8) auto 0; padding-inline: var(--margem); }
.portas a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: var(--e-2) var(--e-3); padding-block: var(--e-3);
  border-top: 1px solid var(--linha); text-decoration: none; transition: color var(--d-curta) ease; }
.portas li:last-child a { border-bottom: 1px solid var(--linha); }
.portas__n { font-size: var(--t-legenda); font-weight: 600; letter-spacing: .14em; color: var(--ouro-claro); }
.portas__t { font-family: var(--f-titulo); font-size: clamp(1.5rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
  transition: transform var(--d-media) var(--curva); }
.portas__seta { font-size: clamp(1.25rem, 2.4vw, 2rem); transition: transform var(--d-media) var(--curva); }
.portas a:hover { color: var(--ouro-claro); }
.portas a:hover .portas__t { transform: translateX(.5rem); }
.portas a:hover .portas__seta { transform: translateX(.5rem); }

.nome { position: relative; margin-top: clamp(3rem, 7vw, 6rem); font-family: var(--f-titulo); font-size: var(--t-mega); line-height: .82;
  letter-spacing: -.03em; text-align: center; white-space: nowrap; padding-bottom: .1em; }
.nome__c { display: block; }
.nome__c:not(.nome__c--0) { position: absolute; inset: 0 0 auto; }
.nome__c--0 { position: relative; color: var(--papel); }
.nome__c--1 { color: var(--lamina-ambar); transform: translate(-.028em, 0); }
.nome__c--2 { color: var(--lamina-verde); transform: translate(.028em, 0); }
.nome__c--3 { color: var(--lamina-fume); transform: translate(0, .03em); }

/* rodapé */
.rodape { background: var(--noite); color: var(--areia); }
.rodape__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3) var(--e-6); max-width: var(--largura); margin-inline: auto;
  padding: var(--e-4) var(--margem) 6rem; border-top: 1px solid var(--linha); }
.rodape__in img { width: 115px; }
.rodape strong { color: var(--papel); font-weight: 600; }
.rodape__links { display: flex; flex-wrap: wrap; gap: 0 var(--e-3); margin-left: auto; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; text-underline-offset: .3em; transition: color var(--d-curta) ease; }
.rodape__links a:hover { color: var(--ouro-claro); }

.zap { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.125rem;
  border-radius: 999px; background: var(--noite); color: var(--ouro-claro); border: 1px solid var(--ouro); font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgb(20 17 14 / .28); transition: transform var(--d-curta) var(--curva), background-color var(--d-curta) ease; }
.zap--fora { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--d-curta) ease, transform var(--d-curta) ease, visibility 0s var(--d-curta); }
.zap:hover { transform: translateY(-2px); background: var(--tinta); }
/* no celular o WhatsApp fixo é só o do topo */
@media (max-width: 899.98px) { .zap { display: none; } .rodape__in { padding-bottom: var(--e-4); } }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .topo__nav { display: flex; }
  .topo__in { min-height: 4.5rem; }

  .hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(calc(100svh - 4.5rem), 54rem); }
  .hero__foto { order: 0; aspect-ratio: auto; min-height: 34rem; }
  .hero__foto img { position: absolute; inset: 0; }
  .hero h1 { font-size: clamp(2.75rem, 4.6vw, 4.5rem); }
  .hero__texto { align-content: center; padding: var(--e-8) var(--e-6) var(--e-8) var(--margem); }
  .tom--ambar { background: linear-gradient(to bottom, var(--lamina-ambar), color-mix(in srgb, var(--lamina-ambar) 70%, #fff)); }
  .lamina { mix-blend-mode: multiply; }

  .trinta { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--calha); align-items: center; }
  .trinta__num { grid-column: 1 / span 7; }
  .trinta__lado { grid-column: 8 / span 5; }

  .lista { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--calha); }
  .oculos__par { grid-template-columns: minmax(0, 569px) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); align-items: end; }
  .oculos__ajuda { padding-bottom: 1.75rem; }

  /* tríptico: texto, foto no meio, lista */
  .joias { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); column-gap: clamp(2rem, 4.5vw, 4.5rem); align-items: stretch; }
  .joias__texto h2 { font-size: clamp(2.25rem, 4.4vw, 4.25rem); }
  .joias__foto { max-width: none; }
  .joias .lista { grid-template-columns: 1fr; }

  .peca__img::after { mix-blend-mode: multiply; opacity: calc(var(--d, 0) * .45); }
  .peca--a { width: min(48vh, 28rem); align-self: flex-end; }
  .peca--b { width: min(44rem, 50vw, 78vh); }
  .peca--c { width: min(40vh, 22rem); align-self: flex-start; }
  .peca--d { width: min(40vh, 19.25rem); align-self: flex-end; }
  .peca--e { width: min(42vh, 20rem); }

  /* fixada: o site.js põe a classe e a altura */
  .galeria--fixa { padding-block: 0; }
  .galeria--fixa .galeria__fixo { position: sticky; top: 0; height: 100vh; padding-top: 5.5rem; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
  .galeria--fixa .galeria__trilho { overflow: visible; width: max-content; height: min(62vh, 36rem); padding-inline: 30vw 12vw; scroll-snap-type: none; will-change: transform; }
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__texto > * { animation: sobe var(--d-longa) var(--curva) both; }
  .hero__texto > :nth-child(2) { animation-delay: var(--escalonar); }
  .hero__texto > :nth-child(3) { animation-delay: calc(var(--escalonar) * 2); }
  .hero__texto > :nth-child(4) { animation-delay: calc(var(--escalonar) * 3); }

  @media (max-width: 899.98px) {
    .lamina { animation: lamina-passa 1.7s var(--curva) .35s both; }
  }

  @supports (animation-timeline: view()) {
    @media (min-width: 900px) {
      .lamina { animation: lamina-anda linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
      .tom--ambar { animation: tom-ambar linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
      .tom--verde { animation: tom-verde linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
      .tom--fume { animation: tom-fume linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    }
    .revela { animation: revela linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .lista li:nth-child(2) { animation-range: entry 10% entry 80%; }
    .lista li:nth-child(3) { animation-range: entry 20% entry 90%; }
    .lista li:nth-child(4) { animation-range: entry 30% entry 100%; }
    .trinta__num span { animation: trinta-sobe linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .trinta__lamina { animation: trinta-lamina linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
    .joias__foto img { animation: assenta linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    .nome__c--1 { animation: nome-1 linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .nome__c--2 { animation: nome-2 linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .nome__c--3 { animation: nome-3 linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }

  /* reserva (navegador sem linha do tempo de rolagem): o site.js põe .sem-st e .visto */
  .sem-st .revela { opacity: 0; transform: translateY(28px); transition: opacity var(--d-media) ease, transform var(--d-longa) var(--curva); }
  .sem-st .revela.visto { opacity: 1; transform: none; }
  .sem-st .nome__c { transition: transform var(--d-longa) var(--curva); }
  .sem-st .nome:not(.visto) .nome__c--1 { transform: translate(-.22em, 0); }
  .sem-st .nome:not(.visto) .nome__c--2 { transform: translate(.22em, 0); }
  .sem-st .nome:not(.visto) .nome__c--3 { transform: translate(0, .2em); }
  @media (min-width: 900px) {
    .sem-st .lamina { transform: translateX(calc(var(--p, 0) * 176%)); }
    .sem-st .tom--ambar { opacity: clamp(0, (.4 - var(--p, 0)) * 10, 1); }
    .sem-st .tom--verde { opacity: min(clamp(0, (var(--p, 0) - .3) * 10, 1), clamp(0, (.73 - var(--p, 0)) * 10, 1)); }
    .sem-st .tom--fume { opacity: clamp(0, (var(--p, 0) - .63) * 10, 1); }
  }
}

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