/* ======================================================================
   Sorveteria Maranata — "Cartaz"

   Terceira versão, do zero. A tese vem das duas referências mais
   "landing page" que o usuário mandou (Red Dead Redemption 2 e Four Arms):
   a página é um CARTAZ DE CINEMA. Arte de fundo em tela cheia, título
   condensado em caixa alta com UMA palavra na cor quente, faixa de quatro
   ícones com divisórias finas, um bloco de história em tela cheia, uma
   linha de dados, uma galeria em fita, rodapé em colunas.

   Uma cor quente manda (o pink da marca, no papel do vermelho das
   referências); o turquesa é a cor fria de apoio. Nada do vocabulário das
   versões anteriores: sem goteira, sem órbita, sem ilha clara derretida.
   Cortes secos entre as seções, como num site de estúdio.

   Regras que ficaram do feedback: nada de brilho colorido difuso — a luz
   colorida vem da FOTO de fundo, não de gradiente em CSS.
   ====================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
picture { display: contents; }
ul[role="list"], ol[role="list"] { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- Tokens ---------- */
:root {
  /* TEMA CLARO: o creme da seção "como pedir" virou o chão do site inteiro.
     Os nomes das variáveis continuam os do tema escuro (--preto é o chão,
     --creme é a tinta) pra não reescrever o arquivo; o backup escuro está
     em _tools/style-v3-escuro-backup.css. */
  --preto:    #faf1e3;
  --preto-2:  #f3e7d3;
  --preto-3:  #ecdcc3;
  --linha:    rgba(46, 27, 16, .14);
  --linha-2:  rgba(46, 27, 16, .3);

  --creme:    #2e1b10;
  --creme-2:  #1f1109;
  --pink:     #e91e8c;
  --pink-2:   #c6146f;   /* pink de texto: o claro (#ff3fa4) não lê sobre creme */
  --turq:     #0fa9a4;
  --choco:    #2e1b10;
  --zap:      #25d366;

  --tinta:    var(--creme);
  --tinta-2:  rgba(46, 27, 16, .78);
  --tinta-3:  rgba(46, 27, 16, .6);

  --f-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texto:  'Barlow', system-ui, sans-serif;

  --larg: 1320px;
  --lado: clamp(1.1rem, 4vw, 3rem);
  --bloco: clamp(3.2rem, 2.2rem + 3.6vw, 6rem);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; touch-action: pan-x pan-y; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero { --r: 0 !important; }
}
body {
  background: var(--preto); color: var(--tinta);
  font-family: var(--f-texto); font-size: clamp(.98rem, .94rem + .2vw, 1.05rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 800; text-transform: uppercase; line-height: .95; letter-spacing: -.005em; color: var(--creme-2); }
::selection { background: var(--pink); color: #fff; }
.pular { position: absolute; left: -999px; top: 0; background: var(--pink); color: #fff; font-weight: 700; padding: .8rem 1.2rem; z-index: 300; }
.pular:focus { left: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--turq); outline-offset: 3px; }
.icone { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }

.grao {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.miolo { max-width: var(--larg); margin-inline: auto; padding-inline: var(--lado); }

/* ---------- Tipos de texto ---------- */
.rotulo {
  display: inline-block; font-family: var(--f-titulo); font-weight: 700; font-size: .95rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--pink-2); margin-bottom: .7rem;
}
.titulo { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.6rem); }
.titulo em { font-style: normal; color: var(--pink-2); }
.texto { color: var(--tinta-2); max-width: 52ch; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-titulo); font-weight: 700; font-size: 1.08rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .85rem 1.5rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--pink { background: var(--pink); color: #fff; }
.btn--pink:hover { background: #d0177c; }
.btn--zap { background: var(--zap); color: #06301a; }
.btn--zap:hover { background: #33e07a; }
.btn--linha { border-color: var(--linha-2); color: var(--creme); }
.btn--linha:hover { border-color: var(--creme); }
.btn--claro { background: #faf1e3; color: var(--choco); }
.btn--claro:hover { background: #fff8ec; }
.link-seta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pink-2); }
.link-seta::after { content: "→"; transition: transform .2s; }
.link-seta:hover::after { transform: translateX(4px); }

.reveal { opacity: 0; transform: translateY(28px); }
.reveal--ativo { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--atraso, 0s); }
.pilar:nth-child(2), .cartao:nth-child(2), .passo:nth-child(2), .dado:nth-child(2) { --atraso: .1s; }
.pilar:nth-child(3), .cartao:nth-child(3), .passo:nth-child(3), .dado:nth-child(3) { --atraso: .2s; }
.pilar:nth-child(4), .cartao:nth-child(4), .dado:nth-child(4) { --atraso: .3s; }
.cartao:nth-child(5) { --atraso: .4s; }
/* títulos de seção: a palavra em pink sublinha ao aparecer */
.titulo em, .historia__titulo em, .fim__titulo em { position: relative; }
.titulo em::after, .historia__titulo em::after, .fim__titulo em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.8,.2,1) .3s; }
.reveal--ativo em::after { transform: scaleX(1); }
/* ícones dos pilares giram de leve no hover; cartões sobem */
.pilar__icone { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pilar:hover .pilar__icone { transform: rotate(-8deg) scale(1.08); }
.cartao:hover .cartao__arte { transform: translateY(-6px); }

/* ======================================================================
   TOPO — faixa utilitária fina + barra principal (Red Dead)
   ====================================================================== */
.faixa {
  border-bottom: 1px solid var(--linha); background: var(--preto);
  font-family: var(--f-titulo); font-weight: 700; font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
}
.faixa__miolo { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: .5rem; }
.faixa b { color: var(--pink-2); font-weight: 700; }
.faixa__links { display: flex; gap: 1.4rem; }
.faixa__links a { color: var(--tinta-3); display: inline-flex; align-items: center; gap: .4rem; }
.faixa__links a:hover { color: var(--creme); }

.topo { position: sticky; top: 0; z-index: 100; background: rgba(250,241,227,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linha); }
.topo__miolo { display: flex; align-items: center; gap: 1.5rem; height: 68px; }
.marca { display: flex; align-items: center; gap: .7rem; }
.marca img { width: 40px; height: 40px; border-radius: 50%; }
.marca span { font-family: var(--f-titulo); font-weight: 800; font-size: 1.35rem; letter-spacing: .04em; text-transform: uppercase; }
.marca span b { color: var(--pink-2); }
.nav { display: flex; gap: 1.8rem; margin-inline: auto; }
.nav a { font-family: var(--f-titulo); font-weight: 700; font-size: .95rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); padding-block: .4rem; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.nav a:hover { color: var(--creme-2); }
.nav a.ativo { color: var(--creme-2); border-bottom-color: var(--pink); }
.topo__btn { padding: .65rem 1.2rem; font-size: .95rem; }
.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--linha-2); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--creme); transition: transform .25s; }
.menu-btn span::before { transform: translateY(-6px); } .menu-btn span::after { transform: translateY(4px); }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* ======================================================================
   HERO — cartaz em tela cheia
   ====================================================================== */
.hero { position: relative; min-height: min(92svh, 900px); display: grid; align-items: center; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--linha); }
.hero__fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 1s ease; }
.hero__fundo--pronta { opacity: 1; }
/* escurece a base e a esquerda pra o título ler; nada de cor, só preto */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, rgba(250,241,227,.92) 0%, rgba(250,241,227,.55) 40%, rgba(250,241,227,.1) 70%), linear-gradient(to top, var(--preto) 0%, transparent 38%); }
.hero__miolo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2rem; padding-block: clamp(3rem, 8vh, 6rem); width: 100%; }
.hero__apresenta { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase; color: var(--pink-2); margin-bottom: 1rem; }
.hero__titulo { font-size: clamp(3.2rem, 1.8rem + 5.4vw, 6.6rem); line-height: .88; letter-spacing: -.01em; }
.hero__titulo em { font-style: normal; color: var(--pink-2); }
.hero__legenda { margin-top: 1.4rem; font-family: var(--f-titulo); font-weight: 600; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); letter-spacing: .06em; text-transform: uppercase; color: var(--creme); line-height: 1.3; }
.hero__legenda span { color: var(--tinta-3); }
.hero__acoes { display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem; margin-top: 1.8rem; }
.hero__arte { position: relative; justify-self: center; width: min(100%, 620px); }
.hero__arte img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(46,27,16,.35)); }
.hero__arte::after { content: ""; position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: 50%; height: 24px; background: radial-gradient(closest-side, rgba(46,27,16,.35), transparent 75%); }
/* indicador vertical "01 ••" da referência Four Arms */
/* ---- rolagem interativa do hero ----
   --r vai de 0 (topo) a 1 (hero já saiu). A animação de scroll nativa
   alimenta a variável; onde não existe, o JS cobre. Cada camada lê --r
   numa velocidade: fundo devagar, produto rápido, texto some. */
@property --r { syntax: '<number>'; inherits: true; initial-value: 0; }
.hero { --r: 0; }
@supports (animation-timeline: scroll()) {
  .hero { animation: hero-rola linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; }
}
@keyframes hero-rola { to { --r: 1; } }
.hero__fundo--pronta { transform: scale(calc(1.06 + var(--r) * .1)) translateY(calc(var(--r) * 60px)); }
.hero__miolo > div:first-child { transform: translateY(calc(var(--r) * -70px)); opacity: calc(1 - var(--r) * 1.1); }
.hero__arte { transform: translateY(calc(var(--r) * 160px)) scale(calc(1 - var(--r) * .1)); }
.hero__lateral { opacity: calc(1 - var(--r) * 3); }

/* ---- entrada do hero ao carregar ---- */
.hero__titulo .linha { display: block; animation: sobe .9s cubic-bezier(.2,.8,.2,1) both; }
.hero__titulo .linha:nth-child(1) { animation-delay: .15s; }
.hero__titulo .linha:nth-child(2) { animation-delay: .27s; }
.hero__titulo .linha:nth-child(3) { animation-delay: .39s; }
.hero__apresenta { animation: sobe .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .05s; }
.hero__legenda { animation: sobe .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .5s; }
.hero__acoes { animation: sobe .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: .62s; }
.hero__arte picture img, .hero__arte > img { animation: entra-arte 1.3s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; }
@keyframes sobe { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes entra-arte { from { opacity: 0; transform: translateY(50px) scale(.94); } to { opacity: 1; transform: none; } }

/* ---- barra de progresso da rolagem ---- */
.progresso { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 200; background: var(--pink); transform: scaleX(var(--p, 0)); transform-origin: left; pointer-events: none; }

/* ---- indicador fixo de seção (o "01 •••" do Four Arms, agora vivo) ---- */
.indice { position: fixed; left: var(--lado); bottom: 2rem; z-index: 95; display: flex; flex-direction: column; align-items: center; gap: .55rem; font-family: var(--f-titulo); font-weight: 700; font-size: .8rem; letter-spacing: .2em; color: var(--tinta-3); }
.indice__num { color: var(--creme); margin-bottom: .2rem; }
.indice i { width: 4px; height: 4px; border-radius: 50%; background: var(--linha-2); transition: transform .3s, background-color .3s; }
.indice i.ativo { background: var(--pink); transform: scale(1.8); }
.hero__lateral { position: absolute; right: calc(var(--lado) - .6rem); bottom: 2.2rem; writing-mode: vertical-rl; font-family: var(--f-titulo); font-weight: 700; font-size: .75rem; letter-spacing: .34em; text-transform: uppercase; color: var(--tinta-3); white-space: nowrap; }

/* ======================================================================
   FAIXA DE ÍCONES — quatro colunas com divisórias (Red Dead)
   ====================================================================== */
.pilares { border-bottom: 1px solid var(--linha); background: var(--preto-2); }
.pilares__grade { display: grid; grid-template-columns: repeat(4, 1fr); }
.pilar { padding: clamp(1.8rem, 3.4vw, 3rem) clamp(1.2rem, 2.6vw, 2.2rem); border-left: 1px solid var(--linha); text-align: center; display: flex; flex-direction: column; align-items: center; gap: .8rem; transition: background-color .3s; }
.pilar:first-child { border-left: 0; }
.pilar:hover { background: var(--preto-3); }
.pilar__icone { width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--pink); display: grid; place-items: center; color: var(--pink-2); }
.pilar__icone .icone { width: 24px; height: 24px; }
.pilar h2 { font-size: 1.25rem; letter-spacing: .08em; }
.pilar p { font-size: .92rem; color: var(--tinta-2); max-width: 28ch; }
.pilar .link-seta { margin-top: auto; font-size: .82rem; }

/* ======================================================================
   HISTÓRIA — segundo bloco em tela cheia (o "THE STORY" do Red Dead)
   ====================================================================== */
.historia { position: relative; overflow: hidden; border-bottom: 1px solid var(--linha); isolation: isolate; }
.historia__fundo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; opacity: 0; transition: opacity 1s; }
.historia__fundo--pronta { opacity: 1; }
.historia::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to right, var(--preto) 0%, rgba(250,241,227,.88) 38%, rgba(250,241,227,.2) 68%, transparent); }
.historia__miolo { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 2rem; min-height: min(78svh, 720px); padding-block: var(--bloco); }
.historia__titulo { font-size: clamp(2.8rem, 1.8rem + 5vw, 6.2rem); line-height: .9; }
.historia__titulo span { display: block; }
.historia__titulo em { font-style: normal; color: var(--pink-2); }
.historia .texto { margin-top: 1.4rem; }
.historia__arte { justify-self: end; width: min(100%, 460px); }
.historia__arte { position: relative; }
.historia__arte img { width: 100%; height: auto; position: relative; z-index: 1; }
.historia__arte::after { content: ""; position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); width: 56%; height: 26px; background: radial-gradient(closest-side, rgba(46,27,16,.35), transparent 75%); }

/* ======================================================================
   DADOS — linha com divisórias (Four Arms)
   ====================================================================== */
.dados { border-bottom: 1px solid var(--linha); background: var(--preto); }
.dados__grade { display: grid; grid-template-columns: repeat(4, 1fr); }
.dado { display: flex; align-items: center; gap: 1rem; padding: 1.4rem clamp(1rem, 2.4vw, 2rem); border-left: 1px solid var(--linha); }
.dado:first-child { border-left: 0; padding-left: 0; }
.dado .icone { width: 26px; height: 26px; color: var(--pink-2); }
.dado small { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.dado strong { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; letter-spacing: .04em; text-transform: uppercase; color: var(--creme-2); line-height: 1.15; }
.dado a:hover { color: var(--turq); }

/* ======================================================================
   GALERIA — fita horizontal de cartões inclinados (Four Arms / Red Dead)
   ====================================================================== */
.galeria { padding-block: var(--bloco); border-bottom: 1px solid var(--linha); overflow: hidden; }
.galeria__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.galeria__setas { display: flex; gap: .6rem; }
.seta { width: 46px; height: 46px; border: 1px solid var(--linha-2); color: var(--creme); display: grid; place-items: center; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.seta:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.seta svg { width: 18px; height: 18px; }
.fita { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); scrollbar-width: none; padding-bottom: .5rem; margin-inline: calc(var(--lado) * -1); padding-inline: var(--lado); }
.fita::-webkit-scrollbar { display: none; }
.cartao { flex: 0 0 min(300px, 72vw); scroll-snap-align: start; position: relative; }
.cartao__arte { aspect-ratio: 4 / 5; background: #fff8ec; border: 1px solid var(--linha); display: grid; place-items: center; padding: 1.6rem 1rem; overflow: hidden; position: relative; transition: border-color .3s, transform .4s cubic-bezier(.2,.8,.2,1); }
/* o corte inclinado da referência: só no canto, pra não parecer erro */
.cartao__arte::before { content: ""; position: absolute; top: 0; right: 0; width: 30%; height: 44%; background: linear-gradient(225deg, var(--pink) 0 3px, transparent 3px); opacity: 0; transition: opacity .3s; }
.cartao:hover .cartao__arte { border-color: var(--pink); }
.cartao:hover .cartao__arte::before { opacity: 1; }
.cartao__arte img { position: absolute; inset: 1.6rem 1rem; margin: auto; width: auto; height: auto; max-width: calc(100% - 2rem); max-height: calc(100% - 3.2rem); object-fit: contain; filter: drop-shadow(0 18px 26px rgba(46,27,16,.3)); transition: transform .5s ease; }
.cartao:hover .cartao__arte img { transform: translateY(-8px) scale(1.03); }
.cartao__num { position: absolute; left: 1rem; top: .8rem; font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; letter-spacing: .2em; color: var(--tinta-3); }
.cartao__texto { padding-top: 1rem; }
.cartao h3 { font-size: 1.4rem; letter-spacing: .06em; }
.cartao p { font-size: .92rem; color: var(--tinta-2); margin-top: .2rem; }
.cartao small { display: inline-block; margin-top: .5rem; font-family: var(--f-titulo); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pink-2); }
.galeria__nota { margin-top: 1.6rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding: 1.2rem 1.4rem; border: 1px solid var(--linha); background: var(--preto-2); }
.galeria__nota p { color: var(--tinta-2); }
.galeria__nota strong { color: var(--creme-2); }

/* ======================================================================
   CLARO — a faixa clara da referência Four Arms: passos + citação
   ====================================================================== */
.claro { background: var(--choco); color: #faf1e3; }
.claro .rotulo { color: #ff3fa4; }
.claro h2, .claro h3 { color: #fff8ec; }
.claro__miolo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); padding-block: var(--bloco); align-items: start; }
.passos { display: grid; gap: 0; margin-top: 1.6rem; border-top: 1px solid rgba(250,241,227,.18); }
.passo { display: grid; grid-template-columns: 64px 1fr; gap: 1.2rem; align-items: start; padding: 1.3rem 0; border-bottom: 1px solid rgba(250,241,227,.18); }
.passo b { font-family: var(--f-titulo); font-weight: 800; font-size: 2.6rem; line-height: 1; color: #ff3fa4; }
.passo h3 { font-size: 1.35rem; letter-spacing: .06em; margin-bottom: .2rem; }
.passo p { color: rgba(250,241,227,.72); }
.claro .btn { margin-top: 1.6rem; }
.citacao { position: relative; padding: 2.4rem 2rem 2rem 2.4rem; border-left: 4px solid var(--pink); background: rgba(250,241,227,.06); }
.citacao::before { content: "\201C"; position: absolute; left: 1.2rem; top: -.4rem; font-family: var(--f-titulo); font-weight: 800; font-size: 7rem; line-height: 1; color: rgba(250,241,227,.14); }
.citacao blockquote { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.8rem); line-height: 1.05; text-transform: uppercase; color: #fff8ec; position: relative; }
.citacao figcaption { margin-top: 1rem; font-family: var(--f-titulo); font-weight: 700; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: #ff3fa4; }

/* ======================================================================
   LOCAL — mapa + painel
   ====================================================================== */
.local { padding-block: var(--bloco); border-bottom: 1px solid var(--linha); }
.local__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; margin-top: 2rem; }
.mapa { position: relative; min-height: clamp(320px, 44vw, 480px); border: 1px solid var(--linha); background: var(--preto-2); overflow: hidden; }
.mapa__espera { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 1rem; text-align: center; padding: 1.5rem; color: var(--tinta-2); transition: opacity .6s; }
.mapa--pronto .mapa__espera { opacity: 0; pointer-events: none; }
.mapa__pino-espera img { width: 56px; height: 56px; border-radius: 50%; }
.mapa__controles { position: absolute; right: 12px; top: 12px; z-index: 3; display: grid; gap: 6px; }
.mapa__botao { width: 36px; height: 36px; cursor: pointer; background: rgba(250,241,227,.92); border: 1px solid var(--linha-2); color: var(--creme); font-size: 1.1rem; display: grid; place-items: center; transition: background-color .2s; }
.mapa__botao:hover { background: var(--pink); color: #fff; }
.mapa__botao svg { width: 17px; height: 17px; fill: currentColor; }
.mapa .maplibregl-ctrl-attrib, .mapa .maplibregl-ctrl-attrib.maplibregl-compact, .mapa .maplibregl-ctrl-attrib.maplibregl-compact-show { background: rgba(250,241,227,.9); color: var(--tinta-3); font-size: 10px; }
.mapa .maplibregl-ctrl-attrib a { color: var(--tinta-2); }
.mapa .maplibregl-ctrl-attrib-button { background-color: rgba(250,241,227,.9); border-radius: 50%; }
.pino { position: relative; display: grid; place-items: center; width: 62px; height: 62px; }
.pino__anel { position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--pink); opacity: .8; animation: pino-pulso 2.6s ease-out infinite; }
@keyframes pino-pulso { 0% { transform: scale(.75); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
.pino__disco { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; border: 2px solid #fff8ec; box-shadow: 0 8px 22px -6px rgba(46,27,16,.5); }
.pino__disco img { width: 100%; height: 100%; object-fit: cover; }
.pino__ponta { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #fff8ec; }
.painel { border: 1px solid var(--linha); background: var(--preto-2); padding: clamp(1.4rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; gap: 1rem; }
.painel__nome { font-family: var(--f-titulo); font-weight: 800; font-size: 1.8rem; letter-spacing: .04em; text-transform: uppercase; }
.painel__linha { display: grid; grid-template-columns: 26px 1fr; gap: .8rem; align-items: start; padding-block: .7rem; border-top: 1px solid var(--linha); }
.painel__linha .icone { width: 20px; height: 20px; color: var(--pink-2); margin-top: .2rem; }
.painel__linha small { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-3); }
.painel__linha span { color: var(--creme); }
.painel__acoes { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .4rem; }

/* ======================================================================
   CHAMADA FINAL
   ====================================================================== */
.fim { position: relative; padding-block: var(--bloco); text-align: center; border-bottom: 1px solid var(--linha); overflow: hidden; }
.fim__titulo { font-size: clamp(3rem, 2rem + 5vw, 6.4rem); line-height: .9; }
.fim__titulo em { font-style: normal; color: var(--pink-2); }
.fim .texto { margin: 1rem auto 1.8rem; }
.fim__acoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }
.fim__fila { display: flex; justify-content: center; align-items: flex-end; gap: clamp(.4rem, 2vw, 1.6rem); margin-top: 3rem; }
.fim__fila span { flex: 1 1 0; max-width: 160px; aspect-ratio: 3 / 4; display: grid; place-items: end center; position: relative; }
.fim__fila span::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60%; height: 12px; background: radial-gradient(closest-side, rgba(46,27,16,.35), transparent 75%); }
.fim__fila img { max-height: 100%; width: auto; object-fit: contain; filter: drop-shadow(0 14px 22px rgba(46,27,16,.3)); transition: transform .35s; }
.fim__fila span:hover img { transform: translateY(-8px); }

/* ======================================================================
   RODAPÉ — colunas (Red Dead / Four Arms)
   ====================================================================== */
.rodape { background: var(--choco); color: #faf1e3; --linha: rgba(250,241,227,.14); --linha-2: rgba(250,241,227,.3); --tinta-2: rgba(250,241,227,.72); --tinta-3: rgba(250,241,227,.55); --creme: #faf1e3; --creme-2: #fff8ec; --pink-2: #ff3fa4; }
.rodape__grade { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 2rem; padding-block: var(--bloco) 2rem; }
.rodape__marca { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.rodape__marca p { color: var(--tinta-3); font-size: .92rem; max-width: 28ch; }
.rodape__social { display: flex; gap: .5rem; }
.rodape__social a { width: 40px; height: 40px; border: 1px solid var(--linha-2); display: grid; place-items: center; color: var(--creme); transition: background-color .2s, border-color .2s; }
.rodape__social a:hover { background: var(--pink); border-color: var(--pink); }
.rodape__social .icone { width: 18px; height: 18px; }
.rodape__col h3 { font-size: 1rem; letter-spacing: .2em; margin-bottom: 1rem; color: var(--creme-2); }
.rodape__col ul { display: grid; gap: .55rem; }
.rodape__col li { color: var(--tinta-2); font-size: .95rem; }
.rodape__col a:hover { color: var(--pink-2); }
.rodape__base { border-top: 1px solid var(--linha); padding-block: 1.1rem 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; color: var(--tinta-3); font-size: .82rem; }

/* ---------- Botão flutuante ---------- */
.zap-fab { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 95; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--zap); color: #06301a; box-shadow: 0 10px 26px -8px rgba(0,0,0,.8); opacity: 0; visibility: hidden; transform: scale(.7); transition: opacity .3s, transform .3s, visibility .3s; }
.zap-fab--visivel { opacity: 1; visibility: visible; transform: none; }
.zap-fab .icone { width: 27px; height: 27px; }

/* ======================================================================
   RESPONSIVO
   ====================================================================== */
@media (max-width: 1240px) { .indice { display: none; } }
@media (max-width: 1080px) {
  .pilares__grade { grid-template-columns: 1fr 1fr; }
  .pilar:nth-child(3) { border-left: 0; }
  .pilar:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .dados__grade { grid-template-columns: 1fr 1fr; }
  .dado:nth-child(3) { border-left: 0; padding-left: 0; }
  .dado:nth-child(n+3) { border-top: 1px solid var(--linha); }
  .local__grade { grid-template-columns: 1fr; }
  .rodape__grade { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
  .claro__miolo { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .faixa__links a span { display: none; }
  .nav { display: none; }
  .nav--aberto { display: flex; flex-direction: column; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: #faf1e3; border-bottom: 1px solid var(--linha); padding: .6rem var(--lado) 1rem; }
  .nav--aberto a { padding: .9rem 0; border-bottom: 1px solid var(--linha); }
  .menu-btn { display: flex; }
  .topo__miolo { position: relative; gap: .8rem; }
  .marca { margin-right: auto; }
  .topo__btn span { display: none; }
  .hero { min-height: auto; }
  .hero__miolo { grid-template-columns: 1fr; gap: 1rem; padding-block: 2rem 3rem; }
  .hero__arte { grid-row: 1; width: min(100%, 380px); }
  .hero__titulo { font-size: clamp(3rem, 14vw, 5rem); }
  .hero__lateral, .indice { display: none; }
  .hero::after { background: linear-gradient(to top, var(--preto) 0%, rgba(250,241,227,.55) 55%, rgba(250,241,227,.3)); }
  .historia__miolo { grid-template-columns: 1fr; min-height: auto; }
  .historia__arte { grid-row: 1; justify-self: center; width: min(100%, 300px); }
  .historia::after { background: linear-gradient(to top, var(--preto) 0%, rgba(250,241,227,.7) 60%, rgba(250,241,227,.4)); }
}
@media (max-width: 620px) {
  .pilares__grade, .dados__grade { grid-template-columns: 1fr; }
  .pilar, .dado { border-left: 0; border-top: 1px solid var(--linha); padding-left: 0; padding-right: 0; }
  .pilar:first-child, .dado:first-child { border-top: 0; }
  .pilar { text-align: left; align-items: flex-start; }
  .rodape__grade { grid-template-columns: 1fr; }
  .fim__fila { flex-wrap: wrap; gap: .6rem; }
  .fim__fila span { flex: 0 0 28%; }
  .hero__acoes .btn, .fim__acoes .btn { width: 100%; }
  .faixa__miolo { justify-content: center; text-align: center; }
  .faixa__links { display: none; }
  .faixa .cidade { display: none; }
}