/* Página de história: a identidade muda conforme a rolagem.
   Era antiga (Marechal Deodoro e Roque Lazerra): papel claro, sol vermelho e TOKYO em verde.
   Pausa (o tempo trabalhando pra outras empresas): escuro, com um farol acendendo.
   Era nova (Marechal Rondon): preto e vermelho com o torii, igual ao resto do site. */

body.historia[data-era="antiga"] {
  --h-fundo: #EFEDE6;
  --h-texto: #151515;
  --h-suave: #4D4D4D;
  --h-borda: rgba(0, 0, 0, .14);
  --h-topo: rgba(239, 237, 230, .94);
  --h-acento: #356B0B;
  --h-contorno: rgba(0, 0, 0, .09);
}
body.historia[data-era="pausa"] {
  --h-fundo: #121314;
  --h-texto: #EDEDED;
  --h-suave: #A0A0A0;
  --h-borda: rgba(255, 255, 255, .12);
  --h-topo: rgba(18, 19, 20, .94);
  --h-acento: #B8C7DD;
  --h-contorno: rgba(255, 255, 255, .06);
}
body.historia[data-era="nova"] {
  --h-fundo: #0B0B0C;
  --h-texto: #FFFFFF;
  --h-suave: #A9A9B0;
  --h-borda: #2A2A2E;
  --h-topo: rgba(11, 11, 12, .92);
  --h-acento: #FF4545;
  --h-contorno: rgba(255, 255, 255, .06);
}

body.historia {
  background: var(--h-fundo);
  color: var(--h-texto);
  overflow-x: clip;
  transition: background-color 1s ease, color 1s ease;
}

.historia .sobretitulo { color: var(--h-acento); transition: color 1s ease; }

/* Sem JavaScript: cada capítulo pinta o próprio fundo */
html:not(.js) .historia [data-era="antiga"] { background: #EFEDE6; color: #151515; }
html:not(.js) .historia [data-era="pausa"] { background: #121314; color: #EDEDED; }
html:not(.js) .historia [data-era="nova"] { background: #0B0B0C; color: #FFFFFF; }

/* ---------- Topo: a logo troca junto com a era ---------- */

.historia .topo {
  background: var(--h-topo);
  border-bottom-color: var(--h-borda);
  transition: background-color 1s ease, border-color 1s ease, box-shadow .3s;
}
.historia .topo--rolou { box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.historia .marca { position: relative; }
/* A logo antiga é um JPG de fundo branco: o multiply apaga o branco no papel claro */
.marca__antiga {
  display: flex;
  align-items: center;
  gap: .45rem;
  height: 44px;
  transition: opacity .6s, transform .6s var(--curva);
}
.marca__antiga img { width: auto; height: 100%; mix-blend-mode: multiply; }
.marca__antiga b {
  font-family: Rubik, 'Arial Black', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #8CC63F;
  -webkit-text-stroke: 2px #151515;
  paint-order: stroke fill;
}
.historia .marca__img {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) scale(.9);
  opacity: 0;
  transition: opacity .6s, transform .6s var(--curva);
}
.historia[data-era="nova"] .marca__antiga { opacity: 0; transform: scale(.9); }
.historia[data-era="nova"] .marca__img { opacity: 1; transform: translateY(-50%); }
@media (max-width: 480px) { .marca__antiga { height: 36px; } .marca__antiga b { font-size: 1.3rem; } }

.historia .menu-botao span { background: currentColor; }
@media (max-width: 900px) {
  .historia .menu { background: var(--h-fundo); border-bottom-color: var(--h-borda); }
  .historia .menu a:not(.botao) { border-bottom-color: var(--h-borda); }
}

/* ---------- Linha do tempo lateral ---------- */

.linha-tempo {
  position: fixed;
  top: 50%;
  right: 26px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
  transform: translateY(-50%);
}
.linha-tempo a {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  color: var(--h-suave);
  text-decoration: none;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .4s;
}
.linha-tempo a::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: background-color .4s, transform .4s var(--curva-mola);
}
.linha-tempo a span {
  position: absolute;
  top: 50%;
  right: calc(100% + .6rem);
  white-space: nowrap;
  opacity: 0;
  transform: translate(6px, -50%);
  transition: opacity .3s, transform .3s;
}
.linha-tempo a:hover span,
.linha-tempo a:focus-visible span,
.linha-tempo a[aria-current="step"] span { opacity: 1; transform: translate(0, -50%); }
.linha-tempo a[aria-current="step"] { color: var(--h-texto); }
.linha-tempo a[aria-current="step"]::after { background: #D7261E; border-color: #D7261E; transform: scale(1.3); }
/* Só aparece quando sobra margem ao lado do conteúdo */
@media (max-width: 1500px) { .linha-tempo { display: none; } }

/* ---------- Capítulos ---------- */

.cap { position: relative; padding-block: 7rem; overflow-x: clip; }
.cap > .container { position: relative; z-index: 1; }
.cap h2 { margin-bottom: 1.25rem; }
.cap p { font-size: 1.12rem; }
.cap__lead { font-size: 1.3rem !important; line-height: 1.5; color: var(--h-texto); }

/* Número gigante do capítulo, só contorno, atrás do conteúdo */
.cap__numero {
  position: absolute;
  top: 2rem;
  left: 2vw;
  z-index: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(9rem, 22vw, 19rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--h-contorno);
  pointer-events: none;
  user-select: none;
}
.cap__numero--direita { left: auto; right: 2vw; }

@media (max-width: 700px) {
  .cap { padding-block: 4.5rem; }
  .cap__lead { font-size: 1.15rem !important; }
}

/* ---------- Abertura ---------- */

.cap--abertura {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 72px);
  padding-block: 4rem 6rem;
}
.abertura {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: 3rem;
}
.abertura h1 { margin-bottom: 1.5rem; font-size: clamp(2.6rem, 6vw, 4.6rem); }
.abertura h1 em { font-style: normal; color: #356B0B; }
.abertura__lead { max-width: 34rem; color: var(--h-suave); font-size: 1.2rem; }
.logo-antiga { width: 100%; max-width: 440px; justify-self: center; text-align: center; color: var(--h-texto); }
.logo-antiga__samurai { width: 78%; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
/* .cap p já define um tamanho: por isso o seletor aqui precisa ser mais específico */
.logo-antiga .logo-antiga__nome {
  position: relative;
  margin: .4rem 0 0;
  font-family: Rubik, 'Arial Black', sans-serif;
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 4.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: #8CC63F;
  -webkit-text-stroke: 4px #151515;
  paint-order: stroke fill;
}
.logo-antiga__nome em { font-style: normal; font-size: .4em; color: #D7261E; vertical-align: super; }
/* Risco vermelho que atravessa o nome, igual ao da placa */
.logo-antiga__risco {
  position: absolute;
  top: 52%;
  left: 4%;
  right: 4%;
  height: 4px;
  background: #D7261E;
  transform-origin: left;
}
.logo-antiga .logo-antiga__sub {
  margin: .5rem 0 0;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* O caminho da loja: quatro paradas numa linha */
.rota {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 36rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.rota::before,
.rota::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 12%;
  height: 2px;
}
.rota::before { background: var(--h-borda); }
.rota::after { background: #D7261E; transform-origin: left; }
.rota li { position: relative; z-index: 1; padding: 1.6rem .6rem 0 0; }
.rota li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--h-texto);
  border-radius: 50%;
  background: var(--h-fundo);
}
.rota li:last-child::before { background: #D7261E; border-color: #D7261E; }
.rota a {
  display: block;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.25;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--h-suave);
  transition: color .3s;
}
.rota a:hover { color: var(--h-texto); }

.rolar {
  position: absolute;
  left: 50%;
  bottom: -4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--h-suave);
  translate: -50% 0;
}
/* Desenho de um mouse com a rodinha descendo */
.rolar i {
  position: relative;
  width: 22px;
  height: 34px;
  border: 2px solid currentColor;
  border-radius: 12px;
}
.rolar i::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: #D7261E;
  translate: -50% 0;
  animation: rodinha 1.8s ease-in-out infinite;
}
@keyframes rodinha {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

@media (max-width: 800px) {
  .abertura { grid-template-columns: 1fr; gap: 1.5rem; }
  .logo-antiga { max-width: 280px; grid-row: 1; }
  .rolar { display: none; }
}
@media (max-width: 480px) {
  .rota a { font-size: .68rem; }
}

/* ---------- Antes da Tokyo Car: o começo do Jakson ---------- */

.cap--antes { padding-block: 5rem 4rem; }
.antes { max-width: 46rem; }
.antes h2 { margin-bottom: 1.25rem; }
.antes p:not(.sobretitulo):not(.cap__lead) { color: var(--h-suave); }
.antes__marca {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--h-borda);
}
.antes__marca strong {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(3rem, 6vw, 4.5rem);
  line-height: 1;
  color: #D7261E;
  font-variant-numeric: tabular-nums;
}
.antes__marca span {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ---------- Capítulos 1 e 2: fotos impressas ---------- */

.cap__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 5rem;
}
.cap__grade--invertida .cap__texto { order: 2; }
.cap__texto { position: sticky; top: 130px; }
.cap__texto p:not(.sobretitulo):not(.cap__lead):not(.cap__virada) { color: var(--h-suave); }

.cap__virada {
  margin-top: 2rem;
  padding-left: 1rem;
  border-left: 4px solid #D7261E;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.5rem !important;
  line-height: 1.2;
  text-transform: uppercase;
}

.ficha {
  margin-top: 2rem;
  padding: 1.25rem 1.4rem;
  border: 1px dashed var(--h-borda);
  background: rgba(255, 255, 255, .45);
}
.ficha p { margin: 0; font-size: 1rem !important; color: var(--h-suave); }
.ficha .ficha__titulo {
  margin-bottom: .5rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .85rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--h-acento);
}
.ficha span[lang="ja"] { font-family: var(--fonte-kanji); font-weight: 900; color: #D7261E; }

.colagem {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.75rem;
  padding-block: 1.5rem 3rem;
}
.colagem--uma { grid-template-columns: 1fr; padding-inline: 1rem; }

.impresso {
  --giro: 0deg;
  position: relative;
  margin: 0;
  padding: .7rem .7rem 0;
  background: #FFFFFF;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .18);
  transform: rotate(var(--giro));
  transition: transform .6s var(--curva-mola), box-shadow .4s;
}
.impresso--1 { --giro: 2deg; }
.impresso--2 { --giro: -3deg; }
.impresso--3 { --giro: 2.5deg; margin-top: 5rem; }
/* Fita adesiva segurando a foto */
.impresso::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 26px;
  background: rgba(236, 226, 196, .8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
  translate: -50% 0;
  rotate: -4deg;
}
.impresso img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: sepia(.18) saturate(.9);
  transition: filter .6s;
}
.impresso--1 img { aspect-ratio: 7 / 6; object-position: 50% 30%; }
.impresso figcaption {
  padding: .75rem .2rem .95rem;
  color: #3A3A3A;
  font-size: .92rem;
  font-weight: 500;
}
.impresso:hover { z-index: 2; transform: rotate(0deg) scale(1.04); box-shadow: 0 30px 60px rgba(0, 0, 0, .28); }
.impresso:hover img { filter: none; }

@media (max-width: 900px) {
  .cap__grade { grid-template-columns: 1fr; gap: 2.5rem; }
  .cap__grade--invertida .cap__texto { order: 0; }
  .cap__texto { position: static; }
}
@media (max-width: 480px) {
  .colagem { gap: 1rem; }
  .impresso { padding: .45rem .45rem 0; }
  .impresso figcaption { font-size: .78rem; padding: .5rem .1rem .7rem; }
  .impresso--3 { margin-top: 3rem; }
}

/* ---------- Capítulo 3: o tempo fora ---------- */

.cap--pausa {
  display: flex;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}
.pausa { max-width: 44rem; text-align: center; }
.pausa .sobretitulo { justify-content: center; }
.pausa p:not(.sobretitulo):not(.cap__lead) { color: var(--h-suave); }
.pausa .pausa__destaque {
  margin-top: 2.2rem;
  color: var(--h-texto);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.2;
  text-transform: uppercase;
}

.pausa__palavra {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(12rem, 38vw, 32rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, .06);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

/* Farol: a lâmpada pisca, acende e o facho de luz atravessa a tela */
.farol { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.farol__lampada {
  position: absolute;
  top: 18%;
  left: 7%;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0 28%, #E4EEFF 42%, rgba(170, 200, 255, .45) 66%, transparent 70%);
  box-shadow: 0 0 70px 24px rgba(200, 222, 255, .3);
}
.farol__feixe {
  position: absolute;
  top: calc(18% + 42px);
  left: calc(7% + 42px);
  width: 130vw;
  height: 80vh;
  background: linear-gradient(90deg, rgba(222, 234, 255, .26), rgba(222, 234, 255, .08) 40%, transparent 72%);
  clip-path: polygon(0 47%, 100% 0, 100% 100%, 0 53%);
  transform-origin: left center;
  translate: 0 -50%;
  rotate: 8deg;
}

.anima [data-anima="farol"] .farol__lampada { opacity: .08; }
.anima [data-anima="farol"] .farol__feixe { opacity: 0; transform: scaleX(0); }
.anima [data-anima="farol"].visivel .farol__lampada { animation: acende 1.3s linear .2s forwards; }
.anima [data-anima="farol"].visivel .farol__feixe {
  animation:
    feixe 1.6s var(--curva) 1.1s forwards,
    respira 4s ease-in-out 3s infinite alternate;
}
@keyframes acende {
  0% { opacity: .08; }
  8% { opacity: 1; }
  15% { opacity: .15; }
  24% { opacity: 1; }
  32% { opacity: .3; }
  45%, 100% { opacity: 1; }
}
@keyframes feixe {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes respira {
  from { opacity: 1; transform: scaleX(1); }
  to { opacity: .7; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .farol__lampada { top: 8%; left: 4%; width: 56px; height: 56px; }
  .farol__feixe { top: calc(8% + 28px); left: calc(4% + 28px); rotate: 18deg; }
  .pausa .pausa__destaque { font-size: 1.3rem; }
}

/* ---------- Capítulo 4: a volta, com a logo nova ---------- */

.cap--volta { padding-top: 6rem; }
.volta { max-width: 48rem; text-align: center; }
.volta .sobretitulo { justify-content: center; }
.volta__titulo { font-size: clamp(2.8rem, 7vw, 5.4rem); }
.volta__titulo .destaque { color: var(--vermelho); }
.volta__lead { margin-top: 1rem; font-size: 1.35rem !important; color: var(--h-texto); }

.torii { position: relative; width: min(300px, 64vw); margin: 0 auto 3.5rem; padding: 12%; }
.torii::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--vermelho);
}
.torii img { position: relative; width: 100%; height: auto; }
.torii__onda {
  position: absolute;
  inset: 0;
  border: 2px solid var(--vermelho);
  border-radius: 50%;
  opacity: 0;
}

.anima [data-anima="torii"]::before { transform: scale(.1); opacity: 0; transition: transform 1.3s var(--curva-mola), opacity .5s; }
.anima [data-anima="torii"] img { opacity: 0; transform: translateY(40px) scale(.7); transition: opacity .6s .5s, transform 1.1s var(--curva-mola) .5s; }
.anima [data-anima="torii"].visivel::before { transform: none; opacity: 1; }
.anima [data-anima="torii"].visivel img { opacity: 1; transform: none; }
.anima [data-anima="torii"].visivel .torii__onda { animation: onda 3.4s ease-out 1.4s infinite; }
.anima [data-anima="torii"].visivel .torii__onda + .torii__onda { animation-delay: 3.1s; }
@keyframes onda {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.9); opacity: 0; }
}

.citacao {
  position: relative;
  margin: 3.5rem auto 0;
  max-width: 38rem;
  padding: 2.5rem 2rem 1.75rem;
  border: 1px solid var(--h-borda);
  background: linear-gradient(135deg, rgba(240, 0, 0, .12), transparent 60%);
}
.citacao::before {
  content: "“";
  position: absolute;
  top: -.35em;
  left: 50%;
  font-family: Georgia, serif;
  font-size: 6rem;
  line-height: 1;
  color: var(--vermelho);
  translate: -50% 0;
}
.citacao p {
  margin: 0 0 1rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.9rem) !important;
  line-height: 1.2;
  text-transform: uppercase;
}
.citacao footer { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--h-suave); }

/* Três pontos da nova identidade */
.cap--identidade { padding-block: 2rem 6rem; }
.identidade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.identidade__item { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--h-borda); }
.identidade__item::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 56px;
  height: 3px;
  background: var(--vermelho);
}
.identidade__num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--vermelho);
}
.identidade__item h3 { margin-bottom: .6rem; }
.identidade__item p { margin: 0; font-size: 1.02rem; color: var(--h-suave); }
.anima .identidade__item::before { width: 0; transition: width 1s var(--curva) calc(var(--atraso, 0s) + .3s); }
.anima .identidade__item.visivel::before { width: 56px; }

@media (max-width: 800px) { .identidade { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Loja nova ---------- */

.loja-nova {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: 1.5rem;
}
.loja-nova__foto { aspect-ratio: 4 / 5; }
.loja-nova__foto--1 {
  grid-column: 1 / 6;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.loja-nova__foto--2 {
  grid-column: 6 / 10;
  margin-top: 5rem;
  clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%, 0 40px);
}
/* Movimento lento de câmera nas fotos */
.loja-nova__foto img { animation: camera-lenta 16s ease-in-out infinite alternate; }
.loja-nova__foto--2 img { animation-delay: -8s; }
@keyframes camera-lenta {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.12) translate(-2%, -2%); }
}
.loja-nova__foto figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 3rem 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .9));
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
}
.loja-nova__texto { grid-column: 10 / 13; align-self: center; }
.loja-nova__texto h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

.continua { margin: 0; padding: 0; list-style: none; }
.continua li {
  padding: 1rem 0;
  border-top: 1px solid var(--h-borda);
  color: var(--h-suave);
}
.continua strong { display: block; color: var(--h-texto); }

@media (max-width: 1000px) {
  .loja-nova__foto--1 { grid-column: 1 / 7; }
  .loja-nova__foto--2 { grid-column: 7 / 13; }
  .loja-nova__texto { grid-column: 1 / -1; margin-top: 1rem; }
}
@media (max-width: 560px) {
  .loja-nova { gap: .75rem; }
  .loja-nova__foto--2 { margin-top: 3rem; }
  .loja-nova__foto figcaption { padding: 2rem .6rem .6rem; font-size: .78rem; }
}

/* ---------- Hoje, em números ---------- */

.cap--hoje { padding-block: 4rem; }
.hoje__numeros {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--h-borda);
}
.hoje__item { display: flex; flex-direction: column; padding: 2rem 1.5rem; border-left: 1px solid var(--h-borda); }
.hoje__item:first-child { padding-left: 0; border-left: 0; }
.hoje__item strong {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: clamp(3.2rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--vermelho);
  font-variant-numeric: tabular-nums;
}
.hoje__item span { margin-top: .5rem; color: var(--h-suave); text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
.hoje__frase { max-width: 40rem; margin: 2rem 0 0; font-size: 1.15rem; color: var(--h-suave); }

@media (max-width: 700px) {
  .hoje__numeros { grid-template-columns: 1fr; }
  .hoje__item { padding: 1.5rem 0; border-left: 0; border-top: 1px solid var(--h-borda); }
  .hoje__item:first-child { border-top: 0; }
}

/* ---------- Visita ---------- */

.visita {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
}
.visita__endereco {
  margin-bottom: 2rem;
  font-style: normal;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
}
.visita__endereco span { color: var(--h-suave); font-weight: 400; }
.visita__botoes { display: flex; flex-wrap: wrap; gap: 1rem; }

@media (max-width: 900px) { .visita { grid-template-columns: 1fr; } }

/* =========================================================
   Animações próprias da história
   ========================================================= */

/* Logo antiga se montando: samurai, nome, risco e assinatura */
.anima [data-anima="logo"] .logo-antiga__samurai { opacity: 0; transform: scale(.5); transition: opacity .5s var(--atraso, 0s), transform 1.2s var(--curva-mola) var(--atraso, 0s); }
.anima [data-anima="logo"] .logo-antiga__nome { opacity: 0; transform: translateY(40px); transition: opacity .6s calc(var(--atraso, 0s) + .8s), transform 1s var(--curva-mola) calc(var(--atraso, 0s) + .8s); }
.anima [data-anima="logo"] .logo-antiga__risco { transform: scaleX(0); transition: transform .8s var(--curva) calc(var(--atraso, 0s) + 1.3s); }
.anima [data-anima="logo"] .logo-antiga__sub { opacity: 0; transition: opacity .8s calc(var(--atraso, 0s) + 1.6s); }

.anima [data-anima="logo"].visivel .logo-antiga__samurai,
.anima [data-anima="logo"].visivel .logo-antiga__nome { opacity: 1; transform: none; }
.anima [data-anima="logo"].visivel .logo-antiga__risco { transform: none; }
.anima [data-anima="logo"].visivel .logo-antiga__sub { opacity: 1; }
.anima [data-anima="logo"].visivel { animation: flutua 6s ease-in-out 2.6s infinite; }
@keyframes flutua { 50% { transform: translateY(-10px); } }

/* Rota: a linha vermelha corre e as paradas aparecem uma a uma */
.anima [data-anima="rota"]::after { transform: scaleX(0); transition: transform 1.8s var(--curva) var(--atraso, 0s); }
.anima [data-anima="rota"].visivel::after { transform: none; }
.anima [data-anima="rota"] li { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--curva-mola); }
.anima [data-anima="rota"] li:nth-child(1) { transition-delay: var(--atraso, 0s); }
.anima [data-anima="rota"] li:nth-child(2) { transition-delay: calc(var(--atraso, 0s) + .4s); }
.anima [data-anima="rota"] li:nth-child(3) { transition-delay: calc(var(--atraso, 0s) + .8s); }
.anima [data-anima="rota"] li:nth-child(4) { transition-delay: calc(var(--atraso, 0s) + 1.2s); }
.anima [data-anima="rota"].visivel li { opacity: 1; transform: none; }

/* Fotos impressas caindo em cima da mesa */
.anima [data-anima="impresso"] {
  opacity: 0;
  transform: translateY(-80px) rotate(calc(var(--giro) - 18deg)) scale(1.12);
  transition: opacity .5s ease var(--atraso, 0s), transform 1.2s var(--curva-mola) var(--atraso, 0s), box-shadow .4s;
}
.anima [data-anima="impresso"].visivel { opacity: 1; transform: rotate(var(--giro)); }
.anima [data-anima="impresso"].visivel:hover { transform: rotate(0deg) scale(1.04); transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  body.historia, .historia .topo { transition: none; }
  .rolar i::before, .loja-nova__foto img { animation: none; }
  .impresso { transition: none; }
}