/* ==========================================================================
   Neide Ferreira · Guia de Uso da Marca
   Apresentação interativa — sistema de design
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  /* Paleta oficial */
  --red:        #8B1125;   /* Vermelho da Conquista · Pantone 201 C */
  --black:      #0A0A0A;   /* Preto Estrutura       · Pantone Black C */
  --sand:       #E9DFC9;   /* Areia Dominância      · Pantone 7499 C */

  /* Derivados (uso interno de interface, não da marca) */
  --red-deep:   #5C0B18;
  --red-lift:   #A5162E;
  --sand-warm:  #F2EADA;
  --ink:        var(--black);

  /* Superfície corrente — animada por JS a cada capítulo */
  --bg:         var(--sand);
  --fg:         var(--black);
  --accent:     var(--red);
  --hairline:   color-mix(in srgb, var(--fg) 22%, transparent);

  /* Tipografia */
  --font: "Bonum", "Bookman Old Style", "URW Bookman", Georgia, "Times New Roman", serif;

  --step--1: clamp(0.72rem, 0.68rem + 0.2vw, 0.85rem);
  --step-0:  clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  --step-2:  clamp(1.6rem, 1.2rem + 1.9vw, 2.9rem);
  --step-3:  clamp(2.1rem, 1.3rem + 3.6vw, 4.6rem);
  --step-4:  clamp(2.7rem, 1.1rem + 7vw, 8rem);
  --step-5:  clamp(3.4rem, 0.4rem + 12.5vw, 15rem);

  /* Ritmo & grid */
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --maxw: 1680px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur: 0.9s;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  font-size:var(--step-0);
  line-height:1.5;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color 1.1s var(--ease-soft), color 1.1s var(--ease-soft);
}
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }   /* com width/height no HTML, sem isto a imagem achata */
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--sand); }

/* Lenis */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

/* ---------- 3. Utilitários tipográficos --------------------------------- */
.u-label{
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-weight:400;
  line-height:1;
}
.u-mono-num{ font-variant-numeric:tabular-nums; letter-spacing:0.06em; }
.u-italic{ font-style:italic; }
.u-accent{ color:var(--accent); }
.u-bi{ font-style:italic; font-weight:700; }

/* Máscara de linha: o bloco anima a partir de baixo, recortado */
.line{ display:block; overflow:hidden; }
.line > span{ display:block; will-change:transform; }

/* Palavras / caracteres divididos por JS */
.split .w{ display:inline-block; overflow:hidden; vertical-align:top; }
.split .w > i{ display:inline-block; font-style:inherit; will-change:transform; }

/* Hairline que se desenha */
.rule{
  position:relative; height:1px; background:var(--hairline);
  transform-origin:left center;
}

/* ---------- 4. Camadas fixas -------------------------------------------- */
/* Grain de filme */
.grain{
  position:fixed; inset:-50%; z-index:120; pointer-events:none;
  opacity:0.05; mix-blend-mode:multiply;
  background-image:var(--grain-url);
  background-size:180px 180px;
  animation:grain 1.2s steps(4) infinite;
}
@keyframes grain{
  0%  { transform:translate(0,0) }
  25% { transform:translate(-2%,1.5%) }
  50% { transform:translate(1.5%,-1%) }
  75% { transform:translate(-1%,-2%) }
  100%{ transform:translate(0,0) }
}

/* HUD */
.hud{
  position:fixed; inset:0 0 auto 0; z-index:100; pointer-events:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.9rem) var(--gutter);
  mix-blend-mode:normal;
  color:var(--fg);
  transition:color 1.1s var(--ease-soft);
}
.hud > *{ pointer-events:auto; }
.hud__mark{ display:flex; align-items:center; gap:0.7em; opacity:0; transform:translateY(-8px); }
.hud__mark svg{ width:clamp(20px,2.2vw,28px); height:auto; color:currentColor; }
.hud__mark span{ font-size:var(--step--1); letter-spacing:0.2em; text-transform:uppercase; }
.hud__toggle{
  font-size:var(--step--1); letter-spacing:0.22em; text-transform:uppercase;
  display:flex; align-items:center; gap:0.65em;
  opacity:0; transform:translateY(-8px);
}
.hud__toggle .bars{ display:grid; gap:4px; width:18px; }
.hud__toggle .bars i{ display:block; height:1px; background:currentColor; transition:transform .5s var(--ease-out); }
.hud__toggle:hover .bars i:first-child{ transform:translateX(4px); }
.hud__toggle:hover .bars i:last-child{ transform:translateX(-4px); }

/* Rodapé fixo: contador + progresso */
.foot{
  position:fixed; inset:auto 0 0 0; z-index:100; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:clamp(1rem,2.2vw,1.9rem) var(--gutter);
  color:var(--fg);
  transition:color 1.1s var(--ease-soft);
  opacity:0;
}
.foot__count{ font-size:var(--step--1); letter-spacing:0.18em; display:flex; align-items:baseline; gap:0.5em; }
.foot__count b{ font-weight:400; font-size:calc(var(--step-0) * 1.1); }
.foot__count em{ font-style:normal; opacity:0.45; }
.foot__title{ font-size:var(--step--1); letter-spacing:0.2em; text-transform:uppercase; opacity:0.6; }

/* Trilha de progresso lateral */
.rail{
  position:fixed; right:var(--gutter); top:50%; transform:translateY(-50%);
  z-index:100; display:grid; gap:10px; opacity:0;
}
.rail__dot{
  width:22px; height:1px; background:currentColor; opacity:0.28;
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), width .5s var(--ease-out);
  transform-origin:right center; cursor:pointer;
}
.rail__dot:hover{ opacity:0.7; }
.rail__dot.is-active{ opacity:1; width:40px; }
@media (max-width:900px){ .rail{ display:none; } }

/* ---------- 5. Loader --------------------------------------------------- */
.loader{
  position:fixed; inset:0; z-index:200;
  background:var(--red); color:var(--sand);
  display:grid; place-items:center;
}
.loader__inner{ display:grid; justify-items:center; gap:clamp(1.6rem,4vh,3rem); width:min(560px,72vw); }
.loader__mark{ width:clamp(64px,9vw,120px); color:var(--sand); overflow:hidden; }
.loader__mark svg{ width:100%; height:auto; transform:translateY(101%); }
.loader__bar{ width:100%; height:1px; background:color-mix(in srgb, var(--sand) 28%, transparent); position:relative; }
.loader__bar i{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--sand); }
.loader__meta{ display:flex; justify-content:space-between; width:100%; font-size:var(--step--1); letter-spacing:0.22em; text-transform:uppercase; opacity:0; }
.loader__curtain{ position:fixed; inset:0; z-index:199; background:var(--red); transform:translateY(100%); }

/* ---------- 6. Índice --------------------------------------------------- */
.index{
  position:fixed; inset:0; z-index:150; background:var(--black); color:var(--sand);
  display:grid; grid-template-rows:auto 1fr auto;
  clip-path:inset(0 0 100% 0); pointer-events:none;
}
.index.is-open{ pointer-events:auto; }
.index__head, .index__foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:clamp(1rem,2.2vw,1.9rem) var(--gutter);
  font-size:var(--step--1); letter-spacing:0.22em; text-transform:uppercase;
}
.index__list{
  align-self:center; padding:0 var(--gutter);
  display:grid; gap:clamp(0.1rem,0.6vh,0.5rem);
  max-width:var(--maxw); width:100%; margin:0 auto;
}
.index__item{
  display:grid; grid-template-columns:3.5em 1fr auto; align-items:baseline; gap:1.2em;
  padding:clamp(0.35rem,1.1vh,0.8rem) 0;
  border-top:1px solid color-mix(in srgb, var(--sand) 16%, transparent);
  overflow:hidden;
}
.index__item:last-child{ border-bottom:1px solid color-mix(in srgb, var(--sand) 16%, transparent); }
.index__item > *{ transform:translateY(110%); }
.index__num{ font-size:var(--step--1); letter-spacing:0.14em; opacity:0.5; }
.index__name{ font-size:clamp(1.3rem,4.2vw,3.1rem); line-height:1.05; transition:color .5s var(--ease-out), transform .6s var(--ease-out); }
.index__item:hover .index__name{ color:var(--red-lift); transform:translateX(0.35em); }
.index__tag{ font-size:var(--step--1); letter-spacing:0.2em; text-transform:uppercase; opacity:0.4; }

/* ---------- 7. Seções base ---------------------------------------------- */
.sec{ position:relative; }
.sec--pad{ padding:clamp(6rem,14vh,13rem) var(--gutter); }
.sec--full{ min-height:100svh; display:grid; place-items:center; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; }
.stage{ position:relative; height:100svh; overflow:clip; }
.sticky{ position:sticky; top:0; height:100svh; overflow:clip; }

/* Mídia full-bleed com parallax */
.media{ position:absolute; inset:0; overflow:hidden; }
.media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.media--scrim::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.34) 0%, rgba(10,10,10,0) 35%, rgba(10,10,10,0) 60%, rgba(10,10,10,.42) 100%);
}
.frame{ position:relative; overflow:hidden; background:color-mix(in srgb, var(--fg) 6%, transparent); }
.frame img{ width:100%; height:auto; will-change:transform; }
.frame--16x9{ aspect-ratio:16/9; }
.frame--16x9 img{ height:100%; object-fit:cover; }

/* Reveal genérico (JS adiciona is-in) */
[data-rise]{ opacity:0; transform:translateY(28px); }
[data-fade]{ opacity:0; }
[data-clip]{ clip-path:inset(0 0 100% 0); }

/* ---------- 8. Capítulo 01 · Abertura ----------------------------------- */
.hero{ background:var(--red); color:var(--sand); }
.hero__lockup{
  position:absolute; inset:0; display:grid; place-items:center;
}
.lockup{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(0.6rem,2.4vw,2.4rem);
  width:min(78vw, 1080px);
}
.lockup__word{ font-style:italic; font-size:var(--step-2); line-height:1; white-space:nowrap; }
.lockup__mark{ width:clamp(90px,17vw,270px); color:currentColor; flex:0 0 auto; }
.lockup__mark svg{ width:100%; height:auto; }
.hero__scroll{
  position:absolute; left:50%; bottom:clamp(2.5rem,7vh,5rem); transform:translateX(-50%);
  display:grid; justify-items:center; gap:0.9em; opacity:0;
}
.hero__scroll .u-label{ opacity:0.7; }
.hero__scroll i{ display:block; width:1px; height:clamp(28px,5vh,54px); background:currentColor; opacity:0.5; transform-origin:top; animation:drip 2.4s var(--ease-inout) infinite; }
@keyframes drip{ 0%{transform:scaleY(0)} 45%{transform:scaleY(1)} 100%{transform:scaleY(1); opacity:0} }

/* Overlay tipográfico do herói (aparece no scrub) */
.hero__meta{
  position:absolute; inset:auto var(--gutter) clamp(2.5rem,7vh,5rem) var(--gutter);
  display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
  opacity:0;
}
.hero__meta p{ font-size:var(--step--1); letter-spacing:0.2em; text-transform:uppercase; opacity:0.75; }

/* ---------- 9. Capítulo 02 · Manifesto ---------------------------------- */
.manifesto{ background:var(--sand); color:var(--black); }
.manifesto__pillars{
  font-size:var(--step-3); line-height:1.06; font-weight:700;
  letter-spacing:-0.01em; text-align:center;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:0 0.5em;
}
.manifesto__pillars .sep{ color:var(--red); font-weight:400; }
.manifesto__pillars .is-red{ color:var(--red); font-style:italic; }
.manifesto__body{
  max-width:46ch; margin:clamp(3rem,9vh,7rem) auto 0;
  font-size:var(--step-1); line-height:1.42; text-align:center;
}
.manifesto__body + .manifesto__body{ margin-top:1.2em; }

/* Duas colunas editoriais */
.editorial{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter) clamp(1rem,3vw,3rem); align-items:start; }
.editorial__label{ grid-column:1 / span 3; }
.editorial__text{ grid-column:5 / span 6; font-size:var(--step-1); line-height:1.45; }
.editorial__aside{ grid-column:11 / span 2; font-size:var(--step--1); letter-spacing:0.16em; text-transform:uppercase; opacity:0.55; }
@media (max-width:860px){
  .editorial__label,.editorial__text,.editorial__aside{ grid-column:1 / -1; }
}

/* ---------- 11. Capítulo 05 · Selo -------------------------------------- */
.seals{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2rem,8vw,8rem); align-items:center; justify-items:center; }
.seal{ width:min(38vw,420px); }
.seal svg{ width:100%; height:auto; overflow:visible; }
.seal--k{ color:var(--black); }
.seal--r{ color:var(--red); }
.seal__ring{ transform-origin:center; }
@media (max-width:700px){ .seals{ grid-template-columns:1fr; } .seal{ width:min(62vw,340px); } }

/* ---------- 12. Capítulo 06 · Cores ------------------------------------- */
.colors{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); height:100svh; }
.swatch{
  position:relative; padding:clamp(1.4rem,3.4vw,3.4rem);
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden; cursor:pointer;
}
.swatch__fill{ position:absolute; inset:0; z-index:0; transform-origin:center bottom; }
.swatch__body{ position:relative; z-index:1; }
.swatch h3{ font-size:var(--step-1); letter-spacing:0.16em; text-transform:uppercase; font-weight:400; margin-bottom:0.9em; }
.swatch dl{ display:grid; gap:0.3em; font-size:var(--step-0); margin:0; }
.swatch dl div{ display:flex; gap:0.6em; }
.swatch dt{ opacity:0.62; min-width:5.6em; letter-spacing:0.1em; text-transform:uppercase; font-size:var(--step--1); align-self:center; }
.swatch dd{ margin:0; font-variant-numeric:tabular-nums; }
.swatch__copy{
  position:absolute; top:clamp(1.4rem,3.4vw,3.4rem); right:clamp(1.4rem,3.4vw,3.4rem); z-index:2;
  font-size:var(--step--1); letter-spacing:0.18em; text-transform:uppercase;
  opacity:0; transform:translateY(-6px); transition:opacity .4s var(--ease-out), transform .4s var(--ease-out);
}
.swatch:hover .swatch__copy, .swatch:focus-visible .swatch__copy{ opacity:0.75; transform:translateY(0); }
.swatch--red   { color:var(--sand); } .swatch--red   .swatch__fill{ background:var(--red); }
.swatch--black { color:var(--sand); } .swatch--black .swatch__fill{ background:var(--black); }
.swatch--sand  { color:var(--black);} .swatch--sand  .swatch__fill{ background:var(--sand); }
.swatch--split { color:var(--sand); } .swatch--split .swatch__fill{ background:linear-gradient(120deg, var(--black) 0%, var(--red) 62%, var(--red-lift) 100%); }
.swatch--sand{ order:0 }
@media (max-width:760px){
  .colors{ grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); height:auto; }
  .swatch{ min-height:46svh; }
}

/* ---------- 13. Capítulo 07 · Tipografia -------------------------------- */
.type__hero{
  display:flex; align-items:baseline; justify-content:center; gap:clamp(0.4rem,2.5vw,2.4rem);
  font-size:var(--step-5); line-height:0.9; letter-spacing:-0.02em;
}
.type__hero span{ display:inline-block; }
.type__hero .g1{ font-weight:400; }
.type__hero .g2{ font-weight:700; }
.type__hero .g3{ font-weight:400; font-style:italic; }
.type__hero .g4{ font-weight:700; font-style:italic; }
.type__alpha{
  margin-top:clamp(2rem,6vh,4.5rem); overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline);
  padding:clamp(0.7rem,1.8vh,1.4rem) 0;
}
.type__alpha .track{ display:inline-flex; gap:2.5em; font-size:var(--step-1); will-change:transform; }
.type__grid{
  margin-top:clamp(2.5rem,7vh,5rem);
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,3vw,3rem);
  align-items:end;
}
.type__uses{ grid-column:1 / span 6; display:grid; gap:0.55em; }
.type__uses li{ font-size:var(--step-0); display:flex; gap:0.7em; align-items:baseline; }
.type__uses b, .type__uses em{ min-width:9.4em; letter-spacing:0.06em; }
.type__uses b{ font-weight:700; text-transform:uppercase; font-size:var(--step--1); letter-spacing:0.16em; }
.type__uses em{ font-style:italic; text-transform:uppercase; font-size:var(--step--1); letter-spacing:0.16em; }
.type__uses span{ opacity:0.72; }
.type__name{ grid-column:9 / span 4; text-align:right; }
.type__name strong{ display:block; font-weight:400; font-size:var(--step-2); letter-spacing:0.04em; text-transform:uppercase; line-height:1.05; }
.type__name small{ display:block; margin-top:0.7em; font-size:var(--step--1); letter-spacing:0.16em; text-transform:uppercase; opacity:0.5; }
@media (max-width:860px){ .type__uses,.type__name{ grid-column:1 / -1; text-align:left; } .type__name{ margin-top:2rem; } }

.pill{
  margin-top:clamp(2.5rem,7vh,5rem);
  background:var(--red); color:var(--sand);
  border-radius:999px; padding:clamp(0.85rem,2vh,1.5rem) clamp(1.6rem,4vw,3rem);
  display:flex; align-items:center; justify-content:center; gap:clamp(0.8rem,2vw,1.6rem);
  overflow:hidden;
}
.pill svg{ width:clamp(22px,2.6vw,34px); height:auto; flex:0 0 auto; }
.pill span{ font-size:clamp(0.8rem,1.7vw,1.35rem); letter-spacing:0.24em; text-transform:uppercase; font-weight:700; white-space:nowrap; }

/* ---------- 14. Capítulo 08 · Sistema da quilha ------------------------- */
.quilha{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(2rem,6vw,6rem); }
.quilha__poster{ justify-self:end; width:min(34vw,440px); }
.quilha__board{ justify-self:start; width:min(16vw,190px); }
.quilha__board img, .quilha__poster img{ width:100%; height:auto; }
@media (max-width:860px){ .quilha{ grid-template-columns:1fr; } .quilha__poster,.quilha__board{ justify-self:center; } .quilha__poster{ width:min(70vw,380px);} .quilha__board{ width:min(34vw,170px);} }

.pattern-bed{
  position:absolute; inset:0; overflow:hidden; opacity:0.15; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 76% 68% at 50% 50%, #000 32%, transparent 100%);
          mask-image:radial-gradient(ellipse 76% 68% at 50% 50%, #000 32%, transparent 100%);
}
.pattern-bed svg{ width:100%; height:100%; }

/* Duas pranchas que formam o N */
.boards{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(100%, calc(100svh * 16 / 9)); aspect-ratio:16/9;
}
.boards__half{ position:absolute; inset:0; }
.boards__half img{ width:100%; height:100%; object-fit:cover; }
/* A costura entre as duas metades não é reta: as elipses se sobrepõem numa
   faixa de ~2% da altura, exatamente onde o N se forma. O corte desvia por essa
   junta, então cada prancha sai inteira — sem lascas soltas ao se separarem.
   Medidas tiradas do próprio artwork (frame 12). */
.boards__half--t{ clip-path:polygon(0% 0%, 100% 0%, 100% 48.7%, 56% 48.7%, 44% 51.5%, 0% 51.5%); }
.boards__half--b{ clip-path:polygon(0% 51.5%, 44% 51.5%, 56% 48.7%, 100% 48.7%, 100% 100%, 0% 100%); }

/* ---------- 15. Capítulo 09 · Ícones ------------------------------------ */
.icons{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(0.6rem,2.5vw,2.4rem); }
.icons figure{ position:relative; }
.icons img{ width:100%; height:auto; transition:transform .7s var(--ease-out); }
.icons figure:hover img{ transform:translateY(-10px) scale(1.03); }
.icons figcaption{ margin-top:0.9em; text-align:center; font-size:var(--step--1); letter-spacing:0.18em; text-transform:uppercase; opacity:0.55; }
@media (max-width:700px){ .icons{ grid-template-columns:repeat(2,1fr); } }

/* ---------- 16. Capítulo 10 · Frases ------------------------------------ */
.quotes{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,minmax(0,1fr)); min-height:100svh; }
.quote{
  position:relative; overflow:hidden;
  display:grid; place-content:center; gap:clamp(2rem,7vh,4.5rem);
  padding:clamp(2rem,5vw,4.5rem); text-align:center;
}
.quote__fill{ position:absolute; inset:0; z-index:0; }
.quote__in{ position:relative; z-index:1; display:grid; justify-items:center; gap:clamp(2rem,7vh,4rem); }
.quote p{ font-size:var(--step-2); line-height:1.14; }
.quote svg{ width:clamp(38px,4.6vw,66px); height:auto; }
.quote--r{ color:var(--sand); } .quote--r .quote__fill{ background:var(--red); }
.quote--s{ color:var(--black);} .quote--s .quote__fill{ background:var(--sand); }
.quote--k{ color:var(--sand); } .quote--k .quote__fill{ background:var(--black); }
.quote--g{ color:var(--sand); } .quote--g .quote__fill{ background:radial-gradient(120% 130% at 18% 0%, var(--black) 0%, var(--red-deep) 42%, var(--red) 100%); }
.quote--g .lockup__word{ font-size:var(--step-1); }
.quote--g .lockup__mark{ width:clamp(60px,8vw,120px); }
@media (max-width:760px){ .quotes{ grid-template-columns:1fr; grid-template-rows:repeat(4,minmax(0,1fr)); } .quote{ min-height:58svh; } }

/* ---------- 17. Galeria horizontal (aplicações) ------------------------- */
.hgal{ position:relative; }
.hgal__track{ display:flex; align-items:center; gap:clamp(1.5rem,4vw,4.5rem); height:100svh; padding-inline:var(--gutter); will-change:transform; }
.hgal__intro{ flex:0 0 auto; width:min(38vw,540px); }
.hgal__intro h2{ font-size:var(--step-2); line-height:1.02; font-weight:700; }
.hgal__intro p{ margin-top:1.2em; font-size:var(--step-0); opacity:0.7; max-width:32ch; }
.hcard{ flex:0 0 auto; position:relative; }
.hcard img{ height:auto; width:100%; }
.hcard--wide{ width:min(74vw,1040px); }
.hcard--tall{ width:min(38vw,520px); }
.hcard--mid{ width:min(52vw,720px); }
.hcard figcaption{
  margin-top:1em; display:flex; justify-content:space-between; gap:1em;
  font-size:var(--step--1); letter-spacing:0.18em; text-transform:uppercase; opacity:0.55;
}
@media (max-width:860px){
  .hgal__track{ height:auto; flex-direction:column; align-items:stretch; gap:clamp(2.5rem,8vh,5rem); padding-block:clamp(4rem,10vh,8rem); }
  .hgal__intro,.hcard--wide,.hcard--tall,.hcard--mid{ width:100%; }
}

/* ---------- 18. Capítulo 11 · Digital ---------------------------------- */
.trio{ display:grid; grid-template-columns:1.72fr 1fr 1fr; gap:clamp(0.8rem,2.4vw,2.2rem); align-items:start; }
.trio > figure{ overflow:hidden; }
.trio img{ width:100%; height:auto; }
.posters{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.8rem,2.4vw,2.2rem); }
@media (max-width:860px){ .trio{ grid-template-columns:1fr; } .posters{ grid-template-columns:1fr; } }

/* ---------- 19. Capítulo 04b · Variações de logo ------------------------ */
.logos{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); }
.logovar{ aspect-ratio:4/3; display:grid; place-items:center; padding:clamp(1rem,3vw,2.5rem); }
.logovar--k{ background:var(--black); color:var(--red); }
.logovar--r{ background:var(--red); color:var(--sand); }
.logovar--s{ background:var(--sand); color:var(--black); }
.logovar .lockup{ width:auto; gap:clamp(0.4rem,1.4vw,1.2rem); }
.logovar .lockup__word{ font-size:clamp(0.8rem,1.5vw,1.35rem); }
.logovar .lockup__mark{ width:clamp(52px,9vw,140px); }
.logovar--k .lockup__word{ display:none; }
@media (max-width:760px){ .logos{ grid-template-columns:1fr; } }

/* ---------- 20. Fim ---------------------------------------------------- */
.outro{ background:var(--red); color:var(--sand); }
.outro__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; }
.outro__grid figure{ overflow:hidden; }
.outro__grid img{ width:100%; height:auto; }
.outro__end{ min-height:100svh; display:grid; place-items:center; text-align:center; padding:var(--gutter); }
.outro__end .lockup{ margin-inline:auto; }
.outro__slogan{ margin-top:clamp(2rem,6vh,4rem); font-size:var(--step-2); }
.outro__meta{
  margin-top:clamp(3rem,10vh,7rem); display:flex; flex-wrap:wrap; gap:1.4em 3em; justify-content:center;
  font-size:var(--step--1); letter-spacing:0.2em; text-transform:uppercase; opacity:0.7;
}
.credits{
  border-top:1px solid color-mix(in srgb, var(--sand) 22%, transparent);
  padding:clamp(2rem,5vh,3.5rem) var(--gutter);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.2em 2em;
  font-size:var(--step--1); letter-spacing:0.18em; text-transform:uppercase; opacity:0.6;
}

/* ---------- 21. Chapter opener ----------------------------------------- */
.opener{ padding:clamp(4rem,11vh,9rem) var(--gutter) clamp(2rem,6vh,4rem); }
.opener__row{ display:flex; align-items:baseline; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.opener__num{ font-size:var(--step--1); letter-spacing:0.24em; }
.opener h2{ font-size:var(--step-3); line-height:1; font-weight:700; letter-spacing:-0.015em; }
.opener__lead{ margin-top:1.4em; max-width:52ch; font-size:var(--step-1); line-height:1.42; opacity:0.78; }
.opener .rule{ margin-top:clamp(1.6rem,4vh,3rem); }

/* ---------- 22. Acessibilidade ----------------------------------------- */
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  .hero__scroll i{ animation:none; transform:scaleY(1); }
  *{ transition-duration:0.01ms !important; }
  [data-rise],[data-fade]{ opacity:1 !important; transform:none !important; }
  [data-clip]{ clip-path:none !important; }
  .loader{ display:none; }
}

/* ---------- 23. Modo estático (?flat=1 / reduced motion) ---------------- */
.is-flat .loader, .is-flat .loader__curtain{ display:none; }
.is-flat .grain{ animation:none; }
.is-flat .hero__scroll i{ animation:none; transform:scaleY(1); }
.is-flat .hgal__track{
  height:auto; flex-direction:column; align-items:stretch;
  gap:clamp(2.5rem,8vh,5rem); padding-block:clamp(4rem,10vh,8rem);
}
.is-flat .hgal__intro,
.is-flat .hcard--wide, .is-flat .hcard--tall, .is-flat .hcard--mid{ width:100%; }

/* ---------- 24. Capítulo 03 · o monograma como janela ------------------ */
/* A máscara é o próprio contorno vetorizado do N (traçado do artwork).
   A janela cresce; a foto contra-escala para permanecer parada. */
.symbol-stage{ background:var(--sand); }
.symbol-window{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(52vw,660px); aspect-ratio:1000/622;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20622%27%3E%3Cpath%20d%3D%27M29%20621.4C64.8%20621.4%20100.7%20621.4%20136.5%20621.4%20150.8%20621.4%20178.6%20623%20191.3%20620.9%20250.4%20611.1%20309.6%20572.9%20329.9%20514.8%20347.8%20463.6%20333.9%20406.4%20313.9%20357.9%20308.1%20343.9%20301.6%20330.1%20294.6%20316.6%20291.3%20310.3%20286.8%20304%20284.2%20297.4%20281.3%20290%20284.3%20281%20292.5%20278.8%20307.2%20274.9%20323.8%20274.5%20338.8%20275.6%20455%20284.3%20510.5%20411.9%20537.4%20509.2%20544.4%20534.8%20550.2%20560.8%20554.5%20587%20556%20595.5%20556.1%20612.8%20563.2%20618.3%20570%20623.5%20584.3%20621.4%20592.6%20621.4%20616.6%20621.4%20640.6%20621.4%20664.6%20621.4%20673.6%20621.4%20688%20624.3%20694.5%20616.5%20702.5%20607%20713.9%20580.3%20720.3%20567.9%20737.7%20534.5%20754.5%20500.8%20771.5%20467.2%20828.6%20354.9%20885.2%20242.2%20943%20130.3%20958.1%20101.1%20973.2%2071.8%20987.7%2042.4%20991.8%2034%201003.1%2018.2%20999.2%209%20995.3%200%20986.2%200.5%20977.9%200.5%20958.8%200.5%20939.8%200.5%20920.7%200.5%20895.6%200.5%20870.4%200.5%20845.3%200.5%20833.7%200.5%20821.5%20-0.7%20810%200.8%20774%205.6%20730.4%2027.6%20704.6%2053.1%20646.6%20110.3%20657.8%20190.1%20684.5%20259.5%20691%20276.5%20699.1%20293.4%20707.8%20309.3%20711.6%20316.1%20718.6%20324.8%20717%20332.9%20716.4%20336.5%20714.2%20339.8%20711.1%20341.7%20702.8%20346.7%20675.7%20346.9%20665.8%20346.7%20547.5%20343.3%20485.6%20204.8%20461.3%20106.8%20455.6%2084.1%20450.1%2061.4%20446.2%2038.3%20445%2030.7%20443.8%2011.8%20439.6%206.2%20433.1%20-2.4%20419%200.5%20409.7%200.5%20386.1%200.5%20362.5%200.5%20338.8%200.5%20331.2%200.5%20316.1%20-1.4%20309.6%202.2%20301.5%206.7%20295.3%2023.6%20291.2%2031.9%20278.5%2057.5%20264.9%2082.7%20252.2%20108.3%20204.9%20204%20154.4%20298.2%20107%20393.9%2082%20444.6%2055.6%20494.8%2030%20545.2%2022.9%20559.1%2015.6%20573%208.7%20586.9%205.7%20593.1%200%20600.7%200%20607.7%200%20623.8%2018.2%20621.4%2029%20621.4Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201000%20622%27%3E%3Cpath%20d%3D%27M29%20621.4C64.8%20621.4%20100.7%20621.4%20136.5%20621.4%20150.8%20621.4%20178.6%20623%20191.3%20620.9%20250.4%20611.1%20309.6%20572.9%20329.9%20514.8%20347.8%20463.6%20333.9%20406.4%20313.9%20357.9%20308.1%20343.9%20301.6%20330.1%20294.6%20316.6%20291.3%20310.3%20286.8%20304%20284.2%20297.4%20281.3%20290%20284.3%20281%20292.5%20278.8%20307.2%20274.9%20323.8%20274.5%20338.8%20275.6%20455%20284.3%20510.5%20411.9%20537.4%20509.2%20544.4%20534.8%20550.2%20560.8%20554.5%20587%20556%20595.5%20556.1%20612.8%20563.2%20618.3%20570%20623.5%20584.3%20621.4%20592.6%20621.4%20616.6%20621.4%20640.6%20621.4%20664.6%20621.4%20673.6%20621.4%20688%20624.3%20694.5%20616.5%20702.5%20607%20713.9%20580.3%20720.3%20567.9%20737.7%20534.5%20754.5%20500.8%20771.5%20467.2%20828.6%20354.9%20885.2%20242.2%20943%20130.3%20958.1%20101.1%20973.2%2071.8%20987.7%2042.4%20991.8%2034%201003.1%2018.2%20999.2%209%20995.3%200%20986.2%200.5%20977.9%200.5%20958.8%200.5%20939.8%200.5%20920.7%200.5%20895.6%200.5%20870.4%200.5%20845.3%200.5%20833.7%200.5%20821.5%20-0.7%20810%200.8%20774%205.6%20730.4%2027.6%20704.6%2053.1%20646.6%20110.3%20657.8%20190.1%20684.5%20259.5%20691%20276.5%20699.1%20293.4%20707.8%20309.3%20711.6%20316.1%20718.6%20324.8%20717%20332.9%20716.4%20336.5%20714.2%20339.8%20711.1%20341.7%20702.8%20346.7%20675.7%20346.9%20665.8%20346.7%20547.5%20343.3%20485.6%20204.8%20461.3%20106.8%20455.6%2084.1%20450.1%2061.4%20446.2%2038.3%20445%2030.7%20443.8%2011.8%20439.6%206.2%20433.1%20-2.4%20419%200.5%20409.7%200.5%20386.1%200.5%20362.5%200.5%20338.8%200.5%20331.2%200.5%20316.1%20-1.4%20309.6%202.2%20301.5%206.7%20295.3%2023.6%20291.2%2031.9%20278.5%2057.5%20264.9%2082.7%20252.2%20108.3%20204.9%20204%20154.4%20298.2%20107%20393.9%2082%20444.6%2055.6%20494.8%2030%20545.2%2022.9%20559.1%2015.6%20573%208.7%20586.9%205.7%20593.1%200%20600.7%200%20607.7%200%20623.8%2018.2%20621.4%2029%20621.4Z%27%20fill%3D%27black%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  will-change:transform;
}
.symbol-photo{
  position:absolute; left:50%; top:50%;
  /* max-width:none é essencial: sem ele o reset limita a foto à largura da
     janela mascarada, ela deixa de cobrir a tela e não bate com a camada
     que assume na dissolvência. */
  width:100vw; height:100svh; max-width:none; margin-left:-50vw; margin-top:-50svh;
  object-fit:cover; will-change:transform;
}
.symbol-solid{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:min(52vw,660px); height:auto; color:var(--black);
  will-change:transform, opacity; pointer-events:none;
}
.symbol-cap{
  position:absolute; left:50%; bottom:clamp(2.5rem,9vh,6rem); translate:-50% 0;
  color:var(--black); opacity:0; text-align:center;
}
@supports not (mask: url("data:image/svg+xml,%3Csvg%2F%3E") center/contain no-repeat){
  .symbol-window{ -webkit-mask:none; mask:none; }
  .symbol-solid{ display:none; }
}

/* ---------- 25. Interface fixa recua nos blocos imersivos -------------- */
.hud, .foot, .rail{ transition:color 1.1s var(--ease-soft); }

/* ---------- 26. Ajustes de composição ---------------------------------- */
/* A assinatura só ocupa a largura da abertura; nos demais contextos ela
   se ajusta ao próprio conteúdo. */
.quote .lockup, .outro__end .lockup{ width:auto; max-width:100%; }
.quote--g .lockup__word{ white-space:nowrap; }

/* ---------- 27. Telas estreitas ---------------------------------------- */
@media (max-width:700px){
  /* O selo tipográfico quebra em duas linhas em vez de perder o "40+". */
  .pill{ border-radius:28px; padding:1.1rem 1.4rem; }
  .pill span{ white-space:normal; text-align:center; letter-spacing:0.16em; line-height:1.5; }
  .foot__title{ display:none; }
  .hud__mark span{ display:none; }
  .seals{ gap:clamp(2rem,10vw,4rem); }
  .quote p{ font-size:var(--step-1); }
  .manifesto__pillars{ font-size:var(--step-2); }
  .opener h2, .opener__row h2{ font-size:var(--step-2); }
}