/* ==========================================================================
   Diagnóstico do Desejo · formulário · v3: a v1 escura com a paleta NOIRÉ
   (docs/DESIGN-V3.md, delta sobre docs/DESIGN.md). O primeiro bloco :root
   abaixo são os tokens do Lo Re Design System (os valores dourados já
   reapontados para pedra e oxblood: o dourado sai do código, só o
   carimbo.webp é dourado); logo depois vem o bloco LO RE · NOITE v3
   (DESIGN-V3 2.1), idêntico ao do render, com os mesmos nomes da v1.
   Mobile first (390 px), desenhado também para 1280 px, contraste AA.
   CSP do formulário: nada de <style> nem style="" no HTML; imagem só /assets
   ou data URI.
   ========================================================================== */

:root {
  /* Base palette · from Lo Re "Paleta de Cores" */
  --preto-cafe: #130f0b;
  --chocolate: #281d16;
  --cacau: #4d3525;
  --mocha: #8e7257;
  --bronze-areia: #a68c6e;
  --marfim: #f3f0e3;

  /* Derived neutrals */
  --marfim-100: #faf8f1;
  --marfim-200: #f3f0e3;
  --marfim-300: #e9e4d2;
  --marfim-400: #ded7c0;
  --linha: #d5ccb4;

  /* "Gold" do DS: o nome fica, o valor vira pedra e oxblood (DESIGN-V3 2.1) */
  --ouro: #6a6962;
  --ouro-claro: #a8a49a;
  --ouro-escuro: #4a1210;

  /* Semantic · surfaces */
  --surface-page: var(--marfim-200);
  --surface-page-alt: var(--marfim-100);
  --surface-card: var(--marfim-100);
  --surface-raised: #ffffff;
  --surface-deep: var(--chocolate);
  --surface-deepest: var(--preto-cafe);
  --surface-subtle: var(--marfim-300);

  /* Semantic · text */
  --text-body: var(--chocolate);
  --text-strong: var(--preto-cafe);
  --text-muted: #6b4c33;
  --text-faint: #4a1210;
  --text-inverse: var(--marfim-200);
  --text-accent: var(--ouro);

  /* Semantic · lines & accents */
  --border-hairline: var(--linha);
  --border-strong: var(--bronze-areia);
  --accent: var(--ouro);
  --accent-soft: rgba(106, 105, 98, 0.12);
  --gradient-ouro: linear-gradient(180deg, #5c1915 0%, #4a1210 100%);
  --focus-ring: rgba(106, 105, 98, 0.45);

  /* Semantic · status */
  --status-danger: #8c3a2b;

  /* Tipografia */
  --font-display: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --font-sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Cormorant Garamond", "Bodoni Moda", Georgia, serif;
  --font-body: var(--font-sans);

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --size-display-l: clamp(44px, 5vw, 76px);
  --size-display-m: clamp(34px, 3.6vw, 52px);
  --size-display-s: 28px;
  --lh-display: 1.04;
  --ls-display: -0.01em;

  --size-body-l: 21px;
  --size-body-m: 19px;
  --size-body-s: 17px;
  --size-body-xs: 15px;
  --lh-body: 1.65;
  --lh-body-tight: 1.45;
  --ls-body: 0.005em;

  --size-label: 14px;
  --size-label-s: 12.5px;
  --ls-label: 0.18em;
  --ls-label-wide: 0.32em;
  --lh-label: 1.2;

  --initial-scale: 1.45;
  --initial-kern: -0.02em;
  --measure: 66ch;

  /* Espaço · base 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter: var(--space-5);
  --container-narrow: 760px;
  --field-height: 48px;
  --control-height: 52px;
  --hairline: 1px;

  /* Raio · quase quadrado por padrão: editorial, não app */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-pill: 999px;

  /* Sombra · marrom-quente e quase invisível; as linhas é que separam */
  --shadow-xs: 0 1px 2px rgba(19, 15, 11, 0.05);
  --shadow-sm: 0 2px 8px rgba(19, 15, 11, 0.06);

  /* Movimento */
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-entrance: cubic-bezier(0.16, 0.84, 0.44, 1);
  --transition-base: all var(--dur-base) var(--ease-standard);

  /* Larguras do quiz */
  --largura: 640px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* LO RE · NOITE v3 (DESIGN-V3.md 2.1). Mesmos nomes da v1; o dourado sai do sistema (só o carimbo.webp é dourado). */
:root {
  color-scheme: dark;

  /* preto quente */
  --noite-0: #0f0d0c;          /* poço: campo, moldura do celular */
  --noite-1: #161312;          /* página */
  --noite-2: #1c1817;          /* faixa alternada, território, conclusão */
  --noite-3: #221e1c;          /* cartão */
  --noite-4: #2b2624;          /* cartão elevado, hover */

  /* oxblood: bloco cheio. No preto ele não serve de fio (1,22:1). */
  --oxblood: #4a1210;
  --oxblood-fundo: #360d0b;
  --vinho-1: var(--oxblood);   /* nome da v1 */
  --vinho-2: #5c1915;          /* topo do bloco, hover do botão */
  --oxblood-vivo: #b04a3f;     /* só grafismo: barra, arco, ponto do gráfico, fio de acento   3,4:1 na página */
  --oxblood-claro: #d49a8f;    /* texto de acento                                             7,8:1 na página · 6,4:1 no bloco */
  --linha-vinho: rgba(176, 74, 63, 0.55);

  /* pedra, sálvia, scarlet */
  --pedra: #6a6962;            /* fio, oval, marcador, pendente (3,4:1: nunca texto) */
  --pedra-media: #8a877f;      /* borda de campo e de botão linha                             5,2:1 */
  --pedra-clara: #a8a49a;      /* eyebrow, apoio, link                                        7,4:1 · 6,0 no cartão elevado */
  --salvia: #9aa394;           /* visível, passo feito                                        7,1:1 · 5,7 no cartão elevado */
  --scarlet: #a3261c;          /* só preenchimento (nunca texto no escuro) */
  --lacre: #e5685a;            /* scarlet de texto: ausente e erro                            5,7:1 · 4,6 no cartão elevado */

  /* marfim NOIRÉ */
  --marfim-texto: #e4e1d9;     /* 14,2:1 */
  --marfim-corpo: #c9c4ba;     /* 10,6:1 */
  --marfim-apoio: var(--pedra-clara);
  --marfim-numero: #efebe3;    /* números grandes, nome da capa */

  /* papel de algodão */
  --papel: #e6e2d9;
  --papel-2: #d8d3c8;
  --tinta: #1a1614;            /* 13,9:1 no papel */
  --tinta-corpo: #2e2926;      /* 11,1:1 */
  --tinta-apoio: #57534c;      /* 5,9:1 (5,2 no papel com fibra) */

  /* DS reapontado: os nomes "ouro" ficam, o valor deixa de ser dourado */
  --ouro-luz: var(--oxblood-claro);
  --ouro-claro: var(--pedra-clara);
  --ouro: var(--pedra);
  --ouro-escuro: var(--oxblood);
  --gradient-ouro: linear-gradient(180deg, #5c1915 0%, #4a1210 100%);
  --numero-ouro: linear-gradient(180deg, #efebe3 0%, #efebe3 100%);
  --preto-cafe: var(--tinta);
  --chocolate: var(--tinta-corpo);
  --linha: #c9c3b6;
  --bronze-areia: var(--pedra-media);

  --linha-ouro: rgba(168, 164, 154, 0.20);
  --linha-ouro-forte: rgba(168, 164, 154, 0.42);
  --linha-neutra: rgba(228, 225, 217, 0.09);

  /* semânticos */
  --surface-page: var(--noite-1);
  --surface-page-alt: var(--noite-2);
  --surface-card: var(--noite-3);
  --surface-raised: var(--noite-4);
  --surface-deep: var(--noite-0);
  --surface-deepest: #0b0a09;
  --surface-subtle: rgba(228, 225, 217, 0.05);
  --text-body: var(--marfim-corpo);
  --text-strong: var(--marfim-texto);
  --text-muted: var(--pedra-clara);
  --text-faint: var(--pedra-clara);
  --text-inverse: var(--tinta);
  --text-accent: var(--oxblood-claro);
  --border-hairline: var(--linha-neutra);
  --border-strong: var(--linha-ouro-forte);
  --accent: var(--oxblood-vivo);
  --accent-soft: rgba(176, 74, 63, 0.12);
  --focus-ring: rgba(212, 154, 143, 0.6);
  --status-danger: var(--lacre);

  /* forma: canto reto; sombra só em objeto */
  --raio-cartao: 4px;
  --raio-janela: 2px;
  --raio-campo: 3px;
  --raio-botao: 2px;
  --sombra-cartao: 0 18px 40px -28px rgba(0, 0, 0, 0.8);
  --sombra-flutuante: 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  --sombra-objeto: 0 2px 4px rgba(0, 0, 0, 0.45), 0 28px 56px -20px rgba(0, 0, 0, 0.85);
  --brilho-ouro: none;

  /* ícones (mask em data URI; cor por background-color) */
  --icone-oval: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cellipse cx='5' cy='7' rx='4.1' ry='6.1' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  --icone-clipe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 15 44'%3E%3Cpath d='M9.5 14v20.5a2.5 2.5 0 0 1-5 0V8a4 4 0 0 1 8 0v28a6 6 0 0 1-12 0V12' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  /* selo: borda de cera com 16 recortes e um anel oval vazado (evenodd: a máscara lê o alfa, então o anel é furo de verdade) */
  --icone-selo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.00 0.50 L9.29 1.53 L10.87 1.07 L11.67 2.51 L13.30 2.70 L13.49 4.33 L14.93 5.13 L14.47 6.71 L15.50 8.00 L14.47 9.29 L14.93 10.87 L13.49 11.67 L13.30 13.30 L11.67 13.49 L10.87 14.93 L9.29 14.47 L8.00 15.50 L6.71 14.47 L5.13 14.93 L4.33 13.49 L2.70 13.30 L2.51 11.67 L1.07 10.87 L1.53 9.29 L0.50 8.00 L1.53 6.71 L1.07 5.13 L2.51 4.33 L2.70 2.70 L4.33 2.51 L5.13 1.07 L6.71 1.53ZM4.60 8a3.4 4.3 0 1 0 6.80 0a3.4 4.3 0 1 0 -6.80 0ZM5.40 8a2.6 3.4 0 1 0 5.20 0a2.6 3.4 0 1 0 -5.20 0Z'/%3E%3C/svg%3E");

  /* larguras: iguais à v1 */
  --largura: 680px;
  --largura-larga: 1120px;
  --largura-capa: 1200px;
  --gutter: 20px;
}
@media (max-width: 359px) { :root { --gutter: 16px; } }

/* material papel (o que é dela) */
.papel {
  --text-body: var(--tinta-corpo);
  --text-strong: var(--tinta);
  --text-muted: var(--tinta-apoio);
  --text-faint: var(--tinta-apoio);
  --text-accent: var(--oxblood);
  --border-hairline: var(--linha);
  --status-danger: var(--scarlet);   /* scarlet no papel: 5,7:1 */
  color: var(--text-body);
}

/* Só do formulário: colunas (DESIGN 3.1) e os ícones em data URI (img-src data: permite). Os ícones da casa
   (--icone-oval, --icone-clipe, --icone-selo) estão no bloco da noite v3. */
:root {
  --largura-form: 720px;       /* blocos, identificação, revisão */
  --largura-abertura: 760px;   /* abertura, itens 1 a 6 */
  --luz: 236, 226, 214;         /* a luz quente das cenas (feixe, recorte, brilhos): marfim, nunca dourado */
  /* as pregas do veludo (palco, frente da abertura, recebido, fechado): três passos diferentes, para o pano não parecer
     régua; vão por cima da textura veludo-noite */
  /* a cortina da frente no tom da foto da sala (ambiente-palco): preto quente com dobras vermelhas, em três passos
     que não se repetem juntos (37, 83 e 151 px) */
  --pregas-noite:
    repeating-linear-gradient(90deg, rgba(120, 22, 19, 0) 0, rgba(120, 22, 19, 0.42) 11px, rgba(120, 22, 19, 0) 21px, rgba(120, 22, 19, 0) 37px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0, rgba(0, 0, 0, 0) 26px, rgba(150, 32, 26, 0.3) 47px, rgba(0, 0, 0, 0) 64px, rgba(0, 0, 0, 0.42) 83px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.36) 58px, rgba(110, 20, 18, 0.2) 104px, rgba(0, 0, 0, 0) 151px);
  --pregas:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0) 28px, rgba(255, 206, 196, 0.10) 48px, rgba(0, 0, 0, 0) 66px, rgba(0, 0, 0, 0.5) 104px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.32) 62px, rgba(255, 206, 196, 0.04) 100px, rgba(0, 0, 0, 0) 146px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0, rgba(0, 0, 0, 0) 90px, rgba(0, 0, 0, 0.2) 233px);
  /* check marfim sobre a caixa oxblood; seta do select em pedra-clara */
  --icone-check-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.4 8.4l3 3 6.2-6.6' fill='none' stroke='%23e4e1d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icone-seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a8a49a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Circunflexo minúsculo (â ê ô): a Cormorant do Google desenha esse acento alto e solto, em todos os pesos.
   Só esses três caracteres vêm da EB Garamond (Google Fonts, font-src https://fonts.gstatic.com já permitido na CSP),
   reduzida para o x da Cormorant. O resto do título continua Cormorant; sem a fonte, cai na Cormorant de sempre.
   Integração visual, 25/09. Igual em src/render/estilos.js (ACENTOS). */
@font-face { font-family: "Lo Re Acentos"; font-style: normal; font-weight: 300 700; font-display: swap; size-adjust: 90%;
  src: url("https://fonts.gstatic.com/s/ebgaramond/v33/SlGUmQSNjdsmc35JDF1K5GR1SDk_YAPI.woff2") format("woff2"); unicode-range: U+00E2, U+00EA, U+00F4; }
@font-face { font-family: "Lo Re Acentos"; font-style: italic; font-weight: 300 700; font-display: swap; size-adjust: 90%;
  src: url("https://fonts.gstatic.com/s/ebgaramond/v33/SlGWmQSNjdsmc35JDF1K5GRweDs1ZyHKpWg.woff2") format("woff2"); unicode-range: U+00E2, U+00EA, U+00F4; }
:root { --font-heading: "Lo Re Acentos", "Cormorant Garamond", "Bodoni Moda", Georgia, serif; }

/* --------------------------------------------------------------------------
   BASE · a sala (DESIGN-V3 2.2): papel preto de algodão, luz de janela à
   esquerda, vinheta e grão. Nenhuma poça de luz colorida.
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--noite-1); }

body {
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--weight-regular);
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  padding-bottom: calc(var(--space-7) + env(safe-area-inset-bottom, 0px));
  /* a Cormorant desenha algarismo antigo por padrão: número em pé em título, pergunta e revisão */
  font-variant-numeric: lining-nums;
}

body::before {                      /* a sala: papel preto de algodão + luz da janela à esquerda + vinheta */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(228, 225, 217, 0.035) 0%, rgba(228, 225, 217, 0) 38%),
    radial-gradient(ellipse 120% 90% at 50% 50%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.45) 100%),
    url("/assets/dossie/fundo-noite.webp") center top / 400px 400px repeat,
    var(--noite-1);
}

body::after {                       /* o grão (marfim frio, 5% no filtro × 0,5) */
  content: ""; position: fixed; inset: 0; z-index: 2147483647; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.92  0 0 0 0 0.90  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--text-strong);
  margin: 0;
  text-wrap: balance;
}

h1:focus, h2:focus { outline: none; }

p { margin: 0 0 1em; }

a { color: var(--pedra-clara); text-decoration-color: var(--linha-vinho); text-underline-offset: 3px; }
a:hover { color: var(--marfim-texto); text-decoration-color: var(--oxblood-claro); }

:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--oxblood-claro); outline-offset: 3px; }
.papel :where(a, button, input, select, textarea, summary):focus-visible { outline-color: var(--oxblood); }

::selection { background: rgba(176, 74, 63, 0.5); color: var(--marfim-texto); }

strong { font-weight: var(--weight-semibold); color: var(--text-strong); }

hr { border: 0; margin: 0; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  z-index: 30;
  background: var(--oxblood);
  color: var(--marfim-texto);
  font-weight: var(--weight-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--raio-botao);
}
.pular:focus { top: var(--space-3); }

/* Eyebrow · o dispositivo de assinatura da marca, em pedra-clara (no papel, oxblood) */
.mono {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.2em;
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--pedra-clara);
}
.papel .mono { color: var(--oxblood); }

/* v3: sem capitular (DESIGN-V3 2.3). As classes titulo-capitular e sem-capitular ficam no HTML, sem efeito. */

/* Bodoni em número: o opsz automático deixa a haste fina quase invisível ("14" lê "I4"). Tamanho óptico fixo de texto
   pequeno (14): a diagonal do "4" e a vírgula ficam firmes, igual ao dossiê. */
.q-num, .rev-valor, .perfil-inicial {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 14;
}

/* rótulo com " · " em segmentos (span.seg): o ponto é do CSS e nunca sobra no fim nem no começo de uma linha.
   Numa linha só quando cabe; abaixo de 760 px cada segmento vira uma linha, sem ponto. */
.seg { white-space: nowrap; }
@media (max-width: 759px) {
  .segs .seg { display: block; }
  .segs .sep { display: none; }
}

/* Filete de pedra com um oval no meio (DESIGN-V3 2.2) */
.filete {                           /* é um <hr>: o overflow: hidden do navegador cortaria o oval */
  position: relative; display: block; height: 1px; width: min(100%, 560px); margin: 0 auto; border: 0; overflow: visible;
  background: linear-gradient(90deg, rgba(106, 105, 98, 0), rgba(106, 105, 98, 0.9) 50%, rgba(106, 105, 98, 0));
}
.filete::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 13px; transform: translate(-50%, -50%);
  border: 1px solid var(--pedra-clara); border-radius: 50%; background: var(--noite-1);
}

.container {
  width: 100%;
  max-width: calc(var(--largura-abertura) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------------------
   TOPO · fio de progresso, nome da tela (ou "lendo @handle"), passo e seis traços
   -------------------------------------------------------------------------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(22, 19, 18, 0.84);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha-neutra);
}

.barra { height: 2px; background: rgba(228, 225, 217, 0.07); overflow: hidden; }

.barra-cheia {
  height: 100%;
  width: 100%;
  background: var(--oxblood-vivo);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease-standard);
}

.topo-linha {
  max-width: calc(var(--largura-form) + 2 * var(--gutter));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}

.topo.is-abertura { border-bottom-color: transparent; }
.topo.is-abertura .topo-linha { display: none; }

.topo-linha .mono { font-size: 12px; letter-spacing: 0.14em; color: var(--marfim-apoio); }

#topo-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pedra-clara); }

/* depois do "sou eu": a leitura está rodando enquanto ela responde */
#topo-nome.is-lendo {
  flex: 0 1 auto;
  position: relative;
  height: 26px;
  padding: 0 12px 0 24px;
  line-height: 24px;
  border: 1px solid var(--linha-ouro-forte);
  border-radius: var(--raio-botao);
  background: transparent;
  font-size: 13px;
  font-weight: var(--weight-medium);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--marfim-texto);
}

#topo-nome.is-lendo::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--oxblood-claro);
}

.topo-direita { display: flex; gap: 10px; align-items: center; flex: none; }

/* "salvo" entra no lugar do "bloco N de 6" (form.js), com um check desenhado: curto para caber a 320 px */
.topo-salvo { display: inline-flex; align-items: center; gap: 6px; color: var(--salvia); }

.topo-salvo::before {
  content: "";
  width: 10px;
  height: 5px;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

.tracos { display: inline-flex; gap: 3px; align-items: center; }
.tracos i { display: block; width: 11px; height: 2px; background: rgba(228, 225, 217, 0.14); }
.tracos i.is-feito { background: var(--pedra-clara); }
.tracos i.is-atual { background: var(--marfim-texto); }

/* no celular os seis traços dizem o passo: o "bloco N de 6" fica só para leitor de tela e a pill do @ ganha espaço */
@media (max-width: 519px) {
  #topo-passo:not(:empty) {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
  }
}

@media (min-width: 520px) {
  .tracos { gap: 4px; }
  .tracos i { width: 18px; }
}

.aviso-app {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-top: 1px solid var(--linha-neutra);
}

.aviso-app p { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--marfim-corpo); flex: 1; }
.aviso-app .link-discreto { margin: 0; flex: none; min-height: 44px; }

/* --------------------------------------------------------------------------
   TELAS · cabeçalho padrão (eyebrow, título, sub)
   -------------------------------------------------------------------------- */

main { display: block; }

.tela { max-width: var(--largura-form); margin: 0 auto; padding: var(--space-6) 0 var(--space-5); }

.cabeca { margin: 0 0 28px; }

.cabeca > .mono { margin: 0 0 18px; }

.cabeca h2 { font-size: clamp(34px, 1.58vw + 27.8px, 48px); line-height: 1.08; margin: 0 0 14px; padding-top: 0.14em; }

.cabeca-centro { text-align: center; }
.cabeca-centro > .mono { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cabeca-centro > .mono::before, .cabeca-centro > .mono::after { content: ""; flex: 0 0 40px; height: 1px; background: linear-gradient(270deg, var(--linha-ouro-forte), rgba(168, 164, 154, 0)); }
.cabeca-centro > .mono::after { background: linear-gradient(90deg, var(--linha-ouro-forte), rgba(168, 164, 154, 0)); }

.sub {
  font-size: 16px;
  line-height: 1.55;
  color: var(--marfim-corpo);
  margin: 0;
  max-width: 58ch;
}

.lead {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 21px;
  line-height: 1.4;
  color: var(--marfim-corpo);
  margin: 0 0 var(--space-5);
}

.nota {
  font-size: 14px;
  line-height: 1.5;
  color: var(--marfim-apoio);
  margin: var(--space-4) 0 0;
}

/* --------------------------------------------------------------------------
   MATERIAIS (DESIGN-V3 2.4): noite chapada, papel de algodão, bloco oxblood,
   conclusão com fio no topo. Canto reto; sombra só em objeto.
   -------------------------------------------------------------------------- */

.cartao-noite, .q, #rev-lista, .rev-numeros {
  background: var(--noite-3);
  border: 1px solid var(--linha-ouro);
  border-radius: var(--raio-cartao);
  box-shadow: var(--sombra-cartao);
}

.cartao-noite { padding: 20px; }

.cartao-papel {
  background: url("/assets/dossie/fibra.webp") 0 0 / 400px 400px, var(--papel);
  background-blend-mode: multiply;
  border-radius: 3px;
  padding: 16px 18px;
  box-shadow: var(--sombra-objeto);
}

/* Bloco oxblood: preenchimento cheio com fibra e a mesma luz de janela (atrás da Carol no palco, avisos) */
.bloco-oxblood, .cartao-vinho, .aviso-bloco {
  position: relative; overflow: hidden;
  background:
    linear-gradient(100deg, rgba(228, 225, 217, 0.07) 0%, rgba(228, 225, 217, 0) 45%),   /* a mesma luz da janela */
    linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 100%),
    url("/assets/dossie/fibra.webp") 0 0 / 400px 400px,
    var(--oxblood);
  background-blend-mode: normal, normal, multiply, normal;
}
.bloco-oxblood.com-relevo::after {   /* o L dentro do oval, gravado no bloco */
  content: ""; position: absolute; left: 50%; top: 40px; width: 150px; aspect-ratio: 1; transform: translateX(-50%);
  background: url("/assets/dossie/relevo-oxblood.webp") center / contain no-repeat; pointer-events: none;
}
.cartao-vinho, .aviso-bloco { border: 0; border-radius: var(--raio-cartao); box-shadow: var(--sombra-flutuante); }

.conclusao {
  border: 0;
  border-top: 1px solid var(--st, var(--pedra));
  border-radius: 0;
  padding: 14px 16px 16px;
  background: var(--noite-2);
  color: var(--marfim-texto);
  font-size: 15.5px;
  line-height: 1.55;
}

/* A voz da Carol: Cormorant itálico com o fio de pedra à esquerda */
.carol {
  margin: 0 0 var(--space-5);
  padding: 2px 0 2px 18px;
  border-left: 1px solid var(--linha-ouro-forte);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 20px;
  line-height: 1.45;
  color: var(--marfim-corpo);
}

.carol p { margin: 0 0 0.7em; }
.carol p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   ABERTURA · o @ é o objeto da página; embaixo, o palco com a Carol
   -------------------------------------------------------------------------- */

.tela-abertura { max-width: var(--largura-abertura); padding-top: 28px; }

.abertura-frente { text-align: center; }

.hero-eyebrow { margin: 0 0 14px; letter-spacing: 0.2em; text-wrap: balance; }

.abertura-frente .filete { width: min(100%, 360px); margin: 0 auto 26px; }

/* título com mais contraste de escala (feedback 25/09 16h): maior no desktop; três linhas fixas (span.linha), cada uma
   com a sua máscara para a entrada linha a linha. A folga da máscara (.12em) não corta descendente nem o itálico. */
.titulo-abertura {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  font-size: clamp(36px, 4.4vw + 16px, 74px);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0 auto 20px;
  max-width: 16em;
}
.titulo-abertura .linha { display: block; overflow: hidden; padding: 0 0.12em 0.12em; margin: 0 -0.12em -0.12em; }
.titulo-abertura .linha > span { display: block; }

/* a palavra em destaque pesa: um pouco maior, oxblood-claro, com a luz vinho por trás */
.titulo-abertura em {
  font-style: italic;
  font-size: 1.06em;
  color: var(--oxblood-claro);
  text-shadow: 0 0 0.9em rgba(176, 74, 63, 0.55);
}
/* e uma luz que passa por ela de tempos em tempos (o gradiente recortado no texto; as duas pontas têm o mesmo
   contraste do oxblood-claro, 7,8:1). O brilho vinho vira drop-shadow: text-shadow pintaria por cima do gradiente. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .titulo-abertura em {
    padding-right: 0.1em;
    margin-right: -0.1em;
    color: transparent;
    background: linear-gradient(100deg, var(--oxblood-claro) 0%, var(--oxblood-claro) 42%, #f7e2dc 50%, var(--oxblood-claro) 58%, var(--oxblood-claro) 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 0.4em rgba(176, 74, 63, 0.5));
  }
}

.tela-abertura .lead {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--weight-regular);
  font-size: 17px;
  line-height: 1.6;
  color: var(--marfim-corpo);
  max-width: 34ch;
  margin: 0 auto 26px;
}

/* O campo do @: papel de algodão com fibra, o único campo claro do formulário (DESIGN-V3 2.5) */
.arroba { max-width: 560px; margin: 0 auto; }

.arroba-campo {
  position: relative;
  display: flex;
  align-items: center;
  height: 62px;
  padding: 0 7px 0 18px;
  background: url("/assets/dossie/fibra.webp") 0 0 / 400px 400px, var(--papel);
  background-blend-mode: multiply;
  color: var(--tinta);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(228, 225, 217, 0.28), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

/* no foco o papel ganha o fio oxblood-claro e uma luz vinho em volta, como se a cena acendesse o campo */
.arroba-campo:focus-within {
  box-shadow: 0 0 0 2px var(--oxblood-claro), 0 0 64px -6px rgba(176, 74, 63, 0.62), 0 24px 48px -24px rgba(0, 0, 0, 0.9);
}
/* a luz vinho que respira em volta do campo chamando o toque (movimento liberado: form.css, bloco MOVIMENTO) */
.arroba-campo::before {
  content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: 4px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1px rgba(212, 154, 143, 0.6), 0 0 42px 4px rgba(176, 74, 63, 0.6);
}

.arroba-prefixo { flex: none; margin-right: 8px; font: 600 18px/1 var(--font-sans); color: var(--oxblood); }

.arroba-campo input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tinta);
  caret-color: var(--oxblood);
  font: 400 17px/1.2 var(--font-sans);
  letter-spacing: 0.005em;
}

.arroba-campo input[type="text"]:focus { box-shadow: none; border: 0; }
.arroba-campo input::placeholder { color: var(--tinta-apoio); opacity: 1; }

.arroba-ir {
  position: relative;
  overflow: hidden;
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: var(--oxblood);
  color: var(--marfim-texto);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

/* microinteração: a seta anda, um brilho atravessa o botão, o toque afunda; com o @ digitado o botão acende */
.arroba-ir svg { transition: transform var(--dur-base) var(--ease-standard); }
.arroba-ir::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(228, 225, 217, 0) 30%, rgba(228, 225, 217, 0.28) 50%, rgba(228, 225, 217, 0) 70%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-standard);
}
.arroba-ir:hover { background: var(--vinho-2); }
.arroba-ir:hover svg, .arroba-ir:focus-visible svg { transform: translateX(3px); }
.arroba-ir:hover::after { transform: translateX(120%); }
.arroba-ir:active { transform: scale(0.94); }
.arroba-ir:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 2px; }
.arroba-campo:has(input:not(:placeholder-shown)) .arroba-ir { background: var(--vinho-2); box-shadow: 0 6px 18px -6px rgba(176, 74, 63, 0.8); }

.arroba-nota { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--marfim-apoio); }

/* Retomada: substitui o campo do @ quando existe rascunho */
.retomada { max-width: 560px; margin: 0 auto; text-align: left; }
.retomada .mono { margin: 0 0 var(--space-2); }
.retomada-texto { margin: 0; color: var(--marfim-texto); }
.retomada .btn-primario { margin-top: var(--space-4); }
.retomada .link-discreto { margin-top: var(--space-2); }

/* O palco (feedback da cliente 25/09 16h, "pobrezinha", e 16h30, "ainda meio morto"): a sala do ateliê à noite,
   fotografada (ambiente-celular no celular, ambiente-palco do tablet para cima). Cortina de veludo oxblood fechada,
   piso de pedra, um feixe de luz quente com névoa que desce do alto pela esquerda e acende uma poça no piso, onde a
   Carol fica. De trás para a frente: a sala com a luz baixa (.palco-bloco) e a mesma sala acesa por cima
   (.palco-sala: a luz acende de cima para baixo na entrada e depois respira); dentro dela, o feixe e a poça
   reforçados; o brilho acetinado que corre pelas dobras; o L no oval gravado no veludo com o brilho varrendo as
   cristas; o brilho oxblood atrás dela; a Carol com luz de recorte; a poeira flutuando no feixe (canvas, form.js);
   as leitoras em profundidade; por cima, vinheta e grão. O contraste (pretos fundos em volta de uma luz forte) é o
   que dá vida. Parallax leve: form.js escreve --mx e --my. Com movimento reduzido a cena fica acesa, parada e inteira.
   Nada de moldura, estátua, dourado ou palácio. */
@property --acende { syntax: "<percentage>"; inherits: false; initial-value: 100%; }

.palco {
  --carol-w: 300px;
  --palco-h: 540px;
  --relevo-w: 200px;          /* caixa do relevo (o oval ocupa 340 × 440 de 720 × 720) */
  --relevo-y: 88px;           /* centro do oval: acima da cabeça dela, que cobre a base do oval */
  /* a sala: a foto inteira, na largura --sala-w; o topo sai da conta para a poça cair a --poca-y do alto do palco */
  --sala-w: max(100vw, 360px);
  --sala-r: 1.7778;           /* altura ÷ largura da foto (9:16) */
  --poca-foto: 0.808;         /* altura da poça na foto (IMAGENS v3) */
  --poca-y: 430px;
  --raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.88' stop-color='%23fff' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.08'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-5%25' width='140%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='2 0.6'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M29.42 -4 L39.17 -4 L42.6 10 L46.65 20 L49.8 30 L52.55 40 L57.45 50 L60.35 60 L62.8 70 L63.95 80.8 L41.45 80.8 L41.2 70 L40.25 60 L38.55 50 L35.45 40 L34.2 30 L32.55 20 L30.6 10 Z' fill='url(%23g)' filter='url(%23b)'/%3E%3C/svg%3E");
  --poca: radial-gradient(ellipse 17% 3.4% at 52.7% 80.8%, rgba(255, 244, 232, 0.62), rgba(var(--luz), 0.2) 55%, rgba(var(--luz), 0) 100%);
  position: relative;
  z-index: 0;
  isolation: isolate;
  height: var(--palco-h);
  margin: 40px calc(50% - 50vw) 0;
  overflow: hidden;
  background: #0b0908;
  /* o alto some na cortina da frente e a base some na página: uma cena só, sem emenda */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 50px, #000 130px, #000 90%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.5) 50px, #000 130px, #000 90%, rgba(0, 0, 0, 0) 100%);
}

.palco::after {                     /* vinheta: as laterais caem para o preto fundo; a base cai para a página */
  content: ""; position: absolute; z-index: 8; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(22, 19, 18, 0) 62%, rgba(22, 19, 18, 0.72) 88%, rgba(22, 19, 18, 0.94) 100%),
    radial-gradient(ellipse 66% 92% at 50% 42%, rgba(6, 4, 4, 0) 46%, rgba(6, 4, 4, 0.62) 80%, rgba(6, 4, 4, 0.9) 100%);
}

/* camadas da cena: todas soltas no palco, cada uma com a sua profundidade no parallax; a sala, o brilho e a poeira
   andam juntos (é o mesmo plano do fundo) */
.palco-bloco, .palco-sala, .palco-brilho, .palco-poeira, .palco-relevo, .palco-halo, .palco-carol, .palco-recorte, .palco-retrato {
  translate: calc(var(--mx) * var(--px, 0px)) calc(var(--my) * var(--py, 0px));
}
@media (hover: hover) and (pointer: fine) {
  .palco-bloco, .palco-sala, .palco-brilho, .palco-poeira, .palco-relevo, .palco-halo, .palco-carol, .palco-recorte, .palco-retrato {
    transition: translate 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}

/* a sala: a luz baixa embaixo (.palco-bloco, a mesma div da v1) e a acesa por cima (.palco-sala), pixel a pixel no
   mesmo quadro; entre as duas, só a luz muda */
.palco .palco-bloco, .palco-sala {
  --px: -10px; --py: -8px;
  position: absolute;
  z-index: 0;
  left: 50%;
  top: calc(var(--poca-y) - var(--sala-w) * var(--sala-r) * var(--poca-foto));
  width: var(--sala-w);
  height: calc(var(--sala-w) * var(--sala-r));
  margin-left: calc(var(--sala-w) / -2);
  overflow: visible;
  background: url("/assets/dossie/sala-baixa-celular.webp") 0 0 / 100% 100% no-repeat;
  background-blend-mode: normal;
  pointer-events: none;
}
.palco .palco-bloco::after { content: none; }
.palco-sala {
  z-index: 1;
  background-image: url("/assets/dossie/sala-celular.webp");
}
/* o feixe e a poça reforçados, no quadro da própria foto: mais quentes, mais visíveis; respiram sozinhos */
.palco-sala::before, .palco-sala::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.palco-sala::before {
  background: linear-gradient(180deg, rgba(255, 244, 230, 0.4) 0%, rgba(255, 244, 230, 0.5) 30%, rgba(var(--luz), 0.4) 60%, rgba(var(--luz), 0.26) 100%);
  -webkit-mask: var(--raio) 0 0 / 100% 100% no-repeat;
  mask: var(--raio) 0 0 / 100% 100% no-repeat;
}
.palco-sala::after { background: var(--poca); }

/* o brilho acetinado do veludo: uma faixa de luz vinho que corre devagar pela cortina. Em overlay: acende as dobras
   que já são vermelhas e deixa o preto preto. */
.palco-brilho {
  --px: -10px; --py: -8px;
  position: absolute;
  z-index: 2;
  inset: 0 -24px;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0) 82%);
  mask-image: linear-gradient(180deg, #000 0%, #000 64%, rgba(0, 0, 0, 0) 82%);
}
.palco-brilho::before, .palco-brilho::after { content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none; }
.palco-brilho::before {             /* a faixa larga que atravessa a cortina */
  left: 0;
  width: 300%;
  background: linear-gradient(100deg, rgba(214, 90, 74, 0) 32%, rgba(214, 90, 74, 0.3) 44%, rgba(255, 170, 150, 0.46) 50%, rgba(214, 90, 74, 0.3) 56%, rgba(214, 90, 74, 0) 68%);
  transform: translateX(-66.66%);
}
.palco-brilho::after {              /* as dobras: fios de luz que ondulam de um lado para o outro */
  left: -60px;
  right: -60px;
  opacity: 0.55;
  background:
    repeating-linear-gradient(90deg, rgba(255, 150, 130, 0) 0, rgba(255, 150, 130, 0.28) 14px, rgba(255, 150, 130, 0) 30px, rgba(255, 150, 130, 0) 52px),
    repeating-linear-gradient(90deg, rgba(255, 150, 130, 0) 0, rgba(255, 150, 130, 0.18) 22px, rgba(255, 150, 130, 0) 44px, rgba(255, 150, 130, 0) 86px);
  -webkit-mask-image: radial-gradient(ellipse 46% 80% at 50% 36%, #000 20%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 46% 80% at 50% 36%, #000 20%, rgba(0, 0, 0, 0) 100%);
}

/* o L no oval gravado no veludo, no alto, logo acima da Carol: a cabeça dela passa na frente da base do oval, como
   a capa de revista passa na frente do título. O brilho especular corre só pelas cristas (relevo-brilho). */
.palco-relevo {
  --px: -10px; --py: -8px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--relevo-y) - var(--relevo-w) / 2);
  width: var(--relevo-w);
  height: var(--relevo-w);
  margin-left: calc(var(--relevo-w) / -2);
  background: url("/assets/dossie/relevo-noite.webp") center / contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}
.palco-relevo::after {              /* screen: a luz clareia o que já está gravado, sem pintar por cima */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(239, 235, 227, 0) 40%, rgba(239, 235, 227, 0.95) 50%, rgba(239, 235, 227, 0) 60%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: url("/assets/dossie/relevo-brilho.webp") center / contain no-repeat;
  mask: url("/assets/dossie/relevo-brilho.webp") center / contain no-repeat;
  mix-blend-mode: screen;
}

/* o brilho oxblood atrás dela (respira devagar com o movimento liberado) */
.palco-halo {
  --px: 4px; --py: 3px;
  position: absolute;
  z-index: 4;
  left: 50%;
  top: calc(var(--palco-h) - var(--carol-w) * 1.52);
  width: calc(var(--carol-w) * 1.5);
  height: calc(var(--carol-w) * 1.5);
  margin-left: calc(var(--carol-w) * -0.75);
  background: radial-gradient(closest-side, rgba(196, 70, 56, 0.42), rgba(176, 74, 63, 0.14) 55%, rgba(176, 74, 63, 0) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* O feixe (a luz na frente da abertura): um cone de luz quente que desce de uma fonte
   fora do quadro, com raios finos, névoa e poeira. A máscara do próprio elemento recorta o cone e apaga a base; a
   poeira anda por dentro dele sem que o cone se mexa. */
.feixe {
  pointer-events: none;
  -webkit-mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 94%);
  -webkit-mask-composite: source-in;
  mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0) 94%);
  mask-composite: intersect;
}
.feixe::before, .feixe::after { content: ""; position: absolute; inset: 0; }
.feixe::before {                    /* a luz: o miolo do cone mais forte, raios finos e duas nuvens baixas de névoa */
  transform-origin: 50% -70%;
  background:
    radial-gradient(ellipse 24% 9% at 42% 46%, rgba(var(--luz), 0.12), rgba(var(--luz), 0) 70%),
    radial-gradient(ellipse 28% 8% at 60% 66%, rgba(var(--luz), 0.10), rgba(var(--luz), 0) 70%),
    repeating-conic-gradient(from 166deg at 50% -70%, rgba(var(--luz), 0) 0deg, rgba(var(--luz), 0.06) 0.5deg, rgba(var(--luz), 0) 1.3deg),
    conic-gradient(from 166deg at 50% -70%, rgba(var(--luz), 0) 0deg, rgba(var(--luz), 0.09) 7deg, rgba(var(--luz), 0.2) 14deg, rgba(var(--luz), 0.09) 21deg, rgba(var(--luz), 0) 28deg, rgba(var(--luz), 0) 360deg);
}
.feixe::after {                     /* poeira na luz: pontos finos num ladrilho que desce devagar */
  top: -340px;
  opacity: 0.9;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='340'%3E%3Cg fill='%23ece2d6'%3E%3Ccircle cx='18' cy='30' r='1' opacity='.55'/%3E%3Ccircle cx='74' cy='88' r='.7' opacity='.45'/%3E%3Ccircle cx='131' cy='22' r='1.3' opacity='.35'/%3E%3Ccircle cx='190' cy='64' r='.8' opacity='.6'/%3E%3Ccircle cx='238' cy='140' r='1.1' opacity='.4'/%3E%3Ccircle cx='52' cy='168' r='1.4' opacity='.3'/%3E%3Ccircle cx='112' cy='130' r='.6' opacity='.6'/%3E%3Ccircle cx='160' cy='196' r='1' opacity='.5'/%3E%3Ccircle cx='214' cy='244' r='.7' opacity='.55'/%3E%3Ccircle cx='28' cy='262' r='.9' opacity='.45'/%3E%3Ccircle cx='96' cy='300' r='1.2' opacity='.35'/%3E%3Ccircle cx='148' cy='276' r='.6' opacity='.6'/%3E%3Ccircle cx='246' cy='316' r='1' opacity='.4'/%3E%3Ccircle cx='70' cy='224' r='.5' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 340px repeat;
}

/* a frente da abertura já é a cena: a mesma cortina de veludo, na sombra, atrás do título e do campo do @ (o que a
   textura de damasco fazia na v1), o brilho acetinado passando por ela e o feixe descendo da esquerda, na mesma
   direção da luz da sala, até o palco */
.abertura-frente { position: relative; isolation: isolate; }
.abertura-frente::before, .abertura-brilho {
  content: "";
  position: absolute;
  top: -120px;
  bottom: -150px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  pointer-events: none;
}
.abertura-frente::before {          /* a cortina no tom da foto da sala: preto quente e dobras vermelhas fora de foco */
  z-index: -3;
  background:
    radial-gradient(ellipse 32% 50% at 36% 42%, rgba(var(--luz), 0.07), rgba(var(--luz), 0) 72%),
    radial-gradient(ellipse 62% 92% at 50% 44%, rgba(7, 5, 5, 0) 26%, rgba(7, 5, 5, 0.66) 70%, rgba(7, 5, 5, 0.94) 100%),
    linear-gradient(180deg, rgba(7, 5, 5, 0.7) 0%, rgba(7, 5, 5, 0) 34%),
    var(--pregas-noite),
    #120e0d;
  filter: blur(1.4px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 180px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 180px);
}
.abertura-brilho {                  /* o brilho acetinado da cortina da frente, o mesmo da sala (a faixa anda por transform) */
  z-index: -2;
  overflow: hidden;
  mix-blend-mode: overlay;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 200px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 200px);
}
.abertura-brilho::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(100deg, rgba(214, 90, 74, 0) 36%, rgba(214, 90, 74, 0.26) 47%, rgba(255, 170, 150, 0.36) 50%, rgba(214, 90, 74, 0.26) 53%, rgba(214, 90, 74, 0) 64%);
  transform: translateX(-66.66%);
}
.abertura-luz {
  --feixe-desvio: 100px;            /* o topo do feixe fica à esquerda do centro; a base chega onde a luz da sala entra */
  position: absolute;
  z-index: -1;
  left: calc(50% - var(--feixe-desvio));
  top: -120px;
  bottom: -190px;
  width: var(--feixe-largura, 300px);
  margin-left: calc(var(--feixe-largura, 300px) / -2);
  overflow: hidden;                 /* a poeira anda dentro do cone; nada gira para fora da página */
  transform-origin: 50% 0;
  rotate: -8deg;
  /* a luz vai até o palco (não some antes da emenda) */
  -webkit-mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 24%, rgba(0, 0, 0, 0.66) 64%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0) 100%);
  mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, #000 24%, rgba(0, 0, 0, 0.66) 64%, rgba(0, 0, 0, 0.5) 82%, rgba(0, 0, 0, 0) 100%);
}
.abertura-luz::after { opacity: 0.6; }   /* menos poeira atrás do texto pequeno */

/* a Carol: base no pé do palco, dentro da poça; a luz do feixe chega nela pelo contorno (carol-hero-luz: a luz de
   recorte vem de cima e da esquerda, como o feixe) e pela camada de recorte logo acima */
.palco-carol {
  --px: 8px; --py: 5px;
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 0;
  width: var(--carol-w);
  height: auto;
  margin-left: calc(var(--carol-w) / -2);
  filter: drop-shadow(-1px -1px 1px rgba(var(--luz), 0.12)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6));   /* sem halo claro em volta (QA 18h) */
}

/* luz de cima e da esquerda sobre ela, recortada pela própria silhueta (a máscara é a mesma imagem) */
.palco-recorte {
  --px: 8px; --py: 5px;
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 0;
  width: var(--carol-w);
  height: calc(var(--carol-w) * 4 / 3);
  margin-left: calc(var(--carol-w) / -2);
  background:
    radial-gradient(ellipse 44% 16% at 40% 7%, rgba(var(--luz), 0.5), rgba(var(--luz), 0) 100%),
    linear-gradient(118deg, rgba(var(--luz), 0.34) 0%, rgba(var(--luz), 0.08) 30%, rgba(var(--luz), 0) 46%),
    radial-gradient(ellipse 60% 34% at 44% 34%, rgba(var(--luz), 0.14), rgba(var(--luz), 0) 100%);
  mix-blend-mode: soft-light;
  -webkit-mask: url("/assets/dossie/carol-sala-600.webp") center / 100% 100% no-repeat;
  mask: url("/assets/dossie/carol-sala-600.webp") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* a poeira no feixe: form.js desenha no quadro da sala (flutua, cintila e some fora da luz) */
.palco-poeira {
  --px: -10px; --py: -8px;
  position: absolute;
  z-index: 4;             /* atrás da Carol (5): a poeira nunca passa no rosto dela (feedback 25/09 17h30) */
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* as leitoras em profundidade: perto (r1, r3) maiores, iluminadas pelo lado da luz, com um fio de luz oxblood que
   corre em volta do oval, na frente de tudo; longe (r2, r4 e, no desktop, r5, r6) menores, fora de foco e atrás da
   névoa. Cada uma flutua e gira de leve no seu tempo; no hover entra em foco e acende. */
@property --giro-fio { syntax: "<angle>"; inherits: false; initial-value: 300deg; }
.palco-retrato {
  --ret-w: 62px;
  --px: 6px; --py: 4px;
  --fio-base: rgba(168, 164, 154, 0.34);
  --fio-luz: rgba(228, 225, 217, 0.7);
  position: absolute;
  z-index: 2;
  width: var(--ret-w);
  margin: 0;
  text-align: center;
}
.palco-retrato.r1, .palco-retrato.r3 {
  --ret-w: 94px; --px: 20px; --py: 14px;
  --fio-base: rgba(212, 154, 143, 0.42);
  --fio-luz: rgba(255, 214, 204, 1);
  z-index: 7;
}
.palco-retrato.r1 { left: max(4px, calc(50% - 190px)); top: 196px; }
.palco-retrato.r3 { right: max(4px, calc(50% - 190px)); top: 196px; }
.palco-retrato.r2 { left: max(16px, calc(50% - 178px)); top: 58px; }
.palco-retrato.r4 { right: max(16px, calc(50% - 178px)); top: 66px; }
.palco-retrato.r5, .palco-retrato.r6 { display: none; }

/* retrato oval com fio (DESIGN-V3 2.8): recorte oval 4:5 e um fio a poucos pixels; sem moldura dourada */
.moldura { position: relative; display: block; width: var(--ret-w); height: calc(var(--ret-w) * 1.25); margin: 0 auto; border-radius: 50%; }   /* 4:5 sem depender de aspect-ratio (iOS 14) */
.moldura .moldura-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--noite-4);
}
.moldura::before {                  /* a luz do feixe no rosto, do lado de cima e da esquerda */
  content: ""; position: absolute; z-index: 1; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 26% 10%, rgba(var(--luz), 0.3), rgba(var(--luz), 0) 64%);
  mix-blend-mode: screen;
}
.moldura::after {                   /* o fio: um oval fino com um ponto de luz que corre em volta */
  content: ""; position: absolute; z-index: 2; inset: -6px; border-radius: 50%; pointer-events: none;
  padding: 1.5px;
  background: conic-gradient(from var(--giro-fio), var(--fio-base) 0deg, var(--fio-luz) 36deg, var(--fio-base) 76deg, var(--fio-base) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.palco-retrato .moldura {
  filter: blur(0.7px) brightness(0.76) saturate(0.88);
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.7);
  transition: filter var(--dur-slow) var(--ease-standard), scale var(--dur-slow) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-standard);
}
.palco-retrato.r1 .moldura, .palco-retrato.r3 .moldura {
  filter: brightness(1.06) contrast(1.04);
  box-shadow: 0 0 30px -4px rgba(196, 70, 56, 0.62), 0 20px 30px -10px rgba(0, 0, 0, 0.85);
}
.palco-retrato:hover .moldura { filter: brightness(1.1) contrast(1.04); box-shadow: 0 0 38px -2px rgba(196, 70, 56, 0.8), 0 22px 32px -10px rgba(0, 0, 0, 0.85); }
.palco-retrato:hover { --fio-base: rgba(212, 154, 143, 0.7); --fio-luz: rgba(255, 224, 216, 1); z-index: 7; }
.palco-retrato:hover figcaption { color: var(--marfim-texto); }

.palco-retrato figcaption {
  width: calc(100% + 48px);
  margin: 12px -24px 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: 13px;
  line-height: 1.15;
  color: var(--pedra-clara);
  text-wrap: balance;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.8);
  transition: color var(--dur-base) var(--ease-standard);
}
.palco-retrato.r1 figcaption, .palco-retrato.r3 figcaption { font-size: 15px; color: var(--marfim-texto); }

/* grão de filme só na cena (o da página continua parado) */
.palco-grao {
  position: absolute;
  z-index: 9;
  inset: -48px;
  pointer-events: none;
  opacity: 0.7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.93  0 0 0 0 0.92  0 0 0 0 0.90  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Quem vai te ler: entra por cima da base do palco (a Carol some na página por baixo do nome) */
.quem-le { position: relative; z-index: 5; max-width: 560px; margin: -92px auto 0; text-align: center; }
.quem-le > .mono { margin: 0 0 8px; color: var(--marfim-corpo); text-shadow: 0 0 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.9); }   /* passa por cima da base da Carol */
.quem-le-nome { margin: 0 0 22px; font-family: var(--font-heading); font-weight: var(--weight-medium); font-size: 30px; line-height: 1.1; color: var(--marfim-texto); text-shadow: 0 0 18px rgba(0, 0, 0, 0.9); }
.quem-le .carol { border: 0; padding: 0; text-align: center; }
.quem-le .carol p { max-width: 36ch; margin-left: auto; margin-right: auto; font-family: var(--font-sans); font-style: normal; font-weight: var(--weight-regular); font-size: 17px; line-height: 1.6; color: var(--marfim-corpo); }
.quem-le .carol p:first-child { max-width: 34ch; font-family: var(--font-heading); font-style: italic; font-weight: var(--weight-medium); font-size: 22px; line-height: 1.4; color: var(--marfim-texto); }

/* O fecho da Carol (feedback 25/09 16h: sai a assinatura manuscrita, nada de script): o selo, o L no oval gravado
   em cera oxblood, pousado num fio fino, e o nome em caixa alta de espaçamento largo. */
.fecho { position: relative; display: flex; flex-direction: column; align-items: center; margin: 34px auto 0; }
.fecho::before {                    /* o fio oxblood que passa atrás do selo */
  content: ""; position: absolute; left: 50%; top: 29px; width: min(300px, 86%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(176, 74, 63, 0), var(--oxblood-vivo) 32%, var(--oxblood-vivo) 68%, rgba(176, 74, 63, 0));
}
.fecho-selo {
  position: relative;
  z-index: 1;
  display: block;
  width: 46px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background:
    url("/assets/dossie/relevo-oxblood.webp") center / 92px 92px no-repeat,
    radial-gradient(ellipse 80% 70% at 38% 28%, #6a1d18 0%, var(--oxblood) 58%, var(--oxblood-fundo) 100%);
  box-shadow: 0 0 0 6px var(--noite-1), 0 0 0 7px var(--linha-ouro-forte), 0 0 30px 6px rgba(176, 74, 63, 0.28), 0 14px 26px -10px rgba(0, 0, 0, 0.9);
}
.fecho-selo::after {                /* o brilho que atravessa a cera */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(var(--luz), 0) 34%, rgba(var(--luz), 0.4) 50%, rgba(var(--luz), 0) 66%);
  transform: translateX(-140%);
}
.quem-le .carol .fecho-nome {
  max-width: none;
  margin: 18px 0 0;
  padding-left: 0.4em;              /* o espaçamento largo também sobra no fim: centraliza de verdade */
  font-family: var(--font-display);
  font-style: normal;
  font-weight: var(--weight-regular);
  font-size: 14px;
  font-variation-settings: "opsz" 14;
  letter-spacing: 0.4em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--marfim-texto);
}

/* --------------------------------------------------------------------------
   PERGUNTAS · cada uma num cartão noite, número Bodoni itálico em oxblood-claro
   -------------------------------------------------------------------------- */

.q {
  position: relative;
  margin: 0 0 16px;
  padding: 20px;
  min-width: 0;
}

fieldset.q { margin-inline: 0; }

.q-num {
  display: block;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
  color: var(--oxblood-claro);
}

.q-titulo {
  display: block;
  max-width: 30ch;
  margin: 0 0 var(--space-2);
  padding: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: clamp(23px, 0.56vw + 20.8px, 28px);
  line-height: 1.15;
  color: var(--marfim-texto);
}

legend.q-titulo { float: left; width: 100%; }
legend.q-titulo + * { clear: left; }

.q-dica { font-size: 15px; line-height: 1.5; color: var(--marfim-apoio); margin: 0 0 var(--space-4); }

.campo { display: block; margin: 0 0 var(--space-4); min-width: 0; }
.campo:last-child { margin-bottom: 0; }

.campo-rotulo { display: block; margin: 0 0 var(--space-2); }

label.campo-rotulo:not(.mono) {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--marfim-texto);
}

.campo-rotulo.mono { color: var(--pedra-clara); }

.campo-dica { font-size: 14px; line-height: 1.45; color: var(--marfim-apoio); margin: -2px 0 10px; }
.campo-dica-depois { margin: 10px 0 0; }

/* Campos noite (DESIGN-V3 2.5): poço preto, borda pedra-média (5,2:1), foco oxblood-claro */
input[type="text"],
input[type="tel"],
select,
textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background-color: var(--noite-0);
  color: var(--marfim-texto);
  border: 1px solid var(--pedra-media);
  border-radius: var(--raio-campo);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: var(--weight-regular);
  line-height: 1.5;
  outline: none;
  caret-color: var(--oxblood-claro);
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder, textarea::placeholder { color: var(--pedra-clara); opacity: 1; }

input[type="text"]:hover, input[type="tel"]:hover, select:hover, textarea:hover { border-color: var(--pedra-clara); }

input:focus, select:focus, textarea:focus {
  border-color: var(--oxblood-claro);
  box-shadow: 0 0 0 3px rgba(212, 154, 143, 0.18);
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--lacre); }

/* autopreenchimento do navegador sem a caixa azul clara no escuro */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--marfim-texto);
  -webkit-box-shadow: 0 0 0 1000px var(--noite-0) inset;
  caret-color: var(--marfim-texto);
  transition: background-color 9999s ease-out;
}

select {
  padding-right: 40px;
  font-size: 16px;
  background-image: var(--icone-seta);
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px 8px;
  cursor: pointer;
}

select option { background: var(--noite-3); color: var(--marfim-texto); }

/* cresce com o texto (field-sizing onde existe; form.js ajusta a altura no Safari), até 60% da tela */
textarea { min-height: 150px; max-height: 60vh; resize: none; padding-bottom: 14px; field-sizing: content; }
/* sem field-sizing o campo não cresce sozinho: a alça volta, transparente, longe do microfone */
@supports not (field-sizing: content) {
  textarea { resize: vertical; }
  textarea::-webkit-resizer { background: transparent; }
}
textarea.alta { min-height: 220px; }
textarea.media { min-height: 168px; }

/* Prefixo (@, R$) e sufixo dentro do campo */
.com-prefixo, .com-sufixo { position: relative; min-width: 0; }

.com-prefixo .prefixo {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font: 600 16px/1 var(--font-sans);
  color: var(--pedra-clara);
  pointer-events: none;
}

.com-prefixo input { padding-left: 46px; }
#ident-handle { padding-left: 40px; }

.com-sufixo .sufixo {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--pedra-clara);
  pointer-events: none;
  white-space: nowrap;
}

.com-sufixo input { padding-right: 150px; }

.valor-unidade { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--space-2); }

.campo-curto { max-width: 340px; }

.q .area ~ .campo { margin-top: var(--space-4); }

.linha2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--space-3); }

@media (min-width: 560px) {
  .linha2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .linha2 > .campo { margin-bottom: 0; }
}

/* Q14: cada par (concorrente N e o que ela vende) separado do seguinte, como na Q15 */
.concorrente-entrada + .concorrente-entrada {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--linha-neutra);
}

/* Q15: um painel por concorrente */
.concorrente {
  margin: 12px 0 0;
  padding: 16px;
  background: var(--noite-2);
  border: 1px solid var(--linha-neutra);
  border-radius: var(--raio-campo);
}

.concorrente-nome {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 21px;
  line-height: 1.2;
  color: var(--marfim-texto);
  overflow-wrap: anywhere;
}

#q15-vazio { margin: 0; padding: 14px 16px; border: 1px dashed var(--linha-ouro-forte); border-radius: var(--raio-campo); }

.bloco-f-topo { margin: 0 0 16px; }

.carol-bloco { margin: 0 0 20px; }

/* Área de texto com microfone */
.area { position: relative; }
.area textarea.com-mic { padding-right: 60px; }

.mic {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--pedra-media);
  background: var(--noite-3);
  color: var(--pedra-clara);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard);
}

.mic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }   /* alvo de toque de 48 px */
.mic:hover { background: var(--noite-4); }
.mic svg { width: 19px; height: 19px; }

.mic[aria-pressed="true"] {
  background: var(--oxblood);
  border-color: var(--oxblood-claro);
  color: var(--marfim-texto);
}

/* Consentimento: a caixa de seleção reta, oxblood quando marcada */
.consentimento {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: var(--space-5) 0 var(--space-2);
  padding: 16px;
  background: var(--noite-2);
  border: 1px solid var(--linha-neutra);
  border-radius: var(--raio-cartao);
}

.consentimento input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1.5px solid var(--pedra-media);
  border-radius: 2px;
  background: var(--noite-0);
  cursor: pointer;
}

.consentimento input[type="checkbox"]:checked {
  border-color: var(--oxblood-claro);
  background: var(--icone-check-claro) center / 15px 15px no-repeat, var(--oxblood);
}

.consentimento input[type="checkbox"][aria-invalid="true"] { border-color: var(--lacre); }

.consentimento label { font-size: 14px; line-height: 1.55; color: var(--marfim-corpo); cursor: pointer; }

/* Honeypot: fora da tela, fora da leitura */
.pote { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Mensagens: forma + palavra + cor */
.erro-campo, .aviso-campo, .valor-lido {
  position: relative;
  margin: var(--space-2) 0 0;
  padding-left: 22px;
  font-size: 14px;
  line-height: 1.45;
}

.erro-campo::before, .aviso-campo::before, .valor-lido::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.3em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.erro-campo { color: var(--lacre); }
.erro-campo::before { border: 2px solid var(--lacre); }

.aviso-campo { color: var(--oxblood-claro); }
.aviso-campo::before, .valor-lido.is-conferir::before {
  border: 2px solid var(--oxblood-claro);
  background: linear-gradient(90deg, var(--oxblood-claro) 50%, transparent 50%);
}

/* "Entendi R$ 3.500 por mês." embaixo do campo de dinheiro */
.valor-lido { color: var(--salvia); }
.valor-lido::before {
  width: 10px;
  height: 5px;
  top: 0.42em;
  left: 2px;
  border-radius: 0;
  border-left: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
}
.valor-lido.is-conferir { color: var(--oxblood-claro); font-weight: var(--weight-medium); }
.valor-lido.is-conferir::before { width: 12px; height: 12px; top: 0.3em; left: 1px; border-radius: 50%; transform: none; }

/* a mensagem do consentimento fica acima da caixa ("no quadradinho de baixo") */
.erro-consentimento { margin: var(--space-5) 0 0; }
.erro-consentimento:not([hidden]) + .consentimento { margin-top: var(--space-2); }

.erro-geral {
  margin: var(--space-4) 0 0;
  padding: 12px 16px;
  border: 1px solid rgba(229, 104, 90, 0.32);
  border-top: 2px solid var(--lacre);
  border-radius: 0;
  background: var(--noite-2);
  color: var(--lacre);
  font-size: 15px;
  line-height: 1.45;
}

.status-texto { margin: var(--space-4) 0 0; font-size: 15px; color: var(--marfim-apoio); min-height: 0; }
.status-texto:empty { margin: 0; }

/* Aviso brando do bloco: bloco oxblood compacto, título marfim, botão linha */
.aviso-bloco { margin: 8px 0 0; padding: 16px; }

.aviso-bloco-titulo {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 20px;
  line-height: 1.2;
  color: var(--marfim-texto);
}

.aviso-bloco-texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--marfim-corpo); }

.aviso-bloco-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.aviso-bloco-acoes .btn-secundario { width: auto; min-width: 0; margin: 0; padding: 0 var(--space-5); }
.aviso-bloco-acoes .link-discreto { margin: 0; }

/* Identificação: o formulário inteiro num cartão */
.form-ident .btn-primario { margin-top: var(--space-5); }

/* --------------------------------------------------------------------------
   BOTÕES (DESIGN-V3 2.5): oxblood cheio para a ação da tela (nome da v1: .btn-ouro), linha de pedra para a secundária
   -------------------------------------------------------------------------- */

.btn-primario,
.btn-ouro,
.btn-secundario {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 28px;
  margin: var(--space-5) 0 0;
  border-radius: var(--raio-botao);
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    filter var(--dur-fast) var(--ease-standard),
    background var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.btn-primario, .btn-ouro {
  border: 1px solid rgba(212, 154, 143, 0.35);
  background: var(--oxblood);
  color: var(--marfim-texto);
  box-shadow: 0 14px 28px -16px rgba(0, 0, 0, 0.9);
}

.btn-ouro { min-height: 60px; font-size: 15px; }

.btn-primario:hover, .btn-ouro:hover { background: var(--vinho-2); filter: none; }

.btn-secundario {
  min-height: 50px;
  margin-top: var(--space-3);
  background: transparent;
  color: var(--marfim-texto);
  border: 1px solid var(--pedra-media);
  font-size: 13px;
}

.btn-secundario:hover { background: rgba(228, 225, 217, 0.06); }

.papel .btn-secundario { color: var(--tinta); border-color: var(--pedra-media); }
.papel .btn-secundario:hover { background: rgba(74, 18, 16, 0.06); }

.btn-primario:active, .btn-ouro:active, .btn-secundario:active { transform: translateY(1px); }

.btn-primario[disabled], .btn-ouro[disabled], .btn-secundario[disabled] { opacity: 0.55; cursor: progress; filter: none; }

.is-carregando::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: girar 0.8s linear infinite;
}

@keyframes girar { to { transform: rotate(360deg); } }

.link-discreto,
.voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: var(--space-4) 0 0;
  padding: var(--space-2) var(--space-1);
  background: transparent;
  border: 0;
  color: var(--pedra-clara);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--linha-vinho);
  text-underline-offset: 4px;
  cursor: pointer;
}

.link-discreto:hover, .voltar:hover { color: var(--oxblood-claro); text-decoration-color: var(--oxblood-claro); }

/* "Se ela não abrir sozinha, toca aqui.": frase inteira, em caixa baixa, sem gritar por cima do título */
#link-dossie { text-transform: none; letter-spacing: 0; font: 500 15px/1.4 var(--font-sans); color: var(--pedra-clara); text-decoration: underline; text-decoration-color: var(--linha-vinho); }

.voltar { margin: 0; padding: var(--space-2) var(--space-4); color: var(--pedra-clara); }

.nav { margin-top: var(--space-3); text-align: center; }

.par-botoes .btn-secundario { margin-top: var(--space-3); }

/* --------------------------------------------------------------------------
   "É VOCÊ?" · o cartão do perfil (papel, levemente torto, por cima) preso por um
   clipe a quem vai ler (noite): papéis empilhados (DESIGN-V3 2.9)
   -------------------------------------------------------------------------- */

.ligacao { max-width: 520px; margin: 0 auto; }

.perfil {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  margin: 0;
  text-align: left;
  transform: rotate(-1.2deg);
}

/* a foto do perfil é redonda: é a interface do Instagram, dentro do papel (aro de 1 px, sem dourado) */
.perfil-foto {
  grid-row: 1 / span 4;
  width: 64px;
  height: 64px;
  padding: 3px;
  border-radius: 50%;
  border: 1px solid var(--linha);
  background: transparent;
}

.perfil-foto img, .perfil-inicial {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--papel-2);
}

.perfil-inicial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--marfim-texto);
  background: var(--oxblood);
}

.perfil-foto img:not([hidden]) + .perfil-inicial { display: none; }

.perfil-nome {
  grid-column: 2;
  margin: 2px 0 2px;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: 22px;
  line-height: 1.15;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.perfil-handle {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: 1.35;
  color: var(--tinta-corpo);
  overflow-wrap: anywhere;
}

.perfil-verificado { display: inline-flex; color: #2f6db5; }

.perfil-numeros { grid-column: 2; margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: var(--tinta-apoio); }
.perfil-numeros:empty { display: none; }

.perfil-bio {
  grid-column: 2;
  margin: 0;
  padding-top: 8px;
  border-top: 1px solid var(--linha);
  white-space: pre-line;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-corpo);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.perfil-bio:empty { display: none; }

/* o clipe de papel (DESIGN-V3 2.9): −6 px em cima e −6 px embaixo, os dois cartões se sobrepõem 12 px */
.elo { position: relative; z-index: 2; height: 0; width: 100%; margin: -6px auto; }
.elo::before {
  content: ""; position: absolute; left: 16%; top: -26px; width: 15px; height: 44px; transform: rotate(-4deg);
  background: var(--pedra-clara);
  -webkit-mask: var(--icone-clipe) center / contain no-repeat;
  mask: var(--icone-clipe) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5));
}
.elo::after { content: none; }

.quem-vai-ler {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
}

/* Carol mini: oval 48 × 60 com fio a 4 px (DESIGN-V3 2.8) */
.anel { position: relative; display: block; width: 48px; height: 60px; margin: 0 4px; }
.anel img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 30%; background: var(--noite-4); }
.anel::after { content: ""; position: absolute; inset: -4px; border: 1px solid var(--linha-ouro-forte); border-radius: 50%; pointer-events: none; }

.quem-vai-ler .mono { margin: 0 0 4px; }
.quem-vai-ler-nome { margin: 0 0 2px; font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: 22px; line-height: 1.1; color: var(--marfim-texto); }
.quem-vai-ler-linha { margin: 0; font-size: 15px; line-height: 1.4; color: var(--marfim-corpo); }

.e-voce-nota { max-width: 44ch; margin: 28px auto 0; text-align: center; }
.tela-e-voce #perfil-sem-posts { text-align: center; }

/* --------------------------------------------------------------------------
   REVISÃO
   -------------------------------------------------------------------------- */

.rev { list-style: none; margin: 0; padding: 0; }

#rev-lista { padding: 2px 18px; }

#rev-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nome editar" "estado editar";
  column-gap: 12px;
  row-gap: 7px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha-neutra);
}

#rev-lista li:last-child { border-bottom: 0; }
#rev-lista li > span:first-child { grid-area: nome; font-size: 15.5px; line-height: 1.35; color: var(--marfim-texto); }
#rev-lista .rev-direita, #rev-numeros-lista .rev-direita { display: contents; }
#rev-lista .s { grid-area: estado; justify-self: start; }
#rev-lista .link-discreto { grid-area: editar; margin: 0; padding: 0 var(--space-2); }

/* etiqueta de estado, reta e sem tinta: forma + palavra + cor (DESIGN-V3 2.7) */
#rev-lista .s, #rev-numeros-lista .s {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 9px;
  border-radius: 2px;
  border: 1px solid currentColor;
  background: transparent;
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

#rev-lista .s::before, #rev-numeros-lista .s::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
}

/* respondida: sálvia com check traçado; conferir/parcial: meio disco oxblood-claro; em branco: pedra-clara tracejada */
.rev .s.completo { color: var(--salvia); }
#rev-lista .s.completo::before, #rev-numeros-lista .s.completo::before {
  width: 9px; height: 5px; margin: 0 1px 3px; border: 0; border-radius: 0;
  border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg);
}
.rev .s.parcial, .rev .s.conferir { color: var(--oxblood-claro); }
.rev .s.parcial::before, .rev .s.conferir::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.rev .s.vazio { color: var(--pedra-clara); border-style: dashed; }

.rev-avisos { --st: var(--oxblood-vivo); margin: var(--space-5) 0 0; }
.rev-avisos > .mono { margin: 0; color: var(--oxblood-claro); }
.rev-avisos ul { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.rev-avisos li { margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.45; color: var(--marfim-texto); }
.rev-avisos li:last-child { margin-bottom: 0; }
.rev-avisos .link-discreto { margin: var(--space-1) 0 0; padding-left: 0; min-height: 36px; }

/* os números que entram na conta, como foram entendidos */
.rev-numeros { margin: var(--space-5) 0 0; padding: 20px; }
.rev-numeros > .mono { margin: 0 0 var(--space-2); }
.rev-numeros > .sub { font-size: 15px; margin: 0 0 var(--space-2); }

#rev-numeros-lista li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "valor valor" "rotulo editar" "tag tag";
  column-gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--linha-neutra);
}

.rev-valor {
  grid-area: valor;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: 24px;
  line-height: 1.2;
  color: var(--marfim-numero);
  font-variant-numeric: lining-nums tabular-nums;
  overflow-wrap: anywhere;
}

.rev-rotulo { grid-area: rotulo; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--marfim-apoio); }
#rev-numeros-lista .s { grid-area: tag; justify-self: start; margin-top: 8px; }
#rev-numeros-lista .link-discreto { grid-area: editar; align-self: end; min-height: 36px; margin: 0; padding: 0 var(--space-2); }
#rev-numeros-lista li.is-conferir .rev-valor { color: var(--oxblood-claro); }

.carol-revisao { margin: var(--space-6) 0 0; }

/* O link do diagnóstico: papel, porque é dela */
.guardar-link { margin: var(--space-5) 0 0; padding: 18px; text-align: left; }
.guardar-link > .mono { margin: 0 0 var(--space-2); }
.guardar-link-texto { margin: 0 0 var(--space-3); font-size: 15px; line-height: 1.5; color: var(--tinta-corpo); }
.guardar-link .nota { margin: var(--space-3) 0 0; color: var(--tinta-apoio); }
.guardar-link .btn-secundario { margin-top: var(--space-3); }
.guardar-link .status-texto { color: var(--tinta-apoio); }

.link-endereco {
  margin: 0;
  padding: 12px 14px;
  background: var(--papel-2);
  border: 1px solid var(--linha);
  border-radius: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

.link-endereco:empty { display: none; }

/* campo temporário do plano b de "Copiar o link" (form.js) */
.copia-oculta { position: fixed; top: 0; left: -10000px; width: 1px; height: 1px; opacity: 0; font-size: 16px; }

/* --------------------------------------------------------------------------
   RECEBIDO E FECHADO
   -------------------------------------------------------------------------- */

.tela-centro { position: relative; isolation: isolate; max-width: 520px; padding-top: 56px; text-align: center; }

/* recebido e fechado (feedback 25/09 16h: a mesma intensidade da abertura): o veludo na sombra atrás do alto da tela,
   o feixe de cima caindo sobre a Carol (ou sobre o carimbo), o brilho vinho atrás dela e, com movimento liberado, o
   oval respirando e o arco correndo. O texto fica no escuro, bem longe do teto de contraste. */
.tela-centro::before {
  --foco-y: 259px;                  /* centro do oval (56 + 8 + 75) mais os 120 px que o veludo sobe */
  content: "";
  position: absolute;
  z-index: -2;
  top: -120px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(circle 170px at 50% var(--foco-y), rgba(176, 74, 63, 0.34), rgba(176, 74, 63, 0.1) 60%, rgba(176, 74, 63, 0) 100%),
    radial-gradient(ellipse 30% 70% at 50% 20%, rgba(var(--luz), 0.07), rgba(var(--luz), 0) 72%),
    radial-gradient(ellipse 58% 90% at 50% 30%, rgba(7, 5, 5, 0.3) 0%, rgba(7, 5, 5, 0.74) 60%, rgba(7, 5, 5, 0.94) 100%),
    var(--pregas-noite),
    #120e0d;
  filter: blur(1.2px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 160px, #000 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000 160px, #000 58%, rgba(0, 0, 0, 0) 100%);
}
.tela-centro::after {               /* o feixe: o mesmo cone de luz quente, com raios finos */
  content: "";
  position: absolute;
  z-index: -1;
  top: -120px;
  left: 50%;
  width: min(640px, 100vw);
  height: 560px;
  margin-left: calc(min(640px, 100vw) / -2);
  pointer-events: none;
  background:
    repeating-conic-gradient(from 166deg at 50% -70%, rgba(var(--luz), 0) 0deg, rgba(var(--luz), 0.05) 0.5deg, rgba(var(--luz), 0) 1.3deg),
    conic-gradient(from 166deg at 50% -70%, rgba(var(--luz), 0) 0deg, rgba(var(--luz), 0.07) 7deg, rgba(var(--luz), 0.16) 14deg, rgba(var(--luz), 0.07) 21deg, rgba(var(--luz), 0) 28deg, rgba(var(--luz), 0) 360deg);
  -webkit-mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0) 92%);
  -webkit-mask-composite: source-in;
  mask-image:
    conic-gradient(from 166deg at 50% -70%, rgba(0, 0, 0, 0) 0deg, #000 8deg, #000 20deg, rgba(0, 0, 0, 0) 28deg, rgba(0, 0, 0, 0) 360deg),
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.8) 45%, rgba(0, 0, 0, 0) 92%);
  mask-composite: intersect;
}
.tela-centro[data-tela="fechado"]::before { --foco-y: 236px; }
.tela-centro h2 { font-size: clamp(34px, 1.58vw + 27.8px, 48px); margin: 0 0 var(--space-4); }
.tela-centro .guardar-link { margin: var(--space-5) auto 0; }
.tela-centro > .nota { margin-top: var(--space-5); }
.tela-centro .btn-secundario { max-width: 320px; margin: var(--space-5) auto 0; }

/* recebido: a Carol num oval 120 × 150 e o anel animado (DESIGN-V3 2.8): um oval de pedra parado e um arco oxblood
   que percorre o oval. Quem gira é o ângulo do gradiente (--giro), não o elemento: o anel não se deforma. */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.anel-grande {
  position: relative;
  display: block;
  width: 120px;
  height: 150px;
  margin: 8px auto var(--space-6);
}

.anel-grande img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
  background: var(--noite-4);
}

.anel-grande::before, .anel-grande::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none; }
.anel-grande::after { border: 1px solid var(--pedra); }
.anel-grande::before {
  inset: -8px;
  padding: 1.5px;
  background: conic-gradient(from var(--giro), rgba(176, 74, 63, 0) 0deg, var(--oxblood-vivo) 80deg, rgba(176, 74, 63, 0) 81deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.carimbo {
  display: block;
  width: 120px;
  height: 120px;
  margin: 0 auto var(--space-5);
  rotate: -14deg;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.6));
}

/* --------------------------------------------------------------------------
   RODAPÉ
   -------------------------------------------------------------------------- */

.rodape { position: relative; max-width: calc(var(--largura-form) + 2 * var(--gutter)); margin-top: var(--space-8); padding-top: var(--space-6); text-align: center; }
.rodape::before {                   /* filete de pedra com o oval no meio (DESIGN-V3 2.2) */
  content: ""; position: absolute; left: 50%; top: 0; width: min(100%, 360px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(106, 105, 98, 0), rgba(106, 105, 98, 0.9) 50%, rgba(106, 105, 98, 0));
}
.rodape::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 9px; height: 13px; transform: translate(-50%, -50%);
  border: 1px solid var(--pedra-clara); border-radius: 50%; background: var(--noite-1);
}
.rodape-marca { display: block; width: 44px; height: auto; margin: 0 auto var(--space-3); }
.rodape .mono { font-size: 12px; letter-spacing: 0.16em; color: var(--pedra-clara); margin: 0 0 var(--space-2); }
.rodape-links { font-size: 13px; margin: 0; color: var(--pedra-clara); }
.rodape-links a { color: var(--pedra-clara); text-decoration-color: var(--linha-vinho); }

/* --------------------------------------------------------------------------
   PÁGINA DE PRIVACIDADE · a mesma sala, texto corrido na coluna de 680
   -------------------------------------------------------------------------- */

.doc { max-width: var(--largura); padding-top: 40px; }
.doc .hero-eyebrow { margin: 0 0 16px; color: var(--pedra-clara); }
.doc .filete-doc { width: min(100%, 320px); margin: 0 0 30px; background: linear-gradient(90deg, rgba(106, 105, 98, 0.9), rgba(106, 105, 98, 0)); }
.doc .filete-doc::after { left: 0; transform: translate(0, -50%); }
.doc h1 { font-size: clamp(36px, 0.9vw + 32.5px, 44px); margin: 0 0 var(--space-4); }
.doc h2 { font-size: 26px; line-height: 1.15; margin: var(--space-7) 0 var(--space-3); }
.doc > .lead { margin-bottom: var(--space-6); font-size: 21px; line-height: 1.4; }
.doc p, .doc li { font-size: 16px; line-height: 1.65; max-width: 66ch; color: var(--marfim-corpo); }
.doc ul { padding-left: var(--space-5); margin: 0 0 1em; }
.doc li { margin-bottom: var(--space-2); }
.doc li::marker { color: var(--pedra-clara); }
.doc .nota { font-size: 14px; color: var(--marfim-apoio); }

/* Ficha da controladora: rótulo em caixa alta em cima, dado embaixo (no celular não cabe lado a lado) */
.doc .ficha {
  margin: 0 0 var(--space-4);
  padding: 4px 18px;
  border: 1px solid var(--linha-ouro);
  border-radius: var(--raio-cartao);
  background: var(--noite-3);
  box-shadow: var(--sombra-cartao);
  max-width: 66ch;
}
.doc .ficha > div { padding: var(--space-3) 0; }
.doc .ficha > div + div { border-top: 1px solid var(--linha-neutra); }
.doc .ficha dt {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.18em;
  line-height: var(--lh-label);
  text-transform: uppercase;
  color: var(--pedra-clara);
  margin: 0 0 var(--space-1);
}
.doc .ficha dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--marfim-texto); overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   TABLET E DESKTOP
   -------------------------------------------------------------------------- */

@media (min-width: 760px) {
  .tela { padding-top: 48px; }
  .cartao-noite { padding: 28px; }
  .quem-vai-ler, .perfil { padding: 20px 22px; }
  .rev-numeros { padding: 28px; }
  #rev-lista { padding: 4px 28px; }

  /* o número da pergunta vai para a margem esquerda do cartão */
  .q { padding: 28px 28px 28px 84px; }
  .q-num { position: absolute; left: 26px; top: 31px; margin: 0; }
  .q::before {
    content: ""; position: absolute; left: 66px; top: 28px; bottom: 28px; width: 1px;
    background: linear-gradient(180deg, var(--linha-ouro-forte), rgba(168, 164, 154, 0));
  }

  #rev-lista li { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "nome estado editar"; }
  #rev-numeros-lista { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; }

  .btn-primario, .btn-ouro { width: auto; min-width: 320px; margin-left: auto; margin-right: auto; }
  .aviso-bloco-acoes .btn-secundario { min-width: 0; }
  .retomada .btn-primario { margin-left: 0; }

  .par-botoes { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: var(--space-5); }
  .par-botoes .btn-primario, .par-botoes .btn-secundario { width: auto; min-width: 0; margin: 0; }
  .btn-secundario { min-height: 54px; }

  .guardar-link .btn-secundario { width: auto; }

  /* palco médio: a sala larga (ambiente-palco), a Carol com 360 px, quatro leitoras (duas perto, duas longe) */
  .palco {
    --carol-w: 360px; --palco-h: 600px; --relevo-w: 280px; --relevo-y: 96px;
    --sala-w: max(110vw, 1150px); --sala-r: 0.5625; --poca-foto: 0.815; --poca-y: 470px;
    --raio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='.6'/%3E%3Cstop offset='.88' stop-color='%23fff' stop-opacity='.32'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.08'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-20%25' y='-5%25' width='140%25' height='110%25'%3E%3CfeGaussianBlur stdDeviation='1.2 0.8'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M32.41 -4 L38.19 -4 L40.57 10 L43.65 20 L46.56 30 L49.27 40 L51.55 50 L54.43 60 L57.14 70 L59.25 81.5 L43.95 81.5 L42.86 70 L41.17 60 L39.65 50 L38.73 40 L37.04 30 L35.15 20 L33.43 10 Z' fill='url(%23g)' filter='url(%23b)'/%3E%3C/svg%3E");
    --poca: radial-gradient(ellipse 11% 3.6% at 51.6% 81.5%, rgba(255, 244, 232, 0.6), rgba(var(--luz), 0.2) 55%, rgba(var(--luz), 0) 100%);
  }
  .palco .palco-bloco { background-image: url("/assets/dossie/sala-baixa.webp"); }
  .palco-sala { background-image: url("/assets/dossie/sala-palco.webp"); }
  .abertura-luz { --feixe-desvio: 220px; --feixe-largura: 560px; rotate: -10deg; }
  .palco-retrato { --ret-w: 72px; }
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 110px; }
  .palco-retrato.r1 { left: calc(50% - 300px); top: 222px; }
  .palco-retrato.r3 { right: calc(50% - 300px); top: 222px; }
  .palco-retrato.r2 { left: calc(50% - 372px); top: 84px; }
  .palco-retrato.r4 { right: calc(50% - 372px); top: 92px; }
  .palco-retrato.r1 figcaption, .palco-retrato.r3 figcaption { font-size: 16px; }
  .quem-le { margin-top: -104px; }
  .tela-abertura .lead { max-width: 42ch; }
}

@media (min-width: 1024px) {
  .tela-abertura { padding-top: 34px; }
  .arroba-nota { margin-top: 14px; }

  /* palco largo: a Carol com 440 px; seis leitoras em arco, três de cada lado, em três distâncias (perto, meio,
     longe): quanto mais longe, menor, mais alta, mais fora de foco e mais atrás da névoa */
  .abertura-luz { --feixe-desvio: 300px; --feixe-largura: 640px; rotate: -12deg; }
  .palco { --carol-w: 440px; --palco-h: 720px; --relevo-w: 320px; --relevo-y: 104px; --sala-w: max(110vw, 1408px); --poca-y: 540px; margin-top: 44px; }
  .palco-retrato.r5, .palco-retrato.r6 { display: block; }
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 134px; --px: 24px; --py: 16px; }
  .palco-retrato.r2, .palco-retrato.r4 { --ret-w: 92px; --px: 12px; --py: 8px; --fio-base: rgba(212, 154, 143, 0.3); --fio-luz: rgba(240, 190, 178, 0.85); }
  .palco-retrato.r5, .palco-retrato.r6 { --ret-w: 72px; --px: 5px; --py: 3px; z-index: 1; }
  .palco-retrato.r2 .moldura, .palco-retrato.r4 .moldura { filter: blur(0.5px) brightness(0.86) saturate(0.92); box-shadow: 0 0 24px -6px rgba(196, 70, 56, 0.4), 0 14px 20px -8px rgba(0, 0, 0, 0.7); }
  .palco-retrato.r5 .moldura, .palco-retrato.r6 .moldura { filter: blur(1.5px) brightness(0.62) saturate(0.8); }
  .palco-retrato:hover .moldura { filter: brightness(1.1) contrast(1.04); }
  .palco-retrato.r1 { left: max(24px, calc(50% - 338px)); top: 232px; }
  .palco-retrato.r3 { right: max(24px, calc(50% - 338px)); top: 240px; }
  .palco-retrato.r2 { left: max(20px, calc(50% - 470px)); top: 104px; }
  .palco-retrato.r4 { right: max(20px, calc(50% - 470px)); top: 96px; }
  .palco-retrato.r5 { left: max(12px, calc(50% - 600px)); top: 330px; }
  .palco-retrato.r6 { right: max(12px, calc(50% - 600px)); top: 322px; }
  .palco-retrato figcaption { font-size: 14px; }
  .palco-retrato.r1 figcaption, .palco-retrato.r3 figcaption { font-size: 17px; }
  .quem-le { margin-top: -118px; }
  .quem-le-nome { font-size: 34px; }
}

/* --------------------------------------------------------------------------
   MOVIMENTO (DESIGN-V3 2.10 e feedback 25/09 16h): só com movimento liberado; reduzido = cena parada e inteira
   -------------------------------------------------------------------------- */

@keyframes entrar { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes giro { to { --giro: 360deg; } }
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pulso-anel { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes carimbar {
  0% { opacity: 0; transform: scale(1.25) rotate(-8deg); }
  70% { opacity: 1; transform: scale(0.97) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes gravando { 0% { box-shadow: 0 0 0 0 rgba(212, 154, 143, 0.45); } 100% { box-shadow: 0 0 0 12px rgba(212, 154, 143, 0); } }
@keyframes sobe { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
/* a cena da abertura (feedback 25/09 16h) */
@keyframes eyebrow-abrir { from { opacity: 0; letter-spacing: 0.34em; } to { opacity: 1; letter-spacing: 0.2em; } }
@keyframes filete-abrir { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }
@keyframes linha-subir { from { transform: translateY(112%); } to { transform: none; } }
@keyframes arroba-subir { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes feixe-descer { from { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; } to { opacity: 1; transform: scaleY(1); } }
@keyframes feixe-respirar { 0%, 100% { opacity: 1; transform: rotate(0deg); } 50% { opacity: 0.72; transform: rotate(0.7deg); } }
@keyframes poeira { from { transform: translate(0, 0); } to { transform: translate(-26px, 340px); } }
@keyframes halo-respirar { from { opacity: 1; transform: scale(1); } to { opacity: 0.68; transform: scale(0.92); } }
@keyframes carol-surgir { from { opacity: 0; transform: translateY(30px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes foco { from { opacity: 0; filter: blur(10px); transform: translateY(16px) scale(0.94); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes flutuar { from { transform: translateY(-9px) rotate(-1.8deg); } to { transform: translateY(9px) rotate(1.8deg); } }
/* feedback 25/09 16h30 ("meio morto"): a luz acende, respira e pulsa; o veludo brilha; a poeira anda */
@keyframes acender { from { --acende: -26%; } to { --acende: 100%; } }
@keyframes luz-respirar { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
@keyframes raio-pulsar { 0%, 100% { opacity: 0.82; } 18% { opacity: 1; } 34% { opacity: 0.86; } 58% { opacity: 1; } 78% { opacity: 0.74; } }
@keyframes correr-faixa { from { transform: translateX(-66.66%); } to { transform: translateX(0); } }
@keyframes ondular { from { transform: translateX(-34px); } to { transform: translateX(34px); } }
@keyframes varrer-fundo { 0%, 48% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes fio-correr { from { --giro-fio: 0deg; } to { --giro-fio: 360deg; } }
@keyframes cintilar { 0%, 58% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes chamar { from { opacity: 0.18; } to { opacity: 0.95; } }
@keyframes varrer-botao { 0%, 72% { transform: translateX(-66.66%); } 100% { transform: translateX(0); } }
@keyframes varrer { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes selo-brilho { 0%, 72% { transform: translateX(-140%); } 100% { transform: translateX(140%); } }
@keyframes oval-respirar { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes grao {
  0%, 100% { transform: translate(0, 0); }
  17% { transform: translate(-18px, 12px); }
  33% { transform: translate(14px, -20px); }
  50% { transform: translate(-8px, -6px); }
  67% { transform: translate(20px, 16px); }
  83% { transform: translate(-14px, 22px); }
}

@media (prefers-reduced-motion: no-preference) {
  .tela { animation: entrar var(--dur-slow) var(--ease-entrance); }

  .tela-abertura { animation: none; }
  /* abertura (feedback 25/09 16h): a frente entra com o título revelado linha a linha e o campo do @ subindo; ao
     mesmo tempo a cena acende: o feixe desce, o veludo aparece na luz, a Carol sobe da sombra, a luz de recorte
     chega, as leitoras entram em foco (perto, meio, longe) e o brilho passa pelo relevo. Depois: halo respirando,
     névoa andando, leitoras flutuando, grão de filme. */
  .tela-abertura .hero-eyebrow { animation: eyebrow-abrir 1100ms var(--ease-entrance) both; }
  .tela-abertura .filete { animation: filete-abrir 1000ms var(--ease-entrance) 150ms both; }
  .titulo-abertura .linha > span { animation: linha-subir 1100ms cubic-bezier(0.19, 1, 0.22, 1) 220ms both; }
  .titulo-abertura .linha:nth-child(2) > span { animation-delay: 340ms; }
  .titulo-abertura .linha:nth-child(3) > span { animation-delay: 460ms; }
  .tela-abertura .lead { animation: subir 800ms var(--ease-entrance) 720ms both; }
  .arroba, .retomada { animation: arroba-subir 1000ms cubic-bezier(0.2, 0.7, 0.2, 1) 880ms both; }

  /* QA 25/09 18h: a luz acende por opacidade (nada de borda que desce) e o raio entra depois da sala */
  .palco-sala { animation: aparecer 1600ms var(--ease-standard) 300ms both, luz-respirar 7s ease-in-out 2.6s infinite; }
  .palco-sala::before { animation: aparecer 900ms var(--ease-standard) 900ms both, raio-pulsar 6.2s ease-in-out 1.8s infinite; }
  .palco-sala::after { animation: raio-pulsar 6.2s ease-in-out 2.1s infinite; }
  .palco-brilho { animation: aparecer 1600ms var(--ease-standard) 900ms both; }
  .palco-brilho::before { animation: correr-faixa 11s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .palco-brilho::after { animation: ondular 7s ease-in-out infinite alternate; }
  .feixe::before { animation: feixe-respirar 7s ease-in-out 2.4s infinite; }
  .feixe::after { animation: poeira 30s linear infinite; }
  .abertura-luz { animation: feixe-descer 1600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .abertura-brilho::before { animation: correr-faixa 13s cubic-bezier(0.45, 0, 0.55, 1) 1s infinite; }
  .palco-relevo { animation: aparecer 1600ms var(--ease-standard) 900ms both; }
  .palco-relevo::after { animation: varrer-fundo 6.5s cubic-bezier(0.45, 0, 0.25, 1) 1.2s infinite; }
  .palco-halo { animation: aparecer 1400ms var(--ease-standard) 900ms both, halo-respirar 4.8s ease-in-out 2.4s infinite alternate; }
  .palco-carol { animation: carol-surgir 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both; }
  .palco-recorte { animation: carol-surgir 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 350ms both, luz-respirar 7s ease-in-out 2.6s infinite; }
  .palco-retrato { animation: foco 1300ms cubic-bezier(0.2, 0.7, 0.2, 1) 1500ms both; }
  .palco-retrato.r1, .palco-retrato.r3 { animation-delay: 1000ms; }
  .palco-retrato.r2, .palco-retrato.r4 { animation-delay: 1250ms; }
  .palco-retrato .moldura { animation: flutuar 5.6s ease-in-out infinite alternate; }
  .palco-retrato.r2 .moldura { animation-duration: 6.8s; animation-delay: -2s; }
  .palco-retrato.r3 .moldura { animation-duration: 5.1s; animation-delay: -3s; }
  .palco-retrato.r4 .moldura { animation-duration: 7.4s; animation-delay: -1s; }
  .palco-retrato.r5 .moldura { animation-duration: 6.2s; animation-delay: -4s; }
  .palco-retrato.r6 .moldura { animation-duration: 5.8s; animation-delay: -5s; }
  .palco-retrato .moldura::after { animation: fio-correr 6s linear infinite; }
  .palco-retrato.r2 .moldura::after { animation-duration: 8s; animation-delay: -3s; }
  .palco-retrato.r3 .moldura::after { animation-duration: 6.6s; animation-delay: -4s; }
  .palco-retrato.r4 .moldura::after { animation-duration: 8.6s; animation-delay: -1s; }
  .palco-retrato.r5 .moldura::after, .palco-retrato.r6 .moldura::after { animation: none; }
  .palco-retrato:hover .moldura { scale: 1.08; }
  .palco-grao { animation: grao 1s steps(1) infinite; }
  .fecho-selo::after { animation: selo-brilho 6s ease-in-out 2s infinite; }

  /* a palavra em destaque do título: uma luz passa por ela de tempos em tempos */
  .titulo-abertura em { animation: cintilar 6.5s ease-in-out 2s infinite; }
  /* o campo do @ respira chamando o toque, até ela tocar ou digitar; a seta do botão ganha um brilho de tempos em tempos */
  .arroba-campo::before { animation: chamar 2.4s ease-in-out 1.9s infinite alternate both; }
  .arroba-campo:focus-within::before, .arroba-campo:has(input:not(:placeholder-shown))::before { animation: none; opacity: 0; }
  .arroba-ir::after { animation: varrer-botao 5s ease-in-out 2.6s infinite; }
  .arroba-ir:hover::after { animation: none; transform: translateX(120%); }


  /* entradas ao rolar (form.js marca .revela-js no <html> e .is-visivel em cada [data-revela] que entra na tela) */
  .revela-js [data-revela] { transition: opacity 900ms var(--ease-entrance), transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .revela-js [data-revela]:not(.is-visivel) { opacity: 0; transform: translateY(30px); }
  .revela-js .quem-le .carol p, .revela-js .quem-le .fecho { transition: opacity 900ms var(--ease-entrance), transform 1000ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  .revela-js .quem-le:not(.is-visivel) .carol p, .revela-js .quem-le:not(.is-visivel) .fecho { opacity: 0; transform: translateY(18px); }
  .revela-js .quem-le .carol p:nth-child(2) { transition-delay: 160ms; }
  .revela-js .quem-le .carol p:nth-child(3) { transition-delay: 320ms; }
  .revela-js .quem-le .fecho { transition-delay: 480ms; }

  .anel-grande::before { animation: giro 2.4s linear infinite; }
  .anel-grande { animation: oval-respirar 3.2s ease-in-out infinite alternate; }
  .tela-centro::after { transform-origin: 50% 0; animation: feixe-descer 1600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  #topo-nome.is-lendo::before { animation: pulso 1.6s ease-in-out infinite; }
  .mic[aria-pressed="true"] { animation: gravando 1.2s infinite; }
  .tela[data-tela="fechado"] .carimbo { animation: carimbar 260ms cubic-bezier(0.2, 0.9, 0.3, 1.25) 150ms both; }

  @supports (animation-timeline: view()) {
    .q, .rev-numeros {
      animation: sobe linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }

  /* ajuste final: a cena acontece (form.css, AJUSTE FINAL v3) */
  .cena-js .palco-cortina { display: block; position: absolute; z-index: 8; inset: 0; pointer-events: none; }
  .cena-js .palco-cortina::before, .cena-js .palco-cortina::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    background:
      linear-gradient(180deg, rgba(7, 5, 5, 0.55) 0%, rgba(7, 5, 5, 0.2) 40%, rgba(7, 5, 5, 0.75) 100%),
      url("/assets/dossie/sala-frente.webp") 50% 0 / 1400px 100% repeat-x,
      #120d0c;
  }
  .cena-js .palco-cortina::before {
    left: -2px; width: calc(var(--cx) + 4px);
    box-shadow: 18px 0 28px -10px rgba(0, 0, 0, 0.9);
    animation: cortina-esquerda 2000ms cubic-bezier(0.7, 0, 0.18, 1) 200ms both;
  }
  .cena-js .palco-cortina::after {
    left: var(--cx); right: -2px;
    background-position: 30% 0, 30% 0, 0 0;
    box-shadow: -18px 0 28px -10px rgba(0, 0, 0, 0.9);
    animation: cortina-direita 2000ms cubic-bezier(0.7, 0, 0.18, 1) 200ms both;
  }

  /* a ordem: cortina (0,2 a 2,2 s) → o feixe acende (1,1 s) → a Carol sobe da sombra (1,5 s) → o relevo e o halo
     → as leitoras, uma a uma. Depois a câmera se aproxima devagar e fica lá. */
  .palco-sala { animation: aparecer 1500ms var(--ease-standard) 1100ms both, aproximar 18s cubic-bezier(0.25, 0.6, 0.3, 1) 200ms both; }
  .palco .palco-bloco, .palco-brilho { animation: aproximar 18s cubic-bezier(0.25, 0.6, 0.3, 1) 200ms both; }
  .palco-brilho { animation: aparecer 1600ms var(--ease-standard) 1500ms both, aproximar 18s cubic-bezier(0.25, 0.6, 0.3, 1) 200ms both; }
  .palco .palco-bloco, .palco-sala, .palco-brilho { transform-origin: 50% 82%; }
  .palco-sala::before { animation: aparecer 900ms var(--ease-standard) 1500ms both, raio-correr 9s ease-in-out 3s infinite; }
  .palco-sala::after { animation: aparecer 900ms var(--ease-standard) 1700ms both; }
  .palco-relevo { animation: aparecer 1600ms var(--ease-standard) 2000ms both; }
  .palco-halo { animation: aparecer 1400ms var(--ease-standard) 1700ms both, halo-respirar 6s ease-in-out 3.2s infinite alternate; }
  .palco-carol { animation: carol-entrar 1700ms cubic-bezier(0.2, 0.7, 0.2, 1) 1400ms both; }
  .palco-recorte { animation: carol-entrar 1700ms cubic-bezier(0.2, 0.7, 0.2, 1) 1400ms both, recorte-acender 1400ms var(--ease-standard) 2200ms both; }
  .palco-retrato { animation: foco 1400ms cubic-bezier(0.2, 0.7, 0.2, 1) 2600ms both; }
  .palco-retrato.r1 { animation-delay: 2300ms; }
  .palco-retrato.r3 { animation-delay: 2550ms; }
  .palco-retrato.r2 { animation-delay: 2800ms; }
  .palco-retrato.r4 { animation-delay: 3050ms; }
  .palco-retrato.r5 { animation-delay: 3300ms; }
  .palco-retrato.r6 { animation-delay: 3500ms; }
  /* as leitoras flutuam com mais corpo (sobe, desce e gira), cada uma no seu tempo */
  .palco-retrato .moldura { animation-name: flutuar-largo; }
  /* até o palco aparecer, tudo o que está dentro dele espera (a cena abre na frente dela, não antes); por último, para vencer os atalhos animation: */
  .cena-js .palco:not(.em-cena), .cena-js .palco:not(.em-cena) *, .cena-js .palco:not(.em-cena) *::before, .cena-js .palco:not(.em-cena) *::after { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .anel-grande::before { animation: pulso-anel 1.6s ease-in-out infinite alternate; }
  .is-carregando::before { animation: pulso-anel 0.8s ease-in-out infinite alternate; border-right-color: currentColor; }
}

/* --------------------------------------------------------------------------
   IMPRESSÃO: volta ao tema claro (DESIGN-V3 2.11)
   -------------------------------------------------------------------------- */

@media print {
  :root { color-scheme: light;
    --surface-page: #fff; --surface-page-alt: #f7f6f2; --surface-card: #f7f6f2; --surface-raised: #fff; --surface-deep: #f7f6f2;
    --text-body: #2e2926; --text-strong: #1a1614; --text-muted: #57534c; --text-faint: #57534c; --text-accent: #4a1210;
    --marfim-texto: #1a1614; --marfim-corpo: #2e2926; --marfim-apoio: #57534c; --marfim-numero: #1a1614; --pedra-clara: #57534c;
    --ouro-luz: #4a1210; --oxblood-claro: #4a1210; --ouro-claro: #57534c; --lacre: #a3261c; --status-danger: #a3261c; --salvia: #4f5a4a;
    --border-hairline: #c9c3b6; --linha-ouro: #c9c3b6; --linha-ouro-forte: #8a877f; --linha-neutra: #e4e0d6; --noite-1: #fff; }
  html, body { background: #fff !important; }
  body::before, body::after { display: none; }
  .topo, .mic, .nav, .btn-primario, .btn-ouro, .btn-secundario, .link-discreto, .palco, .abertura-luz { display: none !important; }
  .abertura-frente::before, .abertura-brilho, .arroba-campo::before { display: none; }
  .titulo-abertura em { color: var(--oxblood-claro); background: none; filter: none; }
  /* o que ainda não subiu na tela vai inteiro para o papel */
  html.revela-js [data-revela]:not(.is-visivel), html.revela-js .quem-le:not(.is-visivel) .carol p, html.revela-js .quem-le:not(.is-visivel) .fecho { opacity: 1; transform: none; }
  .cartao-noite, .q, #rev-lista, .rev-numeros, .cartao-vinho, .aviso-bloco, .cartao-papel, .bloco-oxblood { box-shadow: none; background: #f7f6f2; border: 1px solid #c9c3b6; }
  .perfil { transform: none; }
  input[type="text"], input[type="tel"], select, textarea { background: #fff; color: #1a1614; border-color: #8a877f; }
  textarea { max-height: none; }
}

/* --------------------------------------------------------------------------
   FEEDBACK 25/09 17h15 ("esse brilho ficou um pouco ruim na versão mobile, muito forte"): no celular a cena
   mantém a luz e o movimento, só mais baixa. O feixe branco sobre o L, a poça e o contorno claro em volta da
   Carol caem pela metade; o brilho do veludo e a varredura no relevo ficam mais discretos. Do tablet para
   cima nada muda. Não subir de volta.
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
  .palco { --poca: radial-gradient(ellipse 17% 3.4% at 52.7% 80.8%, rgba(255, 244, 232, 0.34), rgba(var(--luz), 0.1) 55%, rgba(var(--luz), 0) 100%); }
  /* o feixe da própria foto é o que estourava: no celular a camada do raio deixa de somar luz e passa a
     escurecer o feixe (multiply, mais forte no alto, nada no piso); o feixe da frente desce mais fraco */
  .palco-sala::before {
    mix-blend-mode: multiply;
    background: linear-gradient(180deg, rgb(150, 136, 128) 0%, rgb(158, 144, 136) 45%, rgb(200, 190, 184) 80%, rgb(255, 255, 255) 100%);
  }
  .abertura-luz { filter: opacity(0.55); }
  .palco-brilho::before {
    background: linear-gradient(100deg, rgba(214, 90, 74, 0) 32%, rgba(214, 90, 74, 0.18) 44%, rgba(255, 170, 150, 0.26) 50%, rgba(214, 90, 74, 0.18) 56%, rgba(214, 90, 74, 0) 68%);
  }
  .palco-brilho::after { opacity: 0.32; }
  .palco-relevo::after {
    background: linear-gradient(115deg, rgba(239, 235, 227, 0) 40%, rgba(239, 235, 227, 0.45) 50%, rgba(239, 235, 227, 0) 60%) 100% 0 / 300% 100% no-repeat;
  }
  .palco-carol { filter: drop-shadow(-1px -1px 2px rgba(var(--luz), 0.14)) drop-shadow(0 30px 40px rgba(0, 0, 0, 0.6)); }
  .palco-recorte {
    background:
      radial-gradient(ellipse 44% 16% at 40% 7%, rgba(var(--luz), 0.36), rgba(var(--luz), 0) 100%),
      linear-gradient(118deg, rgba(var(--luz), 0.24) 0%, rgba(var(--luz), 0.06) 30%, rgba(var(--luz), 0) 46%),
      radial-gradient(ellipse 60% 34% at 44% 34%, rgba(var(--luz), 0.1), rgba(var(--luz), 0) 100%);
  }
  .palco-halo { background: radial-gradient(closest-side, rgba(196, 70, 56, 0.28), rgba(176, 74, 63, 0.09) 55%, rgba(176, 74, 63, 0) 100%); }
}

/* --------------------------------------------------------------------------
   FEEDBACK 25/09 17h30 ("a parte de cima tá ruim de ler no mobile"): no celular o texto da abertura fica sobre
   uma cortina bem mais escura e parada. Sai o brilho acetinado que passava atrás das letras, o feixe da frente
   quase some (sem poeira) e as pregas ficam mais fundas e desfocadas. Título, texto e nota ganham uma sombra
   que os separa do veludo. A cena do palco, logo abaixo, continua com luz e movimento.
   -------------------------------------------------------------------------- */

@media (max-width: 759px) {
  /* a cortina escura atrás do texto está no bloco 17h50 (depois da regra base da frente) */
  .abertura-brilho { display: none; }
  .abertura-luz { filter: opacity(0.28); }
  .abertura-luz::after { display: none; }
  .tela-abertura .hero-eyebrow { color: var(--marfim-texto); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
  .titulo-abertura { text-shadow: 0 2px 22px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.6); }
  .tela-abertura .lead { color: var(--marfim-texto); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.7); }
  .arroba-nota { color: var(--marfim-corpo); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.95); }
}

/* --------------------------------------------------------------------------
   FEEDBACK 25/09 17h50 ("tem quebra de dobra aqui" e "esse flash de luz tá bugado"), celular e desktop:
   1. A cortina atrás do título é a MESMA cortina da foto da sala: uma faixa tirada da própria foto (só pano,
      sem o feixe; cortina-frente*.webp), esticada na vertical (as pregas são verticais) e alinhada pixel a
      pixel na horizontal com a foto do palco (mesma largura --sala-w, mesmo centro, mesmo parallax). A frente
      desce por baixo do palco até ele ficar opaco: as pregas continuam, sem linha de emenda.
   2. O feixe nasce no escuro: no alto do palco aparece a foto de luz baixa (só a névoa) e a luz acesa entra
      aos poucos até a cabeça da Carol. O cone de CSS da frente sai: a luz é só a da foto.
   -------------------------------------------------------------------------- */

.tela-abertura { --sala-w: max(100vw, 360px); --mx: 0; --my: 0; }

.abertura-frente::before, .abertura-brilho { bottom: -210px; }
/* a caixa tem a largura exata da tela (sobra fora dela abria 12 px de rolagem lateral); o paralaxe anda no pano, pela
   posição da imagem (a foto é mais larga que a tela, a borda nunca aparece), junto com a foto do palco */
.abertura-frente::before {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background:
    radial-gradient(ellipse 62% 92% at 50% 44%, rgba(7, 5, 5, 0) 26%, rgba(7, 5, 5, 0.66) 70%, rgba(7, 5, 5, 0.94) 100%),
    linear-gradient(180deg, rgba(7, 5, 5, 0.7) 0%, rgba(7, 5, 5, 0) 34%),
    url("/assets/dossie/sala-frente-celular.webp") 50% 0 / var(--sala-w) 100% no-repeat,
    #0e0b0a;
  filter: none;
}
@media (hover: hover) and (pointer: fine) {
  .abertura-frente::before { transition: background-position 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
}
@media (max-width: 759px) {                 /* 17h30: no celular, bem mais escura atrás do texto */
  .abertura-frente::before {
    background:
      linear-gradient(180deg, rgba(9, 7, 6, 0.5) 0%, rgba(9, 7, 6, 0.66) 30%, rgba(9, 7, 6, 0.6) 62%, rgba(9, 7, 6, 0.12) 100%),
      radial-gradient(ellipse 62% 92% at 50% 44%, rgba(7, 5, 5, 0) 26%, rgba(7, 5, 5, 0.66) 70%, rgba(7, 5, 5, 0.94) 100%),
      linear-gradient(180deg, rgba(7, 5, 5, 0.7) 0%, rgba(7, 5, 5, 0) 34%),
      url("/assets/dossie/sala-frente-celular.webp") 50% 0 / var(--sala-w) 100% no-repeat,
      #0e0b0a;
  }
}
.abertura-luz { display: none; }

@media (min-width: 760px) {
  .tela-abertura { --sala-w: max(110vw, 1150px); }
  .abertura-frente::before {
    background:
      radial-gradient(ellipse 62% 92% at 50% 44%, rgba(7, 5, 5, 0) 26%, rgba(7, 5, 5, 0.66) 70%, rgba(7, 5, 5, 0.94) 100%),
      linear-gradient(180deg, rgba(7, 5, 5, 0.7) 0%, rgba(7, 5, 5, 0) 34%),
      url("/assets/dossie/sala-frente.webp") calc(50% + var(--mx) * -10px) 0 / var(--sala-w) 100% no-repeat,
      #0e0b0a;
  }
}
@media (min-width: 1024px) {
  .tela-abertura { --sala-w: max(110vw, 1408px); }
}

/* --------------------------------------------------------------------------
   QA 25/09 18h (revisão visual em 8 larguras, com movimento liberado):
   - O feixe nasce no escuro em qualquer largura: as máscaras da sala acesa e da sala de luz baixa são medidas
     em px a partir do topo do PALCO (--topo-palco, no quadro da foto), não em % da foto, que cresce com a tela.
     A luz baixa (que também tem a névoa do feixe) entra devagar nos primeiros ~280 px, e a acesa só a partir
     de ~60 px, chegando inteira perto da Carol.
   - O palco fica sem fundo próprio: onde a foto ainda não entrou aparece a cortina da frente (a mesma foto),
     que desce por baixo do palco até lá. Nenhuma linha de emenda nem de cor.
   - A sala da luz baixa está na tela desde o primeiro quadro; a acesa entra por opacidade.
   - Enquanto a foto da sala não chegou (rede lenta), a luz, o halo e a poeira esperam (form.js, .sala-carregando).
   -------------------------------------------------------------------------- */

.palco { background: transparent; }
.palco .palco-bloco, .palco-sala { --topo-palco: calc(var(--sala-w) * var(--sala-r) * var(--poca-foto) - var(--poca-y)); }
.palco .palco-bloco {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco) + 10px), rgba(0, 0, 0, 0.14) calc(var(--topo-palco) + 80px), rgba(0, 0, 0, 0.42) calc(var(--topo-palco) + 150px), rgba(0, 0, 0, 0.78) calc(var(--topo-palco) + 220px), #000 calc(var(--topo-palco) + 290px));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco) + 10px), rgba(0, 0, 0, 0.14) calc(var(--topo-palco) + 80px), rgba(0, 0, 0, 0.42) calc(var(--topo-palco) + 150px), rgba(0, 0, 0, 0.78) calc(var(--topo-palco) + 220px), #000 calc(var(--topo-palco) + 290px));
}
.palco-sala {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco) + 60px), rgba(0, 0, 0, 0.12) calc(var(--topo-palco) + 150px), rgba(0, 0, 0, 0.4) calc(var(--topo-palco) + 220px), rgba(0, 0, 0, 0.78) calc(var(--topo-palco) + 290px), #000 calc(var(--topo-palco) + 350px));
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco) + 60px), rgba(0, 0, 0, 0.12) calc(var(--topo-palco) + 150px), rgba(0, 0, 0, 0.4) calc(var(--topo-palco) + 220px), rgba(0, 0, 0, 0.78) calc(var(--topo-palco) + 290px), #000 calc(var(--topo-palco) + 350px));
}
/* a cortina da frente desce até o palco estar inteiro (topo do palco + ~300 px) */
.abertura-frente::before, .abertura-brilho { bottom: -360px; }

/* rede lenta: nada da luz antes da foto */
.palco.sala-carregando .palco-sala, .palco.sala-carregando .palco-halo, .palco.sala-carregando .palco-poeira, .palco.sala-carregando .palco-recorte { visibility: hidden; }

/* celular: o degrau vertical da faixa (a borda do feixe na foto original) some num véu estreito */
@media (max-width: 759px) {
  .abertura-frente::before {
    background:
      linear-gradient(90deg, rgba(9, 7, 6, 0) 38%, rgba(9, 7, 6, 0.5) 47%, rgba(9, 7, 6, 0) 56%),
      linear-gradient(180deg, rgba(9, 7, 6, 0.5) 0%, rgba(9, 7, 6, 0.66) 30%, rgba(9, 7, 6, 0.6) 62%, rgba(9, 7, 6, 0.12) 100%),
      radial-gradient(ellipse 62% 92% at 50% 44%, rgba(7, 5, 5, 0) 26%, rgba(7, 5, 5, 0.66) 70%, rgba(7, 5, 5, 0.94) 100%),
      linear-gradient(180deg, rgba(7, 5, 5, 0.7) 0%, rgba(7, 5, 5, 0) 34%),
      url("/assets/dossie/sala-frente-celular.webp") 50% 0 / var(--sala-w) 100% no-repeat,
      #0e0b0a;
  }
}

/* textos: o destaque do título nunca se parte; 360 px volta a 3 linhas; sem palavra órfã */
.titulo-abertura em { white-space: nowrap; }
@media (max-width: 374px) { .titulo-abertura { font-size: 34px; } }
.tela-abertura .lead, .quem-le .carol p { text-wrap: balance; }
.rodape .mono span { white-space: nowrap; }

/* retratos da frente no celular estreito: menores e longe da borda (parallax e flutuação cabem) */
@media (max-width: 400px) {
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 84px; --px: 10px; }
  .palco-retrato.r1 { left: max(12px, calc(50% - 186px)); }
  .palco-retrato.r3 { right: max(12px, calc(50% - 186px)); }
}

/* o grão e o brilho do veludo entram junto com a foto (senão marcam uma faixa mais clara no topo do palco) */
.palco-grao {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 48px, #000 340px);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 48px, #000 340px);
}
.palco-brilho {
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 300px, #000 64%, rgba(0, 0, 0, 0) 82%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 300px, #000 64%, rgba(0, 0, 0, 0) 82%);
}

/* ==========================================================================
   AJUSTE FINAL v3 (25/09, depois da crítica: "ainda meio morto" e "parece o molde da Lapidatio")
   1. Campo do @ que não é o molde: nada de caixa clara com quadrado escuro e seta. O @ é escrito numa linha de
      marfim sobre o veludo, e o botão é um bloco oxblood com a palavra (o mesmo "Começar" do aria-label).
   2. As leitoras sem legenda fixa: o nome da profissão só aparece no hover (desktop).
   3. A cena acontece: a cortina da frente se abre a partir da Carol, o feixe acende, ela aparece, as leitoras
      entram uma a uma do desfoque para o foco. A câmera se aproxima devagar (18 s) e a rolagem mexe três planos.
      Sai o "respirar" de opacidade da sala e do recorte (lia como imagem parada).
   4. Desktop (1024+): a primeira dobra é a cena. O texto e o campo à esquerda, dentro do veludo escuro; a Carol
      à direita, na luz, com as leitoras em volta. O rosto dela aparece já em 1280 × 800.
   Celular: a composição aprovada às 17h15/17h30 fica; só o campo, as legendas, as leitoras longe da borda e o
   movimento (nada de luz a mais).
   ========================================================================== */

/* 1. o campo do @ -------------------------------------------------------- */
.arroba-campo {
  height: auto;
  min-height: 58px;
  padding: 0;
  gap: 0 14px;
  background: none;
  color: var(--marfim-texto);
  border-radius: 0;
  box-shadow: none;
  align-items: flex-end;
}
.arroba-campo:focus-within { box-shadow: none; }
.arroba-prefixo, .arroba-campo input[type="text"] {
  align-self: stretch;
  border-bottom: 1px solid rgba(228, 225, 217, 0.62);
  transition: border-color var(--dur-base) var(--ease-standard);
}
.arroba-prefixo {
  display: flex; align-items: center; margin-right: -14px; padding-right: 10px;
  font: 400 30px/1 var(--font-heading); color: var(--oxblood-claro);
}
.arroba-campo input[type="text"] {
  min-height: 58px;
  border-bottom: 1px solid rgba(228, 225, 217, 0.62);
  color: var(--marfim-texto);
  caret-color: var(--oxblood-claro);
  font: 400 18px/1.2 var(--font-sans);
}
.arroba-campo input[type="text"]:focus { border: 0; border-bottom: 1px solid var(--oxblood-claro); box-shadow: none; }
.arroba-campo:focus-within .arroba-prefixo { border-bottom-color: var(--oxblood-claro); }
.arroba-campo input::placeholder { color: var(--marfim-apoio); }
/* a luz que chama o toque: um fio vinho que acende embaixo da linha (não em volta de uma caixa) */
.arroba-campo::before {
  inset: auto auto -1px 0; right: 0; height: 1px; border-radius: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(212, 154, 143, 0), var(--oxblood-claro) 30%, var(--oxblood-claro) 70%, rgba(212, 154, 143, 0));
  box-shadow: 0 0 16px 2px rgba(176, 74, 63, 0.7);
}
.arroba-campo:focus-within::before { opacity: 1; }
.arroba-ir {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  height: 52px;
  margin-bottom: 3px;
  padding: 0 18px 0 22px;
  border: 1px solid rgba(212, 154, 143, 0.38);
  border-radius: 0;
  background: linear-gradient(180deg, #6a1d17, var(--oxblood) 80%);
  color: var(--marfim-texto);
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 214, 204, 0.12);
}
.arroba-ir svg { width: 18px; height: 18px; }
.arroba-ir:hover { background: linear-gradient(180deg, #7a231c, #561612 80%); }
.arroba-ir:focus-visible { outline: 2px solid var(--oxblood-claro); outline-offset: 3px; }
.arroba-campo:has(input:not(:placeholder-shown)) .arroba-ir { background: linear-gradient(180deg, #82261e, #5c1915 80%); box-shadow: 0 10px 26px -8px rgba(176, 74, 63, 0.85), inset 0 1px 0 rgba(255, 214, 204, 0.16); }
/* celular: o botão vira a faixa inteira embaixo da linha (a linha fica com o @ inteiro, sem aperto) */
@media (max-width: 559px) {
  .arroba-campo { flex-wrap: wrap; }
  .arroba-campo input[type="text"] { flex: 1 1 0; }
  .arroba-ir { order: 3; flex: 1 0 100%; justify-content: center; height: 54px; margin: 16px 0 0; }
  .arroba-campo::before { bottom: auto; top: 57px; }
}
.arroba-nota { margin-top: 14px; }

/* 2. legendas das leitoras: só no hover --------------------------------- */
.palco-retrato figcaption { opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); }
@media (hover: hover) and (pointer: fine) {
  .palco-retrato:hover figcaption { opacity: 1; transform: none; }
}

/* celular: as leitoras da frente a 16 px da borda (com o fio e a flutuação) */
@media (max-width: 759px) {
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 88px; --px: 8px; }
  .palco-retrato.r1 { left: max(24px, calc(50% - 184px)); }
  .palco-retrato.r3 { right: max(24px, calc(50% - 184px)); }
  .palco-retrato.r2 { left: max(26px, calc(50% - 176px)); }
  .palco-retrato.r4 { right: max(26px, calc(50% - 176px)); }
}
@media (max-width: 400px) {
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 80px; }
}

/* 3. a cena acontece ----------------------------------------------------- */
/* o centro da cena (onde a Carol pisa na poça): no meio no celular e no tablet; à direita no desktop */
.palco { --cx: 50%; }
.palco .palco-bloco, .palco-sala { left: var(--cx); }
.palco-relevo, .palco-halo, .palco-carol, .palco-recorte { left: var(--cx); }

/* a câmera: a rolagem (--sy, form.js) mexe cada plano no seu ritmo; parada ao abrir */
.tela-abertura { --sy: 0; }
.palco-bloco, .palco-sala, .palco-brilho, .palco-poeira, .palco-relevo, .palco-halo, .palco-carol, .palco-recorte, .palco-retrato {
  translate: calc(var(--mx) * var(--px, 0px)) calc(var(--my) * var(--py, 0px) + var(--sy) * var(--pz, 0) * 1px);
}
.palco .palco-bloco, .palco-sala, .palco-brilho, .palco-poeira, .palco-relevo { --pz: 0.16; }
.palco-halo { --pz: 0.1; }
.palco-carol, .palco-recorte { --pz: -0.05; }
.palco-retrato { --pz: 0.1; }
.palco-retrato.r1, .palco-retrato.r3 { --pz: 0.03; }
.palco-retrato.r5, .palco-retrato.r6 { --pz: 0.13; }

/* a cortina da frente: duas bandas de veludo fechadas sobre a cena, que se abrem a partir da Carol. Só existe com
   movimento liberado e JS (html.cena-js); sem isso a cena já está aberta. */
.palco-cortina { display: none; }
/* (o movimento desta parte está no bloco MOVIMENTO, no fim, para ficar sob prefers-reduced-motion: no-preference) */
@keyframes cortina-esquerda { from { transform: translateX(0); } 70% { opacity: 1; } to { transform: translateX(-104%); opacity: 0.6; } }
@keyframes cortina-direita { from { transform: translateX(0); } 70% { opacity: 1; } to { transform: translateX(104%); opacity: 0.6; } }
@keyframes aproximar { from { scale: 1; } to { scale: 1.06; } }
@keyframes carol-entrar { from { opacity: 0; transform: translateY(36px) scale(0.97); } to { opacity: 1; transform: scale(1.025); } }
@keyframes recorte-acender { from { filter: brightness(0.4); } to { filter: none; } }
@keyframes raio-correr { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(0.6%); } }
@keyframes flutuar-largo { 0% { transform: translate(-3px, -11px) rotate(-2.4deg); } 100% { transform: translate(3px, 11px) rotate(2.4deg); } }
/* a Carol termina a entrada um pouco mais perto (scale 1,025), a sala se aproxima mais devagar: profundidade */
.palco-carol, .palco-recorte { transform-origin: 50% 100%; }

/* 4. desktop: a primeira dobra é a cena ---------------------------------- */
@media (min-width: 1024px) {
  .tela-abertura {
    --col: min(560px, 44vw);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    padding-top: 0;
  }
  .abertura-frente {
    grid-area: 1 / 1;
    z-index: 2;
    align-self: center;
    width: var(--col);
    margin: 0 0 0 max(56px, calc(50vw - 590px));
    padding: 40px 0 72px;
    text-align: left;
    isolation: auto;
  }
  /* o veludo atrás do texto já é a própria sala: sem a cortina de CSS nem o brilho da frente */
  .abertura-frente::before, .abertura-brilho { display: none; }
  .tela-abertura .hero-eyebrow { margin-bottom: 16px; }
  .abertura-frente .filete { width: 220px; margin: 0 0 30px; background: linear-gradient(90deg, rgba(106, 105, 98, 0.9), rgba(106, 105, 98, 0)); }
  .abertura-frente .filete::after { left: 0; transform: translate(0, -50%); }
  .titulo-abertura { font-size: clamp(44px, calc(var(--col) / 9.4), 62px); margin: 0 0 22px; max-width: none; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.7); }
  .tela-abertura .lead { max-width: 40ch; margin: 0 0 30px; color: var(--marfim-texto); text-shadow: 0 1px 16px rgba(0, 0, 0, 0.9); }
  .arroba, .retomada { max-width: none; margin: 0; }
  .arroba-nota { color: var(--marfim-corpo); }

  .palco {
    --cx: calc(50vw + min(22vw, 360px));
    --palco-h: clamp(700px, 100svh, 1100px);
    --carol-w: 450px;
    --relevo-w: 190px; --relevo-y: 86px;
    --sala-w: calc(100vw + 2 * min(22vw, 360px));
    --poca-y: calc(var(--palco-h) - 62px);
    grid-area: 1 / 1;
    margin: 0;
    height: var(--palco-h);
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 80%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 80%, rgba(0, 0, 0, 0) 100%);
    background: transparent;
  }
  /* o texto fica no escuro: a sala cai para o preto à esquerda e no alto; a luz fica toda com ela */
  .palco::after {
    background:
      linear-gradient(90deg, rgba(8, 6, 5, 0.92) 0%, rgba(8, 6, 5, 0.8) 26%, rgba(8, 6, 5, 0.42) 40%, rgba(8, 6, 5, 0) 54%),
      linear-gradient(180deg, rgba(8, 6, 5, 0.6) 0%, rgba(8, 6, 5, 0) 22%, rgba(22, 19, 18, 0) 66%, rgba(22, 19, 18, 0.75) 86%, rgba(22, 19, 18, 1) 100%),
      radial-gradient(ellipse 60% 100% at var(--cx) 50%, rgba(6, 4, 4, 0) 50%, rgba(6, 4, 4, 0.5) 100%);
  }
  /* a luz da sala entra do escuro, sem a cortina da frente por baixo */
  .palco .palco-bloco {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) calc(var(--topo-palco)), #000 calc(var(--topo-palco) + 160px));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55) calc(var(--topo-palco)), #000 calc(var(--topo-palco) + 160px));
  }
  .palco-sala {
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco)), rgba(0, 0, 0, 0.35) calc(var(--topo-palco) + 120px), #000 calc(var(--topo-palco) + 300px));
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(var(--topo-palco)), rgba(0, 0, 0, 0.35) calc(var(--topo-palco) + 120px), #000 calc(var(--topo-palco) + 300px));
  }
  .palco-grao, .palco-brilho { -webkit-mask-image: none; mask-image: none; }
  .palco-brilho { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 38%, #000 56%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 38%, #000 56%); }
  /* o L no oval sai do eixo da cabeça: menor, mais alto e ao lado, bordado na cortina */
  .palco-relevo { margin-left: calc(var(--relevo-w) * -0.5 + 190px); opacity: 0.42; }
  .palco-halo { top: calc(var(--palco-h) - var(--carol-w) * 1.5); }

  /* as leitoras em volta dela, do lado da luz: perto (r1, r3), meio (r2, r4); as mais longe ficam para telas largas */
  .palco-retrato.r1, .palco-retrato.r3 { --ret-w: 124px; }
  .palco-retrato.r1 { left: calc(var(--cx) - 304px); right: auto; top: calc(var(--palco-h) * 0.46); }
  .palco-retrato.r3 { left: calc(var(--cx) + 206px); right: auto; top: calc(var(--palco-h) * 0.47); }
  .palco-retrato.r2 { left: calc(var(--cx) - 262px); right: auto; top: calc(var(--palco-h) * 0.14); }
  .palco-retrato.r4 { left: calc(var(--cx) + 188px); right: auto; top: calc(var(--palco-h) * 0.16); }
  .palco-retrato.r5, .palco-retrato.r6 { display: none; }
  .palco-retrato figcaption { position: absolute; left: 0; right: 0; }

  .quem-le { grid-area: 2 / 1; width: min(560px, calc(100vw - 2 * var(--gutter))); margin: 8px auto 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .palco { --carol-w: 400px; }
  .palco-retrato.r2 { display: none; }
  .palco-retrato.r1 { left: calc(var(--cx) - 290px); }
  .palco-retrato.r3 { left: calc(var(--cx) + 176px); }
  .palco-retrato.r4 { left: calc(var(--cx) + 150px); }
}
@media (min-width: 1440px) {
  .palco-retrato.r5, .palco-retrato.r6 { display: block; }
  .palco-retrato.r5 { left: calc(var(--cx) - 420px); right: auto; top: calc(var(--palco-h) * 0.3); }
  .palco-retrato.r6 { left: calc(var(--cx) + 330px); right: auto; top: calc(var(--palco-h) * 0.32); }
}