/* ═══════════════════════════════════════════════════════════════════════════
   GABRIELLE GOMES — quiet authority · editorial legal · contemporary luxury
   Desktop-first: 1920×1080 · 1440×900 · 1366×768
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --burgundy:   #5A1725;
  --ink-green:  #17231E;
  --ivory:      #F5F0E7;
  --warm-paper: #E6DDD0;
  --charcoal:   #181818;
  --muted-wine: #8B4B59;

  /* zona cromática — dirigida por js/app.js a partir do frame ativo */
  --zone-ink:  #F5F0E7;
  --zone-mut:  #A9A399;
  --zone-line: rgba(245,240,231,.22);
  --zone-page: #17231E;

  --font-display: "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-body:    "Manrope", ui-sans-serif, sans-serif;

  --ease: cubic-bezier(.22,.61,.24,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scrollbar-width:none; overflow-x:hidden; }
html::-webkit-scrollbar{ display:none; }

body{
  margin:0;
  background:var(--zone-page);
  color:var(--zone-ink);
  font-family:var(--font-body);
  font-weight:400;
  /* antialiased ajuda texto claro sobre fundo escuro, mas afina e lava
     texto escuro sobre fundo claro. Por isso é por zona, não global.       */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .7s linear;
}
body.zone-light{ -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; }
body.is-loading{ overflow:hidden; height:100vh; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--burgundy); color:var(--ivory); }

:focus-visible{
  outline:1px solid var(--burgundy);
  outline-offset:5px;
}

/* ── par tipográfico do projeto: caixa-alta romana + itálico minúsculo ──
   é o que dá o tom editorial e evita o "template de escritório"            */
.sec-heading, .hero-heading{
  font-family:var(--font-display);
  font-weight:400;
  margin:0;
  color:var(--zone-ink);
  transition:color .7s linear;
}
.sec-heading i, .hero-heading i{ font-style:normal; display:block; }
.sec-heading span:nth-child(even) i,
.hero-heading .hw-3 i, .hero-heading .hw-4 i{
  font-style:italic;
  text-transform:none;
}


/* ══════════════════════════════ LOADER ══════════════════════════════ */

#loader{
  position:fixed; inset:0; z-index:999;
  background:var(--ivory);
  display:flex; align-items:center; justify-content:center;
  transition:opacity 1.1s var(--ease), visibility 1.1s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-inner{ width:min(30rem,72vw); text-align:center; }
.loader-mark{
  font-family:var(--font-display);
  font-size:clamp(1.8rem,3.4vw,3rem);
  color:var(--ink-green);
  margin:0 0 .5rem;
}
.loader-sub{
  margin:0 0 2.4rem;
  font-size:.55rem; letter-spacing:.34em; color:var(--muted-wine);
}
.loader-track{ height:1px; background:rgba(23,35,30,.14); position:relative; overflow:hidden; }
#loader-bar{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--burgundy); transition:width .3s linear; }


/* ══════════════════════════════ CURSOR ══════════════════════════════ */

#cursor{ position:fixed; inset:0; z-index:900; pointer-events:none; display:none; }
#cursor-dot,#cursor-ring{ position:absolute; top:0; left:0; border-radius:50%; transform:translate3d(-50%,-50%,0); }
#cursor-dot{ width:4px; height:4px; background:var(--zone-ink); }
#cursor-ring{
  width:30px; height:30px; border:1px solid var(--zone-line);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
  will-change:transform;
}
#cursor.hot #cursor-ring{ width:56px; height:56px; border-color:var(--burgundy); }

@media (hover:hover) and (pointer:fine){
  #cursor{ display:block; }
  body,a,button{ cursor:none; }
}


/* ══════════════════════════════ HEADER ══════════════════════════════ */

.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.8rem 4vw 0;
  pointer-events:none;
  transition:opacity .6s linear;
}
/* O header vive sobre o frame e o que passa atrás dele muda o tempo todo.
   Em vez de brilho nas letras (que engole traço fino), ele ganha uma
   superfície própria: um véu suave no topo, na cor da zona ativa.          */
.site-header::before{
  content:''; position:absolute; inset:0 0 auto 0; height:190%;
  background:linear-gradient(to bottom, rgba(245,240,231,.94) 0%, rgba(245,240,231,.7) 42%, transparent 100%);
  pointer-events:none; z-index:-1;
  transition:background .7s linear;
}
body:not(.zone-light) .site-header::before{
  background:linear-gradient(to bottom, rgba(16,22,19,.94) 0%, rgba(16,22,19,.7) 42%, transparent 100%);
}
.site-header > *{ pointer-events:auto; }

.brand{ display:flex; align-items:baseline; gap:.7rem; }
.brand-name{
  font-family:var(--font-display);
  font-size:1.2rem; letter-spacing:.005em; color:var(--zone-ink);
  transition:color .7s linear;
}
.brand-sub{
  font-size:.58rem; letter-spacing:.28em; color:var(--zone-mut);
  transition:color .7s linear;
}
.header-place{
  position:absolute; left:50%; transform:translateX(-50%);
  font-size:.58rem; letter-spacing:.32em; color:var(--zone-mut);
  white-space:nowrap; transition:color .7s linear;
}
.header-nav{ display:flex; gap:2rem; }
.hlink{
  position:relative; padding-bottom:.3rem;
  font-size:.68rem; font-weight:500; letter-spacing:.2em; color:var(--zone-ink);
  transition:color .7s linear;
}
.hlink::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--burgundy); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.hlink:hover::after{ transform:scaleX(1); transform-origin:left; }


/* ══════════════════════════════ CANVAS ══════════════════════════════ */

.canvas-wrap{
  position:fixed; inset:0; z-index:100;
  background:var(--ink-green);
  height:100vh;
  height:100lvh;   /* iOS: viewport grande, para não encolher com as barras */
}

#bg-canvas{
  position:absolute; inset:-8%; width:116%; height:116%;
  object-fit:cover;
  filter:blur(48px) saturate(1.05) brightness(.72);
  transform:scale(1.06);
}
#canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* tratamento direcional por seção — duas camadas em crossfade */
.scrim{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .8s cubic-bezier(.33,.1,.28,1);
  will-change:opacity;
}

.edge-wash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 96% 90% at 50% 50%, transparent 46%, rgba(23,35,30,.4) 100%);
  transition:opacity .5s linear;
}

.cta-veil{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:
    linear-gradient(96deg, rgba(16,22,19,.95) 0%, rgba(16,22,19,.78) 34%, rgba(16,22,19,.3) 68%, transparent 100%),
    linear-gradient(to top, rgba(16,22,19,.72), transparent 46%);
}

.grain{
  position:absolute; inset:-30px; pointer-events:none; opacity:.075;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  animation:grain 1.1s steps(1) infinite;
  will-change:transform;
}
@keyframes grain{
  0%{transform:translate3d(0,0,0)} 20%{transform:translate3d(-12px,6px,0)}
  40%{transform:translate3d(8px,-10px,0)} 60%{transform:translate3d(-6px,-5px,0)}
  80%{transform:translate3d(10px,8px,0)} 100%{transform:translate3d(0,0,0)}
}


/* ══════════════════════════════ HERO ══════════════════════════════ */
/* Sobreposto ao frame 1 — ela caminha no quarto esquerdo, a tipografia
   ocupa a parede marfim vazia da direita.                                */

.hero{ position:fixed; inset:0; z-index:300; pointer-events:none; }
.hero a{ pointer-events:auto; }

/* Medido em tela: com braços e pernas a silhueta ocupa x 0,42–0,57.
   A parede marfim limpa só começa em x 0,58 — é lá que a tipografia mora.   */
.hero-type{
  position:absolute; left:58vw; right:4vw; top:50%;
  transform:translateY(-50%);
}

.hero-heading{
  font-size:clamp(2.2rem, min(7.9vw, 13.6vh), 9.2rem);
  line-height:.93;
  letter-spacing:-.012em;
  color:var(--charcoal);
}
/* headroom para o acento das maiúsculas (Õ, Ã) — sem ele o overflow:hidden
   dos wrappers de revelação corta o til */
.hero-heading .hw{ display:block; overflow:hidden; padding-top:.3em; margin-top:-.3em; }
.hero-heading .hw i{ will-change:clip-path,transform; }
.hero-heading .hw-3 i,.hero-heading .hw-4 i{
  color:var(--burgundy);
  /* Contraste de escala: as linhas em caixa-alta são curtas e cabem grandes;
     a itálica "mudam o que" é longa e quebraria feio no mesmo corpo. Reduzi-la
     resolve a quebra E dá a variação de escala que o projeto pede.          */
  font-size:.68em;
}
.hero-heading .hw-3{ margin-left:3.4vw; }
.hero-heading .hw-4{ margin-left:1vw; }

.hero-sub{
  margin:2.4rem 0 .5rem;
  font-size:1.02rem; font-weight:500; letter-spacing:.01em;
  color:var(--charcoal);
}
.hero-micro{
  margin:0;
  font-size:.7rem; font-weight:500; letter-spacing:.2em; color:rgba(24,24,24,.94);
}
.hero-actions{ display:flex; align-items:center; gap:2rem; margin-top:2.6rem; flex-wrap:wrap; }

.hero-cue{ position:absolute; left:4vw; bottom:5vh; }
.hero-cue-line{ display:block; width:1px; height:60px; background:rgba(23,35,30,.25); position:relative; overflow:hidden; }
.hero-cue-line::after{
  content:''; position:absolute; inset:0; height:34%;
  background:var(--burgundy); animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{transform:translateY(-110%)} 55%,100%{transform:translateY(330%)} }


/* ══════════════════════════════ BOTÕES ══════════════════════════════ */

.btn{
  position:relative; display:inline-flex; align-items:center; gap:1rem;
  padding:1.05rem 2rem;
  border:1px solid rgba(24,24,24,.5);
  font-size:.72rem; font-weight:600; letter-spacing:.18em; color:var(--charcoal);
  overflow:hidden; will-change:transform;
}
.btn::before{
  content:''; position:absolute; inset:0; background:var(--burgundy);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease);
}
.btn span,.btn i{ position:relative; z-index:1; font-style:normal; transition:transform .45s var(--ease); }
.btn:hover::before{ transform:scaleX(1); }
.btn:hover{ color:var(--ivory); border-color:var(--burgundy); }
.btn:hover i{ transform:translateX(6px); }

.btn-light{
  border-color:rgba(245,240,231,.4); color:var(--ivory);
  background:rgba(16,22,19,.5);
}
.btn-light:hover{ color:var(--ivory); }

.btn-ghost{
  position:relative; font-size:.68rem; letter-spacing:.18em;
  color:var(--charcoal); font-weight:600; padding-bottom:.3rem;
}
.btn-ghost::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.btn-ghost:hover{ color:var(--burgundy); }
.btn-ghost:hover::after{ transform:scaleX(1); transform-origin:left; }


/* ══════════════════════════════ MARQUEE ══════════════════════════════ */

.marquee-wrap{
  position:fixed; top:46%; left:0; z-index:150;
  width:100%; transform:translateY(-50%);
  pointer-events:none; overflow:hidden; opacity:0;
}
.marquee-text{
  display:flex; align-items:center; gap:2.2vw;
  white-space:nowrap; width:max-content;
  font-family:var(--font-display);
  font-size:clamp(3rem,12vw,13rem);
  line-height:1; letter-spacing:-.008em;
  color:var(--charcoal);
  will-change:transform;
}
.marquee-text i{ font-style:normal; color:var(--burgundy); font-size:.4em; }


/* ══════════════════════ SCROLL CONTAINER / SEÇÕES ══════════════════════ */

#scroll-container{ position:relative; z-index:200; height:1000vh; }

.sec{
  position:absolute; left:0; width:100%; height:100vh;
  transform:translateY(-50%); pointer-events:none;
}
.sec a{ pointer-events:auto; }
.sec[data-persist="true"]{ position:fixed; top:0 !important; transform:none; z-index:210; }
.sec-inner{ position:absolute; }

.sec-label{
  display:flex; align-items:center; gap:.7rem; margin:0 0 1.3rem;
  font-size:.62rem; font-weight:500; letter-spacing:.24em; color:var(--zone-mut);
  transition:color .7s linear;
}
.sec-label b{ font-weight:500; color:var(--burgundy); }
.sec-label i{ width:24px; height:1px; background:var(--zone-line); display:block; }

.sec-body{
  margin:1.9rem 0 0; max-width:25rem;
  font-size:1rem; font-weight:400; line-height:1.72;
  color:var(--zone-ink);
  transition:color .7s linear;
}


/* ── 01 DECISÃO · composição diagonal na borda da pasta ──────────────── */
.sec-diagonal .sec-inner{ left:7.5vw; top:54%; transform:translateY(-50%); width:44vw; }
.rule-diag{
  display:block; width:15rem; height:2px;
  background:linear-gradient(to right, var(--burgundy) 0%, var(--burgundy) 22%, rgba(23,35,30,.4) 62%, transparent 100%);
  transform:rotate(-22deg); transform-origin:left center;   /* ângulo real da pasta */
  margin:0 0 3.2rem .1rem;
}
.h-diagonal{ font-size:clamp(1.9rem,4.6vw,5.4rem); line-height:1.02; }
.h-diagonal .dg i{ will-change:clip-path,opacity; }


/* ── 02 PREVIDENCIÁRIO · rótulo vertical + linhas nas faixas de luz ──── */
.label-vertical{
  position:absolute; left:-8.4vw; top:50%;      /* .sec-inner começa em 13vw */
  transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl;
  margin:0; display:flex; align-items:center; gap:1.1rem;
  font-size:.62rem; letter-spacing:.34em; color:var(--zone-ink); opacity:.8;
  transition:color .7s linear;
}
.label-vertical b{ font-weight:500; color:var(--burgundy); opacity:1; }
.sec-blinds .sec-inner{ left:13vw; top:50%; transform:translateY(-50%); width:40vw; }
.h-blinds{ font-size:clamp(2rem,5.4vw,6.4rem); line-height:.98; }
.h-blinds .lv{ display:block; overflow:hidden; padding-top:.3em; margin-top:-.3em; }
.h-blinds .lv i{ will-change:transform; }

.index-list{
  list-style:none; margin:2.6rem 0 0; padding:0;
  border-top:1px solid var(--zone-line);
  max-width:23rem;
}
.index-list li{
  display:flex; align-items:baseline; gap:1.1rem;
  padding:.72rem 0;
  border-bottom:1px solid var(--zone-line);
  font-size:.9rem; color:var(--zone-ink);
  transition:color .7s linear;
}
.ix-n{
  font-family:var(--font-display); font-style:italic;
  font-size:.8rem; color:var(--burgundy); min-width:1.6rem;
}


/* ── 03 TRABALHISTA · palavra gigante atravessando ───────────────────── */
.cross-word{
  position:absolute; left:0; top:31%;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:clamp(4rem,17vw,19rem);
  line-height:.9; letter-spacing:-.02em;
  color:var(--ivory); opacity:.92;
  will-change:transform,-webkit-mask-image;
}
.sec-cross .sec-inner{ right:4.5vw; bottom:13vh; width:34vw; max-width:30rem; text-align:right; }
.sec-cross .sec-label{ justify-content:flex-end; }
.sec-cross .sec-body{ margin-left:auto; }
.h-cross{ font-size:clamp(1.5rem,2.9vw,3.3rem); line-height:1.14; }
.h-cross .cr i{ will-change:transform,opacity; }


/* ── RETRATO · pausa. o silêncio é o design. ─────────────────────────── */
.sec-still .sec-inner{ left:0; right:0; bottom:12vh; text-align:center; }
.still-line{ margin:0; }
.still-line span{
  display:inline-block;
  font-size:.76rem; font-weight:500; letter-spacing:.44em; color:var(--zone-ink);
  will-change:opacity,letter-spacing;
}
.still-line-2{ margin-top:1.15rem; }
.still-line-2 span{
  font-family:var(--font-display); font-style:italic;
  font-size:1.65rem; letter-spacing:.02em; color:var(--zone-ink); opacity:.82;
}


/* ── 04 MÉTODO · as frases moram nos objetos da mesa ─────────────────── */
.sec-desk .sec-inner{ inset:0; }
.desk-label{ position:absolute; left:4vw; top:66%; }
.h-desk{
  position:absolute; right:2.5vw; top:54%;
  font-size:clamp(1.6rem,3.2vw,3.7rem); line-height:1.04; text-align:right;
}
.h-desk .dk i{ will-change:transform,opacity; }
.desk-note{
  position:absolute; margin:0;
  font-size:.84rem; font-weight:500; line-height:1.5; letter-spacing:.01em;
  text-shadow:0 1px 12px rgba(16,22,19,.5);
  will-change:opacity,transform;
}
/* sobre a folha clara: tinta escura. sobre a madeira: marfim.  */
.desk-note-1{ left:44%; top:31%; color:var(--ink-green); font-weight:600; }
.desk-note-2{ left:58%; top:15%; color:var(--ivory); }
.desk-note-3{ left:3.5vw; top:88%; color:var(--ivory); }


/* ── FINAL · CTA cinematográfico ─────────────────────────────────────── */
.sec-final .sec-inner{ left:5.5vw; top:50%; transform:translateY(-50%); max-width:46vw; }
.h-final{ font-size:clamp(2rem,6vw,7.2rem); line-height:.99; color:var(--ivory); }
.h-final .fn{ display:block; overflow:hidden; padding-top:.3em; margin-top:-.3em; }
.h-final .fn i{ will-change:transform; }

.final-meta{ margin-top:2.6rem; }
.final-name{
  margin:0; font-family:var(--font-display); font-size:1.5rem; color:var(--ivory);
}
.final-role{ margin:.15rem 0 0; font-size:.8rem; color:rgba(245,240,231,.74); }
.final-place{ margin:1rem 0 0; font-size:.72rem; line-height:1.85; letter-spacing:.05em; color:rgba(245,240,231,.6); }

.final-actions{ display:flex; align-items:center; gap:2.2rem; margin-top:2.6rem; flex-wrap:wrap; }
.final-ig{
  position:relative; font-size:.78rem; color:rgba(245,240,231,.8); padding-bottom:.25rem;
}
.final-ig::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--muted-wine); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.final-ig:hover{ color:var(--ivory); }
.final-ig:hover::after{ transform:scaleX(1); transform-origin:left; }


/* ══════════════════════════ ÍNDICE DE PROGRESSO ══════════════════════════ */

.chapters{
  position:fixed; right:2.6vw; top:50%; transform:translateY(-50%);
  z-index:450; pointer-events:none; opacity:0;
  display:flex; align-items:center; gap:.9rem;
}
.chapters ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:1.5rem;
}
.chapters li{
  font-size:.52rem; letter-spacing:.16em;
  color:var(--zone-mut); opacity:.45;
  transition:opacity .45s var(--ease), color .7s linear;
}
.chapters li.on{ opacity:1; color:var(--burgundy); }
.chapters-line{
  width:1px; height:150px; background:var(--zone-line);
  position:relative; display:block;
}
#chapters-fill{
  position:absolute; left:0; top:0; width:100%; height:0%;
  background:var(--burgundy); display:block;
}


/* ══════════════════════════════ RESPONSIVO ══════════════════════════════ */

@media (max-width:1500px){
  .sec-blinds .sec-inner{ left:12vw; width:46vw; }
  .sec-cross .sec-inner{ width:40vw; }
}

/* Abaixo de 1500px a tela deixa de ser 16:9, o canvas recorta as laterais e a
   Gabrielle cresce para o centro do viewport — não sobra parede limpa à
   direita. Em vez de disputar espaço com ela, a tipografia desce para a base,
   sobre o piso, com scrim próprio. Continua monumental: ganha a largura toda. */
@media (max-width:1500px){
  .hero-type{
    left:5vw; right:42vw; top:auto; bottom:13vh; transform:none;
  }
  /* min(vw, vh): em telas baixas a altura é que manda, senão a headline
     sobe por cima do wordmark do header                                   */
  .hero-heading{ font-size:clamp(1.8rem, min(8.8vw, 12.4vh), 7rem); }
  .hero-heading .hw-3 i,.hero-heading .hw-4 i{ font-size:.84em; }
  .hero-heading .hw-3{ margin-left:3vw; }
  .hero-heading .hw-4{ margin-left:1vw; }
  .hero-sub{ margin-top:1.8rem; }
  .hero-actions{ margin-top:2rem; }
  .hero-cue{ display:none; }
  /* Scrim próprio deste recorte. Radial ancorado na base-esquerda, sob a
     tipografia: morre antes de alcançar a Gabrielle, que fica no centro-
     direita. Um gradiente de base inteira apagava as pernas dela.          */
  .hero::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 74% 100% at 8% 74%,
      rgba(245,240,231,.92) 0%, rgba(245,240,231,.66) 40%,
      rgba(245,240,231,.2) 68%, transparent 86%);
    pointer-events:none;
  }
}

@media (max-width:1200px){
  .sec-diagonal .sec-inner{ width:56vw; }
  .sec-blinds .sec-inner{ left:11vw; width:56vw; }
  .sec-cross .sec-inner{ width:48vw; }
  .sec-final .sec-inner{ max-width:60vw; }
  .header-place{ display:none; }
  .desk-note-1{ left:24%; }
}

/* ── mobile: recompõe para vertical, não espreme ───────────────────────
   A altura entra na conta: celular deitado tem 844px de largura e a regra
   de largura sozinha não pegava — o bloco invadia o header e era cortado. */
@media (max-width:820px), (max-height:560px){
  #scroll-container{ height:760vh; }

  /* alvos de toque: no dedo, 20px de altura não dá. A área cresce por
     padding negativo compensado, sem mudar a composição.                   */
  .hlink{ padding:1rem .55rem; margin:-1rem -.55rem; }
  /* a palavra gigante sobe com o scroll e cruzava o header */
  .site-header::before{ height:230%; }
  .btn-ghost{ padding:.8rem 0; margin:-.8rem 0; }
  .final-ig{ padding:.8rem 0; margin:-.8rem 0; }
  .brand{ padding:.6rem 0; margin:-.6rem 0; }
  .btn{ padding:1.15rem 1.6rem; }

  .site-header{ padding:1.2rem 6vw 0; }
  .header-nav{ gap:1.2rem; }
  .brand-sub{ display:none; }

  .hero-type{
    left:6vw; right:6vw; top:auto; bottom:11vh; transform:none;
  }
  /* no vertical o texto é full-width: o radial da base-esquerda do desktop
     não cobre. Aqui o scrim sobe da base, em toda a largura.               */
  .hero::before{
    inset:auto 0 0 0 !important; height:74% !important;
    background:linear-gradient(to top,
      rgba(245,240,231,.97) 8%, rgba(245,240,231,.88) 34%,
      rgba(245,240,231,.55) 60%, transparent 100%) !important;
  }
  .hero-heading{ font-size:clamp(2rem,11.5vw,4.4rem); line-height:1.0; }
  .hero-heading .hw-3{ margin-left:3vw; }
  .hero-heading .hw-4{ margin-left:0; }
  .hero-sub{ margin-top:1.4rem; font-size:.9rem; }
  .hero-micro{ font-size:.62rem; letter-spacing:.12em; }
  .hero-actions{ margin-top:1.8rem; gap:1.2rem; }
  .hero-cue{ display:none; }

  /* todo bloco desce para a base do quadro, com scrim próprio */
  .sec .sec-inner{
    position:absolute !important;
    left:6vw !important; right:6vw !important;
    top:auto !important; bottom:13vh !important;
    transform:none !important;
    width:auto !important; max-width:none !important;
    text-align:left !important;
  }
  .sec-inner{ z-index:2; }

  .sec-heading{ font-size:clamp(1.6rem,7.6vw,2.7rem) !important; line-height:1.06; }
  .sec-body{ font-size:.88rem; max-width:none; }
  .sec-cross .sec-label{ justify-content:flex-start; }
  .sec-cross .sec-body{ margin-left:0; }

  .label-vertical{
    position:static; writing-mode:horizontal-tb; transform:none;
    margin:0 0 1.1rem; font-size:.56rem;
  }
  .index-list{ margin-top:1.6rem; max-width:none; }
  .index-list li{ font-size:.8rem; padding:.55rem 0; }

  .cross-word{ font-size:26vw; top:26%; }

  .sec-still .sec-inner{ text-align:center !important; bottom:18vh !important; }
  .still-line span{ font-size:.62rem; letter-spacing:.3em; }
  .still-line-2 span{ font-size:1.25rem; }

  /* na mesa, o "grid dos objetos" não cabe: vira lista editorial na base */
  .desk-label{ position:static; margin:0 0 1rem; }
  .h-desk{ position:static; text-align:left; }
  .desk-note{ position:static; margin:.45rem 0 0; color:var(--ivory) !important; }

  .marquee-text{ font-size:20vw; }
  .chapters{ display:none; }   /* índice de progresso: só no desktop */

  #bg-canvas{ filter:blur(30px) saturate(1.04) brightness(.94); transform:scale(1.1); }
  #cta-veil{ opacity:.72 !important; }
  .grain{ display:none; }
}

/* ── viewport baixo (celular deitado, ~390px de altura) ─────────────────
   Aqui o gargalo é vertical. Tudo comprime — mas nada some: as quatro
   linhas do índice previdenciário continuam na página.                    */
@media (max-height:540px){
  #scroll-container{ height:640vh; }
  .sec .sec-inner{ bottom:7vh !important; }
  .sec-heading{ font-size:clamp(1.2rem, 6.4vh, 2.1rem) !important; }
  .sec-body{ font-size:.78rem; line-height:1.52; margin-top:.9rem; max-width:44ch; }
  .sec-label,.label-vertical{ font-size:.52rem; margin-bottom:.6rem; }
  .index-list{ margin-top:1rem; }
  .index-list li{ padding:.34rem 0; font-size:.76rem; }

  .hero-type{ bottom:8vh !important; }
  .hero-heading{ font-size:clamp(1.4rem, 9.5vh, 3.2rem) !important; }
  .hero-sub{ margin-top:.9rem; font-size:.82rem; }
  .hero-micro{ font-size:.56rem; }
  .hero-actions{ margin-top:1.1rem; gap:1.1rem; }
  .btn{ padding:.85rem 1.3rem; font-size:.62rem; }

  .cross-word{ font-size:17vh; top:5%; }
  .still-line-2 span{ font-size:1.05rem; }
  .desk-note{ font-size:.72rem; margin-top:.3rem; }

  .final-meta{ margin-top:1.1rem; }
  .final-name{ font-size:1.15rem; }
  .final-place{ margin-top:.6rem; line-height:1.6; }
  .final-actions{ margin-top:1.2rem; }

  .chapters{ display:none; }   /* não há altura para o índice */

  /* Deitado o texto mora à esquerda; o scrim lateral vem do JS.            */
  .hero::before{
    inset:0 !important; height:100% !important;
    background:linear-gradient(96deg,
      rgba(245,240,231,.96) 0%, rgba(245,240,231,.82) 28%,
      rgba(245,240,231,.34) 52%, transparent 72%) !important;
  }
}

@media (max-width:380px){
  .hero-heading{ font-size:10.8vw; }
  .sec-heading{ font-size:7vw !important; }
  .hlink{ font-size:.5rem; letter-spacing:.16em; }
}


/* ══════════════════════════ MOVIMENTO REDUZIDO ══════════════════════════ */

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .hero-cue-line::after{ animation:none; }
  html{ scroll-behavior:auto; }
  .scrim,.sec-heading,.sec-body,body{ transition-duration:.01ms !important; }
}