/* =====================================================================
   AQUORA · B · home.css — a capa e as seções da home, na ordem da página.
   Ritmo de cor: foto → faixas rosé/preta → papel → película preta → caminho preto → papel →
   rosé chapado → papel → preto → papel-2 → papel → mockup → papel → rosé → preto.
   ===================================================================== */

/* textos auxiliares no rosé e no mockup: contraste AA (o rosa-tinta não passa sobre o rosé) */
[data-theme="acento"] .fig, [data-theme="acento"] .claro-2, [data-theme="acento"] .n,
[data-theme="mockup"] .n, [data-theme="mockup"] .fig { color: var(--tinta); }
.acab-tag { display: inline-block; padding: 4px 7px 3px; background: var(--tinta); color: var(--claro); font: 600 .58rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.acab-tag.is-ilustrativo { background: var(--rosa); color: var(--tinta); }

/* =====================================================================
   ABERTURA — capa de revista
   ===================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: clip; min-height: 100svh;
  display: grid; align-content: end;
  padding: calc(var(--topo-h) + 70px) var(--g) clamp(116px, 16svh, 170px);
  background: var(--papel); color: var(--tinta);
}
.hero-camada { position: absolute; inset: 0; z-index: -2; }
.hero-midia { position: absolute; inset: 0; overflow: hidden; background: #E9E4DF; }
.hero-img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 30%; }
/* véu de papel embaixo: a tipografia preta fica legível sobre a foto clara */
.hero-veu { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(243, 239, 233, .55) 0%, rgba(243, 239, 233, 0) 20%, rgba(243, 239, 233, 0) 42%, rgba(243, 239, 233, .72) 74%, rgba(243, 239, 233, .94) 100%); }
.hero-capa { position: absolute; left: var(--g); right: var(--g); top: calc(var(--topo-h) + 6px); display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--tinta); z-index: 2; }
.hero-capa-c { display: none; }
@media (min-width: 700px) { .hero-capa-c { display: inline; } }

.hero-conteudo { position: relative; z-index: 3; }
.hero-titulo { font-size: clamp(4.4rem, 21vw, 13.6rem); line-height: .84; }
.hero-titulo .l { display: block; overflow: hidden; padding: 0 .08em .02em 0; margin-bottom: -.02em; }
.hero-titulo .l-in { display: block; }
.hero-titulo .l-agua { padding-top: .12em; margin-top: -.1em; padding-bottom: .12em; }
.hero-titulo .l-agua em { display: inline-block; font-size: 1.36em; line-height: .78; background-size: 100% .3em; background-position: 0 92%; }
.hero-pe { display: grid; gap: 20px; margin-top: 18px; max-width: 30rem; }
.hero-lede { font-size: clamp(1rem, .96rem + .3vw, 1.15rem); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
@media (min-width: 1024px) {
  .hero-titulo { font-size: clamp(8rem, 13.4vw, 15rem); }
  .hero-pe { position: absolute; right: 0; bottom: .4em; width: min(380px, 30vw); margin: 0; }
}

/* camada 3: o chuveiro real recortado, sangrando pela direita (corte de moda) */
.hero-chuveiro { position: absolute; z-index: 1; width: clamp(230px, 64vw, 700px); right: -17vw; top: calc(var(--topo-h) + 46px); pointer-events: none; }
.hero-chuveiro img { width: 100%; rotate: -14deg; filter: drop-shadow(0 34px 44px rgba(40, 24, 22, .38)) drop-shadow(0 8px 12px rgba(40, 24, 22, .28)); }
@media (min-width: 1024px) { .hero-chuveiro { width: min(25vw, 420px); right: -2.5vw; top: calc(var(--topo-h) + 46px); } }

/* camada 4: o círculo de pontos da marca, num selo rosé que gira */
.selo-wrap { position: absolute; z-index: 2; width: clamp(92px, 25vw, 176px); left: var(--g); top: calc(var(--topo-h) + 52px); pointer-events: none; }
@media (min-width: 1024px) { .selo-wrap { left: auto; right: 27vw; top: calc(var(--topo-h) + 9svh); } }
.selo { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--rosa); color: var(--tinta); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.selo-pontos { width: 58%; height: 58%; object-fit: contain; }
.selo-giro { position: absolute; inset: 0; width: 100%; height: 100%; animation: gira 26s linear infinite; }
.selo-giro text { font: 600 13px/1 var(--ff-t); letter-spacing: .1em; fill: currentColor; }
@keyframes gira { to { rotate: 360deg; } }

.hero-fig { position: absolute; z-index: 3; left: var(--g); right: var(--g); bottom: 66px; margin: 0; }
.hero-rolar { position: absolute; z-index: 3; right: var(--g); bottom: 64px; display: none; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; font: 600 .66rem/1 var(--ff-t); letter-spacing: .2em; text-transform: uppercase; }
.hero-rolar i { position: relative; width: 1px; height: 46px; background: var(--linha); overflow: hidden; }
.hero-rolar i::after { content: ""; position: absolute; inset: 0; background: var(--agua); animation: rolar 1.8s var(--ease-io) infinite; }
@keyframes rolar { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@media (min-width: 1024px) { .hero-rolar { display: none; } }

/* entrada da capa: CSS no 1º desenho (não espera JS, fontes nem GSAP) */
.js:not(.rm) .hero-midia { animation: b-janela 1.7s var(--ease-io) backwards; }
.js:not(.rm) .hero-img { animation: b-contrazoom 2.6s var(--ease) .1s backwards; }
.js:not(.rm) .hero-titulo .l-in { animation: b-linha 1.3s var(--ease) backwards; animation-delay: calc(.55s + var(--i, 0) * .12s); }
.js:not(.rm) [data-intro] { animation: b-entra 1.1s var(--ease) backwards; animation-delay: calc(1s + var(--i, 0) * .09s); }
.js:not(.rm) .hero-chuveiro img[data-intro] { animation-name: b-chuveiro; animation-duration: 1.9s; animation-delay: .7s; }
.js:not(.rm) .selo[data-intro] { animation-name: b-selo; animation-duration: 1.6s; }
.js:not(.rm) .pg-home .topo { animation: b-desce 1.1s var(--ease) .9s backwards; }
@keyframes b-janela { from { clip-path: inset(10% 18% 22% 18%); } to { clip-path: inset(0 0 0 0); } }
@keyframes b-contrazoom { from { transform: scale(1.32); } }
@keyframes b-linha { from { transform: translateY(108%); } }
@keyframes b-entra { from { opacity: 0; transform: translateY(24px); } }
@keyframes b-chuveiro { from { opacity: 0; transform: translateX(30%) rotate(-140deg) scale(.7); } }
@keyframes b-selo { from { opacity: 0; transform: scale(.3) rotate(-160deg); } }
@keyframes b-desce { from { transform: translateY(-100%); } }

/* =====================================================================
   FAIXAS (sobrepõem a borda da capa: profundidade)
   ===================================================================== */
.faixas { position: relative; z-index: 4; overflow: clip; margin: -50px 0 -26px; padding: 22px 0 30px; pointer-events: none; }
.faixa { width: 112%; margin-left: -6%; padding: 10px 0; background: var(--rosa); color: var(--tinta); rotate: -2.2deg; box-shadow: 0 10px 24px rgba(15, 15, 15, .18); }
.faixa-b { margin-top: -2px; padding: 9px 0; background: var(--tinta); color: var(--claro); rotate: 1.3deg; }
.faixa-trilho { display: flex; width: max-content; will-change: transform; }
.faixa-grupo { display: flex; align-items: center; gap: 20px; padding-right: 20px; flex: none; }
.faixa-a span { font: 400 clamp(1.55rem, 5.6vw, 3.3rem)/1 var(--ff-d); text-transform: uppercase; white-space: nowrap; }
.faixa-a em { font: italic 400 clamp(1.9rem, 6.8vw, 4rem)/.9 var(--ff-s); white-space: nowrap; }
.faixa-a .ic { width: clamp(16px, 2.4vw, 24px); height: auto; fill: var(--tinta); stroke: none; }
.faixa-b span { font: 600 clamp(.66rem, 1.8vw, .8rem)/1 var(--ff-t); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.faixa-b i { font-style: normal; color: var(--rosa); }

/* =====================================================================
   GARANTIAS
   ===================================================================== */
.garantias { padding: clamp(46px, 6vw, 70px) var(--g) clamp(10px, 2vw, 20px); background: var(--papel); }
.gar-lista { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--tinta); }
.gar-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 10px; padding: 16px 10px 18px 0; border-bottom: 1px solid var(--linha); }
.gar-lista .n { grid-column: 1 / -1; }
.gar-lista .ic { width: 24px; height: 24px; margin-top: 2px; }
.gar-lista p { font-size: .82rem; line-height: 1.35; color: var(--tinta-2); }
.gar-lista b { display: block; font: 400 1.05rem/1.08 var(--ff-d); text-transform: uppercase; color: var(--tinta); margin-bottom: 3px; }
@media (min-width: 900px) {
  .gar-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gar-lista li { padding: 20px 20px 22px; border-bottom: 0; border-left: 1px solid var(--linha); }
  .gar-lista li:first-child { border-left: 0; padding-left: 0; }
  .gar-lista b { font-size: 1.25rem; }
}

/* =====================================================================
   § 01 · MANIFESTO
   ===================================================================== */
.manifesto { padding: clamp(60px, 9vw, 130px) var(--g) var(--sec); background: var(--papel); }
.mf-grid { position: relative; display: grid; gap: 34px; margin-top: clamp(30px, 5vw, 70px); }
.mf-texto { font: 400 clamp(2rem, 7.6vw, 4.5rem)/1.04 var(--ff-s); letter-spacing: -.014em; max-width: 22ch; }
.mf-texto em { font-style: italic; background: linear-gradient(var(--rosa), var(--rosa)) 0 88% / 100% .3em no-repeat; }
.mf-cap { display: inline-block; padding: .08em .14em 0; background: var(--tinta); color: var(--papel); font: 400 .82em/1 var(--ff-d); text-transform: uppercase; letter-spacing: .02em; vertical-align: .06em; }
.mf-foto { width: min(78%, 460px); justify-self: end; }
.mf-foto .mascara { aspect-ratio: 4 / 5; background: var(--papel-2); }
.mf-foto img, .mf-foto-2 img { width: 100%; height: 100%; object-fit: cover; }
.mf-foto-2 { width: min(46%, 240px); margin-top: -34%; position: relative; z-index: 2; }
.mf-foto-2 .mascara { aspect-ratio: 1; border: 8px solid var(--papel); }
.mf-assina { font: 400 clamp(1.3rem, 3vw, 1.7rem)/1.2 var(--ff-s); }
/* celular: a polaroide (Fig. 02) sobrepõe o canto da foto; a legenda da Fig. 01 começa depois dela */
@media (max-width: 1023px) { .mf-foto .fig { margin-left: 36%; } }
.mf-assina em { font-style: italic; }
@media (min-width: 1024px) {
  .mf-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); column-gap: 5vw; align-items: start; }
  .mf-texto { grid-row: 1 / span 2; }
  .mf-foto { width: 100%; grid-column: 2; }
  .mf-foto-2 { position: absolute; right: calc(32% + 2vw); bottom: -40px; width: min(220px, 16vw); margin: 0; }
  .mf-assina { grid-column: 1; }
}

/* =====================================================================
   PELÍCULA (duas filas de fotos em sentidos opostos)
   ===================================================================== */
.pelicula { padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px); overflow: clip; }
.pel-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 0 var(--g) 18px; margin: 0 var(--g) 22px; padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--linha-clara); }
.pel-fila { display: flex; gap: 12px; width: max-content; padding: 0 var(--g); }
.pel-fila-b { margin-top: 12px; }
.pel-item { flex: none; width: clamp(170px, 44vw, 360px); }
.pel-item .mascara { aspect-ratio: 4 / 5; background: var(--escuro-2); }
.pel-item:nth-child(3n+2) { width: clamp(220px, 58vw, 480px); }
.pel-item:nth-child(3n+2) .mascara { aspect-ratio: 5 / 4; }
.pel-item:nth-child(3n) .mascara { aspect-ratio: 1; }
.pel-item img { width: 100%; height: 100%; object-fit: cover; }
.pel-item .fig { margin-top: 8px; font-size: .74rem; }
html:not(.motion) .pel-fila { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); scrollbar-width: none; }
html:not(.motion) .pel-item { scroll-snap-align: start; }

/* =====================================================================
   § 02 · O CAMINHO DA ÁGUA — estático (capítulos empilhados) e com pin (.motion)
   ===================================================================== */
.caminho { padding: var(--sec) 0; }
.cam-cab { display: grid; gap: 22px; padding: 0 var(--g); margin-bottom: clamp(44px, 7vw, 100px); }
.cam-cab .run { margin-bottom: clamp(10px, 3vw, 40px); }
.cam-cab .lede { max-width: 34rem; }
.cam-visual, .cam-prog, .gota-foto, .onda, .cam-chuva { display: none; }
.cam-caps { display: grid; gap: clamp(64px, 10vw, 130px); padding: 0 var(--g); }
.cap { display: grid; gap: 26px; align-items: center; }
.cap-vis { position: relative; display: grid; place-items: center; }
.cap-n { display: block; font: italic 400 clamp(5rem, 24vw, 11rem)/.8 var(--ff-s); color: var(--rosa); margin-bottom: 6px; }
.cap-t { font-size: clamp(2.8rem, 11vw, 5.6rem); }
.cap-txt p:not(.fig) { margin-top: 12px; max-width: 34ch; color: var(--claro-2); font-size: clamp(1rem, .95rem + .3vw, 1.15rem); }
.cap-txt .fig { margin-top: 16px; }
@media (min-width: 1024px) {
  .cap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 6vw; }
  .cap-vis { order: 2; }
}

.cano-svg { width: min(100%, 300px); height: auto; overflow: visible; }
.cano-parede { fill: none; stroke: rgba(243, 239, 233, .6); stroke-width: 1.6; }
.cano-agua { fill: none; stroke: var(--agua); stroke-width: 8; stroke-linecap: round; }
.cano-rosca rect, .cano-rosca path { fill: none; stroke: rgba(243, 239, 233, .6); stroke-width: 1.4; }
.cano-part { fill: #CFC8C0; }
.cano-rot path { stroke: var(--rosa); stroke-width: 1.2; fill: none; }
.cano-rot text { fill: var(--claro); font: 600 11px/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; }

.pecas-cam { --pw: min(230px, 60vw); }
.pecas-cam .peca-linha { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.pecas-cam .peca { grid-column: 2; }
.pecas-cam .peca-rot { grid-column: 3; padding-left: 10px; font-size: .78rem; }
.pecas-cam .peca-rot b { font-size: 1.05rem; }
.pecas-cam .peca-rot span:not(.n) { display: none; }
@media (min-width: 700px) { .pecas-cam .peca-rot span:not(.n) { display: block; } .pecas-cam .peca-rot b { font-size: 1.3rem; } }

.cap-vis-foto .mascara { width: min(100%, 520px); aspect-ratio: 4 / 5; overflow: hidden; background: var(--escuro-2); }
.cap-vis-foto img { width: 100%; height: 100%; object-fit: cover; }

/* a gota: 30–42 px, gradiente, contorno claro e sombra; legível no escuro e sobre o refil branco */
.gota { --gw: 32px; width: var(--gw); height: calc(var(--gw) * 1.375); overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)) drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }
@media (min-width: 1024px) { .gota { --gw: 36px; } }
.peca-refil { position: relative; display: block; }
.peca-refil img { display: block; width: 100%; height: auto; }
.refil-sujo { position: absolute; inset: 0; filter: brightness(.7) sepia(.35) saturate(.75); opacity: 0; }

/* --- com movimento: palco de 100svh; visual em cima (celular) ou à direita (desktop) --- */
.motion .caminho { padding-bottom: 0; }
.motion .cam-palco { position: relative; height: 100svh; overflow: hidden; }
.motion .cam-caps { position: absolute; inset: 0; display: block; padding: 0; }
.motion .cap { position: absolute; inset: 0; display: block; }
.motion .cap[data-cap="1"] { z-index: 1; }
.motion .cam-visual { display: block; z-index: 2; pointer-events: none; }
.motion .cap[data-cap="2"] { z-index: 3; }
.motion .cam-frente { z-index: 4; }
.motion .cap[data-cap="3"] { z-index: 5; }
.motion .cap[data-cap="4"] { z-index: 6; }
.motion .cap-vis, .motion .cam-visual { position: absolute; left: var(--g); right: var(--g); top: calc(var(--topo-h) + 6px); height: 52svh; }
.motion .cap-txt { position: absolute; left: var(--g); right: var(--g); top: calc(var(--topo-h) + 52svh + 20px); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: end; }
.motion .cap-n { grid-row: span 1; font-size: clamp(3.6rem, 16vw, 5rem); margin: 0; }
.motion .cap-t { font-size: clamp(2.3rem, 10vw, 3.4rem); }
.motion .cap-txt p { grid-column: 1 / -1; }
.motion .cap-txt p:not(.fig) { margin-top: 10px; font-size: .98rem; }
.motion .cap-txt .fig { margin-top: 8px; }
.motion .cap-vis-cano { display: block; }
.motion .cano-svg { display: block; width: 100%; height: 100%; }
.motion .cap-vis-filtro { display: grid; place-items: center; }
.motion .pecas-cam { --pw: min(214px, 56vw, calc((52svh - 44px) / 1.62)); row-gap: 16px; width: 100%; }
.motion .cap-vis-foto { display: block; }
.motion .cap-vis-foto .mascara { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
/* nas fotos: gota com brilho (gradiente radial + screen) que pousa e abre ondas */
.motion .gota-foto { display: block; position: absolute; z-index: 2; left: 50%; top: 0; width: 40px; height: 55px; margin: -55px 0 0 -20px; mix-blend-mode: screen; transform-origin: 50% 100%; }
.motion .onda { display: block; position: absolute; z-index: 2; left: 50%; top: 46%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .95); box-shadow: 0 0 10px rgba(169, 211, 240, .55), inset 0 0 8px rgba(255, 255, 255, .35); mix-blend-mode: screen; opacity: 0; }
.motion .cap[data-cap="4"] .onda { top: 40%; }
.motion .cam-chuva { display: block; position: absolute; left: 50%; top: calc(100% + 4px); width: 0; height: clamp(54px, 10svh, 130px); }
.cam-chuva i { position: absolute; top: 0; left: 0; width: 1.5px; height: 100%; background: linear-gradient(180deg, var(--agua), rgba(88, 168, 224, 0)); transform-origin: 50% 0; }
.cam-chuva i:nth-child(1) { left: -42px; rotate: 22deg; } .cam-chuva i:nth-child(2) { left: -28px; rotate: 14deg; } .cam-chuva i:nth-child(3) { left: -14px; rotate: 7deg; }
.cam-chuva i:nth-child(4) { left: 0; } .cam-chuva i:nth-child(5) { left: 14px; rotate: -7deg; } .cam-chuva i:nth-child(6) { left: 28px; rotate: -14deg; } .cam-chuva i:nth-child(7) { left: 42px; rotate: -22deg; }
.cam-fio { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: linear-gradient(180deg, rgba(88, 168, 224, 0), rgba(88, 168, 224, .8) 10%, rgba(88, 168, 224, .8)); }
.cam-part { position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #5C646B; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75); }
.cam-part:nth-child(2) { margin-left: -14px; } .cam-part:nth-child(3) { margin-left: 6px; width: 6px; height: 6px; } .cam-part:nth-child(4) { margin-left: -9px; width: 8px; height: 8px; }
.cam-part:nth-child(5) { margin-left: 10px; } .cam-part:nth-child(6) { margin-left: -17px; width: 5px; height: 5px; } .cam-part:nth-child(7) { margin-left: 15px; width: 6px; height: 6px; }
.motion .gota { position: absolute; left: 50%; top: 0; margin: calc(var(--gw) * -1.375) 0 0 calc(var(--gw) / -2); }
.motion .cam-prog { display: flex; gap: 8px; position: absolute; z-index: 6; left: var(--g); right: var(--g); bottom: max(14px, 2.4svh); }
.cam-seg { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 6px 8px; font: 600 .58rem/1 var(--ff-t); letter-spacing: .14em; text-transform: uppercase; color: var(--claro-2); transition: color .3s; }
.cam-seg b { font: italic 400 1rem/1 var(--ff-s); color: var(--rosa); letter-spacing: 0; }
.cam-seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-seg i { grid-column: 1 / -1; position: relative; display: block; height: 2px; overflow: hidden; background: var(--linha-clara); }
.cam-seg i::after { content: ""; position: absolute; inset: 0; background: var(--agua); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.cam-seg.is-ativo { color: var(--claro); }
@media (max-width: 420px) { .cam-seg span { display: none; } }
@media (max-width: 1023px) and (max-height: 720px) {
  .motion .cap-vis, .motion .cam-visual { height: 46svh; }
  .motion .cap-txt { top: calc(var(--topo-h) + 46svh + 14px); }
  .motion .pecas-cam { --pw: min(220px, 60vw, calc((46svh - 40px) / 1.62)); row-gap: 12px; }
  .motion .cap-txt .fig { display: none; }
}
@media (min-width: 1024px) {
  .motion .cap-vis, .motion .cam-visual { left: 46%; right: var(--g); top: calc(var(--topo-h) + 3svh); height: auto; bottom: 10svh; }
  .motion .cap-txt { left: var(--g); right: auto; width: 36%; top: auto; bottom: 15svh; display: block; }
  .motion .cap-n { font-size: clamp(7rem, 11vw, 11rem); margin-bottom: 8px; }
  .motion .cap-t { font-size: clamp(3.4rem, 5.6vw, 5.6rem); }
  .motion .cap-txt p:not(.fig) { font-size: 1.1rem; }
  .motion .pecas-cam { --pw: min(330px, 25vw, calc((87svh - var(--topo-h) - 70px) / 1.62)); row-gap: 26px; }
  .motion .cap-vis-foto .mascara { left: 8%; right: 8%; }
  .motion .cam-prog { right: 58%; }
}

/* =====================================================================
   § 03 · ACABAMENTOS
   ===================================================================== */
.acabamentos { padding: var(--sec) var(--g); background: var(--papel); }
.acab-cab { display: grid; gap: 18px; margin: clamp(30px, 5vw, 64px) 0 clamp(28px, 4vw, 50px); }
@media (min-width: 1024px) { .acab-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; column-gap: 6vw; } }
.acab-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 1024px) { .acab-lista { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.acab-card a { display: block; text-decoration: none; }
.acab-vis { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; overflow: hidden; }
.acab-fundo { position: absolute; inset: 0; background: var(--papel-2); }
.acab-preto .acab-fundo { background: var(--rosa); }
.acab-dourado .acab-fundo { background: var(--escuro); }
.acab-rose .acab-fundo { background: var(--mockup); }
.acab-num-w { position: absolute; left: 6px; bottom: -.14em; overflow: hidden; }
.acab-num { display: block; font-size: clamp(5rem, 22vw, 10rem); line-height: .82; color: rgba(20, 20, 20, .1); }
.acab-dourado .acab-num { color: rgba(243, 239, 233, .1); }
.acab-img { position: relative; width: 76%; filter: var(--sh-prod); transition: rotate 1.1s var(--ease), scale 1.1s var(--ease); }
@media (hover: hover) and (pointer: fine) { .acab-card a:hover .acab-img { rotate: 30deg; scale: 1.05; } }
.acab-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 8px; padding: 12px 0 14px; border-bottom: 1px solid var(--tinta); }
.acab-info .n { grid-column: 1 / -1; }
.acab-nome { font-size: clamp(1.15rem, 4.2vw, 1.75rem); }

/* =====================================================================
   § 04 · INSTALAÇÃO (home: com mídia por passo)
   ===================================================================== */
.inst-home .passo { grid-template-columns: minmax(0, 1fr) 44%; column-gap: 16px; align-items: start; }
.inst-home .passo-n-wrap { grid-column: 1 / -1; }
.inst-home .passo-txt { grid-column: 1; }
.inst-home .passo-txt p { margin-top: 8px; }
.inst-home .passo-vis { grid-column: 2; grid-row: 2; }
.passo-vis .mascara { aspect-ratio: 4 / 5; overflow: hidden; background: var(--tinta); }
.passo-vis img { width: 100%; height: 100%; object-fit: cover; }
.passo-vis .fig { font-size: .7rem; }
.passo-vis .fig b { flex-basis: 100%; }
.passo-vis .fig .gravar { margin-left: 0; }
.passo-vis-peca .mascara { display: grid; place-items: center; background: var(--rosa-claro); }
.passo-vis-peca img { width: 52%; height: auto; object-fit: contain; filter: var(--sh-prod); }
.passo-vis-explodido .mascara { position: relative; background: var(--papel); }
.passo-vis-explodido img { position: absolute; left: 0; right: 0; top: 7%; width: 100%; height: 86%; object-fit: contain; }
@media (min-width: 900px) {
  .inst-home .passo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 15rem); column-gap: 3vw; align-items: end; }
  .inst-home .passo-n-wrap { grid-column: 1; grid-row: 1; }
  .inst-home .passo-txt { grid-column: 2; grid-row: 1; padding-bottom: 6px; }
  .inst-home .passo-vis { grid-column: 3; grid-row: 1; }
}

/* =====================================================================
   § 06 · NÚMEROS (espaços reservados vazados em rosé)
   ===================================================================== */
.numeros { padding: var(--sec) var(--g); }
.num-grid { display: grid; gap: 34px; margin-top: clamp(30px, 5vw, 64px); }
.num-cab { display: grid; gap: 20px; align-content: start; }
.num-foto { width: min(80%, 420px); justify-self: end; }
.num-foto .mascara { aspect-ratio: 4 / 5; background: var(--escuro-2); }
.num-foto img { width: 100%; height: 100%; object-fit: cover; }
.num-lista { display: grid; border-top: 1px solid var(--linha-clara); }
.num-lista li { display: grid; gap: 10px; padding: 22px 0 26px; border-bottom: 1px solid var(--linha-clara); }
.num { display: block; font-size: clamp(5.6rem, 30vw, 11rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--rosa); white-space: nowrap; }
.num-lista p:not(.fig) { color: var(--claro-2); max-width: 30ch; }
@media (min-width: 1024px) {
  .num-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 6vw; }
  .num-foto { width: 100%; grid-row: span 1; }
  .num-lista { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--linha-clara); }
  .num-lista li { padding: 26px 26px 30px; border-bottom: 0; border-left: 1px solid var(--linha-clara); }
  .num-lista li:first-child { border-left: 0; padding-left: 0; }
}

/* =====================================================================
   § 07 · QUEM USA (Reels)
   ===================================================================== */
.reels-sec { padding: var(--sec) 0; background: var(--papel-2); }
.reels-sec > .run { margin: 0 var(--g); }
.reels-cab { display: grid; gap: 18px; padding: 0 var(--g); margin: clamp(30px, 5vw, 64px) 0 clamp(28px, 4vw, 48px); }
@media (min-width: 1024px) { .reels-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: end; column-gap: 6vw; } }
.reels { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); padding: 0 var(--g) 6px; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.reels::-webkit-scrollbar { display: none; }
.reels.is-arrastando { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.reel { position: relative; flex: 0 0 clamp(216px, 60vw, 300px); aspect-ratio: 9 / 16; scroll-snap-align: start; overflow: hidden; background: var(--escuro); color: var(--claro); }
.reel video, .reel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(10, 10, 10, .78)); pointer-events: none; }
.reel-play { position: absolute; z-index: 2; left: 12px; top: 12px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--claro); color: var(--tinta); transition: scale .3s var(--ease); }
.reel-play:active { scale: .92; }
.reel-play .i-pausa { display: none; }
.reel-play[aria-pressed="true"] .i-play { display: none; }
.reel-play[aria-pressed="true"] .i-pausa { display: block; }
.reel-n { position: absolute; z-index: 2; right: 12px; top: 16px; font: 600 .66rem/1 var(--ff-t); letter-spacing: .16em; color: var(--claro); }
.reel-leg { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; margin: 0; flex-wrap: wrap; color: rgba(243, 239, 233, .92); }
.reel-leg b { color: var(--claro); }
.reel-leg .gravar { margin-left: 0; }
.reels-barra { display: flex; align-items: center; gap: 12px; padding: 14px var(--g) 0; }
.reels-barra .gal-prog { position: relative; flex: 1; height: 2px; background: var(--linha); overflow: hidden; }
.reels-barra .gal-prog i, .loja-barra .gal-prog i { position: absolute; inset: 0; background: var(--tinta); transform-origin: 0 50%; transform: scaleX(.3); }

/* =====================================================================
   § 08 · LOJA
   ===================================================================== */
.loja { padding: var(--sec) 0; background: var(--papel); }
.loja > .run { margin: 0 var(--g); }
.loja-cab { display: grid; gap: 16px; padding: 0 var(--g); margin: clamp(26px, 4vw, 56px) 0 clamp(26px, 4vw, 50px); }
@media (min-width: 1024px) { .loja-cab { grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: end; column-gap: 6vw; } }
.loja-lista { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--g); padding: 0 var(--g) 10px; scrollbar-width: none; overscroll-behavior-x: contain; outline-offset: -3px; }
.loja-lista::-webkit-scrollbar { display: none; }
.loja-lista.is-arrastando { scroll-snap-type: none; cursor: grabbing; }
.prod { flex: 0 0 min(84vw, 380px); scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--branco); box-shadow: inset 0 0 0 1px var(--linha); }
.prod-vis { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.prod-vis-rosa { background: var(--rosa); }
.prod-vis-escuro { background: var(--escuro); }
.prod-vis-mockup { background: var(--mockup); }
.prod-vis .n { position: absolute; z-index: 2; left: 14px; top: 14px; color: var(--tinta); }
.prod-vis-escuro .n { color: var(--rosa); }
.prod-num { position: absolute; right: -.02em; bottom: -.18em; font-size: clamp(9rem, 40vw, 15rem); line-height: .8; color: rgba(20, 20, 20, .09); }
.prod-vis-escuro .prod-num { color: rgba(243, 239, 233, .07); }
.prod-img { position: relative; width: 72%; filter: var(--sh-prod); }
.prod-img-refil { width: auto; height: 56%; filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .55)); }
.prod-img-kit { width: 100%; height: 100%; object-fit: cover; filter: none; }
.prod-info { display: grid; gap: 12px; align-content: start; padding: 18px 18px 20px; }
.prod-info h3 { font-size: clamp(1.9rem, 6.6vw, 2.5rem); }
.prod-sub { font-size: .9rem; line-height: 1.4; color: var(--tinta-2); }
.prod-cores { display: flex; gap: 6px; }
.prod-cores button { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; transition: box-shadow .3s var(--ease); }
.prod-cores img { width: 36px; height: 36px; border-radius: 50%; }
.prod-cores button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--tinta); }
.prod-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .88rem; }
.prod-preco b { font: 400 2.1rem/1 var(--ff-d); font-variant-numeric: tabular-nums; }
.prod-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 2px; }
.prod-acoes .btn { flex: 1 1 140px; }
.loja-barra { display: flex; align-items: center; gap: 14px; padding: 14px var(--g) 0; }
.loja-barra .gal-cont { font: 600 .72rem/1 var(--ff-t); letter-spacing: .14em; }
.loja-barra .gal-prog { position: relative; flex: 1; height: 2px; background: var(--linha); overflow: hidden; }
.loja-semjs { padding: 16px var(--g) 0; }
@media (min-width: 1024px) {
  .loja-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); overflow: visible; padding-bottom: 40px; }
  .prod { flex: none; }
  .loja-barra { display: none; }
}

/* =====================================================================
   § 09 · NA CAIXA
   ===================================================================== */
.caixa { padding: var(--sec) var(--g); background: var(--mockup); }
.caixa-grid { display: grid; gap: 36px; margin-top: clamp(30px, 5vw, 64px); }
.caixa-prancha { position: relative; padding: 10px; background: var(--branco); box-shadow: var(--sh-2); rotate: -1.2deg; }
.caixa-prancha img { width: 100%; }
.guia { position: absolute; left: 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px); overflow: visible; }
.guia path { fill: none; stroke: var(--tinta); stroke-width: 1.4; }
.guia circle { fill: var(--tinta); r: 14px; }
.guia text { fill: var(--claro); font: 400 16px/1 var(--ff-d); text-anchor: middle; dominant-baseline: middle; }
.caixa-foto .fig { margin-top: 18px; }
.caixa-txt { display: grid; gap: 22px; align-content: start; }
.caixa-lista { border-top: 1px solid var(--tinta); }
.caixa-lista li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--tinta); }
.caixa-lista .disp { font-size: 2.6rem; line-height: .9; }
.caixa-lista p { color: var(--tinta); font-size: .95rem; }
.caixa-lista b { display: block; font: 400 1.5rem/1.05 var(--ff-d); text-transform: uppercase; }
.caixa-txt .btn { justify-self: start; }
@media (min-width: 1024px) { .caixa-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 6vw; align-items: center; } }

/* =====================================================================
   § 11 · INSTAGRAM + CADASTRO
   ===================================================================== */
.insta { padding: var(--sec) var(--g); background: var(--rosa); color: var(--tinta); }
.insta-arroba { font-size: clamp(4.2rem, 20.5vw, 17rem); line-height: .84; margin: clamp(22px, 4vw, 50px) 0 clamp(22px, 3vw, 40px); white-space: nowrap; }
.insta-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.insta-grade li { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--rosa-claro); }
.insta-grade img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); }
.insta-grade span { position: absolute; left: 8px; bottom: 7px; padding: 3px 6px 2px; background: var(--claro); color: var(--tinta); font: 600 .54rem/1.2 var(--ff-t); letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) { .insta-grade li:hover img { scale: 1.06; } }
@media (min-width: 900px) { .insta-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.news { display: grid; gap: 14px; max-width: 780px; margin-top: clamp(40px, 6vw, 80px); }
.news-l { font-size: clamp(1.9rem, 6.4vw, 3.2rem); }
.news-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.news input { min-height: 58px; padding: 0 16px; border: 1px solid var(--tinta); border-right: 0; border-radius: 0; background: var(--papel); font-size: 1rem; }
.news input:focus { outline: 2px solid var(--tinta); outline-offset: -3px; }
.news input[aria-invalid="true"] { background: #FCF4F3; }
.news .btn { min-height: 58px; }
.news-msg { font-size: .85rem; }