/* =========================================================
   Tábata Matheus — Portfólio
   Paleta e tipografia derivadas do esboço original.
   ========================================================= */

:root {
  /* Cores da marca: as mesmas da ilustração dos pássaros (+ o bege do papel) */
  --bege: #f0efec;
  --bege-2: #e6e4df;
  --preto: #0f1515;
  --tinta: #241d12;
  --amarelo: #e9a40c;
  --azul: #033676;
  --vermelho: #9e1f17;
  --verde: #15560d;
  --marrom: #5e2c10;
  --cinza: #d5d5cf;

  /* Tipografia */
  --f-display: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --f-texto: "DM Sans", "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --max: 1440px;
  --margem: clamp(1rem, 4vw, 3.5rem);
  --gap: clamp(.75rem, 1.2vw, 1.125rem);
  --topo-h: 4.5rem;
  --raio: 4px;

  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topo-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bege);
  color: var(--preto);
  font-family: var(--f-texto);
  font-size: clamp(1rem, .95rem + .2vw, 1.125rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
strong { font-weight: 700; }
figure { margin: 0; }
p { margin: 0; }

::selection { background: var(--amarelo); color: var(--preto); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

.skip {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: .75rem 1rem;
  background: var(--preto);
  color: var(--bege);
  text-decoration: none;
}
.skip:focus { top: 1rem; }

.moldura {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--margem);
  position: relative;
  z-index: 1;
}

/* ---------- Títulos ---------- */
.titulo-secao,
.caso__titulo,
.hero__nome,
.sobre__manifesto,
.contato__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.06em;
  margin: 0;
}

.caso__num {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  opacity: .75;
}

/* =========================================================
   CABEÇALHO
   ========================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--topo-h);
  padding-inline: var(--margem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), translate .5s var(--ease);
}

.topo.rolou {
  background: color-mix(in srgb, var(--bege) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 rgb(15 17 16 / .08);
}

.topo.escondido { translate: 0 -100%; }

.topo__marca {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.04em;
  text-decoration: none;
  position: relative;
  z-index: 2;
}

.topo__nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 2.25rem);
  font-size: .95rem;
  font-weight: 500;
}

.topo__nav a {
  text-decoration: none;
  position: relative;
}

.topo__nav a:not(.topo__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1.5px;
  background: currentColor;
  scale: 0 1;
  transform-origin: right;
  transition: scale .45s var(--ease);
}
.topo__nav a:not(.topo__cta):hover::after { scale: 1 1; transform-origin: left; }

.topo__cta {
  padding: .55rem 1.1rem;
  border-radius: 999px;
  background: var(--preto);
  color: var(--bege);
  transition: background-color .3s, color .3s;
}
.topo__cta:hover { background: var(--amarelo); color: var(--preto); }

.topo__botao {
  display: none;
  position: relative;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--preto);
  cursor: pointer;
}
.topo__botao span {
  position: absolute;
  left: 50%;
  width: 1.1rem;
  height: 1.5px;
  margin-left: -.55rem;
  background: var(--bege);
  transition: translate .4s var(--ease), rotate .4s var(--ease);
}
.topo__botao span:first-child { translate: 0 -3px; }
.topo__botao span:last-child  { translate: 0 3px; }
.topo.aberto .topo__botao span:first-child { translate: 0 0; rotate: 45deg; }
.topo.aberto .topo__botao span:last-child  { translate: 0 0; rotate: -45deg; }

@media (max-width: 760px) {
  .topo__botao { display: block; }

  .topo__nav {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .5rem;
    padding: var(--margem);
    background: var(--preto);
    color: var(--bege);
    font-family: var(--f-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 13vw, 4rem);
    text-transform: uppercase;
    letter-spacing: -0.05em;
    line-height: 1;
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path .6s var(--ease), visibility 0s .6s;
  }
  .topo.aberto .topo__nav {
    clip-path: inset(0 0 0 0);
    visibility: visible;
    transition: clip-path .6s var(--ease);
  }
  .topo.aberto .topo__marca { color: var(--bege); }
  .topo.aberto .topo__botao { background: var(--amarelo); }
  .topo.aberto .topo__botao span { background: var(--preto); }

  .topo__cta {
    margin-top: 1.5rem;
    padding: .7rem 1.2rem;
    font-family: var(--f-texto);
    font-size: 1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    background: var(--amarelo);
    color: var(--preto);
  }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  min-height: min(100vh, 64rem);
  min-height: min(100svh, 64rem);
  display: flex;
  padding-top: calc(var(--topo-h) + clamp(1rem, 4vh, 3rem));
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  overflow: hidden;
}

.hero .moldura {
  display: flex;
  flex-direction: column;
}

.hero__nome {
  font-size: min(7.4vw, 7.5rem);
  line-height: .9;
  letter-spacing: -0.055em;
  text-transform: none; /* nome sempre em caixa baixa */
}

.hero__nome .linha {
  display: inline-block;
  overflow: hidden;
  /* folga em volta da máscara para nenhuma letra (nem o acento) ser cortada */
  padding: .18em .08em .08em;
  margin: -.18em -.08em -.08em;
  vertical-align: top;
}
.hero__nome .linha + .linha { margin-left: .22em; }
.hero__nome .linha > span { display: inline-block; }

.js .hero__nome .linha > span {
  translate: 0 105%;
  animation: sobe 1.1s var(--ease) forwards;
}
.js .hero__nome .linha + .linha > span { animation-delay: .12s; }

@keyframes sobe { to { translate: 0 0; } }

.hero__meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  margin-top: clamp(1rem, 2.5vh, 1.75rem);
  font-family: var(--f-display);
  font-size: clamp(1rem, 1.8vw, 1.65rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hero__meta p:first-child { text-transform: uppercase; }
.hero__meta p:last-child { text-align: right; }
.hero__meta a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
  transition: color .3s;
}
.hero__meta a:hover { color: var(--vermelho); }

/* Colagem */
/* Pássaros como protagonistas: ocupam a largura total da tela (e um pouco além) */
.colagem {
  width: 108vw;
  margin-left: calc(50% - 54vw);
  margin-top: auto;
  padding-top: clamp(1rem, 3vh, 2.5rem);
  --px: 0;
  --py: 0;
}

.passaros {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1366 / 600;
  overflow: visible;
  transform: translate(calc(var(--px) * 12px), calc(var(--py) * 8px));
  transition: transform 1.2s var(--ease);
}

/* Cores da ilustração */
.c-marrom   { fill: #5e2c10; }
.c-vermelho { fill: #9e1f17; }
.c-preto    { fill: #0f1515; }
.c-verde    { fill: #15560d; }
.c-amarelo  { fill: #e9a40c; }
.c-cinza    { fill: #d5d5cf; }
.c-azul     { fill: #033676; }

/* Cada forma "brota" em sequência */
.passaros > * {
  transform-box: fill-box;
  transform-origin: 50% 60%;
}
.js .passaros > * {
  animation: brota .9s var(--ease) backwards;
  animation-delay: calc(.3s + var(--i, 0) * 55ms);
}
.passaros > :nth-child(1)  { --i: 15; }
.passaros > :nth-child(2)  { --i: 9; }
.passaros > :nth-child(3)  { --i: 7; }
.passaros > :nth-child(4)  { --i: 6; }
.passaros > :nth-child(5)  { --i: 5; }
.passaros > :nth-child(6)  { --i: 13; }
.passaros > :nth-child(7)  { --i: 12; }
.passaros > :nth-child(8)  { --i: 11; }
.passaros > :nth-child(9)  { --i: 3; }
.passaros > :nth-child(10) { --i: 1; }
.passaros > :nth-child(11),
.passaros > :nth-child(12),
.passaros > :nth-child(13),
.passaros > :nth-child(14) { --i: 16; }
.passaros > :nth-child(15) { --i: 4; }
.passaros > :nth-child(16) { --i: 2; }
.passaros > :nth-child(17) { --i: 8; }
.passaros > :nth-child(18) { --i: 0; }
.passaros > :nth-child(19) { --i: 1; }
.passaros > :nth-child(20),
.passaros > :nth-child(21) { --i: 17; }

@keyframes brota {
  from { opacity: 0; translate: 0 14px; scale: .82; rotate: -5deg; }
  to   { opacity: 1; translate: 0 0;    scale: 1;   rotate: 0deg; }
}

/* Depois de entrar, cada forma plana devagar; ao rolar (--sp de 0 a 1) o bando levanta voo */
.js .passaros > .em-bando {
  animation:
    brota .9s var(--ease) backwards calc(.3s + var(--i, 0) * 55ms),
    plana var(--plano, 6s) ease-in-out calc(2s + var(--i, 0) * 110ms) infinite alternate;
  transform:
    translate(calc(var(--sp, 0) * var(--dx, 0) * 1px), calc(var(--sp, 0) * var(--dy, 0) * 1px))
    rotate(calc(var(--sp, 0) * var(--dr, 0) * 1deg));
  opacity: calc(1 - var(--sp, 0) * .85);
}
@keyframes plana {
  0%   { translate: 0 0;      rotate: 0deg; }
  50%  { translate: 3px -7px; rotate: 1.2deg; }
  100% { translate: -2px -11px; rotate: -.8deg; }
}

/* Ao passar o mouse, cada pássaro "respira" */
@media (hover: hover) {
  .passaros > path { transition: scale .5s var(--ease); }
  .passaros > path:hover { scale: 1.04; }
}

.hero__rolar {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  align-self: flex-start;
  margin-top: clamp(1.25rem, 3vh, 2rem);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__rolar svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: quica 2.2s var(--ease) infinite;
}
@keyframes quica { 50% { translate: 0 4px; } }

@media (max-width: 760px) {
  .hero { min-height: auto; }
  .hero__nome { font-size: 13.5vw; line-height: .84; }
  .hero__nome .linha { display: block; }
  .hero__nome .linha + .linha { margin-left: 0; }

  .hero__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
    font-size: 1rem;
  }
  .hero__meta p:nth-child(2) { order: 3; flex-basis: 100%; }

  .colagem { margin-top: 2.5rem; }

  /* No celular, a colagem fica mais larga que a tela e é cortada nas bordas */
  .colagem {
    width: 165vw;
    margin-left: calc(50% - 82.5vw);
  }
}

/* =========================================================
   SOBRE / MANIFESTO
   ========================================================= */
.sobre {
  background: var(--preto);
  color: var(--bege);
  padding-block: clamp(5rem, 12vw, 10rem);
  position: relative;
  --fundo: var(--preto);
  --texto: var(--bege);
  overflow-x: clip;
}

.sobre__grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 4rem) var(--gap);
  align-items: start;
}

.sobre__manifesto {
  grid-column: 1 / 9;
  font-size: clamp(2.3rem, 6vw, 6.25rem);
  line-height: .92;
  letter-spacing: -0.065em;
  text-wrap: balance;
}

.sobre__retrato {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  position: relative;
  margin-top: .5rem;
}
.sobre__retrato > img:first-child {
  width: 100%;
  aspect-ratio: 4 / 5.4;
  object-fit: cover;
  object-position: 50% 15%;
  border-radius: var(--raio);
}
.sobre__recorte {
  position: absolute;
  width: 62%;
  left: -30%;
  bottom: -7%;
  rotate: -12deg;
  pointer-events: none;
}
.sobre__sol {
  position: absolute;
  width: 22%;
  right: -7%;
  top: -5%;
  pointer-events: none;
}

.sobre__texto {
  grid-column: 4 / 9;
  display: grid;
  gap: 1.25rem;
  color: color-mix(in srgb, var(--bege) 82%, transparent);
  max-width: 34rem;
}
.sobre__texto strong { color: var(--bege); }

.sobre__lead {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.9vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--amarelo);
}

.tags {
  list-style: none;
  padding: 0;
  margin: .75rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.tags li {
  padding: .4rem .9rem;
  border: 1px solid color-mix(in srgb, var(--bege) 28%, transparent);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--bege);
}

@media (max-width: 900px) {
  .sobre__manifesto { grid-column: 1 / -1; }
  .sobre__retrato {
    grid-column: 3 / 13;
    grid-row: auto;
  }
  .sobre__texto { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .sobre__retrato { grid-column: 3 / 13; }
  .sobre__retrato > img:first-child { aspect-ratio: 4 / 5; }
  .sobre__recorte { width: 48%; left: -22%; bottom: -5%; }
}

/* =========================================================
   ÍNDICE DE TRABALHOS
   ========================================================= */
.indice {
  padding-block: clamp(5rem, 12vw, 9rem);
  position: relative;
}

.indice__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.titulo-secao {
  font-size: clamp(3.4rem, 11vw, 10rem);
  line-height: .8;
  letter-spacing: -0.07em;
  margin-left: -.04em;
}

.indice__contagem {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
}

.indice__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid rgb(15 17 16 / .18);
}

.indice__lista a {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto 2rem;
  align-items: baseline;
  gap: 1rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.9rem);
  border-top: 1px solid rgb(15 17 16 / .18);
  text-decoration: none;
  position: relative;
  transition: padding .5s var(--ease), color .3s;
}

.indice__lista .n {
  font-size: .85rem;
  font-weight: 700;
  opacity: .55;
}
.indice__lista .t {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.indice__lista .c {
  font-size: .9rem;
  opacity: .7;
  text-align: right;
}
.indice__lista .seta {
  font-size: 1.4rem;
  text-align: right;
  transition: rotate .5s var(--ease);
}

@media (hover: hover) {
  .indice__lista a:hover { padding-left: 1.25rem; color: var(--vermelho); }
  .indice__lista a:hover .seta { rotate: -45deg; }
}

.indice__preview {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  width: clamp(200px, 20vw, 300px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--raio);
  pointer-events: none;
  opacity: 0;
  scale: .85;
  transition: opacity .3s, scale .4s var(--ease);
  box-shadow: 0 30px 60px -20px rgb(15 17 16 / .45);
}
.indice__preview.ativo { opacity: 1; scale: 1; }

@media (max-width: 640px) {
  .indice__lista a {
    grid-template-columns: 2.25rem 1fr 1.5rem;
    row-gap: .35rem;
  }
  .indice__lista .c {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
  .indice__lista .seta { grid-column: 3; grid-row: 1; }
}

/* =========================================================
   CASOS (projetos)
   ========================================================= */
.caso {
  --fundo: var(--bege);
  --texto: var(--preto);
  background: var(--fundo);
  color: var(--texto);
  padding-block: clamp(5rem, 11vw, 9.5rem);
  position: relative;
  overflow-x: clip;
  isolation: isolate;
}
.caso--amarelo  { --fundo: var(--amarelo); --texto: var(--preto); }
.caso--bege     { --fundo: var(--bege);    --texto: var(--preto); }
.caso--azul     { --fundo: var(--azul);    --texto: var(--bege); }
.caso--vermelho { --fundo: var(--vermelho);--texto: var(--bege); }
.caso--verde    { --fundo: var(--verde);   --texto: var(--bege); }
.caso--preto    { --fundo: var(--preto);   --texto: var(--bege); }
.caso--marrom   { --fundo: var(--marrom);  --texto: var(--bege); }
.caso--cinza    { --fundo: var(--cinza);   --texto: var(--preto); }

/* Faixa fina entre dois projetos de mesma cor */
.caso--bege + .caso--bege { border-top: 1px solid rgb(15 17 16 / .1); }

.caso__cabeca { margin-bottom: clamp(2rem, 5vw, 4rem); max-width: 70rem; }

.caso__titulo {
  font-size: clamp(2.6rem, 8vw, 8.5rem);
  line-height: .86;
  letter-spacing: -0.065em;
  margin-left: -.04em;
  text-wrap: balance;
}

.caso__info {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2rem var(--gap);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.caso__meta {
  grid-column: 1 / 5;
  margin: 0;
  display: grid;
  align-content: start;
}
.caso__meta > div {
  padding-block: .85rem;
  border-top: 1px solid color-mix(in srgb, var(--texto) 25%, transparent);
}
.caso__meta > div:last-child { border-bottom: 1px solid color-mix(in srgb, var(--texto) 25%, transparent); }
.caso__meta dt {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: .15rem;
}
.caso__meta dd { margin: 0; font-weight: 500; line-height: 1.4; }

.caso__texto {
  grid-column: 6 / 12;
  display: grid;
  gap: 1.1rem;
  align-content: start;
}
.caso__lead {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .caso__meta,
  .caso__texto { grid-column: 1 / -1; }
  .caso__texto { order: -1; }
}

/* Recortes decorativos */
.caso__deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.caso__deco--casa {
  width: clamp(150px, 22vw, 340px);
  top: clamp(2rem, 6vw, 5rem);
  right: calc(var(--margem) * -.5);
  rotate: 8deg;
}
.caso__deco--estadio {
  width: clamp(120px, 15vw, 230px);
  top: clamp(3rem, 7vw, 6rem);
  right: var(--margem);
  rotate: -10deg;
}
@media (max-width: 860px) {
  .caso__deco { opacity: .9; }
  .caso__deco--casa { width: 30vw; top: 1.5rem; right: -6vw; }
  .caso__deco--estadio { width: 22vw; top: 2rem; }
}

/* ---------- Figuras (padrão) ---------- */
.galeria figure,
.carrossel figure,
.telas figure,
.cameras__videos figure {
  overflow: hidden;
  border-radius: var(--raio);
  background: color-mix(in srgb, var(--texto) 8%, transparent);
}
.galeria img,
.carrossel img,
.telas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 1s var(--ease);
}
[data-ampliar] { cursor: zoom-in; }
@media (hover: hover) {
  .galeria figure:hover img,
  .carrossel figure:hover img,
  .telas figure:hover img { scale: 1.035; }
}

.g-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Galeria: Casa (grade editorial) ---------- */
.galeria--casa {
  --col: calc((min(100vw, var(--max)) - 2 * var(--margem) - 11 * var(--gap)) / 12);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: calc(var(--col) * 1.9);
  grid-auto-flow: dense;
  gap: var(--gap);
}
.g-a { grid-column: 1 / 9;  grid-row: span 3; }
.g-b { grid-column: 9 / 13; grid-row: span 3; }
.g-d { grid-column: 1 / 5;  grid-row: span 3; }
.g-e { grid-column: 5 / 13; grid-row: span 3; }
.g-c { grid-column: 1 / 7;  grid-row: span 2; }
.g-f { grid-column: 7 / 13; grid-row: span 2; }

@media (max-width: 760px) {
  .galeria--casa {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
  }
  .g-a, .g-e, .g-c, .g-f { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 3 / 2; }
  .g-b, .g-d { grid-column: span 1; grid-row: auto; aspect-ratio: 3 / 4; }
  .g-f { aspect-ratio: 16 / 9; }
}

/* ---------- Galeria: Estádio (sobreposição) ---------- */
.galeria--estadio {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.galeria--estadio figure:first-child {
  grid-column: 1 / 11;
  aspect-ratio: 3 / 2;
}
.galeria--estadio figure:last-child {
  grid-column: 7 / 13;
  aspect-ratio: 3 / 2;
  margin-top: -22%;
  position: relative;
  z-index: 2;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6);
  outline: clamp(4px, .6vw, 8px) solid var(--fundo);
}
@media (max-width: 760px) {
  .galeria--estadio figure:first-child { grid-column: 1 / -1; }
  .galeria--estadio figure:last-child { grid-column: 3 / -1; margin-top: -18%; }
}

/* ---------- Galeria genérica de duas imagens (para novos projetos) ---------- */
.galeria--duas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--gap);
}

/* ---------- Carrosséis: faixa com rolagem lateral em todas as telas ---------- */
.carrossel,
.telas {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--margem);
  margin-inline: calc(var(--margem) * -1);
  padding-inline: var(--margem);
  padding-bottom: 1rem;
  scrollbar-width: none;
  cursor: grab;
  outline-offset: 4px;
}
.carrossel::-webkit-scrollbar,
.telas::-webkit-scrollbar { display: none; }
.carrossel.arrastando,
.telas.arrastando { cursor: grabbing; scroll-snap-type: none; }
.carrossel.arrastando *,
.telas.arrastando * { pointer-events: none; }

.carrossel figure { flex: 0 0 clamp(250px, 27vw, 400px); scroll-snap-align: start; aspect-ratio: 4 / 5; }
.telas figure { flex: 0 0 clamp(170px, 18vw, 260px); scroll-snap-align: start; }
/* pranchas de identidade (paisagem) */
.carrossel--largo figure { flex-basis: clamp(290px, 46vw, 720px); aspect-ratio: 16 / 9; }

/* Rolagem lateral guiada pela rolagem da página:
   a faixa fica presa na tela e anda para o lado enquanto se rola para baixo */
.lateral { position: relative; }
.lateral__fixo {
  position: sticky;
  top: calc(var(--topo-h) + 3vh);
  overflow: hidden;
  margin-inline: calc(var(--margem) * -1);
  padding-inline: var(--margem);
}
.lateral .carrossel,
.lateral .telas {
  overflow: visible;
  scroll-snap-type: none;
  margin-inline: 0;
  padding-inline: 0;
  cursor: default;
  will-change: transform;
}

/* Indicador de progresso (sem cliques) */
.carrossel-controles {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.carrossel-controles__contador {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  min-width: 4.2rem;
}
.carrossel-controles__barra {
  flex: 1;
  height: 2px;
  background: color-mix(in srgb, var(--texto) 22%, transparent);
  position: relative;
  overflow: hidden;
}
.carrossel-controles__barra span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  background: var(--texto);
  transition: width .3s var(--ease), left .3s var(--ease);
}
.carrossel-controles__setas { display: flex; gap: .5rem; }
.botao-seta {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color .25s, color .25s, opacity .25s;
}
.botao-seta:hover:not(:disabled) { background: var(--texto); color: var(--fundo); }
.botao-seta:disabled { opacity: .3; cursor: default; }

.telas figure {
  border-radius: clamp(10px, 1.4vw, 18px);
  background: transparent;
  overflow: visible;
}
.telas img {
  aspect-ratio: 9 / 16;
  border-radius: inherit;
  box-shadow: 0 30px 50px -28px rgb(0 0 0 / .55);
}
.telas figcaption {
  margin-top: .8rem;
  font-size: .85rem;
  font-weight: 500;
  opacity: .8;
}

@media (max-width: 640px) {
  .carrossel figure { flex-basis: 74vw; }
  .telas figure { flex-basis: 54vw; }
  .carrossel--largo figure { flex-basis: 86vw; }
}

/* ---------- Câmeras ---------- */
.cameras {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3rem var(--gap);
  align-items: center;
}
.cameras__texto {
  grid-column: 1 / 6;
  display: grid;
  gap: 1.5rem;
  color: var(--tinta);
}
.cameras__texto .caso__titulo { font-size: clamp(2.6rem, 6vw, 6rem); }
.cameras__texto p:last-child { max-width: 30rem; }

.cameras__videos {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
.cameras__videos figure {
  aspect-ratio: 9 / 16;
  border-radius: clamp(12px, 1.6vw, 20px);
  background: var(--preto);
}
.cameras__videos figure:last-child { translate: 0 12%; }
.cameras__videos video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .cameras__texto,
  .cameras__videos { grid-column: 1 / -1; }
  .cameras__videos figure:last-child { translate: 0 0; }
}

/* =========================================================
   CONTATO / RODAPÉ
   ========================================================= */
.contato {
  background: var(--preto);
  color: var(--bege);
  padding-top: clamp(5rem, 12vw, 10rem);
  padding-bottom: 2rem;
  position: relative;
  --fundo: var(--preto);
  --texto: var(--bege);
  overflow-x: clip;
}

.contato__titulo {
  font-size: clamp(3.2rem, 11vw, 10.5rem);
  line-height: .82;
  letter-spacing: -0.07em;
  margin-left: -.04em;
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.contato__links {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(4rem, 10vw, 8rem);
  max-width: 60rem;
}
.contato__links a {
  display: grid;
  grid-template-columns: 8rem 1fr auto;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.25rem;
  border-top: 1px solid rgb(240 239 236 / .2);
  text-decoration: none;
  transition: color .3s, padding .5s var(--ease);
}
.contato__links li:last-child a { border-bottom: 1px solid rgb(240 239 236 / .2); }
.contato__links span {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
.contato__links strong {
  font-family: var(--f-display);
  font-size: clamp(1.4rem, 3.4vw, 2.75rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
  word-break: break-word;
}
.contato__links i { font-style: normal; font-size: 1.5rem; }
@media (hover: hover) {
  .contato__links a:hover { color: var(--amarelo); padding-left: 1rem; }
}
@media (max-width: 560px) {
  .contato__links a { grid-template-columns: 1fr auto; row-gap: .25rem; }
  .contato__links span { grid-column: 1 / -1; }
}

.contato__rodape {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: .85rem;
  opacity: .65;
}
.contato__rodape a { text-decoration: none; }
.contato__rodape a:hover { text-decoration: underline; }

.contato__deco {
  position: absolute;
  z-index: 0;
  width: clamp(160px, 26vw, 420px);
  right: calc(var(--margem) * -1);
  top: clamp(3rem, 8vw, 7rem);
  rotate: -14deg;
  filter: invert(1) brightness(.94) sepia(.08);
  opacity: .95;
  pointer-events: none;
}
@media (max-width: 760px) {
  .contato__deco { width: 34vw; top: 1.5rem; }
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgb(15 17 16 / .95);
  color: var(--bege);
  animation: aparece .3s ease;
}
.lightbox[hidden] { display: none; }
@keyframes aparece { from { opacity: 0; } }

.lightbox figure {
  display: grid;
  justify-items: center;
  gap: .9rem;
  min-width: 0;
}
.lightbox img {
  max-width: 100%;
  max-height: 82vh;
  max-height: 82svh;
  object-fit: contain;
  border-radius: var(--raio);
}
.lightbox figcaption {
  font-size: .9rem;
  opacity: .75;
  text-align: center;
  max-width: 40rem;
}
.lightbox button {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid rgb(240 239 236 / .3);
  background: transparent;
  color: inherit;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background-color .25s, color .25s;
}
.lightbox button:hover { background: var(--bege); color: var(--preto); }
.lightbox__fechar {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
}
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr 1fr; padding-top: 4.5rem; }
  .lightbox figure { grid-column: 1 / -1; grid-row: 1; }
  .lightbox__nav--ant { justify-self: end; }
}

/* =========================================================
   ANIMAÇÃO DE ENTRADA AO ROLAR
   ========================================================= */
.js .reveal {
  opacity: 0;
  translate: 0 40px;
  transition: opacity 1s var(--ease), translate 1s var(--ease);
}
.js .reveal.visivel {
  opacity: 1;
  translate: 0 0;
}

/* =========================================================
   05 · AQUILOMBA BRASIL
   ========================================================= */

/* =========================================================
   VITRINE DE REELS · capas passando dentro de um celular
   ========================================================= */
.vitrine {
  display: grid;
  grid-template-columns: minmax(220px, 340px) 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.celular {
  position: relative;
  /* a tela tem exatamente 9:16, a proporção das capas, então nada é cortado;
     a câmera fica na moldura superior, fora da imagem */
  padding: 38px 11px 22px;
  border-radius: 44px;
  background: #111;
  box-shadow: 0 0 0 2px #2a2a2a inset, 0 40px 70px -30px rgb(0 0 0 / .65);
  rotate: -3deg;
  transition: rotate .8s var(--ease);
}
.vitrine:hover .celular { rotate: 0deg; }
.celular__tela {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 8px;
  background: #000;
}
.celular__tela img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  translate: 0 100%;
  transition: translate .8s cubic-bezier(.65, 0, .35, 1);
}
.celular__tela img.atual { translate: 0 0; }
.celular__tela img.saiu { translate: 0 -100%; }
.celular__ilha {
  position: absolute;
  top: 14px;
  left: 50%;
  width: 26%;
  height: 12px;
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
}
.celular__ui {
  position: absolute;
  right: 12px;
  bottom: 18%;
  display: grid;
  gap: 14px;
  color: #fff;
  font-style: normal;
  font-size: 1.15rem;
  text-shadow: 0 1px 4px rgb(0 0 0 / .5);
  z-index: 2;
}
.celular__ui i { font-style: normal; }

.vitrine__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: capa;
  columns: 2;
  column-gap: 2rem;
}
.vitrine__lista li { break-inside: avoid; counter-increment: capa; }
.vitrine__lista button {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  width: 100%;
  min-height: 2.9rem;
  padding: .55rem 0;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 25%, transparent);
  background: none;
  color: inherit;
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-align: left;
  opacity: .55;
  cursor: pointer;
  transition: opacity .3s, padding .4s var(--ease);
}
.vitrine__lista button::before {
  content: counter(capa, decimal-leading-zero);
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.vitrine__lista button:hover,
.vitrine__lista button[aria-current="true"] { opacity: 1; }
.vitrine__lista button[aria-current="true"] { padding-left: .6rem; }
@media (max-width: 760px) {
  .vitrine { grid-template-columns: 1fr; justify-items: center; }
  .celular { width: min(72vw, 300px); }
  .vitrine__lista { columns: 1; width: 100%; }
}

/* =========================================================
   CATÁLOGO DE PUBLICAÇÕES · escolhe a capa, folheia abaixo
   ========================================================= */
.catalogo { margin-top: clamp(1rem, 3vw, 2rem); }
.catalogo__capas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
}
.catalogo__capas button {
  display: grid;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.catalogo__capas img {
  width: 100%;
  aspect-ratio: 7 / 10;
  object-fit: cover;
  object-position: top;
  border-radius: 3px;
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / .5);
  opacity: .55;
  translate: 0 0;
  transition: opacity .3s, translate .5s var(--ease), box-shadow .3s;
}
.catalogo__capas span {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  opacity: .6;
  transition: opacity .3s;
}
.catalogo__capas button:hover img { opacity: .85; translate: 0 -6px; }
.catalogo__capas button[aria-selected="true"] img { opacity: 1; translate: 0 -12px; box-shadow: 0 28px 40px -20px rgb(0 0 0 / .6); }
.catalogo__capas button[aria-selected="true"] span { opacity: 1; }
.catalogo__capas button[aria-selected="true"] span::before { content: "● "; color: var(--vermelho); }
.catalogo__painel { margin-top: clamp(2rem, 5vw, 3.5rem); }
.catalogo__painel:not([hidden]) { animation: abre-pub .6s var(--ease); }
@keyframes abre-pub { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 640px) {
  .catalogo__capas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 38vw;
    overflow-x: auto;
    padding-top: 14px;
    scrollbar-width: none;
  }
}

.publicacao__texto { max-width: 46rem; margin-top: .9rem; line-height: 1.55; opacity: .9; }
.publicacao__credito {
  margin-top: .8rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* =========================================================
   LAYOUT 1 · CAPA GIGANTE (foto em tela cheia + título por cima)
   ========================================================= */
.caso--capa { padding-top: 0; }
.capa-gigante {
  position: relative;
  height: min(92vh, 62rem);
  min-height: 26rem;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}
.capa-gigante > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  scale: 1.06;
  animation: capa-respira 1.6s var(--ease) forwards;
}
@keyframes capa-respira { to { scale: 1; } }
.capa-gigante::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgb(0 0 0 / .72) 0%, rgb(0 0 0 / .25) 45%, transparent 75%);
}
.capa-gigante__texto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: clamp(2rem, 5vw, 4rem);
  margin-bottom: 0;
  color: #fff;
}
.capa-gigante__texto .caso__num { opacity: .9; }
.capa-gigante__texto .caso__titulo {
  font-size: clamp(3rem, 10vw, 10rem);
  text-shadow: 0 2px 30px rgb(0 0 0 / .25);
}

/* =========================================================
   LAYOUT 2 · TEXTO FIXO AO LADO (texto parado, pranchas passando)
   ========================================================= */
.lado-a-lado {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.lado-a-lado__texto {
  position: sticky;
  top: calc(var(--topo-h) + 2rem);
}
.lado-a-lado__texto .caso__titulo { font-size: clamp(2.6rem, 5.6vw, 6rem); }
.lado-a-lado__texto .caso__info { display: flex; flex-direction: column-reverse; gap: 1.75rem; margin-bottom: 0; }
.lado-a-lado__imagens { display: grid; gap: var(--gap); }
.lado-a-lado__imagens figure { border-radius: var(--raio); overflow: hidden; }
.lado-a-lado__imagens img { width: 100%; height: auto; }
@media (max-width: 860px) {
  .lado-a-lado { grid-template-columns: 1fr; }
  .lado-a-lado__texto { position: static; }
}

/* Campo que ainda depende de informação da Tábata */
.a-confirmar {
  font-style: italic;
  opacity: .6;
  text-decoration: underline dashed;
  text-underline-offset: .25em;
}

/* Sub-blocos dentro de um projeto (ex.: "Nas unidades", "Dia da África") */
.bloco-sub { margin-top: clamp(4rem, 8vw, 7rem); }

/* Carrossel de fotos em paisagem (3:2), sem cortar para retrato */
.carrossel--foto figure { flex-basis: clamp(290px, 40vw, 640px); aspect-ratio: 3 / 2; }

/* Vídeos dentro dos carrosséis */
.carrossel figure video,
.telas figure video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* Trio de aplicações (ex.: logotipo sobre cores) */
.trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.trio figure { border-radius: var(--raio); overflow: hidden; }
.trio img { width: 100%; height: auto; }
@media (max-width: 640px) { .trio { grid-template-columns: 1fr; } }
.aquilomba__capa {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: var(--raio);
  overflow: hidden;
}
.aquilomba__capa img { width: 100%; height: auto; }

.publicacao { margin-top: clamp(4rem, 8vw, 7rem); }
.publicacao__cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--texto) 30%, transparent);
}
.publicacao__titulo {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.6vw, 3.2rem);
  line-height: .92;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.publicacao__nota { font-size: .9rem; opacity: .75; max-width: 30rem; }
.botao-contorno {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 3rem;
  padding: .6rem 1.2rem;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s, color .25s;
}
.botao-contorno:hover { background: var(--texto); color: var(--fundo); }

/* =========================================================
   FOLHEADOR · publicações com passagem de folhas (sutil)
   ========================================================= */
.folheador { --razao: .652; outline-offset: 6px; }
.folheador__palco {
  display: grid;
  place-items: center;
  perspective: 3400px;
  padding-block: clamp(1rem, 3vw, 2rem);
  touch-action: pan-y;
  user-select: none;
}
.folheador__livro {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--pagina-h, 560px);
  aspect-ratio: calc(var(--razao) * 2);
  max-width: 100%;
  transition: translate .9s var(--ease);
  filter: drop-shadow(0 22px 28px rgb(0 0 0 / .3));
}
.folheador__livro.so-direita { translate: -25% 0; }
.folheador__livro.so-esquerda { translate: 25% 0; }

.folheador__pagina {
  position: relative;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}
.folheador__pagina img { width: 100%; height: 100%; object-fit: contain; }
.folheador__pagina.vazia { background: transparent; cursor: default; }
/* curvatura suave junto à lombada */
.folheador__pagina--esq::after,
.folheador__pagina--dir::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.folheador__pagina--esq::after { background: linear-gradient(to left, rgb(0 0 0 / .14), transparent 9%); }
.folheador__pagina--dir::after { background: linear-gradient(to right, rgb(0 0 0 / .14), transparent 9%); }
.folheador__pagina.vazia::after { display: none; }

/* folha em movimento */
.folheador__folha {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 3;
  transform-style: preserve-3d;
}
.folheador__folha--prox { left: 50%; transform-origin: left center; }
.folheador__folha--ant { left: 0; transform-origin: right center; }
.folheador__face {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.folheador__face img { width: 100%; height: 100%; object-fit: contain; }
.folheador__face--verso { transform: rotateY(180deg); }
.folheador__face::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgb(0 0 0 / .12), transparent 55%);
  animation: luz-folha var(--dur, 1s) ease-in-out;
}
.folheador__folha--ant .folheador__face::after { background: linear-gradient(to left, rgb(0 0 0 / .12), transparent 55%); }
@keyframes luz-folha { 50% { opacity: 1; } }

/* uma página por vez (telas estreitas) */
.folheador--simples .folheador__livro {
  grid-template-columns: 1fr;
  aspect-ratio: var(--razao);
  translate: none !important;
}
.folheador--simples .folheador__pagina--dir { display: none; }
.folheador--simples .folheador__pagina--esq::after { display: none; }
.folheador--simples .folheador__pagina img.passa-prox { animation: passa-prox .6s var(--ease) both; }
.folheador--simples .folheador__pagina img.passa-ant { animation: passa-ant .6s var(--ease) both; }
@keyframes passa-prox { from { opacity: 0; translate: 4% 0; } }
@keyframes passa-ant { from { opacity: 0; translate: -4% 0; } }

.folheador__controles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: .5rem;
}
.folheador__status {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  min-width: 9.5rem;
}
.folheador__miniaturas { display: flex; gap: .4rem; flex: 1; min-width: 0; }
.folheador__mini {
  flex: 1;
  max-width: 3.5rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.folheador__mini::before {
  content: "";
  position: absolute;
  left: 2px; right: 2px; top: 50%;
  height: 2px;
  background: color-mix(in srgb, var(--texto) 25%, transparent);
  transition: background-color .3s, height .3s;
}
.folheador__mini[aria-current="true"]::before { background: var(--texto); height: 3px; margin-top: -.5px; }

/* =========================================================
   PÁSSAROS EM VOO PELAS SEÇÕES
   ========================================================= */
.voador {
  position: absolute;
  left: 0;
  top: var(--y, 12%);
  width: clamp(72px, 9vw, 150px);
  height: auto;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  will-change: transform;
}
.voador.voando { opacity: 1; }
.voador use { transform-box: fill-box; }

/* Acessibilidade: quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { translate: none; }
  .passaros,
  .passaros > * { transform: none !important; opacity: 1 !important; }
  .voador { display: none; }
}