/* ==========================================================================
   RAIZ — Base: reset, documento, tipografia, header, menu, rail, footer
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--fonte-corpo);
  font-size: var(--fs-base);
  line-height: var(--altura-linha-corpo);
  color: var(--papel);
  background: var(--anoitecer);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

/* ---------- Superfícies do navegador (tematizadas, não default) ---------- */
::selection {
  background: var(--vermelho);
  color: #fff;
}

html {
  scrollbar-color: var(--baia) var(--breu);
  caret-color: var(--vermelho);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--breu); }
::-webkit-scrollbar-thumb { background: var(--baia); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--agua); }
.tema-claro::-webkit-scrollbar-track { background: var(--claro); }
.tema-claro::-webkit-scrollbar-thumb { background: var(--concreto); }
.tema-claro { scrollbar-color: var(--concreto) var(--claro); }

:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 3px;
  border-radius: 2px;
}
.tema-claro :focus-visible,
.sobre-claro :focus-visible {
  outline-color: var(--vermelho-claro-legivel);
}

/* ---------- Skip link ---------- */
.skip {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.25rem;
  background: var(--vermelho);
  color: #fff;
  font-family: var(--fonte-display);
  font-weight: 500;
  text-decoration: none;
  transition: top var(--t-rapido) var(--ease);
}
.skip:focus { top: 1rem; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4 {
  font-family: var(--fonte-display);
  font-weight: 500;
  line-height: var(--altura-linha-display);
  letter-spacing: var(--trilha-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  text-transform: uppercase;
  font-weight: 600;
}

h2 {
  font-size: var(--fs-h2);
  text-transform: uppercase;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.15;
}

p { max-width: 68ch; }

.micro {
  font-family: var(--fonte-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--trilha-micro);
  text-transform: uppercase;
}

.micro-2 {
  font-family: var(--fonte-display);
  font-size: var(--fs-micro-2);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  max-width: 62ch;
}

.num-tab {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---------- Container / grid ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.container--rail {
  padding-left: clamp(1.25rem, 4vw, 2.5rem);
}

@media (min-width: 1200px) {
  .container--rail { padding-left: calc(var(--rail-esq) + var(--rail-w) + 3rem); }
}

/* ---------- Seções ---------- */
section[id] { scroll-margin-top: 5rem; }

.secao {
  padding-block: var(--s-9);
  position: relative;
}
@media (min-width: 768px) {
  .secao { padding-block: var(--s-10); }
}

.secao__cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  border-top: 1px solid var(--linha-clara);
  padding-top: var(--s-3);
  margin-bottom: var(--s-7);
}
.sobre-claro .secao__cabeca,
.tema-claro .secao__cabeca { border-top-color: var(--linha-escura-forte); }

.secao__cabeca .micro { color: var(--papel-suave); }
.tema-claro .secao__cabeca .micro,
.sobre-claro .secao__cabeca .micro { color: var(--tinta-suave); }

/* fundos das seções */
.bg-claro { background: var(--claro); color: var(--tinta-corpo); }
.bg-claro h1, .bg-claro h2, .bg-claro h3,
.bg-concreto h1, .bg-concreto h2, .bg-concreto h3 { color: var(--tinta); }
.bg-concreto { background: var(--concreto); color: var(--tinta-corpo); }
.bg-crepusculo { background: var(--crepusculo); }
.bg-baia { background: var(--baia); }
.bg-agua { background: var(--agua); }
.bg-anoitecer { background: var(--anoitecer); }
.bg-noite { background: var(--noite); }
.bg-noite-funda { background: var(--noite-funda); }
.bg-breu { background: var(--breu); }

/* ---------- Header ---------- */
.site-head {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--t-rapido) linear, border-color var(--t-rapido) linear;
  border-bottom: 1px solid transparent;
}

.site-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  height: 84px;
  transition: height var(--t-rapido) var(--ease);
}

.site-head.rolou {
  background: rgba(4, 19, 26, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--linha-clara);
}
.site-head.rolou .site-head__inner { height: 64px; }

/* header transparente sobre hero claro (páginas internas claras) */
.tema-hero-claro .site-head { color: var(--tinta); }
.tema-hero-claro .site-head.rolou { color: var(--papel); }
.brand {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
}
.brand::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vermelho);
  align-self: center;
  transform: translateY(1px);
}

.site-head__nav {
  display: none;
  gap: clamp(1rem, 2vw, 2rem);
}

.site-head__nav a {
  font-family: var(--fonte-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
}

.site-head__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.2rem;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-rapido) var(--ease);
}
.site-head__nav a:hover::after,
.site-head__nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-head__nav a[aria-current="page"] { color: var(--vermelho-escuro-legivel); }

@media (min-width: 1000px) {
  .site-head__nav { display: flex; }
  .menu-btn { display: none; }
}

/* botão menu */
.menu-btn {
  font-family: var(--fonte-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  height: var(--alvo);
  min-width: var(--alvo);
  padding-inline: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.menu-btn__barras {
  width: 22px;
  height: 10px;
  position: relative;
}
.menu-btn__barras i {
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-rapido) var(--ease), top var(--t-rapido) var(--ease);
}
.menu-btn__barras i:first-child { top: 0; }
.menu-btn__barras i:last-child { top: 8px; }
body.menu-aberto .menu-btn__barras i:first-child { top: 4px; transform: rotate(45deg); }
body.menu-aberto .menu-btn__barras i:last-child { top: 4px; transform: rotate(-45deg); }

/* ---------- Menu mobile (painel fullscreen editorial) ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--breu);
  display: flex;
  flex-direction: column;
  padding: calc(84px + var(--s-4)) clamp(1.25rem, 6vw, 3rem) calc(var(--s-6) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease), visibility 0s var(--t-medio);
}
body.menu-aberto .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .menu { transition: opacity var(--t-rapido) linear; transform: none; }
}

.menu__nav { flex: 1; display: flex; flex-direction: column; }

.menu__item {
  border-top: 1px solid var(--linha-clara);
}
.menu__item:last-child { border-bottom: 1px solid var(--linha-clara); }

.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  min-height: var(--alvo);
  text-decoration: none;
  font-family: var(--fonte-display);
  font-size: clamp(1.7rem, 7.5vw, 2.6rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--trilha-display);
  color: var(--papel);
  transition: color var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
}
.menu__link:active { color: var(--vermelho-escuro-legivel); }
.menu__num {
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--vermelho-escuro-legivel);
  font-weight: 500;
}

.menu__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.menu__pe .micro-2 { color: var(--papel-suave); }

@media (min-width: 1000px) {
  .menu { display: none; }
}

/* ---------- Rail / trilho ---------- */
.rail {
  position: fixed;
  left: var(--rail-esq);
  top: 0;
  bottom: 0;
  z-index: var(--z-rail);
  width: var(--rail-w);
  display: none;
  pointer-events: none;
}
@media (min-width: 768px) { .rail { display: block; } }

.rail__linha {
  position: absolute;
  inset: 0;
  background: var(--linha-clara-forte);
  overflow: hidden;
}
.tema-hero-claro .rail__linha { background: rgba(12, 52, 70, 0.25); }
.tema-hero-claro .rail__rotulo { color: var(--tinta); }
.tema-hero-claro .rail__ponto { background: var(--baia); }

.rail__preenchimento {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 100%;
  background: var(--vermelho);
  transform-origin: top;
  transform: scaleY(0);
}

.rail__marcadores {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.4rem, 4.5vh, 2.4rem);
  pointer-events: none;
}
.rail__marcadores li { pointer-events: auto; }

.rail__marcador {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin-left: calc((var(--rail-w) - 12px) / 2);
}
.rail__ponto {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--papel-suave);
  transition: background var(--t-rapido) linear, box-shadow var(--t-rapido) linear, inset var(--t-rapido) linear;
}
.rail__marcador::before {
  content: "";
  position: absolute;
  inset: -16px;
}
.rail__marcador:hover .rail__ponto,
.rail__marcador:focus-visible .rail__ponto { background: var(--claro); }
.rail__marcador.ativo .rail__ponto {
  inset: 0;
  background: var(--vermelho);
  box-shadow: 0 0 0 3px rgba(210, 63, 42, 0.25);
}

.rail__rotulo {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  translate: 0 -50%;
  white-space: nowrap;
  font-family: var(--fonte-display);
  font-size: var(--fs-micro-2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--claro);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-rapido) var(--ease), transform var(--t-rapido) var(--ease);
  pointer-events: none;
}
.rail__marcador:hover .rail__rotulo,
.rail__marcador:focus-visible .rail__rotulo,
.rail__marcador.ativo .rail__rotulo { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.site-pe {
  background: var(--breu);
  color: var(--papel);
  padding-top: var(--s-9);
  border-top: 1px solid var(--linha-clara);
}

.site-pe__marca {
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: clamp(4rem, 13vw, 11rem);
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: var(--claro);
}
.site-pe__marca span { color: var(--vermelho); }

.site-pe__topo {
  display: grid;
  gap: var(--s-6);
  padding-bottom: var(--s-8);
}
@media (min-width: 900px) {
  .site-pe__topo {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
  }
}

.site-pe__desc {
  color: var(--papel-suave);
  max-width: 42ch;
  margin-top: var(--s-4);
}

.site-pe__links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--s-4);
}
@media (min-width: 560px) {
  .site-pe__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.site-pe__grupo h3 {
  font-size: var(--fs-micro);
  letter-spacing: var(--trilha-micro);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--papel-suave);
  margin-bottom: var(--s-3);
}
.site-pe__grupo ul { display: grid; gap: 0.65rem; }
.site-pe__grupo a {
  text-decoration: none;
  color: var(--papel);
  font-size: var(--fs-micro);
  font-family: var(--fonte-display);
  letter-spacing: 0.05em;
}
.site-pe__grupo a:hover { color: var(--vermelho-escuro-legivel); }

.site-pe__base {
  border-top: 1px solid var(--linha-clara);
  padding-block: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  color: var(--papel-suave);
}

/* ---------- FAB WhatsApp (CTA persistente, só ícone) ---------- */
.fab-wa {
  position: fixed;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: calc(clamp(1.25rem, 4vw, 2.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-sticky-cta);
}

.fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--fab);
  min-width: var(--fab);
  padding-inline: 1.05rem;
  border-radius: var(--raio-pill);
  background: var(--vermelho);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(2, 12, 17, 0.36);
}
.fab:hover { background: var(--vermelho-hover); }
.fab:active { transform: scale(0.92); }

.fab > svg {
  flex: none;
  transition: transform var(--t-rapido) var(--ease);
}
.fab:hover > svg { transform: scale(1.1) rotate(-5deg); }

.fab__rotulo {
  max-width: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--fonte-display);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: max-width var(--t-medio) var(--ease), margin-left var(--t-medio) var(--ease);
}
@media (hover: hover) {
  .fab:hover .fab__rotulo,
  .fab:focus-visible .fab__rotulo { max-width: 9rem; margin-left: 0.55rem; }
}

/* anel de pulso: sinal discreto de ação, dessincronizado em duas ondas */
.fab__anel { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.fab__anel::before,
.fab__anel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--vermelho);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .fab__anel::before { animation: fab-pulso 3s var(--ease) infinite 0.4s; }
  .fab__anel::after { animation: fab-pulso 3s var(--ease) infinite 1.9s; }
  @keyframes fab-pulso {
    0% { transform: scale(1); opacity: 0.5; }
    65% { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
  }
}

/* ícone alternativo (fecha o painel) */
.fab__ico--x { display: none; }
body.zap-aberto .fab__ico--zap { display: none; }
body.zap-aberto .fab__ico--x { display: block; }
body.zap-aberto .fab__anel { display: none; }

/* ---------- Painel de opções do WhatsApp ---------- */
.zap-veu {
  position: fixed;
  inset: 0;
  z-index: 64;
  background: rgba(2, 12, 17, 0.5);
}

.zap-painel {
  position: fixed;
  right: clamp(1.25rem, 4vw, 2.5rem);
  bottom: calc(clamp(1.25rem, 4vw, 2.5rem) + env(safe-area-inset-bottom, 0px) + var(--fab) + 0.75rem);
  z-index: 65;
  width: min(26.5rem, calc(100vw - 2rem));
  max-height: calc(100vh - var(--fab) - 4rem);
  overflow-y: auto;
  padding: var(--s-4);
  background: rgba(4, 19, 26, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--linha-clara);
  box-shadow: 0 18px 44px rgba(2, 12, 17, 0.5);
  color: var(--papel);
}
@media (prefers-reduced-motion: no-preference) {
  .zap-painel { animation: zap-surge 200ms var(--ease); }
  @keyframes zap-surge {
    from { opacity: 0; transform: translateY(10px); }
  }
}

.zap-painel__cabeca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.zap-painel__cabeca .micro { color: var(--claro); }

.zap-painel__fechar {
  width: var(--alvo);
  height: var(--alvo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--papel-suave);
  margin: -0.5rem -0.75rem -0.5rem 0;
  transition: color var(--t-rapido) linear;
}
.zap-painel__fechar:hover { color: var(--claro); }
.zap-painel__fechar svg { width: 14px; height: 14px; }

.zap-campo { margin-bottom: var(--s-4); }

.zap-cupom label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--papel-suave);
}
.zap-cupom input {
  width: 100%;
  height: 48px;
  padding: 0 1.1rem;
  background: transparent;
  color: var(--claro);
  border: 1px solid var(--linha-clara-forte);
  border-radius: var(--raio-pill);
  font-family: var(--fonte-corpo);
}
.zap-cupom input::placeholder { color: var(--papel-suave); opacity: 0.7; }
.zap-cupom input:focus-visible {
  outline: 2px solid var(--vermelho);
  outline-offset: 2px;
}

.zap-painel__cta { width: 100%; justify-content: center; }

/* ---------- Reveal (viewport) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
  transition-delay: var(--reveal-atraso, 0ms);
}
.reveal.no-vp { transition: none; }
.reveal.visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Utilidades ---------- */
.ir {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}