/* ============================================================
   vitrine.css — visual novo do site do aluno (2026-10)
   Faixa vermelha, cabeçalho, rodapé (todas as páginas do site) e as seções da
   home e do catálogo. Tudo com prefixo "v-" para não colidir com style.css e
   site-extra.css, que continuam valendo para as outras telas.
   ============================================================ */

:root {
  --v-red: #d9081f;
  --v-red2: #b80016;
  --v-ink: #141414;
  --v-muted: #6b6b6b;
  --v-bg: #f7f6f3;
  --v-line: #e4e1dc;
  --v-green: #16a369;
  --v-header: 92px;
}

body.v-claro { background: var(--v-bg); color: var(--v-ink); }

/* Links do menu para seções (#como, #escola, #duvidas): a seção para logo abaixo do cabeçalho fixo. */
html { scroll-padding-top: calc(var(--v-header) - 30px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.v-wrap { width: min(1240px, calc(100% - 48px)); margin: 0 auto; }

/* ---------- faixa vermelha ---------- */
.v-topbar {
  height: 34px; background: var(--v-red); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  display: flex; align-items: center;
}
.v-topbar .v-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.v-topbar span:last-child { opacity: .78; }
.v-topbar-inst { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; }
.v-topbar-inst i { font-size: 9px; opacity: .8; }
.v-topbar-inst:hover { text-decoration: underline; text-underline-offset: 3px; }
.v-topbar-curto { display: none; }

/* ---------- cabeçalho (branco, logotipo de sempre) ---------- */
.v-header {
  position: sticky; top: 0; z-index: 40; background: #fff; color: var(--v-ink);
  border-bottom: 1px solid var(--v-line); box-shadow: 0 10px 28px rgba(16, 24, 40, .06);
}
.v-nav {
  height: var(--v-header); display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
/* O bloco do logotipo usa as classes de sempre (style.css / site-extra.css); aqui só o encaixe. */
.v-nav .logo-area { min-width: 0; }

.v-menu { display: flex; gap: 28px; font-size: 13.5px; font-weight: 650; }
.v-menu a { position: relative; padding-bottom: 4px; color: #3a3a3a; text-decoration: none; transition: color .2s; }
/* Efeito do menu antigo: o link fica vermelho e um traço vermelho cresce embaixo dele. */
.v-menu a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--v-red); transition: width .2s;
}
.v-menu a:hover { color: var(--v-red); }
.v-menu a:hover::after, .v-menu a[aria-current]::after { width: 100%; }
.v-menu a[aria-current] { color: var(--v-ink); }
.v-cruz { width: 11px; height: 11px; flex: none; fill: var(--v-red); }

.v-acoes { display: flex; gap: 10px; align-items: center; }

.v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 999px; padding: 13px 20px; border: 1px solid rgba(255, 255, 255, .38);
  font: inherit; font-size: 13px; font-weight: 800; letter-spacing: -.01em; line-height: 1;
  color: #fff; background: transparent; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.v-btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }
.v-btn-red { background: var(--v-red); border-color: var(--v-red); color: #fff; }
.v-btn-red:hover { background: var(--v-red2); border-color: var(--v-red2); }
.v-btn-claro { background: #fff; border-color: #fff; color: #111; }
.v-btn-claro:hover { background: #f1efeb; border-color: #f1efeb; }
.v-btn-escuro { background: #151515; border-color: #151515; color: #fff; }
.v-btn-escuro:hover { background: #000; border-color: #000; }
.v-btn-contorno { color: var(--v-ink); border-color: #d6d1c9; }
.v-btn-contorno:hover { background: #f4f2ef; border-color: #c7c1b8; }
.v-btn-grande { padding: 16px 24px; font-size: 14px; }
.v-btn-bloco { width: 100%; }

/* menu do aluno logado */
.v-user { position: relative; }
.v-user summary {
  list-style: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid #d6d1c9; border-radius: 999px; padding: 11px 16px;
  font-size: 13px; font-weight: 700; color: var(--v-ink);
}
.v-user summary::-webkit-details-marker { display: none; }
.v-user summary .fa-circle-user { color: var(--v-red); }
.v-user summary .fa-chevron-down { font-size: 10px; opacity: .6; }
.v-user[open] summary { background: #f4f2ef; }
.v-user-drop {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 230px; z-index: 45;
  background: #fff; color: var(--v-ink); border-radius: 18px; padding: 8px;
  border: 1px solid var(--v-line); box-shadow: 0 22px 60px rgba(0, 0, 0, .14);
}
.v-user-drop a, .v-user-drop button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 12px;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--v-ink); text-decoration: none;
  background: none; border: 0; cursor: pointer; text-align: left;
}
.v-user-drop a:hover, .v-user-drop button:hover { background: #f4f2ef; }
.v-user-drop i { width: 16px; color: var(--v-red); }
.v-user-drop form { margin: 0; border-top: 1px solid var(--v-line); margin-top: 6px; padding-top: 6px; }

/* menu do celular: tela cheia abaixo do cabeçalho (o cabeçalho, com o logo e o X, continua à vista).
   main.js põe a classe v-menu-aberto no <html> (trava a rolagem da página) e mede onde o cabeçalho
   termina (--v-gaveta-top: com a página no topo a faixa vermelha também fica à vista). */
.v-burger {
  display: none; width: 44px; height: 44px; border-radius: 12px; flex: none;
  border: 0; background: transparent; color: var(--v-ink); font-size: 24px; cursor: pointer;
  transition: background .15s;
}
.v-burger:active { background: #f1efeb; }
.v-burger { position: relative; }
.v-burger::after { content: ""; position: absolute; inset: 0 -4px; }
.v-burger:focus-visible { outline: 2px solid var(--v-red); outline-offset: 2px; }
html.v-menu-aberto { overflow: hidden; }
/* acima do botão do WhatsApp (2000) e da barra fixa do curso; abaixo só o aviso de cookies */
/* enquanto o painel está à vista (inclusive no fade de saída) */
.v-header:has(.v-gaveta:not([hidden])) { z-index: 2100; box-shadow: none; }
/* no tablet o cabeçalho mostra Entrar / Ver cursos / Olá: com o menu aberto ficam só no menu */
html.v-menu-aberto .v-acoes .v-so-pc, html.v-menu-aberto .v-acoes .v-user { display: none; }
.v-gaveta {
  position: fixed; left: 0; right: 0; bottom: 0; top: var(--v-gaveta-top, var(--v-header)); z-index: 1;
  background: var(--v-bg); border-top: 1px solid var(--v-line);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: var(--v-gaveta-aviso, 0px);
}
.v-gaveta[hidden] { display: none; }
.v-gaveta-in {
  min-height: 100%; display: flex; flex-direction: column; gap: 30px;
  padding: clamp(18px, 3.4dvh, 30px) 0 calc(22px + env(safe-area-inset-bottom) + var(--v-gaveta-aviso, 0px));
}
.v-gaveta-rotulo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 clamp(6px, 1.4dvh, 12px);
  font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; color: var(--v-red);
}
.v-gaveta-rotulo::before { content: ""; width: 26px; height: 2px; background: var(--v-red); }
.v-gaveta-nav ul { list-style: none; margin: 0; padding: 0; }
.v-gaveta-nav li { border-bottom: 1px solid var(--v-line); }
.v-gaveta-nav a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center;
  padding: clamp(12px, 2.3dvh, 20px) 2px; color: var(--v-ink); text-decoration: none;
  -webkit-tap-highlight-color: transparent; border-radius: 10px;
}
.v-gaveta-num {
  font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #7a746b;
  font-variant-numeric: tabular-nums; transition: color .15s;
}
.v-gaveta-nome {
  font-size: clamp(26px, 7.8vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.08;
  transition: color .15s;
}
.v-gaveta-nav a:hover .v-gaveta-nome, .v-gaveta-nav a:active .v-gaveta-nome { color: var(--v-red); }
/* página atual: número e nome em vermelho */
.v-gaveta-nav a[aria-current] .v-gaveta-num,
.v-gaveta-nav a[aria-current] .v-gaveta-nome { color: var(--v-red); }
.v-gaveta a:focus-visible, .v-gaveta button:focus-visible { outline: 2px solid var(--v-red); outline-offset: 3px; }

/* parte de baixo: conta, WhatsApp da secretaria e endereço */
.v-gaveta-pe { margin-top: auto; display: grid; gap: 12px; }
.v-gaveta-titulo { margin: 0 2px -2px; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: #7a746b; }
.v-gaveta-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v-gaveta-acoes .v-btn { padding: 16px; font-size: 14.5px; }
.v-gaveta-acoes .v-btn-contorno { background: #fff; }
.v-gaveta-conta { background: #fff; border: 1px solid var(--v-line); border-radius: 20px; padding: 6px; }
.v-gaveta-ola {
  display: flex; align-items: center; gap: 11px; margin: 0; padding: 10px 10px 12px;
  font-size: 15px; color: #555; border-bottom: 1px solid var(--v-line);
}
.v-gaveta-ola b { color: var(--v-ink); font-weight: 800; letter-spacing: -.02em; }
.v-gaveta-ola small { display: block; margin-top: 1px; font-size: 12px; color: #7a746b; }
.v-gaveta-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--v-red); color: #fff; font-size: 14px; font-weight: 800;
}
.v-gaveta-conta a, .v-gaveta-conta button {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 12px 10px; border-radius: 12px;
  font: inherit; font-size: 15px; font-weight: 650; color: var(--v-ink); text-decoration: none;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.v-gaveta-conta a:active, .v-gaveta-conta button:active { background: #f4f2ef; }
.v-gaveta-conta i { width: 18px; text-align: center; color: var(--v-red); }
.v-gaveta-conta form { margin: 0; }
.v-gaveta-conta button { color: #3a3a3a; }
.v-gaveta-conta button i { color: #9a9389; }
.v-gaveta-wpp {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px;
  background: #fff; border: 1px solid var(--v-line); border-radius: 18px; color: var(--v-ink); text-decoration: none;
}
.v-gaveta-wpp:active { background: #f4f2ef; }
.v-gaveta-wpp .fa-whatsapp {
  width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: #e7f7ee; color: #16a369; font-size: 21px;
}
.v-gaveta-wpp span { flex: 1; min-width: 0; }
.v-gaveta-wpp small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a847b; }
.v-gaveta-wpp b { display: block; margin-top: 2px; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; }
.v-gaveta-wpp .fa-arrow-up-right-from-square { font-size: 12px; color: #b3aca2; }
.v-gaveta-end { display: flex; align-items: baseline; gap: 8px; margin: 2px 2px 0; font-size: 12.5px; line-height: 1.45; color: #7a746b; }
.v-gaveta-end i { color: var(--v-red); font-size: 11px; }

/* entrada: o painel aparece e os links sobem em cascata; a saída é um fade curto (main.js) */
@media (prefers-reduced-motion: no-preference) {
  .v-gaveta { animation: v-gaveta-entra .22s ease-out; }
  .v-gaveta-nav li, .v-gaveta-pe { animation: v-gaveta-sobe .38s cubic-bezier(.2, .7, .2, 1) both; }
  .v-gaveta-nav li:nth-child(2) { animation-delay: .03s; }
  .v-gaveta-nav li:nth-child(3) { animation-delay: .06s; }
  .v-gaveta-nav li:nth-child(4) { animation-delay: .09s; }
  .v-gaveta-nav li:nth-child(5) { animation-delay: .12s; }
  .v-gaveta-pe { animation-delay: .16s; }
  .v-gaveta.v-gaveta-saindo { animation: v-gaveta-sai .14s ease-in both; pointer-events: none; }
}
@keyframes v-gaveta-entra { from { opacity: 0; } }
@keyframes v-gaveta-sobe { from { opacity: 0; transform: translateY(14px); } }
@keyframes v-gaveta-sai { to { opacity: 0; } }

/* ---------- aviso "falta pagar a matrícula" (topo de todas as páginas) ---------- */
.aviso-pagamento { position: relative; z-index: 31; }

/* ---------- botões e títulos de seção ---------- */
.v-kicker { font-size: 11px; color: var(--v-red); font-weight: 900; text-transform: uppercase; letter-spacing: .12em; margin: 0 0 10px; }
.v-secao { padding: 90px 0; }
.v-secao-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 30px; }
.v-secao-head h2 {
  font-size: clamp(40px, 5vw, 64px); line-height: .98; letter-spacing: -.055em; font-weight: 800;
  margin: 0; max-width: 720px; color: var(--v-ink);
}
.v-secao-head > p { max-width: 460px; color: #707070; line-height: 1.6; font-size: 14.5px; margin: 0; }

/* ---------- hero da home ---------- */
.v-hero {
  position: relative; min-height: 640px; min-height: clamp(560px, calc(100svh - 126px), 760px); color: #fff;
  display: flex; align-items: flex-end; overflow: hidden;
  background-color: #111;
  background-image:
    linear-gradient(90deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .74) 37%, rgba(11, 11, 11, .24) 67%, rgba(11, 11, 11, .08) 100%),
    url('/img/capa.webp');
  background-size: cover; background-position: center 30%;
}
.v-hero::after {
  content: ""; position: absolute; inset: auto 0 0; height: 180px;
  background: linear-gradient(transparent, var(--v-bg));
}
.v-hero-grid {
  position: relative; z-index: 2; padding: clamp(40px, 8vh, 96px) 0 112px; width: min(1240px, calc(100% - 48px)); margin: 0 auto;
  display: grid; grid-template-columns: 1fr .72fr; gap: 70px; align-items: end;
}
.v-olho {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase;
}
.v-olho::before { content: ""; width: 34px; height: 2px; background: var(--v-red); }
.v-hero h1 {
  font-size: clamp(54px, min(6.2vw, 11vh), 88px); line-height: .92; letter-spacing: -.062em; font-weight: 800;
  margin: 18px 0 22px; max-width: 760px; color: #fff;
}
.v-hero h1 span { color: var(--v-red); }
.v-hero-copy { font-size: 19px; line-height: 1.62; color: #e6e6e6; max-width: 640px; margin: 0; }
.v-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.v-hero-trust { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 24px; font-size: 12.5px; color: #d8d8d8; }
.v-hero-trust span { display: flex; gap: 8px; align-items: center; }
.v-hero-trust i {
  width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, .14);
  display: grid; place-items: center; font-size: 9px; font-style: normal;
}

.v-destaque {
  display: block; align-self: end; margin-bottom: 48px; text-decoration: none;
  background: rgba(255, 255, 255, .96); color: #111; border-radius: 26px; padding: 26px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, .2); transition: transform .2s, box-shadow .2s;
}
.v-destaque:hover { transform: translateY(-3px); box-shadow: 0 30px 80px rgba(0, 0, 0, .26); }
.v-destaque .v-rotulo { font-size: 10px; color: var(--v-red); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.v-destaque h3 { font-size: 29px; line-height: 1.05; letter-spacing: -.04em; font-weight: 800; margin: 12px 0 10px; color: #111; }
.v-destaque p { margin: 0; color: #666; font-size: 13px; line-height: 1.5; }
.v-destaque-linha {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid #dedbd5;
  display: flex; justify-content: space-between; gap: 20px; align-items: end;
}
.v-destaque-linha small { display: block; color: #7d7d7d; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px; font-weight: 700; }
.v-destaque-linha strong { font-size: 25px; letter-spacing: -.04em; font-weight: 800; }
.v-destaque-linha em { display: block; font-style: normal; color: #7d7d7d; font-size: 11.5px; margin-top: 4px; }
.v-data {
  background: var(--v-red); color: #fff; border-radius: 18px; padding: 12px 15px; text-align: center; min-width: 82px;
}
.v-data b { font-size: 28px; display: block; line-height: 1; font-weight: 800; }
.v-data span { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .85); font-weight: 700; }
.v-destaque-ver { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; font-weight: 800; color: var(--v-red); }

/* ---------- faixa de destaques ---------- */
.v-quick { position: relative; z-index: 3; margin-top: -52px; }
.v-quick-grid {
  background: #fff; border-radius: 24px; box-shadow: 0 16px 55px rgba(0, 0, 0, .08);
  display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; border: 1px solid rgba(0, 0, 0, .05);
}
.v-quick-item { padding: 24px 26px; border-right: 1px solid var(--v-line); }
.v-quick-item:last-child { border-right: 0; }
.v-quick-item b { display: flex; align-items: center; gap: 9px; font-size: 14px; margin-bottom: 6px; color: var(--v-ink); }
.v-quick-item b i { color: var(--v-red); font-size: 13px; }
.v-quick-item span { font-size: 12.5px; color: #777; line-height: 1.45; }
.v-quick-item a { color: var(--v-ink); font-weight: 700; text-decoration: none; }

/* ---------- filtros ---------- */
.v-filtros { display: flex; gap: 9px; overflow-x: auto; margin: 0 0 24px; padding-bottom: 4px; scrollbar-width: none; }
.v-filtros::-webkit-scrollbar { display: none; }
.v-chip {
  border: 1px solid var(--v-line); background: #fff; color: var(--v-ink); border-radius: 999px; padding: 10px 15px;
  font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: .15s;
}
.v-chip:hover { border-color: #c9c5be; }
.v-chip[aria-pressed="true"] { background: #111; color: #fff; border-color: #111; }
.v-chip span { opacity: .55; margin-left: 4px; font-weight: 600; }

/* ---------- cards de curso ---------- */
.v-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.v-card {
  grid-column: span 4; position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--v-line); border-radius: 24px; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.v-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0, 0, 0, .08); }
.v-card.v-c6 { grid-column: span 6; }
.v-card.v-c8 { grid-column: span 8; }
.v-card.v-c12 { grid-column: span 12; }
.v-grade-filtrada .v-card { grid-column: span 4; }
.v-card[hidden] { display: none; }
.v-card-link { position: absolute; inset: 0; z-index: 3; border-radius: 24px; }
.v-card-link:focus-visible { outline: 3px solid var(--v-red); outline-offset: 2px; }
.v-card-img { height: 225px; position: relative; background: #e9e6e0; flex: none; }
.v-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .25)); }
.v-card-semfoto { position: absolute; inset: 0; display: grid; place-items: center; color: #b9b4ac; font-size: 40px; }
.v-wide .v-card-img { height: 300px; }
.v-status {
  position: absolute; z-index: 2; top: 15px; left: 15px; background: rgba(255, 255, 255, .95); color: #111;
  padding: 8px 11px; border-radius: 999px; font-size: 10px; text-transform: uppercase; font-weight: 850; letter-spacing: .05em;
}
.v-status-aberta::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--v-green);
  margin-right: 6px; vertical-align: 1px;
}
.v-card-corpo { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.v-card-corpo h3 { font-size: 25px; letter-spacing: -.04em; line-height: 1.06; font-weight: 800; margin: 2px 0 10px; color: var(--v-ink); }
.v-wide .v-card-corpo h3 { font-size: 35px; }
.v-card-corpo p {
  color: #717171; font-size: 13.5px; line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.v-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.v-meta span {
  font-size: 10px; font-weight: 750; background: #f4f2ef; padding: 7px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .02em; color: #333;
}
.v-card-pe {
  margin-top: auto; border-top: 1px solid var(--v-line); padding-top: 16px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
}
.v-preco small { font-size: 10px; color: #888; display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.v-preco b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--v-ink); }
.v-preco em { display: block; font-style: normal; font-size: 11px; color: #8a8a8a; margin-top: 3px; }
.v-seta {
  width: 44px; height: 44px; border-radius: 50%; background: var(--v-red); color: #fff; flex: none;
  display: grid; place-items: center; font-size: 15px; transition: background .15s, transform .15s;
}
.v-seta i { transform: rotate(-45deg); transition: transform .2s; }
.v-card:hover .v-seta { background: var(--v-red2); }
.v-card:hover .v-seta i { transform: rotate(0); }
.v-vazio {
  background: #fff; border: 1px dashed #d3cec6; border-radius: 24px; padding: 48px 24px; text-align: center; color: #6b6b6b;
}
.v-vazio > i { font-size: 28px; color: #b9b4ac; display: block; margin-bottom: 12px; }
.v-mais { display: flex; justify-content: center; margin-top: 34px; }

/* ---------- como funciona (vermelho) ---------- */
.v-vermelho { background: var(--v-red); color: #fff; position: relative; overflow: hidden; }
.v-vermelho::after {
  content: "+"; position: absolute; right: -70px; top: -180px; font-size: 670px; line-height: 1; font-weight: 900;
  color: rgba(255, 255, 255, .055); pointer-events: none;
}
.v-vermelho-in { position: relative; z-index: 2; display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.v-vermelho .v-kicker { color: #fff; opacity: .72; }
.v-vermelho h2 { font-size: 60px; line-height: .95; letter-spacing: -.055em; font-weight: 800; margin: 0; color: #fff; }
.v-vermelho-cta { margin-top: 34px; }
.v-passo { display: grid; grid-template-columns: 80px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .28); }
.v-passo:last-child { border-bottom: 1px solid rgba(255, 255, 255, .28); }
.v-passo-n { font-size: 12px; font-weight: 900; letter-spacing: .1em; opacity: .6; padding-top: 6px; }
.v-passo h3 { font-size: 22px; margin: 0 0 7px; letter-spacing: -.03em; font-weight: 800; color: #fff; }
.v-passo p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .8); margin: 0; max-width: 570px; }

/* ---------- a escola ---------- */
.v-escola { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.v-escola-foto {
  min-height: 560px; border-radius: 28px; position: relative; overflow: hidden;
  background-color: #222;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 50%), url('/img/sede-rj.webp');
  background-size: cover; background-position: center 40%;
}
.v-escola-legenda { position: absolute; left: 26px; right: 26px; bottom: 24px; color: #fff; }
.v-escola-legenda small { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .8; font-weight: 700; }
.v-escola-legenda h3 { font-size: 28px; letter-spacing: -.04em; font-weight: 800; margin: 6px 0 0; color: #fff; }
.v-escola-texto {
  background: #111; color: #fff; border-radius: 28px; padding: 42px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.v-escola-texto h2 { font-size: 46px; line-height: .98; letter-spacing: -.05em; font-weight: 800; margin: 14px 0 18px; color: #fff; }
.v-kicker-claro { color: #ff4d5e; }
.v-escola-texto p { color: #c4c4c4; line-height: 1.65; font-size: 14.5px; margin: 0 0 12px; }
.v-escola-lista { border-top: 1px solid #333; margin-top: 24px; }
.v-escola-linha { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid #333; font-size: 13px; }
.v-escola-linha span { color: #a3a3a3; text-align: right; }
.v-escola-linha a { color: #fff; text-decoration: none; }
/* mapa da sede: o mapa ocupa a faixa toda e o cartão "Como chegar" flutua à direita.
   O Google põe um cartão próprio (endereço e botões) no canto de cima à esquerda do mapa: o mapa
   começa 330 px antes da faixa e esse cartão fica de fora. Com isso o pino (centro do mapa) cai no
   meio da área livre à esquerda do nosso cartão. Logo e créditos do Google, embaixo, ficam à vista. */
.v-escola-mapa {
  grid-column: 1 / -1; position: relative; height: 460px;
  background: #e9e6e0; border: 1px solid var(--v-line); border-radius: 28px; overflow: hidden;
}
.v-mapa-recorte { position: absolute; inset: 0; overflow: hidden; background: #e9e6e0; }
.v-mapa-frame { position: absolute; top: 0; left: -330px; display: block; width: calc(100% + 330px); height: 100%; border: 0; }
.v-mapa-info {
  position: absolute; z-index: 1; right: 28px; top: 50%; transform: translateY(-50%); width: 340px;
  padding: 28px 28px 30px; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .18);
}
.v-mapa-info h3 { margin: 0 0 4px; font-size: 26px; line-height: 1.05; letter-spacing: -.04em; font-weight: 800; color: var(--v-ink); }
.v-mapa-end { margin: 0; font-size: 14px; color: #666; }
.v-mapa-txt { margin: 16px 0 22px; font-size: 14px; line-height: 1.6; color: #555; }

/* ---------- depoimentos (pesquisa de satisfação; só aparece com a seção ligada na secretaria) ---------- */
.v-depo-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.v-depo-card {
  margin: 0; display: flex; flex-direction: column; gap: 16px; padding: 26px;
  background: #fff; border: 1px solid var(--v-line); border-radius: 22px;
}
.v-depo-nota { display: flex; gap: 3px; color: #f2a900; font-size: 15px; }
.v-depo-nota .v-depo-apagada { color: #e4e1dc; }
.v-depo-card blockquote { margin: 0; flex: 1; font-size: 15.5px; line-height: 1.6; color: #333; white-space: pre-line; }
.v-depo-card figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--v-line); font-size: 13px; color: #777; }
.v-depo-card figcaption b { color: var(--v-ink); font-size: 14.5px; }

/* ---------- dúvidas ---------- */
.v-faq { display: grid; grid-template-columns: .65fr 1.35fr; gap: 80px; }
.v-faq h2 { font-size: 48px; line-height: 1; letter-spacing: -.05em; font-weight: 800; margin: 0; color: var(--v-ink); }
.v-faq-intro { color: #777; font-size: 14.5px; line-height: 1.6; margin: 18px 0 24px; }
.v-faq-lista details { padding: 22px 0; border-top: 1px solid var(--v-line); }
.v-faq-lista details:last-child { border-bottom: 1px solid var(--v-line); }
.v-faq-lista summary {
  list-style: none; display: flex; justify-content: space-between; gap: 20px; cursor: pointer;
  font-weight: 750; font-size: 15.5px; color: var(--v-ink);
}
.v-faq-lista summary::-webkit-details-marker { display: none; }
.v-faq-lista summary::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--v-red); }
.v-faq-lista details[open] summary::after { content: "–"; }
.v-faq-lista p { color: #6f6f6f; line-height: 1.65; font-size: 14px; max-width: 760px; margin: 14px 0 0; }

/* ---------- catálogo (/cursos) ---------- */
.v-sem-quebra { white-space: nowrap; }
.v-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* topo: título, filtros por área e busca */
.v-cat-topo {
  padding: 30px 0 26px; border-bottom: 1px solid var(--v-line);
  background: radial-gradient(circle at 92% 0%, rgba(217, 8, 31, .06), transparent 42%), #fff;
}
.v-trilha { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; font-size: 12.5px; color: #8a8a8a; }
.v-trilha a { color: #5f5f5f; font-weight: 650; text-decoration: none; }
.v-trilha a:hover { color: var(--v-red); }
.v-trilha i { font-size: 8px; color: #bdb8b0; }
.v-trilha span { color: var(--v-ink); font-weight: 700; }
.v-cat-topo h1 {
  font-size: clamp(46px, 5.6vw, 80px); line-height: .95; letter-spacing: -.06em; font-weight: 800;
  margin: 0 0 16px; color: var(--v-ink);
}
.v-cat-topo h1 span { color: var(--v-red); }
.v-cat-lead { font-size: 17px; line-height: 1.6; color: #555; max-width: 620px; margin: 0 0 30px; }

/* turmas com inscrições abertas */
.v-cat-abertas { padding: 56px 0 0; }
.v-agenda { display: grid; gap: 12px; }
.v-ag {
  position: relative; display: grid; grid-template-columns: 84px 136px minmax(0, 1fr) auto auto; gap: 22px; align-items: center;
  padding: 14px 22px 14px 14px; background: #fff; border: 1px solid var(--v-line); border-radius: 24px;
  transition: transform .2s, box-shadow .2s;
}
.v-ag:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(0, 0, 0, .07); }
.v-ag[hidden] { display: none; }
.v-ag .v-data { min-width: 0; }
.v-ag-foto {
  position: relative; height: 92px; border-radius: 16px; overflow: hidden; background: #fbeff0;
  display: grid; place-items: center; font-size: 28px; color: rgba(217, 8, 31, .4);
}
.v-ag-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v-ag-txt h3 { margin: 0 0 9px; font-size: 21px; line-height: 1.12; letter-spacing: -.035em; font-weight: 800; }
.v-ag-txt h3 a { color: var(--v-ink); text-decoration: none; }
.v-ag-txt h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
.v-ag-txt h3 a:hover { color: var(--v-red); }
.v-ag-txt h3 a:focus-visible { outline: none; }
.v-ag-txt h3 a:focus-visible::after { outline: 3px solid var(--v-red); outline-offset: 2px; }
.v-ag-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; color: #6b6b6b; }
.v-ag-meta i { margin-right: 4px; color: #a29d95; }
.v-ag-quando {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px;
  background: #ecf8f1; color: #1d6b48; font-size: 12px; font-weight: 700;
}
.v-ag-quando b { font-weight: 850; color: #0f5132; }
.v-ag .v-preco { min-width: 170px; }
.v-ag-btn { position: relative; z-index: 2; }

/* todos os cursos: barra de filtros, busca e grade */
.v-cat-todos { padding: 64px 0 96px; }
.v-cat-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px;
  background: var(--v-bg); border-radius: 22px;
}
.v-cat-barra .v-filtros { flex: 1 1 auto; min-width: 0; gap: 6px; margin: 0; padding: 0; }
.v-cat-barra .v-chip { display: inline-flex; align-items: center; gap: 8px; padding: 11px 15px; border-color: transparent; background: transparent; }
.v-cat-barra .v-chip:hover { background: #fff; border-color: transparent; }
.v-cat-barra .v-chip i { font-size: 12px; color: var(--v-red); }
.v-cat-barra .v-chip[aria-pressed="true"] { background: var(--v-red); border-color: var(--v-red); color: #fff; }
.v-cat-barra .v-chip[aria-pressed="true"] i { color: #fff; }
.v-cat-barra .v-chip[aria-pressed="true"] span { opacity: .8; }
.v-busca { position: relative; display: block; flex: 0 0 280px; }
.v-busca > i { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #9a958d; pointer-events: none; }
.v-busca input {
  box-sizing: border-box; width: 100%; height: 46px; padding: 0 18px 0 44px; border-radius: 999px;
  border: 1px solid var(--v-line); background: #fff; font: inherit; font-size: 14px; color: var(--v-ink);
}
.v-busca input::placeholder { color: #9a958d; }
.v-busca input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none; width: 16px; height: 16px; cursor: pointer; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23141414' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.v-busca input::-webkit-search-cancel-button:hover { opacity: 1; }
.v-busca input:focus { outline: none; border-color: var(--v-red); background: #fff; box-shadow: 0 0 0 4px rgba(217, 8, 31, .1); }
.v-cat-linha { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 26px; margin: 14px 6px 0; }
.v-cat-conta { margin: 0; font-size: 13px; color: #777; }
.v-so-abertas { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: #3a3a3a; cursor: pointer; user-select: none; }
.v-so-abertas input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.v-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: #d9d5ce; transition: background .15s; }
.v-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s;
}
.v-so-abertas input:checked + .v-switch { background: var(--v-green); }
.v-so-abertas input:checked + .v-switch::after { transform: translateX(16px); }
.v-so-abertas input:focus-visible + .v-switch { outline: 3px solid rgba(217, 8, 31, .35); outline-offset: 2px; }
.v-grade-cat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v-cat-nada .v-vazio-acoes { justify-content: center; }

/* card do catálogo */
.v-cc {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--v-line); border-radius: 24px; transition: transform .25s, box-shadow .25s;
}
.v-cc[hidden] { display: none; }
.v-cc:hover { transform: translateY(-5px); box-shadow: 0 24px 54px rgba(0, 0, 0, .09); }
.v-cc-link { position: absolute; inset: 0; z-index: 3; border-radius: 24px; }
.v-cc-link:focus-visible { outline: 3px solid var(--v-red); outline-offset: 2px; }
.v-cc-img { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #fbeff0; }
.v-cc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.v-cc:hover .v-cc-img img { transform: scale(1.04); }
.v-cc-semfoto { position: absolute; inset: 0; display: grid; place-items: center; font-size: 48px; color: rgba(217, 8, 31, .35); }
.v-cc-corpo { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.v-cc-area {
  display: flex; align-items: center; gap: 7px; margin: 0 0 9px;
  font-size: 10.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--v-red);
}
.v-cc h3 { margin: 0 0 8px; font-size: 23px; line-height: 1.08; letter-spacing: -.04em; font-weight: 800; color: var(--v-ink); }
.v-cc-desc {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: #717171;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.v-cc-info { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 0 0; padding: 0; font-size: 12.5px; font-weight: 650; color: #4a4a4a; }
.v-cc-info i { margin-right: 6px; color: #a29d95; }
.v-cc-turma {
  display: flex; align-items: flex-start; gap: 10px; margin: 16px 0 18px; padding: 11px 13px; border-radius: 14px;
  background: #f4f2ef; color: #6b6b6b; font-size: 12.5px; line-height: 1.45;
}
.v-cc-turma i { flex: none; margin-top: 2px; font-size: 14px; color: #a29d95; }
.v-cc-turma b { font-weight: 800; color: var(--v-ink); }
.v-cc-turma-aberta { background: #ecf8f1; color: #2f6b4f; }
.v-cc-turma-aberta i { color: var(--v-green); }
.v-cc-turma-aberta b { color: #0f5132; }
.v-cc-pe { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--v-line); }
.v-cc-ver {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 16px; border-radius: 999px;
  border: 1px solid var(--v-red); color: var(--v-red); font-size: 13px; font-weight: 800; transition: background .15s, color .15s;
}
.v-cc:hover .v-cc-ver { background: var(--v-red); color: #fff; }
/* Cards da mesma linha com os textos alinhados: cada parte (foto, área, título, descrição,
   informações, turma e preço) ocupa uma linha da grade, com a altura da maior entre os cards. */
@supports (grid-template-rows: subgrid) {
  .v-cc { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .v-cc-corpo { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  .v-cc-desc { align-self: start; }
  .v-cc-info { align-self: start; }
  .v-cc-turma { align-self: stretch; }
  .v-cc-pe { align-self: end; }
}

/* ---------- página do curso ---------- */
.v-curso-topo { position: relative; background: #111; color: #fff; overflow: hidden; }
.v-curso-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.v-curso-topo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(11, 11, 11, .93) 0%, rgba(11, 11, 11, .8) 40%, rgba(11, 11, 11, .4) 75%, rgba(11, 11, 11, .22) 100%);
}
.v-curso-topo-grid {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 60px;
  align-items: end; padding: 48px 0 64px; min-height: 540px;
}
.v-voltar {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 44px;
  color: #fff; font-size: 13px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .3); padding: 9px 14px; border-radius: 999px; transition: background .15s;
}
.v-voltar:hover { background: rgba(255, 255, 255, .1); }
.v-curso-titulo h1 {
  font-size: clamp(44px, 5.4vw, 78px); line-height: .95; letter-spacing: -.055em; font-weight: 800;
  margin: 20px 0 18px; color: #fff; max-width: 780px;
}
.v-curso-lead { font-size: 18px; line-height: 1.6; color: #e2e2e2; max-width: 620px; margin: 0; }
.v-curso-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.v-curso-chips span {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); padding: 9px 13px; border-radius: 999px;
}
.v-curso-chips i { opacity: .8; }

.v-curso-card { background: rgba(255, 255, 255, .97); color: #111; border-radius: 26px; padding: 26px; box-shadow: 0 25px 70px rgba(0, 0, 0, .28); }
.v-curso-card .v-rotulo { font-size: 10px; color: var(--v-red); font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.v-curso-card h3 { font-size: 24px; letter-spacing: -.03em; font-weight: 800; margin: 10px 0 8px; color: #111; }
.v-curso-card p { color: #666; font-size: 13.5px; line-height: 1.55; margin: 0; }
.v-curso-turma { display: flex; gap: 16px; align-items: center; margin-top: 14px; }
.v-curso-turma strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.v-curso-turma em { display: block; font-style: normal; color: #777; font-size: 13px; margin-top: 4px; }
/* .curso-countdown.v-contagem: mais específico que o contador antigo de site-extra.css */
.curso-countdown.v-contagem {
  margin: 16px 0 0; background: #f4f2ef; border: 0; border-radius: 16px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.v-contagem .v-contagem-rot { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #777; white-space: nowrap; }
.curso-countdown.v-contagem .cd-nums { display: flex; flex-wrap: nowrap; gap: 14px; }
.curso-countdown.v-contagem .cd-nums span { display: flex; flex-direction: column; align-items: center; min-width: 30px; font-size: inherit; color: inherit; }
.curso-countdown.v-contagem .cd-nums b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; color: #111; line-height: 1.1; }
.curso-countdown.v-contagem .cd-nums i { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #888; }
.v-curso-preco { margin: 18px 0 16px; padding-top: 16px; border-top: 1px solid var(--v-line); }
.v-curso-preco small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7d7d7d; font-weight: 700; margin-bottom: 4px; }
.v-curso-preco strong { font-size: 30px; font-weight: 800; letter-spacing: -.04em; }
.v-curso-preco em { display: block; font-style: normal; color: #7d7d7d; font-size: 12px; margin-top: 3px; }
.v-curso-card .v-curso-obs { font-size: 11.5px; color: #888; text-align: center; margin-top: 10px; }
.v-curso-link { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 800; color: var(--v-red); text-decoration: none; }

.v-curso-corpo { padding-top: 72px; }
.v-curso-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.v-bloco + .v-bloco { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--v-line); }
.v-bloco h2 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1; letter-spacing: -.05em; font-weight: 800; margin: 0 0 24px; color: var(--v-ink); }
.v-prosa p { font-size: 16px; line-height: 1.75; color: #4a4a4a; margin: 0 0 16px; max-width: 70ch; }
.v-turmas { display: grid; gap: 12px; }
.v-turma { display: flex; align-items: center; gap: 18px; background: #fff; border: 1px solid var(--v-line); border-radius: 20px; padding: 14px; }
.v-turma .v-data { min-width: 76px; }
.v-turma-txt { flex: 1; min-width: 0; }
.v-turma-txt strong { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -.02em; color: var(--v-ink); }
.v-turma-txt span { display: block; font-size: 13px; color: #777; margin-top: 4px; }
.v-aviso {
  display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 14px 16px; border-radius: 16px;
  background: #fff4f4; border: 1px solid #f6c9cd; color: #7a1b24; font-size: 13.5px; line-height: 1.55;
}
.v-aviso i { color: var(--v-red); margin-top: 3px; }
.v-vazio-esq { text-align: left; }
.v-vazio-esq > i { display: inline-block; margin: 0 8px 0 0; font-size: 18px; vertical-align: -2px; }
.v-vazio-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.v-curso-lado { position: sticky; top: calc(var(--v-header) + 24px); }
.v-invest { background: #fff; border: 1px solid var(--v-line); border-radius: 24px; padding: 26px; box-shadow: 0 16px 50px rgba(0, 0, 0, .05); }
.v-invest-linha { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--v-line); font-size: 14px; color: #555; }
.v-invest-linha b { color: var(--v-ink); font-weight: 700; white-space: nowrap; }
.v-invest-total { border-bottom: 0; padding-top: 16px; font-weight: 700; color: var(--v-ink); align-items: baseline; }
.v-invest-total b { color: var(--v-red); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.v-invest-obs { font-size: 12.5px; color: #8a8a8a; line-height: 1.6; margin: 6px 0 18px; }
.v-invest-whats { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 700; color: #2b2b2b; text-decoration: none; }
.v-invest-whats:hover { color: var(--v-red); }

.v-curso-faq { padding-top: 0; }
.v-curso-outros { background: #fff; border-top: 1px solid var(--v-line); }
.v-secao-head > .v-btn { flex: none; }

.v-barra-cel { display: none; }

/* ---------- rodapé ---------- */
.v-rodape { background: #fff; color: var(--v-ink); padding: 56px 0 0; margin-top: auto; border-top: 1px solid var(--v-line); }
.v-rodape-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.v-rodape .logo-area { display: inline-flex; }
.v-rodape-txt { max-width: 400px; margin: 16px 0 0; font-size: 13.5px; line-height: 1.65; color: #5f5f5f; }
.v-rodape-inst {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 10px 15px; border-radius: 999px;
  border: 1px solid var(--v-line); font-size: 12.5px; font-weight: 750; color: var(--v-ink); text-decoration: none;
  transition: border-color .15s, color .15s;
}
.v-rodape-inst:hover { border-color: var(--v-red); color: var(--v-red); }
.v-rodape-inst i { font-size: 10px; color: #9a958d; }
.v-rodape h4 { margin: 2px 0 16px; font-size: 10.5px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; color: var(--v-red); }
.v-rodape-lista { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.v-rodape-lista a, .v-rodape-lista span { font-size: 13.5px; line-height: 1.5; color: #4f4f4f; text-decoration: none; }
.v-rodape-lista a:hover { color: var(--v-red); }
.v-rodape-contato li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.v-rodape-contato i { margin-top: 4px; font-size: 12.5px; text-align: center; color: var(--v-red); }
.v-rodape .footer-bottom { margin-top: 44px; }
/* o botão flutuante do WhatsApp (home) não cobre os links da faixa final */
@media (min-width: 601px) and (max-width: 1400px) { body:has(.wpp-float) .v-rodape .footer-inner { padding-inline: 72px; } }

/* ---------- responsivo ---------- */
@media (max-width: 1360px) {
  .v-nav { gap: 18px; }
  .v-menu { gap: 18px; font-size: 13px; }
}
@media (max-width: 1060px) {
  .v-menu { display: none; }
  .v-burger { display: grid; place-items: center; }
}
/* tablet: links um pouco maiores, largura limitada e a conta logo abaixo da lista (sem vão no meio) */
@media (min-width: 651px) and (max-width: 1060px) {
  .v-gaveta-in { padding-top: 40px; gap: 44px; }
  .v-gaveta-nav, .v-gaveta-pe { width: 100%; max-width: 580px; }
  .v-gaveta-nome { font-size: 40px; }
  .v-gaveta-nav a { grid-template-columns: 48px minmax(0, 1fr); padding: 20px 2px; }
  .v-gaveta-pe { margin-top: 0; }
}
@media (max-width: 980px) {
  .v-depo-grade { grid-template-columns: 1fr 1fr; }
  .v-topbar span:last-child { display: none; }
  /* sem o endereço, o link da instituição fica sozinho na faixa vermelha: centralizado */
  .v-topbar .v-wrap { justify-content: center; }
  .v-escola-mapa { height: 440px; }
  .v-mapa-info { right: 20px; width: 300px; padding: 24px 24px 26px; }
  .v-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .v-destaque { max-width: 520px; margin-bottom: 0; }
  .v-quick-grid { grid-template-columns: 1fr 1fr; }
  .v-quick-item:nth-child(2) { border-right: 0; }
  .v-quick-item:nth-child(-n+2) { border-bottom: 1px solid var(--v-line); }
  .v-card, .v-card.v-c8, .v-card.v-c6, .v-card.v-c12, .v-grade-filtrada .v-card { grid-column: span 6; }
  .v-vermelho-in, .v-escola, .v-faq { grid-template-columns: 1fr; }
  .v-vermelho-in { gap: 48px; }
  .v-rodape-grid { grid-template-columns: 1fr 1fr; }
  .v-rodape-grid > div:first-child { grid-column: 1 / -1; }
  .v-curso-topo-grid { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 40px 0 48px; }
  .v-curso-card { max-width: 520px; }
  .v-curso-grid { grid-template-columns: 1fr; gap: 44px; }
  .v-curso-lado { position: static; }
  .v-ag { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "data txt txt" "data preco acao"; gap: 14px 18px; }
  .v-ag .v-data { grid-area: data; align-self: start; }
  .v-ag-foto { display: none; }
  .v-ag-txt { grid-area: txt; }
  .v-ag .v-preco { grid-area: preco; min-width: 0; }
  .v-ag-btn { grid-area: acao; }
  .v-cat-barra { flex-direction: column; align-items: stretch; }
  .v-busca { flex: none; }
  .v-grade-cat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .v-depo-grade { grid-template-columns: 1fr; }
  :root { --v-header: 76px; }
  .v-wrap, .v-hero-grid { width: calc(100% - 32px); }
  .v-topbar { font-size: 9.5px; letter-spacing: .06em; }
  .v-topbar-longo { display: none; }
  .v-topbar-curto { display: inline; }
  .v-topbar span:last-child { display: none; }
  .v-so-pc, .v-user { display: none !important; }
  .v-nav { gap: 10px; }
  .v-burger { width: 38px; margin-right: -6px; }
  .v-hero {
    min-height: 0; background-position: 58% center;
    background-image:
      linear-gradient(180deg, rgba(11, 11, 11, .62) 0%, rgba(11, 11, 11, .8) 45%, rgba(11, 11, 11, .9) 100%),
      url('/img/capa.webp');
  }
  .v-hero-grid { padding: 64px 0 92px; gap: 28px; }
  .v-hero h1 { font-size: 50px; margin: 20px 0 18px; }
  .v-hero-copy { font-size: 16px; }
  .v-hero-trust { gap: 14px; }
  .v-destaque { padding: 20px; border-radius: 21px; }
  .v-destaque h3 { font-size: 25px; }
  .v-quick { margin-top: -30px; }
  .v-quick-grid { grid-template-columns: 1fr; }
  .v-quick-item { border-right: 0; border-bottom: 1px solid var(--v-line); padding: 20px 22px; }
  .v-quick-item:last-child { border-bottom: 0; }
  .v-secao { padding: 64px 0; }
  .v-secao-head { display: block; }
  .v-secao-head > p { margin-top: 16px; }
  .v-card, .v-card.v-c8, .v-card.v-c6, .v-card.v-c12, .v-grade-filtrada .v-card { grid-column: span 12; }
  .v-card-img, .v-wide .v-card-img { height: 210px; }
  .v-wide .v-card-corpo h3 { font-size: 27px; }
  .v-vermelho h2 { font-size: 46px; }
  .v-vermelho::after { font-size: 380px; right: -110px; top: -130px; }
  .v-passo { grid-template-columns: 44px 1fr; gap: 12px; }
  .v-escola-foto { min-height: 380px; }
  .v-escola-texto { padding: 28px; }
  .v-escola-texto h2 { font-size: 36px; }
  .v-escola-linha { flex-direction: column; gap: 4px; }
  .v-escola-linha span { text-align: left; }
  .v-escola-mapa { height: auto; display: flex; flex-direction: column; background: #fff; border-radius: 22px; }
  .v-mapa-info { position: static; transform: none; width: auto; padding: 24px; border-radius: 0; box-shadow: none; }
  .v-mapa-recorte { position: relative; inset: auto; height: 300px; }
  /* no mapa estreito o Google mostra só um botão pequeno no canto de cima: o mapa sobe 52 px para escondê-lo */
  .v-mapa-frame { left: 0; width: 100%; top: -52px; height: calc(100% + 52px); }
  .v-faq { gap: 30px; }
  .v-faq h2 { font-size: 40px; }
  .v-cat-topo { padding: 18px 0 20px; }
  .v-trilha { margin-bottom: 16px; }
  .v-cat-topo h1 { font-size: 46px; }
  .v-cat-lead { font-size: 15.5px; margin-bottom: 22px; }
  .v-cat-abertas { padding-top: 44px; }
  .v-ag { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "data txt" "preco preco" "acao acao"; padding: 14px; }
  .v-ag .v-data { padding: 10px 8px; }
  .v-ag .v-data b { font-size: 24px; }
  .v-ag-txt h3 { font-size: 18px; }
  .v-ag .v-preco { padding-top: 12px; border-top: 1px solid var(--v-line); }
  .v-ag-btn { width: 100%; }
  .v-cat-todos { padding: 52px 0 72px; }
  .v-cat-linha { flex-direction: column; align-items: flex-start; gap: 12px; }
  .v-grade-cat { grid-template-columns: 1fr; }
  .v-rodape-grid { grid-template-columns: 1fr; gap: 30px; }
  body:has(.wpp-float) .v-rodape .footer-bottom { padding-bottom: 28px; }
  .v-curso-topo::before { background: linear-gradient(180deg, rgba(11, 11, 11, .55) 0%, rgba(11, 11, 11, .82) 45%, rgba(11, 11, 11, .92) 100%); }
  .v-voltar { margin-bottom: 26px; }
  .v-curso-titulo h1 { font-size: 40px; }
  .v-curso-lead { font-size: 16px; }
  .v-curso-card { padding: 20px; border-radius: 21px; }
  .v-curso-corpo { padding-top: 52px; }
  .v-prosa p { font-size: 15.5px; }
  .v-turma { flex-wrap: wrap; }
  .v-turma .v-btn { width: 100%; }
  .v-secao-head > .v-btn { margin-top: 18px; }
  .v-barra-cel {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; align-items: center; justify-content: space-between; gap: 12px;
    background: #fff; border-top: 1px solid var(--v-line); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
  }
  .v-barra-cel small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7d7d7d; font-weight: 700; }
  .v-barra-cel b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; color: var(--v-ink); }
  body:has(.v-barra-cel) .v-rodape .footer-bottom { padding-bottom: 110px; }
}
/* celular estreito (até 400 px): o logotipo encolhe junto com a tela, senão empurra o menu para fora
   e a página ganha rolagem lateral. Precisa de !important porque o style.css fixa esses tamanhos assim. */
@media (max-width: 400px) {
  .v-header .logo-area, .v-rodape .logo-area { gap: 10px !important; }
  .v-header .logo-img, .v-rodape .logo-img { height: clamp(34px, 11.5vw, 46px) !important; }
  .v-header .brand-text, .v-rodape .brand-text { padding-left: 10px !important; }
  .v-header .brand-title, .v-rodape .brand-title { font-size: clamp(12.5px, 4.1vw, 16px) !important; }
  .v-header .brand-subtitle, .v-rodape .brand-subtitle { font-size: clamp(9px, 2.8vw, 11px) !important; }
}
@media (min-width: 435px) and (max-width: 650px) {
  .v-mapa-recorte { height: 380px; }
  .v-mapa-frame { top: -136px; height: calc(100% + 136px); }
}
@media (prefers-reduced-motion: reduce) {
  .v-card, .v-destaque, .v-seta { transition: none; }
  .v-card:hover, .v-destaque:hover { transform: none; }
}

/* ══ Política de Privacidade (/privacidade) ══════════════════════════ */
.v-priv-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.v-priv-indice { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; }
.v-priv-indice a { color: #5f5f5f; text-decoration: none; font-size: 14px; font-weight: 650; padding: 7px 0 7px 12px; border-left: 2px solid var(--v-line); }
.v-priv-indice a:hover { color: var(--v-red); border-left-color: var(--v-red); }
.v-priv-indice .v-priv-pdf { margin-top: 14px; border-left: 0; padding-left: 0; color: var(--v-red); }
.v-priv-texto { max-width: 780px; }
.v-priv-texto > .v-prosa + .v-bloco { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--v-line); }
.v-priv-texto .v-bloco h2 { font-size: clamp(26px, 2.6vw, 34px); margin-bottom: 18px; }
.v-priv-ficha { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--v-line); border-left: 4px solid var(--v-red); border-radius: 14px; padding: 20px 24px; margin: 0 0 20px; font-size: 15px; line-height: 1.55; color: #4a4a4a; }
.v-priv-ficha b { color: var(--v-ink); }
.v-priv-usos { display: grid; gap: 14px; margin: 4px 0 24px; }
.v-priv-uso { background: #fff; border: 1px solid var(--v-line); border-radius: 14px; padding: 20px 24px; }
.v-priv-uso h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--v-ink); margin: 0 0 12px; }
.v-priv-uso dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; margin: 0; }
.v-priv-uso dt { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--v-red); padding-top: 4px; }
.v-priv-uso dd { margin: 0; font-size: 15px; line-height: 1.6; color: #4a4a4a; }
.v-priv-marcas { margin: 0 0 18px; padding-left: 20px; }
.v-priv-marcas li { font-size: 15.5px; line-height: 1.65; color: #4a4a4a; margin: 0 0 8px; }
.v-priv-marcas b { color: var(--v-ink); }
.v-priv-termo-caixa { background: #fff; border: 1px solid var(--v-line); border-radius: 14px; margin: 8px 0 0; }
.v-priv-termo-caixa summary { cursor: pointer; padding: 16px 22px; font-weight: 800; color: var(--v-ink); }
.v-priv-termo-caixa[open] summary { border-bottom: 1px solid var(--v-line); }
.v-priv-termo-caixa .v-priv-termo { padding: 4px 22px 18px; }
.v-priv-texto a { color: var(--v-red); font-weight: 650; }
.v-priv-texto .v-btn { color: var(--v-ink); margin-top: 8px; }
.v-priv-tabela { border: 1px solid var(--v-line); border-radius: 14px; overflow: hidden; background: #fff; }
.v-priv-linha { display: grid; grid-template-columns: 130px 1fr 150px; gap: 16px; padding: 14px 18px; font-size: 14.5px; line-height: 1.5; color: #4a4a4a; }
.v-priv-linha + .v-priv-linha { border-top: 1px solid var(--v-line); }
.v-priv-cab { background: #f6f4f1; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: #707070; }
.v-priv-obs { font-size: 14.5px; color: #5f5f5f; line-height: 1.6; margin: 16px 0 0; }
.v-priv-termo h3 { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; color: var(--v-ink); margin: 30px 0 10px; }
.v-priv-lista { list-style: none; margin: 0 0 16px; padding: 0; }
.v-priv-lista li { font-size: 15.5px; line-height: 1.6; color: #4a4a4a; padding: 3px 0 3px 46px; text-indent: -46px; }
.v-priv-lista li span { display: inline-block; width: 46px; text-indent: 0; color: #8a8a8a; font-weight: 700; }
@media (max-width: 860px) {
  .v-priv-grid { grid-template-columns: 1fr; gap: 28px; }
  .v-priv-indice { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .v-priv-indice .v-kicker { width: 100%; margin: 0; }
  .v-priv-indice a { border: 1px solid var(--v-line); border-radius: 999px; padding: 6px 12px; font-size: 13px; background: #fff; }
  .v-priv-indice .v-priv-pdf { margin-top: 0; padding: 6px 12px; border: 1px solid var(--v-line); }
  .v-priv-uso { padding: 18px; }
  .v-priv-uso dl { grid-template-columns: 1fr; gap: 2px; }
  .v-priv-uso dt { padding-top: 10px; }
  .v-priv-ficha { padding: 18px; }
  .v-priv-linha { grid-template-columns: 1fr; gap: 4px; }
  .v-priv-cab { display: none; }
}