/* VITRINE DIGITAL · V5 core. Sistema editorial compartilhado por TODAS as revistas.
   A identidade de cada revista só preenche os papéis de cor (--c-*) por <style> inline; nada aqui sabe "Moda = rosa".
   Camadas: campo -> textura -> grafismo -> foto -> tipografia -> preço -> primeiro plano. Fontes vêm de moda_v4.css (Archivo, Young Serif). */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --bar-h: 48px;
  --c-main-ink: color-mix(in srgb, var(--c-main) 58%, var(--c-deep));
  --gut: 22px;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Young Serif", Georgia, "Times New Roman", serif;
}

/* ============================================================ texturas (SVG leve, estático, sem bitmap) */
:root {
  --tx-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .14  0 0 0 0 .09  0 0 0 0 .07  0 0 0 .9 -.15'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --tx-fiber: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='f' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.03 .09' numOctaves='4' seed='4'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .22  0 0 0 .8 -.28'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  --tx-fabric: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M0 8 L8 0 M-2 2 L2 -2 M6 10 L10 6' stroke='%23000' stroke-opacity='.07' stroke-width='1'/></svg>");
  --tx-dots: radial-gradient(circle, color-mix(in srgb, var(--c-deep) 55%, transparent) 1.3px, transparent 1.7px);
  --tx-lines: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--c-deep) 14%, transparent) 27px 28px);
}
.tx-grain::after { content: ""; position: absolute; inset: 0; background-image: var(--tx-grain); background-size: 240px; opacity: 0.3; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.tx-grain-screen::after { mix-blend-mode: screen; opacity: 0.38; }
.tx-fiber::before { content: ""; position: absolute; inset: 0; background-image: var(--tx-fiber); background-size: 300px; opacity: 0.3; mix-blend-mode: multiply; pointer-events: none; z-index: 1; }
.tx-fabric > .field-tx { background-image: var(--tx-fabric); background-size: 8px 8px; }
.tx-dots-corner::before { content: ""; position: absolute; width: 56%; height: 24%; background: var(--tx-dots) 0 0 / 9px 9px; opacity: 0.5; pointer-events: none; z-index: 1; -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.tx-lines > .field-tx { background-image: var(--tx-lines); }

/* ============================================================ campos cromáticos (cor com luz, vinheta e grão) */
.scene { position: relative; isolation: isolate; overflow: hidden; }
.field { position: absolute; inset: 0; z-index: 0; }
.f-main { background: radial-gradient(110% 60% at 96% 0%, rgba(255, 226, 205, 0.2), transparent 58%), radial-gradient(100% 60% at 0% 104%, color-mix(in srgb, var(--c-deep) 90%, transparent), transparent 62%), linear-gradient(168deg, var(--c-main), color-mix(in srgb, var(--c-main) 82%, var(--c-deep)) 55%, color-mix(in srgb, var(--c-main) 68%, var(--c-deep))); }
.f-paper { background: radial-gradient(110% 55% at 18% 0%, var(--c-paper-hi), transparent 70%), radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--c-main-hi) 22%, transparent), transparent 70%), linear-gradient(var(--c-paper), color-mix(in srgb, var(--c-paper) 92%, var(--c-sand))); }
.f-paper-hi { background: radial-gradient(90% 50% at 80% 0%, #fff, transparent 70%), linear-gradient(var(--c-paper-hi), var(--c-paper)); }
.f-main-pale { background: radial-gradient(90% 50% at 100% 0%, color-mix(in srgb, var(--c-fresh) 30%, transparent), transparent 62%), radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--c-main) 22%, transparent), transparent 62%), linear-gradient(var(--c-main-pale), color-mix(in srgb, var(--c-main-pale) 86%, var(--c-main-hi))); }
.f-fresh { background: radial-gradient(90% 50% at 90% 0%, rgba(255, 255, 255, 0.35), transparent 60%), radial-gradient(80% 60% at 0% 100%, color-mix(in srgb, var(--c-fresh-deep) 40%, transparent), transparent 62%), linear-gradient(var(--c-fresh), color-mix(in srgb, var(--c-fresh) 88%, var(--c-fresh-deep))); }
.f-hot { background: radial-gradient(90% 50% at 15% 0%, rgba(255, 244, 200, 0.55), transparent 60%), radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--c-hot-deep) 45%, transparent), transparent 62%), linear-gradient(var(--c-hot), color-mix(in srgb, var(--c-hot) 90%, var(--c-hot-deep))); }
.f-deep { background: radial-gradient(70% 42% at 84% 16%, color-mix(in srgb, var(--c-hot) 24%, transparent), transparent 62%), radial-gradient(75% 55% at 0% 100%, color-mix(in srgb, var(--c-fresh-deep) 30%, transparent), transparent 62%), linear-gradient(var(--c-deep), var(--c-deepest)); }
.f-cool { background: radial-gradient(90% 45% at 100% 0%, color-mix(in srgb, var(--c-cool-pale) 35%, transparent), transparent 60%), radial-gradient(80% 50% at 0% 100%, color-mix(in srgb, var(--c-cool-deep) 70%, transparent), transparent 62%), linear-gradient(var(--c-cool), var(--c-cool-deep)); }
.f-sand { background: radial-gradient(90% 40% at 100% 0%, color-mix(in srgb, var(--c-fresh) 40%, transparent), transparent 62%), linear-gradient(var(--c-sand), color-mix(in srgb, var(--c-sand) 88%, var(--c-main-hi))); }
.f-black { background: radial-gradient(70% 40% at 80% 12%, color-mix(in srgb, var(--c-main) 28%, transparent), transparent 62%), linear-gradient(var(--c-black), color-mix(in srgb, var(--c-black) 85%, var(--c-deep))); }

/* ============================================================ biblioteca gráfica */
.g { position: absolute; pointer-events: none; }
.g-star { color: var(--c-hot); }
.g-disc { border-radius: 50%; background: radial-gradient(circle at 60% 30%, color-mix(in srgb, var(--c-deep) 82%, var(--c-main)), var(--c-deep) 60%, var(--c-deepest)); }
.g-arc { border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c-main-pale) 90%, #fff), var(--c-main-pale) 62%, color-mix(in srgb, var(--c-main-pale) 85%, var(--c-main-hi))); }
.g-organic { border-radius: 46% 54% 58% 42% / 52% 40% 60% 48%; background: radial-gradient(circle at 40% 35%, color-mix(in srgb, var(--c-fresh) 70%, #fff), var(--c-fresh) 65%, color-mix(in srgb, var(--c-fresh) 80%, var(--c-fresh-deep))); }
.g-ring { border-radius: 50%; border: 2px solid color-mix(in srgb, var(--c-paper) 28%, transparent); }
.g-ring::after { content: ""; position: absolute; inset: 9%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent); }
.g-frame { border: 0; background:
  linear-gradient(currentColor, currentColor) 0 0 / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) 0 0 / 2px 22px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 0 / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) 100% 0 / 2px 22px no-repeat,
  linear-gradient(currentColor, currentColor) 0 100% / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 2px 22px no-repeat,
  linear-gradient(currentColor, currentColor) 100% 100% / 22px 2px no-repeat, linear-gradient(currentColor, currentColor) 100% 100% / 2px 22px no-repeat; }
.g-reg { background: var(--c-deep); opacity: 0.92; }                                    /* chapa de registro de impressão, levemente desalinhada */
.rough { display: inline; background: linear-gradient(transparent 62%, var(--c-hot) 62% 94%, transparent 94%); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 0.12em; transform: rotate(-0.6deg); }
.scribble { position: absolute; left: 0; width: 80%; height: 14px; bottom: -8px; color: var(--c-hot); }
.numeral-outline { color: transparent; -webkit-text-stroke: 3px color-mix(in srgb, var(--c-paper) 85%, transparent); font-weight: 900; font-variation-settings: "wdth" 62; letter-spacing: -0.04em; line-height: 0.74; }
.side-label { writing-mode: vertical-rl; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }

/* máscaras (clipPath em objectBoundingBox, definidos no <svg> do template) */
.m-arch { -webkit-clip-path: url(#clip-arch); clip-path: url(#clip-arch); }
.m-pill { -webkit-clip-path: url(#clip-pill); clip-path: url(#clip-pill); }
.m-torn { -webkit-clip-path: url(#clip-torn); clip-path: url(#clip-torn); }
.m-circle { border-radius: 50%; }
.m-soft { border-radius: 22px; }
.ph5 { position: relative; display: block; overflow: hidden; background: color-mix(in srgb, var(--c-sand) 80%, var(--c-main-hi)); width: 100%; }
.ph5 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-45 { aspect-ratio: 4 / 5; } .r-34 { aspect-ratio: 3 / 4; } .r-11 { aspect-ratio: 1; } .r-23 { aspect-ratio: 2 / 3; } .r-54 { aspect-ratio: 5 / 4; }
/* recortes fiéis (nenhum altera cor, forma ou quantidade do produto) */
.crop-right-panel img { width: 200%; max-width: none; margin-left: -100%; object-position: right center; }
.crop-left-panel img { width: 200%; max-width: none; object-position: left center; }
.crop-left-panel-low img { width: 200%; max-width: none; object-position: left bottom; transform: scale(1.14); transform-origin: 18% 100%; }
.crop-center-model img { transform: scale(1.75); transform-origin: 50% 58%; }
.crop-trim-top img { transform: scale(1.3); transform-origin: 50% 100%; }
.crop-trim-bottom img { transform: scale(1.12); transform-origin: 50% 0; }
.crop-trim-sides img { transform: scale(1.2); }
.crop-trim-edge img { transform: scale(1.08); }
/* cutout fiel: `darken` troca só o BRANCO do fundo pelo campo; pixels do produto mais escuros que o campo ficam intactos */
.cut img { mix-blend-mode: darken; }

/* ============================================================ preço: seis tratamentos sobre a mesma peça (.money) */
.money { display: inline-flex; align-items: flex-start; font-weight: 850; font-variation-settings: "wdth" 96; line-height: 0.88; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; }
.money__cur { font-size: max(0.38em, 12px); margin: 0.12em 0.1em 0 0; font-weight: 750; letter-spacing: 0; }
.money__dec { font-size: max(0.44em, 13px); margin: 0.08em 0 0 0.04em; }
.pfrom { display: block; font-family: var(--sans); font-variation-settings: normal; font-weight: 700; font-size: 13px; line-height: 1.3; margin-bottom: 3px; letter-spacing: 0; }
/* 1 CLASSIC_EDITORIAL */ .p-classic { font-family: var(--serif); font-weight: 400; font-variation-settings: normal; letter-spacing: -0.02em; }
/* 2 CIRCULAR_STAMP    */ .p-stamp { position: relative; width: 148px; height: 148px; border-radius: 50%; background: var(--c-hot); color: var(--c-ink); display: grid; place-items: center; text-align: center; }
.p-stamp .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.p-stamp .ring text { font-family: var(--sans); font-weight: 800; font-size: 11px; fill: var(--c-deep); }
.p-stamp__body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.p-stamp__body .money { font-size: 40px; }
/* 3 BIG_NUMERAL      */ .p-numeral .money { font-size: clamp(76px, 24vw, 118px); }
/* 4 IMAGE_TAG        */ .p-tag { position: absolute; z-index: 7; display: inline-flex; flex-direction: column; padding: 7px 14px 7px 26px; background: var(--c-hot); color: var(--c-ink); clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%); text-align: left; }
.p-tag::before { content: ""; position: absolute; left: 9px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c-paper); }
.p-tag--ink { background: var(--c-ink); color: var(--c-hot); } .p-tag--ink::before { background: var(--c-hot); }
.p-tag small { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.p-tag .money { font-size: 26px; }
/* 5 VERTICAL_LABEL   */ .p-vertical { writing-mode: vertical-rl; display: flex; align-items: center; gap: 6px; padding: 12px 7px; background: var(--c-hot); color: var(--c-ink); font-weight: 850; }
.p-vertical .money { writing-mode: horizontal-tb; font-size: 20px; }
/* 6 HEADLINE_PRICE   */ .p-headline { font-weight: 750; line-height: 1.12; }
.p-headline .hl { display: inline-block; font-weight: 900; font-size: 2.1em; line-height: 1; padding: 0 0.14em; color: var(--c-ink); background: var(--c-hot); transform: rotate(-1.4deg); font-variant-numeric: tabular-nums; }
.p-headline em { font-style: normal; font-weight: 600; font-size: 0.7em; }

/* ============================================================ CTA: COMPRAR (tinta que preenche a partir do toque) */
.cta { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 58px; padding: 0 20px; text-decoration: none; font-weight: 850; font-size: 19px; letter-spacing: 0.04em; font-variation-settings: "wdth" 92; color: var(--c-paper-hi); background: var(--c-deep); isolation: isolate; -webkit-tap-highlight-color: transparent; transition: transform 0.2s var(--ease-out); }
.cta::before { content: ""; position: absolute; z-index: -1; left: var(--x, 50%); top: var(--y, 50%); width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: var(--c-ink); transform: scale(0); transition: transform 0.55s var(--ease-out); }
.cta.is-press::before { transform: scale(1); }
.cta:active { transform: translateY(1px) scale(0.992); }
.cta svg { width: 24px; height: 24px; flex: none; transition: transform 0.3s var(--ease-out); }
.cta.is-press svg { transform: translateX(6px); }
@media (hover: hover) { .cta:hover::before { transform: scale(1); } .cta:hover svg { transform: translateX(6px); } }
.cta--hot { background: var(--c-hot); color: var(--c-ink); } .cta--hot::before { background: var(--c-paper-hi); }
.cta--ink { background: var(--c-ink); } .cta--ink::before { background: var(--c-main); }
.cta--paper { background: var(--c-paper-hi); color: var(--c-deep); } .cta--paper::before { background: var(--c-hot); }
.cta--chip { display: inline-flex; min-height: 44px; font-size: 15px; padding: 0 14px; gap: 8px; width: auto; justify-self: start; }
.cta:focus-visible, .link5:focus-visible, .open5:focus-visible { outline: 3px solid var(--c-hot); outline-offset: 3px; }
.open5 { display: block; width: 100%; -webkit-tap-highlight-color: transparent; transition: transform 0.18s var(--ease-out); }
.open5:active { transform: scale(0.985); }
.link5 { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 850; font-size: 16px; text-transform: uppercase; text-decoration: none; letter-spacing: 0.03em; border-bottom: 3px solid currentColor; line-height: 1.1; }

/* ============================================================ tipografia de apoio */
.t-lead { font-size: 19px; line-height: 1.4; font-weight: 600; max-width: 30ch; text-wrap: balance; }
.t-name { font-weight: 750; font-size: 16px; line-height: 1.3; text-wrap: balance; }
.t-line { font-size: 15px; line-height: 1.4; font-weight: 550; }
.h-caps { font-weight: 900; font-variation-settings: "wdth" 64; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.005em; text-wrap: balance; }
.h-serif5 { font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -0.02em; text-wrap: balance; }

/* ============================================================ chrome da edição: linha de progresso e navegação discreta */
.pg5 { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 40; pointer-events: none; }
.pg5 i { display: block; height: 100%; background: var(--c-hot); transform-origin: left; transform: scaleX(var(--ep, 0)); }
.nav5 { position: fixed; top: 10px; left: 50%; z-index: 35; width: 100%; max-width: 520px; padding: 0 12px; display: flex; justify-content: space-between; pointer-events: none; transform: translate(-50%, -70px); transition: transform 0.4s var(--ease-out); }
.nav5.is-on { transform: translate(-50%, 0); }
.nav5 a, .nav5 button { pointer-events: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; background: color-mix(in srgb, var(--c-paper-hi) 78%, transparent); backdrop-filter: blur(6px); color: var(--c-ink); font-weight: 800; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; border-radius: 22px; }

/* ============================================================ bottom sheet (fatos verificados, nunca métrica) */
.sheet__panel { background: var(--c-paper-hi); transition: transform 0.5s var(--ease-out); }
.sheet:not(.is-open) .sheet__panel { transition: transform 0.26s cubic-bezier(0.4, 0, 1, 1); }
.sheet__scrim { transition: opacity 0.35s ease; }
.sheet.is-open .sheet__body > * { animation: sheet-rise 0.55s var(--ease-out) both; }
.sheet.is-open .sheet__body > *:nth-child(2) { animation-delay: 60ms; } .sheet.is-open .sheet__body > *:nth-child(3) { animation-delay: 110ms; } .sheet.is-open .sheet__body > *:nth-child(4) { animation-delay: 160ms; }
@keyframes sheet-rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.sheet__points li::before { background: var(--c-hot); border-color: var(--c-deep); }
.sheet__cta { border-top: 0; margin-bottom: 0; padding: 12px var(--gut) calc(18px + env(safe-area-inset-bottom)); background: var(--c-paper-hi); }

/* ============================================================ movimento (só com .motion; sem ele a revista já está completa) */
.scene .px { transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * var(--sp, 0) * 1px), 0) rotate(var(--r, 0deg)); will-change: transform; }
.motion .rv5 { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.7s ease, transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .is-in .rv5 { opacity: 1; transform: none; }
.motion .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io) calc(var(--i, 0) * 120ms + 0.15s); }
.motion .is-in .wipe { clip-path: inset(0 0 0 0); }
.motion .wipe-img img { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-io) calc(var(--i, 0) * 120ms + 0.15s); }
.motion .is-in .wipe-img img { clip-path: inset(0 0 0 0); }
.motion .lineup { overflow: hidden; display: block; }
.motion .lineup > span { display: block; transform: translate3d(0, 108%, 0); transition: transform 0.9s var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.motion .is-in .lineup > span { transform: none; }
.motion .draw path, .motion .draw line { stroke-dasharray: 360; stroke-dashoffset: 360; transition: stroke-dashoffset 0.9s var(--ease-io) calc(var(--i, 0) * 100ms + 0.5s); }
.motion .is-in .draw path, .motion .is-in .draw line { stroke-dashoffset: 0; }
.motion .stamp-in { transform: scale(1.22) rotate(-8deg); opacity: 0; transition: transform 0.55s var(--ease-out) 1.2s, opacity 0.3s ease 1.2s; }
.motion .is-in .stamp-in { transform: none; opacity: 1; }
.motion .assemble { opacity: 0; translate: var(--ax, -18%) var(--ay, 0); transition: opacity 0.7s ease calc(var(--i, 0) * 180ms), translate 1.1s var(--ease-out) calc(var(--i, 0) * 180ms); }
.motion .is-in .assemble { opacity: 1; translate: 0 0; }
.motion .drift { transform: translate3d(0, calc((var(--p, 0.5) - 0.5) * var(--sp, 0) * 1px), 0); }
.cue5 i { animation: cue5 2.4s var(--ease-out) infinite; }
@keyframes cue5 { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .scene .px, .kit-photo5 { transform: none !important; }
  .cue5 i { animation: none; }
  .cta::before, .cta svg { transition: none; }
  .sheet__panel, .sheet:not(.is-open) .sheet__panel { transition-duration: 0.01ms; }
  .sheet.is-open .sheet__body > * { animation: none; }
}

/* ============================================================ consentimento (aparece só se houver pixel configurado) */
.consent5 { position: fixed; left: 50%; bottom: 10px; z-index: 90; width: calc(100% - 20px); max-width: 500px; transform: translateX(-50%); background: var(--c-ink); color: var(--c-paper-hi); padding: 14px 16px; display: grid; gap: 10px; font-size: 15px; line-height: 1.4; }
.consent5 p { margin: 0; }
.consent5 div { display: flex; gap: 8px; }
.consent5 button { min-height: 44px; padding: 0 16px; font-weight: 800; font-size: 15px; background: var(--c-hot); color: var(--c-ink); }
.consent5 button[data-c="denied"] { background: transparent; color: var(--c-paper-hi); border: 2px solid currentColor; }