/* ==========================================================================
   story.css — camada da Versão 4 (D) "A máquina que esperava".
   Blocos novos que o arco de storytelling pede e que a/b/c não têm:
   herói full-bleed com usinagem, cenas com fundo fotográfico, dupla-prova.
   Depende de tokens.css + base.css + components.css.
   ========================================================================== */

/* ── Fundo fotográfico de cena (usinagem protagonista) ── */
.scene { position: relative; overflow: hidden; isolation: isolate; }
.scene__bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
.scene__bg::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,14,26,.82) 0%, rgba(10,14,26,.72) 55%, rgba(10,14,26,.9) 100%); }
.scene > .container { position: relative; z-index: 1; }

/* ── D1 Herói-cena — abre o loop, zero sistema ── */
.story-hero { min-height: min(88vh, 760px); display: flex; align-items: center;
  padding-top: calc(var(--header-h) + var(--sp-64)); padding-bottom: var(--sp-80); }
.story-hero__inner { max-width: 40ch; }
.story-hero__title { font-size: clamp(2.2rem, 6vw, var(--f-h1)); line-height: 1.08; margin-bottom: var(--sp-24); }
.story-hero__title .hl { color: var(--brand-blue); }
.story-hero__sub { color: var(--tx-2-dark); font-size: var(--f-body-lg); max-width: 54ch; margin-bottom: var(--sp-32); }
.story-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-16); align-items: center; }
.story-hero__fine { margin-top: var(--sp-16); font-size: var(--f-sm); color: var(--tx-3-dark); }
/* pergunta plantada — fecha o loop no D7 */
.story-hook { margin-top: var(--sp-48); padding-top: var(--sp-24); border-top: 1px solid var(--border-dark);
  font-size: var(--f-body-lg); color: var(--tx-2-dark); font-style: italic; max-width: 46ch; }

/* ── Logo (imagem) — trava a altura; base.css força height:auto ── */
.site-header__logo img { height: 26px; width: auto; }
.site-footer img { height: 28px; width: auto; }
.story-close__logo { height: 34px; width: auto; margin: 0 auto var(--sp-24); }

/* ── D2 Dor — cabeçalho + foto da bancada lado a lado ── */
.dor-lead { display: grid; gap: var(--sp-32); align-items: center; margin-bottom: var(--sp-48); }
@media (min-width: 900px) { .dor-lead { grid-template-columns: 1fr 1fr; gap: var(--sp-64); } }
.dor-shot { margin: 0; }

/* ── D3 Custo — uma frase âncora sobre fundo em movimento ── */
.cost { text-align: center; }
.cost__line { max-width: 30ch; margin: 0 auto var(--sp-24); font-size: clamp(1.5rem, 3.5vw, var(--f-h2));
  line-height: 1.25; font-weight: 700; color: var(--tx-1-dark); }
.cost__line em { color: var(--cta-orange); font-style: normal; }
.cost__hook { max-width: 48ch; margin: var(--sp-32) auto 0; color: var(--tx-2-dark); font-style: italic; }

/* ── D4 Virada — espiada desfocada + teaser ── */
.tease { display: grid; gap: var(--sp-48); align-items: center; }
@media (min-width: 900px) { .tease { grid-template-columns: 1fr 1fr; gap: var(--sp-64); } }
.tease__body { max-width: 46ch; }
.tease__q { font-size: var(--f-h3); font-weight: 700; margin-bottom: var(--sp-24); color: var(--tx-1-light); }
.section--dark .tease__q { color: var(--tx-1-dark); }
.tease__peek { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-dark); box-shadow: var(--shadow-dark); }
.tease__peek img { filter: blur(7px) saturate(.9); transform: scale(1.06); }
.tease__peek::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 50% 40%, transparent 30%, rgba(10,14,26,.55) 100%); }
.tease__peek-label { position: absolute; inset: auto 0 0 0; z-index: 1; padding: var(--sp-16);
  font-family: var(--mono); font-size: var(--f-xs); color: var(--tx-2-dark);
  background: linear-gradient(0deg, rgba(10,14,26,.85), transparent); }

/* ── D5 Revelação — só duas provas, nunca galeria ── */
.reveal { display: grid; gap: var(--sp-48); }
@media (min-width: 900px) { .reveal { grid-template-columns: 1fr 1fr; gap: var(--sp-48); } }
.proof__figure { margin: 0 0 var(--sp-16); }
.proof__kicker { color: var(--brand-blue); font-weight: 700; font-size: var(--f-sm); text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-8); }
.proof__title { margin-bottom: var(--sp-8); }
.proof__text { color: var(--tx-2-light); }
.section--dark .proof__text { color: var(--tx-2-dark); }

/* ── D7 Fechamento-cena — fecha o loop do D1 ── */
.story-close { text-align: center; }
.story-close__inner { max-width: 42ch; margin-inline: auto; }
.story-close__ey { color: var(--brand-blue); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: var(--f-sm); margin-bottom: var(--sp-16); }
.story-close__title { font-size: clamp(1.6rem, 4vw, var(--f-h2)); line-height: 1.2; margin-bottom: var(--sp-24); color: var(--tx-1-dark); }
.story-close__sub { color: var(--tx-2-dark); font-size: var(--f-body-lg); margin-bottom: var(--sp-32); }