/* =========================================================
   Kuma Tech · página Sobre · celular primeiro
   Usa os tokens e a base do estilo.css; aqui só o que é desta página.
   As opções de desenho que não foram escolhidas estão guardadas em exploracao/sobre-previa/.
   ========================================================= */

/* entrada suave dos blocos (o sobre.js marca .vis quando o bloco aparece; sem JS nada fica escondido) */
html.js .rv{opacity:0;translate:0 14px;transition:opacity .7s var(--sai), translate .7s var(--sai)}
html.js .rv.vis{opacity:1;translate:none}

/* ---------- abertura: a frase manda; ao lado, só três números ---------- */
.s-abre{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(110% 60% at 18% 8%, oklch(0.42 0.27 268 / .32), transparent 62%), radial-gradient(60% 40% at 100% 100%, oklch(0.62 0.22 293 / .12), transparent 70%), var(--breu)}
.s-abre .envolve{display:grid;gap:var(--e-7);padding-top:calc(var(--topo) + var(--e-7));padding-bottom:var(--e-7)}
.s-abre h1{font-size:var(--t-3xl);font-weight:500;line-height:1.04;letter-spacing:-.028em}
.s-abre h1 b{font-weight:600;color:var(--ciano)}
.s-abre h1 .selo{display:flex;width:max-content;margin-bottom:var(--e-5);letter-spacing:normal}   /* o selo faz parte do título: é ele que diz "Sobre a Kuma Tech" */
.s-abre .sub{color:var(--texto-2);font-size:var(--t-l);line-height:1.6;max-width:48ch;margin-top:var(--e-4)}
.s-arte{display:grid;gap:var(--e-5);align-content:center}
.s-arte li{display:grid;gap:2px;padding-left:var(--e-4);border-left:1px solid var(--linha-forte)}
.s-arte b{font:600 clamp(40px, 9vw, 64px)/1 var(--f-titulo);background:linear-gradient(120deg, var(--celeste), var(--ciano));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-arte span{color:var(--texto-2);font-size:var(--t-s)}
@media (max-width:899px){   /* no celular os três números ficam lado a lado, em uma linha */
  .s-arte{grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--e-3);align-items:start;padding:0}
  .s-arte li{padding-left:var(--e-3)}
  .s-arte b{font-size:clamp(28px, 8.4vw, 56px)}
}

/* ---------- o nome ---------- */
.s-nome .envolve{display:grid;gap:var(--e-6)}
.panda-cheio{display:block;width:min(60%, 260px);aspect-ratio:256 / 240;background:linear-gradient(135deg, var(--anil), var(--azul) 45%, var(--celeste));-webkit-mask:url(/assets/marca/kuma-panda.svg) center / contain no-repeat;mask:url(/assets/marca/kuma-panda.svg) center / contain no-repeat}
.s-nome p{margin-top:var(--e-4);max-width:58ch;color:var(--texto-2);font-size:var(--t-l);line-height:1.65}
.s-nome p b{color:var(--texto);font-weight:500}

/* ---------- linha do tempo: o fio de dados acende conforme a rolagem e cada marco liga ao ser alcançado ---------- */
.lt{position:relative;display:grid;gap:var(--e-6);list-style:none;padding:0 0 0 32px;margin-top:var(--e-7)}
.lt :is(time,.marco){display:block;font:600 var(--t-xs)/1 var(--f-titulo);letter-spacing:.08em;color:var(--ciano)}
.lt h3{font-size:var(--t-l);margin-top:var(--e-2)}
.lt p{margin-top:var(--e-2);color:var(--texto-2);font-size:var(--t-s);max-width:52ch}
.lt::before,.lt::after{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--linha-forte)}
.lt::after{background:linear-gradient(var(--anil), var(--celeste), var(--ciano));transform-origin:top;scale:1 var(--lt, 0)}
.lt li{position:relative}
.lt li::before{content:"";position:absolute;left:-32px;top:2px;width:11px;height:11px;border-radius:50%;border:1px solid var(--linha-forte);background:var(--breu);transition:border-color .4s var(--sai), background .4s var(--sai), box-shadow .4s var(--sai)}
html.js .lt li{opacity:.45;transition:opacity .5s var(--sai)}   /* só apaga os marcos se o script estiver lá para acendê-los */
html.js .lt li.aceso{opacity:1}
.lt li.aceso::before{border-color:var(--ciano);background:var(--ciano);box-shadow:0 0 12px var(--ciano)}

/* ---------- quem conduz: retrato grande, em cores (o fundo traz as cores da marca), com o nome por cima ---------- */
.quem{display:grid;gap:var(--e-6);margin-top:var(--e-7)}
.quem .time h3{font-size:var(--t-xl)}
.quem .time p{margin-top:var(--e-3);color:var(--texto-2);max-width:52ch}
.fund{position:relative}
.fund h3{font-size:var(--t-xl)}
.fund .cargo{color:var(--ciano);font:500 var(--t-s)/1.3 var(--f-texto);margin-top:2px}
.fund .bio{color:var(--texto-2);font-size:var(--t-s);margin-top:var(--e-2);max-width:46ch}
.fund .texto{position:absolute;left:var(--e-5);right:var(--e-5);bottom:var(--e-5)}
.retrato{position:relative;margin:0;overflow:hidden;aspect-ratio:4 / 5;border:1px solid var(--linha);border-radius:var(--r-l);background:var(--noite)}
.retrato img{display:block;width:100%;height:100%;object-fit:cover}
.retrato::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%, oklch(0.10 0.02 262 / .92))}   /* escurece a base, onde ficam o nome e o cargo */

/* ---------- como trabalhamos ---------- */
.etapas{list-style:none;padding:0;margin-top:var(--e-7);display:grid;gap:var(--e-4);counter-reset:et}
.etapas li{counter-increment:et;padding:var(--e-5);border:1px solid var(--linha);border-radius:var(--r-l);background:var(--noite)}
.etapas li::before{content:counter(et, decimal-leading-zero);display:block;font:600 var(--t-s)/1 var(--f-titulo);letter-spacing:.08em;color:var(--ciano);margin-bottom:var(--e-3)}
.etapas h3{font-size:var(--t-l)}
.etapas p{margin-top:var(--e-2);color:var(--texto-2);font-size:var(--t-s)}

/* ---------- valores ---------- */
.principios{list-style:none;padding:0;margin-top:var(--e-7);display:grid;gap:var(--e-3);counter-reset:pr}
.principios li{counter-increment:pr;padding:var(--e-5);border:1px solid var(--linha);border-radius:var(--r-l);background:radial-gradient(120% 90% at 100% 0, oklch(0.42 0.27 268 / .2), transparent 60%), var(--noite)}
.principios li::before{content:counter(pr, decimal-leading-zero);display:block;margin-bottom:var(--e-3);font:600 var(--t-xs)/1 var(--f-titulo);letter-spacing:.08em;color:var(--ciano)}
.principios h3{font-size:var(--t-l)}
.principios p{margin-top:var(--e-2);color:var(--texto-2);font-size:var(--t-s)}

/* ---------- no que acreditamos ---------- */
.valores{list-style:none;padding:0;margin-top:var(--e-7);display:grid;gap:0;border-top:1px solid var(--linha)}
.valores li{display:grid;gap:var(--e-2);padding-block:var(--e-5);border-bottom:1px solid var(--linha)}
.valores h3{font-size:var(--t-xl)}
.valores p{color:var(--texto-2);max-width:56ch}

/* ---------- onde atendemos ---------- */
.onde .envolve{display:grid;gap:var(--e-6)}
.agora{display:flex;align-items:center;gap:10px;margin-top:var(--e-4);color:var(--texto);font:500 var(--t-s)/1.45 var(--f-texto)}
.agora:has([data-agora]:empty){display:none}   /* a frase da hora vem do script */
.astro{flex:none;width:14px;height:14px;border-radius:50%;background:oklch(0.86 0.15 92);box-shadow:0 0 14px oklch(0.86 0.15 92 / .8)}   /* sol */
.agora.noite .astro{background:none;box-shadow:inset -5px -1px 0 0 var(--texto-2)}                                                  /* lua */
.legenda{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-4);list-style:none;padding:0;margin-top:var(--e-4);color:var(--texto-2);font-size:var(--t-s)}
.legenda li{display:inline-flex;align-items:center;gap:8px}
.sel{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;font:700 11px/1 var(--f-texto)}
.sel.c{background:var(--ciano);color:#06121f}
.sel.p{background:var(--violeta);color:#fff}
.sel.b{width:12px;height:12px;margin:4px;background:var(--azul);box-shadow:0 0 0 3px oklch(0.56 0.24 262 / .35)}
/* o globo e o mapa dividem o mesmo lugar; os botões .troca escolhem qual aparece (o globo é o padrão) */
html:not(.js) :is(.onde-arte,.legenda){display:none}   /* o desenho depende do script; sem ele a legenda não tem o que explicar */
.onde-arte{display:grid;gap:var(--e-4);justify-items:center}
.troca{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--linha);border-radius:999px;background:var(--noite)}
.troca button{min-height:36px;padding:0 var(--e-4);border-radius:999px;color:var(--texto-2);font:500 var(--t-s)/1 var(--f-texto)}
.troca button[aria-pressed="true"]{background:var(--azul);color:#fff}
.onde-arte canvas{display:block}
.onde-arte canvas[hidden]{display:none}
.globo{width:min(100%, 540px);aspect-ratio:1;cursor:grab;touch-action:pan-y}
.mapa-plano{width:100%;aspect-ratio:3 / 2;border:1px solid var(--linha);border-radius:var(--r-l);background:var(--noite)}

/* ---------- Instagram (a grade de publicações entra quando a API for ligada: desenho em exploracao/sobre-previa/) ---------- */
.insta-topo{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:var(--e-4)}
.insta-foto{width:56px;height:56px;border-radius:50%;border:1px solid var(--linha-forte);background:#fff;object-fit:cover}
.insta-topo h2{font-size:var(--t-xl)}
.insta-topo p{margin-top:2px;color:var(--texto-2);font-size:var(--t-s)}
.insta-topo .botao{grid-column:1 / -1}

/* ---------- próximos passos e perguntas ---------- */
.s-futuro p{margin-top:var(--e-4);max-width:60ch;color:var(--texto-2);font-size:var(--t-l);line-height:1.65}
.sobre .perguntas{margin-top:var(--e-6)}
.atualizado{margin-top:var(--e-5);color:var(--texto-2);font-size:var(--t-xs)}

/* =========================================================
   telas maiores
   ========================================================= */
@media (min-width:900px){
  .s-abre .envolve{grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);align-items:center;min-height:min(88svh, 780px);padding-bottom:var(--e-8)}
  .s-nome .envolve{grid-template-columns:minmax(0, .7fr) minmax(0, 1.3fr);align-items:center;gap:var(--e-8)}
  .panda-cheio{width:min(100%, 300px);justify-self:center}
  .lt{max-width:760px}
  .quem{grid-template-columns:minmax(0, 440px) minmax(0, 1fr);align-items:center;gap:var(--e-8)}
  .etapas{grid-template-columns:repeat(4, 1fr)}
  .principios{grid-template-columns:repeat(6, 1fr)}   /* cinco cartões: três em cima, dois embaixo */
  .principios li{grid-column:span 2}
  .principios li:nth-child(n+4){grid-column:span 3}
  .valores{grid-template-columns:1fr 1fr;column-gap:var(--e-8)}
  .onde .envolve{grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);align-items:center;gap:var(--e-8)}
  .insta-topo{grid-template-columns:auto minmax(0, 1fr) auto}
  .insta-topo .botao{grid-column:auto}
}

/* =========================================================
   certificações: um baralho de cartas escolhe a plataforma; embaixo, o hall com os quadros dela.
   Cada quadro tem a sua luminária, a luz que desce dela e uma plaquinha embaixo.
   ========================================================= */
.cert [hidden]{display:none !important}   /* vence o display das listas, que têm seletor mais forte */
html:not(.js) .cert [data-painel][hidden]{display:revert !important}   /* sem JavaScript não há como trocar de carta: aparecem todas as plataformas */
html:not(.js) .cert-cartas{display:none}
.cert-topo{display:grid;gap:var(--e-5)}

/* o baralho: a carta escolhida fica na frente (--i 0); as outras, atrás, cada uma um pouco mais alta e girada */
.cert-cartas{position:relative;width:212px;height:80px;margin:58px 18px 0 0}   /* a folga de cima e do lado é para as cartas de trás */
.carta{--i:0;position:absolute;inset:0;z-index:calc(10 - var(--i));display:grid;place-items:center;overflow:hidden;padding:0;border-radius:4.1% / 10.8%;background:#fff;cursor:pointer;
  translate:calc(var(--i) * 14px) calc(var(--i) * -52px);rotate:calc(var(--i) * 3deg);filter:brightness(calc(1 - var(--i) * .3));
  transition:translate .5s var(--sai), rotate .5s var(--sai), filter .5s var(--sai)}
.carta:nth-child(2){--i:1}
.carta:nth-child(3){--i:2}
.carta img{display:block;width:100%;height:auto}
.carta.logo img{width:62%}
.carta small{position:absolute;top:6px;right:8px;padding:3px 7px;border-radius:999px;background:var(--noite);color:var(--texto);font:500 10px/1 var(--f-texto)}
.carta[aria-pressed="false"]:is(:hover,:focus-visible){translate:calc(var(--i) * 14px) calc(var(--i) * -52px - 8px);filter:brightness(.9)}
.carta.sobe{animation:carta-sobe .6s var(--sai)}   /* a carta escolhida sai de trás, dá a volta pelo lado e pousa na frente */
@keyframes carta-sobe{0%{translate:calc(var(--de) * 14px) calc(var(--de) * -52px);rotate:calc(var(--de) * 3deg);z-index:1}45%{translate:66% -40px;rotate:10deg;z-index:1}46%{z-index:12}100%{translate:0 0;rotate:0deg;z-index:12}}   /* --de: de que posição a carta saiu */

/* o hall */
.cert-trilho{margin-top:var(--e-7)}
.cert-lista{list-style:none;padding:0;display:grid;gap:var(--e-6);perspective:1400px}
.cert-lista .nicho{position:relative;isolation:isolate;display:block;height:100%;padding:var(--e-6) var(--e-4) var(--e-5);border-radius:var(--r-l);background:linear-gradient(oklch(0.16 0.03 262), var(--breu));color:inherit;text-decoration:none}
.cert-lista .nicho::before{content:"";position:absolute;left:50%;top:0;width:44%;height:2px;translate:-50% 0;border-radius:2px;background:var(--ciano);box-shadow:0 0 18px 2px var(--ciano)}   /* a luminária */
.cert-lista .nicho::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(70% 55% at 50% 0, oklch(0.80 0.14 220 / .22), transparent 70%)}      /* a luz */
.cert-lista figure{margin:0}
.quadro{position:relative;display:block;overflow:hidden;border:5px solid oklch(0.22 0.03 262);border-radius:6px;box-shadow:0 30px 50px oklch(0 0 0 / .6);transition:transform .6s var(--sai)}
.quadro img{display:block;width:100%;height:auto}
/* a placa é em pé: fica dentro de um quadro do mesmo formato dos certificados, como numa vitrine, para a fileira não desalinhar */
.quadro.placa{aspect-ratio:1400 / 1019;background:oklch(0.11 0.02 262)}
.quadro.placa img{width:100%;height:100%;object-fit:contain}
.cert-lista figcaption{margin:var(--e-5) auto 0;padding:var(--e-3) var(--e-4);max-width:420px;border:1px solid var(--linha);border-radius:var(--r-m);background:oklch(0.13 0.025 262 / .7);text-align:center}
.cert-lista .emissor{display:block;font:600 var(--t-xs)/1.2 var(--f-titulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ciano)}
.cert-lista h3{font-size:var(--t-l);margin-top:var(--e-2)}
.cert-lista p{margin:var(--e-2) auto 0;color:var(--texto-2);font-size:var(--t-s);max-width:48ch}
.cert-lista .ver{display:inline-flex;align-items:center;gap:6px;margin-top:var(--e-3);font:600 var(--t-s)/1 var(--f-texto);color:var(--ciano)}
.cert-lista .ver .ic{width:16px;height:16px}
/* quadro apagado: a certificação que ainda vai chegar. Luminária desligada, sem luz, e no lugar do certificado só o logo de quem emite */
.cert-lista .apagado .nicho::before{background:oklch(0.32 0.02 262);box-shadow:none}
.cert-lista .apagado .nicho::after{content:none}
.apagado .quadro{display:grid;place-items:center;aspect-ratio:1400 / 1019;background:oklch(0.11 0.02 262);box-shadow:none}
.apagado .quadro img{width:46%;filter:brightness(0) invert(1);opacity:.16}
.cert-lista .apagado figcaption{border-style:dashed}
.cert-lista .apagado :is(.emissor,h3){color:var(--texto-2)}
.cert-barra,.cert-saida{display:none}

/* mais quadros do que cabem na tela (.passa, posto pelo sobre.js: mais de um no celular, mais de dois no computador): o palco inteiro
   (título, cartas e quadros) gruda na tela assim que aparece por inteiro, e a rolagem passa pelos quadros, para a frente e para trás;
   as cartas continuam à mão para trocar de plataforma. O `top` vem do sobre.js: se o palco for mais alto que a tela, ele gruda pela base
   (o título some atrás do topo) para os quadros nunca ficarem cortados.
   --ida vai de 0 a 1 enquanto os quadros passam; --fim vai de 0 a 1 no trecho final, que avisa que a dobra vai acabar */
.cert.passa .cert-palco{position:sticky}
.cert.passa .cert-trilho{margin:var(--e-5) calc(-1 * var(--margem)) 0;padding-inline:var(--margem);overflow-x:clip;-webkit-mask:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);mask:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent)}   /* no celular os quadros vão até a borda da tela */
.cert.passa .cert-lista{display:flex;gap:var(--e-4);will-change:transform;filter:brightness(calc(1 - var(--fim, 0) * .6))}
.cert.passa .cert-lista li{flex:none;width:calc(100% - 44px)}   /* um quadro por tela, com a ponta do próximo aparecendo */
.cert.passa .cert-lista .nicho{padding:var(--e-5) var(--e-4) var(--e-4)}
.cert.passa .cert-lista figcaption{margin-top:var(--e-4)}
.cert.passa .cert-barra{display:block;height:2px;margin-top:var(--e-4);border-radius:2px;background:var(--linha)}
.cert.passa .cert-barra i{display:block;height:100%;border-radius:2px;background:linear-gradient(90deg, var(--anil), var(--celeste), var(--ciano));transform-origin:left;scale:var(--ida, 0) 1}
.cert.passa .cert-saida{display:flex;align-items:center;justify-content:center;gap:var(--e-2);margin-top:var(--e-2);color:var(--texto);font:500 var(--t-s)/1.3 var(--f-texto);text-align:center;opacity:var(--fim, 0);translate:0 calc((1 - var(--fim, 0)) * 10px)}
.cert-saida .ic{flex:none;width:18px;height:18px;color:var(--ciano)}

@media (min-width:900px){
  .cert-topo{grid-template-columns:minmax(0, 1fr) auto;align-items:end;gap:var(--e-8)}
  /* dois quadros por tela, virados um para o outro; endireitam quando o mouse passa. Um quadro sozinho fica no meio */
  .cert-lista{display:flex}
  .cert-lista li{flex:none;width:calc(50% - var(--e-6) / 2)}
  .cert-lista:has(li:only-child){justify-content:center}
  .cert-lista li:nth-child(odd) .quadro{transform:rotateY(9deg)}
  .cert-lista li:nth-child(even) .quadro{transform:rotateY(-9deg)}
  .cert-lista li:only-child .quadro,.cert-lista .nicho:is(:hover,:focus-visible) .quadro{transform:none}
  .cert.passa .cert-trilho{margin-inline:0;padding-inline:0}
  .cert.passa .cert-lista{gap:var(--e-6)}
  .cert.passa .cert-lista li{width:min(calc(50% - var(--e-6) / 2), max(380px, calc((100svh - 560px) * 1.374)))}   /* encolhe para o palco caber na altura da tela (560px é mais ou menos o que não é imagem), mas nunca abaixo de 380px */
}

/* animação: tudo parte de .vis, que o sobre.js põe quando o bloco chega à tela; sem JavaScript os quadros já aparecem acesos */
@media (prefers-reduced-motion:no-preference){
  /* as luzes acendem: a luminária abre do centro, a luz pisca e firma, o certificado sai do escuro; o segundo quadro vem logo depois */
  html.js .cert-lista .nicho::before{scale:0 1;transition:scale .5s var(--sai)}
  html.js .cert-lista .nicho::after{opacity:0}
  html.js .cert-lista li:not(.apagado) .quadro > :is(img,svg){filter:brightness(.28);transition:filter .9s var(--sai) .4s}
  html.js .cert-lista li.vis .nicho::before{scale:1}
  html.js .cert-lista li.vis .nicho::after{animation:acende .9s .3s both}
  html.js .cert-lista li.vis:not(.apagado) .quadro > :is(img,svg){filter:none}
  html.js .cert-lista li.apagado .nicho::before{scale:1;transition:none}
  html.js .cert-lista li:nth-child(even) .nicho::before{transition-delay:.35s}
  html.js .cert-lista li:nth-child(even).vis .nicho::after{animation-delay:.65s}
  html.js .cert-lista li:nth-child(even) .quadro > :is(img,svg){transition-delay:.75s}
  /* a carta da frente: uma faixa de luz passa por ela quando aparece e quando é escolhida (a mesma do logo no topo: @keyframes varre, no estilo.css) */
  .carta::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;transform:skewX(-20deg);background:linear-gradient(90deg, transparent, oklch(0.80 0.14 220 / .55), transparent);opacity:0;pointer-events:none}
  .cert-topo.vis .carta[aria-pressed="true"]::after{animation:varre 1.3s var(--sai) .6s 1}
}
@keyframes acende{0%{opacity:0}18%{opacity:.75}28%{opacity:.15}42%{opacity:.9}52%{opacity:.45}100%{opacity:1}}

/* =========================================================
   celular (até 899px): a página é quase toda texto, então aqui quem manda é a leitura.
   Três tamanhos e só: abertura de dobra (--t-l), corpo (--t-m, 16px) e apoio (15px). Menos respiro entre as
   dobras e listas no lugar das pilhas de cartões, para o olho descer sem tropeçar em moldura.
   ========================================================= */
@media (max-width:899px){
  html[data-pagina="sobre"] .trilho{display:none}   /* a trilha de pontos encosta no texto; a barra de progresso do topo continua mostrando onde se está */
  .sobre .secao{padding-block:var(--e-7)}
  .sobre :is(.lt,.quem,.etapas,.principios,.valores){margin-top:var(--e-6)}
  .sobre :is(.lt p,.etapas p,.principios p,.fund .bio,.cert-lista p){font-size:.9375rem;line-height:1.6}

  /* o nome: o panda vira uma marca pequena acima do título, e o texto passa a ser corpo, não abertura */
  .s-nome .envolve{gap:var(--e-5)}
  .panda-cheio{width:128px}
  .s-nome p,.s-futuro p{font-size:var(--t-m);line-height:1.7}

  /* como trabalha: passos numerados em lista (número à esquerda, título e texto à direita), sem cartão */
  .etapas{gap:0;border-bottom:1px solid var(--linha)}
  .etapas li{display:grid;grid-template-columns:auto minmax(0, 1fr);column-gap:var(--e-4);padding:var(--e-4) 0;border:0;border-top:1px solid var(--linha);border-radius:0;background:none}
  .etapas li::before{grid-row:1 / span 2;margin:4px 0 0}
  .etapas :is(h3,p){grid-column:2}

  /* valores: cartões baixos, sem o número (a ordem aqui não quer dizer nada) */
  .principios{gap:var(--e-2)}
  .principios li{padding:var(--e-4)}
  .principios li::before{content:none}

  /* no que acreditamos: a frase continua sendo o destaque, um degrau menor */
  .valores li{padding-block:var(--e-4)}
  .valores h3{font-size:1.25rem}
}