/* PalcoSeguro — sistema visual do site público.
   A sala é clara de propósito: quem chega aqui já está tenso, e uma página
   escura empurra na direção errada. O calor vem do terracota, a calma vem do
   azul-ardósia, e o verde-oliva marca o que cresce. */

@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Superfícies: variações de um azul muito claro, do papel ao ar. */
  --surface-rgb:247 246 242;
  --surface:rgb(var(--surface-rgb));
  --surface-lowest-rgb:255 255 255;
  --surface-lowest:rgb(var(--surface-lowest-rgb));
  --surface-low-rgb:241 240 234;
  --surface-low:rgb(var(--surface-low-rgb));
  --surface-container-rgb:234 233 226;
  --surface-container:rgb(var(--surface-container-rgb));
  --surface-high-rgb:226 225 217;
  --surface-high:rgb(var(--surface-high-rgb));

  /* Magenta da marca. Usado com parcimônia — é o que chama a ação. */
  --primary-rgb:72 98 79;
  --primary:rgb(var(--primary-rgb));
  --primary-strong-rgb:52 72 57;
  --primary-strong:rgb(var(--primary-strong-rgb));
  --primary-container-rgb:217 228 219;
  --primary-container:rgb(var(--primary-container-rgb));
  --primary-container-lift-rgb:232 239 233;
  --primary-container-lift:rgb(var(--primary-container-lift-rgb));
  --on-primary-rgb:255 255 255;
  --on-primary:rgb(var(--on-primary-rgb));
  --on-primary-container-rgb:22 37 27;
  --on-primary-container:rgb(var(--on-primary-container-rgb));

  /* Ardósia: o lado medido. Dado, não emoção. */
  --secondary-rgb:107 106 97;
  --secondary:rgb(var(--secondary-rgb));
  --secondary-container-rgb:227 225 215;
  --secondary-container:rgb(var(--secondary-container-rgb));
  --secondary-container-lift-rgb:239 237 229;
  --secondary-container-lift:rgb(var(--secondary-container-lift-rgb));
  --on-secondary-container-rgb:38 37 30;
  --on-secondary-container:rgb(var(--on-secondary-container-rgb));

  /* Oliva: o que cresce com repetição. */
  --tertiary-rgb:122 101 83;
  --tertiary:rgb(var(--tertiary-rgb));
  --tertiary-container-rgb:235 226 216;
  --tertiary-container:rgb(var(--tertiary-container-rgb));
  --tertiary-container-lift-rgb:243 237 230;
  --tertiary-container-lift:rgb(var(--tertiary-container-lift-rgb));
  --on-tertiary-container-rgb:42 32 24;
  --on-tertiary-container:rgb(var(--on-tertiary-container-rgb));

  --on-surface-rgb:27 28 25;
  --on-surface:rgb(var(--on-surface-rgb));
  --on-surface-variant-rgb:87 90 84;
  --on-surface-variant:rgb(var(--on-surface-variant-rgb));
  --outline-rgb:154 157 148;
  --outline:rgb(var(--outline-rgb));
  --outline-variant-rgb:216 217 210;
  --outline-variant:rgb(var(--outline-variant-rgb));
  --error-rgb:155 74 70;
  --error:rgb(var(--error-rgb));

  /* Transparencias e degrades: todos derivados dos canais acima. Nenhuma
     cor nova mora aqui, e e por isso que mudar a marca continua sendo
     mudar uma linha. Separar canal de alfa e o que permite as duas coisas
     ao mesmo tempo: consultar onde uma cor e usada, e trocar todas de uma
     vez. Um rgba() escrito a mao no meio do arquivo nao aparece em
     nenhuma das duas buscas. */
  --nav-bg:rgb(var(--surface-rgb) / .86);
  --nav-line:rgb(var(--on-surface-rgb) / .06);
  --shadow-spot:0 4px 14px rgb(var(--primary-rgb) / .22);
  --shadow-spot-hover:0 8px 22px rgb(var(--primary-rgb) / .28);
  --badge-halo:rgb(var(--tertiary-rgb) / .15);
  --beam:radial-gradient(ellipse at 50% 40%,rgb(var(--secondary-container-rgb) / .85),rgb(var(--tertiary-container-rgb) / .45) 45%,rgb(var(--primary-container-rgb) / .35) 68%,transparent 78%);

  --sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  --r-sm:12px;
  --r:18px;
  --r-lg:28px;
  --shadow-sm:0 1px 2px rgb(var(--on-surface-rgb) / .05),0 2px 8px rgb(var(--on-surface-rgb) / .04);
  --shadow:0 2px 6px rgb(var(--on-surface-rgb) / .05),0 14px 32px -18px rgb(var(--on-surface-rgb) / .22);
  --shadow-lg:0 4px 12px rgb(var(--on-surface-rgb) / .06),0 30px 60px -28px rgb(var(--on-surface-rgb) / .30);

  --measure:64ch;
  --pad:clamp(20px,5vw,56px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--surface);color:var(--on-surface);font-family:var(--sans);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}

/* --- Bandas ----------------------------------------------------------- */
/* O respiro entre faixas é somado: o fim de uma seção e o começo da próxima.
   A 8,5vw isso dava 224px de nada num monitor comum, e a página lia como uma
   sequência de ilhas. Metade disso já separa sem afastar. */
.band{padding:clamp(40px,4.4vw,66px) var(--pad);position:relative}
.band--surface{background:var(--surface)}
.band--low{background:var(--surface-low)}
.band--tint{background:var(--surface-container)}
.band--soft{background:linear-gradient(180deg,var(--surface-low),var(--surface))}
.wrap{max-width:1120px;margin:0 auto;position:relative;z-index:1}
.prose{max-width:var(--measure)}

/* --- Tipografia -------------------------------------------------------- */
h1,h2,h3{margin:0 0 .5em;letter-spacing:-.02em;text-wrap:balance;color:var(--on-surface)}
h1{font-size:clamp(33px,5.4vw,52px);line-height:1.08;font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.15;font-weight:700}
h3{font-size:19px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1.05em}
.lede{font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--on-surface-variant)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--primary);margin:0 0 14px}
.dim{color:var(--on-surface-variant)}
.tight{margin-bottom:.4em}

/* --- Topo -------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--nav-line)}
.nav__in{max-width:1120px;margin:0 auto;padding:14px var(--pad);display:flex;
  align-items:center;gap:26px;flex-wrap:wrap;row-gap:8px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--on-surface);text-decoration:none;margin-right:auto;flex-shrink:0}
/* Palco em cima, Seguro embaixo: a marca empilhada ao lado do Mike, como no
   logotipo. O seletor e .brand__name span, e nao .brand span: com o nome em
   duas linhas o segundo pintaria as duas de terracota. */
.brand__name{display:flex;flex-direction:column;line-height:1.04}
.brand__name span{color:var(--primary)}
/* Altura fixa, largura livre. width/height no <img> só existem para reservar o
   espaço antes de a imagem chegar — sem eles a nav pula quando ela carrega. */
.brand__mark{display:block;height:44px;width:auto}
.foot .brand__mark{height:38px}
/* O Mike é alto, não largo: cabe maior na barra sem empurrar o botão do topo
   para uma segunda linha. No celular ele ainda encolhe um pouco. */
@media(max-width:520px){
  .nav__in{gap:12px}
  .brand{font-size:17px;gap:7px}
  .brand__mark{height:36px}
  .nav .btn--sm{padding:9px 14px;white-space:nowrap}
}
.navlink{display:none;color:var(--on-surface-variant);text-decoration:none;font-size:14.5px;font-weight:600}
/* A porta de quem ja tem conta. Fica de fora do `.navlink` de proposito:
   aquele some abaixo de 880px, e um login invisivel no celular e um login
   que nao existe. Texto e nao pilula para caber ao lado do botao em
   destaque na tela mais estreita. */
.nav__door{color:var(--primary);text-decoration:none;font-size:14.5px;
  font-weight:700;white-space:nowrap;padding:6px 0}
.nav__door:hover{color:var(--primary-strong)}
@media(max-width:520px){.nav__door{font-size:13.5px}}
/* Tres itens na barra fixa: marca, porta e botao em destaque. Abaixo de 400px
   eles so cabem lado a lado apertando tudo — e apertar e melhor que empurrar
   um deles para uma segunda linha. */
@media(max-width:400px){
  .nav__in{gap:8px}
  .nav__door{font-size:13px}
  .nav .btn--sm{padding:9px 12px;font-size:13px}
}
/* Quando a barra quebra, o botao em destaque vai para a direita da segunda
   linha, e nao para o canto esquerdo debaixo da marca. */
@media(max-width:940px){.nav__in>.btn{margin-left:auto}}
.navlink:hover{color:var(--on-surface)}
@media(min-width:880px){.navlink{display:inline}}

.btn{display:inline-block;border-radius:999px;padding:13px 26px;font-size:15px;font-weight:700;text-decoration:none;border:1px solid transparent;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-1px)}
.btn--spot{background:var(--primary);color:var(--on-primary);box-shadow:var(--shadow-spot)}
.btn--spot:hover{background:var(--primary-strong);box-shadow:var(--shadow-spot-hover)}
.btn--ghost{background:var(--surface-container);color:var(--on-surface)}
.btn--ghost:hover{background:var(--secondary-container)}
.btn--sm{padding:9px 18px;font-size:14px}

/* --- Herói: ar, não holofote ------------------------------------------- */
.hero{position:relative;overflow:hidden;background:var(--surface);padding:clamp(40px,4.6vw,66px) var(--pad) clamp(30px,3.4vw,48px)}
.hero__beam{position:absolute;top:-220px;left:50%;translate:-50% 0;width:min(920px,140vw);height:560px;border-radius:50%;
  background:var(--beam);
  filter:blur(52px);pointer-events:none;animation:rise 1.2s ease-out both}
@keyframes rise{from{opacity:0;transform:translate(-50%,-24px)}to{opacity:1;transform:translate(-50%,0)}}
.hero__in{position:relative;max-width:1120px;margin:0 auto;z-index:1}
.hero h1{max-width:17ch}
.hero .lede{max-width:56ch}

.badge{display:inline-flex;align-items:center;gap:9px;background:var(--surface-lowest);color:var(--tertiary);border-radius:999px;padding:8px 16px 8px 13px;font-size:13px;font-weight:700;box-shadow:var(--shadow-sm);margin-bottom:22px}
.badge::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--tertiary);box-shadow:0 0 0 4px var(--badge-halo)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0}
/* A fala do Mike, que era a legenda da figura que ficava ao lado do título. */
.hero__mike{margin:22px 0 0;max-width:52ch;font-size:15px;line-height:1.6;color:var(--on-surface-variant)}
.hero__mike b{color:var(--on-surface)}
.hero__note{margin:18px 0 0;font-size:14px;color:var(--on-surface-variant)}

.trust{background:var(--surface);padding:0 var(--pad) 8px}
.trust ul{max-width:1120px;margin:0 auto;list-style:none;padding:14px 0 0;display:flex;flex-wrap:wrap;gap:10px 24px;font-size:13.5px;font-weight:600;color:var(--on-surface-variant)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tertiary);flex:none}

/* --- Grades ------------------------------------------------------------ */
.grid{display:grid;gap:16px;margin-top:26px}
@media(min-width:700px){.grid--2,.grid--4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid--4{grid-template-columns:repeat(4,1fr)}.grid--3{grid-template-columns:repeat(3,1fr)}}

.card{background:var(--surface-lowest);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,transform .2s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.card p{margin:0;font-size:15px;color:var(--on-surface-variant)}
.card__tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-primary-container);background:var(--primary-container);border-radius:999px;padding:5px 11px;margin-bottom:14px}
.card:nth-child(2) .card__tag{color:var(--on-secondary-container);background:var(--secondary-container)}
.card:nth-child(3) .card__tag{color:var(--on-tertiary-container);background:var(--tertiary-container)}
.card--light{background:var(--surface-lowest)}

/* --- Passos ------------------------------------------------------------ */
.steps{margin-top:26px;display:grid;gap:14px}
@media(min-width:900px){.steps{grid-template-columns:1fr 1fr}}
.step{display:flex;gap:18px;background:var(--surface-lowest);border-radius:var(--r);padding:26px 24px;box-shadow:var(--shadow-sm)}
.step__n{font-size:30px;line-height:1;font-weight:800;color:var(--primary-container);flex:none;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.step:nth-child(2) .step__n{color:var(--secondary-container)}
.step:nth-child(3) .step__n{color:var(--tertiary-container)}
.step:nth-child(4) .step__n{color:var(--outline-variant)}
.step h3{margin-bottom:.35em}
.step p{margin:0;color:var(--on-surface-variant);font-size:15.5px}
.step b{color:var(--on-surface)}

/* --- Etiquetas de ambiente --------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;padding:0;list-style:none}
.tags li{background:var(--surface-lowest);border-radius:999px;padding:10px 18px;font-size:14.5px;color:var(--on-surface-variant);box-shadow:var(--shadow-sm)}
.tags b{color:var(--on-surface);font-weight:700}

/* --- Listas ------------------------------------------------------------ */
.split{display:grid;gap:16px;margin-top:26px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:22px}}
.split>div{background:var(--surface-lowest);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-sm)}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--outline-variant);font-size:15.5px;color:var(--on-surface-variant)}
.list li:last-child{border-bottom:0}
.list li b{color:var(--on-surface);font-weight:700}
.list li::before{content:"✓";color:var(--tertiary);font-weight:800;flex:none}
.list--no li::before{content:"✕";color:var(--error)}

/* --- Planos ------------------------------------------------------------ */
/* The trial is the whole offer for this audience: someone who avoids exposure
   will not hand over a card before proving to themselves that they can speak.
   Tertiary, so it reads as a different kind of statement from the price badges. */
.trial{display:inline-block;margin:26px 0 0;padding:11px 20px;border-radius:999px;
  background:var(--tertiary-container);color:var(--on-tertiary-container);
  font-size:15.5px;font-weight:600}
.trial b{font-weight:800}
.plans{display:grid;gap:18px;margin-top:22px}
@media(min-width:800px){.plans{grid-template-columns:1fr 1fr}}
.plan{background:var(--surface-lowest);border-radius:var(--r-lg);padding:32px 30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.plan--hi{box-shadow:var(--shadow-lg);outline:2px solid var(--primary-container);outline-offset:-2px}
.plan__badge{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-primary-container);background:var(--primary-container);border-radius:999px;padding:6px 13px;margin-bottom:16px}
.plan__price{font-size:42px;line-height:1;font-weight:800;letter-spacing:-.035em;margin:4px 0 4px;font-variant-numeric:tabular-nums}
.plan__price small{font-size:15px;font-weight:500;color:var(--on-surface-variant);letter-spacing:0}
.plan .list{margin:18px 0 26px}
.plan .btn{margin-top:auto;text-align:center}

/* --- FAQ --------------------------------------------------------------- */
.faq{margin-top:24px;max-width:var(--measure);background:var(--surface-lowest);border-radius:var(--r);padding:4px 26px;box-shadow:var(--shadow-sm)}
.faq details{border-bottom:1px solid var(--outline-variant)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:20px 34px 20px 0;font-weight:700;font-size:16.5px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:50%;translate:0 -50%;font-size:24px;font-weight:400;color:var(--primary);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 20px;color:var(--on-surface-variant);font-size:15.5px;max-width:60ch}

/* --- Aviso de cuidado --------------------------------------------------- */
.care{background:var(--secondary-container);border-radius:var(--r);padding:22px 24px;margin-top:26px;max-width:var(--measure)}
.care p{margin:0;font-size:15px;color:var(--on-secondary-container)}
.care b{font-weight:800}

/* --- Fechamento --------------------------------------------------------- */
.closer{background:linear-gradient(140deg,var(--secondary-container),var(--surface-container) 45%,var(--primary-container));border-radius:var(--r-lg);padding:clamp(40px,6vw,72px) clamp(24px,5vw,56px);text-align:center;position:relative;overflow:hidden}

/* --- Lista de espera ----------------------------------------------------- */
/* O campo e o botao ficam lado a lado no desktop e empilham no celular, onde
   um botao de largura total e mais facil de acertar com o polegar. O minimo
   de 48px vale nos dois. */
.wl{max-width:520px;margin:0 auto;text-align:left}
.wl__label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;
  color:var(--on-secondary-container)}
.wl__row{display:flex;flex-direction:column;gap:10px}
@media(min-width:560px){.wl__row{flex-direction:row}}
.wl__input{flex:1;min-width:0;min-height:48px;padding:13px 18px;font:inherit;font-size:16px;
  color:var(--on-surface);background:var(--surface-lowest);
  border:1px solid var(--outline);border-radius:999px}
.wl__input::placeholder{color:var(--on-surface-variant);opacity:.75}
.wl__input:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-color:var(--primary)}
.wl .btn{min-height:48px;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:700;
  white-space:nowrap}
.wl .btn[disabled]{opacity:.6;cursor:progress;transform:none}

/* O honeypot. Fora da tela e fora da arvore de acessibilidade, nunca
   `display:none` — um bot que le o CSS pula campo escondido desse jeito. */
.wl__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.wl__msg{margin:14px 0 0;font-size:15px;font-weight:600;min-height:1.4em;
  color:var(--on-secondary-container)}
.wl__msg--ok{color:var(--on-tertiary-container)}
.wl__msg--err,.wl__msg--warn{color:var(--error)}
.wl__msg a{color:inherit;font-weight:700}

.wl__fine{max-width:52ch;margin:18px auto 0;font-size:14px;line-height:1.6;
  color:var(--on-secondary-container);opacity:.85}
.wl__fine a{color:inherit;font-weight:700}

/* --- Rodapé ------------------------------------------------------------- */
.foot{background:var(--surface-low);color:var(--on-surface-variant);padding:56px var(--pad) 34px;font-size:14.5px}
.foot__in{max-width:1120px;margin:0 auto;display:grid;gap:26px}
@media(min-width:760px){.foot__in{grid-template-columns:1.5fr 1fr}}
.foot a{color:var(--on-surface-variant);text-decoration:none;display:block;padding:5px 0;font-weight:600}
.foot a:hover{color:var(--primary)}
.foot__legal{border-top:1px solid var(--outline-variant);margin-top:30px;padding-top:20px;font-size:13px;line-height:1.6;display:block}

/* --- A colmeia da Jornada ------------------------------------------------
   Hexágonos de ponta para cima. A linha do meio anda meio hexágono para a
   direita e as de fora meio para a esquerda, o que encaixa a malha e mantém o
   bloco centrado — sem isso a colmeia inteira pende para um lado. O tamanho é
   em vw para caber em 320px sem media query: quatro por linha, sempre. */
.hive{--hex:clamp(66px,13.5vw,124px);--hex-gap:6px;--hex-h:calc(var(--hex)*1.1547);
  margin:26px 0 0;display:flex;flex-direction:column;align-items:center}
.hive__row{display:flex;gap:var(--hex-gap);justify-content:center}
.hive__row+.hive__row{margin-top:calc(var(--hex-h) * -.25 + 4px)}
.hive__row:nth-child(odd){transform:translateX(calc((var(--hex) + var(--hex-gap)) * -.25))}
.hive__row:nth-child(even){transform:translateX(calc((var(--hex) + var(--hex-gap)) * .25))}
.hex{width:var(--hex);height:var(--hex-h);flex:none;padding:0 11%;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--surface-lowest);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;overflow:hidden}
/* A cor esquenta conforme a escada sobe: oliva, ardósia, terracota. */
.hive__row:nth-child(1) .hex{background:linear-gradient(155deg,var(--tertiary-container),var(--tertiary-container-lift))}
.hive__row:nth-child(2) .hex{background:linear-gradient(155deg,var(--secondary-container),var(--secondary-container-lift))}
.hive__row:nth-child(3) .hex{background:linear-gradient(155deg,var(--primary-container),var(--primary-container-lift))}
.hex__n{font-size:clamp(9px,1.5vw,12px);font-weight:800;letter-spacing:.06em;
  font-variant-numeric:tabular-nums;color:var(--on-surface-variant);opacity:.72}
.hex__l{font-size:clamp(8.5px,1.6vw,13px);font-weight:700;line-height:1.16;
  letter-spacing:-.01em;color:var(--on-surface)}
.hive__key{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  margin:26px 0 0;padding:0;list-style:none;font-size:13px;font-weight:600;
  color:var(--on-surface-variant)}
.hive__key li{display:flex;align-items:center;gap:8px}
.hive__key i{width:11px;height:12.7px;flex:none;font-style:normal;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hive__key i.k1{background:var(--tertiary-container)}
.hive__key i.k2{background:var(--secondary-container)}
.hive__key i.k3{background:var(--primary-container)}

/* --- Maquete do menu Meu Palco ------------------------------------------ */
.mock{margin-top:38px;background:var(--surface-lowest);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:1fr}
@media(min-width:760px){.mock{grid-template-columns:248px 1fr}}
.mock__rail{background:var(--surface-container);padding:22px 16px 26px;
  border-bottom:1px solid var(--outline-variant)}
@media(min-width:760px){.mock__rail{border-bottom:0;border-right:1px solid var(--outline-variant)}}
.mock__brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;
  letter-spacing:-.02em;color:var(--on-surface);padding:0 10px 4px}
.mock__brand::before{content:"";width:16px;height:18.5px;flex:none;background:var(--primary);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mock__grp{font-size:10.5px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--on-surface-variant);margin:20px 0 6px;padding:0 10px}
.mock__i{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;
  font-size:14px;font-weight:600;color:var(--on-surface-variant)}
.mock__i::before{content:"";width:9px;height:10.4px;flex:none;background:var(--outline);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.mock__i--on{background:var(--surface-lowest);color:var(--on-surface);box-shadow:var(--shadow-sm)}
.mock__i--on::before{background:var(--primary)}
.mock__body{padding:clamp(24px,4vw,38px) clamp(22px,4vw,36px);display:flex;flex-direction:column;justify-content:center}
.mock__body .eyebrow{margin-bottom:10px}
.mock__h{font-size:20px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--on-surface)}
.mock__p{margin:0 0 18px;font-size:15px;color:var(--on-surface-variant);max-width:44ch}
.mock__pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.mock__pills span{background:var(--surface-low);border-radius:999px;padding:7px 14px;
  font-size:13px;font-weight:600;color:var(--on-surface-variant)}
.mock__cta{display:inline-block;align-self:flex-start;background:var(--primary);color:var(--on-primary);
  border-radius:999px;padding:11px 22px;font-size:14.5px;font-weight:700}

/* Quarto cartão da grade: sem etiqueta colorida sobrando, apenas neutro. */
.card:nth-child(4) .card__tag{color:var(--on-surface);background:var(--surface-high)}