/* ============================================================================
   Loob — site institucional
   ----------------------------------------------------------------------------
   A direção é do dono: iluminação cinematográfica, profundidade e muita
   imagem. O que isso significa aqui, em decisões e não em adjetivos:

   LUZ. A página tem UMA fonte de luz principal (alto, à direita) e uma de
   preenchimento fria (baixo, à esquerda). Todo brilho e toda sombra saem
   dessas duas — é o que faz a tela parecer um set, e não um monte de
   gradiente solto. A luz vive em `body::before`, atrás de tudo, e nunca
   atrás de texto longo.

   PROFUNDIDADE. Três camadas, sempre na mesma ordem: o fundo (a luz), o
   vidro (superfícies com blur e borda de 1px que pega a luz) e o conteúdo.
   As telas do produto ganham perspectiva de verdade (rotateY + rotateX) e um
   HALO que é uma cópia borrada da própria imagem atrás dela — é assim que
   cinema faz: a luz vem do objeto, não de um box-shadow genérico.

   GRÃO. Uma camada de ruído SVG por cima de tudo, bem fraca. É o que impede
   o gradiente de "listrar" (banding) em tela grande, e de quebra dá textura
   de filme. Sem ela, fundo escuro com gradiente amplo vira faixa.

   AS IMAGENS SÃO O PRODUTO DE VERDADE. Não há foto de banco de imagem
   nenhuma: cada tela é um screenshot da aplicação rodando, capturado no
   navegador. Vender software com foto de gente sorrindo em escritório é
   esconder o produto.
   ========================================================================= */

:root{
  /* --- primitivos: a paleta do Loob, não uma paleta genérica ---------------
     O #14102B é o theme-color do próprio app. O resto desce dele. */
  --noite-0:#070412;   --noite-1:#0B0718;   --noite-2:#14102B;
  --noite-3:#1B1540;   --noite-4:#241C52;
  --violeta:#8B6CFF;   --violeta-luz:#C0AEFF; --violeta-fundo:rgba(139,108,255,.13);
  --verde:#3BD68F;     --verde-fundo:rgba(59,214,143,.12);
  --ouro:#E9B949;
  --branco:#FFFFFF;
  --cinza-1:#F1EEFB;   --cinza-2:#BDB4DC;   --cinza-3:#8B82AE;   --cinza-4:#5F5885;

  /* --- semânticos: é por estes que os componentes leem -------------------- */
  --fundo:var(--noite-1);
  --vidro:rgba(255,255,255,.045);
  --vidro-forte:rgba(255,255,255,.075);
  --borda:rgba(255,255,255,.10);
  --borda-luz:rgba(255,255,255,.20);
  --texto:var(--cinza-1);
  --texto-2:var(--cinza-2);
  --texto-3:var(--cinza-3);
  --acento:var(--violeta);
  --acento-luz:var(--violeta-luz);

  --raio:18px; --raio-g:26px;
  --sombra-baixa:0 2px 8px rgba(0,0,0,.4);
  --sombra-alta:0 40px 90px -30px rgba(0,0,0,.9), 0 8px 30px -12px rgba(0,0,0,.6);

  --display:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --corpo:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, monospace;

  --env:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fundo); color:var(--texto);
  font-family:var(--corpo); font-size:17px; line-height:1.62;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* --- CAMADA 1: a luz -------------------------------------------------------
   Duas fontes fixas. A quente (violeta) alta e à direita; a fria (verde) baixa
   e à esquerda, bem mais fraca — luz de preenchimento existe pra revelar a
   forma, não pra competir. */
body::before{
  content:''; position:fixed; inset:-10%; z-index:0; pointer-events:none;
  background:
    radial-gradient(52vw 44vw at 82% -6%,  rgba(139,108,255,.30), transparent 64%),
    radial-gradient(44vw 40vw at 6%  22%,  rgba(59,214,143,.085), transparent 62%),
    radial-gradient(70vw 60vw at 50% 108%, rgba(36,28,82,.55),    transparent 70%);
}
/* --- o grão: impede o banding e dá textura de filme --------------------- */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.env{position:relative; z-index:1; max-width:var(--env); margin:0 auto; padding:0 24px}
.env-estreita{max-width:760px}

a{color:var(--acento-luz); text-decoration-color:rgba(192,174,255,.35); text-underline-offset:3px}
/* height:auto é obrigatório junto do atributo height="" no HTML: sem ele o
   navegador usa a altura DECLARADA (1350px) com a largura já reduzida, e a
   imagem estica. Foi isso que deixou a página com 13.942px de altura na
   primeira montagem. O atributo continua ali porque é ele que reserva o
   espaço e evita o pulo do layout enquanto a imagem carrega. */
img{max-width:100%; height:auto; display:block}

/* --- tipografia ----------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.08;
  letter-spacing:-.028em; margin:0; text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,74px); font-weight:800; letter-spacing:-.038em}
h2{font-size:clamp(28px,4vw,46px)}
h3{font-size:clamp(19px,2vw,23px); letter-spacing:-.018em}
p{margin:0}
.lede{font-size:clamp(18px,2vw,21.5px); line-height:1.55; color:var(--texto-2); max-width:52ch}
.olho{
  font-family:var(--display); font-size:11.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acento-luz); display:inline-flex; align-items:center; gap:9px;
}
.olho::before{content:''; width:22px; height:1px; background:linear-gradient(90deg,transparent,var(--acento))}
.olho.verde{color:var(--verde)}
.olho.verde::before{background:linear-gradient(90deg,transparent,var(--verde))}

/* --- seções --------------------------------------------------------------- */
section{padding:clamp(72px,10vw,132px) 0; position:relative; z-index:1}
.sec-cab{max-width:62ch; margin-bottom:clamp(38px,5vw,64px)}
.sec-cab h2{margin:16px 0 18px}
.sec-cab p{color:var(--texto-2); font-size:clamp(17px,1.7vw,19px)}

/* --- vidro (a segunda camada) --------------------------------------------- */
.vidro{
  background:var(--vidro); border:1px solid var(--borda); border-radius:var(--raio);
  backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:var(--sombra-baixa);
}

/* ============================ TOPO ======================================== */
.topo{
  position:sticky; top:0; z-index:60; padding:14px 0;
  background:rgba(11,7,24,.66); backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s;
}
.topo.preso{border-bottom-color:var(--borda); background:rgba(7,4,18,.86)}
.topo .env{display:flex; align-items:center; gap:18px}
.marca img{height:26px; width:auto}
.topo nav{display:flex; gap:26px; margin-left:auto}
.topo nav a{
  color:var(--texto-2); text-decoration:none; font-size:15px; font-weight:600;
  font-family:var(--display); letter-spacing:-.01em; transition:color .2s;
}
.topo nav a:hover{color:var(--texto)}

/* --- botões --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-size:15.5px; font-weight:600; letter-spacing:-.01em;
  padding:13px 24px; border-radius:100px; border:1px solid transparent;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:transform .18s, filter .18s, background .2s;
}
.btn:active{transform:translateY(1px)}
.btn-luz{
  background:linear-gradient(135deg,var(--violeta),#6B4FE0); color:#fff;
  /* a "luz" do botão: um halo que sai dele, não uma sombra que cai dele */
  box-shadow:0 10px 34px -10px rgba(139,108,255,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-luz:hover{filter:brightness(1.1)}
.btn-vidro{background:var(--vidro-forte); color:var(--texto); border-color:var(--borda-luz)}
.btn-vidro:hover{background:rgba(255,255,255,.12)}
.btn-verde{background:linear-gradient(135deg,var(--verde),#22A06B); color:#06301F;
  box-shadow:0 10px 34px -10px rgba(59,214,143,.6)}
.btn-g{padding:16px 30px; font-size:17px}
.btn-bloco{width:100%}
.btn:disabled{opacity:.5; cursor:progress}

/* ============================ HERÓI ======================================= */
.heroi{padding-top:clamp(48px,8vw,92px); padding-bottom:0; overflow:hidden}
.heroi-txt{max-width:64ch}
.heroi-txt .prova{max-width:none}
.heroi h1{margin:20px 0 22px}
.heroi h1 .luz{
  background:linear-gradient(102deg,var(--violeta-luz) 6%,#fff 42%,var(--verde) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* inline-block + padding: com background-clip:text o glyph é recortado pela
     caixa do FUNDO, e a última letra de uma fonte com barriga (o "r") ficava
     cortada no meio. O padding devolve o pedaço que faltava. */
  display:inline-block; padding-right:.09em; margin-right:-.09em;
}
.heroi .acoes{display:flex; flex-wrap:wrap; gap:13px; margin-top:32px}
.heroi .prova{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; max-width:none;
  font-size:14.5px; color:var(--texto-3);
}
.heroi .prova span{display:inline-flex; align-items:center; gap:8px}
.heroi .prova b{color:var(--texto-2); font-weight:600}

/* --- o palco: a tela do produto com perspectiva + halo ------------------- */
.palco{position:relative; margin-top:clamp(48px,7vw,84px); perspective:2200px}
.palco-halo{
  position:absolute; inset:6% 10% 22%; z-index:0;
  background:radial-gradient(60% 60% at 50% 40%, rgba(139,108,255,.55), transparent 70%);
  filter:blur(70px);
}
.tela{
  position:relative; z-index:1; border-radius:var(--raio-g); overflow:hidden;
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-alta);
  transform:rotateX(9deg) rotateY(-3deg) scale(.97);
  transform-origin:50% 100%; transition:transform .9s cubic-bezier(.2,.7,.2,1);
  background:var(--noite-2);
}
.tela::after{  /* reflexo de vidro: a luz batendo na superfície */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(146deg, rgba(255,255,255,.16) 0%, transparent 34%, transparent 76%, rgba(139,108,255,.10) 100%);
}
.palco.revelado .tela{transform:rotateX(0deg) rotateY(0deg) scale(1)}
.tela img{width:100%; height:auto}
.tela-legenda{
  text-align:center; margin-top:20px; font-size:13.5px; color:var(--texto-3);
  font-family:var(--display); letter-spacing:.02em;
}

/* ============================ A DOR ======================================= */
.dor{background:linear-gradient(180deg,transparent,rgba(7,4,18,.6),transparent)}
.dores{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); margin-top:44px}
.dor-item{padding:26px 24px 24px; border-radius:var(--raio); position:relative;
  background:var(--vidro); border:1px solid var(--borda)}
.dor-item .n{
  font-family:var(--mono); font-size:12px; color:var(--acento-luz); opacity:.7;
  display:block; margin-bottom:12px; letter-spacing:.08em;
}
.dor-item h3{margin-bottom:9px; font-size:19px}
.dor-item p{color:var(--texto-3); font-size:15.5px; line-height:1.55}
.virada{
  margin-top:52px; padding:34px 32px; border-radius:var(--raio-g);
  border:1px solid rgba(139,108,255,.34); background:var(--violeta-fundo);
  display:flex; gap:24px; align-items:center; flex-wrap:wrap;
}
.virada p{font-family:var(--display); font-size:clamp(19px,2.4vw,26px); font-weight:600;
  line-height:1.34; letter-spacing:-.02em; flex:1 1 380px; margin:0}

/* ============================ MÓDULOS (imagem grande) ===================== */
.mod{display:grid; grid-template-columns:.92fr 1.28fr; gap:clamp(32px,5vw,72px);
  align-items:center; margin-bottom:clamp(72px,9vw,120px)}
.mod.espelhado{grid-template-columns:1.28fr .92fr}
.mod.espelhado .mod-txt{order:2}
.mod-txt h3{font-size:clamp(24px,3vw,34px); margin:14px 0 16px; letter-spacing:-.026em}
.mod-txt p{color:var(--texto-2); font-size:17px; max-width:46ch}
.mod-lista{list-style:none; padding:0; margin:22px 0 0; display:grid; gap:11px}
.mod-lista li{display:block; position:relative; padding-left:19px; font-size:15.5px; color:var(--texto-3)}
.mod-lista li::before{content:''; position:absolute; left:0; top:9px; width:6px; height:6px;
  border-radius:50%; background:var(--acento); box-shadow:0 0 10px var(--acento)}
.mod-img{position:relative}
.mod-img .halo{
  position:absolute; inset:8%; background:radial-gradient(50% 50% at 50% 50%, rgba(139,108,255,.4), transparent 72%);
  filter:blur(56px); z-index:0;
}
.mod-img .quadro{
  position:relative; z-index:1; border-radius:var(--raio-g); overflow:hidden;
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-alta); background:var(--noite-2);
}
.mod-img.verde .halo{background:radial-gradient(50% 50% at 50% 50%, rgba(59,214,143,.32), transparent 72%)}

/* ============================ BRUNA ======================================= */
.bruna{position:relative}
.bruna-grade{display:grid; grid-template-columns:1.06fr .94fr; gap:clamp(34px,5vw,68px); align-items:center}
.zap{
  border-radius:var(--raio-g); padding:20px; position:relative;
  background:linear-gradient(168deg, rgba(30,24,68,.92), rgba(12,8,28,.92));
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-alta);
}
.zap-halo{position:absolute; inset:12% 4%; z-index:-1; filter:blur(64px);
  background:radial-gradient(50% 50% at 50% 50%, rgba(59,214,143,.34), transparent 70%)}
.zap-topo{display:flex; align-items:center; gap:12px; padding-bottom:15px;
  border-bottom:1px solid var(--borda); margin-bottom:18px}
.zap-av{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; color:#0C0820; font-size:17px;
  background:linear-gradient(140deg,var(--violeta-luz),var(--verde));
  box-shadow:0 0 24px rgba(139,108,255,.5)}
.zap-nome{font-family:var(--display); font-weight:700; font-size:16px}
.zap-on{font-size:12.5px; color:var(--verde); display:flex; align-items:center; gap:6px}
.zap-on::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--verde);
  box-shadow:0 0 8px var(--verde)}
.bolha{max-width:86%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5;
  margin-bottom:11px; opacity:0; transform:translateY(9px); animation:sobe .5s ease forwards}
.bolha.eu{margin-left:auto; background:linear-gradient(140deg,#2E6B4E,#245A41);
  border-bottom-right-radius:5px}
.bolha.ela{background:var(--noite-3); border-bottom-left-radius:5px; border:1px solid var(--borda)}
.bolha .hora{display:block; font-size:11px; color:var(--texto-4,#6E6698); margin-top:5px; opacity:.75}
@keyframes sobe{to{opacity:1; transform:translateY(0)}}
.bolha:nth-child(2){animation-delay:.05s} .bolha:nth-child(3){animation-delay:.5s}
.bolha:nth-child(4){animation-delay:.95s} .bolha:nth-child(5){animation-delay:1.4s}
.bolha:nth-child(6){animation-delay:1.85s} .bolha:nth-child(7){animation-delay:2.3s}
.bruna-faz{display:grid; gap:14px; margin-top:26px}
.bruna-faz > div{display:flex; gap:14px; align-items:flex-start}
.bruna-faz .ic{width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center;
  font-size:18px; background:var(--vidro-forte); border:1px solid var(--borda)}
.bruna-faz b{font-family:var(--display); font-size:16px; display:block; margin-bottom:2px}
.bruna-faz span{font-size:15px; color:var(--texto-3)}

/* ============================ PLANOS ====================================== */
.planos{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; margin-top:12px}
.plano{
  padding:30px 28px 28px; border-radius:var(--raio-g); position:relative;
  background:var(--vidro); border:1px solid var(--borda); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.plano.destaque{
  border-color:rgba(139,108,255,.45);
  background:linear-gradient(170deg, rgba(139,108,255,.14), rgba(255,255,255,.04));
  box-shadow:0 30px 70px -34px rgba(139,108,255,.6);
}
.plano.biz{border-color:rgba(59,214,143,.32);
  background:linear-gradient(170deg, rgba(59,214,143,.10), rgba(255,255,255,.035))}
.plano-selo{
  position:absolute; top:-11px; left:28px; font-family:var(--display); font-size:11px;
  font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:5px 13px;
  border-radius:100px; background:linear-gradient(135deg,var(--violeta),#6B4FE0); color:#fff;
  box-shadow:0 6px 20px -6px rgba(139,108,255,.8);
}
.plano-nome{font-family:var(--display); font-size:20px; font-weight:700; letter-spacing:-.02em}
.plano-preco{display:flex; align-items:baseline; gap:6px; margin:14px 0 6px}
.plano-preco .c{font-size:17px; color:var(--texto-3); font-weight:600}
.plano-preco .v{font-family:var(--display); font-size:48px; font-weight:800; letter-spacing:-.045em;
  font-variant-numeric:tabular-nums; line-height:1}
.plano-preco .m{font-size:15px; color:var(--texto-3)}
.plano-chamada{color:var(--texto-2); font-size:15.5px; margin:6px 0 20px; min-height:3em}
.plano ul{list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px}
.plano li{display:block; position:relative; padding-left:23px; font-size:15px; color:var(--texto-2)}
.plano li::before{content:'✓'; position:absolute; left:0; top:0; color:var(--verde);
  font-weight:800; font-size:14px; line-height:1.62}
.plano.biz li::before{color:var(--verde)}
.plano-nota{font-size:13px; color:var(--texto-3); margin-top:14px; line-height:1.5}

/* ============================ CHECKOUT ==================================== */
.compra{
  border-radius:var(--raio-g); padding:clamp(28px,4vw,44px);
  background:linear-gradient(158deg, rgba(36,28,82,.7), rgba(11,7,24,.85));
  border:1px solid var(--borda-luz); box-shadow:var(--sombra-alta);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:start;
}
form{display:grid; gap:14px}
.campo label{display:block; font-family:var(--display); font-size:11.5px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texto-3); margin-bottom:7px}
.campo input{
  width:100%; padding:13px 15px; font:inherit; font-size:16px; font-family:var(--corpo);
  background:rgba(0,0,0,.32); border:1px solid var(--borda-luz); border-radius:12px; color:var(--texto);
}
.campo input:focus{outline:2px solid var(--acento); outline-offset:1px; border-color:transparent}
.campo input::placeholder{color:var(--texto-4,#645C8C)}
.miudo{font-size:13.5px; color:var(--texto-3); line-height:1.5; margin:0}
.aviso{border-radius:12px; padding:15px 17px; font-size:15px; margin-top:14px;
  border:1px solid var(--borda-luz); background:rgba(0,0,0,.28); color:var(--texto-2)}
.aviso.erro{border-color:rgba(255,139,154,.5); color:#FF9DAE}
.aviso.atencao{border-color:rgba(233,185,73,.45); color:var(--ouro)}
.aviso.ok{border-color:rgba(59,214,143,.45); color:var(--verde)}
.pix{display:grid; gap:14px; justify-items:center; text-align:center; margin-top:16px}
.pix img{width:210px; height:210px; border-radius:14px; background:#fff; padding:10px;
  box-shadow:0 0 40px -10px rgba(255,255,255,.35)}
.copiacola{width:100%; font-family:var(--mono); font-size:11.5px; word-break:break-all;
  background:rgba(0,0,0,.4); border:1px solid var(--borda); border-radius:10px; padding:12px;
  color:var(--texto-3); text-align:left; max-height:92px; overflow:auto}

/* ============================ PERGUNTAS =================================== */
details{border-bottom:1px solid var(--borda); padding:18px 0}
summary{cursor:pointer; font-family:var(--display); font-weight:600; font-size:17.5px;
  list-style:none; display:flex; justify-content:space-between; gap:18px; align-items:center;
  letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after{content:'+'; color:var(--acento-luz); font-size:24px; font-weight:300; flex:none; line-height:1}
details[open] summary::after{content:'−'}
details p{color:var(--texto-2); font-size:16px; margin-top:13px; max-width:66ch}

/* ============================ RODAPÉ ====================================== */
footer{padding:56px 0 72px; border-top:1px solid var(--borda); position:relative; z-index:1}
footer .env{display:flex; gap:24px; flex-wrap:wrap; align-items:center;
  color:var(--texto-3); font-size:14.5px}
footer img{height:22px; opacity:.85}

/* --- revelação no scroll -------------------------------------------------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1; transform:none}

/* --- responsivo ----------------------------------------------------------- */
@media (max-width:960px){
  .planos{grid-template-columns:1fr; gap:18px}
  .compra{grid-template-columns:1fr}
  .mod, .mod.espelhado{grid-template-columns:1fr; gap:30px}
  .mod.espelhado .mod-txt{order:0}
  .bruna-grade{grid-template-columns:1fr}
  .topo nav{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .env{padding:0 18px}
  .heroi .acoes .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .reveal{opacity:1; transform:none}
  .tela{transform:none}
}

/* --- escolha do plano dentro do formulário --------------------------------
   Dois botões, não um <select>: a diferença entre pagar e não pagar tem que
   ser visível sem abrir nada. O aria-pressed carrega o estado — é um
   radiogroup de verdade para quem usa leitor de tela. */
.escolha{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:4px}
.esc{
  text-align:left; padding:13px 15px; border-radius:13px; cursor:pointer;
  background:rgba(0,0,0,.28); border:1px solid var(--borda-luz); color:var(--texto-3);
  font:inherit; transition:border-color .2s, background .2s, color .2s;
}
.esc b{display:block; font-family:var(--display); font-size:15.5px; font-weight:600;
  color:var(--texto-2); margin-bottom:2px; transition:color .2s}
.esc span{font-size:13px}
.esc[aria-pressed="true"]{
  border-color:var(--acento); background:var(--violeta-fundo); color:var(--acento-luz);
  box-shadow:0 0 0 1px var(--acento) inset, 0 8px 26px -12px rgba(139,108,255,.7);
}
.esc[aria-pressed="true"] b{color:var(--texto)}
.esc:focus-visible{outline:2px solid var(--acento); outline-offset:2px}
@media (max-width:420px){ .escolha{grid-template-columns:1fr} }