/* ==========================================================
   PORTÃO DO DRAGÃO — base do site
   tokens, reset, selo hanko (componente comum) e movimento reduzido
   ABC.DESIGN_
   ========================================================== */

/* Gang of Three (Vic Fieger, licença 1001Fonts FFC: uso comercial e @font-face liberados;
   o arquivo não pode ser modificado). É só caixa alta e tem um único peso.
   - font-weight 100–900: a mesma face atende os pesos 500–800 do CSS, sem negrito sintético.
   - unicode-range: só os 149 caracteres que a fonte desenha. Os outros (·, –, —, @, %…)
     ficam mapeados para um glifo vazio e sumiriam; assim eles caem na Montserrat. */
@font-face {
  font-family: "Gang of Three";
  src: url("../assets/fontes/gang-of-three.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+20-22, U+24, U+26-29, U+2C-3B, U+3F, U+41-5A, U+60-7A, U+A0-A1, U+A8, U+AB,
                 U+AD, U+B4, U+B8, U+BB, U+BF-C4, U+C6-CF, U+D1-D6, U+D9-DC, U+DF-E4, U+E6-EF,
                 U+F1-F6, U+F9-FC, U+131, U+152-153, U+2C6, U+2DC, U+37E, U+2018-2019,
                 U+201C-201D, U+20AC;
}

:root {
  color-scheme: dark;
  --ink: #050404;
  --ink-2: #0b0a0c;
  --seal: #8b0a0a;
  --crimson: #e0262b;
  --seal-red: #b8121a;
  --ember: #ff6a3d;
  --bone: #efe4d6;
  --bone-dim: rgba(239, 228, 214, .72);

  /* tipografia do manual da marca: Gang of Three em todo texto do site, Montserrat nos
     textos corridos (parágrafos). Kanji dos selos e estandartes continuam na Yuji Syuku. */
  --f-display: "Gang of Three", "Montserrat", sans-serif;
  --f-texto: "Montserrat", system-ui, sans-serif;
  --f-brush: "Yuji Syuku", serif;

  /* botão "Agendar sessão" (arte 1100×395): vive no hero (hero.css), e a navbar reserva a vaga
     dele no desktop (nav.css). Altura no desktop: */
  --cta-alt: clamp(74px, 6.6vw, 100px);
}
@media (max-width: 960px) {
  :root {   /* celular: largura e altura do botão na base da primeira tela */
    --cta-w: min(calc(100vw - 20px), 470px, 78svh);
    --cta-h: calc(var(--cta-w) / 2.79);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html, body { background: var(--ink); }
/* iOS: não inflar o texto sozinho (ao girar o celular ou em textos pequenos dentro de zoom) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--bone); font-family: var(--f-display); overflow-x: hidden; }
img { max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--crimson); outline-offset: 4px; }

/* âncoras do menu: rolagem suave (sem ela com movimento reduzido) */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ==========================================================
   SELO HANKO — linguagem gráfica recorrente
   ========================================================== */
.seal {
  position: relative; isolation: isolate;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  font: 400 17px / 1 var(--f-brush);
  color: var(--bone);
  rotate: -4deg;
}
.seal::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--seal-red);
  -webkit-mask: url("../assets/comum/selo-textura.png") center / 100% 100% no-repeat;
          mask: url("../assets/comum/selo-textura.png") center / 100% 100% no-repeat;
}

/* ==========================================================
   DIVISOR ENTRE AS SEÇÕES (v4.0) — linha vermelha acesa que some nas pontas, com o
   losango carmesim da marca no centro. Fica entre as <section> do <main>, com altura
   zero: passa por cima da emenda (z 15, abaixo da navbar e do botão Agendar) e não
   desloca nenhuma seção.
   ========================================================== */
.divisor { position: relative; z-index: 15; height: 0; pointer-events: none; }
.divisor::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--seal-red) 14%, var(--crimson) 50%, var(--seal-red) 86%, transparent);
  filter: drop-shadow(0 0 4px rgba(224, 38, 43, .75));
}
.divisor::after {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 10px; height: 10px;
  translate: -50% -50%; rotate: 45deg;
  background: var(--crimson);
  box-shadow: 0 0 0 3px var(--ink), 0 0 0 4px rgba(224, 38, 43, .9), 0 0 14px 2px rgba(224, 38, 43, .6);
}

/* ==========================================================
   RODAPÉ (v4.0.2) — só os direitos autorais. Fica fora do <main>
   (o scroll-spy não o vê) e tem um divisor acima, como as seções.
   ========================================================== */
.rodape {
  background: var(--ink); color: rgba(239, 228, 214, .55);
  padding: 22px 16px calc(22px + env(safe-area-inset-bottom));
  text-align: center;
  font-family: var(--f-display); font-size: 12px; letter-spacing: .14em; line-height: 1.6;
}
.rodape p { margin: 0; }
@media (max-width: 640px) { .rodape { padding-right: 72px; padding-left: 72px; } } /* não passa por baixo do botão de som */

/* ==========================================================
   MOVIMENTO REDUZIDO — cena final, sem animação
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}