--border-* greys. The only hue is the accent on interactive things and on the two purposes that are an offer ("Troca","À venda"),which is the same rule the vitrine already follows. Rule 1 holds too: the accent is never a fill. MOTION: three moments,each tied to the object. 1 the turn — the page-turn itself 2 the settle — pockets arrive in reading order as a page lands 3 the pull — a filled pocket lifts on hover,the way a card comes out Nothing ambient,no parallax,no scroll-jacking. All three are off under prefers-reduced-motion; the page still works,it just switches instead of turning. The rv-fic-* namespace is this page's alone. It reuses .rv-sc-tile (the one public
tile template) and .rv-bdp-purpose (the vitrine's badge) rather than restyling
them — a card must look the same wherever it is published. ═══════════════════════════════════════════════════════════════════════════════ */ .rv-fic {max-width: 1400px; margin: 0 auto; padding: 20px var(--gutter) 96px;} .rv-fic-head {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: 18px 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--border-subtle);} .rv-fic-who {display: flex; align-items: center; gap: var(--space-3); min-width: 0;} .rv-fic-avatar {width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border-subtle); flex-shrink: 0;} .rv-fic-whotext {min-width: 0;} .rv-fic-eyebrow {margin: 0 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--text-tertiary);} .rv-fic-eyebrow a {color: var(--accent-link);} .rv-fic-title {margin: 0; font-size: clamp(24px,3.4vw,34px); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--text-primary); overflow-wrap: anywhere;} .rv-fic-facts {display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; font-size: 12.5px; color: var(--text-tertiary);} .rv-fic-fact {display: inline-flex; align-items: center; font-variant-numeric: tabular-nums;} .rv-fic-fact + .rv-fic-fact::before {content: "·"; margin: 0 var(--space-2) 0 0; color: var(--border-strong);} .rv-fic-wa {display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--radius-sm); border: 1px solid var(--interactive-border, var(--border-strong)); color: var(--accent-link); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;} .rv-fic-wa:hover {border-color: var(--accent-link);} .rv-fic-stage {position: relative; padding: clamp(14px,2.4vw,30px) clamp(10px,2vw,26px); background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 14px;} .rv-fic-stage:focus-visible {outline: 2px solid var(--accent-link); outline-offset: 3px;} .rv-fic-book {position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 0; perspective: 2400px; perspective-origin: 50% 40%;} .rv-fic-book {flex-direction: column; align-items: center;} .rv-fic-stage[data-mode] .rv-fic-book {flex-direction: row; flex-wrap: nowrap;} .rv-fic-leaf {position: relative; flex: 1 1 0; min-width: 0; max-width: calc(var(--rv-fic-cols, 3) * 210px); margin: 0 auto 18px; padding: clamp(12px,1.4vw,18px); background: var(--bg-base); border: 1px solid var(--border-subtle); border-radius: 10px;} .rv-fic-stage[data-mode] .rv-fic-leaf {margin-bottom: 0;} .rv-fic-leaf.is-off {display: none;} .rv-fic-grid {display: grid; grid-template-columns: repeat(var(--rv-fic-cols, 3),minmax(0,1fr)); gap: clamp(6px,.8vw,12px);} .rv-fic-stage[data-mode="spread"] .rv-fic-leaf.is-left {border-top-right-radius: 2px; border-bottom-right-radius: 2px; margin-right: 13px;} .rv-fic-stage[data-mode="spread"] .rv-fic-leaf.is-right {border-top-left-radius: 2px; border-bottom-left-radius: 2px; margin-left: 13px;} .rv-fic-stage[data-mode="spread"] .rv-fic-book::before {content: ""; position: absolute; top: 6%; bottom: 6%; left: 50%; width: 26px; transform: translateX(-50%); background: repeating-linear-gradient(to bottom,transparent 0 18px,var(--border-strong) 18px 20px,transparent 20px 64px),linear-gradient(to right,transparent 0,color-mix(in srgb,var(--border-subtle) 60%,transparent) 22%,color-mix(in srgb,var(--border-strong) 45%,transparent) 50%,color-mix(in srgb,var(--border-subtle) 60%,transparent) 78%,transparent 100%); pointer-events: none; z-index: 3;} .rv-fic-pageno {position: absolute; bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--text-tertiary); opacity: .75;} .rv-fic-leaf .rv-fic-pageno {right: 14px;} .rv-fic-stage[data-mode="spread"] .rv-fic-leaf.is-left .rv-fic-pageno {left: 14px; right: auto;} .rv-fic-stage[data-mode="single"] .rv-fic-pageno {left: 0; right: 0; text-align: center;} .rv-fic-slot {min-width: 0;} .rv-fic-slot .rv-sc-tile {height: 100%;} .rv-fic-slot.is-empty {height: 100%; border-radius: var(--rv-bd-radius, 6px); border: 1px solid var(--border-subtle); background: repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb,var(--border-subtle) 55%,transparent) 6px 7px);} .rv-fic-slot.is-empty::before {content: ""; display: block; aspect-ratio: var(--rv-bd-card-aspect, 63 / 88);} .rv-fic-stage[data-mode] .rv-fic-leaf:not(.is-off) .rv-fic-slot {animation: rv-fic-settle .32s cubic-bezier(.2,.7,.3,1) backwards; animation-delay: calc(min(var(--i, 0),12)*26ms) ;} @keyframes rv-fic-settle {from {opacity: 0; transform: translateY(7px) scale(.985);} to {opacity: 1; transform: none;}} @media (hover: hover) and (pointer: fine) {.rv-fic-slot.is-filled {transition: transform .18s cubic-bezier(.2,.7,.3,1);} .rv-fic-slot.is-filled:hover {transform: translateY(-5px);} .rv-fic-slot.is-filled:hover .rv-sc-tile {border-color: var(--border-strong);}} .rv-fic-sheet {position: absolute; transform-style: preserve-3d; transition: transform .56s cubic-bezier(.42,.02,.24,1); z-index: 4; pointer-events: none; will-change: transform;} .rv-fic-sheet.is-right {transform-origin: left center; transform: rotateY(0deg);} .rv-fic-sheet.is-right.is-turned {transform: rotateY(-178deg);} .rv-fic-sheet.is-left {transform-origin: right center; transform: rotateY(0deg);} .rv-fic-sheet.is-left.is-turned {transform: rotateY(178deg);} .rv-fic-face {position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; box-shadow: 0 18px 40px -18px color-mix(in srgb,var(--border-strong) 85%,transparent);} .rv-fic-face.is-back {transform: rotateY(180deg);} .rv-fic-face > .rv-fic-leaf {width: 100%; height: 100%; margin: 0; max-width: none;} .rv-fic-face .rv-fic-slot {animation: none !important;} .rv-fic-stage.is-turning .rv-fic-leaf:not(.is-off) {filter: brightness(.985);} .rv-fic-book.is-slid-fwd .rv-fic-leaf:not(.is-off) {animation: rv-fic-in-fwd .28s cubic-bezier(.2,.7,.3,1);} .rv-fic-book.is-slid-back .rv-fic-leaf:not(.is-off) {animation: rv-fic-in-back .28s cubic-bezier(.2,.7,.3,1);} @keyframes rv-fic-in-fwd {from {opacity: 0; transform: translateX(26px);} to {opacity: 1; transform: none;}} @keyframes rv-fic-in-back {from {opacity: 0; transform: translateX(-26px);} to {opacity: 1; transform: none;}} .rv-fic-nav,.rv-fic-windows {display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: clamp(14px,2vw,22px);} .rv-fic-windows {margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle);} .rv-fic-turn {display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min, 44px); padding: 8px 14px; background: var(--bg-base); border: 1px solid var(--interactive-border, var(--border-strong)); border-radius: var(--radius-sm); color: var(--interactive-fg, var(--text-primary)); font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer;} .rv-fic-turn:hover:not(:disabled) {border-color: var(--accent-link); color: var(--accent-link);} .rv-fic-turn:disabled {opacity: .4; cursor: default;} .rv-fic-count,.rv-fic-windowlabel {margin: 0; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-tertiary); text-align: center;} .rv-fic-cta {margin: clamp(28px,5vw,52px) auto 0; max-width: 620px; padding: clamp(20px,3vw,30px); text-align: center; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: 14px;} .rv-fic-cta-title {margin: 0 0 6px; font-size: clamp(17px,2.2vw,21px); font-weight: 700; letter-spacing: -.015em; color: var(--text-primary);} .rv-fic-cta-body {margin: 0 auto 16px; max-width: 46ch; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary);} .rv-fic-cta-acts {display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; margin: 0;} .rv-fic-cta-primary {display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); padding: 10px 20px; background: var(--accent-cta); color: var(--accent-cta-fg, #fff); border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; text-decoration: none;} .rv-fic-cta-or {font-size: 13px; color: var(--text-tertiary);} .rv-fic-cta-link {display: inline-flex; align-items: center; min-height: var(--tap-min, 44px); padding: 10px 6px; color: var(--accent-link); font-size: 14px; font-weight: 600;} .rv-fic-missing {max-width: 560px; margin: 40px auto 80px;} .rv-fic-missing .rv-fic-title {margin: 18px 0 10px;} .rv-fic-missing-body {margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: var(--text-secondary);} @media (max-width: 720px) {.rv-fic {padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile);} .rv-fic-head {align-items: flex-start; gap: var(--space-3);} .rv-fic-wa {width: 100%; justify-content: center;} .rv-fic-nav .rv-fic-turn span,.rv-fic-windows .rv-fic-turn span {display: none;} .rv-fic-nav .rv-fic-turn {padding: 8px 12px;}} @media (prefers-reduced-motion: reduce) {.rv-fic-stage[data-mode] .rv-fic-leaf:not(.is-off) .rv-fic-slot,.rv-fic-book.is-slid-fwd .rv-fic-leaf:not(.is-off),.rv-fic-book.is-slid-back .rv-fic-leaf:not(.is-off) {animation: none;} .rv-fic-slot.is-filled {transition: none;} .rv-fic-slot.is-filled:hover {transform: none;} .rv-fic-sheet {transition: none;}}){}