/* site.css: a home (design-system.md §4.4 e §5). Só tokens; base.css vem antes. Mobile primeiro.
   Breakpoints (§3.1): sm 480, md 768, lg 1024, xl 1280. */

/* ── pular para o conteúdo (§4.4 SkipLink) ─────────────────────────────────────────────────────────────────────── */
.pular {
  position: absolute; left: var(--esp-4); top: var(--esp-3); z-index: 100;
  padding: var(--esp-3) var(--esp-4); border: var(--borda) solid var(--cor-borda); border-radius: var(--raio);
  background: var(--cor-destaque); color: var(--cor-sobre-destaque);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-botao); text-decoration: none;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }
main:focus { outline: none; }

/* ── header (§5.1) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.topo {
  position: sticky; top: 0; z-index: 50;
  background-color: var(--cor-pagina);
  border-bottom: var(--divisor) solid transparent;
  transition: border-color var(--dur-micro) var(--curva-suave);
}
.topo.rolou { border-bottom-color: var(--cor-divisor); }
.topo__dentro { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2); height: var(--header); }
.topo__marca { display: block; flex: none; border-radius: var(--raio); }
.topo__marca .marca { width: 180px; height: auto; }
.topo__nav { display: none; }
.topo__acoes { display: flex; align-items: center; }
.topo__menu-abrir { display: contents; }
.topo__menu-fechar { display: none; }
.topo__menu[aria-expanded="true"] .topo__menu-abrir { display: none; }
.topo__menu[aria-expanded="true"] .topo__menu-fechar { display: contents; }
@media (max-width: 359px) {
  /* abaixo de 360 px, YouTube e Instagram ficam só no menu, para não haver rolagem horizontal */
  .js .topo__acoes > a.botao-icone { display: none; }
}

/* menu do celular: painel sob o header, papel com grade; a página atrás não rola */
.menu {
  position: fixed; inset: var(--header) 0 0 0; z-index: 49; overflow-y: auto;
  background-color: var(--cor-pagina);
  background-image: radial-gradient(circle, var(--cor-grade) 1px, transparent 1.5px);
  background-size: var(--grade-passo) var(--grade-passo); background-attachment: fixed;
  border-top: var(--divisor) solid var(--cor-divisor);
  opacity: 0; transform: translateY(var(--esp-2));
  transition: opacity var(--dur-curta) var(--curva-saida), transform var(--dur-curta) var(--curva-saida);
}
.menu.aberto { opacity: 1; transform: none; transition-timing-function: var(--curva-entrada); }
.menu__lista { padding-block: var(--esp-3); }
.menu__lista li + li { border-top: var(--divisor) solid var(--cor-divisor); }
.menu__lista a {
  display: flex; align-items: center; min-height: 3.5rem;
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: 1.25rem; text-decoration: none;
}
.menu__lista a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: .18em; text-decoration-color: var(--cor-destaque); text-underline-offset: .12em; }
.menu__botoes { display: grid; gap: var(--esp-3); padding-block: var(--esp-5) var(--esp-7); }
.sem-rolagem { overflow: hidden; }

@media (min-width: 1024px) {
  .topo__nav { display: block; flex: 1; }
  .topo__nav ul { display: flex; justify-content: center; gap: var(--esp-6); }
  .topo__nav a {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--esp-2);
    font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nav); text-decoration: none;
  }
  @media (hover: hover) and (pointer: fine) { .topo__nav a:not([aria-current]):hover { text-decoration: underline; text-underline-offset: 3px; } }
  .topo__marca { width: 180px; }
  .topo__acoes { width: 180px; justify-content: flex-end; }
  .topo__menu, .menu { display: none !important; }
}

/* ── seções (§3.3) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.secao { padding-block: var(--esp-8) 0; }
.secao:last-of-type { padding-bottom: var(--esp-8); }
.titulo-secao { margin-bottom: var(--esp-5); }
.titulo-secao--centro { text-align: center; }
.titulo-secao--acao { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-4); }
@media (min-width: 1024px) {
  .secao { padding-top: var(--esp-9); }
  .secao:last-of-type { padding-bottom: var(--esp-9); }
  .titulo-secao { margin-bottom: var(--esp-6); }
}

/* ── hero (§5.2) ───────────────────────────────────────────────────────────────────────────────────────────────── */
.hero { padding-top: var(--esp-6); }
.hero__grade {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 5fr) minmax(0, 40fr);
  grid-template-areas:
    "sobre  sobre  sobre"
    "titulo titulo arte"
    "lead   lead   arte"
    "botoes botoes botoes";
  align-items: start;
}
.hero__sobre { grid-area: sobre; margin-bottom: var(--esp-4); }
.hero__titulo { grid-area: titulo; position: relative; z-index: 1; }
.hero__lead { grid-area: lead; position: relative; z-index: 1; margin-top: var(--esp-4); }
.hero__arte { grid-column: 2 / 4; grid-row: 2 / 4; align-self: center; margin-right: calc(-1 * var(--esp-2)); }
.hero__botoes { grid-area: botoes; display: grid; gap: var(--esp-3); margin-top: var(--esp-6); }
@media (max-width: 359px) {
  .hero__grade {
    grid-template-columns: minmax(0, 57fr) minmax(0, 5fr) minmax(0, 38fr);
    grid-template-areas: "sobre sobre sobre" "titulo titulo arte" "lead lead lead" "botoes botoes botoes";
  }
  .hero__arte { grid-row: 2 / 3; }
  /* abaixo de 360 px a coluna do título tem ~160 px: o display desce para o h2 e a palavra nunca se parte */
  .hero__titulo { font-size: var(--fs-h2); overflow-wrap: normal; }
}
@media (min-width: 480px) {
  .hero__botoes { display: flex; flex-wrap: wrap; }
}
@media (min-width: 1024px) {
  .hero { padding-top: 4.5rem; }
  .hero__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "sobre arte" "titulo arte" "lead arte" "botoes arte";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--esp-6);
  }
  .hero__arte { grid-area: arte; margin: 0; }
  .hero__sobre { max-width: 26rem; margin-bottom: var(--esp-5); }
  .hero__lead { max-width: 32rem; margin-top: var(--esp-5); }
  .hero__botoes { margin-top: var(--esp-6); }
}

/* a ilustração do hero se desenha uma vez (§5.10): contorno primeiro, amarelo por último */
/* o tracejado só existe durante a animação: terminada (ou sem animação), o traço é contínuo */
@keyframes tracar { from { stroke-dasharray: 1.5 1.5; stroke-dashoffset: 1.5; } to { stroke-dasharray: 1.5 1.5; stroke-dashoffset: 0; } }
@keyframes surgir { from { fill-opacity: 0; } to { fill-opacity: 1; } }
.ilustracao--anima :is(.a0, .a1, .a2, .a3, .a4, .a5, .a6, .a7, .a8) {
  animation:
    tracar var(--dur-longa) var(--curva-entrada) backwards,
    surgir var(--dur-curta) var(--curva-entrada) both;
}
.ilustracao--anima .a0 { animation-delay: 0s, calc(var(--dur-longa) * .6); }
.ilustracao--anima .a1 { animation-delay: calc(var(--dur-escalonamento) * 1), calc(var(--dur-escalonamento) * 1 + var(--dur-longa) * .6); }
.ilustracao--anima .a2 { animation-delay: calc(var(--dur-escalonamento) * 2), calc(var(--dur-escalonamento) * 2 + var(--dur-longa) * .6); }
.ilustracao--anima .a3 { animation-delay: calc(var(--dur-escalonamento) * 3), calc(var(--dur-escalonamento) * 3 + var(--dur-longa) * .6); }
.ilustracao--anima .a4 { animation-delay: calc(var(--dur-escalonamento) * 4), calc(var(--dur-escalonamento) * 4 + var(--dur-longa) * .6); }
.ilustracao--anima .a5 { animation-delay: calc(var(--dur-escalonamento) * 5), calc(var(--dur-escalonamento) * 5 + var(--dur-longa) * .6); }
.ilustracao--anima .a6 { animation-delay: calc(var(--dur-escalonamento) * 6), calc(var(--dur-escalonamento) * 6 + var(--dur-longa) * .6); }
.ilustracao--anima .a7 { animation-delay: calc(var(--dur-escalonamento) * 7), calc(var(--dur-escalonamento) * 7 + var(--dur-longa) * .6); }
.ilustracao--anima .a8 { animation-delay: calc(var(--dur-escalonamento) * 8 + var(--dur-longa) * .5), calc(var(--dur-escalonamento) * 8 + var(--dur-longa)); }
@media (prefers-reduced-motion: reduce) {
  .ilustracao--anima * { animation: none !important; stroke-dasharray: none !important; }
}

/* ── vídeo mais recente (§5.3) ─────────────────────────────────────────────────────────────────────────────────── */
.video__card { display: grid; gap: var(--esp-5); }
.thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio); background-color: var(--cor-superficie);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: var(--raio-pilula);
  background-color: var(--cor-sobreposicao); color: var(--cor-pagina);
  transition: background-color var(--dur-micro) var(--curva-suave), color var(--dur-micro) var(--curva-suave);
}
.thumb__play .icone { width: 1.75rem; height: 1.75rem; fill: currentColor; translate: 2px 0; }
@media (hover: hover) and (pointer: fine) {
  .thumb:hover .thumb__play { background-color: var(--cor-destaque); color: var(--cor-sobre-destaque); }
}
.thumb__duracao {
  position: absolute; right: var(--esp-2); bottom: var(--esp-2);
  padding: 2px var(--esp-2); border-radius: var(--raio-pilula);
  background-color: var(--cor-sobreposicao); color: var(--cor-pagina);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-dado); line-height: var(--lh-dado);
  font-variant-numeric: tabular-nums;
}
.video__texto { display: grid; gap: var(--esp-3); justify-items: stretch; }
.video__texto .botao { margin-top: var(--esp-2); }
@media (min-width: 480px) { .video__texto { justify-items: start; } }
@media (min-width: 1024px) {
  .video__card {
    grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); align-items: center; gap: var(--esp-6);
    padding: var(--esp-6); background-color: var(--cor-superficie); border-radius: var(--raio);
  }
}

/* ── temas (§5.4) ──────────────────────────────────────────────────────────────────────────────────────────────── */
.temas__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tema { display: grid; justify-items: center; align-content: start; gap: var(--esp-3); padding: var(--esp-5) var(--esp-3); text-align: center; }
.tema .ilustracao { width: 5rem; }
.tema .nota { display: none; max-width: 24ch; }
.tema:nth-child(odd) { border-right: var(--divisor) solid var(--cor-divisor); }
.tema:nth-child(-n+2) { border-bottom: var(--divisor) solid var(--cor-divisor); }
@media (min-width: 768px) { .tema .nota { display: block; } }
@media (min-width: 1024px) {
  .temas__grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tema { padding: var(--esp-3) var(--esp-5); border-bottom: 0 !important; }
  .tema:not(:last-child) { border-right: var(--divisor) solid var(--cor-divisor); }
}

/* ── diferenciais (§5.5) ───────────────────────────────────────────────────────────────────────────────────────── */
.diferenciais__faixa { padding: var(--esp-5); background-color: var(--cor-superficie); border-radius: var(--raio); }
.diferenciais__faixa h2 { margin-bottom: var(--esp-3); }
.diferencial { display: flex; align-items: flex-start; gap: var(--esp-4); padding-block: var(--esp-4); }
.diferencial + .diferencial { border-top: var(--divisor) solid var(--cor-divisor); }
.diferencial .ilustracao { width: 2.75rem; flex: none; }
.diferencial h3 {
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); text-transform: none;
  font-size: 1.0625rem; line-height: 1.3; margin-bottom: var(--esp-1);
}
.diferencial .nota { color: var(--cor-texto-suave); }
@media (min-width: 1024px) {
  .container--largo { max-width: calc(var(--container) + 2 * var(--esp-5) + 2 * var(--margem)); }
  .diferenciais__faixa { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--esp-6); padding: var(--esp-6) var(--esp-7); }
  .diferenciais__faixa h2 { margin: 0; padding-right: var(--esp-6); border-right: var(--divisor) solid var(--cor-divisor); max-width: calc(11ch + var(--esp-6)); overflow-wrap: normal; }
  .diferenciais__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-6); }
  .diferencial { padding: 0; }
  .diferencial + .diferencial { border-top: 0; }
}

/* ── faixa de inscrição (§5.6) ─────────────────────────────────────────────────────────────────────────────────── */
.inscricao__faixa {
  display: grid; gap: var(--esp-4); padding: var(--esp-5);
  background-color: var(--cor-faixa-inversa); color: var(--cor-sobre-inversa); border-radius: var(--raio);
}
.inscricao__faixa :focus-visible { outline-color: var(--cor-sobre-inversa); }
.inscricao__arte { width: 4rem; }
.inscricao__texto { display: grid; gap: var(--esp-2); }
.inscricao__faixa .botao { width: 100%; }
@media (min-width: 768px) { .inscricao__faixa .botao { width: auto; justify-self: start; } }
@media (min-width: 1024px) {
  .inscricao__faixa { grid-template-columns: minmax(0, 15fr) minmax(0, 50fr) auto; align-items: center; gap: var(--esp-6); padding: var(--esp-6) var(--esp-7); }
  .inscricao__arte { width: 100%; max-width: 10rem; }
  .inscricao__texto { padding-left: var(--esp-6); border-left: var(--divisor) solid rgba(var(--da-cor-fundo-rgb), .3); }
  .inscricao__faixa .botao { justify-self: end; }
}

/* ── contato e parcerias (§5.7) ────────────────────────────────────────────────────────────────────────────────── */
.contato__arte, .contato__abrir { display: none; }
.contato__texto { display: grid; gap: var(--esp-3); }
.contato__acao { margin-top: var(--esp-5); }
.checklist { display: grid; gap: var(--esp-2); }
.checklist li { display: flex; align-items: center; gap: var(--esp-2); }
.checklist__marca {
  display: grid; place-items: center; width: 1.25rem; height: 1.25rem; flex: none;
  border: var(--borda) solid var(--cor-borda); border-radius: var(--raio-pilula); background-color: var(--cor-destaque);
}
.checklist__marca .icone { width: .75rem; height: .75rem; stroke-width: 3; }
.formulario { margin-top: var(--esp-6); }
@media (min-width: 1024px) {
  .contato .container { display: grid; grid-template-columns: minmax(0, 15fr) minmax(0, 50fr) minmax(0, 30fr); column-gap: var(--esp-7); }
  .contato__topo { display: contents; }
  .contato__arte { display: block; align-self: center; }
  .contato__texto { padding-left: var(--esp-7); border-left: var(--divisor) solid var(--cor-divisor); align-self: center; }
  .contato__acao { margin: 0; align-self: center; display: grid; gap: var(--esp-4); justify-items: start; }
  .contato__abrir { display: inline-flex; }
  .formulario { grid-column: 2 / -1; margin-top: var(--esp-7); }
  .js .formulario:not(.aberto) { display: none; }
  .formulario.aberto { animation: abrir var(--dur-curta) var(--curva-entrada) both; }
}
@keyframes abrir { from { opacity: 0; transform: translateY(var(--esp-2)); } to { opacity: 1; transform: none; } }

/* formulário (§4.3) */
.form { display: grid; gap: var(--esp-4); }
.form__linha { display: grid; gap: var(--esp-4); }
@media (min-width: 768px) { .form__linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form__mel { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.campo label {
  display: block; margin-bottom: 6px;
  font-family: var(--da-fonte-legenda); font-weight: var(--fw-rotulo); font-size: var(--fs-rotulo); line-height: var(--lh-rotulo);
}
.campo__controle { position: relative; }
.campo__controle > .icone { position: absolute; left: 14px; top: 14px; color: var(--cor-texto-suave); pointer-events: none; }
.campo__controle > .icone--chevron-down { left: auto; right: 14px; color: var(--cor-texto); }
.campo input, .campo select, .campo textarea {
  display: block; width: 100%; min-height: 3rem; padding: 0 14px 0 44px;
  border: var(--borda) solid var(--cor-borda-campo); border-radius: var(--raio);
  background-color: var(--cor-pagina); color: var(--cor-texto);
  font-family: var(--da-fonte-corpo); font-size: 1rem; line-height: 1.4;
  transition: border-color var(--dur-micro) var(--curva-suave);
}
.campo select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; }
.campo textarea { min-height: 9rem; padding-block: 12px; resize: vertical; }
.campo input::placeholder { color: var(--cor-texto-suave); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .campo :is(input, select, textarea):hover { border-color: var(--cor-texto); } }
.campo :is(input, select, textarea):focus { border-color: var(--cor-texto); }
.campo :is(input, select, textarea):focus-visible { outline: var(--borda-forte) solid var(--cor-foco); outline-offset: 2px; }
.campo--erro :is(input, select, textarea) { border-width: var(--borda-forte); border-color: var(--cor-erro); padding-left: 43px; }
.campo--erro :is(input, select, textarea):hover { border-color: var(--cor-erro); }
.campo__erro {
  display: flex; align-items: flex-start; gap: var(--esp-1); margin-top: 6px; color: var(--cor-erro);
  font-size: var(--fs-mensagem); line-height: var(--lh-mensagem);
}
.campo__erro .icone { width: 1rem; height: 1rem; margin-top: 2px; }
.campo__contador {
  margin-top: 6px; text-align: right; color: var(--cor-texto-suave);
  font-family: var(--da-fonte-dados); font-weight: var(--fw-dado); font-size: var(--fs-dado); font-variant-numeric: tabular-nums;
}
.form__resumo, .form__falha {
  display: flex; align-items: flex-start; gap: var(--esp-2); padding: var(--esp-3) var(--esp-4);
  border: var(--borda) solid var(--cor-erro); border-radius: var(--raio); background-color: var(--cor-pagina);
}
.form__resumo > .icone, .form__falha > .icone { color: var(--cor-erro); margin-top: 2px; }
.form__rodape { display: flex; flex-direction: column-reverse; gap: var(--esp-4); }
.form__nota { display: flex; align-items: flex-start; gap: var(--esp-2); }
.form__nota .icone { width: 1rem; height: 1rem; margin-top: 2px; }
.form__enviar { width: 100%; }
@media (min-width: 768px) {
  .form__rodape { flex-direction: row; align-items: center; justify-content: space-between; }
  .form__nota { max-width: 30rem; }
  .form__enviar { width: auto; flex: none; }
}
/* enviando: um traço de 2 px se desenha sob o rótulo, em loop (§4.2); sem giro */
@keyframes enviando { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.form__enviar [data-enviar-rotulo] { position: relative; }
.form__enviar[aria-busy="true"] [data-enviar-rotulo]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background-color: currentColor; transform-origin: left; animation: enviando var(--dur-longa) linear infinite;
}
@media (prefers-reduced-motion: reduce) { .form__enviar[aria-busy="true"] [data-enviar-rotulo]::after { display: none; } }
.form__sucesso {
  display: flex; align-items: flex-start; gap: var(--esp-4); padding: var(--esp-5);
  background-color: var(--cor-superficie); border: var(--borda) solid var(--cor-sucesso); border-radius: var(--raio);
}
.form__sucesso-icone {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex: none;
  border: var(--borda) solid var(--cor-sucesso); border-radius: var(--raio-pilula); color: var(--cor-sucesso);
}
.form__sucesso h3 { margin-bottom: var(--esp-2); }
.form__sucesso h3:focus { outline: none; }
.form__sucesso p { margin-bottom: var(--esp-3); }

/* ── rodapé (§5.8) ─────────────────────────────────────────────────────────────────────────────────────────────── */
.rodape { border-top: var(--divisor) solid var(--cor-divisor); padding-block: var(--esp-6) var(--esp-7); }
.rodape__linha { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "marca marca" "nav redes"; align-items: center; gap: var(--esp-5) var(--esp-4); }
.rodape__marca { grid-area: marca; display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-3) var(--esp-5); }
.rodape__marca a { display: block; border-radius: var(--raio); }
.rodape__marca .marca { width: 180px; height: auto; }
.rodape__marca p { padding-left: var(--esp-5); border-left: var(--divisor) solid var(--cor-divisor); max-width: 14rem; }
.rodape__nav { grid-area: nav; }
.rodape__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--esp-4); }
.rodape__nav a {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-family: var(--da-fonte-dados); font-weight: var(--fw-nav); font-size: var(--fs-nav); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .rodape__nav a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.rodape__redes { grid-area: redes; display: flex; }
.rodape__credito { margin-top: var(--esp-5); }
@media (min-width: 1024px) {
  .rodape__linha { grid-template-columns: 1fr auto auto; grid-template-areas: "marca nav redes"; gap: var(--esp-6); }
  .rodape__nav ul { gap: var(--esp-6); }
  .rodape__redes { padding-left: var(--esp-6); border-left: var(--divisor) solid var(--cor-divisor); }
}