/* Cléia Peixoto Moda Feminina — site (etapa 1). Tokens em tokens.css. */
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant"; src: url("../fonts/cormorant-italic-var.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Jost"; src: url("../fonts/jost-var.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Sacramento"; src: url("../fonts/sacramento-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--creme); color: var(--cafe);
  font-family: var(--f-sans); font-size: var(--t-body); line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
/* grão de papel/linho, 3,5 % */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--cafe); outline-offset: 3px; border-radius: 2px; }

.pular { position: absolute; left: var(--margem); top: -60px; z-index: 100; background: var(--cafe); color: var(--creme); padding: 12px 18px; text-decoration: none; }
.pular:focus { top: 12px; }

.ico { width: 1.15em; height: 1.15em; flex: none; }
.rotulo { font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--rosa-antigo); font-weight: 500; }
.rotulo--claro { color: var(--caramelo); }
.titulo-2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.015em; }
.titulo-2 em { color: var(--caramelo-texto); font-weight: 400; }
.contador { font-family: var(--f-sans); color: var(--caramelo-texto); letter-spacing: 0.1em; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.65em;
  min-height: 52px; padding: 0 1.75rem; border-radius: 999px; border: 1px solid var(--terracota);
  background: var(--terracota); color: var(--creme); font: 500 0.95rem/1 var(--f-sans); letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-rapido) var(--ease-out), color var(--t-rapido) var(--ease-out), transform var(--t-rapido) var(--ease-out), box-shadow var(--t-medio) var(--ease-out);
}
.btn:hover { background: var(--terracota-viva); border-color: var(--terracota-viva); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(138, 69, 41, 0.7); }
.btn:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.btn--mini { min-height: 44px; padding: 0 1.1rem; font-size: 0.85rem; }
.btn--claro { background: transparent; color: var(--cafe); border-color: var(--cafe); }
.btn--claro:hover { background: var(--cafe); border-color: var(--cafe); color: var(--creme); }
.btn--grande { min-height: 68px; padding: 0 2.4rem; background: var(--creme); color: var(--terracota); border-color: var(--creme); font: 500 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--f-serif); letter-spacing: 0.01em; }
.btn--grande:hover { background: #fff; border-color: #fff; color: var(--terracota); }

.link-traco {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 500; letter-spacing: 0.04em;
  background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 100% 1px no-repeat;
  transition: background-size var(--t-medio) var(--ease-out), color var(--t-rapido);
}
.link-traco:hover { background-size: 0 1px; background-position: 100% calc(100% - 10px); color: var(--terracota); }

/* topo */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 76px; padding: 0 var(--margem);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: transparent; transition: background-color var(--t-medio) var(--ease-out), box-shadow var(--t-medio) var(--ease-out);
}
.topo.is-solido { background: var(--creme); box-shadow: 0 1px 0 var(--areia); }
.marca { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; min-height: 44px; justify-content: center; line-height: 1; }
.marca__nome { font-family: var(--f-script); font-size: 2.2rem; color: var(--caramelo-texto); line-height: 0.9; }
.marca__linha { font-size: 0.56rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--rosa-antigo); margin-top: 2px; padding-left: 0.42em; }
.topo__nav { display: flex; gap: var(--s-4); font-size: 0.85rem; letter-spacing: 0.08em; }
.topo__nav a { text-decoration: none; padding: 12px 0; background: linear-gradient(currentColor, currentColor) 0 80% / 0 1px no-repeat; transition: background-size var(--t-medio) var(--ease-out); }
.topo__nav a:hover { background-size: 100% 1px; }

/* 1. hero */
.hero {
  min-height: 100svh; padding: calc(76px + var(--s-5)) var(--margem) var(--s-6);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: center;
  max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; position: relative;
}
.hero__texto { grid-column: 1 / span 7; position: relative; z-index: 2; }
.hero__rotulo { margin-bottom: var(--s-3); }
.hero__titulo { font-family: var(--f-serif); font-weight: 300; font-size: var(--t-hero); line-height: 0.9; letter-spacing: -0.03em; }
.hero__titulo .linha { display: block; overflow: hidden; padding-bottom: 0.06em; }
.hero__titulo .linha > span { display: inline-block; }
.hero__titulo em { color: var(--caramelo-texto); font-weight: 300; padding-left: 0.9em; }
.hero__script { font-family: var(--f-script); font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.8rem); color: var(--caramelo-texto); line-height: 1; transform: rotate(-4deg); margin: -0.05em 0 var(--s-3) 34%; white-space: nowrap; }
.hero__lead { max-width: 34rem; color: var(--cafe-2); margin-bottom: var(--s-4); }
.hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.hero__info { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: var(--t-small); color: var(--cafe-2); border-top: 1px solid var(--areia); padding-top: var(--s-2); max-width: 38rem; }
.hero__info dt { font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--rosa-antigo); }

.hero__fotos { grid-column: 8 / span 5; position: relative; justify-self: center; padding: 0 0 6% 0; }
.arco { border-radius: var(--arco); overflow: hidden; background: var(--linho); }
.arco img, .peca__foto img { width: 100%; height: 100%; object-fit: cover; }
.arco--grande { height: min(70svh, 660px); aspect-ratio: 344 / 624; position: relative; z-index: 1; box-shadow: var(--sombra); }
.moldura--fio { position: absolute; z-index: 0; top: -22px; left: 22px; right: -22px; bottom: calc(6% - 22px); border: 1px solid var(--caramelo); border-radius: var(--arco); opacity: 0.7; }
.arco--detalhe { position: absolute; z-index: 2; width: 52%; aspect-ratio: 361 / 465; left: -34%; bottom: 0; border: 8px solid var(--creme); box-shadow: var(--sombra); }

/* faixa */
.faixa { background: var(--terracota); color: var(--creme); overflow: hidden; padding: 1.1rem 0; }
.faixa__trilho { display: flex; align-items: center; gap: 2.2rem; width: max-content; animation: faixa 46s linear infinite; font-size: 0.78rem; letter-spacing: 0.3em; text-transform: uppercase; white-space: nowrap; }
.faixa:hover .faixa__trilho { animation-play-state: paused; }
.faixa__trilho i { width: 9px; height: 13px; border: 1px solid currentColor; border-radius: 999px 999px 0 0; opacity: 0.7; }
.faixa__script { font-family: var(--f-script); font-size: 1.7rem; letter-spacing: 0; text-transform: none; line-height: 1; }
@keyframes faixa { to { transform: translateX(-50%); } }

/* 2. vitrine */
.vitrine { background: var(--linho); position: relative; }
.vitrine__palco { display: grid; grid-template-columns: minmax(340px, 33%) 1fr; gap: var(--s-6); align-items: center; padding: var(--s-8) 0 var(--s-8) var(--margem); min-height: 100svh; overflow: hidden; }
.vitrine__cab { max-width: 28rem; position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--linho); padding-right: var(--s-4); box-shadow: 48px 0 48px -12px var(--linho), -120px 0 0 0 var(--linho); }
.vitrine__cab .titulo-2 { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4.2rem); }
.vitrine__cab .rotulo { margin-bottom: var(--s-2); }
.vitrine__texto { margin: var(--s-3) 0 var(--s-4); color: var(--cafe-2); }
.vitrine__progresso { height: 1px; background: var(--areia); width: 100%; max-width: 16rem; }
.vitrine__progresso span { display: block; height: 100%; background: var(--terracota); transform-origin: 0 50%; transform: scaleX(0.08); }
.vitrine__trilho { display: flex; align-items: flex-start; gap: clamp(1.5rem, 3vw, 3rem); padding-right: var(--margem); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--areia) transparent; padding-bottom: var(--s-2); }
.vitrine.is-presa .vitrine__trilho { overflow: visible; will-change: transform; }
.peca { flex: none; width: clamp(240px, 22vw, 300px); scroll-snap-align: start; }
.peca--baixa { margin-top: clamp(2rem, 9vh, 6rem); }
.peca__foto { overflow: hidden; background: var(--areia); }
.peca--alta .peca__foto { aspect-ratio: 3 / 4.2; }
.peca--baixa .peca__foto { aspect-ratio: 4 / 5; border-radius: var(--raio); }
.peca__foto img { transition: transform var(--t-lento) var(--ease-out); }
.peca:hover .peca__foto img { transform: scale(1.03); }
.peca__data { margin-top: var(--s-2); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rosa-antigo); }
.peca__nome { font-family: var(--f-serif); font-weight: 500; font-size: var(--t-h3); line-height: 1.1; margin: 0.3rem 0 0.2rem; }
.peca__cta { display: inline-flex; align-items: center; gap: 0.5em; min-height: 44px; color: var(--terracota); font-weight: 500; text-decoration: none; letter-spacing: 0.04em; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat; transition: background-size var(--t-medio) var(--ease-out); }
.peca__cta span { transition: transform var(--t-rapido) var(--ease-out); }
.peca__cta:hover { background-size: 100% 1px; }
.peca__cta:hover span { transform: translateX(4px); }
.peca-mais {
  flex: none; width: clamp(240px, 22vw, 300px); aspect-ratio: 3 / 4.2; scroll-snap-align: start; align-self: center;
  border: 1px solid var(--caramelo); border-radius: var(--arco); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  text-align: center; padding: var(--s-4); text-decoration: none; transition: background-color var(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out);
}
.peca-mais:hover { background: var(--creme); transform: translateY(-2px); }
.peca-mais__script { font-family: var(--f-script); font-size: 3.6rem; color: var(--caramelo-texto); line-height: 1; }
.peca-mais__texto { font-family: var(--f-serif); font-size: 1.4rem; line-height: 1.2; }
.peca-mais__link { display: inline-flex; gap: 0.5em; align-items: center; color: var(--terracota); font-weight: 500; }

/* 3. loja */
.loja {
  position: relative; overflow: hidden; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: center;
  padding: var(--s-9) var(--margem); max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto;
}
.loja__foto { grid-column: 2 / span 4; aspect-ratio: 361 / 400; position: relative; z-index: 1; box-shadow: var(--sombra); }
.loja__foto img { transform: scale(1.14); }
.loja__texto { grid-column: 7 / span 6; position: relative; z-index: 1; }
.loja__texto > * + * { margin-top: var(--s-3); }
.loja__texto > p:not(.rotulo) { max-width: 33rem; color: var(--cafe-2); }
.loja__marca { position: absolute; z-index: 0; right: -2vw; bottom: -0.32em; font-family: var(--f-script); font-size: clamp(9rem, 26vw, 24rem); color: var(--caramelo); opacity: 0.13; line-height: 1; pointer-events: none; }
.ficha { display: grid; gap: var(--s-2); border-top: 1px solid var(--areia); padding-top: var(--s-3); max-width: 33rem; }
.ficha div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-2); }
.ficha dt { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--rosa-antigo); padding-top: 0.35em; }
.nota { color: var(--cafe-2); font-size: var(--t-small); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: center; padding-top: var(--s-2); }

/* 4. passos */
.passos { background: var(--linho); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); padding: var(--s-9) var(--margem); }
.passos__cab { grid-column: 1 / span 5; align-self: start; position: sticky; top: 22vh; }
.passos__cab > * + * { margin-top: var(--s-3); }
.passos__corpo { grid-column: 7 / span 6; position: relative; padding-left: var(--s-5); }
.passos__fio { position: absolute; left: 0; top: 0.6rem; bottom: 0.6rem; width: 1px; background: var(--areia); }
.passos__fio span { display: block; height: 100%; width: 100%; background: var(--terracota); transform-origin: 50% 0; }
.passos__lista { display: grid; gap: var(--s-7); }
.passo { position: relative; }
.passo::before { content: ""; position: absolute; left: calc(-1 * var(--s-5) - 4px); top: 0.9rem; width: 9px; height: 13px; border: 1px solid var(--terracota); border-radius: 999px 999px 0 0; background: var(--linho); }
.passo__num { display: block; font-family: var(--f-serif); font-style: italic; font-weight: 300; font-size: clamp(4rem, 3rem + 3vw, 6.5rem); line-height: 0.8; color: var(--caramelo-texto); margin-bottom: var(--s-2); }
.passo h3 { font-family: var(--f-serif); font-weight: 500; font-size: var(--t-h3); line-height: 1.1; margin-bottom: var(--s-1); }
.passo p { color: var(--cafe-2); max-width: 30rem; }
.passo a { color: var(--terracota); }

/* 5. frase */
.frase { background: var(--cafe); color: var(--creme); position: relative; overflow: hidden; }
.frase__palco { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--s-8) var(--margem); max-width: calc(1180px + 2 * var(--margem)); margin: 0 auto; }
.frase__texto { font-family: var(--f-serif); font-weight: 300; font-size: clamp(2rem, 1.2rem + 3.2vw, 4.4rem); line-height: 1.08; letter-spacing: -0.01em; max-width: 18ch; margin-top: var(--s-3); }
.frase__texto .w { transition: opacity var(--t-medio) var(--ease-out); }
.frase__script { font-family: var(--f-script); font-size: var(--t-script-xl); color: var(--caramelo); line-height: 1.1; align-self: flex-end; transform: rotate(-4deg); margin-top: -0.05em; white-space: nowrap; }
.frase__script span { display: inline-block; padding: 0 0.15em; }

/* 6. dona */
.dona { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-3); align-items: center; padding: var(--s-9) var(--margem); max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; }
.dona__texto { grid-column: 1 / span 6; }
.dona__texto > * + * { margin-top: var(--s-3); }
.dona__texto > p:not(.rotulo):not(.fonte) { max-width: 33rem; color: var(--cafe-2); }
.dona__citacao { border-left: 1px solid var(--caramelo); padding-left: var(--s-3); max-width: 30rem; }
.dona__citacao p { font-family: var(--f-serif); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.15; }
.dona__citacao footer { margin-top: var(--s-1); font-size: var(--t-small); color: var(--cafe-2); }
.numeros { display: flex; gap: var(--s-6); padding-top: var(--s-2); }
.numeros strong { display: block; font-family: var(--f-serif); font-weight: 400; font-size: clamp(2.8rem, 2rem + 2.4vw, 4.4rem); line-height: 1; color: var(--terracota); }
.numeros span { font-size: var(--t-small); color: var(--cafe-2); }
.fonte { font-size: 0.75rem; color: var(--cafe-2); }
.dona__foto { grid-column: 8 / span 4; aspect-ratio: 3 / 4; box-shadow: var(--sombra); position: relative; }
.dona__foto img { transform: scale(1.12); }

/* 7. contato */
.contato { background: var(--terracota); color: var(--creme); padding: var(--s-9) var(--margem) var(--s-8); display: grid; justify-items: start; gap: var(--s-4); position: relative; overflow: hidden; }
.contato > * { position: relative; z-index: 1; }
.contato .rotulo--claro { color: var(--creme); } /* creme/terracota 6,3:1 (caramelo daria 2,45:1) */
.contato::before, .contato::after { content: ""; position: absolute; z-index: 0; border: 1px solid rgba(247, 241, 234, 0.32); border-radius: var(--arco); border-bottom: 0; pointer-events: none; }
.contato::before { right: var(--margem); top: var(--s-8); width: min(26vw, 380px); height: 62%; }
.contato::after { right: calc(var(--margem) + 22px); top: calc(var(--s-8) + 22px); width: calc(min(26vw, 380px) - 44px); height: calc(62% - 22px); }
.contato__titulo { font-family: var(--f-serif); font-weight: 300; font-size: clamp(2.8rem, 1.6rem + 4.6vw, 6.6rem); line-height: 0.98; letter-spacing: -0.02em; max-width: 14ch; }
.contato__titulo em { display: block; }
.contato__lista { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: var(--s-3) var(--s-6); border-top: 1px solid rgba(247, 241, 234, 0.4); padding-top: var(--s-3); margin-top: var(--s-3); width: 100%; }
.contato__lista span { display: block; font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.85; margin-bottom: 0.2rem; }
.contato__lista a { display: inline-flex; min-height: 44px; align-items: center; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contato__lista a:hover { text-decoration-color: transparent; }
.contato .btn--grande:focus-visible, .contato a:focus-visible { outline-color: var(--creme); }

/* rodapé */
.rodape { background: var(--cafe); color: var(--creme); padding: var(--s-6) var(--margem) var(--s-5); overflow: hidden; }
.rodape__nome { font-family: var(--f-script); font-size: clamp(4.5rem, 16vw, 15rem); color: var(--caramelo); line-height: 1.05; white-space: nowrap; }
.rodape__linha { font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--creme); margin-top: var(--s-2); }
.rodape__nota { font-size: 0.78rem; color: rgba(247, 241, 234, 0.75); margin-top: var(--s-4); }

/* WhatsApp fixo (celular) */
.whats-fixo { display: none; }

/* entrada do hero */
@keyframes sobe { from { opacity: 0; transform: translateY(28px); } }
@keyframes linha { from { transform: translateY(105%); } }
@keyframes abre { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zoom { from { transform: scale(1.14); } }
[data-entra] { animation: sobe var(--t-lento) var(--ease-out) both; }
.hero__titulo [data-entra] { animation-name: linha; }
.hero__rotulo { animation-delay: 0ms; }
.hero__titulo .linha:nth-child(1) > span { animation-delay: 80ms; }
.hero__titulo .linha:nth-child(2) > span { animation-delay: 160ms; }
.hero__script { animation-delay: 420ms; }
.hero__lead { animation-delay: 300ms; }
.hero__acoes { animation-delay: 370ms; }
.hero__info { animation-delay: 440ms; }
[data-entra-foto] { animation: abre 1.2s var(--ease-io) both; }
[data-entra-foto] img { animation: zoom 2.4s var(--ease-out) both; }
.arco--detalhe { animation-delay: 380ms; }
.moldura--fio { animation: sobe 1.4s var(--ease-out) 500ms both; }

/* revelação na rolagem: visível por padrão; CSS com view() ou IntersectionObserver */
@supports (animation-timeline: view()) {
  .rv { animation: sobe linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
  [data-revela] { animation: abre linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  [data-parallax] { animation: paralaxe linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .passos__fio span { animation: fio linear both; animation-timeline: view(); animation-range: cover 10% cover 70%; }
}
@keyframes paralaxe { from { transform: scale(1.14) translateY(-6%); } to { transform: scale(1.14) translateY(6%); } }
@keyframes fio { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.js-io .rv:not(.is-in) { opacity: 0; transform: translateY(28px); }
.js-io .rv { transition: opacity var(--t-lento) var(--ease-out), transform var(--t-lento) var(--ease-out); }

/* tablet */
@media (max-width: 1100px) {
  .topo__nav { display: none; }
  .hero__texto { grid-column: 1 / span 7; }
  .hero__fotos { grid-column: 8 / span 5; }
  .arco--detalhe { left: -24%; width: 48%; }
  .hero__fotos { margin-right: 22px; }
  .arco--grande { height: auto; width: min(100%, 36svh); }
  .vitrine__palco { grid-template-columns: 1fr; gap: var(--s-5); padding-top: var(--s-7); padding-bottom: var(--s-7); min-height: 0; }
  .vitrine__cab { max-width: 36rem; padding-right: var(--margem); box-shadow: none; }
  .vitrine__progresso { display: none; }
  .loja__foto { grid-column: 1 / span 6; }
  .loja__texto { grid-column: 7 / span 6; }
  .dona__texto { grid-column: 1 / span 7; }
  .dona__foto { grid-column: 8 / span 5; }
}

/* hero de 761 a 1280: a foto pequena só avança sobre o vão entre colunas, nunca sobre o texto.
   --A = largura do arco grande; o avanço da foto pequena é o menor entre 30% do arco
   e o vão livre até a coluna do texto menos 12 px. */
@media (min-width: 761px) and (max-width: 1280px) {
  .hero { container-type: inline-size; }
  .hero__fotos {
    --col: calc((100cqw - 11 * var(--s-3)) / 12);
    --span: calc(5 * var(--col) + 4 * var(--s-3));
    --A: min(min(70svh, 660px) * 344 / 624, 0.82 * var(--span) - 22px);
    justify-self: end; margin-right: 22px;
  }
  .arco--grande { width: var(--A); height: auto; }
  .arco--detalhe { width: 46%; left: calc(-1 * min(0.3 * var(--A), var(--span) - 22px - var(--A) + var(--s-3) - 12px)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .hero__fotos { --A: min(36svh, 0.82 * var(--span) - 22px); }
}

/* celular */
@media (max-width: 760px) {
  .topo { height: 64px; }
  .marca__nome { font-size: 1.85rem; }
  .topo .btn--mini span { display: none; }
  .topo .btn--mini { width: 44px; padding: 0; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: calc(64px + var(--s-3)); padding-bottom: var(--s-5); min-height: 0; }
  .hero__texto { display: contents; }
  .hero__rotulo { order: 1; margin-bottom: var(--s-2); letter-spacing: 0.2em; font-size: 0.72rem; }
  .hero__titulo { order: 2; }
  .hero__titulo em { padding-left: 0.6em; }
  .hero__script { order: 3; margin: 0 0 var(--s-2) 18%; }
  .hero__fotos { order: 4; align-self: flex-end; margin: var(--s-2) 4% var(--s-4) 0; }
  .hero__acoes { order: 5; margin-bottom: var(--s-3); }
  .hero__lead { order: 6; }
  .hero__info { order: 7; flex-direction: column; gap: var(--s-1); }
  .arco--grande { height: min(46svh, 400px); width: auto; }
  .arco--detalhe { left: -56%; width: 54%; border-width: 6px; }
  .moldura--fio { top: -14px; left: 14px; right: -14px; bottom: calc(6% - 14px); }
  .vitrine__palco { padding-top: var(--s-6); padding-bottom: var(--s-6); }
  .peca, .peca-mais { width: 72vw; }
  .peca--baixa { margin-top: var(--s-5); }
  .loja, .passos, .dona { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-5); padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .loja__foto { width: 86%; }
  .passos__cab { position: static; }
  .passos__lista { gap: var(--s-5); }
  .frase__palco { min-height: 0; padding-top: var(--s-7); padding-bottom: var(--s-7); }
  .frase__script { align-self: flex-start; font-size: clamp(3.2rem, 14.5vw, 5.6rem); white-space: normal; line-height: 1; margin-top: var(--s-2); }
  .dona__foto { order: -1; width: 74%; align-self: flex-end; }
  .contato__lista { grid-template-columns: 1fr; gap: var(--s-2); }
  .contato::before, .contato::after { display: none; }
  .btn--grande { width: 100%; }
  .whats-fixo {
    display: grid; place-items: center; position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; border-radius: 50%;
    background: var(--terracota); color: var(--creme); box-shadow: 0 12px 28px -10px rgba(51, 36, 29, 0.6);
    transition: opacity var(--t-medio) var(--ease-out), transform var(--t-medio) var(--ease-out);
  }
  .whats-fixo .ico { width: 28px; height: 28px; }
  .whats-fixo.is-oculto { opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none; }
}

/* movimento reduzido: sem parallax, sem seção presa, sem faixa correndo; só opacidade curta */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-parallax], .loja__foto img, .dona__foto img { transform: none !important; }
  .js-io .rv:not(.is-in) { opacity: 1; transform: none; }
  .faixa__trilho { transform: none; }
}