/* Site institucional na raiz (#403). Só tema claro: a página não carrega
 * theme.js de propósito — é marketing, e as seções têm fundo próprio. Tokens
 * vêm de app.css; aqui só layout e as peças que o app não tem. */

.site { color: var(--ink-900); }
.site section { padding: var(--sp-10) var(--sp-5); }
.site .wrap { max-width: 1120px; margin: 0 auto; min-width: 0; }
.site .wrap > * { min-width: 0; }
.site img { max-width: 100%; }
.site h1, .site h2, .site h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; margin: 0; }
.site h2 { font-size: 2rem; max-width: 900px; }
.site h3 { font-size: 1.25rem; }
.site p { margin: 0; }
.site .lead { font-size: var(--fs-lg); color: var(--ink-600); line-height: 1.55; max-width: 760px; }
.site .muted { color: var(--ink-500); }
.site .head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.site .grid { display: grid; gap: var(--sp-5); }
.site .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.site .card { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.site .chip { width: 40px; height: 40px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.site .chip svg { width: 22px; height: 22px; }
.site .chip-prof  { background: var(--gold-50); color: var(--gold-700); }
.site .chip-aluno { background: var(--teal-50); color: var(--teal-700); }
.site .chip-admin { background: var(--accent-50); color: var(--accent-700); }
.site .chip-cream { background: var(--bg-raised); color: var(--accent-700); }
.site .btn-lg { padding: 0.85rem 1.4rem; font-size: var(--fs-md); }
.site ul.lista { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: var(--sp-2); }

/* Topo */
.site-top { position: sticky; top: 0; z-index: 20; background: var(--bg-raised); border-bottom: 1px solid var(--ink-100); }
.site-top .wrap { display: flex; align-items: center; gap: var(--sp-5); padding: var(--sp-3) var(--sp-5); }
.site-top .logo img { height: 40px; width: auto; display: block; }
.site-top nav { display: flex; gap: var(--sp-5); margin-left: auto; }
.site-top nav a { color: var(--ink-700); font-weight: 500; font-size: var(--fs-sm); }
.site-top nav a:hover { color: var(--accent-700); text-decoration: none; }

/* Herói */
.hero { background: var(--bg); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.hero h1 { font-size: 2.875rem; line-height: 1.1; }
.hero .acoes { display: flex; align-items: center; gap: var(--sp-5); margin-top: var(--sp-2); }
.hero .acoes .mascote { height: 176px; width: auto; }
.hero .botoes { display: flex; flex-direction: column; gap: var(--sp-2); }
.hero .texto { display: flex; flex-direction: column; gap: var(--sp-4); }

/* Vídeo com pôster (fachada do YouTube): só carrega o player no clique. */
.video { position: relative; display: block; max-width: 100%; min-width: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-200); box-shadow: var(--sh-lg); background: var(--ink-900); aspect-ratio: 16 / 9; cursor: pointer; padding: 0; width: 100%; }
.video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--bg-raised); border: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-lg); }
.video .play svg { width: 28px; height: 28px; fill: var(--accent-700); margin-left: 3px; }
.video .rotulo { position: absolute; left: var(--sp-4); bottom: var(--sp-4); padding: 6px 12px; border-radius: var(--r-pill); background: var(--bg-raised); border: 1px solid var(--ink-200); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-700); }
.video.sem-id { cursor: default; }
.video.sem-id .play { display: none; }

/* Faixa do nome */
.nome { background: var(--bg-raised); border-top: 1px solid var(--ink-100); border-bottom: 1px solid var(--ink-100); padding-top: var(--sp-6); padding-bottom: var(--sp-6); }
.nome .wrap { display: grid; grid-template-columns: 300px repeat(3, minmax(0, 1fr)); gap: var(--sp-6); align-items: start; }
.nome .marca { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; letter-spacing: 0.12em; }
.nome .uso { display: flex; gap: var(--sp-3); align-items: flex-start; }
.nome .uso .titulo { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.nome .uso p { font-size: var(--fs-sm); color: var(--ink-600); }
.uso-tut .titulo { color: var(--gold-700); } .uso-aval .titulo { color: var(--accent-700); } .uso-arg .titulo { color: var(--teal-700); }

/* O problema errado */
.problema { background: var(--bg); }
.card.navy { background: var(--accent-700); border-color: var(--accent-700); color: #eef0ea; }
.card.navy .eyebrow { color: #c9cfd9; }
.card.navy h3, .card.navy li { color: #eef0ea; }
.problema .fecho { font-size: var(--fs-lg); margin-top: var(--sp-6); max-width: 900px; }

/* Papéis */
.papeis { background: var(--bg-muted); }
.persona-video-link { align-self: flex-start; margin-top: auto; padding: 0; border: 0; background: none; color: var(--accent-600); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.persona-video-link:hover { color: var(--accent-700); text-decoration: underline; }
.persona-video-link[aria-expanded="true"] { color: var(--teal-700); }
.persona-player { margin-top: var(--sp-6); padding: var(--sp-5); border: 1px solid var(--ink-200); border-radius: var(--r-lg); background: var(--bg-raised); }
.persona-player[hidden] { display: none; }
.persona-player-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.persona-player-head > div { display: flex; flex-direction: column; gap: var(--sp-2); }
.persona-player-close { border: 1px solid var(--ink-200); border-radius: var(--r-pill); background: var(--bg); color: var(--ink-700); padding: 6px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.persona-player-close:hover { border-color: var(--ink-400); color: var(--ink-900); }
.persona-player .video { cursor: default; }
.papeis .cenarios { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.papeis .cenarios span.tag { padding: 6px 14px; border-radius: var(--r-pill); background: var(--teal-50); color: var(--teal-700); font-size: var(--fs-sm); font-weight: 500; }

/* Como funciona */
.como { background: var(--bg); }
.passo .n { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; }
.passo .n.prof { color: var(--gold-700); } .passo .n.aluno { color: var(--teal-700); } .passo .n.admin { color: var(--accent-700); }
.passo .topo { display: flex; align-items: center; gap: var(--sp-3); }
.telas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); margin-top: var(--sp-6); }
.telas figure { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--ink-100); background: var(--bg-raised); }
.telas img { width: 100%; height: 240px; object-fit: cover; object-position: top; display: block; }
.telas figcaption { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); color: var(--ink-500); }

/* Dois tipos */
.tipos { background: var(--bg-muted); }
.tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.tags span { padding: 4px 12px; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 500; }
.tags.prof span { background: var(--gold-50); color: var(--gold-700); } .tags.aluno span { background: var(--teal-50); color: var(--teal-700); }

/* Fiscalização (navy) */
.fisc { background: var(--accent-700); color: #eef0ea; }
.fisc .eyebrow { color: #86c4d1; } .fisc h2, .fisc h3 { color: #eef0ea; } .fisc p { color: #c9cfd9; }
.fisc .item { display: flex; flex-direction: column; gap: var(--sp-3); }
.fisc .nota { margin-top: var(--sp-6); font-size: var(--fs-sm); max-width: 900px; }
.fisc .nota a { color: #eef0ea; text-decoration: underline; }

/* Vídeos */
.videos { background: var(--bg); }
.videos .wrap-v { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); align-items: start; }
.videos .lista-v { display: flex; flex-direction: column; gap: var(--sp-4); }
.videos .lista-v ol li { margin-bottom: var(--sp-1); }
.videos .lista-v hr { margin: var(--sp-2) 0; }
.mini { display: flex; gap: var(--sp-4); align-items: center; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; }
.mini .video { width: 200px; flex: 0 0 auto; box-shadow: none; border-radius: var(--r-md); }
.mini .video .play { width: 40px; height: 40px; } .mini .video .play svg { width: 16px; height: 16px; }
.mini strong { display: block; font-weight: 600; } .mini small { color: var(--ink-500); }
.mini-link { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-600); cursor: pointer; text-align: left; }
.mini-link:hover { color: var(--accent-700); text-decoration: underline; }

/* Para quem */
.quem { background: var(--bg-muted); }
.quem .card { border-top: 3px solid var(--ink-200); }
.quem .card.prof { border-top-color: var(--gold-700); } .quem .card.aluno { border-top-color: var(--teal-700); } .quem .card.admin { border-top-color: var(--accent-700); }

/* Contato */
.contato { background: var(--bg); }
.contato .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: var(--sp-8); align-items: start; }
.contato .texto { display: flex; flex-direction: column; gap: var(--sp-4); }
.contato .mascote { height: 200px; width: auto; align-self: flex-start; margin-top: var(--sp-4); }
.contato form { display: flex; flex-direction: column; gap: var(--sp-3); }
.contato form .field { margin: 0; }
.contato .duas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.contato .consent { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-500); line-height: 1.5; }
.contato .consent input { margin-top: 3px; }
.contato .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contato .retorno { min-height: 1.5em; font-size: var(--fs-sm); }
.contato .retorno.ok { color: var(--success-700); } .contato .retorno.erro { color: var(--danger-700); }
.contato .field.invalido .input, .contato .field.invalido .select, .contato .field.invalido .textarea { border-color: var(--danger-700); }

/* Entradas do sistema (cartões da raiz antiga) */
.entradas { background: var(--bg-muted); border-top: 1px solid var(--ink-100); }
.entry-card { display: flex; flex-direction: column; padding: var(--sp-5); background: var(--bg-raised); border: 1px solid var(--ink-100); border-radius: var(--r-lg); box-shadow: var(--sh-sm); text-decoration: none; color: inherit; transition: border-color 0.12s, box-shadow 0.12s; }
.entry-card:hover { border-color: var(--accent-400); box-shadow: var(--sh-md); text-decoration: none; }
.entry-card h3 { margin: 0 0 var(--sp-2) 0; }
.entry-card p { color: var(--ink-500); font-size: var(--fs-sm); margin: 0 0 var(--sp-4) 0; flex: 1; }
.entry-link { font-weight: 500; font-size: var(--fs-sm); }
.entry-card.role-admin { border-top: 3px solid var(--accent-700); } .entry-card.role-admin .entry-link { color: var(--accent-700); }
.entry-card.role-prof  { border-top: 3px solid var(--gold-700); }   .entry-card.role-prof  .entry-link { color: var(--gold-700); }
.entry-card.role-aluno { border-top: 3px solid var(--teal-700); }   .entry-card.role-aluno .entry-link { color: var(--teal-700); }
.entry-card .chip { margin-bottom: var(--sp-4); }

/* Rodapé */
.rodape { background: var(--accent-700); color: #c9cfd9; padding: var(--sp-8) var(--sp-5); }
.rodape .wrap { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.rodape img { height: 56px; width: auto; }
.rodape .assinatura { font-family: var(--font-display); font-style: italic; font-size: var(--fs-lg); color: #eef0ea; }
.rodape nav { margin-left: auto; display: flex; gap: var(--sp-5); }
.rodape a { color: #c9cfd9; font-size: var(--fs-sm); }
.rodape small { display: block; font-size: var(--fs-xs); }

@media (max-width: 960px) {
  .site .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nome .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .videos .wrap-v, .contato .wrap, .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .site-top nav { display: none; }
}
@media (max-width: 640px) {
  .site section { padding: var(--sp-8) var(--sp-4); }
  .site h2 { font-size: 1.625rem; }
  .hero h1 { font-size: 2.125rem; }
  .site .grid-2, .site .grid-3, .site .grid-4, .nome .wrap, .telas, .contato .duas { grid-template-columns: minmax(0, 1fr); }
  .hero .acoes { align-items: flex-start; }
  .hero .acoes .mascote { height: 130px; }
  .hero .botoes { flex: 1; }
  .mini .video { width: 120px; }
  .rodape nav { margin-left: 0; flex-wrap: wrap; }
}