@import url("/tokens.css");
@font-face{font-family:'Young Serif';src:url("/fontes/young-serif-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url("/fontes/caveat-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url("/fontes/hanken-grotesk-variavel.woff2") format("woff2");font-weight:400 700;font-display:swap}

/* Tema: segue o sistema; as pílulas Claro/Escuro (rádios #tema-claro/#tema-escuro) mandam por cima. Sem JavaScript. */
:root{--fundo:var(--cor-papel);--fundo-vidro:rgba(255,255,255,.88);--superficie:var(--cor-superficie);--texto:var(--cor-tinta);--texto-2:var(--cor-tinta-2);--suave:var(--cor-suave);--linha:rgba(14,26,46,.12);--linha-forte:rgba(14,26,46,.3);--acento:var(--cor-azul-texto);--acento-suave:rgba(20,116,191,.16);--botao:var(--cor-tinta);--botao-texto:var(--cor-papel);color-scheme:light}

html:has(#tema-escuro:checked){--fundo:var(--cor-noite);--fundo-vidro:rgba(11,20,38,.88);--superficie:var(--cor-noite-2);--texto:var(--cor-papel-escuro);--texto-2:var(--cor-papel-escuro-2);--suave:var(--cor-suave-escuro);--linha:rgba(238,242,247,.13);--linha-forte:rgba(238,242,247,.3);--acento:var(--cor-azul-claro);--acento-suave:rgba(91,192,240,.18);--botao:var(--cor-azul-claro);--botao-texto:var(--cor-noite);color-scheme:dark}
html:has(#tema-claro:checked){--fundo:var(--cor-papel);--fundo-vidro:rgba(255,255,255,.88);--superficie:var(--cor-superficie);--texto:var(--cor-tinta);--texto-2:var(--cor-tinta-2);--suave:var(--cor-suave);--linha:rgba(14,26,46,.12);--linha-forte:rgba(14,26,46,.3);--acento:var(--cor-azul-texto);--acento-suave:rgba(20,116,191,.16);--botao:var(--cor-tinta);--botao-texto:var(--cor-papel);color-scheme:light}
.so-escuro{display:none}

html:has(#tema-escuro:checked) .so-claro{display:none}html:has(#tema-escuro:checked) .so-escuro{display:block}
html:has(#tema-claro:checked) .so-claro{display:block}html:has(#tema-claro:checked) .so-escuro{display:none}
.pilula .tema-claro{background:var(--texto);color:var(--fundo)}

html:has(#tema-escuro:checked) .pilula .tema-claro{background:none;color:var(--texto)}html:has(#tema-escuro:checked) .pilula .tema-escuro{background:var(--texto);color:var(--fundo)}
html:has(#tema-claro:checked) .pilula .tema-claro{background:var(--texto);color:var(--fundo)}html:has(#tema-claro:checked) .pilula .tema-escuro{background:none;color:var(--texto)}
html:has(.tema-input:focus-visible) .pilula-tema{outline:3px solid var(--acento);outline-offset:3px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{container:pagina/inline-size;margin:0;background:var(--fundo);color:var(--texto);font-family:var(--fonte-texto);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
img{display:block;max-width:100%;height:auto}
a{color:var(--acento)}a:hover{color:var(--texto)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:6px}
.invisivel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salto{position:absolute;left:-999px;top:8px;background:var(--botao);color:var(--botao-texto);padding:8px 16px;border-radius:var(--raio-pilula);z-index:20}.salto:focus{left:8px}

/* Cabeçalho */
.topo{position:sticky;top:0;z-index:10;background:var(--fundo-vidro);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--linha)}
.topo-linha{max-width:1280px;margin:0 auto;padding:12px var(--margem);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--texto)}
.marca img{height:36px;width:auto}
.marca-nome{font-family:var(--fonte-titulo);font-size:21px;line-height:1;white-space:nowrap}
.marca-nome span{font-family:var(--fonte-mao);font-size:1.3em;color:var(--acento)}
.controlos{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pilula{display:flex;gap:2px;padding:3px;border-radius:var(--raio-pilula);border:1px solid var(--linha);background:var(--superficie)}
.pilula a,.pilula label{white-space:nowrap;display:flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:var(--raio-pilula);font-size:13px;font-weight:700;letter-spacing:.03em;color:var(--texto);text-decoration:none;cursor:pointer}
.pilula a[aria-current]{background:var(--texto);color:var(--fundo)}
.tema-claro,.tema-escuro{display:flex}
.ponto{width:10px;height:10px;border-radius:50%;border:1.5px solid currentColor}
.tema-claro .ponto{background:#fff}.tema-escuro .ponto{background:var(--cor-noite)}
.nav{display:flex;justify-content:center;padding:0 16px 12px}
.nav .pilula a{padding:0 16px;font-size:14px}
@container pagina (max-width:620px){.botao.esconde-pequeno{display:none}}

/* Botões */
.botao{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:var(--raio-pilula);background:var(--botao);color:var(--botao-texto);font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit}
.botao:hover{color:var(--botao-texto);filter:brightness(1.1)}
.botao-pequeno{min-height:42px;padding:0 18px;font-size:14px}
.botao-traco{background:transparent;color:var(--texto);border:1.5px solid var(--texto)}.botao-traco:hover{color:var(--texto);background:var(--superficie)}
.botao-largo{width:100%}

/* Secções */
.seccao{padding:clamp(56px,9cqi,120px) var(--margem)}
.seccao-alt{background:var(--superficie)}
.dentro{max-width:var(--largura);margin:0 auto}
.olho{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave)}
.titulo{font-family:var(--fonte-titulo);font-weight:400;line-height:1.08;text-wrap:balance}
.mao{font-family:var(--fonte-mao);font-weight:600;color:var(--acento)}
.duas{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(32px,6cqi,80px);align-items:center}
@container pagina (min-width:880px){.duas{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* Abertura */
.abertura{padding-top:clamp(36px,6cqi,88px)}
.estado{width:fit-content;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--raio-pilula);border:1px solid var(--linha);font-size:14px;font-weight:600}
.estado::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 4px var(--acento-suave)}
.abertura-texto{display:flex;flex-direction:column;gap:26px}
.abertura h1{font-size:clamp(38px,5.4cqi,68px);line-height:1.08;letter-spacing:-.015em}
.abertura h1 .mao{font-size:1.12em;display:block;line-height:1;margin-bottom:.06em}
.abertura .resumo{font-size:clamp(18px,1.6cqi,21px);color:var(--texto-2);max-width:520px;text-wrap:pretty}
.acoes{display:flex;gap:10px;flex-wrap:wrap}
.abertura-logo{display:flex;flex-direction:column;align-items:center;gap:12px}
.abertura-logo img{width:100%;max-width:560px}
.abertura-logo .mao{font-size:24px;color:var(--suave)}

/* Origem */
.papel{background:#fff;border:1px solid var(--linha);border-radius:var(--raio-l);padding:clamp(20px,4cqi,48px)}
.legenda{font-size:14px;color:var(--suave);margin-top:12px}
.origem-texto{display:flex;flex-direction:column;gap:20px}
.ano{font-family:var(--fonte-titulo);font-size:clamp(80px,12cqi,150px);line-height:.85;color:var(--acento)}
.origem-texto p{font-size:clamp(17px,1.5cqi,20px);max-width:560px;text-wrap:pretty}

/* Fases */
.cabeca{display:flex;flex-direction:column;gap:16px;max-width:820px;margin-bottom:clamp(36px,5cqi,64px)}
.cabeca .titulo{font-size:clamp(30px,3.6cqi,46px);line-height:1.15}
.fases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px}
.fase{border:1px solid var(--linha);border-radius:var(--raio-l);padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--fundo)}
.fase-topo{display:flex;justify-content:space-between;align-items:flex-start}
.fase-topo img{height:72px;width:auto}
.fase-num{font-size:13px;font-weight:700;color:var(--suave)}
.fase h3{font-family:var(--fonte-titulo);font-weight:400;font-size:34px;line-height:1}
.fase p{color:var(--texto-2);font-size:16px}

/* Promessas */
.promessas{list-style:none;margin:0;padding:0}
.promessa{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,3cqi,40px);align-items:start;padding:clamp(24px,3.5cqi,40px) 0;border-top:1px solid var(--linha)}
.promessa img{width:clamp(48px,6cqi,80px)}
.promessa-texto{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 40px;align-items:baseline}
@container pagina (min-width:880px){.promessa-texto{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.promessa h3{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(30px,4.2cqi,56px);line-height:1.04;text-wrap:balance}
.promessa p{font-size:clamp(16px,1.4cqi,19px);color:var(--texto-2);max-width:440px}

/* Enxame (pintar sem JavaScript: cada lugar vazio é uma checkbox) */
.enxame-cabeca{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 48px;flex-wrap:wrap;margin-bottom:clamp(32px,5cqi,56px)}
.enxame-cabeca .titulo{font-size:clamp(30px,4cqi,52px);max-width:680px}
.enxame{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:clamp(10px,2cqi,22px)}
.enxame li{aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.enxame img{width:82%;transition:transform .25s}
.enxame li:nth-child(3n) img{width:66%;transform:rotate(-10deg)}.enxame li:nth-child(4n+1) img{transform:rotate(8deg)}.enxame li:nth-child(5n) img{width:92%}
.lugar{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;cursor:pointer;border-radius:50%}
.lugar input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.lugar .pintada{position:absolute;opacity:0;transform:scale(.6);transition:opacity var(--mov-pintar) ease,transform var(--mov-pintar) cubic-bezier(.2,1.4,.4,1)}
.lugar input:checked ~ .pintada{opacity:1;transform:scale(1)}
.lugar input:checked ~ .vazia{opacity:0}
.lugar:hover .vazia{transform:scale(1.1) rotate(-6deg)}
.lugar input:focus-visible ~ .vazia{outline:3px solid var(--acento);outline-offset:4px;border-radius:50%}
.bate{animation:bater var(--mov-lento) ease-in-out infinite}
.enxame li:nth-child(2n) .bate{animation-delay:-.9s}.enxame li:nth-child(3n) .bate{animation-delay:-1.7s}
@keyframes bater{0%,100%{scale:1 1}50%{scale:.84 1}}
.nota{font-size:15px;color:var(--suave);max-width:560px;margin-top:32px}

/* Rodapé */
.rodape{padding:clamp(48px,7cqi,88px) var(--margem) 40px}
.etiquetas{display:flex;flex-wrap:wrap;gap:0 28px;font-family:var(--fonte-mao);font-weight:600;font-size:clamp(40px,6cqi,76px);line-height:1.1}
.etiquetas span:first-child{color:var(--acento)}
.rodape-linha{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:40px;padding-top:24px;border-top:1px solid var(--linha);font-size:14px;color:var(--suave)}

/* App: ecrãs */
.app{max-width:560px;margin:0 auto;padding:24px var(--margem) 120px}
.app-voltar{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:600;padding:8px 0}
.app-voltar a{color:var(--texto);text-decoration:none;min-height:44px;display:flex;align-items:center}
.app-voltar span{color:var(--suave)}
.barra{display:flex;gap:6px;margin:8px 0 28px}
.barra span{flex:1;height:4px;border-radius:2px;background:var(--linha)}
.passo{display:none;flex-direction:column;gap:20px}
#passo-1:checked ~ .app .passo-1,#passo-2:checked ~ .app .passo-2,#passo-3:checked ~ .app .passo-3,#passo-4:checked ~ .app .passo-4,#passo-5:checked ~ .app .passo-5{display:flex}
#passo-1:checked ~ .app .barra span:nth-child(-n+1),#passo-2:checked ~ .app .barra span:nth-child(-n+2),#passo-3:checked ~ .app .barra span:nth-child(-n+3),#passo-4:checked ~ .app .barra span:nth-child(-n+4),#passo-5:checked ~ .app .barra span{background:var(--texto)}
#passo-1:checked ~ .app .conta-1,#passo-2:checked ~ .app .conta-2,#passo-3:checked ~ .app .conta-3,#passo-4:checked ~ .app .conta-4,#passo-5:checked ~ .app .conta-5{display:inline}
.conta{display:none}
.passo h1,.passo h2{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(30px,6cqi,40px);line-height:1.08}
.passo-icone{height:56px;width:auto;align-self:flex-start}
.dica{font-size:14px;color:var(--suave)}
.escolhas{display:flex;gap:8px;flex-wrap:wrap}
.escolha{position:relative}
.escolha input{position:absolute;opacity:0}
.escolha span{display:flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--raio-pilula);border:1.5px solid var(--texto);font-size:14px;font-weight:700;cursor:pointer}
.escolha input:checked + span{background:var(--texto);color:var(--fundo)}
.escolha input:focus-visible + span{outline:3px solid var(--acento);outline-offset:3px}
.caixa{display:block;width:100%;border:1.5px solid var(--linha-forte);border-radius:var(--raio-m);padding:16px;font:inherit;font-size:17px;color:var(--texto);background:var(--fundo);resize:vertical}
.caixa:focus{outline:3px solid var(--acento);outline-offset:2px}
.campo{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}
.cartoes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cartao{position:relative;display:block}
.cartao input{position:absolute;opacity:0}
.cartao-corpo{display:flex;flex-direction:column;gap:8px;height:100%;padding:16px;border-radius:var(--raio-m);border:1.5px solid var(--linha-forte);cursor:pointer}
.cartao-corpo img{width:34px}
.cartao-corpo strong{font-size:15px}
.cartao-corpo small{font-size:13px;line-height:1.35;color:var(--texto-2)}
.cartao input:checked + .cartao-corpo{border-color:var(--texto);background:var(--superficie)}
.cartao input:focus-visible + .cartao-corpo{outline:3px solid var(--acento);outline-offset:2px}
.cartao-largo .cartao-corpo{flex-direction:row;align-items:center;gap:16px;padding:20px}
.cartao-largo .cartao-corpo img{width:52px;flex:none}
.lista-cartoes{display:flex;flex-direction:column;gap:12px}
.cores{display:flex;flex-direction:column;gap:20px}
.cores-grelha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 8px}
.cor{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;font-weight:600;cursor:pointer}
.cor input{position:absolute;opacity:0}
.cor i{width:48px;height:48px;border-radius:50%;display:block;border:1.5px solid var(--linha-forte)}
.cor input:checked + i{box-shadow:0 0 0 3px var(--fundo),0 0 0 6px var(--texto)}
.cor input:focus-visible + i{outline:3px solid var(--acento);outline-offset:6px}
.cor-fundador{opacity:.45;cursor:not-allowed}
.c-verde{background:var(--cor-verde)}.c-amarelo{background:var(--cor-amarelo)}.c-laranja{background:var(--cor-laranja)}.c-vermelho{background:var(--cor-vermelho)}.c-lilas{background:var(--cor-lilas)}.c-cinza{background:var(--cor-cinza)}.c-pessego{background:var(--cor-pessego)}.c-azul{background:var(--cor-azul)}
.previa{display:flex;justify-content:center;min-height:150px;align-items:center}
.previa img{width:170px;display:none}
.cores:has(#cor-verde:checked) .p-verde,.cores:has(#cor-amarelo:checked) .p-amarelo,.cores:has(#cor-laranja:checked) .p-laranja,.cores:has(#cor-vermelho:checked) .p-vermelho,.cores:has(#cor-lilas:checked) .p-lilas,.cores:has(#cor-cinza:checked) .p-cinza,.cores:has(#cor-pessego:checked) .p-pessego{display:block}
.rodape-app{position:fixed;left:0;right:0;bottom:0;padding:16px var(--margem) 24px;background:linear-gradient(to bottom,transparent,var(--fundo) 35%);display:flex;justify-content:center}
.rodape-app .dentro-app{width:100%;max-width:520px;display:flex}
.rodape-app label{display:none;width:100%}
#passo-1:checked ~ .rodape-app .ir-2,#passo-2:checked ~ .rodape-app .ir-3,#passo-3:checked ~ .rodape-app .ir-4,#passo-4:checked ~ .rodape-app .ir-5{display:flex}
#passo-5:checked ~ .rodape-app .ir-fim{display:flex}
.ir-fim{display:none;width:100%}
.ovo-posto{align-items:center;text-align:center}
.ovo-posto img{width:140px}

/* Página da borboleta */
.fases-barra{list-style:none;margin:16px 0 0;padding:10px 6px;border-radius:var(--raio-pilula);background:var(--superficie);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.fases-barra li{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:500;opacity:.45}
.fases-barra li img{height:30px;width:auto}
.fases-barra li[aria-current]{opacity:1;font-weight:800}
.grelha-pessoas{list-style:none;margin:20px 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.grelha-pessoas li:nth-child(odd) img{transform:rotate(-7deg)}.grelha-pessoas li:nth-child(3n) img{transform:rotate(9deg)}
.contagem{text-align:center;font-size:13px;color:var(--suave);margin-bottom:24px}
.historia{display:flex;flex-direction:column;gap:12px}
.historia .por{font-size:13px;color:var(--suave)}
.historia h1{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(32px,6cqi,42px);line-height:1.04}
.bloco{margin-top:32px}
.bloco-cabeca{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:6px}.bloco-cabeca span{white-space:nowrap}.bloco-cabeca .olho{flex:1}
.bloco-cabeca .olho{font-size:12px}
.bloco-cabeca span{font-size:13px;color:var(--suave)}
.pessoas{list-style:none;margin:0;padding:0}
.pessoas li{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--linha)}
.pessoas img{width:36px;flex:none}.pessoas li>div{flex:1;min-width:0}
.pessoas strong{display:block;font-size:15px}
.pessoas small{display:block;font-size:13px;color:var(--suave)}
.pinta{margin-top:32px;border:1.5px solid var(--texto);border-radius:var(--raio-l);overflow:hidden}
.pinta summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;min-height:60px;background:var(--botao);color:var(--botao-texto);font-weight:700;font-size:18px}
.pinta summary::-webkit-details-marker{display:none}
.pinta summary img{width:28px}
.pinta-corpo{padding:20px;display:flex;flex-direction:column;gap:14px}
.pinta-corpo p{font-size:15px;color:var(--texto-2)}

/* Voo */
.voo-topo{background:#fff;display:flex;justify-content:center;padding:24px var(--margem) 8px}
.voo-topo img{width:min(78%,420px)}
.voo{max-width:640px;margin:0 auto;padding:28px var(--margem) 64px;display:flex;flex-direction:column;gap:16px}
.voo-fase{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--suave)}
.voo-fase img{height:22px;width:auto}
.voo .mao{font-size:26px}
.voo h1{font-family:var(--fonte-titulo);font-weight:400;font-size:clamp(38px,8cqi,60px);line-height:1}
.voo p{color:var(--texto-2)}
.enxame-voo{list-style:none;margin:8px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.enxame-voo img{width:30px;animation:levantar 1.4s cubic-bezier(.2,.9,.3,1) both}
.enxame-voo li:nth-child(odd) img{animation-delay:.12s}.enxame-voo li:nth-child(3n) img{animation-delay:.24s}.enxame-voo li:nth-child(4n) img{animation-delay:.36s}
@keyframes levantar{from{opacity:0;transform:translateY(40px) rotate(-20deg) scale(.6)}to{opacity:1;transform:none}}
.partilhar{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.voo-etiquetas{display:flex;justify-content:center;gap:12px;font-weight:700;font-size:14px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Pequenos ecrãs (360 px) */
@container pagina (max-width:520px){.topo-linha{padding:10px 16px}.marca-nome{font-size:18px}.pilula a,.pilula label{padding:0 11px}.nav .pilula a{padding:0 10px;font-size:13px}.controlos{gap:6px}}
@container pagina (max-width:380px){.marca-nome{display:none}}

/* — acrescentado por tools/importar-handoff.mjs — */
.aviso-prototipo{margin:0;padding:10px var(--margem);background:var(--cor-amarelo);color:var(--cor-tinta);font:600 14px/1.4 var(--fonte-texto);text-align:center}
.botao-inerte{opacity:.55;cursor:default;pointer-events:none}
/* o cabeçalho numa linha: marca · páginas · idioma · tema · botão */
html:has(#tema-escuro:checked){color-scheme:dark}
.topo-linha{flex-wrap:nowrap}
.topo .nav{padding:0;flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.topo .nav .pilula{overflow-x:auto;scrollbar-width:none;max-width:100%}
.topo .nav .pilula::-webkit-scrollbar{display:none}
.controlos{flex-wrap:nowrap;flex:none}
.botao-icone{display:inline-flex;align-items:center;gap:6px;height:40px;min-width:40px;padding:0 12px;border-radius:var(--raio-pilula);border:1px solid var(--linha);background:var(--superficie);color:var(--texto);font:700 13px/1 var(--fonte-texto);letter-spacing:.03em;text-decoration:none;cursor:pointer;justify-content:center}
.botao-tema{padding:0;width:40px}
.icone{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icone-lua{display:none}
html:has(#tema-escuro:checked) .icone-sol{display:none}
html:has(#tema-escuro:checked) .icone-lua{display:block}
html:has(#tema-escuro:focus-visible) .botao-tema{outline:3px solid var(--acento);outline-offset:3px}
.botao-icone:hover{border-color:var(--texto)}
.botao-topo{white-space:nowrap}
@container pagina (max-width:1000px){.marca-nome{display:none}}
/* a página Brand */
.marca-grelha,.amostras,.tipos,.icones-grelha,.manifesto,.tom{list-style:none;margin:0;padding:0}
.marca-grelha{display:grid;gap:var(--espaco-5);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.marca-larga{grid-column:1/-1}
.marca-peca .papel{display:flex;align-items:center;justify-content:center;padding:var(--espaco-6);border-radius:var(--raio-l);background:var(--fundo);border:1px solid var(--linha);min-height:180px}
.marca-peca img{max-height:200px;max-width:100%;width:auto}
.marca-larga img{max-height:320px}
.amostras{display:grid;gap:var(--espaco-4);grid-template-columns:repeat(auto-fill,minmax(130px,1fr));margin:var(--espaco-5) 0 var(--espaco-7)}
.amostra{display:flex;flex-direction:column;gap:4px;font:600 14px/1.3 var(--fonte-texto)}
.amostra code{font-size:12px;color:var(--suave)}
.amostra-cor{display:block;height:72px;border-radius:var(--raio-m);border:1px solid var(--linha);margin-bottom:6px}
.am-azul{background:var(--cor-azul)}.am-verde{background:var(--cor-verde)}.am-amarelo{background:var(--cor-amarelo)}.am-laranja{background:var(--cor-laranja)}.am-vermelho{background:var(--cor-vermelho)}.am-lilas{background:var(--cor-lilas)}.am-cinza{background:var(--cor-cinza)}.am-pessego{background:var(--cor-pessego)}.am-tinta{background:var(--cor-tinta)}.am-papel{background:var(--cor-papel)}.am-superficie{background:var(--cor-superficie)}.am-azul-texto{background:var(--cor-azul-texto)}.am-noite{background:var(--cor-noite)}.am-azul-claro{background:var(--cor-azul-claro)}
.tipos{display:grid;gap:var(--espaco-6);margin:var(--espaco-5) 0}
.tipo-titulo{font:400 clamp(36px,6cqi,64px)/1.05 var(--fonte-titulo);margin:0}
.tipo-mao{font:600 clamp(32px,5cqi,52px)/1.1 var(--fonte-mao);color:var(--acento);margin:0}
.tipo-texto{font:700 clamp(30px,5cqi,48px)/1.1 var(--fonte-texto);margin:0}
.icones-grelha{display:grid;gap:var(--espaco-4);grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin-top:var(--espaco-5)}
.icones-grelha li{display:flex;flex-direction:column;align-items:center;gap:8px;padding:var(--espaco-4);border:1px solid var(--linha);border-radius:var(--raio-m);font:600 14px var(--fonte-texto)}
.icones-grelha img{width:56px;height:56px}
.manifesto{display:grid;gap:var(--espaco-4);margin-top:var(--espaco-5)}
.manifesto li{font:400 clamp(22px,3.4cqi,32px)/1.25 var(--fonte-titulo)}
.tom{display:grid;gap:10px;margin-top:var(--espaco-4)}
.tom li{padding:12px 16px;border-radius:var(--raio-m);border:1px solid var(--linha);font:600 16px var(--fonte-texto)}
.tom-nao li{text-decoration:line-through;color:var(--suave)}
@container pagina (max-width:700px){.botao-topo{display:none}.topo-linha{gap:8px}}
@container pagina (max-width:520px){.topo .nav .pilula a{padding:0 9px;font-size:12.5px}.botao-icone{padding:0 10px}.botao-tema{padding:0}.topo .nav .pilula{-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent);padding-right:18px}}