/*
 * xuhlis: a folha de estilo do blog e do xuhlis.com. Terceira versão, 13/10/2026.
 * A segunda rodada de refinamento está no fim do arquivo, depois da linha dupla.
 *
 * O desenho vem do livro de marca (Documentos\Branding\Xuhlis). A casa é azul-noite com
 * jeans de sarja miúda; a leitura é em papel quente. Cor e textura ficam na moldura.
 * O movimento segue o que o site da Lazuly já resolveu: o conteúdo entra uma vez, o título
 * chega palavra por palavra, o que anda sozinho não para com o ponteiro em cima, e controle
 * clicável não seleciona texto. Tudo se desliga com "reduzir movimento".
 */

:root {
  --noite: #0C0E1A;
  --noite-2: #151829;
  --noite-3: #1D2136;
  --papel: #F6F4F2;
  --branco: #FFFFFF;
  --roxo-claro: #AA98FF;
  --violeta: #785CF5;
  --roxo-fundo: #664ECC;
  --lima: #C8FF48;
  --vermelho: #FF3B4E;
  --laranja: #FF7A1F;
  --turquesa: #14E3D0;
  --rosa: #FF4EB1;
  --fio: #343A56;
  --mudo-noite: #A5ABC8;

  /* a superfície de leitura: troca inteira no modo escuro */
  --folha: var(--papel);
  --cartao: var(--branco);
  --tinta: var(--noite);
  --tinta-2: #4D5577;
  --linha: #D9D5CF;
  --elo: var(--roxo-fundo);
  --titulo: var(--roxo-fundo);

  --f-grito: 'League Spartan', sans-serif;
  --f-texto: 'Bricolage Grotesque', 'Familjen Grotesk', system-ui, sans-serif;
  --f-felpuda: 'IM Fell DW Pica', 'Instrument Serif', Georgia, serif;
  --f-caderno: 'Klee One', 'Zen Kurenaido', cursive;

  --medida: 68ch;
  --borda: clamp(18px, 4vw, 44px);
  --largura: 1180px;
  --mola: cubic-bezier(.2, .8, .2, 1);
  --sombra: 6px 7px 0;
}

html[data-tema="escuro"] {
  --folha: #101322;
  --cartao: #181C30;
  --tinta: var(--papel);
  --tinta-2: var(--mudo-noite);
  --linha: var(--fio);
  --elo: var(--roxo-claro);
  --titulo: var(--roxo-claro);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--folha); color: var(--tinta); font: 400 19px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; }
body.noite { background: var(--noite); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--elo); text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .16em; font-weight: 600; }
button { font: inherit; color: inherit; }
::selection { background: var(--violeta); color: var(--papel); }
:focus-visible { outline: 3px solid var(--foco, var(--violeta)); outline-offset: 3px; }
svg.ui, svg.logo, svg.forma { width: 1.15em; height: 1.15em; flex: none; display: block; }
svg.logo, svg.forma { fill: currentColor; }

/* controle que abre, fecha ou troca não seleciona texto no clique rápido; o conteúdo continua selecionável */
button, summary, [role="tab"], .topo nav a, .tarja, .botao, .icones a, .elo, .aba { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

.pular { position: absolute; left: -999px; top: 0; background: var(--lima); color: var(--noite); padding: 10px 16px; z-index: 90; font-weight: 700; }
.pular:focus { left: 12px; top: 12px; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.conter { width: min(100% - 2 * var(--borda), var(--largura)); margin-inline: auto; }

/* ───────────── a casa: azul-noite com jeans de trama fina ───────────── */

.casa { position: relative; background: var(--noite) url(../img/denim.webp) 0 0 / 200px 200px; color: var(--papel); }
.casa a { color: var(--papel); }
.casa ::selection { background: var(--lima); color: var(--noite); }

/* ───────────── o movimento ───────────── */

@keyframes x-entra { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes x-palavra { from { opacity: 0; translate: 0 .42em; filter: blur(5px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes x-enche { from { scale: 0 1; } to { scale: 1 1; } }

@media (prefers-reduced-motion: no-preference) {
  html.js .palavras.is-partido .palavra { display: inline-block; opacity: 0; }
  html.js .palavras.is-partido.is-visto .palavra { animation: x-palavra 640ms var(--mola) both; animation-delay: calc(60ms + var(--i, 0) * 46ms); }
}

/* ───────────── o nome e as etiquetas ───────────── */

.nome { font: 900 clamp(34px, 5vw, 50px)/.9 var(--f-grito); letter-spacing: -.05em; text-transform: lowercase; color: var(--violeta); text-decoration: none; }
.casa a.nome { color: var(--violeta); }

.tarja { display: inline-block; background: var(--violeta); color: var(--branco); font: 700 15px/1 var(--f-texto); padding: .55em .85em .68em; transform: rotate(-2deg); text-decoration: none; transition: background-color .15s ease, color .15s ease, transform .2s var(--mola); }
a.tarja:hover { background: var(--lima); color: var(--noite); transform: rotate(-2deg) translateY(-2px); }
.casa a.tarja { color: var(--branco); }
.casa a.tarja:hover { color: var(--noite); }

.chip { display: inline-flex; align-items: center; gap: .4em; font: 600 14px/1.2 var(--f-texto); padding: .32em .7em .42em; box-shadow: 0 0 0 1px currentColor; text-decoration: none; color: inherit; }
.olho { font: 700 14px/1.2 var(--f-texto); letter-spacing: .01em; color: var(--tinta-2); margin: 0 0 .5em; }
.casa .olho { color: var(--roxo-claro); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 15px/1.3 var(--f-texto); color: var(--tinta-2); margin: 0; }
.meta > span, .meta > a { display: inline-flex; align-items: center; gap: .35em; color: inherit; text-decoration: none; font-weight: 500; }
.meta a:hover { color: var(--elo); }
.meta svg { width: 15px; height: 15px; }

/* a nota: desenho, nunca caractere */
.estrelas { display: inline-flex; gap: 3px; vertical-align: middle; }
.estrelas i { width: 16px; height: 16px; background: var(--linha); clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.estrelas i.cheia { background: var(--violeta); }
.estrelas i.meia { background: linear-gradient(90deg, var(--violeta) 50%, var(--linha) 50%); }

/* ───────────── botões ───────────── */

.botao { display: inline-flex; align-items: center; justify-content: center; gap: .55em; font: 700 17px/1.15 var(--f-texto); padding: .78em 1.25em .9em; color: var(--branco); background: var(--violeta); box-shadow: var(--sombra) var(--lima); text-decoration: none; border: 0; cursor: pointer; transition: translate .16s var(--mola), box-shadow .16s var(--mola), background-color .15s ease; position: relative; overflow: hidden; }
.casa a.botao { color: var(--branco); }
.botao:hover { translate: -2px -2px; box-shadow: 8px 9px 0 var(--lima); color: var(--branco); }
.botao:active { translate: 4px 5px; box-shadow: 2px 2px 0 var(--lima); }
.botao--fio { background: transparent; color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.botao--fio:hover { background: var(--tinta); color: var(--folha); box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); }
.botao--fio:active { box-shadow: 0 0 0 1px var(--tinta); translate: 0 0; }
.casa .botao--fio, .casa a.botao--fio { color: var(--papel); box-shadow: 0 0 0 1px var(--roxo-claro); }
.casa .botao--fio:hover { background: var(--papel); color: var(--noite); box-shadow: 0 0 0 1px var(--papel), var(--sombra) var(--violeta); }
.botao[disabled] { cursor: not-allowed; background: #4D5577; box-shadow: none; opacity: .7; translate: 0 0; }

/* ───────────── o topo ───────────── */

.topo { position: sticky; top: 0; z-index: 60; transition: box-shadow .25s ease; }
.topo.is-rolado { box-shadow: 0 1px 0 var(--fio), 0 10px 24px -12px rgba(0, 0, 0, .7); }
.topo__dentro { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); padding-block: 14px; min-height: 68px; }
.topo__nav { display: flex; align-items: center; gap: clamp(12px, 1.9vw, 24px); margin-inline: auto; }
.topo__nav > a, .topo__nav > .menu > button { font: 600 16px/1 var(--f-texto); color: var(--papel); text-decoration: none; padding: 8px 0; background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: border-color .15s ease, color .15s ease; }
.topo__nav > a:hover, .topo__nav > a[aria-current], .topo__nav > .menu > button:hover, .topo__nav > .menu > button[aria-expanded="true"] { border-bottom-color: var(--violeta); color: var(--branco); }
.topo__nav svg.ui { width: 15px; height: 15px; transition: rotate .2s var(--mola); }
.menu { position: relative; }
.menu > button[aria-expanded="true"] svg.ui { rotate: 180deg; }
.menu__painel { position: absolute; left: -14px; top: calc(100% + 10px); min-width: 190px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--fio), var(--sombra) var(--violeta); padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; translate: 0 -6px; transition: opacity .18s ease, translate .22s var(--mola), visibility 0s .2s; z-index: 5; }
.menu.is-aberto .menu__painel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.menu__painel a { display: block; font: 600 16px/1.2 var(--f-texto); padding: 9px 12px 10px; text-decoration: none; color: var(--papel); }
.menu__painel a:hover, .menu__painel a:focus-visible { background: var(--violeta); }
.topo__ferramentas { display: flex; align-items: center; gap: 6px; }
.topo__ferramentas button, .topo__abre { width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--papel); cursor: pointer; box-shadow: 0 0 0 1px transparent; transition: box-shadow .15s ease, background-color .15s ease; }
.topo__ferramentas button:hover, .topo__abre:hover { box-shadow: 0 0 0 1px var(--roxo-claro); background: rgba(170, 152, 255, .12); }
.topo__abre { display: none; }
.busca { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--mola); }
.busca.is-aberta { grid-template-rows: 1fr; }
.busca > div { overflow: hidden; }
.busca form { display: flex; gap: 10px; padding-block: 4px 16px; }
.busca input { flex: 1; }

@media (max-width: 960px) {
  .topo__abre { display: grid; }
  .topo__dentro { flex-wrap: wrap; gap: 10px; }
  .topo__dentro .nome { margin-right: auto; }
  .topo__nav { order: 5; flex-basis: 100%; margin: 0; display: none; }
  .topo.is-aberto .topo__nav { display: grid; gap: 0; padding-bottom: 12px; animation: x-entra .3s var(--mola) both; }
  .topo__nav > a, .topo__nav > .menu > button { width: 100%; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--fio); font-size: 18px; }
  .menu__painel { position: static; box-shadow: none; background: none; padding: 0 0 0 14px; opacity: 1; visibility: visible; translate: 0; display: none; }
  .menu.is-aberto .menu__painel { display: grid; }
}
.so-estreito { display: none !important; }
@media (max-width: 520px) { .topo .tarja--porta { display: none; } .topo.is-aberto .so-estreito { display: flex !important; color: var(--lima) !important; } }

/* ───────────── a página de links ───────────── */

.hub { min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.hub__coluna { position: relative; z-index: 2; width: min(100% - 36px, 470px); margin-inline: auto; padding-block: clamp(34px, 6vh, 64px) 30px; display: grid; gap: 14px; align-content: start; }
.hub__cabeca { display: grid; justify-items: center; text-align: center; gap: 10px; margin-bottom: 4px; }
.hub__foto { width: 124px; height: 124px; border-radius: 50%; }
.hub .nome { font-size: clamp(60px, 17vw, 80px); }
.hub__bio { margin: 0; font: 500 18px/1.35 var(--f-texto); color: var(--papel); max-width: 30ch; }

.icones { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 4px; padding: 0; list-style: none; }
.icones a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--papel); background: var(--noite-2); box-shadow: 0 0 0 1px var(--fio); transition: translate .16s var(--mola), box-shadow .16s var(--mola), background-color .15s ease, color .15s ease; }
.icones a svg { width: 20px; height: 20px; }
.icones a:hover { translate: -2px -2px; background: var(--violeta); color: var(--branco); box-shadow: 0 0 0 1px var(--violeta), 4px 5px 0 var(--lima); }
.icones a:active { translate: 0 0; box-shadow: 0 0 0 1px var(--violeta); }

@media (max-width: 430px) { .hub .icones { gap: 6px; } .hub .icones a { width: 40px; height: 40px; } }

.hub h2 { margin: 16px 0 0; font: 700 14px/1.2 var(--f-texto); letter-spacing: .01em; color: var(--roxo-claro); display: flex; align-items: center; gap: 12px; }
.hub h2::after { content: ""; flex: 1; height: 1px; background: var(--fio); }

/* o elo: a linha de link, com o ícone num quadrado, o texto à esquerda e a seta */
.elo { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 13px 16px 14px 13px; background: var(--noite-2); color: var(--papel); text-decoration: none; font-weight: 400; box-shadow: 0 0 0 1px var(--fio); transition: translate .18s var(--mola), box-shadow .18s var(--mola), background-color .15s ease; position: relative; }
.elo__icone { width: 46px; height: 46px; display: grid; place-items: center; background: var(--noite-3); color: var(--roxo-claro); transition: background-color .15s ease, color .15s ease, rotate .25s var(--mola); }
.elo__icone svg { width: 22px; height: 22px; }
.elo b { display: block; font: 700 18px/1.2 var(--f-texto); letter-spacing: -.015em; }
.elo small { display: block; font: 500 14.5px/1.35 var(--f-texto); color: var(--mudo-noite); margin-top: 2px; }
.elo > svg.ui { width: 20px; height: 20px; color: var(--roxo-claro); transition: translate .2s var(--mola); }
.elo:hover { translate: -3px -3px; box-shadow: 0 0 0 1px var(--roxo-claro), var(--sombra) var(--violeta); background: var(--noite-3); }
.elo:hover .elo__icone { background: var(--violeta); color: var(--branco); rotate: -6deg; }
.elo:hover > svg.ui { translate: 4px 0; }
.elo:active { translate: 2px 3px; box-shadow: 0 0 0 1px var(--roxo-claro), 1px 1px 0 var(--violeta); }

/* a porta do social media: a única cheia */
.elo--porta { background: var(--violeta); box-shadow: var(--sombra) var(--lima); rotate: -1.2deg; margin: 8px 2px 10px; overflow: hidden; }
.elo--porta .elo__icone { background: var(--noite); color: var(--lima); }
.elo--porta b { font-size: 20px; }
.elo--porta small { color: var(--papel); opacity: .95; }
.elo--porta > svg.ui { color: var(--lima); }
.elo--porta:hover { background: var(--violeta); box-shadow: 9px 10px 0 var(--lima); }
.elo--porta:hover .elo__icone { background: var(--lima); color: var(--noite); }
.elo--porta:active { box-shadow: 2px 2px 0 var(--lima); }

/* lendo e assistindo: de um a quatro itens, sem número fixo */
.agora { display: grid; gap: 10px; }
.agora__item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 11px 14px 12px 11px; background: var(--noite-2); color: var(--papel); box-shadow: 0 0 0 1px var(--fio); text-decoration: none; font-weight: 400; }
.agora__capa { width: 58px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 3px 3px 0 var(--violeta); }
.agora__item h3 { margin: 0; font: 700 17px/1.2 var(--f-texto); letter-spacing: -.01em; }
.agora__item p { margin: 2px 0 8px; font: 500 14px/1.3 var(--f-texto); color: var(--mudo-noite); }
.agora__estado { display: inline-block; font: 700 12px/1 var(--f-texto); padding: .34em .55em .42em; background: var(--lima); color: var(--noite); margin-bottom: 6px; }
.agora__estado--fila { background: transparent; color: var(--roxo-claro); box-shadow: 0 0 0 1px var(--roxo-claro); }
.agora__estado--vendo { background: var(--rosa); color: var(--noite); }
.barra { height: 8px; background: var(--fio); position: relative; overflow: hidden; }
.barra i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--lima); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  html.js .barra i { scale: 0 1; }
  html.js .is-visto .barra i { animation: x-enche 900ms var(--mola) .3s both; }
}
.agora__conta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font: 600 13px/1.2 var(--f-texto); color: var(--mudo-noite); }

/* no blog a mesma lista vira cartões com a capa em pé */
.agora--cartoes { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.agora--cartoes .agora__item { grid-template-columns: 92px minmax(0, 1fr); gap: 18px; padding: 16px 18px 16px 16px; background: var(--noite) url(../img/denim.webp) 0 0 / 200px 200px; box-shadow: var(--sombra) var(--roxo-claro); transition: translate .18s var(--mola), box-shadow .18s var(--mola); }
.agora--cartoes .agora__capa { width: 92px; }
.agora--cartoes a.agora__item:hover { translate: -3px -3px; box-shadow: 9px 10px 0 var(--violeta); }
.agora--cartoes .agora__item h3 { font-size: 20px; }
.agora--cartoes[data-quantos="1"] { grid-template-columns: minmax(0, 560px); }

.hub__fim { margin: 22px 0 0; text-align: center; font: 500 14px/1.5 var(--f-texto); color: var(--mudo-noite); }
.hub__fim a { color: var(--mudo-noite); font-weight: 500; }
.hub__fim a:hover { color: var(--papel); }

/* ───────────── a foto com a cor da casa por cima ─────────────
   A imagem de destaque de cada post chega com as cores dela. Na lista ela ganha a cor da vez,
   e ao passar o ponteiro a cor recua e a foto aparece como é. Dentro do post, sem filtro. */

.foto { position: relative; display: block; overflow: hidden; background: var(--c, var(--violeta)); aspect-ratio: 4 / 5; isolation: isolate; }
.foto img { width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--mola), filter .45s ease; filter: contrast(1.06) saturate(.9); }
.foto::before { content: ""; position: absolute; inset: 0; background: var(--c, var(--violeta)); mix-blend-mode: color; opacity: .94; transition: opacity .45s ease; z-index: 1; pointer-events: none; }
.foto::after { content: ""; position: absolute; inset: 0; background: var(--c, var(--violeta)); mix-blend-mode: multiply; opacity: .34; transition: opacity .45s ease; z-index: 1; pointer-events: none; }
a:hover > .foto::before, a:focus-visible > .foto::before, .foto:hover::before { opacity: .1; }
a:hover > .foto::after, a:focus-visible > .foto::after, .foto:hover::after { opacity: 0; }
a:hover > .foto img, .foto:hover img { scale: 1.04; filter: none; }
.foto .tarja, .foto .selo-mini { position: absolute; z-index: 2; }
.foto .tarja { left: 12px; top: 14px; font-size: 13px; }
.foto .selo-mini { right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: .35em; background: var(--noite); color: var(--papel); font: 700 13px/1 var(--f-texto); padding: .45em .6em .5em; }
.foto .selo-mini svg { width: 14px; height: 14px; }
/* a cor da vez, numa ordem fixa: nada de sorteio */
.cor-1 { --c: var(--violeta); } .cor-2 { --c: var(--rosa); } .cor-3 { --c: var(--turquesa); }
.cor-4 { --c: var(--laranja); } .cor-5 { --c: var(--lima); } .cor-6 { --c: var(--vermelho); }
@media (hover: none) { .foto::before { opacity: .5; } .foto::after { opacity: .14; } }

/* ───────────── a vitrine: os posts recentes, um de cada vez ───────────── */

.vitrine { padding-block: clamp(26px, 4vw, 46px) clamp(26px, 4vw, 44px); overflow: hidden; }
.vitrine__palco { display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 34px 0; transition: opacity .5s ease, translate .6s var(--mola), visibility 0s .5s; }
.slide.is-ativo { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.slide.is-saindo { translate: -34px 0; }
html:not(.js) .slide { opacity: 1; visibility: visible; translate: 0; grid-area: auto; margin-bottom: 18px; }
.folha { background: var(--folha); color: var(--tinta); display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 290px); gap: clamp(20px, 4vw, 52px); align-items: center; padding: clamp(22px, 3.6vw, 46px); box-shadow: 10px 12px 0 var(--violeta); position: relative; height: 100%; }
.folha::before { content: ""; position: absolute; left: 50%; top: -13px; width: 110px; height: 26px; background: var(--lima); rotate: -3deg; translate: -50% 0; clip-path: polygon(0 0, 2.5% 25%, 0 50%, 2.5% 75%, 0 100%, 100% 100%, 97.5% 75%, 100% 50%, 97.5% 25%, 100% 0); }
.folha h2 { margin: 12px 0 0; font: 800 clamp(26px, 3.5vw, 42px)/1.06 var(--f-texto); letter-spacing: -.03em; color: var(--titulo); text-wrap: balance; }
.folha h2 a { color: inherit; text-decoration: none; }
.folha h2 a:hover { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.folha .resumo { margin: 14px 0 16px; font-size: 18px; line-height: 1.55; max-width: 54ch; }
.folha .foto { rotate: 2.5deg; box-shadow: 7px 8px 0 var(--noite); aspect-ratio: 2 / 3; }
.folha .meta { margin-bottom: 20px; }
.vitrine__abas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(24px, 3vw, 36px); }
.aba { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; text-align: left; background: var(--noite-2); color: var(--papel); border: 0; padding: 10px 12px 14px 10px; cursor: pointer; box-shadow: 0 0 0 1px var(--fio); position: relative; overflow: hidden; transition: background-color .15s ease, box-shadow .15s ease, translate .18s var(--mola); }
.aba img { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .7; transition: filter .3s ease, opacity .3s ease; }
.aba b { font: 600 15px/1.25 var(--f-texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--mudo-noite); transition: color .2s ease; }
.aba:hover { translate: 0 -2px; box-shadow: 0 0 0 1px var(--roxo-claro); }
.aba[aria-selected="true"] { background: var(--noite-3); box-shadow: 0 0 0 1px var(--roxo-claro); }
.aba[aria-selected="true"] b { color: var(--papel); }
.aba[aria-selected="true"] img { filter: none; opacity: 1; }
.aba i { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--lima); transform-origin: left; scale: 0 1; }
.aba[aria-selected="true"] i { scale: 1 1; }
.vitrine.is-correndo .aba[aria-selected="true"] i { animation: x-enche var(--tempo, 7s) linear both; }

@media (max-width: 900px) { .folha { grid-template-columns: minmax(0, 1fr) minmax(140px, 210px); } }
@media (max-width: 620px) {
  .folha { grid-template-columns: 1fr; align-content: start; }
  .folha .foto { order: -1; width: min(52%, 200px); rotate: -2.5deg; }
}
@media (max-width: 820px) {
  .vitrine__abas { gap: 8px; }
  .aba { grid-template-columns: 1fr; padding: 12px 0; background: none; box-shadow: none; }
  .aba img, .aba b { display: none; }
  .aba::before { content: ""; display: block; height: 4px; background: var(--fio); }
  .aba i { bottom: 12px; }
  .aba[aria-selected="true"], .aba:hover { background: none; box-shadow: none; translate: 0; }
}

/* ───────────── as seções do blog ───────────── */

.secao { padding-block: clamp(34px, 5vw, 62px); }
.secao + .secao { padding-top: 0; }
.titulo { margin: 0 0 22px; font: 800 clamp(24px, 3vw, 34px)/1.05 var(--f-texto); letter-spacing: -.03em; }
.titulo-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.titulo-linha .titulo { margin: 0; }
.titulo-linha a { font: 600 15px/1 var(--f-texto); }

.grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); }
.cartao-post { min-width: 0; }
.cartao-post > a { display: block; text-decoration: none; color: var(--tinta); font-weight: 400; }
.cartao-post .foto { transition: translate .2s var(--mola), box-shadow .2s var(--mola); }
.cartao-post > a:hover .foto, .cartao-post > a:focus-visible .foto { translate: -4px -4px; box-shadow: 8px 9px 0 var(--c, var(--violeta)); }
.cartao-post > a:active .foto { translate: 0 0; box-shadow: 2px 2px 0 var(--c, var(--violeta)); }
.cartao-post h3 { margin: 16px 0 8px; font: 700 20px/1.22 var(--f-texto); letter-spacing: -.015em; transition: color .15s ease; text-wrap: balance; }
.cartao-post > a:hover h3 { color: var(--titulo); }

.caminhos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.caminhos a { display: block; text-decoration: none; color: var(--tinta); font-weight: 400; background: var(--cartao); padding: 16px 18px 18px; box-shadow: 0 0 0 1px var(--tinta); transition: translate .18s var(--mola), box-shadow .18s var(--mola), background-color .15s ease; }
.caminhos a:hover { translate: -3px -3px; box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); }
.caminhos a:active { translate: 0 0; box-shadow: 0 0 0 1px var(--tinta); }
.caminhos b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 800 20px/1.1 var(--f-texto); letter-spacing: -.02em; }
.caminhos b svg { width: 18px; height: 18px; color: var(--violeta); transition: translate .2s var(--mola); }
.caminhos a:hover b svg { translate: 4px 0; }
.caminhos span { display: block; font: 500 15px/1.35 var(--f-texto); color: var(--tinta-2); margin-top: 4px; }

.par { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.par > div { padding: clamp(20px, 3vw, 30px); }
.par h2 { margin: 0 0 8px; font: 800 clamp(24px, 2.8vw, 30px)/1.08 var(--f-texto); letter-spacing: -.03em; }
.par p { margin: 0 0 18px; font-size: 17px; line-height: 1.55; max-width: 46ch; }
.par .papel { background: var(--cartao); box-shadow: 0 0 0 1px var(--tinta); }
.par form { display: flex; gap: 12px 10px; flex-wrap: wrap; }
.par input[type=email] { flex: 1 1 200px; min-width: 0; }
.video { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 190px); gap: 22px; align-items: center; }
.video__capa { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: 5px 6px 0 var(--violeta); rotate: 2deg; }
.video__capa img { width: 100%; height: 100%; object-fit: cover; }
.video__capa span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 14, 26, .35); transition: background-color .2s ease; }
.video__capa svg { width: 44px; height: 44px; color: var(--lima); fill: var(--lima); transition: scale .25s var(--mola); }
.video__capa:hover span { background: rgba(12, 14, 26, .1); }
.video__capa:hover svg { scale: 1.15; }
@media (max-width: 560px) { .video { grid-template-columns: 1fr; } .video__capa { max-width: 220px; } }

/* ───────────── campos ───────────── */

.campo { display: grid; gap: 6px; }
.campo label { font: 700 16px/1.25 var(--f-texto); }
.campo .dica { font: 500 14px/1.35 var(--f-texto); color: var(--tinta-2); }
input[type=text], input[type=email], input[type=url], input[type=search], textarea { width: 100%; font: 500 17px/1.4 var(--f-texto); color: var(--noite); background: var(--branco); border: 0; box-shadow: 0 0 0 1px var(--noite); padding: .7em .8em .78em; border-radius: 0; }
textarea { min-height: 130px; resize: vertical; }
input:focus-visible, textarea:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
input[disabled], textarea[disabled] { background: #ECE9E5; color: #4D5577; cursor: not-allowed; }
.marcar { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.4 var(--f-texto); color: var(--tinta-2); }
.marcar input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--violeta); flex: none; }

/* ───────────── o rodapé ───────────── */

.rodape { margin-top: clamp(20px, 4vw, 40px); }
.rodape__dentro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; padding-block: 44px 28px; align-items: start; }
.rodape p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; max-width: 42ch; }
.rodape__links { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 8px 28px; justify-content: end; }
.rodape__links a { font: 600 15px/1.4 var(--f-texto); text-decoration: none; }
.rodape__links a:hover { text-decoration: underline; text-decoration-color: var(--violeta); }
.rodape .icones { justify-content: flex-start; margin: 18px 0 0; }
.rodape .icones a { width: 40px; height: 40px; }
.rodape .fim { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; border-top: 1px solid var(--fio); padding-top: 18px; font: 500 14px/1.4 var(--f-texto); color: var(--mudo-noite); }
.assinatura { display: flex; align-items: center; gap: 14px; }
.assinatura img { width: 58px; height: 58px; border-radius: 50%; }

/* ───────────── o post ───────────── */

.progresso { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 80; pointer-events: none; }
.progresso i { display: block; height: 100%; background: var(--lima); transform-origin: left; scale: var(--lido, 0) 1; }

.artigo { padding-block: clamp(26px, 4.5vw, 52px) clamp(40px, 6vw, 72px); }
.artigo__cabeca { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: clamp(30px, 4.5vw, 52px); }
.migalha { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-2); margin: 0 0 16px; }
.migalha a { color: var(--tinta-2); font-weight: 500; }
.artigo h1 { margin: 16px 0 0; font: 800 clamp(30px, 4.3vw, 54px)/1.03 var(--f-texto); letter-spacing: -.035em; color: var(--titulo); text-wrap: balance; }
.artigo__cabeca .meta { margin-top: 18px; }
.artigo__capa { position: relative; margin: 0; rotate: 2.5deg; box-shadow: 9px 10px 0 var(--violeta); }
.artigo__capa button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; }
.artigo__capa img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.artigo__capa::before { content: ""; position: absolute; left: 30%; top: -13px; width: 40%; height: 26px; background: var(--lima); rotate: -8deg; z-index: 2; clip-path: polygon(0 0, 2.5% 25%, 0 50%, 2.5% 75%, 0 100%, 100% 100%, 97.5% 75%, 100% 50%, 97.5% 25%, 100% 0); }

.corpo { display: grid; grid-template-columns: minmax(0, var(--medida)) minmax(300px, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.corpo__lado { position: sticky; top: 96px; display: grid; gap: 26px; }

.ficha { background: var(--noite) url(../img/denim.webp) 0 0 / 200px 200px; color: var(--papel); padding: 20px 22px 22px; box-shadow: var(--sombra) var(--roxo-claro); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; align-items: center; }
.ficha .estrelas i { background: var(--fio); }
.ficha .estrelas i.cheia { background: var(--lima); }
.ficha .estrelas i.meia { background: linear-gradient(90deg, var(--lima) 50%, var(--fio) 50%); }
.ficha > div { display: contents; }
.ficha dl { grid-column: 1 / -1; margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 16px; line-height: 1.4; }
.ficha dt { color: var(--roxo-claro); font-weight: 600; }
.ficha dd { margin: 0; font-weight: 600; }

.texto > p { margin: 0 0 1.15em; }
.texto h2 { margin: 1.9em 0 .6em; font: 800 clamp(24px, 3vw, 30px)/1.1 var(--f-texto); letter-spacing: -.03em; }
.texto h3 { margin: 1.6em 0 .5em; font: 700 21px/1.2 var(--f-texto); letter-spacing: -.02em; }
.texto > :first-child { margin-top: 0; }
mark { background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 0 / 100% 100%; color: var(--noite); padding: 0 .25em; }
@media (prefers-reduced-motion: no-preference) {
  html.js mark { background-size: 0% 100%; transition: background-size .7s var(--mola) .15s; }
  html.js mark.is-visto { background-size: 100% 100%; }
}

.caixinha { margin: 1.9em 0 1.7em; background: var(--noite); color: var(--papel); font: 700 clamp(20px, 2.4vw, 25px)/1.22 var(--f-texto); letter-spacing: -.02em; padding: 1em 1em 1em; box-shadow: 8px 9px 0 var(--roxo-claro); position: relative; }
.caixinha p { margin: 0; }
.caixinha cite { display: block; font: 500 15px/1.3 var(--f-texto); font-style: normal; color: var(--mudo-noite); margin-top: .7em; }
.caixinha::before { content: "C"; position: absolute; left: 14px; top: -.36em; font: 900 76px/1 var(--f-grito); color: var(--lima); pointer-events: none; }

/* a imagem do texto abre grande */
.imagem { margin: 1.8em 0; }
.imagem button { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100%; box-shadow: 0 0 0 1px var(--linha); transition: translate .18s var(--mola), box-shadow .18s var(--mola); }
.imagem button:hover { translate: -3px -3px; box-shadow: var(--sombra) var(--violeta); }
.imagem img { width: 100%; }
.imagem figcaption { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-2); margin-top: 10px; }
.luz { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(14px, 4vw, 48px); background: rgba(12, 14, 26, .92); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; cursor: zoom-out; }
.luz.is-aberta { opacity: 1; visibility: visible; transition-delay: 0s; }
.luz img { max-width: 100%; max-height: calc(100dvh - 2 * clamp(14px, 4vw, 48px)); width: auto; box-shadow: 10px 12px 0 var(--violeta); scale: .94; transition: scale .35s var(--mola); }
.luz.is-aberta img { scale: 1; }
.luz button { position: absolute; right: 16px; top: 16px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--lima); color: var(--noite); border: 0; cursor: pointer; }

/* o aviso de que vem spoiler */
.aviso-spoiler { display: flex; gap: 10px; align-items: flex-start; font: 500 15.5px/1.5 var(--f-texto); color: var(--tinta-2); margin: 1.6em 0; padding: 12px 14px; box-shadow: 0 0 0 1px var(--linha); }
.aviso-spoiler svg { margin-top: 3px; color: var(--vermelho); }

/* spoiler de trecho: o texto fica borrado até a pessoa pedir */
.borrado { margin: 1.4em 0; position: relative; }
.borrado__corpo { transition: filter .45s ease, opacity .45s ease; }
.borrado__corpo > :last-child { margin-bottom: 0; }
html.js .borrado:not(.is-aberto) .borrado__corpo { filter: blur(7px); opacity: .75; -webkit-user-select: none; user-select: none; pointer-events: none; }
.borrado__botao { display: none; }
html.js .borrado__botao { display: inline-flex; align-items: center; gap: .5em; font: 700 14px/1 var(--f-texto); background: var(--noite); color: var(--papel); border: 0; padding: .6em .8em .68em; cursor: pointer; margin-bottom: 10px; box-shadow: 4px 4px 0 var(--vermelho); transition: translate .15s var(--mola), box-shadow .15s var(--mola); }
html.js .borrado__botao:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--vermelho); }
html.js .borrado__botao svg { width: 16px; height: 16px; }

/* a sanfona: serve ao spoiler de bloco e às perguntas frequentes */
.sanfona { box-shadow: 0 0 0 1px var(--tinta); background: var(--cartao); margin: 1.2em 0; }
.sanfona__botao { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: none; border: 0; padding: 15px 16px 16px; cursor: pointer; font: 700 17px/1.3 var(--f-texto); color: var(--tinta); }
.sanfona__botao > svg.ui:last-child { margin-left: auto; width: 18px; height: 18px; color: var(--violeta); transition: rotate .3s var(--mola); }
.sanfona__botao[aria-expanded="true"] > svg.ui:last-child { rotate: 180deg; }
.sanfona__botao:hover { background: color-mix(in srgb, var(--violeta) 9%, transparent); }
.sanfona__corpo { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s var(--mola); }
html.js .sanfona__botao[aria-expanded="false"] + .sanfona__corpo { grid-template-rows: 0fr; }
.sanfona__corpo > div { overflow: hidden; }
.sanfona__corpo > div > div { padding: 0 16px 18px; }
.sanfona__corpo p { margin: 0 0 .9em; }
.sanfona__corpo > div > div > :last-child { margin-bottom: 0; }
.sanfona--spoiler { box-shadow: 0 0 0 1px var(--tinta); border-left: 8px solid var(--vermelho); }
.sanfona--spoiler .sanfona__botao > svg.ui:first-child { color: var(--vermelho); }
.faq { margin: 2.4em 0 0; }
.faq .sanfona { margin: 0 0 -1px; }

/* a indicação com link de afiliado: diz o que é, sem cara de anúncio */
.indica { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; margin: 1.8em 0; padding: 16px 18px 18px 16px; background: var(--cartao); color: var(--tinta); text-decoration: none; font-weight: 400; box-shadow: 0 0 0 1px var(--tinta); position: relative; transition: translate .18s var(--mola), box-shadow .18s var(--mola); }
.indica:hover { translate: -3px -3px; box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--lima); color: var(--tinta); }
.indica img { width: 96px; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 3px 4px 0 var(--violeta); }
.indica small { display: inline-block; font: 700 12px/1 var(--f-texto); background: var(--tinta); color: var(--folha); padding: .38em .55em .45em; margin-bottom: 8px; }
.indica b { display: block; font: 700 18px/1.25 var(--f-texto); letter-spacing: -.01em; }
.indica > span > span { display: block; font-size: 16px; line-height: 1.5; margin: 6px 0 10px; color: var(--tinta-2); }
.indica em { display: inline-flex; align-items: center; gap: .4em; font: 700 15px/1 var(--f-texto); font-style: normal; color: var(--elo); }
.indica em svg { width: 16px; height: 16px; transition: translate .2s var(--mola); }
.indica:hover em svg { translate: 4px 0; }
.aviso { font: 500 15px/1.5 var(--f-texto); color: var(--tinta-2); border-left: 4px solid var(--roxo-claro); padding: 2px 0 2px 14px; margin: 1.8em 0; }

.marcas { display: flex; flex-wrap: wrap; gap: 8px; margin: 2.2em 0 0; }
.marcas a { font: 600 14px/1 var(--f-texto); color: var(--tinta); text-decoration: none; padding: .5em .8em .6em; box-shadow: 0 0 0 1px var(--tinta); transition: background-color .15s ease, color .15s ease; }
.marcas a:hover { background: var(--tinta); color: var(--folha); }

.quem { margin-top: clamp(30px, 5vw, 48px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 22px 24px; }
.quem img { width: 92px; height: 92px; border-radius: 50%; }
.quem b { display: block; font: 900 30px/.9 var(--f-grito); letter-spacing: -.05em; color: var(--violeta); text-transform: lowercase; }
.quem p { margin: 6px 0 0; font-size: 16px; line-height: 1.5; }
.quem a { color: var(--lima); }

.comentarios { margin-top: clamp(34px, 5vw, 56px); }
.comentarios h2 { margin: 0 0 18px; font: 800 clamp(24px, 3vw, 30px)/1.1 var(--f-texto); letter-spacing: -.03em; display: flex; align-items: center; gap: 12px; }
.comentarios h2 span { font: 700 15px/1 var(--f-texto); letter-spacing: 0; background: var(--violeta); color: var(--papel); padding: .4em .6em .48em; rotate: -3deg; }
.comentario { background: var(--cartao); box-shadow: 0 0 0 1px var(--linha); padding: 16px 18px 18px; margin-bottom: 12px; }
.comentario--resposta { margin-left: clamp(18px, 5vw, 44px); border-left: 6px solid var(--violeta); }
.comentario header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 6px; }
.comentario header b { font: 700 17px/1.2 var(--f-texto); }
.comentario header span { font: 500 14px/1.2 var(--f-texto); color: var(--tinta-2); }
.comentario p { margin: 0 0 8px; font-size: 17px; line-height: 1.55; }
.comentario > a { font-size: 15px; }
.comentarios form { display: grid; gap: 16px; margin-top: 24px; padding: clamp(18px, 3vw, 26px); background: var(--cartao); box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); }
.comentarios form h3 { margin: 0; font: 800 22px/1.1 var(--f-texto); letter-spacing: -.02em; }
.comentarios .dois { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.comentarios form .botao { justify-self: start; }

.volta-topo { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: 48px; height: 48px; display: grid; place-items: center; background: var(--violeta); color: var(--papel); border: 0; cursor: pointer; box-shadow: 4px 5px 0 var(--lima); opacity: 0; visibility: hidden; translate: 0 12px; transition: opacity .25s ease, translate .3s var(--mola), visibility 0s .25s; }
.volta-topo.is-visivel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.volta-topo:hover { translate: -2px -2px; box-shadow: 6px 7px 0 var(--lima); }

/* ───────────── a página do serviço ───────────── */

.servico__abre { padding-block: clamp(34px, 6vw, 72px) clamp(40px, 7vw, 84px); overflow: hidden; position: relative; }
.servico__abre .conter { position: relative; z-index: 2; }
.servico__abre .frase { font: 700 clamp(22px, 3vw, 32px)/1.1 var(--f-texto); letter-spacing: -.025em; margin: 0; max-width: 24ch; }
.servico__abre h1 { margin: .3em 0 .2em; font: 900 clamp(60px, 13vw, 168px)/.84 var(--f-grito); letter-spacing: -.045em; text-transform: uppercase; color: var(--violeta); }
.legenda { display: grid; justify-items: start; margin: 0 0 28px; }
.legenda span { background: var(--noite); box-shadow: 0 0 0 1px var(--roxo-claro); padding: .25em .7em .38em; font: 700 clamp(17px, 2vw, 21px)/1.15 var(--f-texto); margin-top: 1px; }
.blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 20px; }
.bloco { background: var(--cartao); box-shadow: 0 0 0 1px var(--tinta); padding: 22px 24px 26px; }
.bloco h2 { margin: 0 0 10px; font: 800 24px/1.1 var(--f-texto); letter-spacing: -.03em; color: var(--titulo); }
.bloco p { font-size: 17px; line-height: 1.55; margin: 0 0 .8em; }
.bloco p:last-child { margin-bottom: 0; }
.passos { counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.passos li { counter-increment: passo; background: var(--noite) url(../img/denim.webp) 0 0 / 200px 200px; color: var(--papel); padding: 18px 20px 22px; box-shadow: var(--sombra) var(--roxo-claro); }
.passos li::before { content: counter(passo); display: block; font: 900 54px/.9 var(--f-grito); letter-spacing: -.05em; color: var(--lima); margin-bottom: 6px; }
.passos b { display: block; font: 800 20px/1.15 var(--f-texto); letter-spacing: -.02em; margin-bottom: 6px; }
.passos span { font-size: 16px; line-height: 1.5; }
.pedido { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 60px); align-items: start; padding-block: clamp(36px, 6vw, 72px); }
.pedido h2 { margin: 0 0 10px; font: 900 clamp(40px, 6vw, 68px)/.84 var(--f-grito); letter-spacing: -.045em; text-transform: uppercase; color: var(--violeta); }
.pedido > div > p { margin: 0 0 1em; font-size: 18px; line-height: 1.55; max-width: 38ch; }
.pedido form { display: grid; gap: 18px; background: var(--papel); color: var(--noite); padding: clamp(20px, 3vw, 30px); box-shadow: 9px 10px 0 var(--lima); }
.pedido form a { color: var(--noite); }
.pedido form .dica, .pedido form .miudo { color: #4D5577; }
.pedido .trava { font: 600 15px/1.45 var(--f-texto); background: var(--lima); color: var(--noite); padding: 10px 14px 12px; margin: 0; }
.pedido .miudo { font: 500 14px/1.45 var(--f-texto); margin: 0; }

/* ───────────── telas menores ───────────── */

@media (max-width: 1100px) {
  .corpo { grid-template-columns: minmax(0, 1fr); }
  .corpo__lado { position: static; order: -1; grid-template-columns: minmax(0, 420px); }
  .texto, .corpo__texto { max-width: var(--medida); }
}
@media (max-width: 900px) {
  .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}
@media (max-width: 820px) {
  body { font-size: 18px; }
  .artigo__cabeca, .pedido, .rodape__dentro { grid-template-columns: 1fr; }
  .artigo__capa { max-width: 230px; rotate: -2.5deg; order: -1; margin-left: 10px; }
  .rodape__links { justify-content: start; }
  .cartao-post h3 { font-size: 17px; }
}
@media (max-width: 480px) {
  .ficha { grid-template-columns: 1fr; }
  .quem { grid-template-columns: 1fr; }
  .indica { grid-template-columns: 72px minmax(0, 1fr); gap: 14px; }
  .indica img { width: 72px; }
  .agora--cartoes .agora__item { grid-template-columns: 74px minmax(0, 1fr); gap: 14px; }
  .agora--cartoes .agora__capa { width: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .slide { translate: 0 !important; }
}


/* ═════════════════════════════════════════════════════════════════════
   SEGUNDA RODADA (13/10/2026, à tarde)
   O que mudou depois da revisão do dono: o jeans virou sarja de trama miúda,
   a barra de rolagem ganhou a cor da casa, a entrada deixou de fazer esperar,
   o brilho herdado da Lazuly saiu, as imagens guardam as cores delas, e
   entraram a fita que anda, o índice do post, os espaços de anúncio e a busca.
   ═════════════════════════════════════════════════════════════════════ */

/* ── a barra de rolagem: só o polegar, roxo e de canto vivo ──
   O Firefox e os navegadores novos leem as duas propriedades padrão. Onde existe o
   seletor do WebKit a barra é desenhada à mão, e por isso a padrão é devolvida ao
   automático ali. No toque a padrão volta, só com a cor: é o que o celular aceita. */
html { scrollbar-color: var(--violeta) transparent; scrollbar-width: thin; }
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-color: auto; scrollbar-width: auto; }
  ::-webkit-scrollbar { width: 13px; height: 13px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--violeta); border: 3px solid transparent; background-clip: content-box; border-radius: 0; }
  ::-webkit-scrollbar-thumb:hover { background: var(--roxo-claro); border: 3px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
@media (hover: none) and (pointer: coarse) { html { scrollbar-color: var(--violeta) transparent; scrollbar-width: thin; } }

/* ── a entrada: curta, e sem fila. O que já está na tela não espera ninguém ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .palavras.is-partido.is-visto .palavra { animation: x-palavra 460ms var(--mola) both; animation-delay: calc(30ms + min(var(--i, 0), 8) * 32ms); }
  @keyframes x-entra { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
}

/* ── o botão: sai o brilho que atravessava, que é da Lazuly. Aqui a resposta é de adesivo:
      a sombra chapada cresce no ponteiro e some no clique, e a seta dá um passo ── */
.botao svg.ui { transition: translate .2s var(--mola); }
.botao:hover svg.ui { translate: 4px 0; }

/* ── o nome: o mesmo contorno da foto, papel por fora do roxo ── */
.quem b { color: var(--violeta); }

/* ── o que anda sozinho: só anda depois que o script dobrou o conjunto ── */
@keyframes x-corre { from { translate: 0 0; } to { translate: -50% 0; } }
@media (prefers-reduced-motion: no-preference) { [data-corre].is-dobrado { animation: x-corre var(--dura, 60s) linear infinite; } }

/* ── a central: uma fita lima passa por trás da foto, como fita adesiva em colagem ── */
.hub { --hub-topo: clamp(34px, 6vh, 64px); }
.hub__coluna { padding-top: var(--hub-topo); }
.hub > .fita-caixa { position: absolute; left: 0; right: 0; top: calc(var(--hub-topo) + 42px); margin: 0; padding: 0; overflow: visible; z-index: 1; }
.hub > .fita-caixa .fita { rotate: -3deg; margin-inline: -30px; }
.hub__foto { box-shadow: 0 0 0 7px var(--noite); position: relative; }
.hub__bio { text-wrap: balance; }
.elo small { text-wrap: balance; }
.elo b { text-wrap: balance; }
.hub h2 { margin-top: 18px; }

/* a barra de leitura em curso enche de zero até o valor cadastrado */
@media (prefers-reduced-motion: no-preference) {
  html.js .barra i { scale: 1 1; width: 0; transition: width 1.1s var(--mola) .15s; }
  html.js .is-visto .barra i { animation: none; width: var(--p, 0%); }
}

/* ── a fita que anda: o movimento de fundo do blog. As palavras são do próprio blog ── */
.fita-caixa { overflow: hidden; padding-block: 16px; margin-block: -30px -16px; position: relative; z-index: 3; pointer-events: none; }
.fita { overflow: hidden; background: var(--lima); color: var(--noite); border-block: 2px solid var(--noite); rotate: -1deg; margin-inline: -14px; }
.fita__trilho { display: flex; width: max-content; }
.fita span { display: inline-flex; align-items: center; gap: 22px; padding: 9px 11px 10px; flex: none; font: 800 17px/1 var(--f-texto); letter-spacing: -.01em; white-space: nowrap; }
.fita svg { width: 15px; height: 15px; flex: none; fill: var(--violeta); }
.corpo__texto { min-width: 0; }
.fita--roxa { background: var(--violeta); color: var(--papel); rotate: 1deg; margin-top: 0; }
.fita--roxa svg { fill: var(--lima); }

/* ── o miolo do blog: papel com pontinho de retícula, só fora do texto de leitura ── */
.reticula { background-image: radial-gradient(circle, color-mix(in srgb, var(--tinta) 11%, transparent) 1.5px, transparent 2px); background-size: 20px 20px; background-position: 10px 10px; }
.secao--faixa { background: var(--cartao); border-block: 2px solid var(--tinta); padding-block: clamp(34px, 5vw, 62px) !important; }
.secao--faixa + .secao { padding-top: clamp(34px, 5vw, 62px); }
.titulo { display: flex; align-items: center; gap: 14px; }
.titulo::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--violeta); rotate: 12deg; box-shadow: 4px 4px 0 var(--lima); }
.centro { display: flex; justify-content: center; margin-top: clamp(26px, 4vw, 40px); }

/* ── o menu: a linha cresce da esquerda, e o item em que a pessoa está já vem com ela ── */
.topo__nav > a, .topo__nav > .menu > button { position: relative; border-bottom-color: transparent !important; }
.topo__nav > a::after, .topo__nav > .menu > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--violeta); scale: 0 1; transform-origin: left; transition: scale .3s var(--mola); }
.topo__nav > a:hover::after, .topo__nav > a[aria-current]::after, .topo__nav > a:focus-visible::after, .topo__nav > .menu > button:hover::after, .topo__nav > .menu > button[aria-expanded="true"]::after { scale: 1 1; }
.topo__nav > a[aria-current]::after { background: var(--lima); }
.topo__nav > .menu > button::after { right: 19px; }
@media (max-width: 960px) { .topo__nav > a::after, .topo__nav > .menu > button::after { display: none; } .topo__nav > a, .topo__nav > .menu > button { border-bottom-color: var(--fio) !important; } }

/* ── a busca: o contorno não corta mais, e os resultados aparecem enquanto se escreve ── */
.busca > div { overflow: hidden; }
.busca:not(.is-aberta) > div { visibility: hidden; transition: visibility 0s .3s; }
.busca__dentro { padding: 8px 6px 20px; }
.busca form { padding: 0; }
.busca__saida { margin-top: 12px; display: grid; gap: 8px; }
.busca__saida[hidden] { display: none; }
.busca__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 9px 12px 10px 9px; background: var(--noite-2); color: var(--papel); text-decoration: none; font-weight: 400; box-shadow: 0 0 0 1px var(--fio); transition: translate .16s var(--mola), box-shadow .16s var(--mola); }
.busca__item img { width: 44px; aspect-ratio: 2 / 3; object-fit: cover; }
.busca__item b { display: block; font: 700 16px/1.25 var(--f-texto); }
.busca__item small { display: block; font: 500 13.5px/1.3 var(--f-texto); color: var(--mudo-noite); margin-top: 2px; }
.busca__item mark { background: var(--lima); color: var(--noite); padding: 0 .1em; background-size: 100% 100% !important; }
.busca__item:hover, .busca__item:focus-visible { translate: -2px -2px; box-shadow: 0 0 0 1px var(--roxo-claro), 5px 6px 0 var(--violeta); }
.busca__vazio { margin: 12px 0 0; font: 500 16px/1.4 var(--f-texto); color: var(--mudo-noite); }

/* ── a imagem destacada guarda as cores dela. A cor da casa vem por fora: um bloco chapado
      atrás, do tamanho da imagem, e uma tinta leve por cima que some no ponteiro ── */
.foto { background: var(--noite-2); overflow: visible; isolation: auto; box-shadow: 7px 8px 0 var(--c, var(--violeta)); transition: translate .22s var(--mola), box-shadow .22s var(--mola); }
.foto img { filter: none; transition: scale .5s var(--mola); position: relative; }
.foto::before { mix-blend-mode: multiply; opacity: .18; z-index: 1; transition: opacity .35s ease; }
.foto::after { display: none; }
.foto > .recorte { position: absolute; inset: 0; overflow: hidden; display: block; }
.foto > .recorte img { width: 100%; height: 100%; object-fit: cover; }
a:hover > .foto::before, a:focus-visible > .foto::before, .foto:hover::before, a.foto:focus-visible::before { opacity: 0; }
a:hover > .foto .recorte img, .foto:hover .recorte img { scale: 1.035; filter: none; }
.cartao-post > a:hover .foto, .cartao-post > a:focus-visible .foto { translate: -4px -4px; box-shadow: 11px 12px 0 var(--c, var(--violeta)); }
.cartao-post > a:active .foto { translate: 3px 4px; box-shadow: 2px 2px 0 var(--c, var(--violeta)); }
.folha .foto { box-shadow: 8px 9px 0 var(--c, var(--violeta)); }
@media (hover: none) { .foto::before { opacity: .12; } }

/* ── a vitrine anda de lado, num trilho só: um post sai enquanto o outro entra ── */
.vitrine__palco { display: block; overflow: hidden; padding: 16px 14px 18px 4px; margin: -16px -14px -18px -4px; }
.vitrine__trilho { display: flex; transition: translate .75s cubic-bezier(.22, 1, .36, 1); will-change: translate; }
.vitrine__trilho.sem-transicao { transition: none; }
.slide { grid-area: auto; flex: 0 0 100%; min-width: 0; opacity: 1; visibility: visible; translate: none; transition: opacity .5s ease; padding-right: 14px; }
html.js .slide:not(.is-ativo) { opacity: 0; }
.vitrine__trilho.sem-transicao .slide { transition: none; }
.slide.is-saindo { translate: none; }
html:not(.js) .vitrine__trilho { display: block; }
html:not(.js) .slide { opacity: 1; margin-bottom: 18px; }

/* ── o vídeo do canal: a miniatura é 16 por 9, e a caixa também ── */
.video { grid-template-columns: minmax(0, 1fr) minmax(170px, 260px); }
.video__capa { aspect-ratio: 16 / 9; }

/* ── o rodapé do blog: quatro blocos e um fecho ── */
.rodape__dentro { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, .8fr)); gap: 28px clamp(20px, 4vw, 56px); }
.rodape h3 { margin: 6px 0 12px; font: 700 14px/1.2 var(--f-texto); color: var(--roxo-claro); }
.rodape__links { display: grid; grid-template-columns: 1fr; gap: 9px; justify-content: start; }
.rodape__links a { position: relative; justify-self: start; }
.rodape .fim a { color: var(--mudo-noite); font-weight: 600; }
.rodape .fim span + span { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.rodape .fim a:hover { color: var(--lima); }
@media (max-width: 820px) { .rodape__dentro { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rodape__dentro > div:first-child { grid-column: 1 / -1; } }

/* ── o post ── */
.selo-nota { position: relative; display: grid; place-items: center; align-content: center; width: 98px; aspect-ratio: 1; border-radius: 50%; background: var(--violeta); color: var(--papel); font: 900 42px/1 var(--f-grito); letter-spacing: -.04em; rotate: -6deg; text-align: center; box-shadow: 0 0 0 3px var(--papel), 5px 6px 0 3px var(--lima); }
.selo-nota > span { display: flex; align-items: center; justify-content: center; gap: 3px; padding-top: 6px; }
.selo-nota small { display: block; font: 700 13px/1 var(--f-texto); letter-spacing: 0; margin-top: 1px; }
.selo-nota svg { width: 25px; height: 25px; fill: var(--lima); margin-top: -7px; }

/* a citação: as aspas são desenho, e não letra */
.caixinha { padding: 1.25em 1em 1em; }
.caixinha::before { content: ""; position: absolute; left: 16px; top: -14px; width: 46px; height: 34px; font-size: 0; background: var(--lima); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'%3E%3Cpath d='M0 34V18C0 8 6 1 17 0v8c-5 1-8 4-8 9h8v17zm26 0V18C26 8 32 1 43 0v8c-5 1-8 4-8 9h8v17z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 34'%3E%3Cpath d='M0 34V18C0 8 6 1 17 0v8c-5 1-8 4-8 9h8v17zm26 0V18C26 8 32 1 43 0v8c-5 1-8 4-8 9h8v17z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* o spoiler de trecho também abre e fecha no clique do próprio texto */
html.js .borrado__corpo { cursor: pointer; }
html.js .borrado:not(.is-aberto) .borrado__corpo { pointer-events: auto; }

/* a sanfona e as perguntas: a letra do artigo, e o ponteiro marca com a barra lima, sem lilás */
.sanfona__botao { font: 700 19px/1.35 var(--f-texto); padding: 16px 18px 17px; transition: box-shadow .2s var(--mola); }
.sanfona__botao:hover, .sanfona__botao:focus-visible { background: none; box-shadow: inset 7px 0 0 var(--lima); }
.sanfona__botao > svg.ui:last-child { color: var(--tinta); }
.sanfona__corpo > div > div { padding: 0 18px 20px; }
.sanfona__corpo p { font-size: 19px; line-height: 1.6; }
.sanfona--spoiler .sanfona__botao:hover, .sanfona--spoiler .sanfona__botao:focus-visible { box-shadow: none; }
.sanfona--spoiler:hover { border-left-color: var(--lima); }
.sanfona--spoiler { transition: border-color .2s ease; }

/* a indicação: no ponteiro o cartão continua cheio, e a sombra é roxa */
.indica:hover { box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); }
.indica img { transition: rotate .25s var(--mola), translate .25s var(--mola); }
.indica:hover img { rotate: -3deg; translate: -2px -2px; }

/* o índice do post */
.indice { box-shadow: 0 0 0 1px var(--tinta); background: var(--cartao); padding: 16px 18px 18px; }
.indice h2 { margin: 0 0 10px; font: 800 17px/1.2 var(--f-texto); letter-spacing: -.01em; }
.indice ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.indice a { display: block; padding: 6px 0 7px 12px; font: 500 15.5px/1.3 var(--f-texto); color: var(--tinta-2); text-decoration: none; border-left: 3px solid var(--linha); transition: color .15s ease, border-color .2s ease, padding .2s var(--mola); }
.indice a:hover { color: var(--tinta); border-left-color: var(--tinta); }
.indice a.is-aqui { color: var(--tinta); font-weight: 700; border-left-color: var(--violeta); padding-left: 16px; }
.indice--dobra { display: none; margin: 0 0 1.6em; padding: 0; }
.indice--dobra ol { padding: 0 18px 4px; }
.indice--dobra .sanfona__botao { font-size: 17px; }
/* a lateral ocupa a altura do texto: a ficha fica no começo, e o índice com o anúncio acompanham a leitura */
.corpo__lado { position: static; align-self: stretch; display: block; }
.corpo__lado .ficha { margin-bottom: 30px; }
.corpo__gruda { position: sticky; top: 92px; display: grid; gap: 26px; }

/* o espaço de anúncio: reservado no tamanho certo, para o texto não pular quando o anúncio chega */
.anuncio { display: grid; place-items: center; align-content: center; gap: 4px; text-align: center; border: 2px dashed var(--linha); color: var(--tinta-2); font: 600 13px/1.3 var(--f-texto); background: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--tinta) 4%, transparent) 10px 20px); }
.anuncio b { font: 800 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; }
.anuncio--lado { width: 100%; max-width: 300px; aspect-ratio: 300 / 250; }
.anuncio--meio { min-height: 120px; margin: 2em 0; padding: 14px; }
.rotulo-anuncio { display: block; font: 600 12px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-2); margin-bottom: 6px; }

@media (max-width: 1100px) {
  .corpo__lado { padding: 0; order: -1; }
  .corpo__lado .ficha { margin-bottom: 0; }
  .corpo__gruda { display: none; }
  .indice--dobra { display: block; }
  .ficha { max-width: 460px; }
}

/* ── a página de social media ── */
.pra-quem { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; counter-reset: quem; }
.pra-quem li { counter-increment: quem; background: var(--cartao); box-shadow: 0 0 0 1px var(--tinta); padding: 20px 22px 22px; font: 600 19px/1.35 var(--f-texto); letter-spacing: -.01em; }
.pra-quem li::before { content: "0" counter(quem); display: block; font: 900 30px/1 var(--f-grito); color: var(--violeta); margin-bottom: 10px; letter-spacing: -.04em; }
.vem-junto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; box-shadow: 0 0 0 1px var(--tinta); background: var(--cartao); }
.vem-junto li { padding: 18px 20px 20px; box-shadow: 0 0 0 1px var(--tinta); font-size: 16.5px; line-height: 1.5; }
.vem-junto b { display: block; font: 800 19px/1.2 var(--f-texto); letter-spacing: -.02em; margin-bottom: 4px; color: var(--titulo); }
.abre-texto { font: 500 clamp(19px, 2.2vw, 23px)/1.5 var(--f-texto); max-width: 34em; margin: 0; }
.servico__abre .abre-texto { margin-bottom: 26px; }
.duas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
@media (max-width: 820px) { .duas { grid-template-columns: 1fr; } }
.passos span a { color: var(--lima); }

/* o formulário: obrigatório dito no rótulo, erro ao lado do campo, e os estados de envio */
.pedido form { align-content: start; }
.pedido .linha-dupla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 18px; }
.campo label em { font: 500 13px/1 var(--f-texto); font-style: normal; color: #4D5577; margin-left: 6px; }
.campo.tem-erro > input, .campo.tem-erro > textarea { box-shadow: 0 0 0 2px var(--vermelho); }
.campo .erro { font: 600 14px/1.35 var(--f-texto); color: #B3202F; margin: 0; }
.campo .erro[hidden] { display: none; }
.pedido .marcar { color: #20243B; }
.pedido .marcar.tem-erro span { color: #B3202F; }
.armadilha { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.estado { margin: 0; padding: 14px 16px 16px; font: 600 16px/1.45 var(--f-texto); }
.estado[hidden] { display: none; }
.estado--certo { background: var(--lima); color: var(--noite); }
.estado--erro { background: var(--noite); color: var(--papel); box-shadow: inset 6px 0 0 var(--vermelho); }
.estado b { display: block; font: 800 20px/1.2 var(--f-texto); letter-spacing: -.02em; margin-bottom: 4px; }
.pedido form .botao { justify-self: start; }
.pedido form .botao[aria-busy="true"] { background: #4D5577; box-shadow: none; translate: 0 0; cursor: progress; }
.so-previa { font: 600 13px/1.4 var(--f-texto); background: var(--noite); color: var(--lima); padding: 8px 12px 9px; margin: 0; }

/* ── a página do que eu indico ── */
.filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.filtros button { font: 700 15px/1 var(--f-texto); padding: .6em .9em .7em; background: var(--cartao); color: var(--tinta); border: 0; box-shadow: 0 0 0 1px var(--tinta); cursor: pointer; transition: background-color .15s ease, color .15s ease, translate .16s var(--mola), box-shadow .16s var(--mola); }
.filtros button:hover { translate: -2px -2px; box-shadow: 0 0 0 1px var(--tinta), 4px 5px 0 var(--violeta); }
.filtros button[aria-pressed="true"] { background: var(--tinta); color: var(--folha); }
.indicados { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.indicados .indica { margin: 0; align-items: start; }
.indicados .indica[hidden] { display: none; }
.elo .conta-itens { font: 700 12px/1 var(--f-texto); background: var(--lima); color: var(--noite); padding: .35em .5em .42em; margin-left: 8px; vertical-align: 2px; }

/* ── o topo e o rodapé das páginas do xuhlis.com (social media e o que eu indico) ── */
.topo--casa .topo__nav { margin-right: 0; }
.rodape--casa { margin-top: 0; box-shadow: 0 -1px 0 var(--fio); }

/* ── a abertura do serviço: a frase diz o que é, sem palavra de efeito ── */
.servico__abre h1 { font-size: clamp(46px, 9vw, 124px); max-width: 9.5ch; margin: .12em 0 .22em; -webkit-text-stroke: .028em var(--papel); paint-order: stroke fill; }
.servico__abre .frase { font: 700 15px/1 var(--f-texto); letter-spacing: .01em; color: var(--lima); max-width: none; }
.pedido h2 { -webkit-text-stroke: .03em var(--papel); paint-order: stroke fill; }
.pedido__campos { display: grid; gap: 18px; min-width: 0; border: 0; margin: 0; padding: 0; }
.pedido__campos[hidden] { display: none; }
.opcoes { display: grid; gap: 8px; margin: 2px 0 0; padding: 0; border: 0; min-width: 0; }
.opcoes label { display: flex; gap: 10px; align-items: flex-start; font: 500 16px/1.35 var(--f-texto); padding: 10px 12px 11px; background: var(--branco); box-shadow: 0 0 0 1px var(--noite); cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease; }
.opcoes label:hover { box-shadow: 0 0 0 1px var(--noite), 4px 4px 0 var(--violeta); }
.opcoes input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--violeta); flex: none; }
.opcoes label:has(input:checked) { background: var(--noite); color: var(--papel); }
.opcoes label:has(input:focus-visible) { outline: 3px solid var(--violeta); outline-offset: 2px; }
.campo.tem-erro .opcoes label { box-shadow: 0 0 0 2px var(--vermelho); }
select { width: 100%; font: 500 17px/1.4 var(--f-texto); color: var(--noite); background: var(--branco); border: 0; box-shadow: 0 0 0 1px var(--noite); padding: .7em .8em .78em; border-radius: 0; }
select:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
.estado:focus { outline: none; }
.so-previa label { display: inline-flex; gap: 8px; align-items: center; margin-left: 6px; color: var(--papel); font-weight: 500; cursor: pointer; }
.so-previa input { accent-color: var(--lima); }

/* ── a página do que eu indico ── */
.indicados-abre { padding-block: clamp(30px, 5vw, 60px) clamp(26px, 4vw, 44px); }
.indicados-abre h1 { margin: 0 0 12px; font: 900 clamp(44px, 8vw, 96px)/.86 var(--f-grito); letter-spacing: -.045em; text-transform: uppercase; color: var(--violeta); -webkit-text-stroke: .028em var(--papel); paint-order: stroke fill; }
.indica .loja { background: var(--violeta); color: var(--branco); }
.indica .exemplo { background: transparent; color: var(--tinta-2); box-shadow: 0 0 0 1px var(--tinta-2); margin-left: 6px; }
.conta-filtro { font: 600 14px/1.2 var(--f-texto); color: var(--tinta-2); margin: -10px 0 18px; }

/* ── acabamento das páginas novas ── */
.campo .rotulo { font: 700 16px/1.25 var(--f-texto); }
.campo .rotulo em { font: 500 13px/1 var(--f-texto); font-style: normal; color: #4D5577; margin-left: 6px; }
.campo label em, .campo .rotulo em { white-space: nowrap; }
.indica__sem-foto { width: 96px; aspect-ratio: 2 / 3; display: grid; place-items: center; border: 2px dashed var(--linha); color: var(--tinta-2); }
.indica__sem-foto svg { width: 28px; height: 28px; }
@media (max-width: 480px) { .indica__sem-foto { width: 72px; } }
.estado > span { font-weight: 500; }
.estado--certo > span:last-child { display: block; font-size: 14px; margin-top: 6px; }
.vem-junto li { background: var(--cartao); }
.hub__fim { margin-top: 26px; }
@media (max-width: 620px) { .video { grid-template-columns: 1fr; } .video__capa { max-width: 340px; } }
.agora__item p, .cartao-post h3 { text-wrap: balance; }
/* no telefone o cartão de post deita: a foto à esquerda e o título ao lado, sem buraco na grade */
@media (max-width: 560px) {
  .grade { grid-template-columns: 1fr; gap: 22px; }
  .cartao-post > a { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 4px 18px; align-items: start; align-content: start; }
  .cartao-post .foto { grid-row: 1 / span 2; }
  .cartao-post h3 { margin: 2px 0 0; font-size: 18px; }
  .cartao-post .meta { align-self: start; }
  .foto .tarja { left: 8px; top: 10px; font-size: 12px; }
}
@media (max-width: 860px) { .vem-junto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .vem-junto { grid-template-columns: 1fr; } }
.campo { align-content: start; }
.pedido .linha-dupla { align-items: start; }
@media (min-width: 821px) { .pedido > div:first-child { position: sticky; top: 104px; } }
.aviso--cartao { background: var(--cartao); padding: 12px 16px 13px 14px; }

/* ── o modo escuro: a folha e os cartões de jeans ganham um fio, para não sumirem no fundo ── */
html[data-tema="escuro"] .folha { background: var(--cartao); box-shadow: 0 0 0 1px var(--fio), 10px 12px 0 var(--violeta); }
html[data-tema="escuro"] .ficha, html[data-tema="escuro"] .passos li, html[data-tema="escuro"] .agora--cartoes .agora__item { box-shadow: 0 0 0 1px var(--fio), var(--sombra) var(--roxo-claro); }
html[data-tema="escuro"] .caixinha { box-shadow: 0 0 0 1px var(--fio), 8px 9px 0 var(--roxo-claro); }
html[data-tema="escuro"] .campo label em, html[data-tema="escuro"] .campo .rotulo em { color: var(--tinta-2); }

/* ── o contorno de foco muda com o fundo: violeta no papel, lima no azul-noite.
      Era lima em todo lugar, e lima em cima de papel não se vê (1,07 para 1). ── */
:root { --foco: var(--violeta); }
.casa, .luz, html[data-tema="escuro"] { --foco: var(--lima); }
.casa .folha, .casa .pedido form { --foco: var(--violeta); }
html[data-tema="escuro"] .casa .folha { --foco: var(--lima); }
@media (max-width: 960px) { .topo__nav > a[aria-current] { color: var(--lima); } }

/* ── letra pequena em cima do violeta é branca: com o papel o contraste ficava em 4,1 para 1 ── */
.elo--porta, .elo--porta small, .casa a.elo--porta { color: var(--branco); }
.elo--porta small { opacity: 1; }
.comentarios h2 span, .menu__painel a:hover, .menu__painel a:focus-visible { color: var(--branco); }
::selection { color: var(--branco); }
.casa ::selection { color: var(--noite); }

/* ═════════════════════════════════════════════════════════════════════
   TERCEIRA RODADA (13/10/2026, tarde): os ajustes finos do dono.
   Três superfícies escuras em vez de uma, a rolagem e a entrada com os números
   do site da Lazuly, o logo que não se seleciona, os controles do formulário com
   o desenho da casa, as imagens do post com corte e foco, e o celular.
   ═════════════════════════════════════════════════════════════════════ */

/* ── três superfícies escuras, cada uma com um papel ──
   DESTAQUE (.casa): jeans com bolinha. É a abertura, a vitrine, a central.
   TOPO: liso. Ele fica parado enquanto a página passa por baixo, e desenho parado
         em cima de desenho andando briga. Liso, ele vira moldura.
   RODAPÉ: mais escuro e liso, com uma linha roxa em cima. Fecha a página sem repetir o destaque.
   PEDIDO (social media): violeta liso. A bolinha é do jeans, e só dele: em cima do roxo e do
   rodapé ela ficava estranha, e saiu. */
.topo, .casa.topo { background: var(--noite-2); box-shadow: 0 1px 0 var(--fio); }
.rodape, .casa.rodape { background: #080A13; box-shadow: inset 0 3px 0 var(--violeta); }
.rodape--casa { box-shadow: inset 0 3px 0 var(--violeta); }

/* o topo reage à posição da página, sem script: a sombra cresce nos primeiros 140 px.
   Onde o navegador não tem isso, vale a classe que o script põe. */
.topo.is-rolado { box-shadow: 0 1px 0 var(--fio), 0 10px 24px -12px rgba(0, 0, 0, .7); }
@keyframes x-topo-sombra { from { box-shadow: 0 1px 0 var(--fio), 0 0 0 0 rgba(0, 0, 0, 0); } to { box-shadow: 0 1px 0 var(--fio), 0 10px 24px -12px rgba(0, 0, 0, .7); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topo, .topo.is-rolado { animation: x-topo-sombra linear both; animation-timeline: scroll(root block); animation-range: 0 140px; }
  }
}

/* ── a entrada por rolagem: só o que está abaixo da dobra, uma vez. O script escreve a
      distância e a duração de cada família; aqui fica só o estado de antes de entrar ── */
@media (prefers-reduced-motion: no-preference) {
  html.js .revela:not(.esta-visivel) { opacity: 0; translate: 0 var(--dist, 16px); }
  html.js .revela[data-revela="midia"]:not(.esta-visivel) { scale: .985; }
}
@media print { .revela { opacity: 1 !important; translate: none !important; scale: none !important; } }

/* o grifo se pinta conforme a linha sobe na tela, e volta se a pessoa sobe */
@keyframes x-grifo { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js .texto mark { background-size: 100% 100%; transition: none; animation: x-grifo linear both; animation-timeline: view(); animation-range: entry 30% cover 34%; }
  }
}

/* ── o nome é um logotipo, e não texto: não seleciona e não arrasta ── */
.nome { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.quem b { -webkit-user-select: none; user-select: none; }
.servico__abre h1, .pedido h2, .indicados-abre h1 { -webkit-text-stroke: 0; }
/* a foto de perfil agora é recortada de verdade (o arquivo tem o canto transparente) */
.hub__foto, .assinatura img, .quem img { border-radius: 50%; }

/* ── a central ── */
/* os ícones das redes cabem sempre numa linha: eles encolhem juntos, de 44 até onde precisar */
.hub .icones { flex-wrap: nowrap; width: 100%; }
.hub .icones li { flex: 0 1 44px; min-width: 0; }
.hub .icones a { width: 100%; height: auto; aspect-ratio: 1; }
.hub .icones a svg { width: 46%; height: 46%; }

/* a onda: uma faixa em que as bolinhas do fundo acendem, atravessando a página devagar.
   A faixa anda para um lado e as bolinhas dentro dela andam o mesmo tanto para o outro:
   elas ficam paradas no lugar, em cima das do jeans, e só a faixa passa. */
.onda { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; translate: -100% 0; -webkit-mask: linear-gradient(105deg, transparent 32%, #000 50%, transparent 68%); mask: linear-gradient(105deg, transparent 32%, #000 50%, transparent 68%); }
.onda i { position: absolute; inset: 0; translate: 100% 0; background: radial-gradient(circle, var(--roxo-claro) 3.2px, transparent 3.8px) 0 0 / 20px 20px; opacity: .46; }
@keyframes x-onda-vai { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes x-onda-volta { from { translate: 100% 0; } to { translate: -100% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .onda { animation: x-onda-vai 12s linear infinite; }
  .onda i { animation: x-onda-volta 12s linear infinite; }
}

/* o aceno: de tempos em tempos o ícone de cada link inclina e a seta dá um passo, um depois
   do outro, de cima para baixo. É curto: ocupa meio segundo de um ciclo de nove. */
@keyframes x-aceno { 0%, 7%, 100% { rotate: 0deg; } 2.2% { rotate: -9deg; } 4.6% { rotate: 4deg; } }
@keyframes x-passo { 0%, 7%, 100% { translate: 0 0; } 3% { translate: 6px 0; } }
@media (prefers-reduced-motion: no-preference) {
  .hub .elo .elo__icone { animation: x-aceno 9s ease-in-out infinite; animation-delay: calc(2.4s + var(--n, 0) * .3s); }
  .hub .elo > svg.ui { animation: x-passo 9s ease-in-out infinite; animation-delay: calc(2.5s + var(--n, 0) * .3s); }
  .hub .elo:hover .elo__icone, .hub .elo:hover > svg.ui, .hub .elo:focus-visible .elo__icone, .hub .elo:focus-visible > svg.ui { animation: none; }
}

/* ── a página de social media ── */
.servico__abre h1 { max-width: 11ch; }
.servico__abre .legenda { margin: 0 0 24px; }
.servico__abre .legenda span { background: var(--lima); color: var(--noite); box-shadow: none; font-weight: 800; }
/* o pedido tem cor própria: violeta com bolinha. Não repete o jeans da abertura nem o rodapé */
.faixa-roxa, .casa.faixa-roxa { background: var(--roxo-fundo); color: var(--branco); }
.faixa-roxa .pedido h2 { color: var(--lima); }
.faixa-roxa .pedido > div > p { color: var(--branco); }
.depois { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: depois; display: grid; gap: 10px; max-width: 34ch; }
.depois li { counter-increment: depois; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: center; font: 600 17px/1.3 var(--f-texto); }
.depois li::before { content: counter(depois); display: grid; place-items: center; width: 34px; height: 34px; background: var(--noite); color: var(--lima); font: 900 20px/1 var(--f-grito); padding-top: 3px; }
.depois__titulo { margin: 26px 0 0 !important; font: 700 14px/1.2 var(--f-texto) !important; letter-spacing: .01em; color: var(--lima) !important; }

/* as opções de resposta: duas por linha, e a marca é da casa, não a do navegador */
.opcoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .opcoes { grid-template-columns: 1fr; } }
.opcoes label { align-items: center; }
.opcoes input, .marcar input, .so-previa input { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; flex: none; margin: 0; border-radius: 0; background: var(--branco); box-shadow: 0 0 0 2px var(--noite); display: inline-grid; place-content: center; cursor: pointer; }
.opcoes input:checked::before { content: ""; width: 10px; height: 10px; background: var(--violeta); }
.opcoes label:has(input:checked) input { box-shadow: 0 0 0 2px var(--lima); }
.marcar input { margin-top: 2px; box-shadow: 0 0 0 2px var(--tinta); }
.marcar input:checked, .so-previa input:checked { background: var(--lima); }
.marcar input:checked::before, .so-previa input:checked::before { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--noite); border-bottom: 3px solid var(--noite); rotate: -45deg; translate: 0 -1px; }
.so-previa input { width: 16px; height: 16px; box-shadow: 0 0 0 2px var(--lima); background: transparent; vertical-align: -3px; }
.so-previa input:checked::before { width: 8px; height: 5px; border-width: 2px; }
.marcar input:focus-visible, .so-previa input:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

/* a caixa de escolha: sem script é o <select> do navegador, com a seta afastada da borda;
   com script é um botão e uma lista com o desenho da casa */
select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C0E1A' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 46px; }
.escolha { position: relative; }
.escolha__nativo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.escolha__botao { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: left; font: 500 17px/1.4 var(--f-texto); color: var(--noite); background: var(--branco); border: 0; border-radius: 0; box-shadow: 0 0 0 1px var(--noite); padding: .7em 14px .78em .8em; cursor: pointer; transition: box-shadow .15s ease; }
.escolha__botao.esta-vazia span { color: #4D5577; }
.escolha__botao svg { width: 18px; height: 18px; transition: rotate .2s var(--mola); }
.escolha__botao:focus-visible { outline: 3px solid var(--violeta); outline-offset: 2px; }
.escolha.is-aberta .escolha__botao { box-shadow: 0 0 0 2px var(--violeta); }
.escolha.is-aberta .escolha__botao svg { rotate: 180deg; }
.escolha__lista { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30; margin: 0; padding: 6px; list-style: none; background: var(--branco); color: var(--noite); box-shadow: 0 0 0 1px var(--noite), 6px 7px 0 var(--violeta); max-height: 290px; overflow: auto; }
.escolha.abre-para-cima .escolha__lista { top: auto; bottom: calc(100% + 6px); }
.escolha__lista[hidden] { display: none; }
.escolha__lista:focus { outline: none; }
.escolha__lista li { padding: 10px 12px 11px; font: 500 16px/1.3 var(--f-texto); cursor: pointer; -webkit-user-select: none; user-select: none; }
.escolha__lista li.is-ativa { background: var(--noite); color: var(--papel); }
.escolha__lista li[aria-selected="true"] { font-weight: 700; box-shadow: inset 5px 0 0 var(--lima); }

/* ── o rodapé das páginas do xuhlis.com: as mesmas três colunas do blog ── */
.rodape .icones { flex-wrap: wrap; }

/* ── as indicações ── */
.indica > span > .estrelas { display: inline-flex; margin: 8px 0 0; }
.indica .afiliado { background: transparent; color: var(--tinta-2); box-shadow: 0 0 0 1px var(--tinta-2); margin-left: 6px; }
.aviso--cartao { max-width: none; margin: clamp(26px, 4vw, 40px) 0 0; }

/* ── o espaço de anúncio some quando não tem anúncio dentro ── */
.espaco-anuncio[hidden] { display: none !important; }
.espaco-anuncio:not(:has(.anuncio, iframe, img, ins[data-ad-status="filled"])), .espaco-anuncio:has(ins[data-ad-status="unfilled"]) { display: none; }
.espaco-anuncio--meio { margin: 2em 0; }
.espaco-anuncio--meio .anuncio--meio { margin: 0; }

/* ── as imagens do post ──
   inteira: aparece como é.            cortada: uma proporção escolhida e um ponto de foco (--ponto).
   pequena: para imagem em pé.         dupla: duas lado a lado.
   Todas abrem inteiras no clique, e a lupa aparece dentro da imagem. */
.imagem button, .artigo__capa button { position: relative; cursor: pointer; overflow: hidden; }
.imagem--corte img { aspect-ratio: var(--proporcao, 16 / 9); object-fit: cover; object-position: var(--ponto, 50% 50%); }
.imagem--pequena { max-width: min(100%, 380px); margin-inline: auto; }
.dupla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 1.8em 0; }
.dupla .imagem { margin: 0; }
.dupla .imagem img { aspect-ratio: 4 / 3; object-fit: cover; object-position: var(--ponto, 50% 50%); height: 100%; }
.dupla > figcaption, .dupla > p { grid-column: 1 / -1; font: 500 14px/1.4 var(--f-texto); color: var(--tinta-2); margin: -2px 0 0; }
[data-ampliar]::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 42px; height: 42px; background: var(--noite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8FF48' stroke-width='2' stroke-linecap='square'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5.5 5.5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 3px 3px 0 var(--lima); opacity: 0; translate: 0 6px; transition: opacity .2s ease, translate .25s var(--mola); pointer-events: none; }
[data-ampliar]:hover::after, [data-ampliar]:focus-visible::after { opacity: 1; translate: 0 0; }
@media (hover: none) { [data-ampliar]::after { opacity: 1; translate: 0 0; width: 36px; height: 36px; background-size: 20px; } }

/* a imagem aberta: cabe inteira, aproxima no clique e arrasta */
.luz { display: block; padding: 0; cursor: default; }
.luz__palco { position: absolute; inset: 0; display: grid; align-items: safe center; justify-items: safe center; padding: clamp(14px, 4vw, 48px); overflow: hidden; }
.luz img { max-width: 100%; max-height: calc(100dvh - 2 * clamp(14px, 4vw, 48px)); width: auto; height: auto; cursor: zoom-in; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.luz.sem-zoom img { cursor: default; }
.luz.is-perto .luz__palco { overflow: auto; padding: 0; cursor: grab; overscroll-behavior: contain; scrollbar-color: var(--violeta) transparent; }
.luz.is-perto img { max-width: none; max-height: none; cursor: zoom-out; box-shadow: none; scale: 1; transition: none; }
.luz .luz__fechar { position: fixed; z-index: 2; }
.luz__dica { position: fixed; z-index: 2; left: 50%; bottom: 14px; translate: -50% 0; margin: 0; white-space: nowrap; background: var(--noite); color: var(--papel); font: 600 13px/1 var(--f-texto); padding: .65em .85em .72em; box-shadow: 0 0 0 1px var(--fio); pointer-events: none; }
.luz__dica:empty { display: none; }

/* ── o vídeo: a miniatura leve, e o tocador só no clique ── */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; background: var(--noite); cursor: pointer; overflow: hidden; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: scale .5s var(--mola); }
.yt:hover img { scale: 1.03; }
.yt span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(12, 14, 26, .32); transition: background-color .2s ease; }
.yt:hover span { background: rgba(12, 14, 26, .1); }
.yt span svg { width: 58px; height: 58px; color: var(--lima); fill: var(--lima); transition: scale .25s var(--mola); }
.yt:hover span svg { scale: 1.14; }
.yt__quadro { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--noite); }
.video-post { margin: 1.8em 0; box-shadow: var(--sombra) var(--violeta); }
.video-post + .legenda-de-midia, .legenda-de-midia { font: 500 14px/1.4 var(--f-texto); color: var(--tinta-2); margin: -1em 0 1.8em; }
button.video__capa { padding: 0; border: 0; background: none; cursor: pointer; width: 100%; }
.video .yt__quadro { box-shadow: 5px 6px 0 var(--violeta); }

/* ── o que mais um post costuma ter: lista, tabela, separador, compartilhar e vizinhos ── */
.texto ul, .texto ol { margin: 0 0 1.15em; padding: 0; list-style: none; }
.texto li { position: relative; padding-left: 1.6em; margin-bottom: .45em; }
.texto ul > li::before { content: ""; position: absolute; left: 3px; top: .52em; width: 10px; height: 10px; background: var(--violeta); rotate: 12deg; }
.texto ol { counter-reset: item; }
.texto ol > li { counter-increment: item; }
.texto ol > li::before { content: counter(item); position: absolute; left: 0; top: 0; font-weight: 800; color: var(--titulo); }
.texto hr { border: 0; height: 2px; background: var(--tinta); margin: 2.4em 0; position: relative; overflow: visible; }
.texto hr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; background: var(--lima); box-shadow: 0 0 0 2px var(--tinta); translate: -50% -50%; rotate: 12deg; }
.tabela { overflow-x: auto; margin: 1.8em 0; box-shadow: 0 0 0 1px var(--tinta); }
.tabela table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.4; min-width: 420px; }
.tabela th { text-align: left; background: var(--tinta); color: var(--folha); padding: 10px 14px 11px; font-weight: 700; }
.tabela td { padding: 10px 14px 11px; border-top: 1px solid var(--linha); background: var(--cartao); }
.texto h4 { margin: 1.4em 0 .4em; font: 700 18px/1.25 var(--f-texto); }
.compartilhar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 1.6em 0 0; }
.compartilhar > b { font: 700 14px/1 var(--f-texto); color: var(--tinta-2); margin-right: 4px; }
.compartilhar a, .compartilhar button { display: inline-flex; align-items: center; gap: .5em; font: 600 14px/1 var(--f-texto); color: var(--tinta); background: var(--cartao); text-decoration: none; border: 0; padding: .6em .8em .68em; box-shadow: 0 0 0 1px var(--tinta); cursor: pointer; transition: translate .16s var(--mola), box-shadow .16s var(--mola); }
.compartilhar a:hover, .compartilhar button:hover { translate: -2px -2px; box-shadow: 0 0 0 1px var(--tinta), 4px 5px 0 var(--violeta); }
.compartilhar svg { width: 16px; height: 16px; }
.vizinhos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(26px, 4vw, 40px); }
.vizinhos a { display: block; text-decoration: none; font-weight: 400; color: var(--tinta); background: var(--cartao); padding: 14px 16px 16px; box-shadow: 0 0 0 1px var(--tinta); transition: translate .18s var(--mola), box-shadow .18s var(--mola); }
.vizinhos a:hover { translate: -3px -3px; box-shadow: 0 0 0 1px var(--tinta), var(--sombra) var(--violeta); }
.vizinhos small { display: flex; align-items: center; gap: .4em; font: 700 13px/1 var(--f-texto); color: var(--tinta-2); margin-bottom: 8px; }
.vizinhos small svg { width: 15px; height: 15px; }
.vizinhos b { font: 700 17px/1.25 var(--f-texto); text-wrap: balance; }
.vizinhos a:last-child { text-align: right; }
.vizinhos a:last-child small { justify-content: flex-end; }
@media (max-width: 560px) { .vizinhos { grid-template-columns: 1fr; } .vizinhos a:last-child { text-align: left; } .vizinhos a:last-child small { justify-content: flex-start; } }

/* ── o celular ──
   A imagem de destaque não fica mais em pé num canto: vira uma faixa da largura da tela,
   cortada pelo ponto de foco, DEPOIS do título. No clique ela abre inteira. */
@media (max-width: 820px) {
  .artigo__cabeca { gap: 22px; }
  .artigo__capa { order: 0; max-width: none; margin: 0; rotate: -1deg; }
  .artigo__capa img { aspect-ratio: 3 / 2; object-position: var(--ponto, 50% 42%); }
  .artigo { padding-top: 22px; }
  .secao { padding-block: 30px; }
  .secao--faixa { padding-block: 30px !important; }
  .secao--faixa + .secao { padding-top: 30px; }
}
@media (max-width: 620px) {
  .folha { padding: 18px 18px 22px; gap: 16px; }
  .folha .foto { order: -1; width: 100%; aspect-ratio: 16 / 9; rotate: 0deg; }
  .folha .foto .recorte img { object-position: var(--ponto, 50% 40%); }
  .folha h2 { margin-top: 10px; }
  .folha .resumo { margin: 10px 0 12px; font-size: 17px; }
  .folha .meta { margin-bottom: 16px; }
  .vitrine { padding-block: 22px 26px; }
  .titulo { margin-bottom: 16px; }
  .rodape__dentro { padding-block: 34px 24px; }
  .servico__abre { padding-block: 30px 40px; }
  .pedido { padding-block: 34px 44px; }
}

/* ── a harmonia do movimento ── */
/* UMA curva e TRÊS durações para tudo o que entra, que são as do site da Lazuly:
   texto 360 ms, cartão 420 ms, imagem 560 ms, na curva cubic-bezier(.16,1,.3,1).

   A ABERTURA de cada página (o que já está na tela quando ela abre) entra junta, em degraus
   curtos: antes só a ficha do post se mexia, e o título e a imagem ficavam parados. É CSS puro,
   começa na primeira pintura e não depende de script. O preenchimento é só "para trás": quando
   termina, a peça volta às próprias regras, e o movimento do ponteiro continua funcionando. */
@keyframes x-abre { from { opacity: 0; translate: 0 var(--abre-dist, 14px); } to { opacity: 1; translate: 0 0; } }
@keyframes x-abre-midia { from { opacity: 0; translate: 0 12px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .abre { animation: x-abre 420ms cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(min(var(--o, 0), 5) * 60ms); }
  .abre--suave { --abre-dist: 10px; animation-duration: 360ms; }
  .abre--midia { animation-name: x-abre-midia; animation-duration: 560ms; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .abre { --abre-dist: 10px; animation-duration: 320ms; animation-delay: calc(min(var(--o, 0), 5) * 40ms); }
  .abre--suave { --abre-dist: 8px; animation-duration: 280ms; }
  .abre--midia { animation-duration: 420ms; }
}

/* A TROCA DE TEMA é um movimento só: a página inteira passa de um modo ao outro de uma vez. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .34s; animation-timing-function: cubic-bezier(.33, 1, .68, 1); }
html.troca-de-tema, html.troca-de-tema *, html.troca-de-tema *::before, html.troca-de-tema *::after { transition: background-color .34s cubic-bezier(.33, 1, .68, 1), color .34s cubic-bezier(.33, 1, .68, 1), border-color .34s cubic-bezier(.33, 1, .68, 1), box-shadow .34s cubic-bezier(.33, 1, .68, 1), fill .34s cubic-bezier(.33, 1, .68, 1) !important; }
body { transition: none; }

/* ── o modo escuro, peça por peça ──
   No claro, a caixa de jeans em cima do papel é contraste. No escuro, jeans em cima de fundo
   escuro vira um recorte seco. Lá ela ganha fio e sombra chapada, como a ficha. */
html[data-tema="escuro"] .quem, html[data-tema="escuro"] .par > .casa { box-shadow: 0 0 0 1px var(--fio), var(--sombra) var(--violeta); }
html[data-tema="escuro"] .secao--faixa { border-color: var(--fio); }
html[data-tema="escuro"] .tabela th { background: var(--noite); color: var(--papel); }
html[data-tema="escuro"] .anuncio { border-color: var(--fio); }
html[data-tema="escuro"] .marcar input { box-shadow: 0 0 0 2px var(--mudo-noite); }
html[data-tema="escuro"] .topo--casa + main .aviso--cartao, html[data-tema="escuro"] .aviso--cartao { box-shadow: 0 0 0 1px var(--fio); }

/* ── o encontro do miolo com o rodapé ── */
/* O rodapé tinha uma margem por cima. Quando a última seção era uma faixa branca com linha,
   sobrava uma tira de papel entre a linha e o rodapé. Agora o rodapé encosta, e a última
   faixa não fecha com linha: quem fecha é a linha roxa do próprio rodapé. */
.rodape { margin-top: 0; }
main > .secao--faixa:last-child { border-bottom: 0; }
.texto iframe { max-width: 100%; border: 0; }

/* ── o nome é uma etiqueta ── */
/* Comparei três versões lado a lado: contorno papel, sombra branca dura e etiqueta.
   A sombra dura embaralha a letra, principalmente pequena, no topo. O contorno funciona, mas
   continua lendo como texto. A etiqueta é a da capa do LinkedIn: roxo, letra papel, um pouco
   torta, com sombra chapada. Ela lê como logotipo, e é a mais legível das três. */
.nome, .casa a.nome, .quem b { display: inline-block; background: var(--violeta); color: var(--papel); padding: .17em .24em .02em; line-height: .9; rotate: -2deg; box-shadow: .09em .1em 0 var(--lima); text-shadow: none; -webkit-text-stroke: 0; -webkit-user-select: none; user-select: none; }
a.nome { transition: rotate .2s var(--mola), box-shadow .2s var(--mola), translate .2s var(--mola); }
a.nome:hover { rotate: 0deg; translate: -1px -1px; box-shadow: .13em .14em 0 var(--lima); }
.topo .nome { font-size: clamp(27px, 3.4vw, 34px); }
.hub .nome { font-size: clamp(50px, 14vw, 66px); margin: 12px 0 10px !important; }
.assinatura .nome { font-size: 36px !important; }
.quem b { font-size: 26px; margin-bottom: 4px; }

/* ── ajustes do fim da terceira rodada ── */
/* a abertura do social media ocupava a tela inteira. Agora: título menor, a frase de apoio
   numa linha só, o texto mais largo e menos respiro em cima e embaixo */
.servico__abre { padding-block: clamp(26px, 4vw, 46px) clamp(30px, 4.6vw, 54px); }
.servico__abre h1 { font-size: clamp(38px, 6.6vw, 84px); max-width: none; margin: .1em 0 .14em; }
.servico__abre .legenda { display: block; margin: 0 0 18px; }
.servico__abre .legenda span { display: inline; padding: .2em .55em .3em; font-size: clamp(16px, 1.9vw, 20px); line-height: 1.75; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.servico__abre .abre-texto { max-width: 46em; font-size: clamp(17px, 1.7vw, 20px); margin-bottom: 22px; }
.indicados-abre { padding-block: clamp(26px, 4vw, 44px) clamp(24px, 3.6vw, 38px); }
.indicados-abre h1 { font-size: clamp(38px, 6.6vw, 84px); }

/* a lista aberta segura a roda do mouse: quem rola em cima dela não leva a página junto */
.escolha__lista, .busca__saida { overscroll-behavior: contain; }

/* ── a barra de rolagem da página: só a barrinha, por dentro do site ──
   A do navegador ocupa uma coluna do lado e tem trilho. Com script, ela é escondida e no lugar
   entra uma barrinha roxa que flutua por cima da página, no computador e no celular. Dá para
   arrastar. Sem script fica a do navegador, com a cor da casa. */
html.js { scrollbar-width: none !important; }
html.js::-webkit-scrollbar { display: none; width: 0; height: 0; }
.rolagem { position: fixed; z-index: 95; right: 0; top: 0; width: 14px; height: 60px; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; opacity: 0; transition: opacity .25s ease; }
.rolagem.existe { opacity: 1; }
/* fina, roxa e colada na borda. Não cresce nem muda de cor no ponteiro. A faixa de 14 px em
   volta dela é invisível e só existe para dar onde pegar na hora de arrastar. */
.rolagem::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; background: var(--violeta); }
.rolagem.is-pega { cursor: grabbing; }
@media print { .rolagem { display: none; } }

/* ── indicações com paginação, imagem em qualquer formato, e o escuro sem corte seco ── */
/* a imagem do produto mora numa moldura fixa e entra INTEIRA: quadrada, deitada ou em pé.
   Ela não inclina mais no ponteiro: imagem pequena girando serrilha, e o cartão já responde
   subindo com a sombra. */
.indica img { width: 96px; aspect-ratio: 3 / 4; object-fit: contain; background: var(--branco); box-shadow: 0 0 0 1px var(--linha), 3px 4px 0 var(--violeta); transition: translate .25s var(--mola), box-shadow .25s var(--mola); }
.indica:hover img { rotate: 0deg; translate: -2px -2px; box-shadow: 0 0 0 1px var(--linha), 5px 6px 0 var(--violeta); }
.indica__sem-foto { aspect-ratio: 3 / 4; }
@media (max-width: 480px) { .indica img { width: 72px; } }
.mais { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 18px; margin: clamp(26px, 4vw, 40px) 0 0; }
.mais button[hidden] { display: none; }
.mais .botao svg.ui { translate: 0 0; }
.mais .botao:hover svg.ui { translate: 0 3px; }

/* a lista de escolha tem altura para as opções todas: não sobra meio dedo de rolagem à toa */
.escolha__lista { max-height: 360px; }

/* ── o modo escuro: a abertura e o miolo ──
   No claro, a abertura é escura e o miolo é papel: o contraste já separa. No escuro os dois
   são escuros, e os dois tinham bolinha: virava um corte seco entre duas texturas parecidas.
   No escuro a bolinha fica só na abertura, o miolo é liso, e uma linha roxa fecha a abertura,
   a mesma linha que abre o rodapé. */
html[data-tema="escuro"] .reticula { background-image: none; }
html[data-tema="escuro"] .servico__abre, html[data-tema="escuro"] .indicados-abre { box-shadow: inset 0 -3px 0 var(--violeta); }
html[data-tema="escuro"] .topo, html[data-tema="escuro"] .casa.topo { background: #0A0C16; }
html[data-tema="escuro"] .secao--faixa { background: #151930; }
html[data-tema="escuro"] .indica img { background: var(--branco); }

/* ── a citação com autor ── */
/* duas versões: só a frase, ou a frase com quem disse embaixo, pequeno */
.caixinha cite { display: flex; align-items: center; gap: 10px; margin-top: .9em; font: 600 15px/1.3 var(--f-texto); font-style: normal; letter-spacing: 0; color: var(--mudo-noite); }
.caixinha cite::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--lima); rotate: 12deg; }

/* ── faixas de cor viva ── */
/* O miolo ia papel, branco, papel, branco, e a cor só aparecia no começo e no fim da página.
   Agora uma faixa de cor viva entra no meio. A regra é a do livro de marca para cor de fileira:
   o fundo é a cor chapada, o texto mora em caixa azul-noite e o título vai em tarja roxa.
   Nenhuma letra fica solta em cima da cor: papel solto na lima mede 1,07 para 1.
   A cor é a mesma no modo claro e no escuro. */
.secao--cor { --c: var(--lima); --foco: var(--noite); background: var(--c); border-block: 2px solid var(--noite); padding-block: clamp(34px, 5vw, 62px) !important; }
.secao--cor + .secao { padding-top: clamp(34px, 5vw, 62px); }
.cor-vermelho { --c: var(--vermelho); } .cor-laranja { --c: var(--laranja); } .cor-lima { --c: var(--lima); } .cor-turquesa { --c: var(--turquesa); } .cor-rosa { --c: var(--rosa); }
.secao--cor .titulo { display: inline-block; background: var(--violeta); color: var(--papel); padding: .26em .5em .34em; rotate: -1.5deg; box-shadow: 5px 6px 0 var(--noite); margin-bottom: 28px; }
.secao--cor .titulo::before { display: none; }
.secao--cor .pra-quem li { background: var(--noite); color: var(--papel); box-shadow: 6px 7px 0 var(--violeta); }
.secao--cor .pra-quem li::before { color: var(--c); }
.secao--cor .caminhos a { background: var(--noite); color: var(--papel); box-shadow: 5px 6px 0 var(--violeta); }
.secao--cor .caminhos a:hover { translate: -3px -3px; box-shadow: 9px 10px 0 var(--violeta); }
.secao--cor .caminhos a:active { translate: 2px 3px; box-shadow: 2px 2px 0 var(--violeta); }
.secao--cor .caminhos b svg { color: var(--c); }
.secao--cor .caminhos span { color: var(--mudo-noite); }
html[data-tema="escuro"] .secao--cor { background: var(--c); border-color: var(--noite); }
/* faixa branca encostada em faixa de cor: uma linha só entre as duas, e não duas somadas */
.secao--faixa + .secao--cor { border-top: 0; }
.secao--cor + .secao--faixa { border-top: 0; }
@media (max-width: 820px) { .secao--cor { padding-block: 30px !important; } .secao--cor + .secao { padding-top: 30px; } }


/* o aviso por e-mail é um pedido, e pedido aqui é violeta, como a porta e o formulário */
.par .roxo { background: var(--roxo-fundo); color: var(--branco); }
.par .roxo h2 { color: var(--lima); }
.par .roxo .olho { color: var(--branco); }
.par .roxo .botao { background: var(--lima); color: var(--noite); box-shadow: var(--sombra) var(--noite); }
.par .roxo .botao:hover { color: var(--noite); box-shadow: 8px 9px 0 var(--noite); }
.par .roxo .botao:active { box-shadow: 2px 2px 0 var(--noite); }
.par .roxo input { box-shadow: 0 0 0 1px var(--noite); }
.par .roxo { --foco: var(--lima); }

/* ── quarta rodada: o fecho ── */
/* a assinatura tem o mesmo fio e a mesma sombra no claro e no escuro */
.quem { box-shadow: 0 0 0 1px var(--fio), var(--sombra) var(--violeta); }
/* no escuro, as duas caixas do fim do blog ficam do mesmo jeito: chapadas, a de jeans só com fio */
html[data-tema="escuro"] .par > .casa { box-shadow: 0 0 0 1px var(--fio); }

/* a barra de leitura desliza: acompanha a rolagem com o mesmo assentar do resto da página */
.progresso i { transition: scale .32s cubic-bezier(.33, 1, .68, 1); }

/* o autor e os comentários, no alto do post, são links: um fio embaixo avisa */
.meta a { text-decoration: underline; text-decoration-color: var(--linha); text-decoration-thickness: 1px; text-underline-offset: .2em; }
.meta a:hover { text-decoration-color: currentColor; }

/* ── a cor dentro do post ──
   O texto de leitura continua calmo, em papel. A cor entra onde não tem leitura corrida, do
   jeito que já entra nos cartões da página inicial: na SOMBRA chapada.
   A REGRA: a cor muda de uma LINHA para a outra, e nunca entre vizinhos de lado. Cada bloco
   de mídia do texto (imagem, par de imagens, citação, vídeo) leva a cor seguinte, na ordem
   turquesa, laranja, lima, violeta, e duas imagens lado a lado levam a MESMA. Quem conta a
   ordem é o script (--ci em cada bloco); sem script, todas ficam violeta.
   A única exceção é a fileira de posts da página inicial, um de cada cor, que o dono aprovou. */
.imagem button { box-shadow: 6px 7px 0 var(--ci, var(--violeta)); width: calc(100% - 6px); }
.imagem button:hover { translate: -3px -3px; box-shadow: 9px 10px 0 var(--ci, var(--violeta)); }
.imagem button:active { translate: 3px 4px; box-shadow: 2px 2px 0 var(--ci, var(--violeta)); }
.video-post { box-shadow: var(--sombra) var(--ci, var(--violeta)); width: calc(100% - 6px); }
.caixinha, html[data-tema="escuro"] .caixinha { box-shadow: 8px 9px 0 var(--ci, var(--violeta)); width: calc(100% - 8px); }
html[data-tema="escuro"] .caixinha { box-shadow: 0 0 0 1px var(--fio), 8px 9px 0 var(--ci, var(--violeta)); }

/* numa faixa de cor, o cartão de post vira uma caixa azul-noite, com a foto por dentro */
.secao--cor .cartao-post > a { background: var(--noite); color: var(--papel); padding: 0 0 16px; box-shadow: 6px 7px 0 var(--violeta); transition: translate .2s var(--mola), box-shadow .2s var(--mola); height: 100%; }
.secao--cor .cartao-post > a:hover, .secao--cor .cartao-post > a:focus-visible { translate: -4px -4px; box-shadow: 10px 11px 0 var(--violeta); }
.secao--cor .cartao-post > a:active { translate: 3px 4px; box-shadow: 2px 2px 0 var(--violeta); }
.secao--cor .cartao-post .foto, .secao--cor .cartao-post > a:hover .foto, .secao--cor .cartao-post > a:focus-visible .foto, .secao--cor .cartao-post > a:active .foto { box-shadow: none; translate: 0 0; }
.secao--cor .cartao-post h3 { margin: 14px 16px 8px; }
.secao--cor .cartao-post > a:hover h3 { color: var(--roxo-claro); }
.secao--cor .cartao-post .meta { margin-inline: 16px; color: var(--mudo-noite); }
.secao--cor .estrelas i { background: var(--fio); }
.secao--cor .estrelas i.cheia { background: var(--lima); }
.secao--cor .estrelas i.meia { background: linear-gradient(90deg, var(--lima) 50%, var(--fio) 50%); }
.secao--cor .grade { align-items: stretch; }
@media (max-width: 560px) {
  .secao--cor .cartao-post > a { padding: 0; align-items: center; }
  .secao--cor .cartao-post h3 { margin: 10px 12px 6px 0; }
  .secao--cor .cartao-post .meta { margin: 0 12px 10px 0; }
}

/* ── a faixa violeta ── */
/* O rosa em faixa inteira o dono achou muito feio, e saiu do post. A faixa do fim usa o violeta
   do formulário, que ele aprovou, com a etiqueta e as sombras em lima. */
.cor-roxo { --c: var(--roxo-fundo); --foco: var(--lima); }
.secao--cor.cor-roxo .titulo { background: var(--lima); color: var(--noite); box-shadow: 5px 6px 0 var(--noite); }
.secao--cor.cor-roxo .cartao-post > a { box-shadow: 6px 7px 0 var(--lima); }
.secao--cor.cor-roxo .cartao-post > a:hover, .secao--cor.cor-roxo .cartao-post > a:focus-visible { box-shadow: 10px 11px 0 var(--lima); }
.secao--cor.cor-roxo .cartao-post > a:active { box-shadow: 2px 2px 0 var(--lima); }
.secao--cor.cor-roxo .cartao-post > a:hover h3 { color: var(--lima); }

/* ── a busca e o menu abrem por cima ── */
/* O topo é grudado no alto da tela. A busca abria DENTRO dele, e o topo crescia: a página inteira
   mudava de altura, o navegador compensava a rolagem, e a cada abrir e fechar sobrava um pouco.
   Era a página "subindo". Agora a busca é um painel que flutua embaixo do topo, por cima da
   página, e nada muda de altura. O menu do telefone tinha o mesmo defeito, e ganhou o mesmo
   conserto. */
.busca { position: absolute; left: 50%; top: 100%; translate: -50% 0; margin: 0; z-index: 4; }
.busca__dentro { margin: 8px 8px 12px 1px; padding: 16px; background: var(--noite-2); box-shadow: 0 0 0 1px var(--fio), var(--sombra) var(--violeta); }
.busca__saida { max-height: min(52vh, 420px); overflow-y: auto; padding: 2px 8px 8px 2px; scrollbar-color: var(--violeta) transparent; scrollbar-width: thin; }
@media (max-width: 960px) {
  .topo.is-aberto .topo__nav { position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 2px var(--borda) 14px; background: var(--noite-2); box-shadow: 0 1px 0 var(--fio), 0 16px 26px -12px rgba(0, 0, 0, .7); max-height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; z-index: 3; }
  html[data-tema="escuro"] .topo.is-aberto .topo__nav { background: #0A0C16; }
}

/* ── o vídeo numa janela ── */
.cine { --foco: var(--lima); position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(14px, 4vw, 48px); background: rgba(12, 14, 26, .93); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.cine.is-aberta { opacity: 1; visibility: visible; transition-delay: 0s; }
/* a caixa tem a proporção do vídeo e cabe na tela nos dois sentidos, deitada ou em pé */
.cine__caixa { width: min(100%, 1100px, (100dvh - 130px) * 16 / 9); aspect-ratio: 16 / 9; background: var(--noite); box-shadow: 10px 12px 0 var(--violeta); scale: .96; transition: scale .35s var(--mola); }
.cine.is-aberta .cine__caixa { scale: 1; }
.cine__caixa iframe { display: block; width: 100%; height: 100%; aspect-ratio: auto; border: 0; }
.cine__fechar { position: fixed; right: 16px; top: 16px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--lima); color: var(--noite); border: 0; cursor: pointer; }

/* ── o botão dentro de uma faixa de cor ── */
.secao--cor .centro .botao { box-shadow: var(--sombra) var(--noite); }
.secao--cor .centro .botao:hover { box-shadow: 8px 9px 0 var(--noite); }
.secao--cor .centro .botao:active { box-shadow: 2px 2px 0 var(--noite); }
.secao--cor.cor-roxo .centro .botao { background: var(--lima); color: var(--noite); }
.secao--cor.cor-roxo .centro .botao:hover { color: var(--noite); }
/* com um ou dois posts relacionados, os cartões não esticam para encher a fileira */
.secao--cor .grade { justify-content: start; }

/* ── o respiro do botão que fecha uma seção ── */
/* estava folgado: o botão ficava longe dos cartões e mais longe ainda do fim da faixa */
.centro { margin-top: clamp(20px, 2.4vw, 28px); }
.secao:has(> .conter > .centro:last-child) { padding-bottom: clamp(26px, 3.4vw, 40px) !important; }

/* a caixa de aceite do pedido: a frase em peso normal, e vermelha quando falta marcar */
.pedido .campo--aceite .marcar { font: 500 15px/1.4 var(--f-texto); cursor: pointer; }
.pedido .campo--aceite.tem-erro .marcar span { color: #B3202F; }

/* rodada 5 (14/10/2026): o seletor desenhado ganha o mesmo contorno de erro dos campos de
   texto, e o "ainda não tenho perfil" fica logo embaixo do @, menor que a pergunta */
.campo.tem-erro .escolha__botao { box-shadow: 0 0 0 2px var(--vermelho); }
.pedido .marcar--miudo { margin-top: 4px; font: 500 14px/1.35 var(--f-texto); cursor: pointer; }