/* DUNA · Coleção Areia — demo local para Reels */

@font-face { font-family: "Bodoni Moda"; src: url(fontes/bodoni.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(fontes/bodoni-italico.woff2) format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(fontes/hanken.woff2) format("woff2"); font-weight: 400 600; font-display: swap; }

:root {
  --areia: #EAE1D2;
  --areia-2: #DDD0BA;
  --tinta: #1F1A14;
  --tinta-2: #554B3E;
  --camelo: #A9875C;
  --ceu: #2F5E93;
  --rosa: #9E6457;
  --rosa-claro: #E8CFC4;
  --perola: #F7F2EC;
  --luz: #F6F1E8;
  --margem: clamp(16px, 6vw, 120px);
  --serif: "Bodoni Moda", "Didot", serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --saida: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--areia);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: var(--rosa); color: var(--perola); }
html { scrollbar-width: thin; scrollbar-color: var(--camelo) var(--areia); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--areia); }
::-webkit-scrollbar-thumb { background: var(--camelo); border-radius: 8px; }
:focus-visible { outline: 2px solid var(--ceu); outline-offset: 4px; border-radius: 2px; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
em { font-style: italic; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* grão de película por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- a carregar ---------- */
.carregar {
  position: fixed; inset: 0; z-index: 80; background: var(--areia);
  display: grid; place-content: center; justify-items: center; gap: 14px;
  transition: opacity .9s var(--saida), visibility 0s .9s;
}
.carregar.feito { opacity: 0; visibility: hidden; }
.carregar__marca { margin: 0; font: 400 clamp(44px, 7vw, 96px)/1 var(--serif); letter-spacing: .14em; padding-left: .14em; }
.carregar__texto { margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.carregar__linha { width: min(220px, 50vw); height: 1px; background: var(--areia-2); position: relative; overflow: hidden; }
.carregar__linha span { position: absolute; inset: 0; background: var(--tinta); transform-origin: left; transform: scaleX(0); }

/* ---------- topo ---------- */
.topo {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(14px, 2.2vw, 28px) var(--margem);
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
.topo a { pointer-events: auto; text-decoration: none; }
.topo__marca { font: 500 clamp(20px, 1.7vw, 26px)/1 var(--serif); letter-spacing: .22em; }
.topo__nav { display: flex; gap: clamp(14px, 2.6vw, 40px); align-items: center; font-size: 13px; letter-spacing: .06em; }
.topo__nav a { padding: 6px 0; position: relative; }
.topo__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--saida); }
.topo__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.topo__reservar { border: 1px solid currentColor; border-radius: 99px; padding: 8px 18px !important; }
.topo__reservar::after { display: none; }

/* ---------- capítulo atual (canto inferior) ---------- */
.capitulo {
  position: fixed; z-index: 50; left: var(--margem); right: var(--margem); bottom: clamp(12px, 2vw, 24px); margin: 0;
  display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .08em;
  color: #fff; mix-blend-mode: difference; pointer-events: none;
}
#capitulo { font: italic 400 15px/1 var(--serif); letter-spacing: .02em; }

/* ---------- cenas presas ao ecrã ---------- */
.cena { position: relative; }
.fixo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.seq { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.veu { position: absolute; inset: 0; pointer-events: none; }
.veu--esq { background: linear-gradient(90deg, rgba(20,16,10,.72) 0%, rgba(20,16,10,.45) 40%, rgba(20,16,10,.12) 62%, rgba(20,16,10,0) 80%); }
.veu--dir { background: linear-gradient(270deg, rgba(20,16,10,.66) 0%, rgba(20,16,10,.3) 38%, rgba(20,16,10,0) 60%); }
.veu--baixo { background: linear-gradient(0deg, rgba(20,16,10,.7) 0%, rgba(20,16,10,.2) 40%, rgba(20,16,10,0) 60%); }
.veu--total { background: linear-gradient(90deg, rgba(20,16,10,.74) 0%, rgba(20,16,10,.5) 38%, rgba(20,16,10,.18) 65%, rgba(20,16,10,.1) 100%); }

[data-de] { opacity: 0; transform: translateY(28px); filter: blur(8px); transition: opacity .9s var(--saida), transform 1.1s var(--saida), filter .9s var(--saida); }
[data-de].ver { opacity: 1; transform: none; filter: none; }

.grande { margin: 0; font: 400 clamp(38px, 5.6vw, 96px)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.grande em { font-weight: 400; }
.medio { margin: 0; max-width: 30ch; font: 400 clamp(22px, 2.1vw, 34px)/1.25 var(--serif); text-wrap: pretty; }

/* 1. herói */
.heroi { height: 260vh; }
.heroi__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroi__mascara { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#heroi-areia { fill: var(--areia); }
#heroi-texto { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.heroi__rodape {
  position: absolute; left: var(--margem); right: var(--margem); bottom: clamp(48px, 7vh, 84px);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px;
}
.heroi__colecao { margin: 0; display: grid; gap: 4px; }
.heroi__colecao em { font: italic 400 clamp(22px, 2vw, 32px)/1 var(--serif); }
.heroi__colecao span { font-size: 13px; letter-spacing: .08em; color: var(--tinta-2); }
.heroi__frase { margin: 0; max-width: 26ch; text-align: center; font-size: 14px; color: var(--tinta-2); }
.heroi__desce { margin: 0; justify-self: end; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.heroi__desce span { width: 1px; height: 44px; background: var(--tinta); transform-origin: top; animation: desce 2.2s var(--saida) infinite; }
@keyframes desce { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 2. chegada */
.chegada { height: 420vh; background: var(--areia); }
.chegada__janela { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; }
.chegada__textos { position: absolute; inset: 0; color: var(--luz); pointer-events: none; text-shadow: 0 2px 30px rgba(20,16,10,.35); }
.chegada__textos > * { position: absolute; left: var(--margem); top: 50%; translate: 0 -50%; max-width: min(52vw, 900px); }
.chegada__textos [data-de] { transform: translateY(28px); }
.chegada__textos [data-de].ver { transform: none; }

/* 3 e 5. fichas das peças */
.peca { height: 340vh; background: var(--tinta); }
.ficha { position: absolute; color: var(--luz); max-width: 400px; }
.ficha__nome { margin: 0 0 18px; font: 400 clamp(42px, 4.6vw, 80px)/1 var(--serif); letter-spacing: -.02em; }
.ficha__texto { margin: 0 0 28px; max-width: 38ch; }
.ficha__dados { margin: 0; display: grid; }
.ficha__dados div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-top: 1px solid rgba(246,241,232,.28); font-size: 14px; }
.ficha__dados div:last-child { border-bottom: 1px solid rgba(246,241,232,.28); }
.ficha__dados dt { opacity: .78; }
.ficha__dados dd { margin: 0; text-align: right; }
.ficha--dir { right: var(--margem); top: 50%; translate: 0 -50%; }
.ficha--baixo { right: var(--margem); bottom: clamp(56px, 9vh, 110px); }

/* 4. duo: vídeo ao alto + ficha */
.duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); align-items: center;
  gap: clamp(32px, 7vw, 140px); padding: clamp(80px, 14vh, 160px) var(--margem);
  max-width: 1640px; margin: 0 auto;
}
.duo--espelho { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
.duo--espelho .duo__media { order: 2; }
.duo__media { margin: 0; position: relative; aspect-ratio: 4 / 5; max-height: 86vh; width: 100%; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--areia-2); justify-self: center; }
.duo__media video { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.duo .ficha__nome em, .looks__titulo em, .grande--escura em, .pormenores figcaption em { color: var(--rosa); }
.duo .ficha { position: relative; color: var(--tinta); max-width: 520px; }
.duo .ficha__nome { font-size: clamp(48px, 6.4vw, 112px); margin-bottom: 24px; }
.duo .ficha__texto { font-size: clamp(16px, 1.25vw, 19px); }
.duo .ficha__dados div { font-size: 15px; padding: 13px 0; }
.duo .ficha__dados div { border-color: rgba(31,26,20,.2); }
.duo .ficha__dados dt { color: var(--tinta-2); opacity: 1; }
.duo .ficha > * { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--saida), transform 1.1s var(--saida); }
.duo.ver .ficha > * { opacity: 1; transform: none; }
.duo.ver .ficha > :nth-child(2) { transition-delay: .08s; }
.duo.ver .ficha > :nth-child(3) { transition-delay: .16s; }

/* 5. bota */
.passo__palavra {
  position: absolute; top: 46%; left: 0; margin: 0; translate: 0 -50%;
  white-space: nowrap; font: italic 400 clamp(120px, 22vw, 420px)/1 var(--serif); letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(246,241,232,.7); will-change: transform; pointer-events: none;
}

/* 6. looks */
.looks { height: 460vh; background: var(--areia); }
.looks .fixo { display: flex; flex-direction: column; justify-content: center; }
.looks__fundo {
  position: absolute; left: 0; top: 50%; margin: 0; translate: 0 -50%; white-space: nowrap;
  font: italic 400 clamp(200px, 34vw, 640px)/1 var(--serif); color: var(--areia-2); will-change: transform; pointer-events: none;
}
.looks__titulo { position: relative; margin: 0 var(--margem) clamp(20px, 3vh, 36px); font: 400 clamp(30px, 3vw, 48px)/1 var(--serif); }
.looks__faixa { position: relative; display: flex; align-items: flex-end; gap: clamp(16px, 2.4vw, 40px); padding: 0 var(--margem); width: max-content; will-change: transform; }
.look { margin: 0; flex: none; }
.look video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; background: var(--areia-2); }
.look--largo { width: min(46vw, calc(62vh * 1.6)); }
.look--largo video { aspect-ratio: 16 / 10; }
.look--alto { width: min(24vw, calc(62vh * .62)); }
.look--alto video { aspect-ratio: 5 / 8; }
.look--medio { width: min(34vw, calc(62vh * 1.1)); }
.look--medio video { aspect-ratio: 1 / 1; }
.look figcaption { display: flex; gap: 12px; margin-top: 12px; font-size: 13px; color: var(--tinta-2); }
.look figcaption b { font: italic 400 15px/1.3 var(--serif); color: var(--tinta); }

/* 7. conjunto */
.conjunto { height: 300vh; background: var(--areia); }
.conjunto__circulo { position: absolute; inset: 0; clip-path: circle(9vmin at 50% 50%); will-change: clip-path; }
.conjunto__circulo video { width: 100%; height: 100%; object-fit: cover; display: block; }
.conjunto__antes { position: absolute; left: 0; right: 0; top: calc(50% + 13vmin); margin: 0; text-align: center; font: 400 clamp(26px, 2.6vw, 40px)/1 var(--serif); transition: opacity .4s; }
.conjunto__fim { position: absolute; left: var(--margem); top: 50%; translate: 0 -50%; color: var(--luz); width: min(560px, calc(100vw - 2 * var(--margem))); }
.conjunto__fim .grande { margin-bottom: 28px; font-size: clamp(40px, 5vw, 84px); }
.conjunto__lista { list-style: none; margin: 0 0 32px; padding: 0; }
.conjunto__lista li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px solid rgba(246,241,232,.28); }
.conjunto__total { font: 400 clamp(20px, 1.8vw, 28px)/1.2 var(--serif); border-bottom: 1px solid rgba(246,241,232,.28); }
.botao {
  display: inline-flex; align-items: center; gap: 14px; padding: 17px 30px; border-radius: 99px;
  background: var(--luz); color: var(--tinta); text-decoration: none; font-weight: 500; letter-spacing: .02em;
  transition: background .4s var(--saida), color .4s var(--saida), transform .4s var(--saida);
}
.botao::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .4s var(--saida); }
.botao:hover { background: var(--tinta); color: var(--luz); }
.botao:hover::after { width: 30px; }
.botao:active { transform: scale(.98); }
.conjunto__nota { margin: 18px 0 0; font-size: 13px; opacity: .85; }

/* rodapé */
.rodape { padding: clamp(64px, 12vh, 140px) var(--margem) 90px; display: grid; gap: 8px; justify-items: center; text-align: center; color: var(--tinta-2); }
.rodape__marca { margin: 0 0 8px; font: 400 clamp(56px, 10vw, 160px)/1 var(--serif); letter-spacing: .12em; padding-left: .12em; color: var(--tinta); }
.rodape p { margin: 0; }
.rodape__legal { font-size: 12px; margin-top: 18px !important; }

/* ---------- ecrãs estreitos ---------- */
@media (max-width: 820px) {
  .topo__nav a:not(.topo__reservar) { display: none; }
  .heroi__rodape { grid-template-columns: 1fr auto; }
  .heroi__frase { display: none; }
  .chegada__textos > * { top: auto; bottom: 18vh; translate: none; max-width: calc(100vw - 2 * var(--margem)); }
  .veu--esq, .veu--dir { background: linear-gradient(0deg, rgba(20,16,10,.72) 0%, rgba(20,16,10,.3) 45%, rgba(20,16,10,0) 70%); }
  .ficha--dir, .ficha--baixo { left: var(--margem); right: var(--margem); top: auto; bottom: 64px; translate: none; max-width: none; }
  .ficha__texto { margin-bottom: 18px; }
  .ficha__dados div { padding: 8px 0; }
  .duo, .duo--espelho { grid-template-columns: 1fr; gap: 28px; padding-block: 72px; }
  .duo--espelho .duo__media { order: 0; }
  .duo__media { max-height: 70vh; }
  .look--largo { width: 84vw; }
  .look--alto { width: 52vw; }
  .look--medio { width: 66vw; }
  .conjunto__fim { top: auto; bottom: 64px; translate: none; }
  .veu--total { background: linear-gradient(0deg, rgba(20,16,10,.82) 0%, rgba(20,16,10,.6) 50%, rgba(20,16,10,.15) 80%); }
  .conjunto__fim .grande { margin-bottom: 18px; }
  .conjunto__lista { margin-bottom: 22px; }
  .conjunto__lista li { padding: 7px 0; }
}

@media (prefers-reduced-motion: reduce) {
  [data-de], .duo .ficha > * { transition: opacity .3s linear; transform: none !important; filter: none !important; }
  .heroi__desce span { animation: none; }
}

/* ================= pormenores (2.ª ronda) ================= */

/* ornamento: linha, losango, linha */
.orn { display: block; width: 84px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1; overflow: visible; }
.orn circle { fill: currentColor; stroke: none; }
.carregar .orn { color: var(--rosa); margin-top: -2px; }
.ficha .orn { color: currentColor; opacity: .7; margin: -6px 0 22px; }
.duo .ficha .orn { color: var(--rosa); opacity: 1; }
.rodape .orn { color: var(--rosa); margin: 4px 0 18px; }

/* referência da peça */
.ficha__ref { margin: 0 0 10px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .8; }

/* amostras de cor */
.cores { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 22px; }
.cores__nome { font-size: 13px; }
.cores__nome em { font-family: var(--serif); font-size: 16px; margin-left: 6px; }
.cores__lista { display: flex; gap: 10px; }
.cor { width: 22px; height: 22px; padding: 0; border-radius: 50%; background: var(--c); border: 1px solid rgba(127,117,104,.5); cursor: pointer; position: relative; transition: transform .4s var(--saida); }
.cor::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; transform: scale(.7); transition: opacity .4s var(--saida), transform .4s var(--saida); }
.cor[aria-pressed="true"]::after { opacity: .9; transform: none; }
.cor:hover { transform: scale(1.12); }

/* etiqueta cosida */
.etiqueta {
  display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; padding: 7px 14px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  border: 1px dashed currentColor; border-radius: 2px; outline: 1px solid currentColor; outline-offset: 3px; opacity: .85;
}
.etiqueta span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.duo .etiqueta { color: var(--rosa); opacity: 1; }

/* herói: marcas de canto, coordenadas, selo */
.cantos i { position: absolute; width: 22px; height: 22px; border-color: var(--tinta); border-style: solid; border-width: 0; opacity: .55; }
.cantos i:nth-child(1) { top: 84px; left: var(--margem); border-top-width: 1px; border-left-width: 1px; }
.cantos i:nth-child(2) { top: 84px; right: var(--margem); border-top-width: 1px; border-right-width: 1px; }
.cantos i:nth-child(3) { bottom: 26px; left: var(--margem); border-bottom-width: 1px; border-left-width: 1px; opacity: 0; }
.cantos i:nth-child(4) { bottom: 26px; right: var(--margem); border-bottom-width: 1px; border-right-width: 1px; opacity: 0; }
.heroi__coord {
  position: absolute; left: calc(var(--margem) * .45); top: 50%; margin: 0; translate: -50% -50%; rotate: -90deg; transform-origin: center;
  white-space: nowrap; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2);
  left: max(18px, calc(var(--margem) * .45));
}
.heroi__coord span { color: var(--rosa); margin: 0 14px; letter-spacing: .12em; }
.selo { justify-self: end; position: relative; width: clamp(96px, 8vw, 128px); aspect-ratio: 1; display: grid; place-items: center; color: var(--tinta); }
.selo__roda { position: absolute; inset: 0; width: 100%; height: 100%; animation: roda 28s linear infinite; }
.selo__roda text { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; fill: currentColor; }
.selo__d { font: italic 400 clamp(30px, 2.6vw, 42px)/1 var(--serif); color: var(--rosa); }
.selo::before { content: ""; position: absolute; inset: 27%; border-radius: 50%; border: 1px solid rgba(31,26,20,.25); }
@keyframes roda { to { transform: rotate(360deg); } }

/* fita a correr */
.fita { position: relative; overflow: hidden; background: var(--perola); color: var(--tinta); padding: 22px 0; border-block: 1px solid rgba(31,26,20,.12); }
.fita__pista { display: flex; align-items: center; gap: 34px; width: max-content; animation: fita 46s linear infinite; }
.fita__pista span { font: italic 400 clamp(22px, 2.2vw, 34px)/1 var(--serif); white-space: nowrap; }
.orn--fita { width: 54px; color: var(--rosa); flex: none; }
@keyframes fita { to { transform: translateX(-50%); } }

/* legenda vertical dos arcos */
.duo__leg { position: absolute; right: 10%; bottom: 24px; color: var(--perola); font: italic 400 15px/1 var(--serif); text-shadow: 0 1px 14px rgba(20,16,10,.5); }
.duo--espelho .duo__leg { right: auto; left: 10%; }

/* secção: os pormenores */
.pormenores { padding: clamp(90px, 16vh, 180px) var(--margem) clamp(100px, 16vh, 180px); max-width: 1640px; margin: 0 auto; }
.pormenores__topo { display: grid; justify-items: center; text-align: center; gap: 16px; margin-bottom: clamp(40px, 7vh, 80px); }
.pormenores__topo .orn { color: var(--rosa); }
.pormenores__topo p { margin: 0; max-width: 40ch; color: var(--tinta-2); font-size: clamp(16px, 1.2vw, 19px); }
.pormenores__grelha { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3.4vw, 64px); align-items: start; }
.arco { margin: 0; }
.arco--2 { margin-top: clamp(30px, 7vh, 90px); }
.arco--3 { margin-top: clamp(20px, 5vh, 64px); }
.arco__media { position: relative; aspect-ratio: 3 / 3.9; max-height: 58vh; margin-inline: auto; overflow: hidden; border-radius: 999px 999px 4px 4px; background: var(--areia-2); }
.arco__media::after { content: ""; position: absolute; inset: 10px; border-radius: inherit; border: 1px solid rgba(247,242,236,.55); pointer-events: none; }
.arco__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--px) var(--py); transform: scale(var(--z, 2.1)); transform-origin: var(--px) var(--py); will-change: transform; }
.arco figcaption { display: grid; gap: 6px; margin-top: 18px; padding-left: 4px; }
.arco figcaption em { font: italic 400 clamp(24px, 2vw, 32px)/1.1 var(--serif); }
.arco figcaption span { color: var(--tinta-2); max-width: 32ch; }

/* tamanhos */
.tamanhos { display: flex; align-items: center; gap: 8px; margin: 0 0 26px; flex-wrap: wrap; }
.tamanhos > span { font-size: 13px; margin-right: 10px; opacity: .85; }
.tamanhos button {
  min-width: 42px; height: 38px; padding: 0 10px; border-radius: 99px; cursor: pointer;
  background: transparent; color: var(--luz); border: 1px solid rgba(246,241,232,.35); font: 500 13px/1 var(--sans); letter-spacing: .04em;
  transition: background .35s var(--saida), color .35s var(--saida), border-color .35s var(--saida);
}
.tamanhos button:hover { border-color: var(--luz); }
.tamanhos button[aria-pressed="true"] { background: var(--luz); color: var(--tinta); border-color: var(--luz); }

/* títulos que sobem palavra a palavra */
.pl { display: inline-block; overflow: hidden; vertical-align: top; padding: .1em .12em .16em; margin: -.1em -.06em -.16em; }
.pl > span { display: inline-block; transform: translateY(108%); transition: transform 1.15s var(--saida); transition-delay: calc(var(--i) * 55ms); }
.ver .pl > span, .ver.pl-pai .pl > span { transform: none; }
[data-de].pl-pai, .ficha[data-de] { filter: none; }

/* cursor próprio (só com rato) */
.cursor { display: none; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor { display: block; position: fixed; inset: 0 auto auto 0; z-index: 90; pointer-events: none; mix-blend-mode: difference; }
  .cursor__ponto, .cursor__anel { position: absolute; left: 0; top: 0; border-radius: 50%; translate: -50% -50%; }
  .cursor__ponto { width: 5px; height: 5px; background: #fff; }
  .cursor__anel { width: 34px; height: 34px; border: 1px solid #fff; transition: width .45s var(--saida), height .45s var(--saida), opacity .3s; }
  .cursor.sobre .cursor__anel { width: 64px; height: 64px; }
  .cursor.escondido { opacity: 0; }
}

@media (max-width: 820px) {
  .heroi__coord { display: none; }
  .cantos i:nth-child(1), .cantos i:nth-child(2) { top: 70px; }
  .selo { width: 88px; }
  .pormenores__grelha { grid-template-columns: 1fr; gap: 56px; }
  .arco { width: 82%; }
  .arco--2 { margin: 0 0 0 auto; }
  .arco--3 { margin: 0; }
  .fita { padding: 16px 0; }
  .cores { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .selo__roda, .fita__pista { animation: none; }
  .pl > span { transform: none; transition: none; }
}

/* o Bodoni em tamanho grande tem traços finos quase invisíveis sobre vídeo: tamanho ótico mais robusto */
.ficha__nome, .chegada__textos .grande, .conjunto__fim .grande, #heroi-texto { font-variation-settings: "opsz" 30; }
@media (max-width: 820px) { #heroi-texto { font-variation-settings: "opsz" 18; } }