/* ACJ Quadros: paleta unificada com a Home e efeitos (mola física).
   Carrega por último. */

/* ---------- Paleta: creme quente + noite + dourado (casa com o hero) ---------- */
:root {
  --wall: #f1eee8;
  --wall-2: #e9e5dd;
  --wall-3: #faf8f4;
  --ink: #141311;
  --ink-2: #48443d;
  --ink-3: #6f695f;
  --line: rgb(20 19 17 / .11);
  --line-2: rgb(20 19 17 / .2);
  --tape: #f2b544;
  --tape-deep: #b47a14;
  --shadow-tint: 30 18% 22%;
  --glass-bg: rgb(250 248 244 / .58);
  --night: #0e0d0c;
  --night-2: #191715;
}
::selection { background: var(--tape); color: #141311; }
body { background: var(--wall); }

/* Títulos com itálico serifado, igual à Home */
.h2 em, .story__title em, .h3 em {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-variation-settings: normal;
}
.h2 { font-size: clamp(34px, 4.6vw, 68px); }
.story__title em { color: var(--tape-deep); }

/* ---------- Seções escuras ---------- */
[data-dark] { background: var(--night); color: var(--night-ink); }
[data-dark] .lede, [data-dark] .plaques__copy .lede { color: var(--night-ink-2); }
[data-dark] .eyebrow { color: var(--night-ink-2); }
[data-dark] .display em, [data-dark] .h2 em { color: var(--tape); }
[data-dark] .btn--glass { --glass-bg: rgb(255 255 255 / .08); --glass-brd: rgb(255 255 255 / .16); --glass-hi: rgb(255 255 255 / .2); color: var(--night-ink); }
.phead[data-dark] { position: relative; overflow: hidden; isolation: isolate; padding-bottom: clamp(56px, 7vw, 100px); }
.phead[data-dark]::before {
  content: ''; position: absolute; z-index: -1; inset: -30% 30% 20% -20%;
  background: radial-gradient(closest-side, rgb(242 181 68 / .14), transparent 70%);
}
.phead__art { box-shadow: 0 50px 90px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(255 255 255 / .06); }
.plaques[data-dark] .plaques__big { color: var(--tape); }
.models { border-top: 0; }

/* rodapé escuro, fecha a página como o hero abre */
.footer { background: var(--night); color: var(--night-ink); border-top: 0; }
.footer .logo-d { display: none; } .footer .logo-l { display: block; }
.footer__brand p, .footer__bottom, .footer__credit { color: var(--night-ink-2); }
.footer__credit strong { color: var(--night-ink); }
.footer__bottom { border-color: rgb(255 255 255 / .1); }
.footer .btn--glass { --glass-bg: rgb(255 255 255 / .06); --glass-brd: rgb(255 255 255 / .14); --glass-hi: rgb(255 255 255 / .18); color: var(--night-ink); }

/* ---------- Barra de progresso de leitura ---------- */
.fx-progress {
  position: fixed; z-index: 60; left: 0; right: 0; top: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--tape-deep), var(--tape)); pointer-events: none;
}

/* ---------- Títulos: palavras sobem uma a uma ---------- */
.fx-w { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding-bottom: .06em; margin-bottom: -.06em; }
.fx-w > span { display: inline-block; will-change: transform; }
.js .fx-split:not(.fx-in) .fx-w > span { transform: translateY(110%) rotate(4deg); }
.fx-split.fx-in .fx-w > span { transform: none; transition: transform 1100ms var(--spring-soft); transition-delay: calc(var(--i) * 45ms); }

/* ---------- Imagens: abrem como uma cortina ---------- */
.js .fx-reveal-img { clip-path: inset(14% 10% 14% 10% round 18px); }
.js .fx-reveal-img > img, .js .fx-reveal-img > video { transform: scale(1.18); }
.fx-reveal-img.fx-in { clip-path: inset(0 0 0 0 round 0); transition: clip-path 1300ms var(--spring-soft); }
.fx-reveal-img.fx-in > img, .fx-reveal-img.fx-in > video { transform: scale(1); transition: transform 1600ms var(--spring-soft); }

/* ---------- Carregando imagens: brilho e foco ---------- */
.fx-ph { background: linear-gradient(100deg, var(--wall-2) 30%, var(--wall-3) 50%, var(--wall-2) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite; }
[data-dark] .fx-ph, .stage .fx-ph { background-image: linear-gradient(100deg, #1b1917 30%, #24211e 50%, #1b1917 70%); }
@keyframes shimmer { to { background-position: -150% 0; } }
img.fx-ld { opacity: 0; filter: blur(14px); transform: scale(1.04); }
img.fx-ok { opacity: 1; filter: none; transition: opacity 600ms ease, filter 800ms ease, transform 1200ms var(--spring-soft); }

/* ---------- Elementos magnéticos (seguem o cursor de leve) ---------- */
.fx-mag { will-change: translate; }

/* ---------- Troca de página suave ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 260ms cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vtIn 620ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-14px) scale(.99); filter: blur(4px); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } }
.nav, .tabbar { view-transition-name: chrome; }
.tabbar { view-transition-name: tabbar; }
::view-transition-group(chrome), ::view-transition-group(tabbar) { animation-duration: 0s; }

/* ---------- Ajustes finos ---------- */
.marquee__track li { color: var(--ink); }
.clients { background: var(--wall-3); }
.steps__list li { background: var(--wall-3); transition: transform 600ms var(--spring), box-shadow 400ms ease; }
@media (hover: hover) and (pointer: fine) { .steps__list li:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px hsl(var(--shadow-tint) / .5); } }
.model { transition: transform 700ms var(--spring), box-shadow 400ms ease; }
.channel { transition: transform 600ms var(--spring), box-shadow 300ms ease, background-color 200ms ease; }
.faq details { transition: background-color 200ms ease; }
.faq details[open] summary i { transform: rotate(45deg); }
.faq summary i { transition: transform 500ms var(--spring); }

@media (prefers-reduced-motion: reduce) {
  .js .fx-split:not(.fx-in) .fx-w > span, .js .fx-reveal-img, .js .fx-reveal-img > img { transform: none; clip-path: none; }
  img.fx-ld { opacity: 1; filter: none; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Luz que segue o cursor nas seções escuras */
.fx-glow { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0; transition: opacity 600ms ease; background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%), rgb(242 181 68 / .13), transparent 60%); }
[data-dark] > :not(.fx-glow):not(.stage__glow):not(.stage__scroll) { position: relative; z-index: 1; }
.stage > .stage__glow { z-index: -1; }
.niches__rail, .models__grid, .steps__list, .gsec__grid, .visit__side { perspective: 1200px; }
.ncard, .model, .gitem, .channel, .steps__list li { transform-style: preserve-3d; }
.eyebrow { display: block; }
.eyebrow::before { display: inline-block; vertical-align: middle; margin: -3px 10px 0 0; }

/* ---------- Vídeo do Altieri ---------- */
.story__video { position: relative; }
.story__video video { width: 100%; aspect-ratio: 9 / 14; object-fit: cover; border-radius: 18px; background: var(--night-2); display: block; box-shadow: 0 50px 90px -45px hsl(var(--shadow-tint) / .8); }
.story__sound {
  position: absolute; left: 14px; bottom: 44px; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; color: #fff;
  --glass-bg: rgb(20 19 17 / .45); --glass-brd: rgb(255 255 255 / .22); --glass-hi: rgb(255 255 255 / .28);
  transition: transform 500ms var(--spring);
}
.story__sound i { font-size: 18px; }
.story__sound:active { transform: scale(.94); }
.story__sound[aria-pressed="true"] { background: var(--tape); color: #141311; border-color: transparent; }

/* ---------- Avaliações ---------- */
.reviews { padding: clamp(80px, 10vw, 140px) 0 clamp(70px, 8vw, 110px); background: var(--night); color: var(--night-ink); overflow: hidden; }
.reviews .eyebrow { color: var(--night-ink-2); }
.reviews .h2 em { color: var(--tape); }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.reviews__score { display: grid; gap: 4px; justify-items: end; text-decoration: none; color: inherit; }
.reviews__score strong { font-size: clamp(56px, 6vw, 84px); line-height: .9; font-weight: 850; letter-spacing: -.04em; }
.reviews__stars { color: var(--tape); font-size: 20px; display: flex; gap: 2px; }
.reviews__count { font-size: 14px; color: var(--night-ink-2); display: inline-flex; gap: 6px; align-items: center; }
@media (hover: hover) and (pointer: fine) { .reviews__score:hover .reviews__count { color: var(--tape); } }
.reviews__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(280px, 30vw, 380px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; cursor: grab;
  padding: 48px max(var(--gut), (100vw - var(--wrap)) / 2) 30px; scroll-padding-inline: max(var(--gut), (100vw - var(--wrap)) / 2);
  perspective: 1200px;
}
.reviews__rail::-webkit-scrollbar { display: none; }
.reviews__rail.dragging { cursor: grabbing; scroll-snap-type: none; }
.rcard {
  margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; border-radius: 22px;
  background: linear-gradient(180deg, rgb(255 255 255 / .07), rgb(255 255 255 / .025)); border: 1px solid rgb(255 255 255 / .1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 30px 60px -40px rgb(0 0 0 / .9);
  user-select: none; transition: transform 700ms var(--spring), border-color 300ms ease;
}
.js .rcard { opacity: 0; transform: translateX(60px) scale(.96); }
.js .rcard.in { opacity: 1; transform: none; transition: transform 1000ms var(--spring) var(--d, 0ms), opacity 500ms ease var(--d, 0ms), border-color 300ms ease; }
@media (hover: hover) and (pointer: fine) { .rcard:hover { border-color: rgb(242 181 68 / .45); } }
.rcard__stars { color: var(--tape); display: flex; gap: 2px; font-size: 16px; }
.rcard__text { margin: 0; flex: 1; font-size: 18px; line-height: 1.5; color: var(--night-ink); font-family: var(--serif); font-size: 21px; line-height: 1.35; }
.rcard__text--long { font-size: 18px; }
.rcard__who { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .1); }
.rcard__who strong { display: block; font-size: 15px; }
.rcard__who small { font-size: 12px; color: var(--night-ink-2); }
.rcard__av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; flex: none; color: #141311; background: hsl(var(--h) 55% 72%); }
.reviews__nav { display: flex; align-items: center; gap: 24px; }
.reviews__progress { flex: 1; height: 2px; background: rgb(255 255 255 / .12); border-radius: 2px; overflow: hidden; }
.reviews__progress span { display: block; height: 100%; background: var(--tape); transform-origin: 0 50%; transform: scaleX(.2); }
.reviews__btns { display: flex; gap: 8px; }
.reviews .btn--glass { --glass-bg: rgb(255 255 255 / .08); --glass-brd: rgb(255 255 255 / .16); --glass-hi: rgb(255 255 255 / .2); color: var(--night-ink); }
@media (max-width: 560px) {
  .reviews__score { justify-items: start; }
  .reviews__rail { grid-auto-columns: 84%; gap: 12px; }
  .rcard__text { font-size: 19px; } .rcard__text--long { font-size: 17px; }
}
.pick img { object-fit: cover; }
#lbBuild[hidden] { display: none; }

/* ---------- Vídeo do Altieri: play com som ---------- */
.story__video video { cursor: pointer; }
.story__play {
  position: absolute; inset: 0 0 32px; z-index: 2; border: 0; border-radius: 18px; cursor: pointer; color: #fff;
  display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center;
  background: radial-gradient(closest-side, rgb(0 0 0 / .45), rgb(0 0 0 / .15)), linear-gradient(180deg, transparent 50%, rgb(0 0 0 / .55));
  transition: opacity 400ms ease, visibility 0s linear 0s;
}
.story__play > span:not(.story__play-btn) { font-weight: 750; font-size: 18px; letter-spacing: -.01em; text-shadow: 0 2px 12px rgb(0 0 0 / .5); }
.story__play small { font-size: 13px; opacity: .8; }
.story__play-btn {
  position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 6px;
  background: var(--tape); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .6), inset 0 1px 0 rgb(255 255 255 / .5);
  transition: transform 600ms var(--spring);
}
.story__play-btn svg { width: 34px; height: 34px; fill: #141311; margin-left: 4px; }
.story__play-btn::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgb(242 181 68 / .6); animation: ring 2.2s ease-out infinite; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .story__play:hover .story__play-btn { transform: scale(1.1); } }
.story__play:active .story__play-btn { transform: scale(.92); }
.story__video.playing .story__play { opacity: 0; visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.story__sound { opacity: 0; pointer-events: none; transition: opacity 300ms ease, transform 500ms var(--spring); }
.story__video.playing .story__sound { opacity: 1; pointer-events: auto; }
.story__bar { position: absolute; left: 16px; right: 16px; bottom: 44px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / .25); overflow: hidden; z-index: 2; opacity: 0; transition: opacity 300ms ease; }
.story__video.playing .story__bar, .story__video:has(video:not([data-x])) .story__bar { opacity: 1; }
.story__bar span { display: block; height: 100%; background: var(--tape); transform-origin: 0 50%; transform: scaleX(0); transition: transform 250ms linear; }
.story__sound { bottom: 58px; }

/* ---------- Abertura: logo da marca com o quadrado carregando em volta ---------- */
.intro { flex-direction: column; gap: 26px; }
.intro__box { position: relative; width: min(56vw, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.intro__frame { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; overflow: visible; fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.intro__frame rect { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
.intro__frame .intro__track { stroke: rgb(255 255 255 / .1); }
.intro__frame .intro__run { stroke: var(--tape); stroke-linecap: round; stroke-dasharray: 22 78; animation: lap 1.5s cubic-bezier(.6, .1, .4, .9) infinite !important; filter: drop-shadow(0 0 6px rgb(242 181 68 / .55)); }
@keyframes lap { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
.intro__logo { width: 64%; height: auto; opacity: 0; animation: introLogo 1000ms var(--spring-soft) 150ms forwards; }
@keyframes introLogo { from { opacity: 0; transform: scale(.86); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.intro__tag { animation-delay: 500ms; }
.intro.out .intro__box { transform: scale(1.12); opacity: 0; transition: transform 900ms cubic-bezier(.77, 0, .175, 1), opacity 500ms ease; }
.intro.out .intro__tag { opacity: 0; transition: opacity 300ms ease; }
.intro .intro__frame { transform: none; }
.intro { display: grid; place-items: initial; align-content: center; justify-items: center; gap: 26px; }
.size small:empty { display: none; }