/* Locatto Conteúdo — slides de carrossel 1080x1350 + biblioteca de templates.
   Estrutura semântica compartilhada; o tema vem da classe do wrapper:
   .tpl-ametista (escuro)  .tpl-papel (claro)  .tpl-grafite (corporativo escuro) */

:root {
  --roxo: #451D4C; --roxo-esc: #200D26; --roxo-prof: #341542; --roxo-noite: #150818;
  --grafite: #1A1A22; --offwhite: #F5F2EC; --champanhe: #B79A6B; --champanhe-claro: #CBB588;
  --champanhe-hi: #E1D2A6; --texto: #23222A;
}

/* ------- canvas base ------- */
.sl-page {
  position: relative; width: 1080px; height: 1350px; padding: 84px 88px;
  display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
.sl-page * { box-sizing: border-box; }
/* reset defensivo: a cor/margem global do app (h1/h2/h3/p) NÃO atravessa o canvas do slide.
   (só cor+margem: mexer em font/letter-spacing quebraria os tamanhos das classes .sl-h-*) */
.sl-page h1, .sl-page h2, .sl-page h3, .sl-page p { margin: 0; color: inherit; }
.sl-moldura { position: absolute; inset: 0; pointer-events: none; }

/* ------- assinatura de criadora (avatar + @handle) ------- */
.sl-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 2; }
.sl-topo .sl-pag { justify-self: end; }
.sl-topo-capa { display: flex; justify-content: center; }
.sl-cr { display: flex; align-items: center; gap: 18px; }
.sl-cr.centro { justify-content: center; }
.sl-av { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.sl-cr.sm .sl-av { width: 56px; height: 56px; }
.sl-cr.grande .sl-av { width: 92px; height: 92px; }
.sl-av-ini { display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 30px; }
.sl-cr-id { display: flex; flex-direction: column; line-height: 1.15; }
.sl-cr-id b { font-weight: 700; font-size: 27px; letter-spacing: .01em; }
.sl-cr-id span { font-weight: 500; font-size: 22px; opacity: .72; }
.sl-cr.sm .sl-cr-id b { font-size: 22px; }
.sl-cr.sm .sl-cr-id span { font-size: 18px; }
.sl-cr.grande .sl-cr-id b { font-size: 31px; }
.sl-cr.grande .sl-cr-id span { font-size: 25px; }
.sl-pag { font-family: 'Courier New', monospace; font-size: 22px; letter-spacing: .1em; }

/* ------- etiquetas ------- */
.sl-etq { display: inline-block; font-weight: 700; font-size: 22px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 28px; }
.sl-etq.forte { font-size: 26px; letter-spacing: .2em; padding-left: 22px; position: relative; }
.sl-etq.forte::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 6px; border-radius: 4px; background: var(--champanhe); }
.sl-etq.vazada { border: 1.5px solid; border-radius: 100px; padding: 15px 36px; letter-spacing: .18em; margin-bottom: 40px; }

/* ------- títulos + destaque com grifo ------- */
.sl-h { font-weight: 700; line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; overflow-wrap: break-word; word-break: break-word; max-width: 100%; }
/* cor do título blindada por template (vence qualquer regra global de h1/h2/h3 do app) */
.tpl-ametista .sl-h, .tpl-grafite .sl-h { color: #fff; }
.tpl-papel .sl-h { color: var(--roxo); }
.sl-h .destaque {
  color: var(--champanhe); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 78%, rgba(183,154,107,.28) 0);
}
.sl-h-conteudo { font-size: 74px; }
.sl-sub { font-weight: 600; font-size: 32px; line-height: 1.35; margin-top: 22px; }
.sl-subcapa { font-weight: 500; font-size: 36px; line-height: 1.4; margin-top: 34px; max-width: 82%; }

/* ------- corpo ------- */
.sl-corpo { font-size: 30px; line-height: 1.56; }
.sl-corpo p { margin-bottom: 24px; } .sl-corpo p:last-child { margin-bottom: 0; }
.sl-corpo.centro { text-align: center; }

/* ------- linhas ------- */
.sl-regua { width: 100px; height: 5px; border-radius: 3px; margin: 30px 0; }

/* ------- número fantasma ------- */
.sl-fantasma { position: absolute; right: 24px; bottom: -96px; font-weight: 800; font-size: 560px; line-height: .8; z-index: 0; letter-spacing: -.05em; }

/* ------- CAPA ------- */
.sl-capa-mid { margin: auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.sl-arrasta { align-self: flex-start; font-weight: 600; font-size: 22px; letter-spacing: .04em; padding: 17px 38px; border-radius: 100px; position: relative; z-index: 2; }

/* ------- DESTAQUE ------- */
.sl-destaque-mid { margin: auto 0; }
.sl-aspas { font-family: Georgia, serif; font-size: 210px; line-height: .55; height: 108px; color: var(--champanhe); }
.sl-h-destaque { font-size: 78px; font-weight: 600; margin-top: 6px; }
.sl-corpo-destaque { margin-top: 36px; font-size: 33px; }
.sl-fonte { font-family: 'Courier New', monospace; font-size: 22px; letter-spacing: .06em; opacity: .82; }

/* ------- CTA ------- */
.sl-cta-mid { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 44px; }
.sl-h-cta { font-size: 80px; text-align: center; }
.sl-cta-palavra { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.sl-cta-palavra span { font-weight: 600; font-size: 25px; letter-spacing: .04em; opacity: .78; text-transform: uppercase; }
.sl-cta-palavra b { font-weight: 800; font-size: 50px; letter-spacing: .12em; text-transform: uppercase; padding: 22px 58px; border-radius: 100px; }

/* ------- CONTEÚDO ------- */
.sl-conteudo-mid { margin: auto 0; position: relative; z-index: 2; max-width: 92%; }

/* ------- NÚMERO (estatística) ------- */
.sl-numero-mid { margin: auto 0; position: relative; z-index: 2; }
.sl-num-big { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; line-height: .9; letter-spacing: -.02em; margin-bottom: 8px; }
.sl-h-num { font-size: 58px; }

/* ------- CITAÇÃO (frase serifada, combinação de fontes) ------- */
.sl-citacao-mid { margin: auto 0; }
.sl-cit-aspas { font-family: 'Playfair Display', Georgia, serif; font-weight: 800; font-size: 220px; line-height: .5; height: 104px; }
.sl-cit { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-style: italic; line-height: 1.16; letter-spacing: -.005em; }
.sl-cit-fonte { font-weight: 700; font-size: 24px; letter-spacing: .16em; text-transform: uppercase; margin-top: 42px; }

/* ------- MOCKUP (tela de celular) ------- */
.sl-mockup-mid { margin: auto 0; display: flex; flex-direction: column; align-items: center; }
.sl-mockup-mid .sl-etq { margin-bottom: 34px; align-self: center; }
.sl-phone { width: 512px; background: #0e0a11; border-radius: 58px; padding: 18px; box-shadow: 0 46px 100px rgba(0,0,0,.45); }
.sl-phone-bar { display: flex; justify-content: center; padding: 10px 0 16px; }
.sl-phone-bar span { width: 132px; height: 9px; border-radius: 9px; background: rgba(255,255,255,.22); }
.sl-phone-scr { background: #F5F2EC; border-radius: 42px; padding: 56px 48px; min-height: 660px; display: flex; flex-direction: column; }
.sl-scr-app { font-weight: 700; font-size: 22px; letter-spacing: .16em; text-transform: uppercase; color: #8a6d3d; margin-bottom: 26px; }
/* escopo forte (.sl-phone-scr .sl-scr-h) pra vencer o reset .sl-page h3 (0,1,1): a tela é sempre clara */
.sl-phone-scr .sl-scr-h { font-weight: 700; font-size: 54px; line-height: 1.07; letter-spacing: -.02em; color: var(--roxo); }
.sl-phone-scr .sl-scr-h .destaque { color: #8a6d3d; background: none; }
.sl-scr-body { font-size: 29px; line-height: 1.5; color: rgba(35,34,42,.82); margin-top: 28px; }
.sl-scr-body p { margin-bottom: 18px; } .sl-scr-body p:last-child { margin-bottom: 0; }

/* ------- SELO (certificado) ------- */
.sl-selo-mid { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.sl-selo-badge { position: relative; width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.sl-selo-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.sl-selo-c { display: flex; flex-direction: column; align-items: center; }
.sl-selo-ck { width: 52px; height: 52px; stroke-width: 2.4; margin-bottom: 12px; }
.sl-selo-c b { font-weight: 800; font-size: 42px; letter-spacing: .02em; line-height: 1.05; }
.sl-selo-c span { font-weight: 600; font-size: 23px; letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; }
.sl-h-selo { font-size: 58px; margin-top: 52px; }
.sl-selo-mid .sl-corpo { margin-top: 26px; max-width: 80%; }

/* ====================================================================== */
/* TEMPLATE 1 — AMETISTA (escuro, editorial de luxo)                       */
/* ====================================================================== */
.tpl-ametista .sl-page { background: radial-gradient(circle at 78% 6%, #3a1546, var(--roxo-esc) 55%, var(--roxo-noite)); color: #fff; }
.tpl-ametista .sl-moldura { border: 2px solid rgba(183,154,107,.28); margin: 34px; }
.tpl-ametista .sl-av { border: 2.5px solid var(--champanhe); }
.tpl-ametista .sl-av-ini { background: var(--champanhe); color: var(--roxo-noite); }
.tpl-ametista .sl-cr-id b { color: #fff; } .tpl-ametista .sl-cr-id span { color: var(--champanhe-claro); opacity: 1; }
.tpl-ametista .sl-pag { color: rgba(255,255,255,.5); }
.tpl-ametista .sl-etq { color: var(--champanhe-claro); }
.tpl-ametista .sl-etq.vazada { border-color: rgba(183,154,107,.5); color: var(--champanhe-hi); }
.tpl-ametista .sl-sub, .tpl-ametista .sl-subcapa { color: rgba(255,255,255,.82); }
.tpl-ametista .sl-corpo { color: rgba(255,255,255,.86); }
.tpl-ametista .sl-regua { background: var(--champanhe); }
.tpl-ametista .sl-fantasma { color: #fff; opacity: .06; }
.tpl-ametista .sl-arrasta { background: var(--champanhe); color: var(--roxo-noite); }
.tpl-ametista .sl-fonte { color: var(--champanhe-claro); }
.tpl-ametista .sl-cta-palavra span { color: rgba(255,255,255,.7); }
.tpl-ametista .sl-cta-palavra b { background: var(--champanhe); color: var(--roxo-noite); }

/* ====================================================================== */
/* TEMPLATE 2 — PAPEL (claro, institucional)                              */
/* ====================================================================== */
.tpl-papel .sl-page { background: var(--offwhite); color: var(--texto); }
.tpl-papel .sl-moldura { border-top: 12px solid var(--roxo); }
.tpl-papel .sl-av { border: 2.5px solid var(--roxo); }
.tpl-papel .sl-av-ini { background: var(--roxo); color: var(--offwhite); }
.tpl-papel .sl-cr-id b { color: var(--roxo); } .tpl-papel .sl-cr-id span { color: #8a6d3d; opacity: 1; }
.tpl-papel .sl-pag { color: rgba(67,30,72,.55); }
.tpl-papel .sl-h { color: var(--roxo); }
.tpl-papel .sl-h .destaque { color: #8a6d3d; background: linear-gradient(transparent 78%, rgba(183,154,107,.34) 0); }
.tpl-papel .sl-etq { color: #8a6d3d; }
.tpl-papel .sl-etq.forte::before { background: var(--champanhe); }
.tpl-papel .sl-etq.vazada { border-color: rgba(138,109,61,.5); color: #8a6d3d; }
.tpl-papel .sl-sub { color: var(--roxo); }
.tpl-papel .sl-subcapa { color: rgba(35,34,42,.72); }
.tpl-papel .sl-corpo { color: rgba(35,34,42,.86); }
.tpl-papel .sl-regua { background: var(--champanhe); }
.tpl-papel .sl-fantasma { color: var(--roxo); opacity: .05; }
.tpl-papel .sl-arrasta { background: var(--roxo); color: var(--offwhite); }
.tpl-papel .sl-aspas { color: var(--champanhe); }
.tpl-papel .sl-fonte { color: #8a6d3d; }
.tpl-papel .sl-cta-palavra span { color: rgba(35,34,42,.7); }
.tpl-papel .sl-cta-palavra b { background: var(--roxo); color: var(--offwhite); }

/* ====================================================================== */
/* TEMPLATE 3 — GRAFITE (escuro corporativo, com barra lateral)           */
/* ====================================================================== */
.tpl-grafite .sl-page { background: linear-gradient(155deg, var(--grafite) 0%, #221f2b 60%, var(--roxo-esc) 140%); color: #fff; padding-left: 124px; }
.tpl-grafite .sl-moldura { border-left: 14px solid var(--champanhe); }
.tpl-grafite .sl-av { border: 2px solid var(--champanhe); }
.tpl-grafite .sl-av-ini { background: transparent; border: 1.5px solid var(--champanhe); color: var(--champanhe); }
.tpl-grafite .sl-cr-id b { color: #fff; } .tpl-grafite .sl-cr-id span { color: var(--champanhe-claro); opacity: 1; }
.tpl-grafite .sl-pag { color: var(--champanhe-claro); }
.tpl-grafite .sl-etq { color: var(--champanhe-claro); }
.tpl-grafite .sl-etq.forte::before { background: var(--champanhe); }
.tpl-grafite .sl-etq.vazada { border-color: rgba(183,154,107,.5); color: var(--champanhe-hi); }
.tpl-grafite .sl-h .destaque { color: var(--champanhe-claro); background: linear-gradient(transparent 78%, rgba(183,154,107,.3) 0); }
.tpl-grafite .sl-sub, .tpl-grafite .sl-subcapa { color: rgba(255,255,255,.8); }
.tpl-grafite .sl-corpo { color: rgba(255,255,255,.85); }
.tpl-grafite .sl-regua { background: var(--champanhe); }
.tpl-grafite .sl-fantasma { color: var(--champanhe); opacity: .1; }
.tpl-grafite .sl-arrasta { background: transparent; border: 1.5px solid var(--champanhe); color: var(--champanhe-claro); }
.tpl-grafite .sl-fonte { color: var(--champanhe-claro); }
.tpl-grafite .sl-cta-palavra span { color: rgba(255,255,255,.7); }
.tpl-grafite .sl-cta-palavra b { background: var(--champanhe); color: var(--grafite); }

/* ====================================================================== */
/* TIPOS VISUAIS NOVOS — cores por template                               */
/* ====================================================================== */
/* número */
.tpl-ametista .sl-num-big, .tpl-grafite .sl-num-big { color: var(--champanhe-claro); }
.tpl-papel .sl-num-big { color: var(--roxo); }
/* citação (aspas + fonte; o texto herda a cor de .sl-h do template) */
.tpl-ametista .sl-cit-aspas, .tpl-grafite .sl-cit-aspas, .tpl-papel .sl-cit-aspas { color: var(--champanhe); }
.tpl-ametista .sl-cit-fonte, .tpl-grafite .sl-cit-fonte { color: var(--champanhe-claro); }
.tpl-papel .sl-cit-fonte { color: #8a6d3d; }
/* selo */
.tpl-ametista .sl-selo-ring circle, .tpl-grafite .sl-selo-ring circle { stroke: var(--champanhe); }
.tpl-papel .sl-selo-ring circle { stroke: var(--champanhe); }
.tpl-ametista .sl-selo-ck, .tpl-grafite .sl-selo-ck { stroke: var(--champanhe); }
.tpl-papel .sl-selo-ck { stroke: var(--roxo); }
.tpl-ametista .sl-selo-c b, .tpl-grafite .sl-selo-c b { color: #fff; }
.tpl-papel .sl-selo-c b { color: var(--roxo); }
.tpl-ametista .sl-selo-c span, .tpl-grafite .sl-selo-c span { color: var(--champanhe-claro); }
.tpl-papel .sl-selo-c span { color: #8a6d3d; }