/* =========================================================================
   DE PERTO · v3 · o acervo da v1 (o Contorno) dentro do De perto.
   As classes têm o nome que já tinham na v1 e nas referências:
   Lunar (.zen-btn + beam-spin), Riska
   (.image-curtain, .story-panel, .panel-parallax), Veloura (.story-step,
   .sonar, .marquee-track, #wordmark), Halftone (.grain-frame).
   As cores são as da v3: creme vira papel, cacau vira tinta, nude vira
   rosa-pó, o ponto magenta vira framboesa (o magenta fica só no logo).
   Tudo que se mexe sozinho para no botão de pausa, com a folha coberta e
   com "reduzir movimento".
   ========================================================================= */

:root {
  /* 6.9 Acervo da v1 · forma */
  --raio-squircle: 1.75rem;    /* a caixa da ficha, da v1 */
  --raio-arco: 999px 999px var(--raio-squircle) var(--raio-squircle);   /* o espelho em arco */
  --raio-seixo: 48% 52% 46% 54% / 56% 50% 50% 44%;                      /* o espelho orgânico da clínica */
  --tracejado: 3 5;            /* o círculo do lápis */
  /* 6.10 Acervo da v1 · tempo */
  --tempo-traco: 2.6s;         /* a linha e a asa se desenhando */
  --tempo-feixe: 3.2s;         /* uma volta do feixe na borda do botão */
  --tempo-gira: 32s;           /* uma volta do selo de texto */
  --tempo-faixa: 42s;          /* a faixa corrida dos tratamentos */
  --tempo-luz: 6s;             /* a luz de fim de tarde que respira */
  /* 6.11 Acervo da v1 · efeito e medida */
  --cor-feixe: var(--cor-po);           /* rosa-pó no claro, o nude da v1 */
  --feixe-sombra: 300deg;      /* quanto da volta o feixe fica apagado */
  --desfoque-veu: 0.875rem;
  --cresce-leve: 1.03;
  --sonar-cresce: 2.6;
  --nome-de: 0.82;             /* o nome que se forma começa em 82% */
  --opac-palavra: 0.12;
  --opac-veneziana: 0.16;
  --tam-palavra-fundo: clamp(4rem, 2rem + 9vw, 9rem);
  --tam-palavra-larga: clamp(3.5rem, 1.5rem + 6vw, 7.5rem);   /* na peça larga, com respiro nas bordas */
  --tam-wordmark: clamp(3.2rem, 0.5rem + 11.6vw, 13rem);
  --selo-giro: 8.5rem;
  --selo-giro-g: 12rem;
  --selo-letra-giro: 11px;     /* no desenho de 100 × 100 do selo */
  --memcard: 24rem;
  --memcard-proporcao: 85.6 / 54;
  --passo-alto: 60vh;
  --passo-alto-g: 90vh;
  --painel-alto: 150vh;
  --cmp-inicio: 50%;
  --fio-campo: var(--fio);
  --campo-sublinhado: var(--tam-h5);
  --tile-pequeno: 256px;
  --rotulo-max: 12rem;
  --rotulo-demo: 10rem;
  --recuo-italico: 4vw;          /* a segunda linha em itálico entra um pouco (Riska) */
  --painel-media-cel: 70vh;      /* a foto do painel no celular */
  --sublinha-desce: -0.3em;      /* o traço à mão fica logo abaixo da palavra */
  --sublinha-alto: 0.5em;
  --zoom-costas: 1.32;           /* a foto de costas no espelho, mais perto do rosto */
  --memcard-logo: 3.4rem;
  --vidro-saturacao: 1.15;
}

/* ==================== botões: a pílula e o feixe que corre ==================== */
.btn { border-radius: var(--raio-pilula); }   /* o arredondamento da v1, em toda a v3 */
/* o principal é o .zen-btn da Lunar: um feixe de luz dá a volta na borda (beam-spin) */
.btn-ink, .zen-btn { overflow: hidden; isolation: isolate; }
.btn-ink.btn, .zen-btn.btn { background: transparent; }
.btn-ink::before, .zen-btn::before { content: ""; position: absolute; inset: -150%; z-index: -2; background: conic-gradient(from 0deg, transparent 0 var(--feixe-sombra), var(--cor-feixe) 360deg); animation: beam-spin var(--tempo-feixe) linear infinite; }
.btn-ink::after, .zen-btn::after { content: ""; position: absolute; inset: var(--fio); z-index: -1; border-radius: inherit; background: var(--cor-acao); transition: background-color var(--tempo-rapido) var(--curva-suave); }
.btn-ink:active::after, .btn-ink.e-apertado::after { background: var(--cor-tinta-a88); }
@keyframes beam-spin { to { transform: rotate(360deg); } }
[data-folha="tinta"] .btn-ink, [data-folha="noite"] .btn-ink, .abertura .btn-ink, .anim__palco--escuro .btn-ink { --cor-feixe: var(--cor-luz); }   /* no escuro, a luz pêssego brilha */
[data-folha="tinta"] .btn-ink:active::after, [data-folha="noite"] .btn-ink:active::after { background: var(--cor-po); }
.btn-ink:disabled::before, .btn-ink[aria-disabled="true"]::before, .btn-ink.e-carregando::before { animation: none; opacity: 0; }
/* o botão redondo da v1 (para "rolar", "ver mais") */
.botao-redondo { display: inline-grid; place-items: center; width: var(--btn-anel); height: var(--btn-anel); border: var(--fio-fino) solid currentColor; border-radius: var(--raio-lente); background: transparent; color: var(--cor-texto); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); text-align: center; text-decoration: none; cursor: pointer; word-spacing: normal; transition: background-color var(--tempo-rapido) var(--curva-suave), color var(--tempo-rapido) var(--curva-suave); }
.botao-redondo:hover { background: var(--cor-texto); color: var(--cor-fundo); }

/* ==================== campos: o sublinhado em SandeMore, da v1 ==================== */
.entrada { min-height: var(--alvo-toque); padding: var(--esp-3) 0; border: 0; border-bottom: var(--fio-campo) solid var(--cor-borda-campo); border-radius: 0; background: transparent; color: var(--cor-texto); font-family: var(--letra-titulo); font-size: var(--campo-sublinhado); line-height: var(--lh-sub); }
.entrada::placeholder { color: var(--cor-texto-2); opacity: var(--opac-desligado); }
.entrada:hover { border-color: var(--cor-texto); }
.entrada:focus-visible, .entrada.e-foco { outline: none; border-bottom-color: var(--cor-foco); box-shadow: 0 var(--fio-foco) 0 var(--cor-foco); }
textarea.entrada { font-family: var(--letra-texto); font-size: var(--tam-texto); line-height: var(--lh-texto); }
select.entrada { padding-right: var(--esp-6); background-position: calc(100% - var(--esp-3)) 52%, calc(100% - var(--esp-2)) 52%; }
.campo.e-erro .entrada { border-bottom-color: var(--cor-framboesa); }
.campo__erro:not(:empty)::before { content: ""; display: inline-block; width: var(--esp-2); height: var(--esp-2); margin-right: var(--esp-2); border-radius: var(--raio-lente); background: currentColor; vertical-align: middle; }
/* a variação em caixa (o campo da v2): formulário longo e campo sobre foto */
.entrada--caixa { padding: var(--esp-3) var(--esp-4); border: var(--fio-fino) solid var(--cor-borda-campo); border-radius: var(--raio-2); background: var(--cor-papel-alto); color: var(--cor-tinta); font-family: var(--letra-texto); font-size: var(--tam-texto); }
.entrada--caixa:focus-visible, .entrada--caixa.e-foco { outline: var(--fio-foco) solid var(--cor-framboesa); outline-offset: var(--fio-foco); box-shadow: none; }
/* caixinha, bolinha e chave desenhadas (da v1): a chave é todo input com role="switch" */
.opcao { align-items: center; min-height: var(--alvo-toque); }
.opcao input[type="checkbox"], .opcao input[type="radio"] { appearance: none; display: grid; place-items: center; margin: 0; border: var(--fio) solid var(--cor-borda-campo); border-radius: var(--raio-1); background: var(--cor-papel-alto); cursor: pointer; transition: background-color var(--tempo-rapido) var(--curva-suave), border-color var(--tempo-rapido) var(--curva-suave); }
.opcao input[type="radio"] { border-radius: var(--raio-lente); }
.opcao input:checked { border-color: var(--cor-framboesa); background: var(--cor-framboesa); }
.opcao input[type="checkbox"]:checked::after { content: ""; width: 45%; height: 25%; border-left: var(--fio) solid var(--cor-papel); border-bottom: var(--fio) solid var(--cor-papel); transform: translateY(-15%) rotate(-45deg); }
.opcao input[type="radio"]:checked { box-shadow: inset 0 0 0 calc(var(--fio) * 2) var(--cor-papel-alto); }
.opcao input[role="switch"], .chave { position: relative; display: block; flex: none; width: calc(var(--alvo-toque) * 1.1); height: calc(var(--icone) * 1.3); border: 0; border-radius: var(--raio-pilula); background: var(--cor-marrom-a30); }
.opcao input[role="switch"]::after, .chave::after { content: ""; position: absolute; top: 50%; left: var(--esp-1); width: var(--icone); height: var(--icone); border-radius: var(--raio-lente); background: var(--cor-papel-alto); box-shadow: var(--sombra-contato); transform: translateY(-50%); transition: transform var(--tempo-medio) var(--curva); }
.opcao input[role="switch"]:checked, .chave:checked { background: var(--cor-framboesa); box-shadow: none; }
.opcao input[role="switch"]:checked::after, .chave:checked::after { border: 0; width: var(--icone); height: var(--icone); transform: translate(calc(var(--alvo-toque) * 1.1 - var(--icone) - var(--esp-2)), -50%); }
[data-folha="tinta"] .opcao input[role="switch"], [data-folha="noite"] .opcao input[role="switch"] { background: var(--cor-papel-a30); }
.campos-grupo { display: grid; gap: var(--esp-2); margin: 0; padding: 0; border: 0; }
.campos-grupo legend { margin-bottom: var(--esp-2); font-family: var(--letra-rotulo); font-weight: var(--peso-medio); font-size: var(--tam-pequeno); letter-spacing: var(--tr-rotulo); word-spacing: normal; }

/* ==================== a janela com o menu de interesse (da v1) ==================== */
.janela__titulo { font-size: var(--tam-h3); }
.janela__titulo em { color: var(--cor-framboesa); }
.janela .spec { margin-top: var(--esp-2); }

/* ==================== pílulas, marca-texto e sonar (da v1) ==================== */
.pilula--contorno { background: transparent; color: currentColor; box-shadow: inset 0 0 0 var(--fio) currentColor; }
.pilula--antes { background: var(--cor-po); color: var(--cor-tinta); font-family: var(--letra-titulo); font-style: italic; font-size: var(--tam-grande); letter-spacing: var(--tr-zero); }
.marca-texto { padding: 0 var(--esp-1); background: var(--cor-framboesa); color: var(--cor-papel); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sonar-ponto { position: relative; display: inline-flex; width: var(--esp-2); height: var(--esp-2); color: var(--cor-destaque); }
.sonar-ponto i { position: relative; width: 100%; height: 100%; border-radius: var(--raio-lente); background: currentColor; }
.sonar { position: absolute; inset: 0; }
.sonar::before, .sonar::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio-lente); border: var(--fio-fino) solid currentColor; animation: sonar calc(var(--tempo-feixe) * 0.75) ease-out infinite; }
.sonar::after { animation-delay: calc(var(--tempo-feixe) * 0.375); }
@keyframes sonar { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(var(--sonar-cresce)); opacity: 0; } }

/* ==================== gestos da v1, na prancha ==================== */
.gestos-v1 { display: grid; gap: var(--esp-7); }
.gestos-v1__par, .gestos-v1__col { display: grid; gap: var(--esp-6); align-content: start; }
/* duas colunas que fecham juntas: à esquerda as fotos em pé, à direita três peças mais baixas */
@media (min-width: 900px) { .gestos-v1__par { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gesto--selo .gesto__palco { aspect-ratio: 1; }
@media (min-width: 900px) { .gesto--inverso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); } .gesto--inverso .gesto__texto { order: -1; } }
.gesto--largo .palavra-fundo { aspect-ratio: var(--proporcao-foto); }
.gesto--largo .palavra-fundo img { width: auto; height: 96%; }
.gesto--largo .palavra-fundo__texto { font-size: var(--tam-palavra-larga); }
.gesto { display: grid; gap: var(--esp-4); align-content: start; }
.gesto--largo { gap: var(--esp-5); }
@media (min-width: 900px) { .gesto--largo { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; } }
.gesto__palco { position: relative; min-height: var(--altura-palco-anim); padding: var(--esp-5); border-radius: var(--raio-squircle); overflow: hidden; background: var(--cor-papel-alto); box-shadow: var(--sombra-papel-baixa); }
.gesto__palco--foto { padding: 0; background: none; box-shadow: none; }
.gesto__palco--duplo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-3); padding: 0; background: none; box-shadow: none; }
.gesto__palco--escuro { display: grid; place-items: center; background: var(--cor-tinta); color: var(--cor-papel); }
.gesto__texto { display: grid; gap: var(--esp-2); }
.gesto__texto h3 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2); font-size: var(--tam-h4); line-height: var(--lh-sub); }
.gesto__texto p { color: var(--cor-texto-2); }
.gesto__repetir { position: absolute; left: var(--esp-5); bottom: var(--esp-4); }
button.reveal-link { border: 0; background: none; color: inherit; font-size: inherit; cursor: pointer; }   /* o link que é botão: sem a caixa cinza do navegador */
/* a linha que vira asa: qualquer traço que se desenha */
.traco { fill: none; stroke: currentColor; stroke-width: var(--fio); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.traco--tracejado { stroke-dasharray: var(--tracejado); }
.traco--framboesa { stroke: var(--cor-framboesa); }
.asa__traco { fill: none; stroke: currentColor; stroke-width: var(--fio); vector-effect: non-scaling-stroke; }
.asa__cheio { fill: currentColor; opacity: 0; }
.gesto-asa, .demo-asa { width: 100%; height: auto; color: var(--cor-marrom); overflow: visible; }
/* a marcação: o lápis da avaliação (ponto, círculo tracejado e o nome da região) */
.marcacao { position: relative; overflow: hidden; border-radius: var(--raio-squircle); isolation: isolate; }
.marcacao img { width: 100%; height: 100%; object-fit: cover; }
.marcacao__desenho { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cor-papel); overflow: visible; }
.marcacao__ponto { fill: var(--cor-framboesa); stroke: var(--cor-papel); stroke-width: var(--fio); vector-effect: non-scaling-stroke; }
.marcacao__rotulo { position: absolute; z-index: var(--z-alto); display: grid; gap: var(--esp-1); max-width: var(--rotulo-max); margin: 0; padding: var(--esp-2) var(--esp-3); border: var(--fio-fino) solid var(--cor-papel-a30); border-radius: var(--raio-2); background: var(--cor-tinta-a50); -webkit-backdrop-filter: blur(var(--desfoque-leve)); backdrop-filter: blur(var(--desfoque-leve)); font-family: var(--letra-rotulo); font-size: var(--tam-pequeno); line-height: var(--lh-rotulo); color: var(--cor-papel); word-spacing: normal; }
.marcacao__rotulo b { font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-style: italic; font-size: var(--tam-grande); }
/* o espelho: o arco do site atual, o seixo do espelho da clínica e a faixa de luz fosca (Riska: .image-curtain) */
.espelho { position: relative; overflow: hidden; border-radius: var(--raio-arco); isolation: isolate; background: var(--cor-tinta); }
.espelho img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cresce-foto)); }
.espelho--seixo { border-radius: var(--raio-seixo); }
.image-curtain { position: absolute; inset-block: 0; right: 0; width: 22%; border-left: var(--fio-fino) solid var(--cor-papel-a50); background: var(--cor-papel-a10); -webkit-backdrop-filter: blur(var(--desfoque-leve)); backdrop-filter: blur(var(--desfoque-leve)); pointer-events: none; }
/* o véu: o cartão de vidro sobre a foto (a caixa squircle da ficha + desfoque) */
.veu { position: relative; display: grid; gap: var(--esp-3); padding: var(--esp-5); border: var(--fio) solid var(--cor-papel-a50); border-radius: var(--raio-squircle); background: var(--cor-tinta-a50); -webkit-backdrop-filter: blur(var(--desfoque-veu)) saturate(var(--vidro-saturacao)); backdrop-filter: blur(var(--desfoque-veu)) saturate(var(--vidro-saturacao)); color: var(--cor-papel); }
.veu--sobre { position: absolute; left: 7%; right: 7%; bottom: 7%; }
.veu .pilula { justify-self: start; }
.squircle { border: var(--fio) solid var(--cor-fio-forte); border-radius: var(--raio-squircle); padding: var(--esp-5); }
/* o selo de texto que gira */
.selo { position: relative; display: grid; place-items: center; width: var(--selo-giro); aspect-ratio: 1; color: var(--cor-texto); }
.selo--g { width: var(--selo-giro-g); }
.selo__texto { position: absolute; inset: 0; width: 100%; height: 100%; animation: selo-gira var(--tempo-gira) linear infinite; overflow: visible; }
.selo__texto text { font-family: var(--letra-rotulo); font-size: var(--selo-letra-giro); letter-spacing: var(--tr-pilula); text-transform: uppercase; fill: currentColor; }
.selo__miolo { width: 42%; color: currentColor; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
/* a palavra com fundo: a palavra enorme atrás da pessoa recortada */
.palavra-fundo { position: relative; display: grid; place-items: end center; overflow: hidden; border-radius: var(--raio-squircle); isolation: isolate; aspect-ratio: var(--proporcao-retrato); background: linear-gradient(180deg, var(--cor-po) 0%, var(--cor-papel) 100%); }
.palavra-fundo__texto { position: absolute; left: 50%; top: 40%; margin: 0; transform: translate(-50%, -50%); font-family: var(--letra-titulo); font-size: var(--tam-palavra-fundo); line-height: var(--lh-justo); letter-spacing: var(--tr-perto); color: var(--cor-tinta); white-space: nowrap; }
.palavra-fundo img { position: relative; z-index: var(--z-base); width: 88%; height: auto; }
/* os pontos de marcação: a retícula do lápis, esmaecendo para as bordas */
.pontos-de-marcacao { position: relative; display: grid; align-content: end; padding: var(--esp-5); border-radius: var(--raio-squircle); background-color: var(--cor-papel-alto); isolation: isolate; overflow: hidden; }
.pontos-de-marcacao::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, var(--cor-framboesa) var(--fio-fino), transparent calc(var(--fio-fino) * 1.5)); background-size: var(--passo-grade) var(--passo-grade); opacity: var(--opac-textura); -webkit-mask-image: radial-gradient(60% 70% at 70% 30%, var(--mascara), transparent); mask-image: radial-gradient(60% 70% at 70% 30%, var(--mascara), transparent); }
/* o nome gigante que se forma com a rolagem (Veloura: #wordmark) */
.wordmark { margin: 0; font-family: var(--letra-titulo); font-weight: var(--peso-normal); font-size: var(--tam-wordmark); line-height: var(--lh-justo); letter-spacing: var(--tr-perto); text-align: center; white-space: nowrap; color: var(--cor-titulo); user-select: none; }
.wordmark-legenda { margin-top: var(--esp-4); text-align: center; }
.wordmark-bloco { margin-top: var(--esp-6); overflow: hidden; }
.espelho__foto-costas { object-position: 50% 0; transform-origin: 50% 12%; transform: scale(var(--zoom-costas)); }
.espelho__foto-seixo { object-position: 30% center; }
.veu .t-h4 { font-family: var(--letra-titulo); color: var(--cor-papel); }
.veu .t-h4 em { color: var(--cor-po); }
.veu .t-pequeno { color: var(--cor-papel-a88); }
.pontos-de-marcacao .t-h4 em { color: var(--cor-framboesa); }

/* ==================== texturas da v1 ==================== */
.tx-algodao { background-color: var(--cor-papel); background-image: url("../../texturas/web/papel-algodao.webp"); background-size: cover; }
.tx-pontos { background-color: var(--cor-papel); background-image: url("../../texturas/pontos-de-marcacao.png"); background-size: var(--tile-pequeno) var(--tile-pequeno); }
.tx-veneziana { background-color: var(--cor-po); }
.tx-veneziana::after, .tx-luz-veneziana::after, .tx-luz-quente::after, .tx-linho::after, .tx-ampola::after { content: ""; position: absolute; inset: 0; background-size: cover; }
.tx-veneziana, .tx-luz-veneziana, .tx-luz-quente, .tx-linho, .tx-ampola { overflow: hidden; }
.tx-veneziana::after { background-image: url("../../texturas/web/veneziana.webp"); mix-blend-mode: multiply; }
.tx-luz-veneziana, .tx-luz-quente, .tx-ampola { background-color: var(--cor-tinta); }
.tx-luz-veneziana::after { background-image: url("../../texturas/web/luz-de-veneziana.webp"); mix-blend-mode: screen; opacity: var(--opac-desligado); }
.tx-luz-quente::after { inset: calc(var(--esp-6) * -1); background-image: url("../../texturas/web/luz-quente.webp"); mix-blend-mode: screen; animation: luz-respira var(--tempo-luz) var(--curva-suave) infinite alternate; }
.tx-linho { background-color: var(--cor-papel); }
.tx-linho::after { background-image: url("../../texturas/web/linho.webp"); background-size: var(--tile-pequeno) var(--tile-pequeno); mix-blend-mode: multiply; opacity: var(--opac-textura); }
.tx-ampola::after { background-image: url("../../texturas/web/reflexo-de-ampola.webp"); mix-blend-mode: screen; }
.tx-vidro { background-image: url("../fotos/casa-07954.webp"); background-position: 30% center; }
.tx-vidro::after { content: ""; position: absolute; inset: 18% 14%; border: var(--fio) solid var(--cor-papel-a50); border-radius: var(--raio-squircle); background: var(--cor-tinta-a28); -webkit-backdrop-filter: blur(var(--desfoque-veu)); backdrop-filter: blur(var(--desfoque-veu)); }
@keyframes luz-respira { from { transform: translate3d(0, 0, 0) scale(1); opacity: var(--opac-textura); } to { transform: translate3d(var(--esp-6), var(--esp-4), 0) scale(var(--cresce-fundo)); opacity: 1; } }


/* ==================== cartão de papel e cartão do Clube (da v1) ==================== */
.cartao { display: grid; gap: var(--esp-3); padding: var(--esp-5); border-radius: var(--raio-squircle); background: var(--cor-superficie); box-shadow: var(--sombra-papel-baixa); transition: transform var(--tempo-medio) var(--curva), box-shadow var(--tempo-medio) var(--curva); }
.cartao:hover { transform: translateY(var(--sobe-leve)); box-shadow: var(--sombra-papel); }
.cartao__icone { display: grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); border: var(--fio-fino) solid var(--cor-fio-forte); border-radius: var(--raio-lente); color: var(--cor-destaque); }
.cartao h4 { font-size: var(--tam-h5); line-height: var(--lh-sub); }
.cartao p { color: var(--cor-texto-2); font-size: var(--tam-pequeno); }
.memcard-linha { display: grid; gap: var(--esp-5); justify-items: start; margin-top: var(--esp-7); }
.memcard-linha .memcard { width: 100%; max-width: var(--memcard); }
@media (min-width: 760px) { .memcard-linha { grid-template-columns: var(--memcard) minmax(0, 1fr); align-items: end; gap: var(--esp-7); } }
.memcard { position: relative; display: grid; align-content: space-between; width: min(100%, var(--memcard)); aspect-ratio: var(--memcard-proporcao); padding: var(--esp-5); border-radius: var(--raio-squircle); overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--cor-marrom) 0%, var(--cor-tinta) 100%); color: var(--cor-papel); box-shadow: var(--sombra-tinta); }
.memcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: url("../../texturas/web/grao-fino.webp"); background-size: var(--tile-pequeno) var(--tile-pequeno); mix-blend-mode: soft-light; opacity: var(--opac-textura); }
.memcard__asa { position: absolute; right: -12%; top: -18%; width: 62%; z-index: -1; color: var(--cor-papel); opacity: var(--opac-palavra); }
.memcard__topo { display: flex; justify-content: space-between; align-items: start; }
.memcard__topo svg { width: var(--memcard-logo); height: auto; color: var(--cor-papel); }
.memcard__nome { font-family: var(--letra-titulo); font-size: var(--tam-h5); line-height: var(--lh-sub); }
.memcard__nome em { display: block; font-size: var(--tam-grande); color: var(--cor-po); }
.memcard__base { display: flex; justify-content: space-between; align-items: end; gap: var(--esp-3); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); word-spacing: normal; }

/* ==================== antes e depois de arrastar (Halftone: .grain-frame) ==================== */
.grain-frame { --cut: var(--cmp-inicio); position: relative; aspect-ratio: var(--proporcao-foto); border-radius: var(--raio-squircle); overflow: hidden; cursor: col-resize; touch-action: pan-y; user-select: none; background: var(--cor-tinta); }
.grain-frame:focus-visible { outline: var(--fio-foco) solid var(--cor-foco); outline-offset: var(--recuo-foco); }
.cmp-layer { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.cmp-layer img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cmp-orig { z-index: var(--z-alto); clip-path: inset(0 0 0 var(--cut)); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--cut); z-index: 4; width: var(--fio); margin-left: calc(var(--fio) / -2); background: var(--cor-papel); }
.cmp-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: var(--alvo-toque); height: var(--alvo-toque); transform: translate(-50%, -50%); border-radius: var(--raio-lente); background: var(--cor-papel); color: var(--cor-tinta); box-shadow: var(--sombra-tinta); }
.cmp-rotulo { position: absolute; bottom: var(--esp-4); z-index: var(--z-cima); }
.cmp-rotulo--antes { left: var(--esp-4); }
.cmp-rotulo--depois { right: var(--esp-4); }

/* ==================== passo a passo preso (Veloura: .story-step) ==================== */
.passos { position: relative; display: grid; gap: var(--esp-7); }
.passos__visual { position: relative; }
.passos__visual .espelho { aspect-ratio: var(--proporcao-retrato); }
.passos__barra { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-4); font-family: var(--letra-rotulo); font-size: var(--tam-legenda); letter-spacing: var(--tr-regua); color: var(--cor-texto-2); font-variant-numeric: tabular-nums; word-spacing: normal; }
.passos__trilho { flex: 1; height: var(--fio-foco); border-radius: var(--raio-pilula); background: var(--cor-fio); overflow: hidden; }
.passos__cheio { display: block; width: 0%; height: 100%; background: var(--cor-destaque); }
.passos__lista { margin: 0; padding: 0; list-style: none; }
.story-step { display: grid; align-content: center; gap: var(--esp-4); min-height: var(--passo-alto); }
.story-step__num { font-family: var(--letra-rotulo); font-size: var(--tam-rotulo); letter-spacing: var(--tr-regua); color: var(--cor-destaque); word-spacing: normal; }
.story-step h4 { font-size: var(--tam-h3); }
.story-step h4 em { color: var(--cor-destaque); }
.story-step p { max-width: var(--largura-texto); color: var(--cor-texto-2); }
.story-step .btn { justify-self: start; }
@media (min-width: 960px) {
  .passos { grid-template-columns: 1fr 1fr; gap: var(--esp-9); }
  .passos__visual { position: sticky; top: 0; height: var(--altura-tela); display: grid; align-content: center; padding-block: var(--esp-9) var(--esp-5); box-sizing: border-box; }
  .passos__visual .espelho, .passos__visual .passos__barra { width: min(100%, calc((var(--altura-tela) - var(--esp-9) - var(--esp-8)) * 4 / 5)); }
  .story-step { min-height: var(--passo-alto-g); }
}

/* ==================== painel preso com a faixa de vidro (Riska: .story-panel) ==================== */
.story-panel { position: relative; min-height: var(--painel-alto); border-radius: var(--raio-4); background: var(--cor-tinta); color: var(--cor-papel); overflow: clip; }
.story-panel__texto .prancha__regua { color: var(--cor-po); border-color: var(--cor-papel-a18); }
.story-panel__texto .t-regua { color: var(--cor-po); }
.story-panel__fixo { position: sticky; top: 0; display: grid; min-height: var(--altura-tela); overflow: hidden; }
.story-panel__texto { position: relative; z-index: var(--z-alto); display: grid; align-content: center; gap: var(--esp-5); padding: var(--esp-9) var(--esp-gutter); }
.story-panel__texto h3 { font-size: var(--tam-h2); line-height: var(--lh-titulo); color: var(--cor-papel); }
.story-panel__texto h3 em { display: block; padding-left: var(--recuo-italico); color: var(--cor-po); }
.story-panel__texto p { max-width: var(--medida-abertura); color: var(--cor-papel-a88); }
.story-panel__texto .reveal-link { color: var(--cor-papel); }
.panel-media { position: relative; min-height: var(--painel-media-cel); overflow: hidden; }
.panel-parallax { position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; }
.panel-num { position: absolute; top: var(--esp-6); right: var(--esp-6); z-index: var(--z-alto); display: grid; place-items: center; width: var(--esp-9); height: var(--esp-9); border: var(--fio-fino) solid var(--cor-papel); border-radius: var(--raio-lente); color: var(--cor-papel); font-family: var(--letra-titulo); font-size: var(--tam-h4); }
@media (min-width: 900px) { .story-panel__fixo { grid-template-columns: 42% 58%; } .panel-media { min-height: var(--altura-tela); } }

/* ==================== a faixa corrida dos tratamentos (Veloura: .marquee-track) ==================== */
.faixa { overflow: hidden; padding: var(--esp-4) 0; border-block: var(--fio-fino) solid var(--cor-fio); -webkit-mask-image: linear-gradient(to right, transparent, var(--mascara) 8%, var(--mascara) 92%, transparent); mask-image: linear-gradient(to right, transparent, var(--mascara) 8%, var(--mascara) 92%, transparent); }
.marquee-track { display: flex; width: max-content; animation: faixa var(--tempo-faixa) linear infinite; }
.marquee-track > span { display: flex; align-items: center; gap: var(--esp-6); padding-right: var(--esp-6); white-space: nowrap; font-family: var(--letra-titulo); font-size: var(--tam-h4); font-style: italic; color: var(--cor-texto); }
.marquee-track .icone { color: var(--cor-destaque); }
@keyframes faixa { to { transform: translateX(-50%); } }

/* ==================== as demonstrações novas da prancha IX ==================== */
.anim__palco .demo-asa { width: 86%; }
.demo-cortina { width: 100%; height: 100%; min-height: var(--altura-palco-anim); border-radius: 0; }
.demo-cortina img { object-position: center 22%; }
.demo-moldura { width: 80%; height: auto; color: var(--cor-marrom); overflow: visible; }
.demo-sublinha { position: relative; display: inline-block; }
.demo-sublinha svg { position: absolute; left: 0; bottom: var(--sublinha-desce); width: 100%; height: var(--sublinha-alto); color: var(--cor-framboesa); overflow: visible; }
.demo-titulo { font-family: var(--letra-titulo); text-align: center; color: var(--cor-tinta); }
.demo-nome { margin: 0; font-family: var(--letra-titulo); font-size: var(--tam-h2); line-height: var(--lh-justo); color: var(--cor-tinta); }
.anim__palco--luz { padding: 0; background: var(--cor-tinta); }
.anim__palco--luz .luz-respira { position: absolute; inset: -12%; background: url("../../texturas/web/luz-quente.webp") 0 0 / cover; mix-blend-mode: screen; opacity: var(--opac-textura); animation: luz-respira var(--tempo-luz) var(--curva-suave) infinite alternate; }
.anim__palco--luz p { position: relative; color: var(--cor-papel-a72); }
.anim__palco--faixa { padding: 0; }
.anim__palco--faixa .faixa { width: 100%; }
.anim__palco .btn { pointer-events: none; }
.anim__palco .demo-nome { font-size: var(--tam-h3); }
.anim__palco .card-hover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.anim__palco .card-hover__base { gap: var(--esp-1); padding: var(--esp-4); }
.anim__palco .card-hover__base h4 { font-size: var(--tam-h5); }
.demo-marcacao { position: absolute; inset: 0; border-radius: 0; }
.demo-marcacao img { object-position: 50% 92%; }
.demo-marcacao__desenho { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--cor-papel); overflow: visible; }
.demo-marcacao__rotulo { left: var(--esp-3); top: var(--esp-3); max-width: var(--rotulo-demo); }
.traco--framboesa.traco--tracejado { stroke-width: var(--fio-foco); }

/* ==================== o que se mexe sozinho para ==================== */
[data-movimento="pausado"] .btn-ink::before, [data-movimento="pausado"] .zen-btn::before,
[data-movimento="pausado"] .selo__texto, [data-movimento="pausado"] .marquee-track, [data-movimento="pausado"] .luz-respira,
[data-movimento="pausado"] .sonar::before, [data-movimento="pausado"] .sonar::after, [data-movimento="pausado"] .tx-luz-quente::after,
.prancha.e-coberta .btn-ink::before, .prancha.e-coberta .zen-btn::before, .prancha.e-coberta .selo__texto, .prancha.e-coberta .marquee-track,
.prancha.e-coberta .luz-respira, .prancha.e-coberta .sonar::before, .prancha.e-coberta .sonar::after, .prancha.e-coberta .tx-luz-quente::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .btn-ink::before, .zen-btn::before, .selo__texto, .marquee-track, .sonar::before, .sonar::after, .tx-luz-quente::after, .luz-respira { animation: none !important; }
  .cartao { transition: none; }
}
@media (max-width: 520px) { .squircle { padding: var(--esp-4); } }
.marca-exemplo { margin-top: var(--esp-5); }