/* Vitrine publica de conteudo didatico — padrao SavioliTI.
 *
 * Escopo: SOMENTE paginas publicas de material sobre as disciplinas. O portal
 * de Operacoes continua em BMW M (css/main.css, tokens --m-*).
 *
 * Tokens prefixados com --sv-* de proposito: nao se misturam com --m-*, e o
 * teste tests/test_bmw_m_design.py continua verificando so o escopo BMW M.
 * Tokens extraidos do CSS real de savioliti.com.br em 2026-09-29.
 */
:root {
  --sv-primary: #111111;
  --sv-secondary: #DD183B;
  --sv-accent: #FF4D6A;
  --sv-light: #1A1A1A;
  --sv-text: #E0E0E0;
  --sv-text-muted: #888888;
  --sv-white: #FFFFFF;
  --sv-border: #2A2A2A;
  --sv-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --sv-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --sv-font-display: 'Clash Display', sans-serif;
  --sv-font-body: 'Satoshi', sans-serif;
  --sv-content-max: 860px;
  --sv-radius: 12px;
  --sv-radius-lg: 16px;
}

/* Isola o escopo: nada daqui vaza para o portal de Operacoes. */
.sv-scope {
  background-color: var(--sv-primary);
  color: var(--sv-text);
  font-family: var(--sv-font-body);
  min-height: 100vh;
  background-image: radial-gradient(circle, rgba(221, 24, 59, 0.08) 0%, transparent 70%);
  background-repeat: no-repeat;
  background-position: top center;
}

.sv-scope *,
.sv-scope *::before,
.sv-scope *::after {
  box-sizing: border-box;
}

.sv-wrap {
  max-width: var(--sv-content-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- tipografia --- */
.sv-scope h1,
.sv-scope h2,
.sv-scope h3 {
  font-family: var(--sv-font-display);
  color: var(--sv-white);
  line-height: 1.2;
  margin: 0 0 16px;
}

.sv-scope h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 600; }
.sv-scope h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 500; }
.sv-scope h3 { font-size: 1.15rem; font-weight: 500; }

/* O acento da marca aparecia so no logotipo. Nas secoes do material ele marca
 * a hierarquia sem competir com o texto. */
.sv-content h3 {
  color: var(--sv-white);
  padding-left: 14px;
  border-left: 3px solid var(--sv-accent);
}

.sv-scope p { line-height: 1.7; margin: 0 0 16px; }
.sv-scope a {
  color: var(--sv-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}

/* Especificidade: `.sv-scope a` (0,1,1) vence `.sv-button` (0,1,0) e fazia o
 * texto dos botoes ficar rosa em vez de branco. Os componentes que definem a
 * propria cor sobem para (0,2,0) e voltam a ganhar. */
.sv-scope a.sv-button,
.sv-scope a.sv-textlink { color: inherit; }

/* O botao solido e branco sobre o gradiente vermelho (como no savioliti.com.br,
 * onde `.btn-cta` usa `color: var(--white)`). O ghost nao tem fundo, entao
 * herda a cor do componente. */
.sv-scope a.sv-button:not(.sv-button--ghost) { color: var(--sv-white); }
.sv-scope a.sv-button--ghost { color: var(--sv-text); }
.sv-scope a.sv-button--ghost:hover { color: var(--sv-white); }
/* Regra geral de link: sublinha no hover. O card e a excecao — o card ja
   tem borda, sombra e deslocamento como sinal de que e clicavel, e o
   sublinhado por cima da imagem e do titulo parece link quebrado. A
   especificidade precisa bater com `.sv-scope a:hover`, que e (0,2,1). */
.sv-scope a:hover { text-decoration: underline; }
.sv-scope a.sv-card,
.sv-scope a.sv-card:hover { text-decoration: none; }

/* --- cabecalho --- */
.sv-header {
  padding: 28px 0;
  border-bottom: 1px solid var(--sv-border);
  margin-bottom: 40px;
}

.sv-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sv-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--sv-white);
  letter-spacing: 0.02em;
}

.sv-brand span { color: var(--sv-accent); }

/* Logo do savioliti.com.br (simbolo "S" vermelho, PNG transparente). 405x314
 * na origem: usa-se a altura, para nao esticar. */
.sv-logo {
  display: block;
  height: 34px;
  width: auto;
}

/* --- meta da pagina --- */
.sv-meta {
  font-size: 0.85rem;
  color: var(--sv-text-muted);
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sv-border);
}

.sv-meta strong { color: var(--sv-text); font-weight: 500; }

/* --- corpo do material --- */
.sv-content h2 { margin-top: 40px; }
.sv-content h3 { margin-top: 28px; }

/* Espacamento medido na pagina renderizada: com o `margin-bottom: 16px` do p
 * somando ao `line-height: 1.7`, os paragrafos ficavam com ~45px entre linhas,
 * bem acima do confortavel para leitura (1.5–1.7 no total). Aqui o p tem
 * respiro proprio e o container controla a altura de linha. */
.sv-content p {
  margin: 0 0 18px;
  line-height: 1.6;
}

.sv-content p:last-child { margin-bottom: 0; }

.sv-content ul,
.sv-content ol { line-height: 1.6; margin: 0 0 20px; padding-left: 22px; }
.sv-content li { margin-bottom: 8px; }

.sv-content blockquote {
  margin: 0 0 20px;
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--sv-accent);
  color: var(--sv-text-muted);
}
.sv-content blockquote p { margin: 0; }

.sv-content code {
  background: var(--sv-light);
  border: 1px solid var(--sv-border);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.9em;
}

/* --- imagem do material --- */
.sv-figure {
  margin: 32px 0;
  border-radius: var(--sv-radius-lg);
  overflow: hidden;
  border: 1px solid var(--sv-border);
  background: var(--sv-light);
}

.sv-figure img { display: block; width: 100%; height: auto; }

.sv-figure figcaption {
  font-size: 0.85rem;
  color: var(--sv-text-muted);
  padding: 12px 16px;
  border-top: 1px solid var(--sv-border);
}

/* --- cards do indice publico --- */
.sv-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 28px;
}

.sv-filtro {
  font-family: var(--sv-font-body);
  font-size: 0.9rem;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--sv-border);
  background: var(--sv-light);
  color: var(--sv-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sv-filtro:hover { border-color: var(--sv-accent); color: var(--sv-text); }

.sv-filtro[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
  border-color: transparent;
  color: var(--sv-white);
}

.sv-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 0;
}

.sv-card {
  display: block;
  /* O badge da disciplina e posicionado em absoluto no canto superior
     direito. Sem `relative` aqui, o canto e do ancestral mais proximo que
     seja posicionado — normalmente o <body> — e o badge sai do card. */
  position: relative;
  padding: 20px;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-light);
  color: var(--sv-text);
  text-decoration: none;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Badge da disciplina, no canto superior direito sobre a capa.
   Fica com fundo escuro translucido e borda da cor de destaque: precisa
   ler sobre qualquer imagem gerada, clara ou escura. O `pointer-events:
   none` e para o badge nao capturar o clique — o card inteiro e o link. */
.sv-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: inline-block;
  padding: 5px 11px;
  border: 1px solid var(--sv-accent);
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.82);
  color: var(--sv-white);
  font-family: var(--sv-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
}

/* Card com imagem: a figura ocupa toda a largura do card e acompanha o
   arredondamento dele. Duas coisas precisam estar certas.

   1. O `overflow:hidden` fica no CARD, e nao na figura: e o card que tem o
      raio, e cortar no filho deixa a imagem quadrada por cima dele.

   2. A figura nao tem margem lateral, mas o TITULO recebe o padding. A
      imagem e o titulo sao blocos de larguras diferentes, e o titulo curto
      encostando na borda parece texto solto — o espaco e o que separa a
      imagem (que encosta) do texto (que respira). Decisao do titular em
      2026-09-29. */
.sv-card:has(.sv-card-figure) {
  padding: 0 0 20px;
  overflow: hidden;
}

.sv-card:has(.sv-card-figure) .sv-card-figure {
  margin: 0 0 16px;
  background: #111111;
  border-bottom: 1px solid var(--sv-border);
}

.sv-card:has(.sv-card-figure) .sv-card-title {
  padding: 0 20px;
}

.sv-card-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* A imagem gerada e quadrada e o card e estreito. Sem o corte, a figura
     fica alta e o titulo some abaixo da dobra. O object-fit mantem os dois
     logos no centro em vez de cortados pela lateral. */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 42%;
}

.sv-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--sv-accent);
  box-shadow: var(--sv-shadow);
}

.sv-card-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sv-accent);
  margin-bottom: 10px;
}

.sv-card-title {
  font-family: var(--sv-font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--sv-white);
  line-height: 1.3;
  margin: 0 0 8px;
}

.sv-card-body {
  font-size: 0.9rem;
  line-height: 1.55;
  /* --sv-text-muted sobre o fundo do card (#1A1A1A) fica perto do limite de
   * contraste; o tom um passo mais claro abaixo garante leitura confortavel. */
  color: #A3A3A3;
  margin: 0 0 12px;
}

.sv-card-meta {
  font-size: 0.8rem;
  color: #A3A3A3;
}

.sv-card-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--sv-accent);
}

.sv-vazio {
  color: var(--sv-text-muted);
  font-style: italic;
  margin: 0;
}

/* --- CTA para o curso correspondente --- */
.sv-cta {
  display: block;
  margin: 40px 0 0;
  padding: 22px 24px;
  border-radius: var(--sv-radius-lg);
  background: linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
  color: var(--sv-white);
  text-decoration: none;
  box-shadow: var(--sv-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sv-cta:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--sv-shadow-lg);
}

.sv-cta-label {
  display: block;
  font-family: var(--sv-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.sv-cta-hint {
  display: block;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* --- cabecalho com navegacao (landing) --- */
.sv-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.sv-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.92rem;
}

.sv-nav a {
  color: var(--sv-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.sv-nav a:hover { color: var(--sv-text); text-decoration: none; }

.sv-nav a[aria-current="page"] {
  color: var(--sv-white);
  border-bottom: 2px solid var(--sv-accent);
  padding-bottom: 2px;
}

/* --- hero (landing) --- */
.sv-hero--home {
  padding: 56px 0 24px;
}
.sv-hero--home .sv-hero__title {
  font-size: clamp(30px, 5vw, 46px);
  max-width: 18ch;
}
.sv-hero--home .sv-hero__lead {
  max-width: 62ch;
}

/* ---- busca ---- */
.sv-section--busca {
  padding: 8px 0 40px;
}
.sv-busca {
  margin: 0;
  max-width: 640px;
}
.sv-busca__label {
  display: block;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sv-muted);
  margin-bottom: 10px;
}
.sv-busca__barra {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #17171b;
  border: 1px solid #2a2a30;
  border-radius: 10px;
  padding: 0 14px;
  transition: border-color .15s, background .15s;
}
.sv-busca__barra:focus-within {
  border-color: var(--sv-accent);
  background: #1b1b20;
}
.sv-busca__lupa {
  flex: none;
  color: #7a7a85;
}
.sv-busca__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--sv-fg);
  font: 400 16px/1.4 "Satoshi", system-ui, sans-serif;
  padding: 15px 0;
}
.sv-busca__input::placeholder {
  color: #6b6b76;
}
.sv-busca__btn {
  flex: none;
  background: none;
  border: 0;
  color: var(--sv-accent);
  font: 500 13px/1 "Satoshi", system-ui, sans-serif;
  cursor: pointer;
  padding: 6px 2px;
}
.sv-busca__btn:hover { opacity: .8; }
.sv-busca__dica {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--sv-muted);
}
.sv-busca__dica strong {
  color: var(--sv-fg);
  font-weight: 500;
}

/* ---- cards de material ---- */
.sv-curso-figure {
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 8px;
  background: #0d0d0f;
  aspect-ratio: 1 / 1;
}
.sv-curso-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sv-curso {
  position: relative;
  background: #17171b;
  border: 1px solid #26262c;
  border-radius: 12px;
  padding: 26px 24px 24px;
  display: block;
}
.sv-curso__title {
  font: 500 22px/1.2 "Clash Display", "Satoshi", sans-serif;
  color: #fff;
  margin: 0 0 6px;
}
.sv-curso__meta {
  font-size: 13px;
  color: var(--sv-accent);
  margin: 0 0 12px;
  letter-spacing: .02em;
}
.sv-curso__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #b9b9c2;
  margin: 0 0 18px;
}
.sv-curso .sv-textlink {
  font-size: 14px;
  font-weight: 500;
}

/* utilitario: so para leitor de tela */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sv-hero {
  padding: 72px 0 56px;
}

.sv-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sv-accent);
  margin: 0 0 14px;
}

.sv-hero__title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  margin: 0 0 18px;
}

.sv-hero__lead {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--sv-text);
  max-width: 56ch;
  margin: 0 0 28px;
}

.sv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- botoes --- */
.sv-button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--sv-radius);
  background: linear-gradient(135deg, var(--sv-accent), var(--sv-secondary));
  color: var(--sv-white);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.sv-button:hover {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--sv-shadow);
}

.sv-button--ghost {
  background: transparent;
  border: 1px solid var(--sv-border);
  color: var(--sv-text);
}

.sv-button--ghost:hover { border-color: var(--sv-accent); color: var(--sv-white); }

/* --- secoes e grade de disciplinas --- */
.sv-section { padding: 56px 0; }

.sv-section--alt {
  background: var(--sv-light);
  border-top: 1px solid var(--sv-border);
  border-bottom: 1px solid var(--sv-border);
}

.sv-section__title { margin: 0 0 14px; }

.sv-section__lead {
  color: var(--sv-text-muted);
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 24px;
}

.sv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 26px;
}

.sv-disc {
  padding: 22px;
  border: 1px solid var(--sv-border);
  border-radius: var(--sv-radius-lg);
  background: var(--sv-primary);
}

.sv-disc h3 {
  font-family: var(--sv-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--sv-white);
  margin: 0 0 10px;
  padding-left: 0;
  border-left: 0;
}

.sv-disc p {
  color: var(--sv-text-muted);
  line-height: 1.6;
  font-size: 0.94rem;
  margin: 0 0 14px;
}

.sv-textlink {
  font-size: 0.88rem;
  color: var(--sv-accent);
  text-decoration: none;
}

.sv-textlink:hover { text-decoration: none; color: var(--sv-white); }

/* --- rodape --- */
.sv-footer {
  margin-top: 64px;
  padding: 28px 0;
  border-top: 1px solid var(--sv-border);
  font-size: 0.85rem;
  color: var(--sv-text-muted);
}

.sv-footer a { color: var(--sv-text-muted); text-decoration: none; }
.sv-footer a:hover { color: var(--sv-accent); text-decoration: none; }

/* --- responsivo --- */
@media (max-width: 640px) {
  .sv-wrap { padding: 0 18px; }
  .sv-header { padding: 20px 0; margin-bottom: 28px; }
  .sv-cta { padding: 18px 20px; }
}