/* Casca das páginas estáticas do site (Termos, Política, Central de Confiança e /ajuda): cores, fonte, cabeçalho,
   rodapé e peças das páginas. Escrito à mão, com o endereço versionado: o <link> de cada página leva ?v=<hash>
   deste arquivo, gravado por `npm run geo:paginas` (scripts/geo/staticSiteShell.ts) e conferido no teste dele.
   O que é de uma página só fica no <style> dela — inclusive a trava de seleção das páginas jurídicas, que a /ajuda
   não tem. Mudou este arquivo? Rode `npm run geo:paginas`. */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-display:"Space Grotesk","Space Grotesk Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --slate-50:oklch(98.4% .003 247.858);
  --slate-100:oklch(96.8% .007 247.896);
  --slate-200:oklch(92.9% .013 255.508);
  --slate-300:oklch(86.9% .022 252.894);
  --slate-500:oklch(55.4% .046 257.417);
  --slate-600:oklch(44.6% .043 257.281);
  --slate-700:oklch(37.2% .044 257.287);
  --slate-800:oklch(27.9% .041 260.031);
  --slate-900:oklch(20.8% .042 265.755);
  --blue-50:oklch(97% .014 254.604);
  --blue-100:oklch(93.2% .032 255.585);
  --blue-200:oklch(88.2% .059 254.128);
  --blue-500:oklch(62.3% .214 259.815);
  --blue-600:oklch(54.6% .245 262.881);
  --blue-700:oklch(48.8% .243 264.376);
  --blue-800:oklch(42.4% .199 265.638);
  --indigo-50:oklch(96.2% .018 272.314);
  --indigo-100:oklch(93% .034 272.788);
  --indigo-200:oklch(87% .065 274.039);
  --indigo-600:oklch(51.1% .262 276.966);
  --indigo-700:oklch(45.7% .24 277.023);
  --indigo-800:oklch(39.8% .195 277.366);
  --emerald-50:oklch(97.9% .021 166.113);
  --emerald-100:oklch(95% .052 163.051);
  --emerald-200:oklch(90.5% .093 164.15);
  --emerald-600:oklch(59.6% .145 163.225);
  --emerald-700:oklch(50.8% .118 165.612);
  --emerald-800:oklch(43.2% .095 166.913);
  --amber-50:oklch(98.7% .022 95.277);
  --amber-100:oklch(96.2% .059 95.617);
  --amber-200:oklch(92.4% .12 95.746);
  --amber-600:oklch(66.6% .179 58.318);
  --amber-700:oklch(55.5% .163 48.998);
  --amber-800:oklch(47.3% .137 46.201);
  --amber-900:oklch(41.4% .112 45.904);
  --purple-50:oklch(97.7% .014 308.299);
  --purple-100:oklch(94.6% .033 307.174);
  --purple-200:oklch(90.2% .063 306.703);
  --purple-500:oklch(62.7% .265 303.9);
  --purple-600:oklch(55.8% .288 302.321);
  --purple-700:oklch(49.6% .265 301.924);
  --purple-800:oklch(43.8% .218 303.724);
  --cyan-50:oklch(98.4% .019 200.873);
  --cyan-600:oklch(60.9% .126 221.723);
  --cyan-700:oklch(52% .105 223.128);
  --shadow-2xs:0 1px rgb(0 0 0/.05);
  --shadow-xs:0 1px 2px 0 rgb(0 0 0/.05);
  --shadow-sm:0 1px 3px 0 rgb(0 0 0/.1),0 1px 2px -1px rgb(0 0 0/.1);
  --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
  --ease:cubic-bezier(.4,0,.2,1);
}
@font-face{font-family:"Space Grotesk";font-style:normal;font-display:swap;font-weight:300 700;src:url(/fonts/space-grotesk-latin-wght-normal.woff2) format("woff2-variations"),url(/fonts/space-grotesk-latin-wght-normal.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}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Barra de rolagem fina do site, copiada do index.css ("Custom scrollbar"; o teste confere as quatro regras): com a
   barra padrão do Windows (~15 px) o menu do topo e o rodapé ficavam 4 a 5 px fora do lugar em relação ao site. */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:9999px}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--slate-50);color:var(--slate-900);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word}
main{flex:1 0 auto}
.ic{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pe-sprite{position:absolute;width:0;height:0;overflow:hidden}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.pe-skip{position:absolute;left:12px;top:-64px;z-index:200;padding:8px 14px;border-radius:12px;background:var(--blue-600);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-lg)}
.pe-skip:focus{top:12px}

/* Cabeçalho */
.sh{position:relative;z-index:100;background:rgb(255 255 255/.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--slate-200);box-shadow:var(--shadow-xs)}
.sh-bar{max-width:1500px;margin:0 auto;padding:0 12px;height:64px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sh-logo{display:flex;align-items:center;gap:8px;flex-shrink:0;border-radius:8px;text-decoration:none;transition:all .15s var(--ease)}
.sh-logo:hover{opacity:.9}
.sh-mark{display:flex;padding:6px;border-radius:8px;background:var(--blue-600);color:#fff;font-size:16px;box-shadow:0 10px 15px -3px var(--blue-200),0 4px 6px -4px var(--blue-200);transition:transform .15s var(--ease)}
.sh-logo:hover .sh-mark{transform:scale(1.05)}
.sh-name{display:none;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:24px;letter-spacing:-.025em;color:var(--slate-800)}
.sh-name span{color:var(--blue-600)}
.sh-account{display:flex;align-items:center;gap:4px;flex-shrink:0;padding:6px 10px;border-radius:12px;background:var(--blue-600);color:#fff;font-size:12px;line-height:16px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;text-decoration:none;box-shadow:var(--shadow-sm);transition:all .15s var(--ease)}
.sh-account .ic{font-size:14px}
.sh-account:hover{background:var(--blue-700)}
.sh-account:active{transform:scale(.95)}
/* Dois menus, como no site: pílula no centro da barra (entre o logo e Minha Conta, na ordem do Tab) a partir
   de 1024 px; grade de 3 botões embaixo da barra até 1023 px. O que não aparece fica em display:none. */
.sh-nav-lg{display:none}
.sh-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 12px;border-top:1px solid var(--slate-100);background:color-mix(in oklab,var(--slate-50) 90%,transparent)}
.sh-link{display:flex;align-items:center;justify-content:center;text-align:center;gap:6px;min-width:0;padding:6px 8px;border-radius:12px;border:1px solid var(--slate-200);background:#fff;font-size:11px;line-height:1.25;font-weight:900;text-transform:uppercase;color:var(--slate-700);text-decoration:none;transition:all .15s var(--ease)}
/* Abaixo de 450 px a grade esconde os três ícones (@media (width<450px), mais abaixo). Acima, se faltar espaço (outra
   fonte do sistema), o ícone encolhe antes de o texto vazar do botão, como no site. */
.sh-link .ic{font-size:13px;flex-shrink:1;min-width:0}
.sh-link:hover{background:var(--slate-50)}
.t-indigo .ic{color:var(--indigo-600)}
.t-blue .ic{color:var(--blue-600)}
.t-emerald .ic{color:var(--emerald-600)}

/* Rodapé. Cor do hover com 4,5:1 sobre o fundo do hover, como no Footer.tsx: verde, ciano e âmbar no -700 (no -600
   ficavam entre 3,1 e 3,5:1); azul, roxo e índigo -600 passam. O teste da casca calcula cada :hover deste arquivo. */
.sf{width:100%;margin-top:48px;padding:20px 0;background:rgb(255 255 255/.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid color-mix(in oklab,var(--slate-200) 90%,transparent);color:var(--slate-600)}
.sf-in{max-width:1600px;margin:0 auto;padding:0 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.sf-nav{display:grid;grid-template-columns:auto auto;justify-content:center;justify-items:start;column-gap:12px;row-gap:4px;font-size:12px;line-height:16px;font-weight:600;color:var(--slate-600)}
.sf-dot{display:none;color:var(--slate-300);font-weight:300}
.sf-i{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;color:inherit;text-decoration:none;cursor:pointer;transition:all .15s var(--ease)}
.sf-i:active{transform:scale(.95)}
.sf-i .ic{font-size:13.5px}
.c-em{color:var(--emerald-600)}
.sf-legal{position:relative}
.sf-legal>summary{list-style:none}
.sf-legal>summary::-webkit-details-marker{display:none}
.sf-legal>summary:hover{color:var(--blue-600);background:color-mix(in oklab,var(--slate-100) 80%,transparent)}
.sf-chev{font-size:13px!important;color:var(--slate-500);transform:rotate(180deg);transition:transform .15s var(--ease)}
.sf-legal[open] .sf-chev{transform:none}
.sf-menu{position:absolute;bottom:100%;left:0;margin:0 0 8px;padding:6px 0;z-index:50;min-width:14rem;list-style:none;text-align:left;background:#fff;border:1px solid var(--slate-200);border-radius:12px;box-shadow:var(--shadow-lg)}
.sf-menu a{display:flex;width:100%;align-items:center;gap:8px;padding:8px 14px;color:var(--slate-600);text-decoration:none;transition:all .15s var(--ease)}
.sf-menu a .ic{font-size:13.5px;color:var(--slate-500)}
.sf-menu a:hover{color:var(--blue-600);background:color-mix(in oklab,var(--slate-100) 80%,transparent)}
/* A página atual no menu: em negrito, no azul do site; a Central de Confiança (.trust), no verde dela. */
.sf-menu a[aria-current=page]{font-weight:700;color:var(--blue-800)}
.sf-menu a[aria-current=page] .ic{color:var(--blue-600)}
.sf-menu a.trust .ic{color:var(--emerald-600)}
.sf-menu a.trust[aria-current=page]{color:var(--emerald-800)}
.sf-menu a.trust:hover{color:var(--emerald-700);background:color-mix(in oklab,var(--emerald-50) 70%,transparent)}
/* A página atual fora do menu "Privacidade e Termos" (a /ajuda, no "Ajuda e Dicas"): sublinhado, na cor do item. */
.sf-nav>a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sf-purple .ic{color:var(--purple-500)}
.sf-purple:hover{color:var(--purple-600);background:color-mix(in oklab,var(--purple-50) 70%,transparent)}
.sf-blue{color:var(--slate-700);font-weight:700}
.sf-blue .ic{color:var(--blue-600)}
.sf-blue:hover{color:var(--blue-600);background:color-mix(in oklab,var(--blue-50) 70%,transparent)}
.sf-cyan{color:var(--slate-700);font-weight:700}
.sf-cyan .ic{color:var(--cyan-600)}
.sf-cyan:hover{color:var(--cyan-700);background:color-mix(in oklab,var(--cyan-50) 70%,transparent)}
.sf-amber{color:var(--amber-800);font-weight:700}
.sf-amber .ic{color:var(--amber-600)}
.sf-amber:hover{color:var(--amber-700);background:color-mix(in oklab,var(--amber-50) 70%,transparent)}
.sf-indigo{color:var(--indigo-800);font-weight:700}
.sf-indigo .ic{color:var(--indigo-600)}
.sf-indigo:hover{color:var(--indigo-600);background:color-mix(in oklab,var(--indigo-50) 70%,transparent)}
.sf-end{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;line-height:16px;font-weight:500;color:var(--slate-500)}
.sf-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;column-gap:6px}
.sf-brand,.sf-pw{font-weight:700;color:var(--slate-600);text-decoration:none;transition:all .15s var(--ease)}
.sf-brand:hover{color:var(--slate-700)}
.sf-brand span{color:var(--blue-600)}
.sf-pw:hover{color:var(--blue-600)}

/* Página e cartões. O tom (tone-*) dá as cores de selo, aviso, sumário, seção e cartão; --t900 só no âmbar. */
.tone-blue{--t50:var(--blue-50);--t100:var(--blue-100);--t200:var(--blue-200);--t600:var(--blue-600);--t700:var(--blue-700);--t800:var(--blue-800)}
.tone-emerald{--t50:var(--emerald-50);--t100:var(--emerald-100);--t200:var(--emerald-200);--t600:var(--emerald-600);--t700:var(--emerald-700);--t800:var(--emerald-800)}
.tone-indigo{--t50:var(--indigo-50);--t100:var(--indigo-100);--t200:var(--indigo-200);--t600:var(--indigo-600);--t700:var(--indigo-700);--t800:var(--indigo-800)}
.tone-purple{--t50:var(--purple-50);--t100:var(--purple-100);--t200:var(--purple-200);--t600:var(--purple-600);--t700:var(--purple-700);--t800:var(--purple-800)}
.tone-amber{--t50:var(--amber-50);--t100:var(--amber-100);--t200:var(--amber-200);--t600:var(--amber-600);--t700:var(--amber-700);--t800:var(--amber-800);--t900:var(--amber-900)}
.pe-page{width:100%;max-width:80rem;margin:0 auto;padding:40px 16px 0}
.pe-hero{max-width:48rem;margin:0 auto;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.pe-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 14px;border-radius:9999px;background:var(--t50);color:var(--t700);border:1px solid var(--t200);font-size:12px;line-height:16px;font-weight:700}
.pe-badge .ic{font-size:14px;color:var(--t600)}
.pe-title{margin:0;font-family:var(--font-display);font-size:24px;line-height:1.25;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;color:var(--slate-900)}
.pe-lead{margin:0;font-size:13px;line-height:1.625;font-weight:500;color:var(--slate-600)}
.pe-lead strong{font-weight:700;color:var(--slate-900)}
.pe-updated{margin:0;font-size:12px;line-height:16px;font-weight:600;color:var(--slate-600)}
.pe-note{max-width:48rem;margin:28px auto 0;display:flex;align-items:flex-start;gap:12px;padding:16px;border-radius:16px;background:var(--t50);border:1px solid var(--t200);color:var(--t800);font-size:13px;line-height:1.625;font-weight:500}
.pe-note p{margin:0}
.pe-note strong{color:var(--t900,var(--t800))}
.pe-note-ico{display:inline-flex;flex-shrink:0;padding:8px;border-radius:12px;background:#fff;border:1px solid var(--t200);color:var(--t700);font-size:18px}
.pe-toc{max-width:64rem;margin:20px auto 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pe-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:var(--t50);color:var(--t800);border:1px solid color-mix(in oklab,var(--t200) 80%,transparent);font-size:11px;line-height:16px;font-weight:700;text-decoration:none;transition:all .15s var(--ease)}
.pe-chip .ic{font-size:13px;color:var(--t600)}
.pe-chip:hover{border-color:var(--t200);background:#fff}
.pe-wrap{max-width:64rem;margin:0 auto}
.pe-sec{margin-top:40px;padding-top:24px;border-top:1px solid var(--slate-200);scroll-margin-top:16px}
.pe-sec-top{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:20px;text-align:center}
.pe-sec-ico{display:inline-flex;padding:10px;border-radius:12px;background:var(--t50);color:var(--t600);border:1px solid var(--t200);font-size:20px}
.pe-h2{margin:0;font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:900;letter-spacing:-.025em;text-transform:uppercase;color:var(--slate-900)}
.pe-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;padding:0;list-style:none}
.pe-card{padding:20px;border-radius:16px;background:#fff;border:1px solid color-mix(in oklab,var(--slate-200) 90%,transparent);box-shadow:var(--shadow-2xs)}
.pe-card-head{display:flex;align-items:center;gap:12px}
.pe-ico{display:inline-flex;flex-shrink:0;padding:8px;border-radius:12px;background:var(--t50);color:var(--t600);border:1px solid var(--t100);font-size:18px}
.pe-card h3{margin:0;font-family:var(--font-display);font-size:14px;line-height:20px;font-weight:900;color:var(--slate-900)}
.pe-card p{margin:12px 0 0;font-size:13px;line-height:1.625;color:var(--slate-600)}
.pe-card a,.pe-contact a{color:var(--blue-700);font-weight:600;text-decoration:underline;text-underline-offset:2px;border-radius:2px}
.pe-card a:hover,.pe-contact a:hover{color:var(--blue-800)}
.pe-contact{margin-top:40px;padding:24px 20px;border-radius:24px;background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm);text-align:center;scroll-margin-top:16px}
.pe-contact .pe-sec-top{margin-bottom:12px}
.pe-contact p{max-width:48rem;margin:0 auto;font-size:14px;line-height:1.625;font-weight:500;color:var(--slate-600);overflow-wrap:anywhere}
.pe-id{max-width:48rem;margin:24px auto 0;font-size:12px;line-height:1.625;font-weight:500;color:var(--slate-600);text-align:center}

/* Documento longo (Termos de Uso e Política de Privacidade): o sumário e o texto em uma coluna, em cartões brancos.
   O texto jurídico fica como está (seções em h2 numerados, h3, listas, tabelas); daqui vem só a aparência. A tabela
   rola de lado dentro do cartão (.pe-table, com sombra na borda que tem mais conteúdo); a página nunca. */
.pe-index,.pe-doc{max-width:50rem;margin:28px auto 0;border-radius:24px;background:#fff;border:1px solid var(--slate-200);box-shadow:var(--shadow-sm)}
.pe-index{padding:20px}
.pe-index-h{margin:0 0 10px;font-family:var(--font-display);font-size:12px;line-height:16px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-600)}
.pe-index ol{margin:0;padding-left:26px;font-size:13px;line-height:1.5}
.pe-index li{padding:3px 0;break-inside:avoid}
.pe-index li::marker{font-weight:700;color:var(--blue-600)}
.pe-index a{border-radius:4px;font-weight:600;color:var(--slate-700);text-decoration:none;transition:color .15s var(--ease)}
.pe-index a:hover{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.pe-doc{padding:24px 20px;font-size:14px;line-height:1.7;color:var(--slate-700)}
.pe-doc-intro{margin-bottom:4px;padding:16px;border-radius:16px;background:var(--blue-50);border:1px solid var(--blue-100);font-size:13px;line-height:1.625}
.pe-doc h2{margin:28px 0 10px;padding-top:24px;border-top:1px solid var(--slate-100);font-family:var(--font-display);font-size:16px;line-height:1.35;font-weight:900;letter-spacing:-.01em;text-transform:uppercase;color:var(--slate-900);scroll-margin-top:16px}
.pe-doc-intro+h2{padding-top:0;border-top:0}
.pe-doc h3{margin:20px 0 8px;font-family:var(--font-display);font-size:15px;line-height:1.4;font-weight:700;color:var(--slate-900)}
.pe-doc p{margin:0 0 12px}
.pe-doc ul{margin:0 0 12px;padding-left:22px}
.pe-doc li{margin-bottom:6px}
.pe-doc li::marker{color:var(--blue-600)}
.pe-doc strong{font-weight:700;color:var(--slate-900)}
.pe-doc a{border-radius:2px;font-weight:600;color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.pe-doc a:hover{color:var(--blue-800)}
.pe-doc code{padding:1px 5px;border-radius:6px;background:var(--slate-100);color:var(--slate-800);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;overflow-wrap:anywhere}
.pe-table{margin:12px 0 16px;overflow-x:auto;border:1px solid var(--slate-200);border-radius:12px;background:linear-gradient(to right,#fff 30%,rgb(255 255 255/0)) left center/32px 100% no-repeat local,linear-gradient(to left,#fff 30%,rgb(255 255 255/0)) right center/32px 100% no-repeat local,radial-gradient(farthest-side at 0 50%,rgb(15 23 42/.14),transparent) left center/10px 100% no-repeat scroll,radial-gradient(farthest-side at 100% 50%,rgb(15 23 42/.14),transparent) right center/10px 100% no-repeat scroll,#fff}
.pe-table:focus-visible{outline:2px solid var(--blue-600);outline-offset:2px}
.pe-table table{width:100%;min-width:34rem;border-collapse:collapse;font-size:13px;line-height:1.55}
.pe-table th,.pe-table td{padding:10px 12px;border-bottom:1px solid var(--slate-200);text-align:left;vertical-align:top}
.pe-table th+th,.pe-table td+td{border-left:1px solid var(--slate-100)}
.pe-table th{background:var(--slate-50);font-weight:700;color:var(--slate-900)}
.pe-table tr:last-child td{border-bottom:0}
@media (min-width:640px){
  .pe-index{padding:24px 32px}
  .pe-index ol{columns:2;column-gap:40px}
  .pe-doc{padding:40px;font-size:15px}
  .pe-doc-intro{padding:18px 22px;font-size:14px}
  .pe-doc h2{font-size:18px}
}

/* Abaixo de 360 px o menu do topo encolhe (fonte 10 px, padding lateral 4 px, margem 8 px), como o do Header.tsx
   (max-[360px]:, desde 14/10): com 11 px, padding 8 px e margem 12 px, o "DEMONSTRAÇÃO" passava da borda do botão em
   320 px. A consulta é a mesma que o Tailwind 4 gera para o app, (width<360px) — com (max-width:359px), uma largura
   fracionária entre 359 e 360 px (zoom, alguns Androids) encolheria um e não o outro. O teste da casca confere os dois. */
@media (width<360px){
  .sh-nav{padding:6px 8px;gap:4px}
  .sh-link{font-size:10px;padding:6px 4px;gap:4px}
}
/* Abaixo de 450 px os três botões da grade escondem o ícone, como no Header.tsx (max-[450px]:hidden, desde 14/10):
   sem espaço, o ícone do "DEMONSTRAÇÃO" encolhia até sumir e os outros dois ficavam. Com a fonte do sistema em 11 px,
   o do "DEMONSTRAÇÃO" cabe inteiro a partir de 433 px e os três a partir de 446 px. Mesma consulta do Tailwind 4,
   (width<450px); o teste da casca confere os dois. */
@media (width<450px){
  .sh-nav .ic{display:none}
}
@media (min-width:440px){
  .sh-name{display:inline}
}
@media (min-width:640px){
  .sh-bar{padding:0 24px}
  .sh-mark{font-size:20px}
  .sh-name{font-size:18px;line-height:28px}
  .sh-account{padding:6px 14px;gap:6px}
  .sh-link{padding:6px 12px}
  .sf-in{padding:0 24px}
  .sf-nav{grid-template-columns:auto auto auto}
  .pe-page{padding:40px 24px 0}
  .pe-title{font-size:36px}
  .pe-lead{font-size:14px}
  .pe-note{padding:16px 20px;font-size:14px}
  .pe-h2{font-size:30px;line-height:36px}
  .pe-card p{font-size:14px}
  .pe-contact{padding:32px}
}
@media (min-width:768px){
  .pe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1024px){
  .sh-nav{display:none}
  .sh-nav-lg{position:absolute;left:50%;top:32px;transform:translate(-50%,-50%);display:flex;align-items:center;gap:4px;padding:4px;border:1px solid color-mix(in oklab,var(--slate-200) 90%,transparent);border-radius:16px;background:color-mix(in oklab,var(--slate-100) 90%,transparent);box-shadow:var(--shadow-xs)}
  .sh-link{justify-content:flex-start;padding:6px 12px;border:0;background:transparent;font-size:12px;line-height:16px}
  .sh-link .ic{font-size:14px}
  .sh-link:hover{background:#fff}
  .sh-link.t-indigo:hover{color:var(--indigo-600)}
  .sh-link.t-blue:hover{color:var(--blue-600)}
  .sh-link.t-emerald:hover{color:var(--emerald-700)}
  .sf-nav{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px;row-gap:8px}
  .sf-dot{display:inline}
  .sf-menu{left:50%;transform:translateX(-50%)}
}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}