/* Krav Maga Mogi & Suzano — componentes do design system + estrutura da página.
   Depende de tokens.css, que precisa vir antes no <head>. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html {
  color-scheme: dark;
  --header-bg: rgba(10, 10, 10, 0.97);
  --hero-bg: linear-gradient(115deg, color-mix(in srgb, var(--brand) 18%, #0a0a0a) 0%, #0a0a0a 62%);
  --hero-veu: var(--overlay);
  --hero-sombra: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.6));
}
html[data-theme="light"] {
  color-scheme: light;
  /* contraste: texto secundário quase preto, bordas visíveis, cartões brancos que se destacam do fundo */
  --ink-muted: #33383b;
  --line: #cdd0d4;
  --line-strong: #666b6f;
  --surface-200: #ffffff;
  --shadow-card: 0 1px 2px rgba(20, 24, 26, 0.10), 0 4px 16px rgba(20, 24, 26, 0.07);
  --header-bg: rgba(255, 255, 255, 0.97);
  --hero-bg: linear-gradient(115deg, color-mix(in srgb, var(--brand) 10%, #fff) 0%, #ffffff 62%);
  --hero-veu: transparent;
  /* no claro o quimono branco some no fundo: contorno fino + volume + sombra longa */
  --hero-sombra: drop-shadow(0 0 1px rgba(20, 24, 26, 0.55)) drop-shadow(0 3px 6px rgba(20, 24, 26, 0.3)) drop-shadow(0 14px 26px rgba(20, 24, 26, 0.3));
}
/* --- Foto de fundo do topo (painel → Geral → Foto de fundo do topo) ------
   A foto fica numa camada própria (.km-hero__foto) para receber degradê, filtro e
   enquadramento. O véu acompanha o tema: escuro no escuro; claro e suave no claro,
   com um toque da cor da marca. Valores vêm do template como variáveis. */
/* véu do tema claro: branco com um toque da cor da marca (mesmo para topo e cartões) */
.km-hero--foto, .km-feature--foto {
  --veu-claro-grad: linear-gradient(115deg,
    rgba(255, 255, 255, calc(var(--veu-claro, 0.86) + 0.07)) 0%,
    rgba(255, 255, 255, var(--veu-claro, 0.86)) 50%,
    color-mix(in srgb, var(--brand) var(--tom-marca, 12%), rgba(255, 255, 255, calc(var(--veu-claro, 0.86) - 0.08))) 100%);
}
/* no escuro o véu nunca fica abaixo de 72%, para o texto não brigar com a foto */
.km-hero--foto { --hero-veu: rgba(0, 0, 0, max(0.72, var(--veu-escuro, 0.8))); }
html[data-theme="light"] .km-hero--foto {
  --hero-veu: linear-gradient(90deg,
    rgba(255, 255, 255, max(0.92, calc(var(--veu-claro, 0.86) + 0.3))) 0%,
    rgba(255, 255, 255, max(0.84, calc(var(--veu-claro, 0.86) + 0.2))) 50%,
    color-mix(in srgb, var(--brand) var(--tom-marca, 12%), rgba(255, 255, 255, max(0.7, var(--veu-claro, 0.86)))) 100%);
}
/* no celular o texto fica centralizado sobre a foto toda: véu uniforme */
@media (max-width: 719px) {
  html[data-theme="light"] .km-hero--foto { --hero-veu: rgba(255, 255, 255, max(0.88, calc(var(--veu-claro, 0.86) + 0.25))); }
}
/* tema escuro: o azul/vermelho da marca clareado nos textos pequenos, para ler bem sobre o preto */
html:not([data-theme="light"]) .km-hero__kicker,
html:not([data-theme="light"]) .km-head__eyebrow { color: color-mix(in srgb, var(--brand) 60%, #fff); }
/* texto sobre foto: halo discreto que separa as letras do fundo */
.km-hero--foto .km-hero__lead { color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); }
.km-hero--foto .km-hero__title { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
html[data-theme="light"] .km-hero--foto .km-hero__lead,
html[data-theme="light"] .km-hero--foto .km-hero__title { text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 14px rgba(255, 255, 255, 0.9); }

/* cartões do método com imagem de fundo (painel → Geral → Fotos dos cartões do método) */
.km-feature--foto { position: relative; isolation: isolate; overflow: hidden; }
.km-feature__foto {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-repeat: no-repeat;
  background-position: var(--foto-posicao, center);
  filter: var(--foto-filtro, none);
}
.km-feature__veu { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, var(--veu-escuro, 0.82)); }
html[data-theme="light"] .km-feature__veu { background: var(--veu-claro-grad); }
.km-hero__foto {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-repeat: no-repeat;
  background-position: var(--foto-posicao, center);
  filter: var(--foto-filtro, none);
}
/* no celular, a versão menor da foto (npm run otimizar-fotos) */
@media (max-width: 719px) { .km-hero__foto--cel { background-image: var(--foto-celular) !important; } }
/* degradê nas bordas: a foto some aos poucos no fundo (da página ou do cartão) */
.km-hero--degrade .km-hero__foto, .km-feature--degrade .km-feature__foto {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--degrade, 25%), #000 calc(100% - var(--degrade, 25%)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--degrade, 25%), #000 calc(100% - var(--degrade, 25%)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--degrade, 25%), #000 calc(100% - var(--degrade, 25%)), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 var(--degrade, 25%), #000 calc(100% - var(--degrade, 25%)), transparent 100%);
  mask-composite: intersect;
}
body {
  margin: 0;
  transition: background-color .2s ease, color .2s ease;
  background: var(--surface-000);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* links dentro dos textos corridos */
.km-link { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.km-link:hover { color: var(--brand-hover); }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.km-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: max(var(--space-6), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
.km-skip { position: absolute; left: -9999px; }
.km-skip:focus { left: var(--space-6); top: var(--space-4); z-index: 10; background: var(--brand); color: var(--on-brand); padding: var(--space-3) var(--space-6); }

/* --- Header ---------------------------------------------------------- */
.km-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.km-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding-top: var(--space-3); padding-bottom: var(--space-3); }
/* notch e barra de status: o header desce o quanto o aparelho pedir, e no celular ganha folga extra */
.km-header { padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 719px) { .km-header__inner { padding-top: var(--space-4); } }
.km-header__logo img { height: 44px; width: auto; }
.km-header__logo { flex: none; }
.km-header__actions { display: flex; align-items: center; gap: var(--space-3); }
/* celulares bem estreitos (≤360px): o botão do cabeçalho fica só com o ícone */
@media (max-width: 360px) {
  .km-header__actions .km-btn--whatsapp { padding: var(--space-3); }
  .km-header__zap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* botão de tema: mostra o sol no escuro (vai para o claro) e a lua no claro */
.km-theme {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: none;
  background: transparent; color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--radius-pill);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.km-theme:hover { border-color: var(--ink); }
.km-theme svg { width: 20px; height: 20px; }
.km-theme__lua, html[data-theme="light"] .km-theme__sol { display: none; }
html[data-theme="light"] .km-theme__lua { display: block; }
/* celular: sai do header e flutua no canto inferior esquerdo, na altura do "Fale agora" */
.km-theme--float {
  position: fixed; z-index: 6;
  left: max(var(--space-6), env(safe-area-inset-left, 0px));
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px;
  background: var(--surface-200); border-color: var(--line-strong); box-shadow: var(--shadow-raised);
}
@media (max-width: 719px) { .km-theme--header { display: none; } }
@media (min-width: 720px) { .km-theme--float { display: none; } }
/* nome da cidade no cabeçalho: 30px no computador; encolhe um pouco em telas médias para caber */
.km-header__unit {
  display: none; color: var(--ink-muted); text-transform: uppercase;
  font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: 0.04em;
  font-size: clamp(20px, 2.6vw, 30px); white-space: nowrap;
}
@media (min-width: 720px) { .km-header__unit { display: block; } }

/* --- Button ---------------------------------------------------------- */
.km-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.km-btn--primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-cta); }
.km-btn--primary:hover { background: var(--brand-hover); }
/* paleta com degradê nos botões principais */
.km-degrade .km-btn--primary { background: linear-gradient(180deg, var(--brand-light) 0%, var(--brand) 100%); }
.km-degrade .km-btn--primary:hover { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-hover) 100%); }
/* botões sobem um pouco ao passar o mouse */
.km-flutuar .km-btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s ease, box-shadow .2s ease; }
.km-flutuar .km-btn--primary:hover, .km-flutuar .km-btn--whatsapp:hover { transform: translateY(-3px); }
.km-flutuar .km-zap:hover { transform: translateY(-3px); }
.km-btn--whatsapp { background: var(--accent); color: var(--on-accent); }
.km-btn--whatsapp:hover { background: var(--accent-hover); }
/* formato dos botões de WhatsApp (painel → WhatsApp) */
.km-btn--arredondado { border-radius: 12px; }
.km-btn--pilula { border-radius: var(--radius-pill); }
.km-btn--whatsapp.km-btn--contorno { background: transparent; color: var(--accent); border-color: var(--accent); }
.km-btn--whatsapp.km-btn--contorno:hover { background: var(--accent); color: var(--on-accent); }
.km-btn--whatsapp.km-btn--suave { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.km-btn--whatsapp.km-btn--suave:hover { background: var(--accent); color: var(--on-accent); }
.km-btn--normal { text-transform: none; letter-spacing: 0.01em; font-size: 15px; }
.km-btn--grande { padding: var(--space-4) var(--space-8); font-size: 15px; }
.km-btn--grande.km-btn--normal { font-size: 17px; }
.km-btn--grande svg { width: 22px; height: 22px; }
.km-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.km-btn--ghost:hover { border-color: var(--ink); }

/* --- Botão fixo do WhatsApp (conteudo/comum.js → botaoFixo) ------------ */
.km-zap {
  position: fixed; z-index: 6;
  right: max(var(--space-6), env(safe-area-inset-right, 0px));
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-pill); box-shadow: var(--shadow-raised);
  transition: background-color .15s ease, transform .2s ease;
  /* entra depois do atraso configurado (fica escondido e sem clique até lá) */
  animation: km-zap-entra .5s cubic-bezier(.2, .7, .2, 1) var(--zap-atraso, 0s) backwards;
}
.km-zap:hover { background: var(--accent-hover); }
.km-zap--esquerda { right: auto; left: max(var(--space-6), env(safe-area-inset-left, 0px)); }
.km-zap svg { width: 20px; height: 20px; flex: none; }
/* pílula: ícone + texto */
.km-zap--pilula { padding: var(--space-4) var(--space-6); }
/* círculo: só o ícone (o texto fica para leitores de tela) */
.km-zap--circulo, .km-zap--etiqueta { width: 62px; height: 62px; padding: 0; }
.km-zap--circulo svg, .km-zap--etiqueta svg { width: 34px; height: 34px; }
.km-zap--circulo .km-zap__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* etiqueta: círculo com balão de texto ao lado */
.km-zap--etiqueta .km-zap__texto {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  background: var(--surface-200); color: var(--ink); border: 1px solid var(--line);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); white-space: nowrap;
  font-size: 12px; box-shadow: var(--shadow-card);
}
.km-zap--etiqueta.km-zap--esquerda .km-zap__texto { right: auto; left: calc(100% + 12px); }
/* pulso em volta */
.km-zap--pulsar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); z-index: -1;
  animation: km-zap-pulso 2s ease-out infinite;
}
@keyframes km-zap-entra { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes km-zap-pulso { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@media (prefers-reduced-motion: reduce) { .km-zap { animation: none; } .km-zap--pulsar::before { animation: none; opacity: 0; } }
/* WhatsApp à esquerda: no celular, o botão de tema troca de lado */
.km-zap--esquerda ~ .km-theme--float { left: auto; right: max(var(--space-6), env(safe-area-inset-right, 0px)); }
.km-btn svg { width: 18px; height: 18px; flex: none; }

/* --- Seções ---------------------------------------------------------- */
.km-section { padding: var(--space-12) 0; background: var(--surface-000); }
.km-section--alt { background: var(--surface-100); }
@media (min-width: 900px) { .km-section { padding: var(--space-24) 0; } }

.km-head { margin-bottom: var(--space-12); text-align: center; }
.km-head__eyebrow { display: block; margin-bottom: var(--space-4); color: var(--brand); text-transform: uppercase; }
.km-head__title { color: var(--ink); text-transform: uppercase; max-width: 24ch; margin-inline: auto; }
.km-head__rule { display: block; width: 64px; height: 4px; margin: var(--space-6) auto 0; background: var(--brand); }
.km-head--center { text-align: center; }
.km-head--center .km-head__title { margin-inline: auto; }
.km-head--center .km-head__rule { margin-inline: auto; }

/* --- Hero ------------------------------------------------------------ */
.km-hero {
  position: relative; isolation: isolate;
  background: var(--surface-000) center/cover no-repeat;
  /* Troque por: background-image: url('img/hero.jpg'); quando houver foto de treino. */
  background-image: var(--hero-bg);
}
.km-hero::before { content: ""; position: absolute; inset: 0; background: var(--hero-veu); z-index: -1; }
.km-hero__inner { max-width: 1120px; margin: 0 auto; padding: var(--space-24) var(--space-6); }
.km-hero__title { margin-bottom: var(--space-6); color: var(--ink); text-transform: uppercase; max-width: 14ch; }
.km-hero__lead { margin: 0 0 var(--space-8); color: var(--ink-muted); max-width: 60ch; }
/* H1 ("Krav Maga em {cidade}"): sobretítulo grande acima do slogan */
.km-hero__kicker {
  margin: 0 0 var(--space-4); color: var(--brand);
  font-family: var(--font-display); font-size: 22px; line-height: 1.15; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
@media (min-width: 720px) { .km-hero__kicker { font-size: 26px; } }
.km-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (min-width: 900px) { .km-hero__inner { padding-top: var(--space-32); padding-bottom: var(--space-32); } }

/* com imagem recortada: ela divide a linha só com o título; texto e botões vêm abaixo.
   No celular: título, imagem, texto, botões. */
.km-hero--img .km-hero__copy { display: contents; }
.km-hero--img .km-hero__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kicker" "title" "img" "lead" "actions";
  padding-top: var(--space-12); padding-bottom: var(--space-12);
}
.km-hero--img .km-hero__kicker { grid-area: kicker; }
.km-hero--img .km-hero__title { grid-area: title; }
.km-hero--img .km-hero__lead { grid-area: lead; }
.km-hero--img .km-hero__actions { grid-area: actions; }
@media (max-width: 719px) {
  .km-hero__copy, .km-hero__inner { text-align: center; }
  .km-hero__title, .km-hero__lead { margin-inline: auto; }
  .km-hero__actions { justify-content: center; }
}
.km-hero__img {
  grid-area: img; justify-self: center; align-self: center;
  width: auto; max-width: 100%; max-height: 220px; margin-bottom: var(--space-6);
  filter: var(--hero-sombra);
}
@media (min-width: 720px) {
  .km-hero--img .km-hero__inner {
    grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-8);
    grid-template-areas: "kicker img" "title img" "lead lead" "actions actions";
  }
  .km-hero--img .km-hero__title {
    font-size: clamp(52px, 5vw, 78px);
    line-height: 0.9;
    max-width: 12ch;
    letter-spacing: -0.04em;
  }
  .km-hero__img { max-height: 230px; }
}
@media (min-width: 900px) {
  .km-hero--img .km-hero__inner { column-gap: var(--space-12); padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .km-hero--img .km-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .km-hero__img { max-height: 340px; }
}

/* --- Foto da turma --------------------------------------------------- */
.km-photo { margin: var(--space-12) 0 0; }
.km-photo img { width: 100%; aspect-ratio: 1080 / 765; object-fit: cover; box-shadow: var(--shadow-raised); }
.km-photo__item { margin: 0; }
.km-photo__caption { margin-top: var(--space-3); color: var(--ink-muted); text-align: center; }

/* --- Carrossel (depoimentos e fotos da turma) ------------------------ */
.km-carousel__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: var(--space-6);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none;
}
.km-carousel__track::-webkit-scrollbar { display: none; }
.km-carousel__slide { scroll-snap-align: start; min-width: 0; }
@media (min-width: 720px) { .km-carousel--duo .km-carousel__track { grid-auto-columns: calc((100% - var(--space-8)) / 2); gap: var(--space-8); } }
@media (prefers-reduced-motion: reduce) { .km-carousel__track { scroll-behavior: auto; } }

.km-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin-top: var(--space-6); }
.km-carousel.is-static .km-carousel__controls { display: none; }
.km-carousel__btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  background: transparent; color: var(--ink); border: 2px solid var(--line-strong); border-radius: var(--radius-pill);
  cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.km-carousel__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); }
.km-carousel__btn:disabled { opacity: .35; cursor: default; }
.km-carousel__btn svg { width: 20px; height: 20px; }
.km-carousel__dots { display: flex; gap: var(--space-2); }
.km-carousel__dots span { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--line-strong); transition: width .2s ease, background-color .2s ease; }
.km-carousel__dots span.is-on { width: 24px; background: var(--brand); }

/* --- Movimentos de entrada (ligados em conteudo/comum.js → movimentos) --- */
/* só esconde antes de animar se o JS estiver ativo (classe js-anim no <html>) */
/* nada desliza para o lado no celular, só os carrosséis (o clip no body não segura o toque; no main, sim) */
body, main { overflow-x: clip; }
.js-anim [data-anim]:not(.is-in) { opacity: 0; }
.js-anim [data-anim].is-in {
  animation-duration: var(--anim-dur, .8s);
  animation-timing-function: cubic-bezier(.2, .7, .2, 1);
  animation-fill-mode: both;
  animation-delay: calc(var(--anim-i, 0) * 120ms);
}
.js-anim [data-anim="fadeIn"].is-in { animation-name: km-fadeIn; }
.js-anim [data-anim="fadeInUp"].is-in { animation-name: km-fadeInUp; }
.js-anim [data-anim="fadeInDown"].is-in { animation-name: km-fadeInDown; }
.js-anim [data-anim="fadeInLeft"].is-in { animation-name: km-fadeInLeft; }
.js-anim [data-anim="fadeInRight"].is-in { animation-name: km-fadeInRight; }
.js-anim [data-anim="zoomIn"].is-in { animation-name: km-zoomIn; }
.js-anim [data-anim="slideInLeft"].is-in { animation-name: km-slideInLeft; }
.js-anim [data-anim="slideInRight"].is-in { animation-name: km-slideInRight; }
@keyframes km-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes km-fadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes km-fadeInLeft { from { opacity: 0; transform: translate3d(-60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes km-fadeInRight { from { opacity: 0; transform: translate3d(60px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes km-zoomIn { from { opacity: 0; transform: scale3d(.6, .6, .6); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes km-slideInLeft { from { opacity: 1; transform: translate3d(-100vw, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes km-slideInRight { from { opacity: 1; transform: translate3d(100vw, 0, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js-anim [data-anim] { opacity: 1 !important; animation: none !important; }
  .km-flutuar .km-btn:hover { transform: none; }
}

/* --- Grade e cards --------------------------------------------------- */
.km-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .km-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8); } }
@media (min-width: 1040px) { .km-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.km-feature { background: var(--surface-200); border-top: 4px solid var(--brand); padding: var(--space-8) var(--space-6); box-shadow: var(--shadow-card); text-align: center; }
.km-feature__icon { display: block; width: 36px; height: 36px; margin: 0 auto var(--space-4); color: var(--steel); }
.km-feature__title { margin-bottom: var(--space-4); color: var(--ink); }
.km-feature__text { margin: 0; color: var(--ink-muted); }

.km-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
@media (min-width: 720px) { .km-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); } }
.km-benefits li { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; color: var(--ink); font-size: 18px; line-height: 1.5; background: var(--surface-200); border: 1px solid var(--line); padding: var(--space-8) var(--space-6); }
.km-benefits__mark { flex: none; width: 14px; height: 14px; background: var(--brand); }
.km-benefits__mark--circulo { width: 16px; height: 16px; border-radius: 50%; }
.km-benefits__icone { flex: none; width: 32px; height: 32px; color: var(--brand); }
/* símbolo da federação (favicon preto sobre transparente) pintado na cor da paleta */
.km-benefits__selo {
  flex: none; width: 36px; height: 38px; background: var(--brand);
  -webkit-mask: url('../img/favicon.png') center / contain no-repeat;
  mask: url('../img/favicon.png') center / contain no-repeat;
}

.km-quote { background: var(--surface-200); border-radius: var(--radius-md); border-left: 4px solid var(--steel); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); height: 100%; margin: 0; }
.km-quote__text { margin: 0; color: var(--ink); }
.km-quote__author { color: var(--ink-muted); font-style: normal; }
.km-quote__author b { display: block; color: var(--ink); font-weight: 700; }
.km-quote__flag { display: inline-block; margin-top: var(--space-2); padding: 2px var(--space-2); background: var(--brand); color: var(--on-brand); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

.km-unit { background: var(--surface-200); border: 1px solid var(--line); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.km-unit__name { color: var(--ink); text-transform: uppercase; }
.km-unit__rows { margin: 0; display: grid; gap: var(--space-4); }
.km-unit__rows dt { color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 700; }
.km-unit__rows dd { margin: var(--space-2) 0 0; color: var(--ink); }
.km-unit__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* card da unidade + mapa: empilhados no celular, lado a lado do desktop */
.km-location { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
/* o iframe ocupa a caixa por posição absoluta: a altura não depende de % (que o Safari zera) */
/* altura fixa por faixa (sem aspect-ratio + min-height, que alargava o mapa além da tela no celular) */
.km-map { position: relative; width: 100%; min-width: 0; border: 1px solid var(--line); background: var(--surface-200); height: clamp(280px, 75vw, 420px); }
@media (min-width: 900px) {
  .km-location { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .km-map { height: auto; min-height: 400px; }
}
.km-map iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; color-scheme: normal; }

/* --- Perguntas frequentes ------------------------------------------- */
.km-faq { max-width: 820px; margin: 0 auto; display: grid; gap: var(--space-3); }
.km-faq__item { background: var(--surface-200); border: 1px solid var(--line); border-radius: var(--radius-md); }
.km-faq__pergunta {
  list-style: none; cursor: pointer; padding: var(--space-4) var(--space-6);
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink);
}
.km-faq__pergunta::-webkit-details-marker { display: none; }
.km-faq__pergunta::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
.km-faq__item[open] .km-faq__pergunta::after { transform: rotate(-135deg); margin-top: 4px; }
.km-faq__resposta { margin: 0; padding: 0 var(--space-6) var(--space-6); color: var(--ink-muted); }
html[data-theme="light"] .km-faq__item { box-shadow: var(--shadow-card); }

/* --- Seções novas (criadas no painel) -------------------------------- */
.km-extra { display: grid; gap: var(--space-8); align-items: center; max-width: 1000px; margin: 0 auto; }
.km-extra:not(.km-extra--img) { max-width: 760px; text-align: center; }
.km-extra__img { width: 100%; height: auto; box-shadow: var(--shadow-raised); }
.km-extra__texto p { margin: 0; color: var(--ink-muted); }
.km-extra__texto p + p { margin-top: var(--space-4); }
.km-extra__acoes { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-4); }
.km-extra:not(.km-extra--img) .km-extra__acoes { justify-content: center; }
@media (min-width: 900px) {
  .km-extra--img { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  .km-extra--dir .km-extra__img { order: 2; }
}

/* --- Federação ------------------------------------------------------- */
.km-federation { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 900px) { .km-federation { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-16); } }
.km-federation__seal img { width: 280px; margin-inline: auto; }
.km-federation__text { margin: 0; color: var(--ink-muted); max-width: 66ch; }
.km-federation__text + .km-federation__text { margin-top: var(--space-4); }

/* --- Professor ------------------------------------------------------- */
.km-teacher { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); justify-items: center; }
.km-teacher > div { justify-self: stretch; }
@media (min-width: 900px) { .km-teacher { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-16); align-items: center; } }
.km-teacher__photo { background: var(--surface-200); border: 1px dashed var(--line-strong); min-height: 320px; display: grid; place-items: center; color: var(--ink-muted); text-align: center; padding: var(--space-6); }
/* retrato vertical: corta pelo alto para não perder o rosto */
.km-teacher__img { width: 100%; max-width: 420px; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; }
.km-teacher__text { margin: 0; color: var(--ink-muted); }
.km-teacher__text + .km-teacher__text { margin-top: var(--space-4); }
.km-teacher__list { margin: var(--space-2) 0 0; padding-left: var(--space-6); color: var(--ink-muted); }
.km-teacher__list li::marker { color: var(--brand); }

/* --- Tema claro: ajustes do que foi desenhado para fundo escuro -------- */
html[data-theme="light"] .km-feature__icon { color: var(--ink-muted); }
html[data-theme="light"] .km-feature { border: 1px solid var(--line); border-top: 4px solid var(--brand); }
html[data-theme="light"] .km-quote { border-left-color: var(--line-strong); box-shadow: var(--shadow-card); }
html[data-theme="light"] .km-unit,
html[data-theme="light"] .km-benefits li { box-shadow: var(--shadow-card); }
/* logos são arte branca: no claro o branco vira quase preto e o vermelho se mantém (filtro no <body>) */
html[data-theme="light"] .km-header__logo img,
html[data-theme="light"] .km-federation__seal img,
html[data-theme="light"] .km-footer__seal img { filter: url(#km-logo-escuro); }

/* --- Rodapé ---------------------------------------------------------- */
.km-footer { background: var(--surface-100); border-top: 1px solid var(--line); padding: var(--space-12) 0; }
/* no celular o rodapé ganha só a folga para o botão flutuante não cobrir o texto final */
@media (max-width: 719px) { .km-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.km-footer__inner { display: grid; gap: var(--space-8); }
@media (min-width: 720px) { .km-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: center; gap: var(--space-16); } }
.km-footer__seal img { width: 160px; margin-inline: auto; }
@media (max-width: 719px) {
  .km-footer__inner { text-align: center; }
}
.km-footer__text { color: var(--ink-muted); }
.km-footer__text a { color: var(--ink); }
.km-footer__legal { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--ink-muted); }

/* --- Textos e fontes (painel → Textos e fontes) ----------------------
   Fontes e escalas vêm do template (:root no <style id="km-cores">).
   Fontes com um só peso (Bebas, Anton) não ganham um "negrito falso". */
html { font-synthesis: style; }
.display-xl { font-size: calc(56px * var(--esc-slogan, 1)); }
.display-lg { font-size: calc(40px * var(--esc-titulos, 1)); }
.display-md { font-size: calc(26px * var(--esc-titulos, 1)); }
.lead { font-size: calc(20px * var(--esc-texto, 1)); }
.body { font-size: calc(16px * var(--esc-texto, 1)); }
.body-sm { font-size: calc(14px * var(--esc-texto, 1)); }
.quote { font-size: calc(17px * var(--esc-texto, 1)); }
.km-benefits li { font-size: calc(18px * var(--esc-texto, 1)); }
@media (max-width: 719px) {
  .display-xl { font-size: calc(40px * var(--esc-slogan, 1)); }
  .display-lg { font-size: calc(30px * var(--esc-titulos, 1)); }
  .lead { font-size: calc(18px * var(--esc-texto, 1)); }
}
/* título para o Google (H1 "Krav Maga em {cidade}"): no celular, 75% do tamanho escolhido */
.km-hero__kicker { font-size: max(18px, calc(var(--tam-h1, 26px) * 0.75)); overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .km-hero__kicker { font-size: var(--tam-h1, 26px); }
  .km-hero--img .km-hero__title { font-size: calc(clamp(52px, 5vw, 78px) * var(--esc-slogan, 1)); }
}

/* formatação dentro dos textos: **negrito** *itálico* __sublinhado__ ==destaque== */
.km-marca { background: none; color: var(--brand); font-weight: 700; }
html:not([data-theme="light"]) .km-marca { color: color-mix(in srgb, var(--brand) 60%, #fff); }