/* ==========================================================================
   base.css
   Tokens da marca, reset, faixa central, tipografia, botoes, topbar e rodape.
   Carregado em todas as paginas, sempre antes do CSS especifico da pagina.
   ========================================================================== */

/* ---------- FONTES ----------
   Hospedadas no site desde 2026-10-18, em /assets/fontes/. Arquivos do
   Fontsource 5.3.0 (@fontsource/archivo, /montserrat, /playfair-display),
   que redistribui as fontes do Google: woff2 estatico por peso, so o
   subconjunto latino, que cobre os acentos do portugues (U+0000-00FF) e a
   pontuacao tipografica (U+2000-206F); conferido contra todo o texto do
   site. Licenca SIL Open Font License 1.1, texto completo ao lado dos
   arquivos (OFL-*.txt). Playfair Display tem nome reservado: os arquivos
   vao sem modificacao.
   So os pesos que o CSS usa, medidos pagina por pagina: Archivo 600 e 800;
   Montserrat 300 a 700; Playfair Display 500, 600 e 500 italico. Textos
   que pedem Playfair 300 caem no 500, como ja caiam no Google Fonts. */
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fontes/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;
 src:url(/assets/fontes/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;
 src:url(/assets/fontes/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
 src:url(/assets/fontes/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;
 src:url(/assets/fontes/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fontes/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;
 src:url(/assets/fontes/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;
 src:url(/assets/fontes/playfair-display-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;
 src:url(/assets/fontes/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;
 src:url(/assets/fontes/playfair-display-latin-500-italic.woff2) format('woff2')}

:root{
 /* marca. Os tokens --violeta-esc, --dourado-esc e --lavanda e o valor de
    --noite vieram do hero-monica-abacherli.html aprovado em 2026-10-01. */
 --violeta:#2E0C5E;
 --violeta-med:#4B2E83;
 --violeta-esc:#1A0733;
 --noite:#12041F;
 --dourado:#D1B04E;
 --dourado-cl:#E3CB84;
 --dourado-esc:#A8842A;
 --lavanda:#C9BCE0;

 /* barra do topo em pilula flutuante, desde 2026-10-20. --topo-espaco e o
    que ela ocupa do alto da janela ate a base do circulo do monograma: a
    capa de cada pagina comeca com esse respiro, a coluna fixa do FAQ para
    abaixo dele, e o scroll-padding-top o usa para o foco e as ancoras nao
    pararem embaixo da barra. */
 --barra-topo:16px;
 --barra-h:60px;
 --circulo:76px;
 --topo-espaco:calc(var(--barra-topo) + (var(--barra-h) + var(--circulo)) / 2);

 /* vermelho do botao Emergencia, desde 2026-10-18. Texto branco sobre ele
    da 4,98:1 (minimo 4,5:1) e ele contra o violeta da barra da 3,17:1
    (minimo 3:1 para contorno de componente, WCAG 1.4.11). #C62828, pedido
    como referencia, da 5,62:1 no texto mas so 2,81:1 contra a barra. */
 --emergencia:#D32F2F;

 /* familia areia, fundos claros. Valores extraidos dos gradientes que ja
    existiam no styles.css original, para nao alterar o resultado visual. */
 --areia:#FBF8F2;
 --areia-media:#F4EEE3;
 --areia-escura:#EDE4D4;
 --areia-borda:#E7DFD1;

 /* faixa central: o conteudo nunca encosta na borda da janela.
    A conta devolve a margem lateral que centraliza --faixa, com piso de
    --gutter nas telas estreitas. Vale para a topbar, a sub-barra, toda
    secao e o rodape. Substituiu as variaveis antigas de largura e respiro
    em 2026-10-01. */
 --faixa:1400px;
 --gutter:28px;
 --lateral:max(var(--gutter),calc((100% - var(--faixa)) / 2));
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Montserrat',sans-serif;background:var(--noite);color:#fff;-webkit-font-smoothing:antialiased}

/* ---------- FAIXA CENTRAL ----------
   .wrap nao tem mais max-width: a margem lateral --lateral e que centraliza
   a faixa de 1400px, e cai ate o piso --gutter nas telas estreitas. */
.wrap{padding-left:var(--lateral);padding-right:var(--lateral)}

/* ---------- TIPOGRAFIA ---------- */
h1{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(37px,3.2vw,55px);
 line-height:1.1;letter-spacing:-.005em;margin-bottom:28px}
h1 em{font-style:normal;color:var(--dourado-cl)}
h2{font-family:'Playfair Display',serif;font-weight:500;font-size:clamp(30px,2.5vw,44px);
 line-height:1.22;color:var(--violeta);margin-bottom:26px;max-width:740px}
h2 em{font-style:normal;color:var(--violeta);box-shadow:inset 0 -.26em 0 rgba(209,176,78,.40)}

/* Titulo em duas vozes, do hero aprovado em 2026-10-01. A afirmacao vem em
   Archivo, sem serifa e pesada, em caixa alta; o fecho vem em Playfair
   italico dourado, a serifada do logotipo. O corte tipografico e o mesmo
   corte do texto: o que e duro de um lado, a promessa do outro. */
.titulo{margin:0 0 6px;font-family:'Archivo',sans-serif}
.titulo span{display:block}
/* .l1 e a sobrelinha curta em dourado, acima da afirmacao. Saiu do HTML em
   2026-10-01, quando o hero passou a ter duas linhas (l2 e l3). A regra
   fica: volta quando a copy do hero ganhar de novo uma linha de abertura
   acima da afirmacao, sem precisar reescrever CSS. */
.titulo .l1{font-size:clamp(14px,1.3vw,23px);font-weight:600;letter-spacing:.09em;
 text-transform:uppercase;color:var(--dourado);margin-bottom:14px;
 text-shadow:0 2px 14px rgba(0,0,0,.5)}
.titulo .l2{font-size:clamp(31px,4vw,66px);font-weight:800;line-height:1.02;
 letter-spacing:-.03em;text-transform:uppercase;color:#fff;
 text-shadow:0 4px 26px rgba(0,0,0,.55)}
.titulo .l3{font-family:'Playfair Display',serif;font-size:clamp(31px,4vw,66px);
 font-weight:500;font-style:italic;line-height:1.12;letter-spacing:-.01em;
 color:var(--dourado-cl);text-shadow:0 4px 24px rgba(0,0,0,.5)}

.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.eyebrow span{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#8A6F1E}
.eyebrow.claro span{color:var(--dourado)}

/* ---------- BOTOES ---------- */
.pill{background:var(--dourado);color:#25084F;padding:13px 26px;border-radius:40px;
 font-size:14.5px;font-weight:600;text-decoration:none;
 font-family:inherit;border:0;line-height:normal;cursor:pointer;white-space:nowrap}
.pill:hover{background:var(--dourado-cl)}

/* Botao pill dourado do hero aprovado em 2026-10-01. So e emitido quando o
   campo 9.5 do registro canonico (URL da Hotmart) estiver resolvido. */
.cta{margin-top:38px;display:inline-flex;align-items:center;gap:14px;
 background:linear-gradient(180deg,var(--dourado-cl) 0%,var(--dourado) 55%,var(--dourado-esc) 100%);
 color:#25084F;padding:20px 46px;border-radius:999px;text-decoration:none;
 font-size:clamp(15px,1.25vw,19px);font-weight:800;letter-spacing:.08em;text-transform:uppercase;
 border:2px solid rgba(255,255,255,.35);
 box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 6px rgba(209,176,78,.14)}
.cta:hover{filter:brightness(1.06)}
.cta svg{flex:none}

/* Pill de emergencia. Mesmo formato do pill dourado, so muda a cor: branco
   sobre vermelho forte (contrastes no token --emergencia). O hover escurece
   para #C62828, 5,62:1 no texto. */
/* inline-block nos dois: sem JS ele e <a> (inline por padrao) e com JS e
   <button> (inline-block); com displays diferentes o padding vertical
   pesava diferente e o pill mudava de tamanho entre um e outro */
.pill--emergencia{display:inline-block;background:var(--emergencia);color:#fff;border:0;font-family:inherit;cursor:pointer}
.pill--emergencia:hover{background:#C62828}
.pill:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* Pulso: anel vermelho que se expande e some atras do botao, so ao
   carregar, tres voltas de 1,3 s (~4 s, abaixo dos 5 s do WCAG 2.2.2), e
   so enquanto a pessoa nunca abriu o painel (classe .pulsa, posta pelo
   script). Com movimento reduzido, nada. */
@media (prefers-reduced-motion:no-preference){
 .pill--emergencia.pulsa{animation:pulso-emergencia 1.3s ease-out 3}
}
@keyframes pulso-emergencia{
 0%{box-shadow:0 0 0 0 rgba(211,47,47,.75)}
 100%{box-shadow:0 0 0 14px rgba(211,47,47,0)}
}

/* Painel do botao Emergencia, ancorado nele, alinhado pela direita */
.emergencia{position:relative}
.emergencia-link[hidden],.emergencia-botao[hidden]{display:none}
.painel-emergencia{position:absolute;right:0;top:calc(100% + 10px);z-index:40;
 width:min(300px,calc(100vw - 2 * var(--gutter)));padding:16px;display:grid;gap:10px;
 background:#fff;border:1px solid var(--areia-borda);border-top:3px solid var(--emergencia);
 border-radius:14px;box-shadow:0 18px 40px rgba(18,4,31,.35);text-align:left;
 max-height:calc(100vh - var(--topo-espaco) - 16px);max-height:calc(100dvh - var(--topo-espaco) - 16px);overflow-y:auto}
.painel-emergencia[hidden]{display:none}
.painel-emergencia .tel{display:block;padding:12px 14px;border-radius:10px;background:var(--areia);
 color:#2A2731;font-size:14px;line-height:1.45;text-decoration:none;border:1px solid var(--areia-borda)}
.painel-emergencia .tel b{color:var(--violeta)}
.painel-emergencia .tel--190{background:var(--emergencia);border-color:var(--emergencia);color:#fff;font-size:15px}
.painel-emergencia .tel--190 b{color:#fff}
.painel-emergencia .tel:hover{border-color:var(--violeta)}
.painel-emergencia .tel--190:hover{background:#C62828}
.painel-emergencia .sair{padding:11px 14px;border:1px solid var(--violeta);border-radius:10px;background:var(--violeta);
 color:#fff;font:600 14px 'Montserrat',sans-serif;cursor:pointer}
.painel-emergencia .sair:hover{background:var(--violeta-med)}
.painel-emergencia a:focus-visible,.painel-emergencia .sair:focus-visible{outline:3px solid var(--violeta);outline-offset:2px}
.painel-emergencia .nota{margin:0;font-size:12.5px;line-height:1.5;color:#57525F}
.b1{background:var(--dourado);color:#25084F;padding:20px 32px;border-radius:12px;font-size:15.5px;
 font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:12px}
.b1:hover{background:var(--dourado-cl)}
.b2{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
 padding:20px 30px;border-radius:12px;font-size:15.5px;font-weight:500;text-decoration:none;
 display:inline-flex;align-items:center;gap:12px}
.b2:hover{background:rgba(255,255,255,.12)}
.b3{background:var(--violeta);color:#fff;padding:19px 32px;border-radius:12px;font-size:15px;
 font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.b3:hover{background:var(--violeta-med)}

/* ---------- COMPONENTES COMPARTILHADOS ----------
   Promovidos de home.css quando a pagina Sobre passou a usar os mesmos
   elementos. Valores inalterados, so mudaram de arquivo. */

/* retrato circular com anel dourado e brilho violeta */
.retrato{position:relative;justify-self:center;width:100%;max-width:470px;aspect-ratio:1}
.retrato img{position:relative;z-index:2;width:100%;height:100%;display:block;border-radius:50%}
.retrato:before{content:"";position:absolute;inset:-22px;border-radius:50%;
 border:1px solid rgba(209,176,78,.75)}
.retrato:after{content:"";position:absolute;inset:-58px;border-radius:50%;
 background:radial-gradient(circle,rgba(46,12,94,.10) 0%,rgba(46,12,94,0) 68%)}

/* acordeao de perguntas. O texto da resposta ja vem no codigo-fonte, sem
   JavaScript, como a regra 76 exige. */
details{background:#fff;border:1px solid var(--areia-borda);border-radius:12px;overflow:hidden}
details[open]{border-color:rgba(209,176,78,.62)}
summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;align-items:flex-start;
 gap:16px;font-size:16px;font-weight:500;color:var(--violeta);line-height:1.45}
summary::-webkit-details-marker{display:none}
/* ícone "+" que vira "−" (sinal de menos, U+2212). O texto alternativo
   vazio depois da barra tira o ícone da leitura: o leitor de tela já anuncia
   aberto e fechado pelo próprio <details> (2026-10-20). A primeira
   declaração fica para navegador sem essa sintaxe. */
summary:after{content:"+";content:"+" / "";margin-left:auto;font-size:22px;line-height:1;color:var(--dourado);
 font-weight:400;flex:none}
details[open] summary:after{content:"\2212";content:"\2212" / ""}
details p{padding:0 24px 24px 24px;font-size:15px;line-height:1.8;color:#57525F;font-weight:300}
/* link dentro da resposta: o mesmo da prosa (.texto a), porque o FAQ fica fora de .texto */
details p a:not([class]){color:var(--violeta);text-decoration:underline;text-underline-offset:3px;
 text-decoration-color:rgba(209,176,78,.7)}
details p a:not([class]):hover{background:rgba(209,176,78,.16)}
/* pergunta marcada como heading real dentro do summary, sem mudar a aparencia */
summary h3{font:inherit;color:inherit;margin:0;letter-spacing:inherit}

/* ---------- MARCADOR DE DADO PENDENTE ----------
   Precisa incomodar. Enquanto houver um destes na pagina, ela nao publica. */
.pendente{
 background:#FFE94A;color:#3A2A00;
 font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 font-size:.84em;font-weight:700;line-height:1.4;
 padding:2px 8px;border-radius:4px;border:2px dashed #8A6400;
 box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ---------- CASCA DE PAGINA INTERNA ----------
   Capa escura, corpo em areia e bloco de perguntas. Compartilhado por todas
   as paginas internas. Promovido de sobre.css quando a segunda pagina
   interna passou a usar o mesmo desenho. */
/* A barra do topo flutua por cima da capa (desde 2026-10-20). A borda de cima,
   transparente e com o fundo pintado por baixo, e o respiro da barra: fica
   fora do padding, que as telas menores trocam. */
.capa{position:relative;overflow:hidden;padding:70px 0 88px;
 border-top:var(--topo-espaco) solid transparent;background-origin:border-box;
 background:linear-gradient(150deg,#150826 0%,#1E0A38 55%,#2B1049 100%)}
.capa:before{content:"";position:absolute;right:-6%;top:-40%;width:720px;height:720px;
 border-radius:50%;z-index:0;
 background:radial-gradient(circle,rgba(209,176,78,.12) 0%,rgba(209,176,78,0) 62%)}
.capa .wrap{position:relative;z-index:2}
.capa h1{max-width:900px;margin-bottom:26px}
/* título em duas vozes na capa das páginas internas: a pergunta é longa, e
   o corpo em caixa alta fica um degrau abaixo do hero da home para caber
   em uma linha por voz */
.capa .titulo{margin-bottom:22px}
.capa .titulo .l2,.capa .titulo .l3{font-size:clamp(28px,3.2vw,52px)}
.resumo{font-size:19px;line-height:1.7;color:rgba(255,255,255,.84);font-weight:300;
 max-width:760px}
.autoria{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:34px;padding-top:24px;
 border-top:1px solid rgba(255,255,255,.14);font-size:13.5px;
 color:rgba(255,255,255,.62);font-weight:300;max-width:900px}
.autoria b{color:#fff;font-weight:500}

.corpo{background:linear-gradient(170deg,var(--areia) 0%,var(--areia-media) 100%);
 color:#2A2731;padding:96px 0 100px}

.texto h2{margin:0 0 16px;max-width:820px}
.texto h2:not(:first-child){margin-top:52px}
.texto p{font-size:17px;line-height:1.85;color:#57525F;font-weight:300;max-width:760px;
 margin-bottom:18px}
/* Link de prosa. O :not([class]) e essencial, nao e enfeite.
   .texto abriga prosa e tambem componentes, e o botao .b3 da secao Sobre da
   home e um <a> dentro dela. Como ".texto a" tem especificidade 0,1,1 e
   ".b3" tem 0,1,0, a regra de prosa vencia e roubava color e
   text-decoration do botao: o rotulo ficava violeta sobre fundo violeta,
   invisivel, com um sublinhado atravessando o bloco.
   Componente tem classe; prosa nao tem. A regra so pega prosa. */
.texto a:not([class]){color:var(--violeta);text-decoration:underline;text-underline-offset:3px;
 text-decoration-color:rgba(209,176,78,.7)}
.texto a:not([class]):hover{background:rgba(209,176,78,.16)}
.texto ul{list-style:none;margin:0 0 18px;max-width:760px;display:grid;gap:11px}
.texto li{position:relative;padding-left:20px;font-size:16px;line-height:1.7;color:#57525F;
 font-weight:300}
.texto li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;
 border-radius:50%;background:var(--dourado)}
.texto li b{color:#3F3A4A;font-weight:600}

.aviso{background:#fff;border:1px solid var(--areia-borda);border-left:4px solid var(--dourado);
 border-radius:12px;padding:24px 26px;margin:34px 0 0;max-width:760px}
.aviso b{display:block;font-family:'Playfair Display',serif;font-size:20px;font-weight:500;
 color:var(--violeta);margin-bottom:8px}
.aviso p{font-size:15.5px;margin:0}

/* FAQ sempre em areia clara, depois de uma seção branca, areia escura ou
   roxa (a "Para quem" da home, desde 2026-10-18) */
.faqPagina{position:relative;z-index:1;color:#2A2731;padding:88px 0 96px;
 background:linear-gradient(170deg,var(--areia) 0%,var(--areia-media) 100%)}
.faqPagina h2{margin:0 0 12px}
.faqPagina .intro{font-size:16.5px;line-height:1.8;color:#57525F;font-weight:300;
 max-width:700px;margin-bottom:40px}
.listaFaq{display:grid;gap:13px;max-width:900px}

/* trilha de navegação visível. Existe porque a regra 103 proíbe declarar no
   schema o que não está no texto: sem trilha visível, não há BreadcrumbList. */
.trilha{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px;
 font-size:13px;color:rgba(255,255,255,.60);font-weight:300}
.trilha a{color:rgba(255,255,255,.78);text-decoration:none;
 border-bottom:1px solid rgba(209,176,78,.55)}
.trilha a:hover{color:#fff}
.trilha span[aria-current]{color:var(--dourado-cl)}
.trilha .sep{color:rgba(255,255,255,.32)}



/* ======================================================================
   SEÇÕES ALTERNADAS, DIVISORES, CARDS, ASSINATURA E EFEITO DE ENTRADA
   Compartilhados pela home e pela página "Quem sou eu" desde 2026-10-01
   (Parte 4). Vieram de home.css sem alteração de valor. Ritmo: cada H2 na
   sua <section class="sec sec--*">, nunca dois fundos iguais vizinhos.
   Divisores: .fio (fio dourado no alto) entre fundos claros e .diagonal
   (corte nas duas bordas) na seção escura.
   ====================================================================== */

/* ---------- SEÇÕES ---------- */
.sec{position:relative;z-index:1;padding:92px 0 96px;color:#2A2731}
.sec--areia{background:linear-gradient(170deg,var(--areia) 0%,var(--areia-media) 100%)}
.sec--branca{background:#fff}
.sec--areia-escura{background:var(--areia-escura)}
.sec--escura{background:linear-gradient(160deg,var(--noite) 0%,var(--violeta) 100%);color:#fff}

/* seção escura: a prosa de base.css é pensada para fundo claro */
.sec--escura h2{color:#fff}
.sec--escura h2 em{color:var(--dourado-cl);box-shadow:none}
.sec--escura .texto p{color:rgba(255,255,255,.80)}
.sec--escura .texto a:not([class]){color:var(--dourado-cl);text-decoration-color:rgba(209,176,78,.7)}
.sec--escura .texto a:not([class]):hover{background:rgba(209,176,78,.18)}

/* marca d'água: o símbolo da marca, grande e quase transparente, no canto.
   Decorativa, por pseudo-elemento, fora da árvore de acessibilidade. */
.sec--marca{overflow:hidden}
.sec--marca:after{content:"";position:absolute;right:-140px;top:-90px;width:640px;height:640px;
 background:url("/assets/logo/simbolo_dourado.svg") no-repeat center/contain;opacity:.07;pointer-events:none}
.sec--marca .wrap{position:relative;z-index:1}

/* fio dourado no alto da seção, na largura da faixa central */
.fio:before{content:"";position:absolute;left:var(--lateral);right:var(--lateral);top:0;height:1px;
 background:linear-gradient(90deg,rgba(209,176,78,0) 0%,var(--dourado) 18%,var(--dourado) 82%,rgba(209,176,78,0) 100%)}

/* corte diagonal: a seção escura fica por cima das vizinhas e é recortada,
   então os cantos cortados mostram o fundo da seção de cima e o da de baixo */
.diagonal{z-index:2;margin:-3.5vw 0;padding:calc(92px + 3.5vw) 0 calc(96px + 3.5vw);
 clip-path:polygon(0 0,100% 3.5vw,100% 100%,0 calc(100% - 3.5vw))}

/* ---------- CARDS (temas, para quem) ---------- */
.texto .cards{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:18px;margin:26px 0 0;padding:0;max-width:none}
.texto .cards.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
.texto .cards li{padding:26px 26px 24px;background:#fff;border:1px solid var(--areia-borda);
 border-radius:14px;border-top:3px solid var(--dourado);font-size:15.5px;line-height:1.75;
 transition:border-color .25s ease,box-shadow .25s ease}
.texto .cards li:hover{border-color:rgba(209,176,78,.7);border-top-color:var(--dourado);
 box-shadow:0 12px 28px rgba(46,12,94,.08)}
.texto .cards li:before{display:none}
.texto .cards li.pendenteCard{border-top-color:var(--areia-borda);border-style:dashed;background:transparent}
.cards svg{color:var(--dourado);display:block;margin-bottom:14px}
.texto .cards li b{display:block;font-family:'Playfair Display',serif;font-size:20px;
 font-weight:500;color:var(--violeta);margin-bottom:10px;line-height:1.3}
.texto .cards li p{font-size:15.5px;line-height:1.75;margin:0;max-width:none}
/* em secao escura a prosa fica clara, mas o card continua branco: o texto e o
   link de dentro do card voltam para as cores de fundo claro. Sem isto, o
   paragrafo do card saia branco sobre branco (defeito visto em 2026-10-01). */
.sec--escura .texto .cards li,.sec--escura .texto .cards li p{color:#57525F}
.sec--escura .texto .cards li a:not([class]){color:var(--violeta);text-decoration-color:rgba(209,176,78,.7)}

/* ---------- ASSINATURA (autor e datas, regras 77 e 78) ---------- */
.assinatura{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:52px;padding-top:22px;
 border-top:1px solid var(--areia-borda);font-size:13.5px;color:#6B6577;font-weight:300}
.assinatura b{color:#3F3A4A;font-weight:600}
/* assinatura em seção escura ("Para quem" da home, 2026-10-18): as cores da .autoria */
.assinatura.clara{border-top-color:rgba(255,255,255,.16);color:rgba(255,255,255,.66)}
.assinatura.clara b{color:#fff;font-weight:500}
.autoria a,.assinatura a{color:inherit;text-decoration:underline;text-underline-offset:3px;
 text-decoration-color:rgba(209,176,78,.7)}

/* ======================================================================
   REPERTÓRIO DE FORMATOS DE SEÇÃO (2026-10-18, padrão do site; ver o
   CLAUDE.md, seção 5). Toda seção abre com H2 em pergunta e uma frase de
   resposta direta em <p>; o resto do conteúdo vai para um destes formatos.
   Duas seções seguidas nunca usam o mesmo. Nada aqui é clicável, então
   nada reage ao mouse. Todo texto fica em <p>, <li> ou <h3>: o gerador da
   revisão e a IA só leem texto, nunca a ilustração.
     .passos       cards numerados, de 2 a 4 (o número vem do contador)
     .cards-dois   cards com ícone, 2 a 4, cada um com título e lista
     .ilustrada    ilustração SVG decorativa de um lado, texto do outro;
                   no celular a ilustração fica em cima
     .topicos      lista de tópicos com marcador dourado, uma ideia por item
     .destaque     número grande com frase de contexto, texto real no HTML
     .comparacao   duas colunas com H3, separadas por fio dourado
     .anos         lista com marcador de ano, para três ou mais momentos
     .faixa        linha com ícone, para um aviso curto dentro da seção
   ====================================================================== */
.texto h3{font-family:'Playfair Display',serif;font-size:21px;font-weight:500;
 color:var(--violeta);line-height:1.3;margin:0 0 14px}

/* cards numerados */
.texto .passos{list-style:none;counter-reset:passo;display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:22px 0 22px;padding:0;max-width:none}
.texto .passos li{counter-increment:passo;background:#fff;border:1px solid var(--areia-borda);
 border-radius:14px;padding:22px 20px 20px;font-size:15px;line-height:1.7;color:#57525F}
.texto .passos li:before{content:counter(passo);position:static;display:flex;width:34px;height:34px;
 border-radius:50%;background:var(--violeta);color:var(--dourado-cl);align-items:center;
 justify-content:center;font-weight:600;font-size:15px;margin-bottom:12px}
.texto .passos li b{display:block;font-family:'Playfair Display',serif;font-size:18px;
 font-weight:500;color:var(--violeta);margin-bottom:6px}

/* cards com ícone */
.cards-dois{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0 8px}
.cards-dois .card{background:#fff;border:1px solid var(--areia-borda);border-top:3px solid var(--dourado);
 border-radius:14px;padding:26px 28px 22px}
.cards-dois .card > svg{color:var(--dourado);display:block;margin-bottom:12px}
.texto .cards-dois .card p{font-size:15.5px;margin-bottom:12px;max-width:none}
.texto .cards-dois .card p b{display:block;font-family:'Playfair Display',serif;font-size:20px;
 font-weight:500;color:var(--violeta);margin-bottom:6px}
.texto .cards-dois ul{margin:0;max-width:none;gap:8px}
.texto .cards-dois li{font-size:15px}

/* ilustração + texto */
.ilustrada{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;
 margin:26px 0 0}
.ilustrada .ilustracao img{display:block;width:100%;height:auto;border-radius:14px}
.texto .ilustrada p,.texto .ilustrada ul{max-width:none}

/* lista de tópicos */
.texto .topicos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 32px;max-width:none;margin:22px 0 24px}
.texto .topicos li{padding-left:28px;font-size:15.5px}
.texto .topicos li:before{width:9px;height:9px;border-radius:1px;top:9px;left:3px;transform:rotate(45deg);
 box-shadow:0 0 0 3px rgba(209,176,78,.22)}

/* destaque numérico */
.destaque-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;
 margin:26px 0 26px}
.destaque-grid .ilustracao img{display:block;width:100%;height:auto;border-radius:14px}
.texto .destaque{margin:0 0 16px;max-width:none}
.destaque .numero{display:block;font-family:'Archivo',sans-serif;font-weight:800;
 font-size:clamp(52px,6vw,88px);line-height:1;color:var(--violeta);letter-spacing:-.01em}
.destaque .contexto{display:block;margin-top:10px;font-size:17px;color:#57525F}
.texto .destaque-grid ul{max-width:none}

/* comparação lado a lado */
.comparacao{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:28px 0 24px}
.comparacao .coluna{padding:4px 36px 4px 0}
.comparacao .coluna + .coluna{padding:4px 0 4px 36px;border-left:1px solid var(--dourado)}
.texto .comparacao ul{margin:0;max-width:none}
.texto .comparacao li{font-size:15.5px}

/* lista com marcador de ano */
.texto .anos{list-style:none;display:grid;gap:16px;margin:22px 0 24px;padding:0;max-width:900px}
.texto .anos li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;align-items:start;padding:0}
.texto .anos li:before{display:none}
.anos .ano{display:flex;align-items:center;justify-content:center;height:40px;border-radius:999px;
 background:var(--violeta);color:var(--dourado-cl);font-family:'Archivo',sans-serif;font-weight:800;font-size:16px}
.texto .anos li p{margin:6px 0 0;font-size:16px;max-width:none}

/* linha com ícone */
.texto .faixa{display:flex;gap:14px;align-items:flex-start;max-width:none;margin:8px 0 0;
 padding:16px 22px;border-radius:10px;background:rgba(209,176,78,.13);border-left:4px solid var(--dourado)}
.faixa svg{flex:none;color:var(--violeta);margin-top:5px}
.texto .faixa b{color:var(--violeta)}

@media (max-width:1080px){
 .texto .passos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
 .texto .passos,.cards-dois,.texto .topicos{grid-template-columns:1fr}
 .ilustrada,.destaque-grid{grid-template-columns:1fr;gap:24px}
 .ilustrada .ilustracao,.destaque-grid .ilustracao{max-width:420px}
 .comparacao{grid-template-columns:1fr;gap:22px}
 .comparacao .coluna,.comparacao .coluna + .coluna{padding:0}
 .comparacao .coluna + .coluna{border-left:0;border-top:1px solid var(--dourado);padding-top:22px}
 .texto .anos li{grid-template-columns:62px minmax(0,1fr);gap:14px}
}

/* ---------- FAQ EM DUAS COLUNAS ----------
   Criado na home em 2026-10-20 e trazido para cá no mesmo dia, quando a
   página Aprendizado passou a usar o mesmo formato.
   A .faq-grid contém só as duas colunas. A coluna fixa só pode andar dentro
   da grade: qualquer outra coisa posta na grade (como o fecho com o botão
   para os cursos) fica embaixo dela ao rolar. Foi o erro da Aprendizado,
   corrigido no mesmo dia; o scripts/lib/limites.js passou a conferir isso.
   À esquerda o H2, a frase, a ilustração e o convite; à direita as
   perguntas. A coluna da esquerda só fica fixa ao rolar quando a tela tem
   largura e altura para mostrá-la inteira, senão o convite ficaria cortado.
   Nada anima ao abrir: a resposta aparece de forma nativa, com ou sem JS. */
.faqDuas .faq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:64px;align-items:start}
.faqDuas .intro{margin-bottom:30px}
.faq-ilus{border-radius:16px;overflow:hidden;margin:0 0 26px;max-width:440px}
.faq-ilus img{display:block;width:100%;height:auto}
.faq-convite{font-size:16px;line-height:1.7;color:#3F3A4A;margin:0}
.faq-convite a{color:var(--violeta);font-weight:600;text-decoration:underline;text-underline-offset:3px;
 text-decoration-thickness:1px}
.faq-convite a:hover{background:rgba(209,176,78,.16)}
.faqDuas .listaFaq{gap:16px;max-width:none}
.faqDuas details{border-radius:16px}
.faqDuas summary{padding:26px 30px}
.faqDuas details p{padding:0 30px 28px}
/* A coluna fixa para abaixo da barra do topo (desde 2026-10-20). A altura
   minima da tela em que ela liga cresceu na mesma conta. */
@media (min-width:1001px) and (min-height:840px){
 .faq-lado{position:sticky;top:calc(var(--topo-espaco) + 24px)}
}

@media (max-width:1000px){
 /* FAQ em uma coluna, sem fixar: a coluna da esquerda se desfaz e o
    convite vai para depois das perguntas */
 .faqDuas .faq-grid{grid-template-columns:1fr;gap:0}
 .faq-lado{display:contents}
 .faq-ilus{max-width:380px}
 .faq-convite{order:1;margin-top:26px}
}
@media (max-width:600px){
 .faqDuas summary{padding:20px 20px}
 .faqDuas details p{padding:0 20px 22px}
 .faq-ilus{margin-bottom:22px}
}

/* fecho com o botão para os cursos (medida protetiva e Aprendizado) */
.fecho{margin-top:44px;padding-top:30px;border-top:1px solid var(--areia-borda)}
.texto .fecho p,.fecho p{margin-bottom:0}
.fecho .cta{margin-top:22px}
@media (max-width:600px){
 .fecho .cta{width:100%;justify-content:center;padding:18px 24px;font-size:14.5px}
}

/* texto só para leitor de tela (antes repetido em home.css e cursos.css) */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
 clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- EFEITO DE ENTRADA ----------
   Só existe sob html.js-anima. O deslocamento é de 20px nos blocos e 14px nos
   itens escalonados, nunca mais que 24px; a duração fica abaixo de meio
   segundo. .entrou é posta pelo observador uma vez e nunca é tirada. */
.js-anima .anima{opacity:0;transform:translateY(20px);transition:opacity .48s ease,transform .48s ease}
.js-anima .anima.entrou{opacity:1;transform:none}
.js-anima .escalona>li{opacity:0;transform:translateY(14px);transition:opacity .42s ease,transform .42s ease}
.js-anima .escalona.entrou>li{opacity:1;transform:none}
.js-anima .escalona.entrou>li:nth-child(2){transition-delay:.07s}
.js-anima .escalona.entrou>li:nth-child(3){transition-delay:.14s}
.js-anima .escalona.entrou>li:nth-child(4){transition-delay:.21s}
.js-anima .escalona.entrou>li:nth-child(5){transition-delay:.28s}
/* os cards têm transição própria de hover; depois de entrar, ela volta a valer */
.js-anima .cards.entrou>li{transition:opacity .42s ease,transform .42s ease,border-color .25s ease,box-shadow .25s ease}
@media (prefers-reduced-motion:reduce){
 .js-anima .anima,.js-anima .escalona>li{opacity:1;transform:none;transition:none}
}

/* responsivo do que é compartilhado */
@media (max-width:1080px){
 .sec{padding:72px 0 76px}
 .diagonal{padding:calc(72px + 3.5vw) 0 calc(76px + 3.5vw)}
 .texto .cards.tres{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sec--marca:after{width:460px;height:460px;right:-120px;top:-60px}
}
@media (max-width:900px){
 .sec{padding:58px 0 62px}
 .diagonal{margin:-5vw 0;padding:calc(58px + 5vw) 0 calc(62px + 5vw);
  clip-path:polygon(0 0,100% 5vw,100% 100%,0 calc(100% - 5vw))}
 .texto .cards,.texto .cards.tres{grid-template-columns:1fr}
 .texto .cards li{padding:22px 20px 20px}
 .sec--marca:after{width:320px;height:320px;right:-100px;top:-40px}
}

/* ---------- BARRA DO TOPO ----------
   Pilula creme flutuante com o monograma num circulo no centro, desde
   2026-10-20 (substituiu a barra violeta e a sub-barra). Fica fixa ao rolar
   so com a tela de 500px de altura ou mais; abaixo disso rola com a pagina,
   com a mesma forma, para nao comer a tela baixa nem a tela com zoom.
   Contrastes sobre o creme (#FBF8F2): links violeta 14,89:1; Emergencia
   contra o creme 4,70:1 (minimo 3:1); fio da pagina atual em --dourado-esc
   3,30:1 (o --dourado daria 1,97:1). O fio de 1px em --areia-borda separa
   a pilula das secoes claras, onde o creme contra o fundo da 1,05:1.
   Ponto de quebra: 1000px, desde 2026-10-20 (era 860px). Acima, os quatro
   links a esquerda do circulo e os icones e o Emergencia a direita; abaixo,
   botao de menu, circulo e Emergencia. Com quatro links a esquerda, em
   861px "Aprendizado" entrava 39px no circulo; em 1001px sobram uns 30px
   (npm run medir topbar). */
.topo{position:absolute;top:var(--barra-topo);left:var(--lateral);right:var(--lateral);z-index:50}
@media (min-height:500px){
 .topo{position:fixed}
 html{scroll-padding-top:calc(var(--topo-espaco) + 16px)}
}
.barra{position:relative;height:var(--barra-h);display:flex;align-items:center;gap:20px;
 padding:0 10px 0 30px;background:var(--areia);border:1px solid var(--areia-borda);border-radius:999px;
 box-shadow:0 8px 26px rgba(18,4,31,.16),0 1px 3px rgba(18,4,31,.10)}
.marca{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
 width:var(--circulo);height:var(--circulo);border-radius:50%;display:flex;align-items:center;justify-content:center;
 background:var(--areia);border:1px solid var(--areia-borda);color:var(--violeta);
 box-shadow:0 6px 18px rgba(18,4,31,.16)}
.marca svg{width:58%;height:auto;display:block}
.marca:hover{color:var(--violeta-med)}
.menu{flex:1;min-width:0;display:flex;align-items:center}
.menu ul{list-style:none;display:flex;align-items:center;gap:30px}
.menu a{display:block;padding:6px 0 3px;font-size:14.5px;font-weight:600;color:var(--violeta);
 text-decoration:none;white-space:nowrap;border-bottom:3px solid transparent}
.menu a:hover{color:var(--violeta-med);border-bottom-color:var(--areia-borda)}
.menu a[aria-current]{border-bottom-color:var(--dourado-esc)}
/* Icones do Instagram e do YouTube, desde 2026-10-20: a direita no
   desktop, numa linha no fim do painel do menu ate 1000px. Alvo de 44px; o
   desenho tem 22px (Instagram) e 24x17px (YouTube), o mesmo peso visual. */
.menu .redes{margin-left:auto;display:flex;align-items:center;gap:2px}
.menu .redes a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
 padding:0;border:0;border-radius:50%;color:var(--violeta)}
.menu .redes a:hover{color:var(--violeta-med);background:var(--areia-media)}
.menu .redes svg{display:block}
.topo a:focus-visible,.topo button:focus-visible{outline:3px solid var(--violeta);outline-offset:3px}
.marca:focus-visible{outline-offset:2px}
.emergencia{flex:none}
.topo .pill--emergencia{padding:11px 20px;font-size:14px;font-weight:600;line-height:18px}
.menu-link,.menu-botao{display:none}
/* A lupa de busca da referencia nao tem CSS aqui de proposito: nao e
   emitida enquanto nao houver busca. */

/* ---------- BOTAO FLUTUANTE DE WHATSAPP ----------
   So existe no HTML quando o campo 3.2 do registro canonico estiver
   resolvido. A classe .com-zap no body sinaliza que ele foi emitido, e e
   ela que libera os respiros abaixo. Sem numero, nem o botao nem os
   respiros entram, e o layout fica exatamente como estava. */
.zap{position:fixed;right:24px;bottom:24px;z-index:60;
 width:56px;height:56px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:#25D366;color:#fff;text-decoration:none;
 box-shadow:0 6px 20px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.16)}
.zap:hover{background:#1EBE5B}
.zap:focus-visible{outline:3px solid var(--dourado-cl);outline-offset:3px}
.zap svg{width:32px;height:32px;display:block;fill:currentColor}

/* O desvio .zap--hero, que afastava o botao do card de areas do hero da
   home, saiu em 2026-09-30 (Parte 3) junto com o card. */

/* respiro no rodape, para o botao nunca cobrir de forma permanente a ultima
   linha da pagina. O acordeao nao precisa: sempre ha rodape depois dele. */
.com-zap footer{padding-bottom:104px}

@media (max-width:900px){
 .zap{right:16px;bottom:16px;width:52px;height:52px}
 .zap svg{width:29px;height:29px}
 .com-zap footer{padding-bottom:92px}
}

/* ---------- RODAPE ---------- */
footer{background:#150826;padding:74px var(--lateral) 34px;position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:56px;
 margin:0 0 54px}
.fmarca .fl{width:200px} .fmarca .fl svg{width:100%;height:auto;display:block}
.fmarca p{font-size:14px;line-height:1.8;color:rgba(255,255,255,.58);font-weight:300;
 margin-top:24px;max-width:300px}
footer h5{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dourado);
 margin-bottom:20px;font-weight:600}
footer a,footer .li{display:block;font-size:14.5px;color:rgba(255,255,255,.66);
 text-decoration:none;margin-bottom:11px;font-weight:300}
footer a:hover{color:#fff}
.fcta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:14px;
 padding:26px}
.fcta b{font-family:'Playfair Display',serif;font-size:20px;font-weight:500;color:#fff;
 display:block;margin-bottom:10px}
.fcta span{font-size:14px;color:rgba(255,255,255,.62);font-weight:300;display:block;
 margin-bottom:18px;line-height:1.7}
.fcta a{background:var(--dourado);color:#25084F;padding:14px 22px;border-radius:10px;text-decoration:none;
 font-size:14px;font-weight:600;display:inline-flex;margin:0}
.fbase{border-top:1px solid rgba(255,255,255,.10);padding-top:26px;
 display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
 font-size:12.5px;color:rgba(255,255,255,.42)}
.fbase a{display:inline;margin:0;font-size:12.5px;color:rgba(255,255,255,.42)}

/* ---------- RESPONSIVO ---------- */
@media (max-width:1250px){
 :root{--gutter:24px}
 .pill{padding:12px 20px;font-size:13.5px}
}
@media (max-width:1080px){
 h2{max-width:none}
 .retrato{max-width:340px}
 .capa{padding:56px 0 68px} .resumo{font-size:17.5px}
 .corpo{padding:70px 0 74px}
 .texto h2,.texto p,.texto ul,.aviso{max-width:none}
 .faqPagina{padding:64px 0 70px}
 footer{padding-top:58px;padding-bottom:30px} .fgrid{grid-template-columns:1fr 1fr;gap:38px}
}
@media (max-width:900px){
 .pill{padding:11px 18px;font-size:13px}
 h1{font-size:33px;line-height:1.18;text-shadow:0 3px 18px rgba(0,0,0,.55)}
 h1 br{display:none}
 .retrato{max-width:270px}
 summary{font-size:15px;padding:18px 18px}
 details p{padding:0 18px 20px;font-size:14.5px}
 .capa{padding:44px 0 54px} .resumo{font-size:16.5px}
 .corpo{padding:56px 0 60px}
 .texto h2:not(:first-child){margin-top:40px}
 .texto p{font-size:16px;line-height:1.8}
 .texto li{font-size:15.5px}
 .aviso{padding:20px 20px}
 .faqPagina{padding:52px 0 58px}
 .autoria{gap:8px 20px;font-size:13px}
 footer{padding-top:48px;padding-bottom:26px} .fgrid{grid-template-columns:1fr;gap:32px;margin-bottom:36px}
}

/* Barra do topo ate 1000px: botao de menu a esquerda, circulo no centro e
   Emergencia a direita, numa pilula mais baixa. Links e icones vao para um painel
   abaixo da pilula, aberto pelo botao (script em base.njk). Sem JS o botao
   e um link "Menu" para a navegacao do rodape. Alvos de toque de 44px; cabe
   a partir de 320px. */
@media (max-width:860px){
 :root{--gutter:18px}
}
@media (max-width:1000px){
 :root{--barra-topo:10px;--barra-h:56px;--circulo:64px}
 .barra{padding:0 5px;gap:8px;justify-content:space-between}
 .menu-link,.menu-botao{display:flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;height:44px;padding:0 10px;border-radius:999px;color:var(--violeta);
  font:600 14px 'Montserrat',sans-serif;text-decoration:none;background:none;border:0;cursor:pointer}
 .menu-botao{width:44px;padding:0}
 .menu-link[hidden],.menu-botao[hidden]{display:none}
 .menu-botao:hover,.menu-link:hover{background:var(--areia-media)}
 .menu{display:none;position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:3;
  max-height:calc(100vh - var(--topo-espaco) - 16px);max-height:calc(100dvh - var(--topo-espaco) - 16px);
  overflow-y:auto;padding:8px;background:var(--areia);border:1px solid var(--areia-borda);border-radius:20px;
  box-shadow:0 18px 40px rgba(18,4,31,.30)}
 .topo.menu-aberto .menu{display:block}
 .menu ul{flex-direction:column;align-items:stretch;gap:2px}
 .menu .redes{margin:6px 0 0;padding:6px 8px 0;gap:8px;border-top:1px solid var(--areia-borda)}
 .menu a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:12px;
  border-bottom:0;border-left:3px solid transparent;font-size:15.5px}
 .menu a:hover{background:var(--areia-media)}
 .menu a[aria-current]{border-left-color:var(--dourado-esc);background:var(--areia-media)}
 .topo .pill--emergencia{padding:13px 16px;font-size:13.5px}
 .painel-emergencia{right:-5px;top:calc(100% + 13px)}
}
@media (max-width:1000px) and (prefers-reduced-motion:no-preference){
 .topo.menu-aberto .menu{animation:menu-abre .16s ease-out}
}
@keyframes menu-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (max-width:520px){
 :root{--gutter:14px}
 .topo .pill--emergencia{padding:13px 14px;font-size:13px}
}
/* Abaixo de 360px o Emergencia encostava no circulo (1px a 320px): a
   pilula ganha 4px de cada lado e o botao aperta. */
@media (max-width:359px){
 .topo{left:10px;right:10px}
 .topo .pill--emergencia{padding:13px 11px;font-size:12.5px}
}