/* Criado, desenvolvido, testado, abandonado, rejeitado, recuperado e testado fonte vozes da minha cabeça - William Tassi Moreira */
/* ACCTNN — Aparência (versão 26): o desenho de cada opção dos modelos (dados/aparencias.js).
   As marcas data-ap-* ficam na página inteira (html) ou só na caixa da prévia do painel.
   Sem marca nenhuma, a página fica exatamente como sempre foi (modelo "Faixa do Encontro"). */

/* ---------- letra dos títulos ---------- */
[data-ap-fonte="grotesca"] { --f-titulo: "Public Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
[data-ap-fonte="grotesca"] :is(h1, h2, h3) { letter-spacing: -.02em; font-weight: 800; }
[data-ap-fonte="serifa"] { --f-titulo: "Lora", Georgia, "Times New Roman", serif; }
[data-ap-fonte="serifa"] :is(h1, h2, h3) { font-weight: 700; letter-spacing: -.01em; }
[data-ap-fonte="arredondada"] { --f-titulo: "Nunito", "Segoe UI", Roboto, Arial, sans-serif; --f-texto: "Nunito", "Segoe UI", Roboto, Arial, sans-serif; }
[data-ap-fonte="arredondada"] :is(h1, h2, h3) { font-weight: 900; letter-spacing: -.01em; }
/* letras mais largas que a condensada: títulos grandes um pouco menores, para não estourar no celular */
[data-ap-fonte]:not([data-ap-fonte="condensada"]) h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.06; }
[data-ap-fonte]:not([data-ap-fonte="condensada"]) h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.12; }
[data-ap-fonte]:not([data-ap-fonte="condensada"]) .abertura__numeros strong { font-size: 2rem; }

/* a sigla redonda da associação continua na letra estreita, para caber no círculo */
[data-ap-fonte] .ent-sigla { font-family: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", Impact, sans-serif; }

/* ---------- títulos em maiúsculas ou não ---------- */
[data-ap-caixa="normal"] :is(h1, h2, .janela h3, .nivel h4, .cota__cab b, .criativo__titulo) { text-transform: none; }

/* ---------- cantos ---------- */
[data-ap-raio="0"] { --raio: 0px; --raio-g: 0px; }
[data-ap-raio="2"] { --raio: 10px; --raio-g: 20px; }
[data-ap-raio="3"] { --raio: 14px; --raio-g: 28px; }

/* ---------- sombra ---------- */
[data-ap-sombra="0"] { --sombra: none; }
[data-ap-sombra="2"] { --sombra: 0 2px 4px rgba(0,0,0,.08), 0 18px 40px -16px rgba(0,0,0,.35); }

/* ---------- abertura (portal e site da associação) ---------- */
[data-ap-abertura="centro"] .abertura__grade { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--e-5); }
[data-ap-abertura="centro"] .abertura__selo { order: -1; max-width: 170px; }
[data-ap-abertura="centro"] .abertura__texto { justify-items: center; max-width: 820px; }
[data-ap-abertura="centro"] .abertura__texto > p, [data-ap-abertura="centro"] .abertura__legenda { margin-inline: auto; }
[data-ap-abertura="centro"] .abertura :is(.linha-acoes, .abertura__numeros) { justify-content: center; }
[data-ap-abertura="centro"] .abertura .faixa-convite { text-align: left; width: 100%; }
[data-ap-abertura="centro"] .ent-heroi .env { text-align: center; }
[data-ap-abertura="centro"] .ent-heroi :is(h1, p) { margin-inline: auto; }
[data-ap-abertura="centro"] .ent-heroi .linha-acoes { justify-content: center; }

/* ---------- faixa do encontro ---------- */
[data-ap-faixa="fina"] :is(.faixa--alta, .faixa:not(.faixa--fina)) { height: 22px; }
[data-ap-faixa="fina"] .ent-faixa { height: 8px; }
[data-ap-faixa="sem"] :is(.faixa, .ent-faixa, .janela__faixa) { display: none; }
[data-ap-faixa="sem"] .topo { border-bottom-width: 2px; }

/* ---------- espaço entre as partes ---------- */
[data-ap-espaco="compacto"] { --e-6: 1.5rem; --e-7: 2.2rem; --e-8: 3rem; }
[data-ap-espaco="amplo"] { --e-6: 2.5rem; --e-7: 3.8rem; --e-8: 6rem; }

/* ---------- botões ---------- */
[data-ap-botao="pilula"] :is(.btn, .btn-icone, .entrada, .campo input, .campo select) { border-radius: 999px; }
[data-ap-botao="pilula"] .campo textarea { border-radius: var(--raio-g); }

/* ---------- topo colorido (no computador; no celular o menu aberto continua claro) ---------- */
[data-ap-topo="cor"] .topo { background: var(--rio); border-bottom-color: transparent; color: var(--sobre-rio); }
[data-ap-topo="cor"] .topo :is(.marca, .marca:hover, .marca__nome small) { color: var(--sobre-rio); }
[data-ap-topo="cor"] .topo .btn-icone { background: transparent; color: var(--sobre-rio); border-color: color-mix(in srgb, var(--sobre-rio) 35%, transparent); }
[data-ap-topo="cor"] .topo .btn-icone:hover { background: color-mix(in srgb, var(--sobre-rio) 14%, transparent); }
@media (min-width: 1241px) {
  [data-ap-topo="cor"] .topo .menu a { color: color-mix(in srgb, var(--sobre-rio) 82%, transparent); }
  [data-ap-topo="cor"] .topo .menu a:hover { color: var(--sobre-rio); background: color-mix(in srgb, var(--sobre-rio) 14%, transparent); }
  [data-ap-topo="cor"] .topo .menu a[aria-current="page"] { color: var(--sobre-rio); box-shadow: inset 0 -3px 0 var(--sol); }
}

/* ---------- cartões ---------- */
[data-ap-cartao="sombra"] :is(.cartao, .clube__item, .cota) { box-shadow: var(--sombra); border-color: color-mix(in srgb, var(--linha) 55%, transparent); }
[data-ap-cartao="chapado"] :is(.cartao, .clube__item, .cota) { background: var(--papel-2); border-color: transparent; }
[data-ap-cartao="chapado"] .cartao .cartao { background: var(--papel); }

/* =================== painel › Aparência =================== */
.ap-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--e-5); align-items: start; }
@media (max-width: 1000px) { .ap-grade { grid-template-columns: minmax(0, 1fr); } }
.ap-lado { display: grid; gap: var(--e-4); min-width: 0; }
.ap-estilos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.ap-estilo { display: grid; gap: .35rem; padding: .5rem; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); cursor: pointer; text-align: left; font-size: var(--t-xs); font-weight: 600; min-width: 0; }
.ap-estilo[aria-checked="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--sol); }
.ap-estilo__cores { display: grid; grid-template-columns: 2fr 1.4fr 1fr 1fr; height: 26px; border-radius: 4px; overflow: hidden; }
.ap-modelos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .5rem; }
.ap-modelo { display: grid; gap: .2rem; padding: .6rem .7rem; border: 2px solid var(--linha); border-radius: var(--raio); background: var(--papel); color: var(--tinta); cursor: pointer; text-align: left; min-width: 0; }
.ap-modelo b { font-size: var(--t-sm); }
.ap-modelo span { font-size: var(--t-xs); color: var(--tinta-2); }
.ap-modelo[aria-checked="true"] { border-color: var(--tinta); box-shadow: 0 0 0 2px var(--sol); }
.ap-convites { display: grid; gap: .5rem; }
.ap-convite { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem; align-items: start; padding: .7rem .8rem; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--papel); cursor: pointer; }
.ap-convite b { display: block; font-size: var(--t-sm); }
.ap-convite small { color: var(--tinta-2); font-size: var(--t-xs); display: block; }
/* chave liga e desliga */
.chave { appearance: none; -webkit-appearance: none; width: 46px; height: 26px; border-radius: 999px; background: var(--linha); position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; }
.chave::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .15s; }
.chave:checked { background: var(--rio); }
.chave:checked::after { transform: translateX(20px); }
.chave:focus-visible { outline: 3px solid var(--sol); outline-offset: 2px; }
.ap-alvo { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; }
.ap-alvo .campo { min-width: min(320px, 100%); flex: 1; }
.ap-fixa { position: sticky; top: 84px; display: grid; gap: var(--e-3); min-width: 0; }
@media (max-width: 1000px) { .ap-fixa { position: static; } }

/* prévia: a página de verdade, em miniatura, dentro de uma moldura (não mistura com o visual do painel) */
.ap-moldura { position: relative; overflow: hidden; border: 1px solid var(--linha); border-radius: var(--raio-g); background: var(--papel-2); }
.ap-moldura iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: transparent; }
.ap-tamanhos { display: flex; gap: .4rem; flex-wrap: wrap; }