/* Cena — rework "complete a frase" (#instrumento) + história passo a passo (#decisao). Carrega sempre. */
.cena-decider, .cena-story, .cena-nav { font-family: "Segoe UI", Roboto, Arial, sans-serif; }

/* ---- #instrumento: complete a frase ---- */
.cena-builder { font-family: Georgia, serif; font-size: clamp(1.4rem, 2.6vw, 1.7rem); color: #09212C; line-height: 1.5; margin: 0 0 22px; }
.cena-blank { border-bottom: 2px dashed #97927D; color: #847a52; padding: 0 6px; }
.cena-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cena-chip { background: #fff; border: 1px solid rgba(9,33,44,.14); border-radius: 999px; padding: 10px 18px; cursor: pointer; font-family: Georgia, serif; font-size: 1rem; color: #09212C; transition: .15s; }
.cena-chip:hover, .cena-chip.on { border-color: #97927D; }
.cena-chip.on { box-shadow: 0 0 0 1px #97927D; background: #FFFDF9; }
.cena-answer { max-width: 660px; font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.75; color: #36454D; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s ease, opacity .5s ease; margin-top: 16px; }
.cena-answer.in { max-height: 420px; opacity: 1; }
.cena-answer b { color: #09212C; font-weight: 600; }
.cena-il { color: #847a52; text-decoration: underline; text-decoration-color: #C9B47A; text-underline-offset: 2px; }

/* separador entre o complete-a-frase e a história */
.cena-sep { display: flex; align-items: center; gap: 14px; margin: 34px 0 22px; max-width: 700px; }
.cena-sep span { flex: 1; height: 1px; background: rgba(9,33,44,.12); }
.cena-sep em { font-style: normal; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #847a52; }

/* ---- #decisao: história passo a passo ---- */
.cena-story { max-width: 700px; }
.cena-step { display: flex; gap: 18px; align-items: flex-start; opacity: .26; transition: opacity .5s ease; padding: 13px 0; }
.cena-step.live { opacity: 1; }
.cena-dot { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(9,33,44,.14); display: grid; place-items: center; font-family: Georgia, serif; font-size: 1rem; color: #97927D; background: #F8F7F4; transition: .35s; }
.cena-step.live .cena-dot { border-color: #C9B47A; background: #C9B47A; color: #09212C; }
.cena-step.bad.live .cena-dot { border-color: #9f463c; background: #9f463c; color: #fff; }
.cena-sx { font-family: Georgia, serif; font-size: 1.16rem; line-height: 1.5; color: #1B2A31; padding-top: 4px; }
.cena-sx b { color: #09212C; }
.cena-step.bad .cena-sx b { color: #9f463c; }

.cena-nav { display: flex; gap: 12px; align-items: center; margin-top: 26px; }
.cena-ghost { background: none; border: 1px solid rgba(9,33,44,.16); color: #09212C; padding: 12px 22px; border-radius: 11px; cursor: pointer; font-family: "Segoe UI", sans-serif; font-size: 14px; font-weight: 600; }
.cena-ghost:hover { background: #fff; }
.cena-ghost:disabled { opacity: .4; cursor: default; }
.cena-cta { display: inline-flex; align-items: center; gap: 10px; background: #09212C; color: #fff; border: none; padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: "Segoe UI", sans-serif; transition: filter .15s, transform .12s; }
.cena-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.cena-cta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.cena-cta.cena-final { background: #97927D; color: #09212C; }

/* ---- #decisao — Maior risco: fecho misterioso navy, layout editorial + dominó futurista ---- */
body.editorial #decisao { background: #09212C; color: #EAE7DE; padding-top: clamp(64px,6.5vw,96px); padding-bottom: clamp(60px,6vw,92px); overflow: hidden; }
#decisao .mr { display: grid; grid-template-columns: 1fr auto 1fr; gap: 52px; align-items: center; position: relative; }
.mr-divider { align-self: stretch; width: 1px; background: linear-gradient(180deg, transparent, rgba(201,180,122,.32) 18%, rgba(201,180,122,.32) 82%, transparent); }
.mr-copy { max-width: 460px; }
.mr-eyebrow { display: flex; align-items: center; gap: 14px; font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: #C9B47A; font-weight: 600; }
.mr-eyebrow::after { content: ""; flex: 0 0 52px; height: 1px; background: linear-gradient(90deg, #C9B47A, transparent); }
.mr-title { font-family: Georgia, serif; font-weight: 400; font-size: clamp(2.1rem, 3.3vw, 2.75rem); line-height: 1.22; color: #fff; margin: 22px 0 24px; letter-spacing: -.008em; }
.mr-sub { font-family: Georgia, serif; font-size: 1.13rem; line-height: 1.85; color: #C9C3B4; font-weight: 300; max-width: 430px; margin: 0 0 36px; }
.mr-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.mr-btn { display: inline-flex; align-items: center; gap: 12px; background: transparent; color: #C9B47A; text-decoration: none; padding: 14px 2px; font-family: "Segoe UI", sans-serif; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid rgba(201,180,122,.4); transition: .25s; }
.mr-btn svg { width: 15px; height: 15px; transition: transform .25s; }
.mr-btn:hover { color: #fff; border-color: #fff; letter-spacing: .14em; }
.mr-btn:hover svg { transform: translateX(4px); }
.mr-wa { color: #8b8578; font-size: 13px; font-weight: 400; letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid rgba(139,133,120,.4); padding-bottom: 2px; transition: .2s; }
.mr-wa:hover { color: #D9D4C3; border-color: #D9D4C3; }

/* palco futurista da dominó */
.mr-viz { position: relative; display: grid; place-items: center; }
.f-stage { position: relative; width: 100%; max-width: 400px; height: 300px; }
.f-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 46% at 50% 40%, rgba(201,180,122,.2), transparent 66%); pointer-events: none; }
.f-grid { position: absolute; left: -35%; right: -35%; bottom: 0; height: 190px;
  background-image: repeating-linear-gradient(90deg, rgba(201,180,122,.16) 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, rgba(201,180,122,.13) 0 1px, transparent 1px 40px);
  transform: perspective(360px) rotateX(67deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 6%, transparent 84%); mask-image: linear-gradient(to top, #000 6%, transparent 84%); }
.f-dom { position: absolute; left: 0; right: 0; bottom: 90px; display: flex; justify-content: center; align-items: flex-end; gap: 16px; }
.f-tile { position: relative; width: 24px; height: 92px; border-radius: 4px; transform-origin: bottom center; transition: transform .55s cubic-bezier(.5,.06,.28,1);
  background: linear-gradient(102deg, #2c5768 0 44%, #0c2732 45% 100%);
  box-shadow: 0 0 0 1px rgba(201,180,122,.3), 0 0 22px rgba(201,180,122,.18), 0 16px 22px rgba(0,0,0,.55); }
.f-tile::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 7px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #ecd8a0, #a8935f); box-shadow: 0 0 12px rgba(201,180,122,.55); }
.f-tile::after { content: ""; position: absolute; left: 8px; top: 42%; width: 5px; height: 5px; border-radius: 50%; background: rgba(236,216,160,.75); box-shadow: 0 0 7px rgba(201,180,122,.7); }
.f-tile.trigger { background: linear-gradient(102deg, #cc5643 0 44%, #5e211a 45% 100%); box-shadow: 0 0 0 1px rgba(224,112,95,.55), 0 0 28px rgba(205,65,48,.55), 0 16px 22px rgba(0,0,0,.55); animation: mrRedpulse 1.9s ease-in-out infinite; }
.f-tile.trigger::before { background: linear-gradient(180deg, #ff9c85, #c04a38); box-shadow: 0 0 16px rgba(224,90,70,.85); }
.f-tile.trigger::after { background: rgba(255,224,214,.85); }
@keyframes mrRedpulse { 0%,100% { filter: none; } 50% { filter: drop-shadow(0 0 16px rgba(220,70,55,.75)); } }
.f-lab { position: absolute; top: 44px; left: 6%; font-family: Georgia, serif; font-style: italic; color: #e0705f; font-size: .95rem; text-shadow: 0 0 14px rgba(224,90,70,.5); z-index: 2; }
.f-lab i { display: block; width: 1px; height: 30px; background: linear-gradient(rgba(224,112,95,.7), transparent); margin: 5px 0 0 6px; }
@media (max-width: 860px) { #decisao .mr { grid-template-columns: 1fr; } .mr-divider { display: none; } .mr-viz { order: -1; margin-bottom: 12px; } }