/* ═════════════════════════════════════════════
   CONTEÚDO INFINITO · PLATAFORMA (protótipo v2)
   ═════════════════════════════════════════════ */

@font-face { font-family: 'Neue Haas'; src: url('fonts/NeueHaasDisplayRoman.ttf'); font-weight: 400; }
@font-face { font-family: 'Neue Haas'; src: url('fonts/NeueHaasDisplayBold.ttf'); font-weight: 700; }
@font-face { font-family: 'PP Editorial'; src: url('fonts/PPEditorialNew-Regular-BF644b214ff145f.otf'); font-weight: 400; }
@font-face { font-family: 'PP Editorial'; src: url('fonts/PPEditorialNew-Italic-BF644b214fb0c0a.otf'); font-weight: 400; font-style: italic; }

:root {
  --preto: #141414;
  --preto-2: #1c1c1c;
  --preto-3: #242424;
  --creme: #FAFFED;
  --creme-55: rgba(250, 255, 237, .55);
  --creme-25: rgba(250, 255, 237, .18);
  --lima: #CCFF31;
  --ui-sans: 'Neue Haas', 'Helvetica Neue', sans-serif;
  --ui-serif: 'PP Editorial', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--preto);
  color: var(--creme);
  font-family: var(--ui-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; }
textarea, input, select { font-family: inherit; }
.oculto { display: none !important; }
em { font-family: var(--ui-serif); font-style: italic; font-weight: 400; }

.tela { display: none; min-height: 100vh; }
.tela.ativa { display: block; }

/* ── topo / botões / campos ────────────── */
.topo { display: flex; align-items: center; gap: 24px; padding: 20px 40px; border-bottom: 1px solid var(--creme-25); }
.topo-logo { height: 26px; width: auto; }
.topo-rota { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme-55); }
.topo-nav { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.link { background: none; border: none; color: var(--creme-55); font-size: 13px; letter-spacing: .06em; }
.link:hover { color: var(--creme); }

.btn { border: none; border-radius: 999px; padding: 14px 28px; font-size: 14px; font-weight: 700; letter-spacing: .04em; transition: transform .12s ease, opacity .12s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primario { background: var(--lima); color: var(--preto); }
.btn-fantasma { background: transparent; color: var(--creme); border: 1px solid var(--creme-25); font-weight: 400; }
.btn-fantasma:hover { border-color: var(--creme-55); }
.btn-mini { padding: 10px 18px; font-size: 12.5px; }
.btn-micro { padding: 6px 12px; font-size: 11.5px; }

.campo { margin-bottom: 18px; }
.campo label, .mini-label { display: block; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme-55); margin-bottom: 8px; }
.campo input, textarea, select {
  width: 100%; background: var(--preto-2); border: 1px solid var(--creme-25);
  border-radius: 10px; padding: 13px 16px; color: var(--creme); font-size: 15px;
  outline: none; resize: vertical;
}
.campo input:focus, textarea:focus, select:focus { border-color: var(--lima); }
select { appearance: none; }

.titulo-tela { font-size: 40px; font-weight: 400; letter-spacing: -.01em; }
.sub-tela { color: var(--creme-55); font-size: 15px; margin: 10px 0 32px; max-width: 620px; line-height: 1.55; }
.titulo-secao { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme-55); margin-bottom: 16px; }
.nota-proto { font-size: 11.5px; color: var(--creme-55); letter-spacing: .04em; }

/* ── entrar ────────────────────────────── */
#tela-entrar.ativa { display: grid; place-items: center; }
.entrar-box { width: 400px; text-align: center; }
.entrar-tabs { display: flex; gap: 8px; margin-bottom: 24px; background: var(--preto-2); border-radius: 999px; padding: 5px; }
.entrar-tab { flex: 1; border: none; border-radius: 999px; padding: 11px 0; background: transparent; color: var(--creme-55); font-size: 13.5px; }
.entrar-tab.ativa { background: var(--preto-3); color: var(--creme); font-weight: 700; }
.boas-vindas { background: rgba(204,255,49,.12); border: 1px solid rgba(204,255,49,.4); border-radius: 10px; padding: 13px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 20px; color: var(--creme); }
.aviso-hubla { background: rgba(204, 255, 49, .08); border: 1px solid rgba(204, 255, 49, .35); border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.55; text-align: left; margin-bottom: 18px; color: var(--creme); }
.aviso-hubla b { color: var(--lima); }
.entrar-erro { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #ff8b7a; text-align: left; background: rgba(255, 100, 80, .07); border: 1px solid rgba(255, 100, 80, .25); border-radius: 10px; padding: 12px 14px; }
.entrar-logo { height: 34px; margin-bottom: 36px; }
.entrar-titulo { font-size: 44px; font-weight: 400; margin-bottom: 6px; }
.entrar-sub { color: var(--creme-55); margin-bottom: 36px; font-size: 15px; }
.entrar-box .campo { text-align: left; }
.entrar-box .btn { width: 100%; margin: 10px 0 18px; }

/* ── kit ───────────────────────────────── */
.kit-wrap { display: grid; grid-template-columns: 520px 1fr; gap: 60px; padding: 48px 40px; max-width: 1200px; margin: 0 auto; }
.kit-preview { display: flex; flex-direction: column; align-items: center; padding-top: 30px; }
.kit-preview-label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--creme-55); margin-bottom: 16px; }
.kit-avatar-linha { display: flex; align-items: center; gap: 16px; }
.kit-avatar-mini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--preto-3); }

/* ── início ────────────────────────────── */
.miolo { padding: 48px 40px; max-width: 1200px; margin: 0 auto; }
.categorias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 56px; }
.cat-card { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 16px; padding: 28px; text-align: left; color: var(--creme); display: flex; flex-direction: column; gap: 12px; min-height: 210px; transition: border-color .15s ease, transform .15s ease; }
.cat-card:not(.desativado):hover { border-color: var(--lima); transform: translateY(-2px); }
.cat-card.desativado { opacity: .45; cursor: default; }
.cat-tag { align-self: flex-start; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--preto-3); border-radius: 999px; padding: 5px 12px; color: var(--creme-55); }
.cat-nome { font-size: 26px; }
.cat-desc { font-size: 13.5px; color: var(--creme-55); line-height: 1.5; flex: 1; }
.cat-acao { font-size: 13px; color: var(--lima); letter-spacing: .04em; }

.meus-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.meu-item { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 12px; padding: 18px 20px; color: var(--creme); text-align: left; display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; cursor: pointer; }
.meu-item:hover { border-color: var(--creme-55); }
.mi-info { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.mi-excluir { background: none; border: none; color: var(--creme-55); font-size: 11px; letter-spacing: .06em; padding: 2px 0; white-space: nowrap; }
.mi-excluir:hover { color: #ff8b7a; }
.mi-excluir-confirma { color: #ff8b7a; font-weight: 700; }
.meu-item .mi-titulo { font-size: 15px; line-height: 1.35; }
.meu-item .mi-meta { font-size: 11.5px; color: var(--creme-55); letter-spacing: .06em; }
.meus-vazio { color: var(--creme-55); font-size: 14px; }

/* ── galeria ───────────────────────────── */
.galeria { display: flex; gap: 24px; flex-wrap: wrap; }
.modelo-card { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 16px; padding: 18px; width: 300px; color: var(--creme); display: flex; flex-direction: column; gap: 12px; text-align: left; transition: border-color .15s ease, transform .15s ease; }
.modelo-card:hover { border-color: var(--lima); transform: translateY(-2px); }
.modelo-card .mc-nome { font-size: 19px; display: flex; align-items: baseline; gap: 10px; }
.modelo-card .mc-fonte { font-size: 10.5px; color: var(--creme-55); letter-spacing: .1em; text-transform: uppercase; }
.modelo-card .mc-padrao { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; background: var(--lima); color: var(--preto); border-radius: 999px; padding: 3px 9px; font-weight: 700; margin-right: 4px; }
.modelo-card .mc-desc { font-size: 12.5px; color: var(--creme-55); line-height: 1.5; }
.modelo-card .mc-acao { font-size: 13px; color: var(--lima); }

.mini-slide { width: 264px; height: 330px; position: relative; overflow: hidden; border-radius: 6px; background: var(--preto-3); }
.mini-slide .slide { transform: scale(.244); transform-origin: top left; }
.kit-preview .mini-slide { width: 324px; height: 405px; }
.kit-preview .mini-slide .slide { transform: scale(.3); }

/* ── colar ─────────────────────────────── */
.colar-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; padding: 48px 40px; max-width: 1240px; margin: 0 auto; }
#colar-texto { min-height: 420px; font-size: 13.5px; line-height: 1.6; }
.colar-acoes { display: flex; gap: 14px; margin-top: 18px; }
.colar-resultado { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 16px; padding: 26px; }
.colar-chips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; max-height: 420px; overflow-y: auto; }
.chip { display: flex; gap: 12px; align-items: baseline; background: var(--preto-3); border-radius: 8px; padding: 10px 14px; font-size: 13px; }
.chip .c-n { color: var(--lima); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; white-space: nowrap; }
.chip .c-t { color: var(--creme-55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip.falta .c-n { color: #ff7d6b; }

/* ── editor ────────────────────────────── */
.editor-topo { position: sticky; top: 0; background: var(--preto); z-index: 20; }
.editor-grid { display: grid; grid-template-columns: 148px 1fr 360px; gap: 0; height: calc(100vh - 77px); }
.trilho { overflow-y: auto; padding: 18px 14px; border-right: 1px solid var(--creme-25); display: flex; flex-direction: column; gap: 12px; align-items: center; }
.thumb { width: 96px; height: 120px; border-radius: 4px; overflow: hidden; position: relative; border: 2px solid transparent; background: var(--preto-2); padding: 0; flex: none; }
.thumb .slide { transform: scale(0.088888); transform-origin: top left; pointer-events: none; }
.thumb.ativa { border-color: var(--lima); }
.thumb .t-n { position: absolute; bottom: 4px; right: 6px; z-index: 3; font-size: 10px; color: #fff; background: rgba(20,20,20,.75); padding: 2px 6px; border-radius: 4px; letter-spacing: .08em; }
.thumb-legenda { width: 96px; height: 54px; border-radius: 4px; border: 2px solid transparent; background: var(--preto-2); color: var(--creme-55); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; flex: none; }
.thumb-legenda.ativa { border-color: var(--lima); color: var(--creme); }
.btn-add-slide { width: 96px; height: 44px; border-radius: 4px; border: 1px dashed var(--creme-25); background: none; color: var(--creme-55); font-size: 20px; flex: none; }
.btn-add-slide:hover { border-color: var(--lima); color: var(--lima); }

.palco { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; overflow: hidden; }
#palco-slide { position: relative; border-radius: 4px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
#palco-slide.arrastavel { cursor: grab; }
#palco-slide.arrastando { cursor: grabbing; }
.palco-dica { font-size: 11.5px; color: var(--creme-55); letter-spacing: .05em; max-width: 560px; text-align: center; }

.legenda-card { width: 500px; max-height: 620px; overflow-y: auto; background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 12px; padding: 28px; font-size: 13.5px; line-height: 1.65; color: var(--creme); white-space: pre-wrap; }

.painel { border-left: 1px solid var(--creme-25); overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 20px; }
.painel-secao { display: flex; flex-direction: column; gap: 10px; }
.painel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.painel-role { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--lima); }
.contador { font-size: 11px; color: var(--creme-55); letter-spacing: .06em; }
.painel textarea { font-size: 13.5px; line-height: 1.6; }
.foto-dica { font-size: 12px; color: var(--creme-55); line-height: 1.5; font-style: italic; font-family: var(--ui-serif); }
.foto-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.foto-upload { display: inline-flex; align-items: center; }
.campo-zoom label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-55); display: block; margin-bottom: 6px; }
.zoom-hint { text-transform: none; letter-spacing: .02em; }
input[type="range"] { width: 100%; accent-color: var(--lima); }

.slide-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.campo-slot { margin-bottom: 12px; }
.campo-slot label { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--creme-55); margin-bottom: 6px; }
.campo-slot textarea { min-height: 40px; }

/* selo de salvo */
.selo-salvo { font-size: 11.5px; letter-spacing: .08em; color: var(--lima); opacity: 0; transition: opacity .25s ease; }
.selo-salvo.visivel { opacity: .85; }

/* ajuda e avisos */
.ajuda-bloco { margin-top: 22px; border: 1px solid var(--creme-25); border-radius: 12px; padding: 14px 18px; }
.ajuda-bloco summary { cursor: pointer; font-size: 13.5px; color: var(--creme); letter-spacing: .02em; }
.ajuda-bloco[open] summary { margin-bottom: 12px; color: var(--lima); }
.ajuda-passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--creme-55); }
.ajuda-passos b { color: var(--creme); }
.colar-aviso { font-size: 12.5px; line-height: 1.55; color: var(--creme-55); background: rgba(204,255,49,.07); border: 1px solid rgba(204,255,49,.28); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; }
.colar-aviso b { color: var(--lima); }

.aviso-tela { display: none; position: fixed; inset: 0; z-index: 300; background: var(--preto); place-items: center; padding: 28px; }
.aviso-tela.mostrar { display: grid; }
.aviso-tela-box { max-width: 380px; text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.aviso-tela-box h3 { font-size: 26px; font-weight: 400; }
.aviso-tela-box p { font-size: 14.5px; line-height: 1.6; color: var(--creme-55); }

/* tipografia */
.tipo-grupo { display: flex; flex-direction: column; gap: 10px; background: var(--preto-2); border-radius: 10px; padding: 13px 14px; }
.tipo-grupo-nome { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme); opacity: .85; }
.tipo-controle { display: flex; flex-direction: column; gap: 6px; }
.tipo-controle label { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-55); }
.tipo-valor { color: var(--lima); letter-spacing: .04em; font-weight: 700; }

/* colar imagem */
.slot-foto { border: 1px solid transparent; border-radius: 10px; transition: border-color .12s ease; }
.slot-foto.slot-ativo { border-color: rgba(204,255,49,.4); background: rgba(204,255,49,.04); padding: 10px; margin: -2px; }
.slot-marca { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-55); }
.slot-ativo .slot-marca { color: var(--lima); }
.colar-alvo { display: flex; align-items: center; gap: 11px; border: 1px dashed var(--creme-25); border-radius: 10px; padding: 11px 13px; font-size: 12px; line-height: 1.45; color: var(--creme-55); }
.colar-alvo b { color: var(--creme); font-weight: 700; }
.colar-icone { font-size: 17px; color: var(--lima); flex: none; }
.colar-alt { font-size: 11px; opacity: .8; }
#palco-slide.soltar-aqui { outline: 3px dashed var(--lima); outline-offset: -6px; }
#palco-slide.soltar-aqui::after { content: 'Solte a imagem aqui'; position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(20,20,20,.62); color: var(--lima); font-size: 17px; letter-spacing: .08em; text-transform: uppercase; }

.avatar-bloco { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.avatar-preview { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; background: var(--preto-3); border: 1px solid var(--creme-25); flex: none; display: grid; place-items: center; }
.avatar-preview span { font-size: 9.5px; color: var(--creme-55); letter-spacing: .04em; text-align: center; }
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-acoes { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.fonte-modos { display: flex; gap: 8px; flex-wrap: wrap; }
.fonte-modo { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 999px; padding: 8px 16px; color: var(--creme-55); font-size: 12px; }
.fonte-modo.ativa { border-color: var(--lima); color: var(--creme); }
.painel-divisor { border-top: 1px solid var(--creme-25); margin: 4px 0; }
.fonte-lista { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--creme-55); }
.fonte-lista button { text-align: left; background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 8px; padding: 8px 12px; color: var(--creme); font-size: 12.5px; }

/* ── painel do mentor ──────────────────── */
.adm-metricas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 40px; }
.adm-card { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 14px; padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.adm-num { font-size: 34px; font-weight: 700; color: var(--lima); }
.adm-rotulo { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--creme-55); }
.adm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 44px; }
.adm-bloco { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 14px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.adm-mini { font-size: 12px; color: var(--creme-55); line-height: 1.5; }
.adm-lista-emails { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.adm-email-linha { display: flex; gap: 12px; align-items: baseline; font-size: 13px; background: var(--preto-3); border-radius: 8px; padding: 8px 12px; }
.adm-email-linha span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.adm-tag-admin { color: var(--lima); font-size: 10.5px; letter-spacing: .08em; }
.adm-tag { display: inline-block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.adm-tag-ok { background: rgba(204,255,49,.16); color: var(--lima); }
.adm-tag-alerta { background: rgba(255,120,100,.14); color: #ff8b7a; }
.adm-tag-neutro { background: var(--preto-3); color: var(--creme-55); }
.adm-tabela-wrap { overflow-x: auto; border: 1px solid var(--creme-25); border-radius: 14px; }
.adm-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adm-tabela th { text-align: left; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-55); padding: 14px 16px; border-bottom: 1px solid var(--creme-25); }
.adm-tabela td { padding: 13px 16px; border-bottom: 1px solid rgba(250, 255, 237, .07); vertical-align: top; }
.adm-tabela tr:last-child td { border-bottom: none; }
.adm-feedback { border-bottom: 1px solid rgba(250, 255, 237, .09); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.adm-feedback:last-child { border-bottom: none; }
.adm-feedback p { font-size: 13.5px; line-height: 1.5; }
.adm-feedback-cab { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.adm-estrelas { color: var(--lima); letter-spacing: .1em; }

/* ── feedback do aluno ─────────────────── */
.fb-notas { display: flex; gap: 6px; justify-content: center; }
.fb-notas button { background: none; border: none; font-size: 38px; color: var(--creme-25); transition: color .12s ease, transform .12s ease; line-height: 1; }
.fb-notas button:hover { transform: scale(1.12); }
.fb-notas button.ativa { color: var(--lima); }

/* ── overlay export / toast ────────────── */
.overlay { position: fixed; inset: 0; background: rgba(10,10,10,.82); z-index: 100; display: grid; place-items: center; backdrop-filter: blur(6px); }
.overlay-box { background: var(--preto-2); border: 1px solid var(--creme-25); border-radius: 16px; padding: 40px; width: 420px; text-align: center; display: flex; flex-direction: column; gap: 18px; }
.overlay-box h3 { font-weight: 400; font-size: 20px; }
.barra { height: 6px; background: var(--preto-3); border-radius: 99px; overflow: hidden; }
#export-barra { height: 100%; width: 0%; background: var(--lima); transition: width .2s ease; }
#palco-export { position: fixed; left: -3000px; top: 0; z-index: -1; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--lima); color: var(--preto); font-size: 13.5px; font-weight: 700; padding: 12px 22px; border-radius: 999px; z-index: 200; }

/* ═════════════════════════════════════════════
   SLIDES · base comum 1080 × 1350
   ═════════════════════════════════════════════ */
.slide { width: 1080px; height: 1350px; position: relative; overflow: hidden; font-family: var(--f-texto); }

.sl-foto { position: relative; overflow: hidden; }
.sl-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sl-foto-vazia { display: grid; place-items: center; }
.sl-foto-vazia span { font-size: 26px; letter-spacing: .12em; text-transform: uppercase; opacity: .45; border: 1.5px dashed currentColor; border-radius: 12px; padding: 18px 32px; }

.sl-avatar { width: 62px; height: 62px; border-radius: 50%; flex: none; overflow: hidden; background: conic-gradient(#feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75); padding: 3px; display: inline-block; }
.sl-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.sl-avatar:not(:has(img))::after { content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.sl-selo { width: 38px; height: 38px; flex: none; }

/* ═══ T1 · NEON ═══ */
.tpl-t1 { background: #03060c; color: #fff; }
.t1-cab, .t1-rod { position: absolute; left: 64px; right: 64px; display: flex; justify-content: space-between; z-index: 6; font-size: 26px; color: #9a9da3; }
.t1-cab { top: 46px; }
.t1-rod { bottom: 46px; }
.t1-cab-centro, .t1-rod-centro { justify-content: center; }
.t1-linha { position: absolute; top: 118px; left: 0; right: 0; height: 2px; background: #16161a; z-index: 6; }
.t1-foto-capa { position: absolute; top: 0; left: 0; right: 0; height: 56%; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); color: #5b6472; }
.t1-foto-capa.sl-foto-vazia { background: #0b1018; }
.t1-capa-texto { position: absolute; top: 53%; bottom: 100px; left: 66px; right: 66px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; text-align: center; z-index: 4; }
.t1-titulo-capa { font-size: 64px; font-weight: 700; line-height: 1.16; letter-spacing: -.005em; }
.t1-azul { color: #2c7df8; }
.t1-sub { font-size: 30px; font-weight: 500; line-height: 1.35; max-width: 700px; color: #eceff3; }
.t1-sub-cinza { color: #b9bcc2; }
.t1-miolo-ti { position: absolute; top: 118px; bottom: 60px; left: 64px; right: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 56px; text-align: center; }
.t1-titulo-c { font-size: 48px; font-weight: 700; line-height: 1.3; max-width: 900px; }
.t1-foto-janela { width: 100%; height: 500px; border-radius: 4px; color: #5b6472; background: #0b1018; }
.t1-legenda { font-size: 30px; line-height: 1.45; color: #d9dade; text-decoration: underline; text-underline-offset: 7px; max-width: 860px; }
.tpl-t1.tipo-textoClaro { background: #ffffff; color: #060606; }
.tpl-t1.tipo-textoClaro .t1-rod { color: #8b8b8b; }
.t1-miolo-claro { position: absolute; top: 0; bottom: 120px; left: 64px; right: 64px; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.t1-titulo-e { font-size: 58px; font-weight: 700; line-height: 1.18; letter-spacing: -.01em; }
.t1-corpo { font-size: 35px; line-height: 1.5; color: #202020; white-space: pre-line; }
.t1-corpo-c { color: #c7c9ce; text-align: center; max-width: 880px; }
.tpl-t1.tipo-textoClaro .t1-foto-janela { background: #ececec; color: #9a9a9a; height: 460px; }
.t1-miolo-te { position: absolute; top: 118px; bottom: 120px; left: 90px; right: 90px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; text-align: center; }

/* ═══ T2 · EDITORIAL ═══ */
.tpl-t2 { background: #f2f0ec; color: #101010; }
.t2-cab { position: absolute; top: 44px; left: 0; right: 0; z-index: 6; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; font-family: var(--f-texto); }
.t2-foto-cheia { position: absolute; inset: 0; color: #777; }
.t2-foto-cheia.sl-foto-vazia { background: #d8d4cc; }
.t2-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, transparent 26%, transparent 46%, rgba(0,0,0,.52) 100%); }
.tpl-t2.tipo-fotoTexto { color: #fff; }
.tpl-t2.tipo-fotoTexto .t2-cab { color: #f4f2ee; }
.t2-miolo-foto { position: absolute; left: 56px; right: 56px; bottom: 110px; z-index: 4; display: flex; flex-direction: column; gap: 36px; align-items: center; text-align: center; }
.t2-titulo { font-family: var(--f-display); font-weight: 400; font-size: 88px; line-height: .98; letter-spacing: -.005em; }
.tpl-t2.tipo-fotoTexto .t2-titulo { text-shadow: 0 4px 34px rgba(0,0,0,.5); }
.t2-titulo-centro { text-align: center; }
.t2-titulo-esq { text-align: left; }
.t2-sub { font-size: 33px; font-weight: 700; line-height: 1.35; max-width: 760px; text-shadow: 0 2px 18px rgba(0,0,0,.45); }
.t2-miolo-claro { position: absolute; top: 150px; bottom: 70px; left: 56px; right: 56px; display: flex; flex-direction: column; justify-content: flex-start; gap: 44px; }
.t2-miolo-texto { justify-content: center; }
.t2-titulo-esq { font-size: 92px; }
.t2-foto-janela { width: 100%; height: 590px; color: #8a867e; background: #e0dcd4; }
.t2-corpo { font-size: 40px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; white-space: pre-line; }
.tpl-t2.tipo-escuroTexto { background: #080808; color: #f2f0ec; }
.t2-miolo-escuro { position: absolute; top: 150px; bottom: 90px; left: 56px; right: 56px; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.t2-chamada { font-size: 40px; font-weight: 700; }
.t2-chamada:empty { display: none; }
.t2-corpo-claro { font-weight: 400; color: #d9d6d0; font-size: 36px; line-height: 1.45; }

/* ═══ T3 · VIRAL ═══ */
.tpl-t3 { background: #ff4d00; color: #fff; }
.t3-cab { position: absolute; top: 34px; left: 40px; right: 40px; z-index: 6; display: flex; justify-content: space-between; font-size: 21px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; }
.t3-cab span:nth-child(2) { margin-left: auto; margin-right: 60px; }
.t3-foto-cheia { position: absolute; inset: 0; color: #999; }
.t3-foto-cheia.sl-foto-vazia { background: #2b2b2b; }
.t3-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 24%, transparent 50%, rgba(0,0,0,.6) 100%); }
.t3-miolo-capa { position: absolute; left: 44px; right: 44px; bottom: 60px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.t3-kicker { font-size: 30px; font-weight: 800; letter-spacing: .02em; }
.t3-kicker:empty { display: none; }
.t3-kicker-baixo { font-weight: 700; font-size: 30px; }
.t3-titulo { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; font-size: 106px; line-height: .92; letter-spacing: .012em; }
.t3-titulo-branco { color: #fff; -webkit-text-stroke: 8px #000; paint-order: stroke fill; text-shadow: 0 12px 28px rgba(0,0,0,.4); }
.t3-titulo-preto { color: #0d0d0d; }
.t3-perfil { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.t3-arroba { font-size: 34px; font-weight: 700; }
.t3-miolo-laranja { position: absolute; top: 100px; bottom: 60px; left: 40px; right: 40px; display: flex; flex-direction: column; gap: 40px; }
.t3-miolo-texto { justify-content: center; }
.t3-titulo-maior { font-size: 128px; }
.t3-foto-janela { width: 100%; height: 470px; border-radius: 10px; color: #ffd9c7; background: #d63f00; }
.t3-corpo { font-size: 36px; font-weight: 700; line-height: 1.4; white-space: pre-line; }
.t3-corpo-maior { font-size: 40px; }

/* ═══ T4 · FUTURISTA ═══ */
.tpl-t4 { background: #121212; color: #efefef; }
.tpl-t4::after { content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); opacity: .16; mix-blend-mode: screen; }
.t4-cab { position: absolute; top: 34px; left: 40px; right: 40px; z-index: 6; display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #d3d3d3; }
.t4-foto-cheia { position: absolute; inset: 0; color: #888; }
.t4-foto-cheia.sl-foto-vazia { background: #1e1e1e; }
.t4-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.3) 0%, transparent 26%, transparent 44%, rgba(0,0,0,.72) 100%); }
.t4-miolo { position: absolute; top: 150px; bottom: 190px; left: 48px; right: 48px; z-index: 4; display: flex; flex-direction: column; gap: 60px; }
.t4-miolo-capa { justify-content: flex-end; gap: 34px; }
.t4-miolo-foto { gap: 40px; }
.t4-perfil { display: flex; align-items: center; gap: 16px; }
.t4-perfil .sl-avatar { width: 56px; height: 56px; }
.t4-arroba { font-size: 32px; font-weight: 700; color: #fff; }
.t4-titulo { font-size: 88px; font-weight: 800; line-height: .99; letter-spacing: -.02em; color: #ff4a1d; }
.t4-sub { font-size: 40px; font-weight: 700; line-height: 1.25; color: #f2f2f2; }
.t4-corpo { font-size: 38px; font-weight: 500; line-height: 1.5; color: #ececec; white-space: pre-line; }
.t4-foto-janela { width: 100%; height: 480px; border-radius: 8px; color: #9a9a9a; background: #1e1e1e; }
.t4-barra { position: absolute; left: 40px; right: 40px; bottom: 42px; z-index: 6; height: 86px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.3); background: rgba(8,8,8,.55); display: flex; align-items: center; justify-content: space-between; padding: 0 42px; }
.t4-ast { font-size: 46px; font-weight: 800; color: #fff; line-height: 1; }
.t4-arraste { font-size: 23px; font-weight: 700; letter-spacing: .16em; color: #fff; }

/* ═══ T5 · GRADIENTE ═══ */
.tpl-t5 { background: #f3f3f3; color: #141414; }
.tpl-t5.tipo-gradiente { background: linear-gradient(180deg, #fc0001 0%, #d20310 32%, #8c0a1a 58%, #2a0a20 86%, #11091c 100%); color: #fff; }
.t5-miolo-grad { position: absolute; top: 120px; bottom: 150px; left: 80px; right: 80px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 48px; text-align: center; }
.t5-titulo { font-family: var(--f-display); font-weight: 500; font-size: 74px; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.t5-titulo-branco { color: #fdfbf7; }
.t5-lilas { color: #c0b0f3; font-style: italic; }
.t5-arroba { font-size: 26px; letter-spacing: .08em; color: rgba(255,255,255,.35); font-family: var(--f-texto); }
.t5-seta-circulo { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); width: 58px; height: 58px; border: 1.5px solid rgba(255,255,255,.55); border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; z-index: 6; }
.t5-miolo-claro { position: absolute; top: 80px; bottom: 150px; left: 80px; right: 80px; display: flex; flex-direction: column; gap: 44px; }
.t5-miolo-texto { justify-content: center; }
.t5-foto-janela { width: 100%; height: 580px; color: #777; background: #0a0a0a; }
.t5-titulo-preto { color: #141414; text-align: left; font-size: 66px; }
.t5-titulo-maior { font-size: 80px; }
.t5-marca { background: #c0b0f3; padding: 0 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.t5-corpo { font-size: 34px; line-height: 1.5; color: #2c2c2c; white-space: pre-line; }
.t5-rod { position: absolute; left: 80px; right: 80px; bottom: 56px; z-index: 6; display: flex; justify-content: space-between; align-items: center; }
.t5-nome { font-family: var(--f-display); font-size: 32px; }
.t5-seta { width: 52px; height: 52px; border: 1.5px solid rgba(0,0,0,.5); border-radius: 50%; display: grid; place-items: center; font-size: 24px; }

/* ═══ T6 · TERROSO ═══ */
.tpl-t6 { background: #1e0e00; color: #fff; }
.t6-cab { position: absolute; top: 44px; left: 60px; right: 60px; z-index: 6; display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; color: rgba(255,255,255,.92); font-family: var(--f-texto); }
.t6-cab-dir { text-align: right; }
.t6-foto-cheia { position: absolute; inset: 0; }
.t6-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,14,0,.45) 0%, transparent 22%, transparent 42%, rgba(30,14,0,.92) 88%); }
.tpl-t6 .sl-foto-vazia { background: #2c1a0a; color: #8a7360; }
.t6-miolo-capa { position: absolute; left: 70px; right: 70px; bottom: 90px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.t6-serif-titulo { font-family: var(--f-display); font-weight: 500; font-size: 96px; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance; }
.t6-sans-sub { font-family: var(--f-texto); font-weight: 700; font-size: 34px; line-height: 1.35; }
.t6-miolo { position: absolute; top: 150px; bottom: 60px; left: 60px; right: 60px; z-index: 3; display: flex; flex-direction: column; gap: 26px; }
.t6-miolo-centro { justify-content: center; gap: 34px; }
.t6-serif-just { font-family: var(--f-display); font-weight: 400; font-size: 56px; line-height: 1.14; text-align: justify; white-space: pre-line; }
.t6-sans-bold { font-family: var(--f-texto); font-weight: 700; font-size: 36px; line-height: 1.34; white-space: pre-line; }
.t6-sans-just { font-family: var(--f-texto); font-weight: 400; font-size: 34px; line-height: 1.38; text-align: justify; white-space: pre-line; }
.t6-sans-bold:empty, .t6-sans-just:empty, .t6-sans-sub:empty { display: none; }
.t6-janela { width: 100%; height: 350px; flex: none; }

/* ═══ T7 · VINHO ═══ */
.tpl-t7 { background: #e7ebea; color: #4a1622; }
.t7-foto-cheia { position: absolute; inset: 0; }
.t7-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, transparent 26%, transparent 46%, rgba(0,0,0,.72) 92%); }
.tpl-t7 .sl-foto-vazia { background: #d6dad9; color: #8a8f8e; }
.t7-miolo-capa { position: absolute; left: 70px; right: 70px; bottom: 130px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; color: #fff; }
.t7-serif-capa { font-family: var(--f-display); font-weight: 500; font-size: 82px; line-height: 1.06; text-shadow: 0 3px 24px rgba(0,0,0,.5); text-wrap: balance; }
.t7-sans-sub { font-family: var(--f-texto); font-weight: 700; font-size: 33px; line-height: 1.32; text-shadow: 0 2px 16px rgba(0,0,0,.5); }
.t7-miolo { position: absolute; top: 90px; bottom: 110px; left: 62px; right: 62px; z-index: 3; display: flex; flex-direction: column; gap: 34px; }
.t7-miolo-centro { justify-content: center; }
.t7-titulo { font-family: var(--f-texto); font-weight: 400; font-size: 52px; line-height: 1.16; letter-spacing: -.01em; white-space: pre-line; }
.t7-sub { font-family: var(--f-texto); font-weight: 700; font-size: 34px; line-height: 1.36; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; white-space: pre-line; }
.t7-sub:empty { display: none; }
.t7-janela { width: 100%; height: 580px; flex: none; }
.t7-rod { position: absolute; bottom: 52px; left: 0; right: 0; z-index: 6; text-align: center; font-size: 19px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--f-texto); }
.t7-rod-claro { color: #fff; }

/* ═══ T8 · MONOCROMÁTICO ═══ */
.tpl-t8 { background: #e3e2e0; color: #111; }
.tpl-t8 .sl-foto img { filter: grayscale(1) contrast(1.05); }
.tpl-t8 .sl-foto-vazia { background: #cfcecc; color: #8a8a8a; }
.t8-faixa { position: absolute; top: 15%; left: 0; right: 0; height: 36%; }
.t8-miolo-capa { position: absolute; top: 57%; left: 96px; right: 96px; z-index: 4; display: flex; flex-direction: column; gap: 16px; }
.t8-kicker { font-family: var(--f-texto); font-weight: 400; font-size: 34px; }
.t8-kicker:empty { display: none; }
.t8-serif-capa { font-family: var(--f-display); font-weight: 600; font-size: 74px; line-height: 1.14; }
.t8-foto-cheia { position: absolute; inset: 0; }
.t8-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 62%, rgba(0,0,0,.86) 100%); }
.t8-miolo-cheia { position: absolute; left: 96px; right: 96px; bottom: 88px; z-index: 4; display: flex; flex-direction: column; gap: 14px; color: #fff; }
.t8-miolo { position: absolute; top: 50%; transform: translateY(-50%); left: 96px; right: 96px; z-index: 4; display: flex; flex-direction: column; gap: 14px; }
.t8-serif-secao { font-family: var(--f-display); font-weight: 600; font-size: 58px; line-height: 1.1; }
.t8-serif-escuro { color: #111; }
.t8-regua { height: 1px; background: rgba(255,255,255,.5); margin-bottom: 12px; }
.t8-regua-escura { background: rgba(0,0,0,.35); }
.t8-sans-claro { font-family: var(--f-texto); font-weight: 400; font-size: 33px; line-height: 1.42; color: #f2f2f2; white-space: pre-line; }
.t8-sans-escuro { font-family: var(--f-texto); font-weight: 400; font-size: 34px; line-height: 1.45; color: #1a1a1a; white-space: pre-line; }
.t8-rod { position: absolute; bottom: 54px; left: 96px; z-index: 6; font-size: 19px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; font-family: var(--f-texto); }

/* ═══ T9 · REVISTA ═══ */
.tpl-t9 { background: #fff; color: #111; }
.t9-cab { position: absolute; top: 52px; left: 66px; right: 66px; z-index: 6; display: flex; align-items: center; gap: 20px; font-size: 20px; letter-spacing: .16em; text-transform: uppercase; color: #8f8f8f; font-family: var(--f-texto); }
.t9-linha-cab { flex: 1; height: 1px; background: #cfcfcf; }
.t9-foto-cheia { position: absolute; inset: 0; }
.t9-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 20%, transparent 48%, rgba(0,0,0,.6) 92%); }
.tpl-t9 .sl-foto-vazia { background: #ececec; color: #9a9a9a; }
.t9-logo { position: absolute; top: 56px; left: 66px; z-index: 6; color: #fff; font-family: var(--f-display); font-size: 34px; display: flex; align-items: center; gap: 10px; }
.t9-marca { font-family: var(--f-texto); }
.t9-miolo-capa { position: absolute; left: 78px; right: 78px; bottom: 130px; z-index: 4; text-align: center; }
.t9-serif-capa { font-family: var(--f-display); font-weight: 400; font-size: 74px; line-height: 1.14; color: #fff; text-shadow: 0 3px 22px rgba(0,0,0,.45); text-wrap: balance; }
.t9-miolo { position: absolute; top: 132px; bottom: 130px; left: 66px; right: 66px; z-index: 3; display: flex; flex-direction: column; gap: 30px; }
.t9-miolo-centro { justify-content: center; }
.t9-serif-titulo { font-family: var(--f-display); font-weight: 400; font-size: 62px; line-height: 1.08; letter-spacing: -.01em; }
.t9-colunas { display: flex; gap: 36px; flex: 1; min-height: 0; }
.t9-corpo { font-family: var(--f-texto); font-weight: 400; font-size: 31px; line-height: 1.5; color: #7d7d7d; white-space: pre-line; flex: 1; }
.t9-corpo-largo { font-size: 34px; }
.t9-janela { width: 46%; flex: none; align-self: stretch; }
.t9-rod { position: absolute; bottom: 54px; left: 66px; right: 66px; z-index: 6; display: flex; justify-content: space-between; align-items: center; font-size: 19px; letter-spacing: .18em; color: #9a9a9a; font-family: var(--f-texto); }
.t9-rod .t9-marca { font-size: 26px; color: #c0c0c0; }

/* ═══ TW · TWITTER / X ═══ */
.tpl-tw { background: #fff; color: #0f1419; }
.tw-card { position: absolute; inset: 0; padding: 100px 78px; display: flex; flex-direction: column; gap: 40px; }
.tw-card-centro { justify-content: center; }
.tw-perfil { display: flex; align-items: center; gap: 22px; flex: none; }
.tw-avatar { width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: #1d9bf0; flex: none; display: block; }
.tw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tw-nomes { line-height: 1.24; }
.tw-nome { font-family: var(--f-texto); font-weight: 700; font-size: 40px; color: #0f1419; }
.tw-selo { width: 34px; height: 34px; display: inline-block; vertical-align: -4px; margin-left: 12px; }
.tw-arroba { font-family: var(--f-texto); font-weight: 400; font-size: 38px; color: #536471; }
.tw-texto { font-family: var(--f-texto); font-weight: 400; font-size: 42px; line-height: 1.34; color: #0f1419; white-space: pre-line; flex: none; }
.tw-midia { width: 100%; flex: 1; min-height: 0; border-radius: 22px; overflow: hidden; }
.tw-midias { display: flex; gap: 8px; flex: 1; min-height: 0; }
.tw-midia-meia { flex: 1; border-radius: 22px; overflow: hidden; }
.tpl-tw .sl-foto-vazia { background: #eff3f4; color: #8b98a5; }

/* ═══ S1 · SPLIT ═══ */
.tpl-s1 { background: #0a0a0a; color: #fff; }
.tpl-s1::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .08; mix-blend-mode: overlay; }
.sp-cab { position: absolute; top: 42px; left: 56px; right: 56px; z-index: 8; display: flex; justify-content: space-between; font-size: 21px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.6; color: rgba(255,255,255,.95); text-shadow: 0 1px 14px rgba(0,0,0,.45); font-family: var(--f-texto); }
.sp-cab-dir { text-align: right; }
.sp-banda { position: absolute; left: 0; right: 0; overflow: hidden; }
.sp-cima { top: 0; height: 52%; }
.sp-baixo { top: 52%; bottom: 0; }
.sp-banda .sl-foto { position: absolute; inset: 0; }
.sp-banda::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 26%, transparent 52%, rgba(0,0,0,.84) 100%); }
.sp-frase { position: absolute; left: 66px; right: 66px; bottom: 36px; z-index: 3; font-family: var(--f-display); font-weight: 500; font-size: 47px; line-height: 1.22; text-align: center; color: #fbfaf7; text-shadow: 0 2px 16px rgba(0,0,0,.6); text-wrap: balance; }
.sp-cima .sp-frase { bottom: 44px; }
.tpl-s1 .sl-foto-vazia { background: #191919; color: #7a7a7a; }
.sp-miolo { position: absolute; top: 150px; bottom: 64px; left: 64px; right: 64px; z-index: 3; display: flex; flex-direction: column; gap: 54px; justify-content: center; }
.sp-texto { font-family: var(--f-texto); font-weight: 700; font-size: 39px; line-height: 1.52; text-decoration: underline; text-underline-offset: 10px; text-decoration-thickness: 2.5px; white-space: pre-line; letter-spacing: -.005em; }
.sp-janela { width: 100%; height: 470px; flex: none; }
.sp-janela img { filter: grayscale(1) contrast(1.06); }
.sp-serif { font-family: var(--f-display); font-weight: 500; font-size: 61px; line-height: 1.18; letter-spacing: -.005em; }
.sp-serif:empty { display: none; }
.tpl-s1.tipo-textoFotoClaro { background: #e9e8e5; color: #151515; }
.tpl-s1.tipo-textoFotoClaro .sp-cab { color: #151515; text-shadow: none; }
.tpl-s1.tipo-textoFotoClaro .sl-foto-vazia { background: #d6d4d0; color: #8a8a8a; }

/* ═══ S2 · SPLIT EDITORIAL (padrão) ═══ */
.tpl-s2 { background: #0d0d0d; color: #f2f0ec; }
.tpl-s2::after { content: ''; position: absolute; inset: 0; z-index: 7; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .07; mix-blend-mode: overlay; }
.sp2-cab { position: absolute; top: 46px; left: 60px; right: 60px; z-index: 8; display: flex; justify-content: space-between; font-size: 20px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.55; color: rgba(255,255,255,.95); text-shadow: 0 1px 12px rgba(0,0,0,.4); font-family: var(--f-texto); }
.sp2-cab-dir { text-align: right; }

/* contraste (2 fotos) */
.sp2-banda { position: absolute; left: 0; right: 0; overflow: hidden; }
.sp2-cima { top: 0; height: 52%; }
.sp2-baixo { top: 52%; bottom: 0; }
.sp2-banda .sl-foto { position: absolute; inset: 0; }
.sp2-banda::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, transparent 26%, transparent 54%, rgba(0,0,0,.82) 100%); }
.sp2-frase { position: absolute; left: 70px; right: 70px; bottom: 40px; z-index: 3; font-family: var(--f-display); font-weight: 500; font-size: 46px; line-height: 1.2; text-align: center; color: #fbfaf7; text-shadow: 0 2px 16px rgba(0,0,0,.6); text-wrap: balance; }
.tpl-s2 .sl-foto-vazia { background: #1a1a1a; color: #767676; }

/* miolos */
.sp2-miolo { position: absolute; top: 168px; bottom: 70px; left: 68px; right: 68px; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.sp2-foto-topo { position: absolute; top: 0; left: 0; right: 0; height: 44%; }
.sp2-miolo-topo { top: 47%; justify-content: flex-start; }
.sp2-janela { width: 100%; height: 430px; flex: none; }
.sp2-janela-round { border-radius: 18px; overflow: hidden; height: 470px; }

/* tipografias */
.sp2-serif-just { font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 1.36; text-align: justify; white-space: pre-line; }
.sp2-serif-fecho { font-family: var(--f-display); font-weight: 600; font-size: 40px; line-height: 1.36; text-align: justify; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; }
.sp2-serif-fecho:empty, .sp2-caixa-alta:empty, .sp2-serif-grande:empty, .sp2-sans-sub:empty { display: none; }
.sp2-sans-just { font-family: var(--f-texto); font-weight: 400; font-size: 35px; line-height: 1.45; text-align: justify; white-space: pre-line; }
.sp2-caixa-alta { font-family: var(--f-texto); font-weight: 700; font-size: 44px; line-height: 1.16; text-transform: uppercase; letter-spacing: -.01em; }
.sp2-sans-sub { font-family: var(--f-texto); font-weight: 700; font-size: 37px; line-height: 1.42; text-align: justify; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2.5px; white-space: pre-line; }
.sp2-serif-grande { font-family: var(--f-display); font-weight: 500; font-size: 62px; line-height: 1.14; letter-spacing: -.005em; }
.sp2-sans-claro { font-family: var(--f-texto); font-weight: 500; font-size: 35px; line-height: 1.45; white-space: pre-line; }
.sp2-sans-sub-claro { font-size: 34px; }

/* claros */
.tpl-s2.tipo-claroFoto, .tpl-s2.tipo-claroTexto { background: #e9e8e5; color: #131313; }
.tpl-s2.tipo-claroFoto .sp2-cab, .tpl-s2.tipo-claroTexto .sp2-cab { color: #131313; text-shadow: none; }
.tpl-s2.tipo-claroFoto .sl-foto-vazia, .tpl-s2.tipo-claroTexto .sl-foto-vazia { background: #d5d3cf; color: #8a8a8a; }

/* foto cheia */
.sp2-foto-cheia { position: absolute; inset: 0; }
.sp2-foto-cheia::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 22%, transparent 40%, rgba(0,0,0,.88) 78%); }
.sp2-miolo-cheia { position: absolute; left: 68px; right: 68px; bottom: 76px; z-index: 4; display: flex; flex-direction: column; gap: 30px; }
.sp2-seta { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 26px; }
