:root{
  --bg:#030712; --accent:#7ee0c9; --accent-2:#ffb347;
  --text:#eef2f6; --muted:#a7b1bf;
  --serif:'Georgia','Iowan Old Style',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --d-ink:#12181f; --d-muted:#5b6472; --d-line:#dde1e6;
  --d-accent:#103A6E; --d-blue:#2f6fb0; --d-surface:#ffffff;
  --d-radius:16px; --d-ease:cubic-bezier(.16,1,.3,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:var(--sans); overscroll-behavior:none; }
#scroll-spacer{ height:550vh; position:relative; pointer-events:none; }
#reveal-spacer{ height:260vh; position:relative; pointer-events:none; }

#stage{ position:fixed; inset:0; overflow:hidden; }
#map{ position:absolute; inset:0; }

.overlay-text{
  position:absolute; left:50%; top:44%; transform:translate(-50%,-50%);
  text-align:center; pointer-events:none; opacity:0; transition:opacity .4s ease; z-index:3;
  width:90%; max-width:640px;
}
.overlay-text .eyebrow{ letter-spacing:.3em; font-size:11px; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.overlay-text h1,.overlay-text h2{ font-family:var(--serif); font-weight:400; margin:0; line-height:1.15;
  font-size:clamp(28px,5vw,52px); text-shadow:0 2px 20px rgba(0,0,0,.6); }
.overlay-text p.sub{ margin-top:14px; color:var(--muted); font-size:15px; text-shadow:0 2px 12px rgba(0,0,0,.6); }

#hero-logo{ position:absolute; top:clamp(20px,3vw,44px); left:clamp(20px,3vw,44px); z-index:6; pointer-events:none; }
#hero-logo img{ height:75px; width:auto; display:block; }

#scrollhint{
  position:absolute; bottom:36px; left:50%; transform:translateX(-50%); z-index:3;
  color:var(--muted); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px; transition:opacity .4s ease;
}
#scrollhint .chev{ width:1px; height:34px; background:linear-gradient(var(--accent),transparent); animation:fall 1.6s infinite; }
@keyframes fall{ 0%{opacity:0; transform:translateY(-6px);} 40%{opacity:1;} 100%{opacity:0; transform:translateY(6px);} }

#arrival-photo{
  position:absolute; inset:0; z-index:2; opacity:0;
  width:100%; height:100%; object-fit:cover; object-position:center;
  transform:scale(1.08); transform-origin:center;
  will-change:opacity, transform;
  pointer-events:none;
}

#arrival-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:5; opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--d-ease), transform .7s var(--d-ease);
  background:linear-gradient(180deg, rgba(3,7,18,0) 0%, rgba(3,7,18,.88) 70%);
  padding:80px 28px 28px; pointer-events:none;
}
#arrival-caption.is-visible{ opacity:1; transform:translateY(0); }
#arrival-caption .eyebrow{ letter-spacing:.3em; font-size:11px; text-transform:uppercase; color:var(--accent-2); }
#arrival-caption h2{ font-family:var(--serif); font-weight:400; font-size:clamp(20px,3.4vw,30px); margin:6px 0 4px; }
#arrival-caption p{ margin:0; color:var(--muted); font-size:13px; }

#progress{ position:absolute; top:0; left:0; height:2px; z-index:5;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:0%; }

#shadow-veil{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  /* antes começava em alpha 0 (8%) e só escurecia perto do meio, então o canto
     inicial do gradiente (topo-esquerdo) nunca escurecia mesmo com opacity:1 —
     agora todo ponto da tela recebe pelo menos .55, garantindo que a sombra
     cubra a seção inteira e não só uma diagonal dela */
  background:linear-gradient(115deg, rgba(3,7,18,.55) 0%, rgba(3,7,18,.78) 35%, rgba(3,7,18,.95) 65%, rgba(3,7,18,.98) 100%);
}

#impact-text{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  padding:0 8vw; opacity:0;
}
#impact-text p{
  margin:0; text-align:center; font-family:var(--serif); font-weight:400;
  color:var(--text); font-size:clamp(26px,4.4vw,54px); line-height:1.35;
  max-width:920px; text-shadow:0 4px 30px rgba(0,0,0,.5);
}
#impact-text em{ font-style:normal; color:var(--accent-2); }

/* ===== seção nova: Maringá no Brasil / Maringá por dentro (estilo SF-04) ===== */
#sf-section{ background:#eef3f8; color:#12212f; font-family:'Outfit',system-ui,sans-serif; }
#sf-section a{ color:#2A588E; text-decoration:none; }
#sf-section a:hover{ color:#0FB286; }
.sf-ann{ font:600 9px/1.5 "IBM Plex Mono",ui-monospace,monospace; letter-spacing:.11em; text-transform:uppercase; color:#93a8bd; }
.sf-wrap{ width:100%; max-width:1440px; margin:0 auto; }
.sf-chrome{ padding:26px clamp(20px,3vw,44px) 0; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf-logo{ height:64px; width:auto; display:block; }

.sf-logo-badge{ position:absolute; top:clamp(20px,3vw,44px); right:clamp(20px,3vw,44px); z-index:6;
      display:flex; align-items:center; pointer-events:none; }
.sf-logo-badge .sf-logo{ height:75px; }

.sf-scene{ position:relative; width:100%; }
.sf-pinstage{ position:sticky; top:0; height:100vh; min-height:640px; overflow:hidden;
     background:radial-gradient(120% 90% at 50% 8%,#f8fbfd 0%,#e9f2f9 42%,#d3e4f1 74%,#bed6e9 100%); }
.sf-arc{ position:absolute; border-radius:50%; border:1px solid rgba(42,88,142,.1); pointer-events:none; }
.sf-glowfield{ position:absolute; border-radius:50%; pointer-events:none; }

#sf-brazil{ position:absolute; left:50%; top:50%; transform:translate(-50%,-44%); width:min(104vh,820px); height:min(104vh,820px); pointer-events:none; will-change:opacity,transform; }
#sf-stagewrap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-52%); width:min(74vh,600px); height:min(74vh,600px); will-change:transform; }
#sf-stagewrap canvas{ display:block; width:100%; height:100%; }
.sf-pinposter{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:opacity .6s ease; }

.sf-chap{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
      width:100%; max-width:1440px; padding:clamp(20px,3vw,44px); display:grid;
      grid-template-columns:minmax(0,300px) 1fr minmax(0,300px); grid-template-rows:auto 1fr;
      gap:clamp(12px,1.6vw,22px); pointer-events:none; will-change:opacity; }
.sf-chap > *{ pointer-events:auto; }
.sf-head{ grid-column:1/-1; max-width:620px; }
.sf-h2{ margin:10px 0 0; font-weight:200; font-size:clamp(24px,2.7vw,40px); line-height:1.08; letter-spacing:-.032em; color:#0e1c29; text-wrap:pretty; }
.sf-h2 b{ font-weight:400; color:#2A588E; }
.sf-sub{ margin:10px 0 0; font-weight:300; font-size:clamp(13px,1.05vw,14.5px); line-height:1.6; color:#4c5c6e; max-width:44ch; }
.sf-colL,.sf-colR{ display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); align-self:center; }
.sf-colL{ grid-column:1; } .sf-colR{ grid-column:3; }

.sf-card{ background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(246,251,254,.9)); border:1px solid rgba(42,88,142,.12);
      border-radius:18px; box-shadow:0 18px 44px rgba(16,48,86,.13); padding:clamp(14px,1.3vw,20px);
      opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.sf-card.sf-lead{ box-shadow:0 34px 72px rgba(16,48,86,.19); border-color:rgba(255,255,255,.9); background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(248,252,254,.94)); }
.sf-card.sf-small{ padding:clamp(12px,1.1vw,15px); box-shadow:0 12px 30px rgba(16,48,86,.1); }
.sf-card.sf-in{ opacity:1; transform:none; }
.sf-rank{ font-weight:200; letter-spacing:-.04em; line-height:.86; color:#0e1c29; }
.sf-lead .sf-rank{ font-size:clamp(40px,4.2vw,62px); }
.sf-card .sf-rank{ font-size:clamp(28px,2.6vw,38px); }
.sf-rank sup{ font-size:.42em; font-weight:400; letter-spacing:0; vertical-align:top; color:#2A588E; }
.sf-kv{ margin-top:10px; font:400 11.5px/1.5 Outfit,sans-serif; color:#5b6b7d; }
.sf-meta{ margin-top:12px; padding-top:10px; border-top:1px dashed rgba(42,88,142,.16); font:400 9px/1.7 "IBM Plex Mono",monospace; letter-spacing:.05em; color:#93a8bd; }
.sf-tag{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:100px; font:600 9.5px/1 Outfit,sans-serif; }
.sf-tag.sf-up{ background:rgba(15,178,134,.11); color:#0a8f6b; }
.sf-tag.sf-att{ background:rgba(215,146,40,.13); color:#a26f16; }
.sf-tag.sf-neu{ background:rgba(42,88,142,.09); color:#2A588E; }
.sf-scale{ position:relative; height:5px; border-radius:100px; background:rgba(42,88,142,.12); margin-top:12px; }
.sf-scale i{ position:absolute; top:-3px; width:11px; height:11px; border-radius:50%; background:#0FB286; box-shadow:0 0 0 3px rgba(15,178,134,.18); }
.sf-scale u{ position:absolute; top:-4px; width:1px; height:13px; background:#a9bbcd; }
.sf-geoid{ position:absolute; left:50%; bottom:clamp(18px,2.4vw,30px); transform:translateX(-50%); display:flex; align-items:center; gap:9px;
        padding:8px 15px; background:rgba(255,255,255,.8); border:1px solid rgba(42,88,142,.14); border-radius:100px;
        font:600 10px/1 "IBM Plex Mono",monospace; letter-spacing:.13em; color:#2A588E; white-space:nowrap; }
.sf-prog{ position:absolute; right:clamp(20px,3vw,44px); top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:9px; align-items:center; }
.sf-prog i{ width:5px; height:5px; border-radius:50%; background:rgba(42,88,142,.2); }
.sf-prog i.sf-on{ background:#2A588E; transform:scale(1.5); }

.sf-mobposter{ display:none; width:100%; border-radius:16px; background:#eaf2f9; }
.sf-cue{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); font:600 9px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; color:#8ba1b7; opacity:.85; }

@media (max-height:820px){
  .sf-card{ padding:12px 14px; border-radius:15px; }
  .sf-card.sf-small{ padding:10px 13px; }
  .sf-lead .sf-rank{ font-size:clamp(34px,3.4vw,46px); }
  .sf-card .sf-rank{ font-size:clamp(24px,2.2vw,30px); }
  .sf-colL,.sf-colR{ gap:9px; }
  .sf-meta{ font-size:8px; line-height:1.55; }
}
@media (max-width:1199px){
  .sf-chap{ grid-template-columns:minmax(0,246px) 1fr minmax(0,246px); }
  #sf-stagewrap{ width:min(64vh,470px); height:min(64vh,470px); }
  #sf-brazil{ width:min(88vh,620px); height:min(88vh,620px); }
  .sf-meta{ display:none; }
}
@media (max-width:767px){
  .sf-scene{ height:auto !important; }
  .sf-pinstage{ position:static; height:auto; min-height:0; padding:24px 20px 30px; background:linear-gradient(180deg,#f8fbfd,#e4eef7); }
  #sf-brazil,#sf-stagewrap,.sf-prog,.sf-cue,.sf-geoid,.sf-logo-badge{ display:none; }
  .sf-chap{ position:relative; inset:auto; left:auto; transform:none; width:auto; max-width:none; display:block; padding:0; opacity:1 !important; }
  .sf-chap + .sf-chap{ margin-top:44px; padding-top:34px; border-top:1px solid rgba(42,88,142,.12); }
  .sf-colL,.sf-colR{ display:block; margin-top:14px; }
  .sf-colL .sf-card,.sf-colR .sf-card{ margin-bottom:12px; opacity:1; transform:none; }
  .sf-mobposter{ display:block; margin-top:18px; }
  .sf-rmbrazil{ display:block; max-width:100%; margin-top:14px; }
  .sf-h2{ font-size:26px; }
}
@media (prefers-reduced-motion: reduce){
  .sf-card{ transition:none; }
  .sf-pinposter{ transition:none; }
}
body.sf-rm .sf-scene{ height:auto !important; }
body.sf-rm .sf-pinstage{ position:static; height:auto; min-height:0; padding:26px; }
body.sf-rm .sf-chap{ position:relative; inset:auto; left:auto; transform:none; width:auto; max-width:none; opacity:1 !important; }
body.sf-rm .sf-chap + .sf-chap{ margin-top:40px; }
body.sf-rm #sf-stagewrap,body.sf-rm #sf-brazil,body.sf-rm .sf-prog,body.sf-rm .sf-cue,body.sf-rm .sf-geoid,body.sf-rm #sf-localglow,body.sf-rm .sf-logo-badge{ display:none; }
body.sf-rm .sf-chap{ display:block; padding:0; }
body.sf-rm .sf-colL,body.sf-rm .sf-colR{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; margin-top:16px; }
body.sf-rm .sf-card{ opacity:1; transform:none; }
body.sf-rm .sf-mobposter{ display:block; max-width:520px; margin:20px auto 0; }
body.sf-rm .sf-rmbrazil{ display:block; }
.sf-rmbrazil{ display:none; max-width:340px; margin:18px 0 0; }