/* =========================================================================
   DE PERTO · design system v2 da Clínica Ressignifique e da Grazy Gaion
   Tokens, base, as pranchas (folhas empilhadas), a abertura e as seções
   de catálogo. Componentes em componentes.css; peças em pecas.css; vídeo
   em ilha.css. Nenhum valor solto: tudo sai do :root abaixo.
   Classes com o nome das referências: .liquid-glass e .nav-link (Lunar),
   .duo, .tint-flood, .blueprint, .panel (Halftone), .word-reveal,
   .kinetic-word, #menuOverlay (Riska), .orb e [data-reveal] (Veloura).
   ========================================================================= */

:root {
  /* 1.1 Cor · da marca (medidas na ficha de marca, 22/09/2026) */
  --cor-creme: #F9F8E4;
  --cor-marrom: #583B28;
  --cor-taupe: #846D5C;
  --cor-marrom-medio: #6B5B4F;
  --cor-marrom-frio: #574B41;
  --cor-nude: #E8DCD2;
  --cor-magenta: #B8315C;

  /* 1.2 Cor · da v2 e da v3, oficial desde 21/10/2026 (mudança leve e cores novas) */
  --cor-papel: #F7F2E6;
  --cor-papel-alto: #FCF9F1;
  --cor-tinta: #2F1F17;
  --cor-framboesa: #A8295A;
  --cor-framboesa-funda: #5C1733;
  --cor-salvia: #71866F;
  --cor-salvia-funda: #4C5E4B;
  --cor-salvia-clara: #DDE5D8;
  --cor-salvia-noite: #25332A;
  --cor-po: #EBCFC4;
  --cor-luz: #FFE6D1;
  --mascara: #000;   /* só para máscara (mask-image): é opacidade, não aparece como cor */

  /* 1.3 Cor · transparências (sempre de um token acima) */
  --cor-tinta-a04: color-mix(in srgb, var(--cor-tinta) 4%, transparent);
  --cor-tinta-a06: color-mix(in srgb, var(--cor-tinta) 6%, transparent);
  --cor-tinta-a10: color-mix(in srgb, var(--cor-tinta) 10%, transparent);
  --cor-tinta-a16: color-mix(in srgb, var(--cor-tinta) 16%, transparent);
  --cor-tinta-a28: color-mix(in srgb, var(--cor-tinta) 28%, transparent);
  --cor-tinta-a50: color-mix(in srgb, var(--cor-tinta) 50%, transparent);
  --cor-tinta-a72: color-mix(in srgb, var(--cor-tinta) 72%, transparent);
  --cor-tinta-a88: color-mix(in srgb, var(--cor-tinta) 88%, transparent);
  --cor-papel-a10: color-mix(in srgb, var(--cor-papel) 10%, transparent);
  --cor-papel-a18: color-mix(in srgb, var(--cor-papel) 18%, transparent);
  --cor-papel-a30: color-mix(in srgb, var(--cor-papel) 30%, transparent);
  --cor-papel-a50: color-mix(in srgb, var(--cor-papel) 50%, transparent);
  --cor-papel-a72: color-mix(in srgb, var(--cor-papel) 72%, transparent);
  --cor-papel-a88: color-mix(in srgb, var(--cor-papel) 88%, transparent);
  --cor-papel-alto-a65: color-mix(in srgb, var(--cor-papel-alto) 65%, transparent);
  --cor-marrom-a10: color-mix(in srgb, var(--cor-marrom) 10%, transparent);
  --cor-marrom-a18: color-mix(in srgb, var(--cor-marrom) 18%, transparent);
  --cor-marrom-a30: color-mix(in srgb, var(--cor-marrom) 30%, transparent);
  --cor-framboesa-a14: color-mix(in srgb, var(--cor-framboesa) 14%, transparent);
  --cor-framboesa-a28: color-mix(in srgb, var(--cor-framboesa) 28%, transparent);
  --cor-po-a30: color-mix(in srgb, var(--cor-po) 30%, transparent);
  --cor-po-a60: color-mix(in srgb, var(--cor-po) 60%, transparent);
  --cor-luz-a18: color-mix(in srgb, var(--cor-luz) 18%, transparent);
  --cor-luz-a40: color-mix(in srgb, var(--cor-luz) 40%, transparent);
  --cor-luz-a70: color-mix(in srgb, var(--cor-luz) 70%, transparent);
  --cor-salvia-a20: color-mix(in srgb, var(--cor-salvia) 20%, transparent);
  --cor-salvia-noite-a92: color-mix(in srgb, var(--cor-salvia-noite) 92%, transparent);

  /* 1.4 Cor · as tintas do duotone (escura × clara) */
  --duo-sepia-escura: var(--cor-tinta);
  --duo-sepia-clara: var(--cor-papel);
  --duo-po-escura: var(--cor-marrom);
  --duo-po-clara: var(--cor-po);
  --duo-salvia-escura: var(--cor-salvia-noite);
  --duo-salvia-clara: var(--cor-salvia-clara);
  --duo-framboesa-escura: var(--cor-framboesa-funda);
  --duo-framboesa-clara: var(--cor-po);

  /* 1.5 Cor · degradês */
  --degrade-luz: radial-gradient(50% 50% at 50% 50%, var(--cor-luz-a40) 0%, transparent 70%);
  --degrade-tinta: linear-gradient(180deg, transparent 0%, var(--cor-tinta-a72) 62%, var(--cor-tinta) 100%);
  --degrade-tinta-alto: linear-gradient(180deg, var(--cor-tinta-a72) 0%, transparent 46%);
  --degrade-noite: linear-gradient(180deg, transparent 0%, var(--cor-salvia-noite-a92) 100%);
  --degrade-papel: linear-gradient(180deg, var(--cor-papel-alto) 0%, var(--cor-papel) 100%);

  /* 2.1 Letra · famílias (embutidas em assets/css/fontes.css) */
  --letra-titulo: 'Sande', 'Cormorant Garamond', Georgia, serif;
  --letra-rotulo: 'Fibon', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --letra-texto: 'Jakarta', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;

  /* 2.2 Letra · tamanhos (terça maior, 1,25) */
  --tam-raiz: clamp(106.25%, 100% + 0.25vw, 112.5%);   /* 17 px no celular, 18 px na tela grande */
  --tam-legenda: 0.75rem;
  --tam-rotulo: 0.8125rem;
  --tam-pequeno: 0.875rem;
  --tam-texto: 1rem;
  --tam-grande: 1.25rem;
  --tam-h6: 1.25rem;
  --tam-h5: 1.5625rem;
  --tam-h4: clamp(1.6rem, 1.3rem + 1vw, 1.953rem);
  --tam-h3: clamp(1.95rem, 1.5rem + 1.6vw, 2.441rem);
  --tam-h2: clamp(2.441rem, 1.7rem + 3vw, 3.815rem);
  --tam-h1: clamp(3.052rem, 1.9rem + 5vw, 5.96rem);
  --tam-perto: clamp(4.4rem, 1.6rem + 11vw, 12.5rem);    /* o "De perto" da abertura */
  --tam-numeral: clamp(4.2rem, 2rem + 8vw, 9.5rem);      /* 2012 e 48 */
  --tam-romano: clamp(2.4rem, 1.6rem + 3vw, 4.4rem);     /* o número da prancha */

  /* 2.3 Letra · entrelinha, espaçamento, peso */
  --lh-perto: 0.86;
  --lh-justo: 1;
  --lh-titulo: 1.05;
  --lh-sub: 1.2;
  --lh-rotulo: 1.35;
  --lh-texto: 1.65;
  --tr-perto: -0.035em;
  --tr-titulo: -0.015em;
  --tr-zero: 0em;
  --tr-texto: 0.005em;
  --tr-rotulo: 0.035em;
  --tr-regua: 0.06em;
  --tr-pilula: 0.08em;
  --ws-texto: 0.08em;
  --peso-luz: 300;
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --largura-texto: 36rem;
  --largura-titulo: 18ch;

  /* 3.1 Espaço */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;
  --esp-9: 6rem;
  --esp-10: 8rem;
  --esp-gutter: clamp(1rem, 0.4rem + 3vw, 4rem);
  --esp-prancha: clamp(4.5rem, 3rem + 6vw, 9rem);
  --largura-max: 82rem;
  --largura-figura: 60rem;
  --abertura-retrato-cel: min(56svh, 30rem);   /* no celular, a Grazy em cima e o texto embaixo, sobre a parte que esmaece */
  --abertura-texto-cel: 56svh;
  --tile-papel: 1024px;
  --alvo-toque: 2.75rem;

  /* 3.2 Forma */
  --raio-1: 0.375rem;
  --raio-2: 0.875rem;          /* botão e campo: o retângulo macio do Halftone */
  --raio-3: 1.25rem;           /* papel e cartão */
  --raio-4: 2rem;              /* foto grande e cartão de caminho (Lunar) */
  --raio-prancha: 1.75rem;     /* o canto de cima de cada folha */
  --raio-pilula: 999px;
  --raio-lente: 50%;
  --fio-fino: 1px;
  --fio: 1.5px;
  --fio-foco: 2px;
  --recuo-foco: 3px;
  --tam-chamada: 1.6rem;       /* o círculo do número das chamadas */
  --tam-icone-p: 0.9rem;
  --icone: 1.25rem;
  --icone-grande: 2rem;

  /* 3.4 Medidas de componente e de leitura */
  --medida-abertura-titulo: 9ch;
  --medida-frase: 30ch;
  --medida-abertura: 34ch;
  --medida-giro: 7ch;
  --col-2: 20rem;              /* o mínimo de cada coluna, nas grades de 2, 3 e 4 */
  --col-3: 16rem;
  --col-4: 12.5rem;
  --cartao-min-p: 14rem;       /* o menor cartão de uma grade automática */
  --cartao-caminho-min: 12.5rem;
  --col-mini: 9rem;
  --col-mini-3: 22rem;   /* os cinco caminhos cabem numa linha no computador */
  --cartao-min: 15rem;
  --cartao-min-g: 17rem;
  --peca-min: 18rem;
  --col-icone: 7.25rem;
  --col-tokens: 21rem;
  --col-estados: 11rem;
  --altura-demo: 22rem;        /* a caixa de uma demonstração */
  --altura-placa: 18rem;
  --altura-amostra: 8rem;
  --altura-palco-anim: 13rem;
  --altura-codigo: 28rem;
  --altura-agenda: 15rem;
  --altura-campo-texto: 7rem;
  --altura-tela: 100svh;
  --largura-mapa: 40rem;
  --largura-luz: 30rem;
  --largura-dica: 16rem;
  --largura-janela: 34rem;
  --largura-logo-pe: 12rem;
  --logo-larg-g: 20rem;
  --selo-g: 9rem;
  --selo-m: 6rem;
  --selo-p: 3.5rem;
  --selo-chip: 4.5rem;
  --marca-na-lente: 70%;
  --orb-recuo: 8rem;
  --opac-orbe-escuro: 0.15;
  --proporcao-recorte: 2819 / 3973;   /* o recorte da Grazy */
  --altura-foto: 26rem;
  --esqueleto-p: 4rem;
  --esqueleto-m: 5rem;
  --esqueleto-linha: 60%;
  --icone-check: 1.25rem;
  --icone-check-dentro: 0.75rem;
  --tam-lente-icone: 3.5rem;
  --tam-icone-vidro: 2.5rem;
  --btn-anel: 6rem;
  --selo: 7rem;
  --caixa-opcao: 1.2rem;
  --tam-codigo: 0.92em;
  --spec-num: 2rem;
  --spec-rotulo: 9rem;
  --proporcao-retrato: 4 / 5;
  --proporcao-foto: 4 / 3;
  --proporcao-tinteiro: 5 / 4;
  --proporcao-larga: 3 / 2;
  --tile-grao: 512px;
  --opac-apoio: 0.8;           /* texto e luz de apoio */
  --opac-veu-cor: 0.6;
  --opac-veu: 0.55;
  --opac-veu-forte: 0.85;
  --aperta: 0.98;              /* o botão apertado */
  --cresce-fundo: 1.06;
  --orbe-cresce: 1.12;
  --filtro-duo: grayscale(1) contrast(1.18) brightness(1.05);
  --filtro-cor-de-perto: saturate(0.96) contrast(0.96) brightness(1.03) sepia(0.05);   /* gente: a cor de perto (CapCut na prancha X) */   /* a foto antes das duas tintas */
  --mascara-desce: linear-gradient(180deg, var(--mascara) 70%, transparent 99%);   /* o recorte que esmaece embaixo */
  /* 3.3 Sombra */
  --sombra-folha: 0 -1.875rem 4.375rem var(--cor-tinta-a10);
  --sombra-papel: 0 1.75rem 4.75rem var(--cor-tinta-a16), inset 0 var(--fio-fino) 0 var(--cor-papel-alto-a65);
  --sombra-papel-baixa: 0 1.125rem 3rem var(--cor-tinta-a10), inset 0 var(--fio-fino) 0 var(--cor-papel-alto-a65);
  --sombra-acao: 0 1.375rem 3.125rem var(--cor-framboesa-a28);
  --sombra-tinta: 0 1.375rem 3.125rem var(--cor-tinta-a28);
  --sombra-contato: 0 var(--esp-2) var(--esp-4) var(--cor-tinta-a28);

  /* 4.1 Tempo e curva */
  --tempo-rapido: 0.18s;
  --tempo-medio: 0.4s;
  --tempo-lento: 0.8s;
  --tempo-entra: 1.1s;
  --tempo-zoom: 1.4s;          /* o zoom lento da Veloura */
  --tempo-revela: 2.4s;        /* a lupa revelando a cor */
  --tempo-respira: 7s;
  --tempo-marquee: 60s;
  --curva: cubic-bezier(0.16, 1, 0.3, 1);       /* a do Halftone */
  --curva-suave: cubic-bezier(0.4, 0, 0.2, 1);
  --sobe-leve: -2px;           /* o papel que sobe no hover */
  --cresce-foto: 1.05;

  /* 4.2 Efeito */
  --desfoque-vidro: 1.25rem;
  --desfoque-leve: 0.375rem;
  --desfoque-entra: 0.6rem;
  --opac-textura: 0.55;
  --opac-papel: 0.9;      /* lido pelo PREPARO/v2/folhas.py */
  --opac-grade: 1;
  --opac-reticula: 0.3;
  --opac-orbe: 0.5;
  --opac-desligado: 0.45;
  --opac-fundo-foto: 0.3;
  --desfoque-fundo: 0.5rem;
  --passo-grade: 1.5rem;
  --passo-reticula: 4px;
  --ponto-reticula: 0.8px;
  --passo-flood: 1.375rem;
  --orbe: 30rem;   /* o orbe é um degradê: o tamanho já inclui o esmaecido (antes: 22rem + desfoque de 4rem) */

  /* 4.3 Camadas */
  --z-fundo: -1;
  --z-base: 1;
  --z-alto: 2;
  --z-cima: 3;
  --z-nav: 60;
  --z-menu: 80;
  --z-aviso: 90;

  /* 4.4 A luz da lupa (lida pelo anel.js): a lupa fica fora do quadro, à direita, na altura do rosto */
  --luz-arco-raio: 0.3;       /* raio do anel, em fração da altura da abertura */
  --luz-arco-fora: 0.75;       /* quanto do raio o centro do anel fica além da borda direita */
  --luz-acima: 0.02;           /* a lupa um pouco acima do rosto, em fração da altura */
  --luz-feixe: 0.26;            /* força do ar iluminado */
  --luz-abre: 0.14;             /* quanto o feixe abre no caminho */
  --luz-poeira-atras: 0.62;     /* poeira fina atrás da Grazy (fração das células com partícula) */
  --luz-poeira-frente: 0.44;    /* pontos de luz na frente dela (nítidos e desfocados) */
  --luz-rosto: 0.15;           /* a luz que toca o lado do rosto */
  --luz-brilho: 1;             /* o brilho que corre no arco, uma volta a cada 24 s */
  --luz-dpr-max: 1.25;         /* a luz é macia: não precisa de mais resolução que isto */
  --luz-borda: 22%;            /* a borda da cor que nasce: macia, como luz */
  /* 4.5 A mesma luz, parada, nas peças e no vídeo (.luz-lupa): cada peça troca estes */
  --lf-y: 30%;                 /* a altura do rosto */
  --lf-r: 200px;               /* o raio do anel */
  --lf-alcance: 80%;           /* até onde o feixe vai, da borda direita */
  --lf-abre: 24%;              /* a altura do feixe */
  --lf-poeira: 56rem;          /* o tamanho do ladrilho da poeira (a da v1) */
  --lf-poeira-frente: 110rem;  /* na frente, a poeira maior: perto da câmera */
  --lf-corpo-x: 60%;           /* o meio do busto, onde caem os pontos da frente */
  --lf-corpo-y: 48%;
  --lf-corpo-larg: 34%;
  --lf-corpo-alt: 30%;
  --lf-halo: 14px;
  --lf-fio: var(--fio-foco);
  --lf-opac-arco: 0.85;
  --lf-opac-halo: 0.5;

  /* 4.5 Só no que não fazer (fora do sistema, de propósito) */
  --erro-dourado: #C9A45C;
  --erro-dourado-luz: #E8C27A;
  --erro-sombra: #00000066;
  --erro-filtro-pele: saturate(1.6) contrast(1.15) blur(0.6px) brightness(1.08);   /* pele alisada e saturada: o que a marca não usa */
  /* 5 Papéis (a folha de cada prancha troca estes) */
  --cor-fundo: var(--cor-papel);
  --cor-superficie: var(--cor-papel-alto);
  --cor-texto: var(--cor-marrom);
  --cor-texto-2: var(--cor-marrom-medio);
  --cor-titulo: var(--cor-tinta);
  --cor-fio: var(--cor-marrom-a18);
  --cor-fio-forte: var(--cor-marrom-a30);
  --cor-grade: var(--cor-tinta-a04);
  --cor-acao: var(--cor-tinta);
  --cor-acao-texto: var(--cor-papel);
  --cor-destaque: var(--cor-framboesa);
  --cor-foco: var(--cor-framboesa);
  --cor-flood: var(--cor-framboesa-a28);
  --cor-borda-campo: var(--cor-taupe);   /* borda de campo e chip: 3:1 ou mais sobre o claro */
}

/* ---------- as folhas: cada prancha troca os papéis ---------- */
[data-folha="papel"] { --cor-fundo: var(--cor-papel); }
[data-folha="po"] { --cor-fundo: var(--cor-po); --cor-texto-2: var(--cor-marrom); --cor-superficie: var(--cor-papel-alto); --cor-fio: var(--cor-marrom-a18); --cor-flood: var(--cor-marrom-a18); }
[data-folha="salvia"] { --cor-fundo: var(--cor-salvia-clara); --cor-texto: var(--cor-salvia-noite); --cor-texto-2: var(--cor-salvia-funda); --cor-titulo: var(--cor-salvia-noite); --cor-destaque: var(--cor-framboesa); --cor-flood: var(--cor-salvia-a20); }
[data-folha="tinta"], [data-folha="noite"] {
  --cor-fundo: var(--cor-tinta); --cor-superficie: var(--cor-papel-a10); --cor-texto: var(--cor-papel); --cor-texto-2: var(--cor-papel-a72);
  --cor-titulo: var(--cor-papel); --cor-fio: var(--cor-papel-a18); --cor-fio-forte: var(--cor-papel-a30); --cor-grade: var(--cor-papel-a10); --cor-borda-campo: var(--cor-papel-a50);
  --cor-acao: var(--cor-papel); --cor-acao-texto: var(--cor-tinta); --cor-destaque: var(--cor-po); --cor-foco: var(--cor-luz); --cor-flood: var(--cor-po-a30);
}
[data-folha="noite"] { --cor-fundo: var(--cor-salvia-noite); --cor-destaque: var(--cor-po); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--tam-raiz); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--esp-9); }
body { margin: 0; background: var(--cor-tinta); color: var(--cor-texto); font-family: var(--letra-texto); font-size: var(--tam-texto); line-height: var(--lh-texto); letter-spacing: var(--tr-texto); word-spacing: var(--ws-texto); font-weight: var(--peso-normal); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg, video, canvas { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
a { color: inherit; }
code { font-family: var(--letra-rotulo); font-size: var(--tam-codigo); letter-spacing: var(--tr-regua); word-spacing: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--letra-titulo); font-weight: var(--peso-normal); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); word-spacing: normal; color: var(--cor-titulo); text-wrap: balance; }
h1 em, h2 em, h3 em, h4 em { color: var(--cor-destaque); }
::selection { background: var(--cor-framboesa); color: var(--cor-papel); }
:focus-visible { outline: var(--fio-foco) solid var(--cor-foco); outline-offset: var(--recuo-foco); border-radius: var(--raio-1); }
.so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular { position: fixed; left: var(--esp-4); top: var(--esp-4); z-index: var(--z-aviso); padding: var(--esp-3) var(--esp-5); border-radius: var(--raio-2); background: var(--cor-framboesa); color: var(--cor-papel); font-family: var(--letra-rotulo); text-decoration: none; transform: translateY(-200%); transition: transform var(--tempo-medio) var(--curva); }
.pular:focus { transform: none; }
.icone { width: var(--icone); height: var(--icone); flex: none; }

/* tipografia de uso */
.t-perto { font-family: var(--letra-titulo); font-size: var(--tam-perto); line-height: var(--lh-perto); letter-spacing: var(--tr-perto); }
.t-h1 { font-family: var(--letra-titulo); font-size: var(--tam-h1); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); }
.t-h2 { font-family: var(--letra-titulo); font-size: var(--tam-h2); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); }
.t-h3 { font-family: var(--letra-titulo); font-size: var(--tam-h3); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); }
.t-h4 { font-family: var(--letra-titulo); font-size: var(--tam-h4); line-height: var(--lh-sub); letter-spacing: var(--tr-titulo); }
.t-h5 { font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-sub); letter-spacing: var(--tr-titulo); }
.t-h6 { font-family: var(--letra-titulo); font-size: var(--tam-h6); line-height: var(--lh-sub); letter-spacing: var(--tr-titulo); }
.t-grande { font-size: var(--tam-grande); line-height: var(--lh-sub); }
.t-pequeno { font-size: var(--tam-pequeno); }
.t-figura { font-family: var(--letra-titulo); font-style: italic; font-size: var(--tam-grande); line-height: var(--lh-sub); color: var(--cor-texto-2); word-spacing: normal; }
.t-chamada { font-family: var(--letra-rotulo); font-weight: var(--peso-medio); font-size: var(--tam-rotulo); line-height: var(--lh-rotulo); letter-spacing: var(--tr-rotulo); word-spacing: normal; }
.t-regua { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-rotulo); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); }
.t-legenda { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-rotulo); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); }
.t-ajuda { font-size: var(--tam-pequeno); line-height: var(--lh-texto); color: var(--cor-texto-2); }
.t-numeral { font-family: var(--letra-titulo); font-size: var(--tam-numeral); line-height: var(--lh-justo); letter-spacing: var(--tr-perto); font-variant-numeric: lining-nums; }
.lede { max-width: var(--largura-texto); font-size: var(--tam-grande); line-height: var(--lh-texto); color: var(--cor-texto-2); }
.ficha { margin-top: var(--esp-3); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-rotulo); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); }

/* selo de origem: o que é da marca e o que é proposta */
.origem { display: inline-flex; align-items: center; gap: var(--esp-1); padding: 0 var(--esp-2); border: var(--fio-fino) solid var(--cor-fio-forte); border-radius: var(--raio-pilula); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-rotulo); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); white-space: nowrap; vertical-align: middle; }
.origem::before { content: ""; width: var(--esp-2); height: var(--esp-2); border-radius: var(--raio-lente); background: currentColor; }
.origem[data-origem="proposta"] { color: var(--cor-destaque); border-color: currentColor; border-style: dashed; }
.origem[data-origem="exemplo"] { color: var(--cor-texto-2); border-style: dotted; }

/* ---------- nav pílula de vidro (Lunar: .liquid-glass + .nav-link) ---------- */
.nav { position: fixed; z-index: var(--z-nav); top: var(--esp-3); left: var(--esp-3); right: var(--esp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); min-height: calc(var(--alvo-toque) + var(--esp-3)); padding: var(--esp-2) var(--esp-2) var(--esp-2) var(--esp-4); border-radius: var(--raio-pilula); transition: transform var(--tempo-lento) var(--curva), background-color var(--tempo-medio) var(--curva-suave), color var(--tempo-medio) var(--curva-suave); }
.liquid-glass { background: var(--cor-papel-a72); -webkit-backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.3); backdrop-filter: blur(var(--desfoque-vidro)) saturate(1.3); border: var(--fio-fino) solid var(--cor-papel-a50); box-shadow: var(--sombra-papel-baixa); color: var(--cor-marrom); }
.nav.e-escuro { background: var(--cor-tinta-a72); border-color: var(--cor-papel-a18); color: var(--cor-papel); --cor-foco: var(--cor-luz); }
.nav.e-escondida { transform: translateY(calc(-100% - var(--esp-4))); }
.nav__marca { display: flex; align-items: center; gap: var(--esp-3); min-width: 0; text-decoration: none; font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); word-spacing: normal; white-space: nowrap; }
.nav__marca svg { width: var(--icone-grande); height: auto; color: currentColor; }
.nav__marca b { font-weight: var(--peso-medio); }
.nav__divisa { opacity: var(--opac-desligado); }
.nav__links { display: none; align-items: center; gap: var(--esp-6); margin: 0; padding: 0; list-style: none; font-family: var(--letra-rotulo); font-size: var(--tam-rotulo); letter-spacing: var(--tr-rotulo); word-spacing: normal; }
.nav-link { position: relative; text-decoration: none; opacity: var(--opac-apoio); transition: opacity var(--tempo-rapido) var(--curva-suave); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: calc(var(--esp-1) * -1); width: 0; height: var(--fio-fino); background: linear-gradient(90deg, var(--cor-framboesa), var(--cor-salvia)); transition: width var(--tempo-medio) var(--curva); }
.nav-link:hover, .nav-link[aria-current="true"] { opacity: 1; }
.nav-link:hover::after, .nav-link[aria-current="true"]::after { width: 100%; }
.nav__acoes { display: flex; align-items: center; gap: var(--esp-2); flex: none; }
@media (min-width: 1080px) { .nav { left: var(--esp-6); right: var(--esp-6); padding-left: var(--esp-6); } .nav__links { display: flex; } }
@media (max-width: 420px) { .nav__divisa, .nav__marca b { display: none; } }

/* ---------- menu em cortina (Riska: #menuOverlay, openMenu / closeMenu) ---------- */
#menuOverlay { position: fixed; inset: 0; z-index: var(--z-menu); width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--cor-tinta); color: var(--cor-papel); overflow-y: auto; }
#menuOverlay::backdrop { background: transparent; }
.menu__corpo { min-height: 100%; display: grid; align-content: space-between; gap: var(--esp-7); padding: var(--esp-5) var(--esp-gutter) var(--esp-7); }
.menu__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-4); }
.menu__lista { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--esp-1); }
.menu__lista a { display: grid; grid-template-columns: 3.2em 1fr; align-items: baseline; gap: var(--esp-4); padding: var(--esp-1) 0; text-decoration: none; font-family: var(--letra-titulo); font-size: var(--tam-h2); line-height: var(--lh-justo); letter-spacing: var(--tr-titulo); }
.menu__lista a span { font-family: var(--letra-rotulo); font-size: var(--tam-rotulo); letter-spacing: var(--tr-regua); color: var(--cor-po); }
.menu__lista a:hover em, .menu__lista a:focus-visible em { color: var(--cor-po); }
.menu__lista em { font-style: italic; transition: color var(--tempo-rapido) var(--curva-suave); }
.menu__lista .menu__item { opacity: 0; }
.menu__pe { max-width: var(--largura-texto); color: var(--cor-papel-a72); }

/* ---------- as pranchas: folhas empilhadas (Halftone: main > section sticky + setSheetTops) ---------- */
main > .prancha { position: sticky; top: 0; min-height: var(--altura-tela); box-shadow: var(--sombra-folha); }
main > .prancha:first-child { box-shadow: none; }
/* v3: o canto arredondado de cima mora no fundo da folha (::before), e a folha recorta reto.
   Recorte arredondado (overflow: clip + border-radius) obriga o Chrome a montar uma máscara do
   tamanho da folha para tudo o que tem camada própria lá dentro (cartão que desliza, vidro,
   o que se mexe). Numa folha mais alta que 16.384 px, como a de componentes da v3 com o acervo
   da v1, essa máscara não cabe e pedaços da folha somem. Fundo, grade e retícula fazem a curva
   sozinhos, sem máscara; a aparência é a mesma da v2. */
main > .prancha:not(:first-child) { background: none; }
main > .prancha:not(:first-child)::before { content: ""; position: absolute; inset: 0; z-index: var(--z-fundo); pointer-events: none; border-radius: var(--raio-prancha) var(--raio-prancha) 0 0; background-color: var(--cor-fundo); background-image: var(--folha-img); background-size: var(--tile-papel) var(--tile-papel); }
main > .prancha:not(:first-child)::after, main > .prancha:not(:first-child) > .tint-flood { border-radius: var(--raio-prancha) var(--raio-prancha) 0 0; }
.prancha { position: relative; isolation: isolate; padding: var(--esp-prancha) var(--esp-gutter); background-color: var(--cor-fundo); color: var(--cor-texto); overflow: clip; }
/* papel de prancha + grade que esmaece (Halftone: .blueprint e a máscara do .tint-flood) */
/* o papel já vem aplicado na imagem de cada folha (PREPARO/v2/folhas.py): nada de mesclar a folha inteira no navegador */
.prancha { background-size: var(--tile-papel) var(--tile-papel); }
[data-folha="papel"].prancha { --folha-img: url("../../v2/texturas/web/folha-papel.webp"); background-image: var(--folha-img); }
[data-folha="po"].prancha { --folha-img: url("../../v2/texturas/web/folha-po.webp"); background-image: var(--folha-img); }
[data-folha="salvia"].prancha { --folha-img: url("../../v2/texturas/web/folha-salvia.webp"); background-image: var(--folha-img); }
[data-folha="tinta"].prancha { --folha-img: url("../../v2/texturas/web/folha-tinta.webp"); background-image: var(--folha-img); }
[data-folha="noite"].prancha { --folha-img: url("../../v2/texturas/web/folha-noite.webp"); background-image: var(--folha-img); }
.prancha::after { content: ""; position: absolute; inset: 0; z-index: var(--z-fundo); pointer-events: none; opacity: var(--opac-grade); background-image: linear-gradient(var(--cor-grade) var(--fio-fino), transparent var(--fio-fino)), linear-gradient(90deg, var(--cor-grade) var(--fio-fino), transparent var(--fio-fino)); background-size: var(--passo-grade) var(--passo-grade); -webkit-mask-image: radial-gradient(60% 45% at 88% 8%, var(--mascara) 0%, transparent 100%); mask-image: radial-gradient(60% 45% at 88% 8%, var(--mascara) 0%, transparent 100%); }
.prancha__miolo { position: relative; max-width: var(--largura-max); margin-inline: auto; }
.prancha__regua { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--esp-2) var(--esp-5); padding-top: var(--esp-3); border-top: var(--fio-fino) solid var(--cor-fio-forte); }
.prancha__num { display: flex; align-items: baseline; gap: var(--esp-3); }
.prancha__num b { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-romano); line-height: var(--lh-justo); letter-spacing: var(--tr-titulo); color: var(--cor-titulo); }
.prancha__cab { display: grid; gap: var(--esp-5); margin-bottom: var(--esp-9); }
.prancha__titulo { max-width: var(--largura-titulo); margin-top: var(--esp-6); font-size: var(--tam-h1); }
.prancha__titulo em { display: block; }
.bloco { margin-top: var(--esp-9); }
.bloco__cab { display: grid; gap: var(--esp-3); margin-bottom: var(--esp-6); max-width: var(--largura-texto); }
.bloco__titulo { font-size: var(--tam-h3); }
.bloco__texto { color: var(--cor-texto-2); }
.grade { display: grid; gap: var(--esp-6); }
/* no máximo 2, 3 ou 4 colunas: a largura mínima nunca deixa caber uma a mais */
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--col-2), calc((100% - var(--esp-6)) / 2))), 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--col-3), calc((100% - 2 * var(--esp-6)) / 3))), 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--col-4), calc((100% - 3 * var(--esp-6)) / 4))), 1fr)); }
.figura { display: grid; gap: var(--esp-3); }
.figura__legenda { display: flex; align-items: baseline; gap: var(--esp-3); }
.figura__legenda .t-figura { flex: 1; }

/* orbes de luz (Veloura: .orb) e campo de retícula (Halftone: .tint-flood) no fundo das pranchas */
.orb { position: absolute; z-index: var(--z-fundo); width: var(--orbe); height: var(--orbe); border-radius: var(--raio-lente); background: radial-gradient(closest-side, var(--orb-cor, var(--cor-po)) 35%, transparent 100%); opacity: var(--opac-orbe); pointer-events: none; animation: orbe-anda var(--tempo-respira) var(--curva-suave) infinite alternate; }
.orb--salvia { --orb-cor: var(--cor-salvia-clara); }
.orb--luz { --orb-cor: var(--cor-luz); }
@keyframes orbe-anda { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8%, 6%, 0) scale(var(--orbe-cresce)); } }
.tint-flood { position: absolute; inset: 0; z-index: var(--z-fundo); pointer-events: none; opacity: var(--opac-reticula); background-image: radial-gradient(circle, var(--cor-flood) 1px, transparent 1.4px); background-size: var(--passo-flood) var(--passo-flood); -webkit-mask-image: radial-gradient(55% 60% at var(--flood-x, 18%) var(--flood-y, 30%), var(--mascara) 0%, transparent 100%); mask-image: radial-gradient(55% 60% at var(--flood-x, 18%) var(--flood-y, 30%), var(--mascara) 0%, transparent 100%); animation: flood-respira var(--tempo-respira) var(--curva-suave) infinite alternate; }
@keyframes flood-respira { from { opacity: var(--opac-reticula); } to { opacity: calc(var(--opac-reticula) * 1.8); } }

/* ---------- surgimento com desfoque (Veloura [data-reveal]; Riska .reveal-copy) e palavra por palavra ---------- */
.js [data-reveal], .js .reveal-copy { opacity: 0; transform: translateY(var(--esp-6)); transition: opacity var(--tempo-entra) var(--curva), transform var(--tempo-entra) var(--curva), filter var(--tempo-entra) var(--curva); transition-delay: var(--atraso, 0s); }
.js .reveal-copy { filter: blur(var(--desfoque-entra)); }
.js [data-reveal].is-in, .js .reveal-copy.is-in { opacity: 1; transform: none; filter: none; }
[data-movimento="pausado"] [data-reveal], [data-movimento="pausado"] .reveal-copy { opacity: 1; transform: none; filter: none; transition: none; }   /* pausado: o que ia entrar já está lá */
.word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.reveal-word { display: inline-block; }
#progress { position: fixed; left: 0; top: 0; z-index: var(--z-aviso); width: 100%; height: var(--fio-foco); transform-origin: left; transform: scaleX(0); background: var(--cor-framboesa); pointer-events: none; }

/* palavras que giram no lugar (Riska: #rotatingWords .kinetic-word) */
.giro { display: inline-grid; vertical-align: bottom; overflow: hidden; height: calc(var(--lh-sub) * 1em); min-width: var(--medida-giro); }
.giro .kinetic-word { grid-area: 1 / 1; color: var(--cor-destaque); font-style: italic; font-family: var(--letra-titulo); }
.js .giro .kinetic-word + .kinetic-word { opacity: 0; }

/* ---------- PRANCHA I · a abertura ---------- */
.abertura { position: relative; min-height: var(--altura-tela); display: grid; align-items: end; padding: calc(var(--esp-9) + var(--esp-6)) var(--esp-gutter) var(--esp-6); overflow: clip; isolation: isolate; background: var(--cor-tinta); color: var(--cor-papel); }
.abertura.prancha::after, .abertura__fundo.duo::before { content: none; }   /* na abertura, sem grade nem retícula: a luz precisa ler como luz */
.abertura__fundo.duo { position: absolute; inset: 0; z-index: var(--z-fundo); opacity: var(--opac-fundo-foto); }
.abertura__fundo.duo img { position: absolute; inset: 0; filter: var(--filtro-duo) blur(var(--desfoque-fundo)); transform: scale(var(--cresce-fundo)); }
.abertura__veu { position: absolute; inset: 0; z-index: var(--z-fundo); background: var(--degrade-tinta), var(--degrade-tinta-alto); }
.anel { position: absolute; inset: 0; z-index: var(--z-base); width: 100%; height: 100%; pointer-events: none; }
.anel--frente { z-index: var(--z-alto); }
.anel--css { opacity: 0; transition: opacity var(--tempo-lento) var(--curva-suave); background: radial-gradient(55% 42% at 100% 24%, var(--cor-luz-a40), transparent 72%); }
.anel--frente.anel--css { background: none; }
.anel--css.e-acesa { opacity: 1; }
.abertura__retrato { position: absolute; z-index: var(--z-alto); right: 6vw; bottom: 0; height: min(86svh, 56rem); aspect-ratio: var(--retrato-proporcao, 1335 / 2000); pointer-events: none; }
.abertura__retrato img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; -webkit-mask-image: var(--mascara-desce); mask-image: var(--mascara-desce); }
.abertura__retrato .retrato__cor, .demo-revela .retrato__cor { -webkit-mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 22%), var(--mascara) var(--lr, 0%), transparent calc(var(--lr, 0%) + var(--luz-borda))), var(--mascara-desce); mask-image: radial-gradient(circle at var(--lx, 50%) var(--ly, 22%), var(--mascara) var(--lr, 0%), transparent calc(var(--lr, 0%) + var(--luz-borda))), var(--mascara-desce); -webkit-mask-composite: source-in; mask-composite: intersect; }
.abertura__retrato .retrato__cor.e-revelada, .demo-revela .retrato__cor.e-revelada { -webkit-mask-image: var(--mascara-desce); mask-image: var(--mascara-desce); }
.abertura__legenda { display: inline-flex; align-items: center; gap: var(--esp-2); }
.abertura__legenda i { font-family: var(--letra-titulo); font-size: var(--tam-pequeno); }
.abertura__miolo { position: relative; z-index: var(--z-cima); display: grid; gap: var(--esp-5); width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-bottom: var(--esp-8); }
.abertura__titulo { max-width: var(--medida-abertura-titulo); font-size: var(--tam-perto); line-height: var(--lh-perto); letter-spacing: var(--tr-perto); color: var(--cor-papel); }
.abertura__titulo em { display: block; margin-top: var(--esp-2); font-size: var(--tam-h2); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo); color: var(--cor-po); }
.abertura__giro { max-width: var(--medida-frase); font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-sub); color: var(--cor-papel-a88); }
.abertura__texto { max-width: var(--medida-abertura); color: var(--cor-papel-a72); }
.abertura__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); }
.abertura__regua { position: absolute; z-index: var(--z-cima); left: var(--esp-gutter); right: var(--esp-gutter); bottom: var(--esp-5); display: flex; justify-content: space-between; gap: var(--esp-4); padding-top: var(--esp-3); border-top: var(--fio-fino) solid var(--cor-papel-a18); color: var(--cor-papel-a72); }
@media (max-width: 899px) {
  .abertura { align-items: end; padding-top: var(--abertura-texto-cel); }
  .abertura__retrato { right: 50%; transform: translateX(50%); height: var(--abertura-retrato-cel); top: var(--esp-9); bottom: auto; }
  .abertura { --luz-arco-raio: 0.26; --luz-arco-fora: 0.7; }
  .abertura__regua span:nth-child(2) { display: none; }
}
@media (min-width: 600px) and (max-width: 899px) { .abertura__retrato { height: min(56svh, 38rem); } }
@media (min-width: 900px) { .abertura { align-items: center; } .abertura__miolo { padding-bottom: 0; } }

/* ---------- a chamada numerada (o traço técnico das pranchas) ---------- */
.chamada { display: flex; align-items: flex-start; gap: var(--esp-2); color: var(--cor-texto); }
.chamada__num { display: grid; place-items: center; flex: none; width: var(--tam-chamada); height: var(--tam-chamada); border: var(--fio-fino) solid currentColor; border-radius: var(--raio-lente); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-justo); letter-spacing: var(--tr-zero); font-variant-numeric: tabular-nums; }
.chamada__txt { display: grid; gap: var(--esp-1); }
.chamada__txt b { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-style: italic; font-size: var(--tam-grande); line-height: var(--lh-sub); letter-spacing: var(--tr-zero); word-spacing: normal; }
.chamada__txt span { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-rotulo); letter-spacing: var(--tr-regua); word-spacing: normal; opacity: var(--opac-apoio); }
.fios { position: absolute; inset: 0; z-index: var(--z-cima); width: 100%; height: 100%; overflow: visible; pointer-events: none; color: currentColor; }
.fio { fill: none; stroke: currentColor; stroke-width: var(--fio-fino); vector-effect: non-scaling-stroke; }
.fio--ponto { fill: currentColor; stroke: none; }

/* ---------- a luz da lupa, sem WebGL: nas peças e no vídeo (a mesma da abertura, parada ou animada pelo GSAP) ----------
   A caixa é a peça inteira. --lf-y: a altura do rosto; --lf-r: o raio do anel (px da peça); --lf-corpo-x/y: o meio do busto,
   onde caem os pontos de luz da frente. O anel fica fora, à direita: só uma fatia entra pela borda. */
.luz-lupa { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.luz-lupa__feixe { position: absolute; inset: 0; background: radial-gradient(ellipse var(--lf-alcance) var(--lf-abre) at 100% var(--lf-y), var(--cor-luz-a40) 0%, var(--cor-luz-a18) 40%, transparent 72%); }
.luz-lupa__poeira { position: absolute; inset: 0; background: url("../../texturas/web/poeira-de-luz.webp") 0 0 / var(--lf-poeira); -webkit-mask-image: radial-gradient(ellipse var(--lf-alcance) var(--lf-abre) at 100% var(--lf-y), var(--mascara) 18%, transparent 70%); mask-image: radial-gradient(ellipse var(--lf-alcance) var(--lf-abre) at 100% var(--lf-y), var(--mascara) 18%, transparent 70%); }
.luz-lupa__arco { position: absolute; top: calc(var(--lf-y) - var(--lf-r)); right: calc(var(--lf-r) * -1.75); width: calc(var(--lf-r) * 2); height: calc(var(--lf-r) * 2); overflow: visible; color: var(--cor-luz); }
.luz-lupa__arco circle { fill: none; stroke: currentColor; stroke-width: var(--lf-fio); vector-effect: non-scaling-stroke; opacity: var(--lf-opac-arco); }
.luz-lupa__arco .halo { stroke: var(--cor-luz-a40); stroke-width: var(--lf-halo); opacity: var(--lf-opac-halo); }
.luz-lupa__boca { position: absolute; top: var(--lf-y); right: 0; width: calc(var(--lf-r) * 0.8); aspect-ratio: 1; transform: translate(50%, -50%); border-radius: var(--raio-lente); background: radial-gradient(closest-side, var(--cor-luz-a40), transparent); }
.luz-lupa--frente .luz-lupa__poeira { background-size: var(--lf-poeira-frente); -webkit-mask-image: radial-gradient(ellipse var(--lf-corpo-larg) var(--lf-corpo-alt) at var(--lf-corpo-x) var(--lf-corpo-y), var(--mascara) 25%, transparent 75%); mask-image: radial-gradient(ellipse var(--lf-corpo-larg) var(--lf-corpo-alt) at var(--lf-corpo-x) var(--lf-corpo-y), var(--mascara) 25%, transparent 75%); }

/* ---------- duotone (Halftone: .duo + variantes de tinta) ---------- */
.duo { position: relative; overflow: hidden; isolation: isolate; background: var(--duo-escura, var(--duo-sepia-escura)); transition: background-color var(--tempo-lento) var(--curva); }
.duo img { width: 100%; height: 100%; object-fit: cover; filter: var(--filtro-duo); mix-blend-mode: screen; }
.duo::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); background: var(--duo-clara, var(--duo-sepia-clara)); mix-blend-mode: multiply; pointer-events: none; transition: background-color var(--tempo-lento) var(--curva); border-radius: inherit; }
.duo::before { content: ""; position: absolute; inset: 0; z-index: var(--z-alto); mix-blend-mode: overlay; opacity: var(--opac-reticula); pointer-events: none; background-image: radial-gradient(circle, var(--cor-tinta-a72) var(--ponto-reticula), transparent calc(var(--ponto-reticula) + 0.3px)); background-size: var(--passo-reticula) var(--passo-reticula); border-radius: inherit; }
.duo-sepia { --duo-escura: var(--duo-sepia-escura); --duo-clara: var(--duo-sepia-clara); }
.duo-po { --duo-escura: var(--duo-po-escura); --duo-clara: var(--duo-po-clara); }
.duo-salvia { --duo-escura: var(--duo-salvia-escura); --duo-clara: var(--duo-salvia-clara); }
.duo-framboesa { --duo-escura: var(--duo-framboesa-escura); --duo-clara: var(--duo-framboesa-clara); }

/* ---------- a lupa (o gesto-assinatura) ---------- */
.lupa-demo { position: relative; overflow: hidden; border-radius: var(--raio-4); aspect-ratio: var(--proporcao-retrato); user-select: none; }
.lupa { touch-action: none; }
.lupa-demo > .duo { position: absolute; inset: 0; }
.lupa { position: absolute; left: var(--lx, 55%); top: var(--ly, 70%); width: var(--lupa-tam, 44%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: var(--raio-lente); overflow: hidden; cursor: grab; box-shadow: 0 0 0 var(--fio) var(--cor-luz), 0 0 var(--esp-6) var(--cor-luz-a70), var(--sombra-tinta); }
.lupa:active { cursor: grabbing; }
.lupa:focus-visible { outline-offset: var(--esp-2); border-radius: var(--raio-lente); }
.lupa__cor { position: absolute; left: 0; top: 0; max-width: none; object-fit: cover; }
.lupa::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 40% at 32% 22%, var(--cor-luz-a40), transparent 70%); pointer-events: none; }
.lupa-demo__dica { position: absolute; left: var(--esp-4); bottom: var(--esp-4); z-index: var(--z-cima); padding: var(--esp-1) var(--esp-3); border-radius: var(--raio-pilula); background: var(--cor-tinta-a72); color: var(--cor-papel); }

/* mapa da avaliação: o perfil do logo com as chamadas */
.mapa { position: relative; aspect-ratio: 850 / 660; width: 100%; max-width: var(--largura-mapa); color: var(--cor-tinta); }
.mapa .chamada { position: absolute; right: 65.9%; top: var(--y); transform: translateY(-50%); flex-direction: row-reverse; text-align: right; padding-right: var(--esp-2); }
.mapa .chamada__num { background: var(--cor-fundo); color: var(--cor-framboesa); }
@media (max-width: 520px) { .mapa .chamada__txt span { display: none; } .mapa .chamada__txt b { font-size: var(--tam-pequeno); } }
.lista-uso { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; }
.lista-uso b { font-weight: var(--peso-medio); color: var(--cor-texto); }
.anel-mostra { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--esp-6); min-height: var(--altura-demo); padding: var(--esp-6); border-radius: var(--raio-4); background: var(--cor-tinta); overflow: hidden; }
.anel-mostra__luz { position: absolute; left: 50%; top: 50%; width: var(--largura-luz); aspect-ratio: 1; transform: translate(-50%, -50%); background: url("../../v2/texturas/web/luz-do-anel.webp") center / contain no-repeat; mix-blend-mode: screen; opacity: var(--opac-apoio); pointer-events: none; }

/* tinteiro: as tintas trocadas ao vivo (Halftone: .picker + .pair-row) */
.tinteiro { display: grid; gap: var(--esp-5); align-items: start; }
@media (min-width: 900px) { .tinteiro { grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.7fr); } }
.tinteiro__foto { aspect-ratio: var(--proporcao-tinteiro); border-radius: var(--raio-4); }
.picker { display: grid; gap: var(--esp-2); padding: var(--esp-4); }
.picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-1); }
.pair-row { display: flex; align-items: center; gap: var(--esp-3); width: 100%; min-height: var(--alvo-toque); padding: var(--esp-2) var(--esp-3); border: var(--fio-fino) solid var(--cor-fio); border-radius: var(--raio-2); background: var(--cor-papel); color: var(--cor-tinta); text-align: left; cursor: pointer; font-family: var(--letra-rotulo); font-size: var(--tam-rotulo); letter-spacing: var(--tr-rotulo); word-spacing: normal; transition: transform var(--tempo-medio) var(--curva), border-color var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva); }
.pair-row:hover { transform: translateY(var(--sobe-leve)); border-color: var(--cor-framboesa); }
.pair-row[aria-pressed="true"] { border-color: var(--cor-framboesa); box-shadow: var(--sombra-acao); }
.pair-swatch { display: flex; flex: none; }
.pair-swatch span { width: var(--tam-chamada); height: var(--tam-chamada); border-radius: var(--raio-lente); border: var(--fio-foco) solid var(--cor-papel-alto); }
.pair-swatch span + span { margin-left: calc(var(--esp-3) * -1); }
.pair-row small { display: block; color: var(--cor-marrom-medio); font-size: var(--tam-legenda); }
.pair-row .check { margin-left: auto; display: grid; place-items: center; width: var(--icone-check); height: var(--icone-check); border-radius: var(--raio-lente); border: var(--fio-fino) solid var(--cor-framboesa); color: var(--cor-framboesa); opacity: 0; }
.pair-row[aria-pressed="true"] .check { opacity: 1; }
.pair-row .check svg { width: var(--icone-check-dentro); height: var(--icone-check-dentro); }

/* em cor, só você: o par lado a lado */
.foto-cor { overflow: hidden; }
.foto-cor img { width: 100%; height: 100%; object-fit: cover; }

/* folhas em miniatura (o gesto da folha) */
.folhas-demo { position: relative; height: var(--altura-demo); border-radius: var(--raio-3); overflow: hidden; background: var(--cor-tinta-a06); }
.folhas-demo__folha { position: absolute; left: var(--esp-5); right: var(--esp-5); height: 70%; padding: var(--esp-4); border-radius: var(--raio-3) var(--raio-3) 0 0; box-shadow: var(--sombra-folha); }
.folhas-demo__folha:nth-child(1) { top: var(--esp-5); background: var(--cor-papel-alto); }
.folhas-demo__folha:nth-child(2) { top: 30%; background: var(--cor-po); }
.folhas-demo__folha:nth-child(3) { top: 55%; background: var(--cor-salvia-clara); }

/* ---------- PRANCHA II · a marca ---------- */
.logo-placa { position: relative; display: grid; place-items: center; gap: var(--esp-4); min-height: var(--altura-placa); padding: var(--esp-7) var(--esp-5) var(--esp-5); border-radius: var(--raio-3); background: var(--cor-fundo); color: var(--cor-texto); overflow: hidden; }
.logo-placa > svg { width: min(100%, var(--logo-larg, 14rem)); height: auto; }
.logo-placa figcaption { justify-self: start; width: 100%; padding-top: var(--esp-3); border-top: var(--fio-fino) solid var(--cor-fio); }
.logo-clinica { aspect-ratio: 1070 / 985; }
.logo-clinica-h { aspect-ratio: 1604.8 / 404; }   /* a clínica na horizontal (fig. 2.5) */
.logo-grazy { aspect-ratio: 930 / 385; }
.numeros { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartao-min-p)), 1fr)); }
.numero { display: grid; gap: var(--esp-2); padding-top: var(--esp-4); border-top: var(--fio-fino) solid var(--cor-fio-forte); }
.numero .t-numeral { color: var(--cor-titulo); }
.nao-faca { display: grid; gap: var(--esp-2); }
.nao-faca__amostra { position: relative; display: grid; place-items: center; aspect-ratio: var(--proporcao-foto); border-radius: var(--raio-3); overflow: hidden; background: var(--cor-papel-alto); }
.nao-faca__amostra svg { width: 55%; height: auto; }
.nao-faca__amostra::after { content: ""; position: absolute; inset: var(--esp-3); border-radius: var(--raio-2); background: linear-gradient(to top right, transparent calc(50% - var(--fio-fino)), var(--cor-framboesa) calc(50% - var(--fio-fino)), var(--cor-framboesa) calc(50% + var(--fio-fino)), transparent calc(50% + var(--fio-fino))); opacity: var(--opac-veu-cor); }

/* ---------- PRANCHA IV · letra ---------- */
.especime { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--peca-min)), 1fr)); }
.especime__item { display: grid; gap: var(--esp-3); align-content: start; padding: var(--esp-5); border-radius: var(--raio-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); }
.especime__aa { font-size: var(--tam-h1); line-height: var(--lh-justo); color: var(--cor-titulo); white-space: nowrap; }
.escala-wrap { overflow-x: auto; }
.escala { width: 100%; border-collapse: collapse; }
.escala th, .escala td { padding: var(--esp-4) var(--esp-3) var(--esp-4) 0; border-bottom: var(--fio-fino) solid var(--cor-fio); text-align: left; vertical-align: baseline; }
.escala th { font-weight: var(--peso-normal); }
.escala td { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); color: var(--cor-texto-2); white-space: nowrap; word-spacing: normal; }
.escala__papel { width: 100%; }
@media (max-width: 719px) { .escala td.escala__oculta { display: none; } }
.escala code, .tabela code { white-space: nowrap; }

/* ---------- PRANCHA V · cor ---------- */
.familia { margin-top: var(--esp-7); }
.familia__titulo { margin-bottom: var(--esp-4); font-size: var(--tam-h4); }
.amostras { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cartao-min-p)), 1fr)); }
.amostra { display: grid; align-content: start; gap: var(--esp-3); padding: var(--esp-3); border-radius: var(--raio-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); }
.amostra__cor { display: flex; align-items: flex-end; justify-content: space-between; min-height: var(--altura-amostra); padding: var(--esp-3); border-radius: var(--raio-2); background: var(--c); color: var(--ct); font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-justo);  box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-fio);}
.amostra__cor small { font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); }
.amostra__dados { display: grid; gap: var(--esp-1); margin: 0; font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); word-spacing: normal; }
.amostra__dados div { display: flex; justify-content: space-between; gap: var(--esp-3); }
.amostra__dados dt { color: var(--cor-texto-2); }
.amostra__dados dd { margin: 0; text-align: right; }
.amostra__opac { display: flex; height: var(--esp-4); border-radius: var(--raio-1); overflow: hidden; }
.amostra__opac i { flex: 1; background: color-mix(in srgb, var(--c) var(--o), transparent); }
.amostra__uso { font-size: var(--tam-pequeno); line-height: var(--lh-rotulo); color: var(--cor-texto-2); }
.copiar { padding: 0; border: 0; background: none; cursor: pointer; text-decoration: underline; text-decoration-color: var(--cor-fio-forte); text-underline-offset: 0.2em; }
.copiar:hover { text-decoration-color: currentColor; }
.tintas { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartao-min)), 1fr)); }
.tinta { display: grid; gap: var(--esp-2); }
.tinta .duo { aspect-ratio: var(--proporcao-foto); border-radius: var(--raio-3); }
.degrades { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--cartao-min-p)), 1fr)); }
.degrades .figura { align-content: start; }   /* o quadro não estica quando a legenda é curta */
.degrade { min-height: var(--altura-amostra); border-radius: var(--raio-3); }
.tabela-wrap { overflow-x: auto; border-radius: var(--raio-3); padding: var(--esp-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--tam-pequeno); }
.tabela th, .tabela td { padding: var(--esp-3); border-bottom: var(--fio-fino) solid var(--cor-fio); text-align: left; vertical-align: middle; }
.tabela th { font-family: var(--letra-rotulo); font-weight: var(--peso-normal); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); color: var(--cor-texto-2); }
.par { display: inline-grid; place-items: center; width: var(--tam-lente-icone); height: var(--tam-icone-vidro); border-radius: var(--raio-1); background: var(--pf); color: var(--pt); font-family: var(--letra-titulo); font-size: var(--tam-h6); }
.nota { display: inline-block; padding: 0 var(--esp-2); border: var(--fio-fino) solid var(--cor-fio-forte); border-radius: var(--raio-pilula); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); }
.nota[data-nivel="falha"] { color: var(--cor-framboesa); border-color: currentColor; text-decoration: line-through; }

/* ---------- PRANCHA VI · texturas ---------- */
.texturas { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cartao-min-g)), 1fr)); }
.textura { display: grid; grid-template-rows: auto 1fr; border-radius: var(--raio-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); overflow: hidden; }
.textura__amostra { position: relative; aspect-ratio: var(--proporcao-foto); background-color: var(--cor-papel); background-size: cover; background-position: center; }
.textura__amostra--escuro { background-color: var(--cor-tinta); }
.textura__corpo { display: grid; align-content: start; gap: var(--esp-2); padding: var(--esp-4); }
.textura__corpo h3 { font-size: var(--tam-h5); }
.tx-papel { background-image: url("../../v2/texturas/web/papel-de-prancha.webp"); background-size: var(--tile-papel) var(--tile-papel); }
.tx-grade { background-image: url("../../v2/texturas/web/grade.webp"), url("../../v2/texturas/web/papel-de-prancha.webp"); background-size: var(--tile-papel) var(--tile-papel), var(--tile-papel) var(--tile-papel); }
.tx-reticula { background-color: var(--cor-po); background-image: url("../../v2/texturas/web/reticula.webp"); background-size: var(--tile-grao) var(--tile-grao);   /* o arquivo de 512 px em tamanho real: um ponto a cada 4 px */ }
.tx-vegetal { overflow: hidden; }
.tx-vegetal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tx-vegetal::after { content: ""; position: absolute; inset: 0 0 0 38%; background-image: url("../../v2/texturas/web/vegetal.webp"); background-size: cover; box-shadow: calc(var(--esp-2) * -1) 0 var(--esp-5) var(--cor-tinta-a10); }
.tx-anel { background-image: url("../../v2/texturas/web/luz-do-anel.webp"); background-size: contain; background-repeat: no-repeat; }
.tx-poeira { background-image: url("../../texturas/web/poeira-de-luz.webp"), radial-gradient(ellipse 80% 40% at 100% 40%, var(--cor-luz-a18), transparent 70%); background-size: var(--lf-poeira), auto; }
.tx-brilho { background-image: url("../../v2/texturas/web/brilho-de-lente.webp"); background-size: 140% auto; background-repeat: no-repeat; }
.tx-grao { background-image: url("../../texturas/web/grao-fino.webp"); background-size: var(--tile-grao) var(--tile-grao); }
/* os quatro juntos: papel, tinta, vegetal e lupa */
.figura--camadas { width: 100%; max-width: var(--largura-figura); margin-inline: auto; }
/* medidas em cqw (1% da largura da figura), para a lupa casar com a foto em qualquer tela */
.camadas { position: relative; container-type: inline-size; aspect-ratio: var(--proporcao-larga); width: 100%; overflow: hidden; border-radius: var(--raio-3); background: var(--cor-papel) url("../../v2/texturas/web/papel-de-prancha.webp") 0 0 / var(--tile-papel) var(--tile-papel); box-shadow: var(--sombra-papel); color: var(--cor-tinta); }
.camadas__foto.duo { position: absolute; left: 6cqw; top: 5.333cqw; width: 52cqw; height: 56cqw; border-radius: var(--raio-3); }
.camadas__vegetal { position: absolute; top: 0; right: 0; bottom: 0; left: 44cqw; background: url("../../v2/texturas/web/vegetal.webp") center / cover; box-shadow: calc(var(--esp-2) * -1) 0 var(--esp-5) var(--cor-tinta-a10); }
.camadas__lente { position: absolute; left: 21cqw; top: 20cqw; width: 22cqw; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio-lente); box-shadow: 0 0 0 var(--fio-foco) var(--cor-luz), 0 0 var(--esp-6) var(--cor-luz-a70), var(--sombra-papel); }
.camadas__lente img { position: absolute; left: -30.6cqw; top: -47.66cqw; width: 83.2cqw; height: 124.8cqw; max-width: none; }
.camadas__fios { color: var(--cor-tinta); }
.camadas .ponto { position: absolute; left: 39.78cqw; top: 23.21cqw; width: var(--esp-2); height: var(--esp-2); border-radius: var(--raio-lente); background: var(--cor-tinta); transform: translate(-50%, -50%); z-index: var(--z-cima); }
.camadas__chamada { position: absolute; left: 71cqw; top: 9cqw; right: 3cqw; z-index: var(--z-cima); }
@media (max-width: 699px) { .camadas__chamada .chamada__txt span { display: none; } }
.textura__baixar { justify-self: start; }

/* ---------- PRANCHA VIII · ícones ---------- */
.icones { display: grid; gap: var(--esp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-icone)), 1fr)); }
.icone-cel { display: grid; place-items: center; gap: var(--esp-2); padding: var(--esp-4) var(--esp-2); border-radius: var(--raio-2); background: var(--cor-superficie); text-decoration: none; font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); word-spacing: normal; color: var(--cor-texto-2); transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva); }
.icone-cel:hover { transform: translateY(var(--sobe-leve)); box-shadow: var(--sombra-papel-baixa); color: var(--cor-texto); }
.icone-cel .icone { width: var(--icone-grande); height: var(--icone-grande); color: var(--cor-marrom); }
.icone-lente { display: grid; place-items: center; width: var(--tam-lente-icone); height: var(--tam-lente-icone); border-radius: var(--raio-lente); background: var(--cor-po-a60); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-marrom-a18); color: var(--cor-tinta); }
.icone-lente .icone { width: var(--icone); height: var(--icone); }

/* ---------- PRANCHA IX · animações ---------- */
.anims { display: grid; gap: var(--esp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cartao-min-g)), 1fr)); }
.anim { display: grid; grid-template-rows: var(--altura-palco-anim) auto; border-radius: var(--raio-3); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); overflow: hidden; }
.anim__palco { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--cor-papel); }
.anim__palco--escuro { background: var(--cor-tinta); color: var(--cor-papel); }
.anim__corpo { display: flex; flex-direction: column; gap: var(--esp-2); padding: var(--esp-4); }
.anim__corpo .btn { margin-top: auto; }   /* o Repetir alinha pela base em toda a linha */
.anim__corpo h3 { font-size: var(--tam-h6); }

/* ---------- PRANCHA XIII · tokens ---------- */
.tokens__acoes { display: flex; flex-wrap: wrap; gap: var(--esp-3); margin-bottom: var(--esp-6); }
.tokens__grupos { display: grid; gap: var(--esp-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col-tokens)), 1fr)); }
.tokens__grupo h3 { display: flex; justify-content: space-between; margin-bottom: var(--esp-3); font-size: var(--tam-h6); }
.tokens__lista { display: grid; gap: var(--esp-1); margin: 0; padding: 0; list-style: none; font-size: var(--tam-legenda); }
.tokens__lista li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--esp-3); padding: var(--esp-1) 0; border-bottom: var(--fio-fino) solid var(--cor-fio); }
.tokens__lista span { display: flex; align-items: center; gap: var(--esp-2); overflow-wrap: anywhere; font-family: var(--letra-rotulo); color: var(--cor-texto-2); letter-spacing: var(--tr-regua); word-spacing: normal; }
.tokens__lista .copiar { justify-self: start; text-align: left; overflow-wrap: anywhere; }
.tokens__bola { flex: none; width: var(--esp-4); height: var(--esp-4); border-radius: var(--raio-lente); box-shadow: inset 0 0 0 var(--fio-fino) var(--cor-fio-forte); }
.bloco-codigo { max-height: var(--altura-codigo); overflow: auto; margin: 0; padding: var(--esp-5); border-radius: var(--raio-3); background: var(--cor-tinta); color: var(--cor-papel); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); line-height: var(--lh-texto); letter-spacing: var(--tr-regua); white-space: pre; word-spacing: normal; }

/* ---------- rodapé ---------- */
.rodape { position: relative; display: grid; gap: var(--esp-5); justify-items: center; padding: var(--esp-9) var(--esp-gutter) var(--esp-7); background: var(--cor-tinta); color: var(--cor-papel-a72); text-align: center; }
.rodape svg { width: min(60vw, var(--largura-logo-pe)); color: var(--cor-papel); }
.rodape p { max-width: var(--largura-texto); }

/* ---------- movimento que pausa e "reduzir movimento" ---------- */
[data-movimento="pausado"] .orb, [data-movimento="pausado"] .tint-flood, [data-movimento="pausado"] .animate-marquee { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .tint-flood, .animate-marquee { animation: none !important; }
  .js [data-reveal], .js .reveal-copy { opacity: 1; transform: none; filter: none; transition: none; }
  .js .giro .kinetic-word + .kinetic-word { display: none; }
  .nav, .janela[open], .photo img, .card-hover, .card-hover img, .card-hover::after, .reveal-link::after { transition: none; animation: none; }
}

/* ---------- o que não fazer: os erros usam os tokens de erro ---------- */
.nao-faca__dourado { color: var(--erro-dourado); filter: drop-shadow(0 var(--esp-1) var(--esp-2) var(--erro-sombra)); }
.nao-faca__anel-dourado { width: 60%; box-shadow: 0 0 0 var(--esp-1) var(--erro-dourado), 0 0 var(--esp-6) var(--erro-dourado-luz); }
.nao-faca__amostra--tinta { background: var(--cor-tinta); }
.nao-faca__duo { position: absolute; inset: 0; }
.nao-faca__amostra::after { z-index: var(--z-cima); }   /* o risco fica por cima de tudo */
.nao-faca__amostra .nao-faca__logo-duo { position: relative; z-index: var(--z-alto); color: var(--duo-po-escura); mix-blend-mode: multiply; opacity: var(--opac-apoio); }
.nao-faca__amostra--foto { background: url("../../v2/fotos/pente.webp") center / cover; }

/* ---------- a folha coberta: quando a seguinte já passou por cima, ela sai da pintura e pausa o que se mexe ---------- */
main > .prancha.e-coberta { opacity: 0; }
.prancha.e-coberta :is(.orb, .tint-flood, .animate-marquee, .spinner) { animation-play-state: paused; }

/* ---------- posições dos orbes e peças pequenas (antes em estilo solto no HTML) ---------- */
.orb--alto-dir { top: calc(var(--orb-recuo) * -0.75); right: calc(var(--orb-recuo) * -1); }
.orb--meio-dir { top: 30%; right: calc(var(--orb-recuo) * -1.25); }
.orb--baixo-esq { bottom: 10%; left: calc(var(--orb-recuo) * -1.25); }
.orb--alto-esq { top: 10%; left: calc(var(--orb-recuo) * -1); }
.orb--topo { top: calc(var(--orb-recuo) * -1); right: 10%; }
.orb--fraco { opacity: var(--opac-orbe-escuro); }
.selo-lente.selo-lente--g { width: var(--selo-g); }
.selo-lente.selo-lente--m { width: var(--selo-m); }
.selo-lente.selo-lente--p { width: var(--selo-p); }
.selo-lente.selo-lente--chip { width: var(--selo-chip); }
.icone-lente__marca { width: var(--marca-na-lente); height: auto; }
.figura__quadro { aspect-ratio: var(--proporcao-retrato); border-radius: var(--raio-3); }
.demo-surge, .demo-palavras, .demo-contador .t-numeral { color: var(--cor-tinta); }
.demo-palavras { text-align: center; padding: 0 var(--esp-4); }
.demo-revela { position: relative; height: 100%; aspect-ratio: var(--proporcao-recorte); }
.demo-revela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.demo-chamada { position: relative; width: 80%; height: 70%; }
.demo-chamada .fios { color: var(--cor-framboesa); }
.demo-chamada .chamada { position: absolute; right: 0; top: 0; }
.demo-foco, .demo-folha { overflow: hidden; }
.demo-foco img, .demo-corte img { width: 100%; height: 100%; object-fit: cover; }
.demo-corte img { position: absolute; inset: 0; }
.demo-folha .folhas-demo { height: 100%; width: 100%; }
.demo-corte .hero-wipe { position: absolute; inset: 0; background: var(--cor-framboesa-funda); mix-blend-mode: multiply; clip-path: ellipse(120% 90% at 50% 100%); }