/* Oly Store — site em formato de revista de moda */

@font-face { font-family: "Playfair"; src: url("../fonts/playfair-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Vibes"; src: url("../fonts/great-vibes.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree-var.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --papel: #f4efe8;
  --areia: #e7dccd;
  --tinta: #1b1613;
  --tinta-suave: #5b514a;
  --ouro: #b08d4c;
  --ouro-texto: #86662a;
  --ouro-claro: #d9bd84;
  --vinho: #5a1c29;
  --linha: rgba(27, 22, 19, .16);
  --serifa: "Playfair", Georgia, "Times New Roman", serif;
  --cursiva: "Vibes", "Brush Script MT", cursive;
  --texto: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --margem: clamp(1.25rem, 5vw, 5rem);
  --secao: clamp(4.5rem, 11vw, 10rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 4.5rem; scrollbar-width: thin; scrollbar-color: var(--ouro) var(--papel); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb { background: var(--ouro); border-radius: 10px; border: 2px solid var(--papel); }
body { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--texto); font-size: 1.0625rem; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ouro-texto); outline-offset: 3px; }
::selection { background: var(--ouro-claro); color: var(--tinta); }
html.trava { overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pular { position: absolute; left: 1rem; top: -4rem; z-index: 200; background: var(--tinta); color: var(--papel); padding: .7rem 1rem; }
.pular:focus { top: 1rem; }

h2 { font-family: var(--serifa); font-weight: 700; line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
h2 em { display: block; white-space: nowrap; font-family: var(--cursiva); font-style: normal; font-weight: 400; color: var(--ouro-texto); letter-spacing: 0; line-height: 1.05; font-size: 1.12em; padding-bottom: .08em; }
.rotulo { font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--ouro-texto); }

/* Botões e elos */
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .85rem 1.8rem; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--tinta); transition: background .3s, color .3s, border-color .3s; text-align: center; }
.botao-tinta { background: var(--tinta); color: var(--papel); }
.botao-tinta:hover { background: var(--vinho); border-color: var(--vinho); }
.botao-linha:hover { background: var(--tinta); color: var(--papel); }
.botao-ouro { background: var(--ouro-claro); border-color: var(--ouro-claro); color: var(--tinta); }
.botao-ouro:hover { background: var(--papel); border-color: var(--papel); }
.elo { display: inline-block; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: .9rem 0 .5rem; border-bottom: 1px solid currentColor; transition: color .3s; }
.elo:hover { color: var(--ouro-texto); }

/* Preloader */
.preloader { position: fixed; inset: 0; z-index: 300; background: var(--papel); display: grid; place-items: center; animation: preloader-reserva .4s 6s forwards; }
@keyframes preloader-reserva { to { opacity: 0; visibility: hidden; } } /* saída de reserva se o JavaScript falhar */
.preloader-miolo { text-align: center; width: min(78vw, 22rem); }
.preloader-marca { font-family: var(--cursiva); font-size: clamp(4.5rem, 16vw, 7rem); line-height: 1; color: var(--ouro-texto); }
.preloader-marca span { font-size: .42em; margin-left: -.2em; }
.preloader-trilho { height: 1px; background: var(--linha); margin: 1.6rem 0 1rem; overflow: hidden; }
.preloader-barra { display: block; height: 100%; width: 100%; background: var(--tinta); transform: scaleX(0); transform-origin: left; }
.preloader-legenda { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-suave); }

/* Cabeçalho */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .7rem var(--margem); transition: background .4s, box-shadow .4s, transform .4s; }
.topo.rolou { background: rgba(244, 239, 232, .94); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--linha); }
.topo.some { transform: translateY(-100%); }
.topo-marca { font-family: var(--cursiva); font-size: 2.1rem; line-height: 1; color: var(--ouro-texto); text-decoration: none; padding: .2rem 0; }
.topo-marca span { font-size: .5em; margin-left: -.15em; }
.topo-nav { display: none; gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.topo-nav a, .topo-wa, .topo-menu { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: .9rem 0; }
.topo-nav a { position: relative; }
.topo-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .55rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .35s; }
.topo-nav a:hover::after { transform: scaleX(1); }
.topo-wa { display: none; border: 1px solid var(--tinta); padding: .7rem 1.2rem; transition: background .3s, color .3s; }
.topo-wa:hover { background: var(--tinta); color: var(--papel); }
.topo-menu { min-height: 2.75rem; padding: .6rem 0 .6rem 1rem; }

/* Menu em tela cheia */
.menu { position: fixed; inset: 0; z-index: 90; background: var(--tinta); color: var(--papel); display: flex; flex-direction: column; justify-content: space-between; padding: 6.5rem var(--margem) 2.5rem; }
.menu[hidden] { display: none; }
.menu-nav { display: grid; }
.menu-nav a { display: flex; align-items: baseline; gap: 1rem; font-family: var(--serifa); font-size: clamp(2rem, 9vw, 3rem); line-height: 1.1; text-decoration: none; padding: .7rem 0; border-bottom: 1px solid rgba(244, 239, 232, .16); }
.menu-nav span { font-family: var(--texto); font-size: .75rem; letter-spacing: .2em; color: var(--ouro-claro); }
.menu-aberto .topo { background: transparent; box-shadow: none; backdrop-filter: none; }
.menu-aberto .topo-marca { color: var(--ouro-claro); }
.menu-aberto .topo-menu { color: var(--papel); }

/* Capa */
.capa { position: relative; display: grid; grid-template-columns: 1fr; padding: 5.2rem var(--margem) clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.capa-nome { grid-column: 1; grid-row: 1; justify-self: center; font-family: var(--serifa); font-weight: 700; font-size: 44vw; line-height: .8; letter-spacing: -.02em; color: var(--tinta); white-space: nowrap; user-select: none; }
.capa-foto { grid-column: 1; grid-row: 2; justify-self: center; width: 78%; margin-top: -17vw; position: relative; z-index: 2; aspect-ratio: 3 / 4; overflow: hidden; background: var(--areia); }
.capa-foto img { width: 100%; height: 100%; object-fit: cover; }
.capa-lateral { display: none; }
.capa-texto { grid-column: 1; grid-row: 3; position: relative; z-index: 3; text-align: center; margin-top: 1.8rem; }
.capa-titulo { font-family: var(--serifa); font-weight: 700; font-size: clamp(2rem, 8.4vw, 3.1rem); line-height: 1.02; letter-spacing: -.015em; }
.capa-titulo span { display: block; }
.capa-titulo-2 { font-family: var(--cursiva); font-weight: 400; letter-spacing: 0; color: var(--ouro-texto); font-size: 1.3em; line-height: 1.05; padding-bottom: .1em; }
.capa-sub { margin: .9rem auto 0; max-width: 24rem; color: var(--tinta-suave); text-wrap: balance; }
.capa-acoes { display: grid; gap: .75rem; margin-top: 1.6rem; }
.capa-edicao, .capa-local { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; line-height: 1.9; }
.capa-mini { position: relative; overflow: hidden; }
.capa-mini img { width: 100%; height: 100%; object-fit: cover; }
.capa-mini figcaption { font-family: var(--cursiva); font-size: 1.5rem; color: var(--ouro-texto); margin-top: .35rem; line-height: 1.1; }

/* Faixa */
.faixa { border-block: 1px solid var(--tinta); overflow: hidden; padding: .95rem 0; background: var(--papel); }
.faixa-trilho { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: faixa 38s linear infinite; }
.faixa span { font-family: var(--serifa); font-size: clamp(1.05rem, 2.4vw, 1.5rem); white-space: nowrap; }
.faixa i { width: .5rem; height: .5rem; background: var(--ouro); transform: rotate(45deg); flex: none; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* Carta */
.carta { display: grid; gap: 2.2rem; padding: var(--secao) var(--margem); align-items: center; }
.carta-foto { width: min(70%, 22rem); aspect-ratio: 1; overflow: hidden; justify-self: center; border-radius: 50%; }
.carta-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.carta-texto { max-width: 34rem; }
.carta-titulo { font-size: clamp(2.2rem, 5.6vw, 4.2rem); margin: 1rem 0 1.4rem; }
.carta-texto p + p { margin-top: 1rem; }
.carta-texto .carta-assina { margin-top: 1.8rem; }
.carta-texto > p:not(.rotulo):not(.carta-assina) { color: var(--tinta-suave); }
.carta-assina { font-family: var(--cursiva); font-size: 2rem; line-height: 1.1; color: var(--tinta); }
.carta-assina span { display: block; font-family: var(--texto); font-size: .75rem; letter-spacing: .16em; color: var(--tinta-suave); margin-top: .3rem; }

/* Capítulos (coleções) */
.capitulo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); padding: var(--secao) var(--margem); border-top: 1px solid var(--linha); }
.capitulo-cabeca { grid-column: 1 / -1; position: relative; margin-bottom: 1.2rem; }
.capitulo-num { font-family: var(--serifa); font-size: clamp(5.5rem, 22vw, 15rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px var(--ouro); margin-bottom: 1rem; }
.capitulo-titulo { font-size: clamp(2.6rem, 6.4vw, 5.6rem); margin: .8rem 0 1.2rem; }
.capitulo-texto { max-width: 30rem; color: var(--tinta-suave); margin-bottom: .6rem; }
.capitulo-foto { overflow: hidden; background: var(--areia); }
.capitulo-foto img { width: 100%; height: 100%; object-fit: cover; }
.capitulo-foto.f1 { grid-column: 1 / -1; aspect-ratio: 4 / 5; }
.capitulo-foto.f2, .capitulo-foto.f3 { aspect-ratio: 3 / 4; }
.capitulo-foto.f3 { margin-top: 2.2rem; }
.capitulo-escuro { background: var(--tinta); color: var(--papel); border-top: 0; }
.capitulo-escuro .capitulo-texto { color: rgba(244, 239, 232, .74); }
.capitulo-escuro .rotulo, .capitulo-escuro h2 em { color: var(--ouro-claro); }
.capitulo-escuro .capitulo-foto { background: #2a2320; }
.capitulo-escuro .elo:hover { color: var(--ouro-claro); }

/* Seis cores */
.cores { display: grid; gap: 2.2rem; padding: var(--secao) var(--margem); background: var(--areia); align-items: center; }
.cores-palco { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--papel); width: 100%; max-width: 30rem; justify-self: center; }
.cores-palco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease, transform 1.2s ease; transform: scale(1.04); }
.cores-palco img.ativa { opacity: 1; transform: none; }
.cores-titulo { font-size: clamp(2.5rem, 9vw, 4.6rem); margin: 1rem 0 1.3rem; }
.cores-peca { font-family: var(--serifa); font-size: 1.35rem; margin-bottom: .5rem; }
.cores-texto > p:not(.rotulo):not(.cores-peca):not(.cores-atual) { color: var(--tinta-suave); max-width: 28rem; }
.cores-lista { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.6rem 0 1rem; }
.cor { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid transparent; transition: border-color .3s; }
.cor::before { content: ""; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(27, 22, 19, .22); transition: transform .3s; }
.cor:hover::before { transform: scale(1.08); }
.cor.ativa { border-color: var(--tinta); }
.cores-atual { font-size: .95rem; margin-bottom: 1.6rem; }
.cores-atual span { color: var(--tinta-suave); }

/* Passarela */
.passarela { padding: var(--secao) 0; border-top: 1px solid var(--linha); overflow: hidden; }
.passarela-cabeca { padding: 0 var(--margem); margin-bottom: 2.2rem; display: grid; gap: .8rem; }
.passarela-titulo { font-size: clamp(2.4rem, 9vw, 4.6rem); }
.passarela-dica { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.passarela-janela { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.passarela-janela::-webkit-scrollbar { display: none; }
.passarela-trilho { display: flex; gap: clamp(.9rem, 2vw, 1.6rem); padding: 0 var(--margem); width: max-content; }
.look { width: min(68vw, 19rem); scroll-snap-align: center; flex: none; }
.look figure { aspect-ratio: 3 / 4; overflow: hidden; background: var(--areia); }
.look img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s ease; }
.look:hover img { transform: scale(1.04); }
.look-num { font-family: var(--serifa); font-size: .95rem; color: var(--ouro-texto); margin-top: .9rem; }
.look h3 { font-family: var(--serifa); font-weight: 700; font-size: 1.25rem; line-height: 1.2; margin: .15rem 0 .2rem; min-height: 2.4em; text-wrap: balance; }
.look a { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; padding: .8rem 0 .4rem; border-bottom: 1px solid currentColor; }
.look a:hover { color: var(--ouro-texto); }

/* Acessórios */
.acessorios { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.75rem, 2vw, 1.5rem); padding: var(--secao) var(--margem); border-top: 1px solid var(--linha); }
.acessorios-texto { grid-column: 1 / -1; margin-bottom: 1rem; }
.acessorios-titulo { font-size: clamp(2.1rem, 4.6vw, 4rem); margin: 1rem 0 1.2rem; }
.acessorios-texto > p:not(.rotulo) { color: var(--tinta-suave); max-width: 26rem; }
.acessorios-foto { overflow: hidden; background: var(--areia); }
.acessorios-foto img { width: 100%; height: 100%; object-fit: cover; }
.acessorios-foto.a1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.acessorios-foto.a2, .acessorios-foto.a3 { aspect-ratio: 1; }

/* Como comprar */
.comprar { padding: var(--secao) var(--margem); background: var(--tinta); color: var(--papel); }
.comprar .rotulo, .comprar h2 em { color: var(--ouro-claro); }
.comprar-titulo { font-size: clamp(2.4rem, 9vw, 4.6rem); margin-top: 1rem; }
.comprar-lista { display: grid; gap: 0; margin-top: 2.6rem; border-top: 1px solid rgba(244, 239, 232, .2); }
.comprar-lista li { padding: 1.8rem 0; border-bottom: 1px solid rgba(244, 239, 232, .2); }
.comprar-num { font-family: var(--cursiva); font-size: 2.4rem; line-height: 1; color: var(--ouro-claro); }
.comprar-lista h3 { font-family: var(--serifa); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.15; margin: .4rem 0 .5rem; }
.comprar-lista p { color: rgba(244, 239, 232, .74); max-width: 24rem; }
.comprar-pagamento { margin-top: 2.2rem; font-size: 1rem; line-height: 1.9; text-wrap: balance; }
.comprar-pagamento strong { color: var(--ouro-claro); font-weight: 600; }
.comprar-pagamento i { display: block; height: 0; }

/* Lojas */
.lojas { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); padding: var(--secao) var(--margem); }
.lojas-titulo { font-size: clamp(2.4rem, 9vw, 4.6rem); margin-top: 1rem; }
.loja { display: grid; gap: 1.4rem; }
.loja-foto { overflow: hidden; background: var(--areia); }
.loja-foto img { width: 100%; height: 100%; object-fit: cover; }
.loja-destaque .loja-foto { aspect-ratio: 4 / 5; }
.loja-simples .loja-foto { aspect-ratio: 16 / 10; }
.loja-etiqueta { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--ouro-texto); }
.loja h3 { font-family: var(--serifa); font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.08; margin: .5rem 0 .8rem; }
.loja-estado { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .08em; margin-bottom: 1rem; }
.loja-estado::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #9a9088; }
.loja-estado.aberta::before { background: #3f8f5a; }
.loja dl { display: grid; gap: .3rem; }
.loja dt { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 1rem; }
.loja dd { line-height: 1.55; }
.loja small { color: var(--tinta-suave); font-size: .9rem; }
.loja-acoes { display: grid; gap: .75rem; margin-top: 1.8rem; }
.loja-simples p:not(.loja-etiqueta) { color: var(--tinta-suave); max-width: 24rem; }
.lojas-troca { border: 1px solid var(--linha); padding: 1.3rem 1.4rem; color: var(--tinta-suave); max-width: 46rem; }
.lojas-troca strong { color: var(--tinta); }

/* Chamada final */
.final { position: relative; overflow: hidden; background: var(--vinho); color: var(--papel); text-align: center; padding: clamp(5rem, 14vw, 10rem) var(--margem); }
.final-script { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%); font-family: var(--cursiva); font-size: clamp(16rem, 60vw, 40rem); line-height: 1; color: rgba(217, 189, 132, .12); pointer-events: none; white-space: nowrap; }
.final-titulo { position: relative; font-size: clamp(2.5rem, 9.5vw, 5.4rem); margin-bottom: 2.2rem; }
.final h2 em { color: var(--ouro-claro); }
.final .botao { position: relative; }

/* Rodapé */
.rodape { background: var(--tinta); color: var(--papel); text-align: center; padding: 3.5rem var(--margem) 6rem; }
.rodape-marca { font-family: var(--cursiva); font-size: 4rem; line-height: 1; color: var(--ouro-claro); }
.rodape-marca span { font-size: .45em; margin-left: -.15em; }
.rodape-linha { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; margin-top: .8rem; color: rgba(244, 239, 232, .7); }
.rodape-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.6rem; margin: 1.8rem 0; }
.rodape-nav a { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; padding: .8rem 0; }
.rodape-nav a:hover { color: var(--ouro-claro); }
.rodape-fim { font-size: .82rem; color: rgba(244, 239, 232, .62); }
.rodape-fim a { color: var(--papel); }

/* WhatsApp flutuante */
.wa-flutuante { position: fixed; right: 1rem; bottom: 1rem; z-index: 80; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--tinta); color: var(--ouro-claro); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(27, 22, 19, .28); border: 1px solid var(--ouro); transition: transform .3s, background .3s, opacity .4s; }
.wa-flutuante:hover { transform: translateY(-3px); background: var(--vinho); }
.wa-flutuante.wa-espera { opacity: 0; pointer-events: none; transform: translateY(12px); } /* na capa ele não cobre o botão principal */

/* ---------- Celular: no "Uma peça, seis cores" a foto e as cores ficam na mesma tela ---------- */
@media (max-width: 639.98px) {
  .cores { gap: 0; }
  .cores-texto { display: contents; }
  .cores-texto > * { order: 1; }
  .cores-palco { order: 2; margin-top: 1.5rem; width: min(100%, calc((100svh - 17rem) * .75)); max-width: none; }
  .cores-lista { order: 3; justify-content: center; gap: .25rem; margin: 1rem 0 .3rem; }
  .cor { width: 2.75rem; height: 2.75rem; }
  .cor::before { width: 1.95rem; height: 1.95rem; }
  .cores-atual { order: 3; text-align: center; margin-bottom: 1.1rem; }
  .cores .botao { order: 3; }
}

/* ---------- Tablet ---------- */
@media (min-width: 640px) {
  .capa-acoes { display: flex; justify-content: center; }
  .loja-acoes { display: flex; flex-wrap: wrap; }
  .capa-nome { font-size: 40vw; }
  .capa-foto { width: 56%; margin-top: -15vw; }
  .comprar-pagamento i { display: inline-block; width: .4rem; height: .4rem; background: var(--ouro); transform: rotate(45deg); margin: 0 .9rem .15rem; }
  .carta { grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); }
  .carta-foto { width: 100%; max-width: 24rem; }
  .cores { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
  .comprar-lista { grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid rgba(244, 239, 232, .2); }
  .comprar-lista li { border-bottom: 0; padding: 2.2rem 1.6rem 2.2rem 0; }
  .comprar-lista li + li { padding-left: 1.6rem; border-left: 1px solid rgba(244, 239, 232, .2); }
  .loja { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
  .acessorios { grid-template-columns: repeat(4, 1fr); align-items: end; }
  .acessorios-texto { grid-column: 1 / 3; margin-bottom: 0; align-self: center; }
  .acessorios-foto.a1 { grid-column: 3 / 5; }
  .acessorios-foto.a2 { grid-column: 2 / 3; }
  .acessorios-foto.a3 { grid-column: 3 / 4; }
}

/* ---------- Computador ---------- */
@media (min-width: 900px) {
  .topo-nav { display: flex; }
  .topo-wa { display: inline-block; }
  .topo-menu { display: none; }

  .capa { grid-template-columns: 1fr minmax(0, 34vw) 1fr; grid-template-rows: auto auto; column-gap: clamp(1.5rem, 3vw, 3.5rem); padding-top: 5.4rem; align-items: start; }
  .capa-nome { grid-column: 1 / -1; grid-row: 1; font-size: 31vw; line-height: .78; }
  .capa-foto { grid-column: 2; grid-row: 1 / 3; width: 100%; margin-top: 9.5vw; }
  .capa-lateral { display: flex; flex-direction: column; grid-row: 2; position: relative; z-index: 3; }
  .capa-lateral-esq { grid-column: 1; align-items: flex-start; gap: 1.6rem; padding-top: 1.5rem; }
  .capa-lateral-dir { grid-column: 3; align-items: flex-end; text-align: right; gap: 1.6rem; padding-top: 1.5rem; }
  .capa-mini-esq { width: min(62%, 13rem); }
  .capa-mini-esq img { aspect-ratio: 3 / 4; }
  .capa-mini-dir { width: min(72%, 15rem); }
  .capa-mini-dir img { aspect-ratio: 1; }
  .capa-texto { grid-column: 1 / -1; grid-row: 3; margin-top: clamp(2rem, 4vw, 3.5rem); }
  .capa-titulo { font-size: clamp(3rem, 5.4vw, 5.6rem); }
  .capa-titulo span { display: inline; }
  .capa-titulo .capa-titulo-2 { display: inline-block; padding-left: .12em; }
  .capa-sub { max-width: none; }

  .capitulo { grid-template-columns: repeat(12, 1fr); align-items: start; row-gap: 0; }
  .capitulo-cabeca { grid-row: 1; margin-bottom: 0; align-self: center; }
  .capitulo-foto.f1 { grid-row: 1 / 3; aspect-ratio: 4 / 5; position: sticky; top: 5.5rem; width: min(100%, calc((100svh - 7rem) * .8)); } /* a foto inteira cabe na tela */
  .capitulo-foto.f2 { grid-row: 2; margin-top: 3rem; }
  .capitulo-foto.f3 { grid-row: 2; margin-top: 6.5rem; }
  .capitulo-a .capitulo-cabeca { grid-column: 1 / 7; padding-right: 2rem; }
  .capitulo-a .capitulo-foto.f1 { grid-column: 7 / 13; justify-self: end; }
  .capitulo-a .capitulo-foto.f2 { grid-column: 1 / 4; }
  .capitulo-a .capitulo-foto.f3 { grid-column: 4 / 7; }
  .capitulo-b .capitulo-cabeca { grid-column: 7 / 13; padding-left: 2rem; }
  .capitulo-b .capitulo-foto.f1 { grid-column: 1 / 7; }
  .capitulo-b .capitulo-foto.f2 { grid-column: 7 / 10; }
  .capitulo-b .capitulo-foto.f3 { grid-column: 10 / 13; }

  .cores { grid-template-columns: minmax(0, 34vw) 1fr; }
  .cores-palco { max-width: none; width: min(100%, calc((100svh - 8rem) * .75)); }

  .passarela-cabeca { grid-template-columns: 1fr auto; align-items: end; }
  .passarela-cabeca .rotulo { grid-column: 1 / -1; }
  .look { width: clamp(17rem, 22vw, 22rem); }
  /* passarela presa: a seção tem a altura da tela e o tamanho dos looks sai da altura que sobra */
  .passarela.fixa { height: 100svh; padding: 5rem 0 1.5rem; display: flex; flex-direction: column; justify-content: center; }
  .passarela.fixa .passarela-cabeca { margin-bottom: 1.2rem; gap: .4rem; }
  .passarela.fixa .passarela-titulo { font-size: clamp(2rem, 5svh, 3.6rem); }
  .passarela.fixa .passarela-titulo em { display: inline; font-size: 1.1em; }
  .passarela.fixa .look { width: clamp(12rem, calc((100svh - 21rem) * .75), 22rem); }
  .passarela.fixa .passarela-janela { overflow: visible; }
  .passarela.fixa .passarela-dica { visibility: hidden; }

  .lojas { grid-template-columns: repeat(12, 1fr); }
  .lojas-cabeca { grid-column: 1 / -1; margin-bottom: 1rem; }
  .loja-destaque { grid-column: 1 / 9; grid-template-columns: minmax(0, 5fr) 6fr; }
  .loja-simples { grid-column: 9 / 13; grid-template-columns: 1fr; align-self: end; }
  .loja-simples .loja-foto { aspect-ratio: 4 / 3; }
  .lojas-troca { grid-column: 1 / 9; }
  .wa-flutuante { right: 1.5rem; bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faixa-trilho { animation: none; }
  .cores-palco img, .look img { transition: none; }
}