/* Historia v37 — "De onde eu vim". Static-first: without body.historia-v37-on the five steps are
   a plain list of posters and sentences. Pinned mode: one film card on the right (full screen on
   phones and standing tablets), the sentence of the active step on the left. */
.hist-v37{position:relative;background:radial-gradient(ellipse at 72% 45%,#13241d 0%,#050807 62%);color:var(--ink,#f1efe8);padding:110px 0 96px;overflow:clip}
.hist-pin{position:relative;width:min(1160px,calc(100% - 80px));margin-inline:auto}
.hist-head h2{margin:14px 0 34px;font-size:clamp(34px,4.6vw,64px);line-height:1.04;letter-spacing:-.02em}
.hist-head h2 em,.hist-phrase em{color:var(--tf-champagne,#d8c39a)}
.hist-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.hist-step{display:grid;gap:14px;align-content:start}
.hist-media{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;border:1px solid #ffffff1c;background:#0b0f0d}
.hist-film{display:block;width:100%;height:100%;object-fit:cover}
.hist-text b{display:block;font:600 10.5px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--tf-champagne,#d8c39a)}
.hist-phrase{margin:8px 0 0;font-size:19px;line-height:1.3}
.hist-note{margin:10px 0 0;font-size:14.5px;line-height:1.5;color:#cfccc2}
.hist-text .button{margin-top:16px}
.hist-stats{display:flex;flex-wrap:wrap;gap:10px 26px;margin:16px 0 0;padding:0;list-style:none}
.hist-stats li{display:grid;gap:3px}
.hist-stats strong{font-size:26px;line-height:1;letter-spacing:-.01em;color:var(--tf-champagne,#d8c39a)}
.hist-stats span{font-size:12px;line-height:1.3;color:#cfccc2}
.hist-frame,.hist-nav,.hist-progress{display:none}
.hist-caption{display:block;margin-top:22px;font-size:11px;color:#a9ada3}

/* ---------- pinned mode ---------- */
body.historia-v37-on .hist-v37{height:520vh;padding:0}
body.historia-v37-on .hist-pin{position:sticky;top:0;width:auto;height:100vh;height:100svh;overflow:hidden;--hist-x:max(40px,calc((100vw - 1160px) / 2));--hist-h:min(78vh,760px)}
body.historia-v37-on .hist-steps{display:block}
body.historia-v37-on .hist-frame,body.historia-v37-on .hist-media{position:absolute;top:50%;right:var(--hist-x);height:var(--hist-h);width:auto;aspect-ratio:9/16;border-radius:22px}
body.historia-v37-on .hist-frame{display:block;transform:translateY(-50%);pointer-events:none}
body.historia-v37-on .hist-media{z-index:1;opacity:0;transform:translateY(-50%) perspective(1200px) rotateY(var(--hist-tilt,0deg));transition:opacity .7s ease;box-shadow:0 40px 120px #000b,0 0 0 1px #d8c39a26;border:0}
body.historia-v37-on .hist-step.is-active .hist-media{opacity:1;z-index:2}
body.historia-v37-on .hist-film{transform:scale(var(--hist-zoom,1.06))}
body.historia-v37-on .hist-head{position:absolute;z-index:3;top:112px;left:var(--hist-x)}
body.historia-v37-on .hist-head h2{font-size:clamp(20px,1.9vw,26px);margin:10px 0 18px}
body.historia-v37-on .hist-nav{display:flex;gap:6px;width:max-content;max-width:calc(100vw - 32px);padding:5px;border:1px solid #ffffff1a;border-radius:999px;background:#0a0f0dcc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-x:auto;scrollbar-width:none}
.hist-nav button{min-height:36px;padding:0 13px;border:0;border-radius:999px;background:none;color:#b9bdb2;font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background-color .3s,color .3s}
.hist-nav button.is-active{background:var(--tf-champagne,#d8c39a);color:#0b0c0c}
.hist-nav button:focus-visible{outline:2px solid #5ef2ff;outline-offset:2px}
body.historia-v37-on .hist-text{position:absolute;z-index:3;left:var(--hist-x);bottom:17vh;width:min(600px,calc(100vw - var(--hist-x) * 2 - var(--hist-h) * .5625 - 60px))}
body.historia-v37-on .hist-phrase{margin:14px 0 0;font-size:clamp(38px,4.4vw,66px);line-height:1.04;letter-spacing:-.02em}
body.historia-v37-on .hist-step:not(.is-active) .hist-text{visibility:hidden;transition:visibility 0s .5s}
body.historia-v37-on .hist-step:not(.is-active) .hist-phrase{opacity:0}
body.historia-v37-on .hist-text b,body.historia-v37-on .hist-note,body.historia-v37-on .hist-stats,body.historia-v37-on .hist-text .button{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
body.historia-v37-on .hist-step.is-active .hist-text b,body.historia-v37-on .hist-step.is-ready .hist-note,body.historia-v37-on .hist-step.is-ready .hist-stats,body.historia-v37-on .hist-step.is-ready .hist-text .button{opacity:1;transform:none}
body.historia-v37-on .hist-step.is-ready .hist-stats{transition-delay:.12s}body.historia-v37-on .hist-step.is-ready .hist-text .button{transition-delay:.24s}
body.historia-v37-on .hist-caption{position:absolute;z-index:3;margin:0;right:var(--hist-x);width:calc(var(--hist-h) * .5625);top:calc(50% + var(--hist-h) / 2 + 12px)}
body.historia-v37-on .hist-progress{display:block;position:absolute;z-index:3;left:0;right:0;bottom:0;height:2px;background:#ffffff12}
.hist-progress i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--tf-champagne,#d8c39a),#5ef2ff)}

@media (max-width:1023px){
  .hist-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hist-pin{width:calc(100% - 48px)}
}
@media (max-width:767px){
  .hist-v37{padding:88px 0 72px}
  .hist-pin{width:calc(100% - 32px)}
  .hist-steps{grid-template-columns:1fr;gap:18px}
  .hist-step{grid-template-columns:96px 1fr;align-items:center}
  .hist-phrase{font-size:18px}
  body.historia-v37-on .hist-v37{height:490vh}
}
/* Phones and standing tablets: the film fills the screen, the sentence sits at the bottom. */
@media (max-width:767px),(max-aspect-ratio:11/10){
  body.historia-v37-on .hist-pin{--hist-x:max(16px,4vw)}
  body.historia-v37-on .hist-frame,body.historia-v37-on .hist-media{inset:0;height:auto;width:auto;aspect-ratio:auto;border-radius:0}
  body.historia-v37-on .hist-frame{transform:none}
  body.historia-v37-on .hist-media{transform:none;box-shadow:none}
  body.historia-v37-on .hist-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050807cc 0%,#05080733 30%,#05080759 52%,#050807f2 84%)}
  body.historia-v37-on .hist-head{top:72px;right:var(--hist-x)}
  body.historia-v37-on .hist-text{right:var(--hist-x);width:auto;bottom:104px}
  body.historia-v37-on .hist-phrase{font-size:clamp(32px,8.2vw,56px)}
  body.historia-v37-on .hist-stats{gap:8px 18px;margin-top:12px}
  body.historia-v37-on .hist-stats strong{font-size:21px}
  body.historia-v37-on .hist-stats span{font-size:11px}
  body.historia-v37-on .hist-note{font-size:14px}
  body.historia-v37-on .hist-caption{top:auto;bottom:84px;left:var(--hist-x);width:auto;font-size:10px;opacity:.8}
  .hist-nav button{padding:0 10px;letter-spacing:.1em}
}
@media (prefers-reduced-motion:reduce){
  .hist-media,.hist-text b,.hist-note,.hist-stats,.hist-text .button{transition:none!important}
}