/* Berlinde · do 31, a submarca do consultor de cortes, direção A («O Poste»).
   Deriva da marca grande (barbershop-31/marcas/c-asas/v10/estilo.css): os mesmos tokens, com quem manda trocado.
   Na marca grande o vermelho só age; aqui também vive dentro do berlinde, na fita. A parede manda, a tinta fala. */
@font-face{font-family:"Archivo";src:url(../fonte/archivo.woff2) format("woff2");font-weight:400 800;font-stretch:100% 125%;font-display:swap}
:root{
  /* da marca grande, sem mexer. As misturas fazem-se em oklab, como no site (revisão de 27-out, nº 11): em oklch
     o cimento (75) e o azul (262) dão a volta pelo rosa e pelo roxo */
  --parede: oklch(0.93 0.006 75);
  --painel: oklch(0.975 0.004 75);
  --tinta: oklch(0.25 0.065 262);
  --cinza: oklch(0.47 0.03 262);
  --vermelho: oklch(0.55 0.19 27);
  --vermelho-escuro: oklch(0.48 0.18 27);
  --sinal-texto: oklch(0.99 0.003 75);
  --ease: cubic-bezier(.2,.8,.2,1);
  --letra: "Archivo", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --margem: clamp(16px, 4vw, 64px);
  --r-grande: 36px;
  --r-painel: 30px;
  --r-peca: 18px;
  /* da submarca: o creme da fita (o creme da noite da marca grande) e os tons da sombra na parede */
  --creme: oklch(0.975 0.012 85);
  --tom: color-mix(in oklab, var(--tinta) 8%, transparent);
  --tom-forte: color-mix(in oklab, var(--tinta) 13%, transparent);
  --superficie: color-mix(in oklab, var(--tinta) 7%, var(--painel));
  --sombra: 0 1px 2px oklch(0.25 0.065 262 / .05), 0 22px 56px oklch(0.25 0.065 262 / .10);
  --sombra-curta: 0 1px 2px oklch(0.25 0.065 262 / .06), 0 10px 26px oklch(0.25 0.065 262 / .09);
  /* a voz pela largura da letra: o Berlinde fala largo, como os títulos do 31; tu falas em largura normal */
  --largo: 116%;
  --normal: 100%;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--parede);color:var(--tinta);font-family:var(--letra);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
::selection{background:var(--vermelho);color:var(--sinal-texto)}
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:50;padding:10px 16px;border-radius:12px;background:var(--tinta);color:var(--parede);font-weight:700;text-decoration:none}
.saltar:focus{top:12px}
:focus-visible{outline:2.5px solid var(--tinta);outline-offset:3px}

/* a parede: a mesma foto de cimento do topo do site (a zona lisa à direita do poste, foto de banco com a licença em
   barbershop-31/fotos/recolha-21out/stock/origem.json), com a luz a vir de cima à esquerda; o ruído fica só como grão */
.parede{position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(120% 90% at 16% 4%, oklch(0.985 0.004 75 / .5), transparent 62%),
  radial-gradient(90% 70% at 94% 100%, oklch(0.25 0.065 262 / .055), transparent 70%),
  url(../img/parede-1350.webp) center / cover no-repeat,
  var(--parede)}
@media (max-width:900px){.parede{background-image:
  radial-gradient(120% 90% at 16% 4%, oklch(0.985 0.004 75 / .5), transparent 62%),
  radial-gradient(90% 70% at 94% 100%, oklch(0.25 0.065 262 / .055), transparent 70%),
  url(../img/parede-700.webp)}}
.parede::before{content:"";position:absolute;inset:0;opacity:.32;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .33 0 0 0 0 .34 0 0 0 0 .38 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E")}

/* o selo: o nome endossado pelo emblema das asas */
.selo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinta)}
.selo svg{width:64px;height:auto;display:block}
.selo-nome{display:flex;align-items:baseline;gap:8px;line-height:1}
.selo-nome b{font-weight:800;font-stretch:125%;font-size:17px;letter-spacing:.06em;text-transform:uppercase}
.selo-nome span{font-weight:600;font-size:13.5px;color:var(--cinza)}
.emb [fill="#141a24"]{fill:var(--tinta)}
.emb [fill="#f7f8fa"]{fill:var(--parede)}
.emb-p g[mask]{fill:var(--tinta)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--vermelho);color:var(--sinal-texto);font-weight:700;font-stretch:108%;font-size:15.5px;padding:13px 24px;text-decoration:none;cursor:pointer;touch-action:manipulation;transition:background .25s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--vermelho-escuro)}
.btn:active{transform:scale(.97)}
.btn-tom{background:var(--tom);color:var(--tinta)}
.btn-tom:hover{background:var(--tom-forte)}
/* o que leva para fora do site (o ChatGPT) vai em contorno: o vermelho fica só para marcar */
.btn-contorno{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--tinta)}
.btn-contorno:hover{background:var(--tom)}
.btn svg{width:18px;height:18px;flex:none}